/* ===== MOBILE TABLE MODE (CLEAN CARDS) ===== */
@media (max-width: 768px), (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
    /* Force all containers in the hierarchy to block & 100% width to prevent Safari flex/grid shrink-wrapping */
    .panel-scroll:not(.desk-only),
    .io-section:not(.desk-only),
    .dp-section:not(.desk-only),
    .table-scroll:not(.desk-only),
    table.data-table.mobile-table-mode {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    table.data-table.mobile-table-mode {
        table-layout: auto !important;
        border: none !important;
    }
    .mobile-table-mode thead,
    #dp-fullview .mobile-table-mode thead {
        display: none !important;
    }
    .mobile-table-mode tbody {
        display: block !important;
    }

    /* === 1. COLLAPSED STATE (Read-Only Card, Packlist Style) === */
    .mobile-table-mode tr {
        display: grid !important;
        grid-template-columns: 32px 1fr 55px 85px 16px !important;
        grid-template-areas: "ch name mic loom arrow" !important;
        background: var(--bg-secondary) !important;
        border-radius: 8px !important;
        padding: 8px 10px !important;
        margin-bottom: 8px !important;
        border: 1px solid var(--border) !important;
        cursor: pointer;
        transition: all 0.2s ease;
        align-items: center !important;
        -webkit-tap-highlight-color: transparent !important;
        width: 100% !important; /* Force full width for cards */
        box-sizing: border-box !important;
    }

    .mobile-table-mode #outputBody tr {
        grid-template-columns: 32px 1fr auto 16px !important;
        grid-template-areas: "ch name loom arrow" !important;
    }

    #dp-fullview {
        align-items: stretch !important;
    }

    #dp-fullview .mobile-table-mode tr {
        display: flex !important;
        align-items: center !important;
        width: 100% !important; /* Force full width */
        box-sizing: border-box !important;
        gap: 8px !important;
    }

    /* Hide all tds by default to prevent them from breaking the grid layout */
    .data-table.mobile-table-mode tr:not(.mobile-expanded) td {
        display: none !important;
        padding: 0 !important;
        border: none !important;
        width: auto !important; /* Defeat styles.css width: 40% !important */
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: none !important;
        
        /* Reset sticky styles from styles.css to ensure cards are clean */
        position: static !important;
        background-color: transparent !important;
        box-shadow: none !important;
        left: auto !important;
        z-index: auto !important;
    }

    /* Drag handle & loom-fill-btn hidden */
    .data-table.mobile-table-mode td.drag-handle,
    .data-table.mobile-table-mode .loom-fill-btn { display: none !important; }

    /* Map the visible fields to the single-line grid */
    .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-ch,
    .mobile-table-mode tr:not(.mobile-expanded) td.col-sbnum {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-area: ch !important;
        justify-content: center;
        align-items: center;
        min-width: 0 !important;
    }
    .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-input,
    .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-name,
    .mobile-table-mode tr:not(.mobile-expanded) td.col-sticky-name {
        display: grid !important;
        grid-area: name !important;
        align-items: center !important;
        background: transparent !important;
        background-color: transparent !important;
        position: static !important;
        box-shadow: none !important;
        min-width: 0 !important;
        container-type: inline-size;
        container-name: namecol;
    }

    .mobile-table-mode tr:not(.mobile-expanded) td:has(> .cell-input) {
        background: transparent !important;
        background-color: transparent !important;
    }
    .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-mic {
        display: grid !important;
        grid-area: mic !important;
        align-items: center !important;
        min-width: 0 !important;
        container-type: inline-size;
        container-name: miccol;
    }
    .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-loom,
    .mobile-table-mode tr:not(.mobile-expanded) td:has(> .cell-select[data-field="loom"]) {
        display: grid !important;
        grid-area: loom !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 6px !important;
        height: 28px !important;
        margin: auto 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
        gap: 2px !important;
    }

    #dp-fullview .mobile-table-mode tr:not(.mobile-expanded) td.dp-col-sticky-ch {
        display: block !important;
        flex: 0 0 32px !important;
        min-width: 0 !important;
        font-weight: 800 !important;
        color: var(--text-muted) !important;
        font-size: 14px !important;
        text-align: center !important;
    }
    /* Hide the dropdown itself in the collapsed card to save space */
    #dp-fullview .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-dpTxSource {
        display: none !important;
    }
    
    /* Show both TX and RX side-by-side as flex items */
    #dp-fullview .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-dpTxLabel,
    #dp-fullview .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-dpRxLabel {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0 !important;
        min-width: 80px !important; /* Prevent collapsing when empty */
        justify-content: center !important;
    }
    
    /* Add TX and RX labels above the inputs to show context */
    #dp-fullview .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-dpTxLabel::before {
        content: "TX (Send)";
        font-size: 8px !important;
        color: var(--text-muted) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        margin-bottom: 2px !important;
        display: block !important;
    }
    #dp-fullview .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-dpRxLabel::before {
        content: "RX (Receive)";
        font-size: 8px !important;
        color: var(--text-muted) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        margin-bottom: 2px !important;
        display: block !important;
    }
    #dp-fullview .mobile-table-mode tr:not(.mobile-expanded) td:last-child {
        flex: 0 0 16px !important;
    }

    /* Make inputs look like static text in collapsed state, disable clicking */
    .mobile-table-mode tr:not(.mobile-expanded) input,
    .mobile-table-mode tr:not(.mobile-expanded) select {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        pointer-events: none !important;
        -webkit-appearance: none !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: auto !important;
        outline: none !important;
        min-width: 0 !important;
        opacity: 1 !important; /* Force visible placeholders on empty inputs */
    }

    /* Styling the static text (Packlist style) */
    .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-ch input,
    .mobile-table-mode tr:not(.mobile-expanded) td.col-sbnum input {
        font-weight: 800 !important;
        color: var(--text-muted) !important;
        font-size: 14px !important;
        text-align: center !important;
        width: 100% !important;
    }
    .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-name input,
    .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-input input {
        font-weight: 600 !important;
        font-size: 14px !important;
        color: var(--text-primary) !important;
        text-overflow: ellipsis;
        white-space: nowrap !important;
        overflow: hidden !important;
        width: 100% !important;
        transition: font-size 0.2s;
    }

    #dp-fullview .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-dpTxSource select,
    #dp-fullview .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-dpTxLabel input {
        font-weight: 600 !important;
        font-size: 12px !important;
        color: var(--text-primary) !important;
        text-overflow: ellipsis;
        white-space: nowrap !important;
        overflow: hidden !important;
        width: 100% !important;
    }
    
    
    @container namecol (max-width: 80px) {
        .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-name input,
        .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-input input {
            font-size: 11px !important;
            letter-spacing: -0.3px !important;
        }
    }

    .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-mic input {
        font-weight: 700 !important;
        font-size: 13px !important;
        color: var(--text-primary) !important;
        opacity: 0.8 !important;
        text-overflow: ellipsis;
        white-space: nowrap !important;
        overflow: hidden !important;
        width: 100% !important;
    }
    
    @container miccol (max-width: 50px) {
        .mobile-table-mode tr:not(.mobile-expanded) td.mob-col-mic input {
            font-size: 10px !important;
            letter-spacing: -0.3px !important;
        }
    }

    /* Arrow icon using CSS ::after on the TR */
    .mobile-table-mode tr::after {
        content: "▾";
        grid-area: arrow;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: var(--text-muted);
        font-size: 16px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }


    /* === 2. EXPANDED STATE (Editable Form Mode) === */
    .data-table.mobile-table-mode tbody tr.mobile-expanded {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 24px 20px !important;
        background: var(--bg-tertiary) !important;
        border: 1px solid var(--border) !important;
        box-shadow: 0 12px 32px rgba(0,0,0,0.3) !important;
        border-radius: 12px !important;
        margin: 12px 0 24px !important;
        -webkit-tap-highlight-color: transparent !important;
        cursor: default !important;
        z-index: 10;
        position: relative;
    }

    /* Show a 'Close' button at the bottom of the expanded card instead of hiding the arrow */
    .data-table.mobile-table-mode tbody tr.mobile-expanded::after {
        content: "▴" !important;
        display: flex !important;
        width: 100% !important;
        padding: 12px !important;
        margin-top: 8px !important;
        justify-content: center !important;
        align-items: center !important;
        background: var(--bg-secondary) !important;
        border-radius: 8px !important;
        font-size: 24px !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
        pointer-events: none !important; /* Passes click to the TR handler */
    }

    /* Show all columns in expanded mode */
    .data-table.mobile-table-mode tbody tr.mobile-expanded td {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        min-height: 0 !important;
    }

    /* Hidden elements in expanded mode */
    .data-table.mobile-table-mode tbody tr.mobile-expanded td:not(.mob-col-ch):not(.col-sbnum):not(.mob-col-input):not(.mob-col-name):not(.col-sticky-name):not(.mob-col-mic):not(.mob-col-loom):not(.mob-col-position):not(.mob-col-stand):not(.mob-col-category):not(.mob-col-info):not(.mob-col-splitCh):not(:has([data-field="splitCh"])):not(:has([data-field="split"])):not(.dp-col-sticky-ch):not(.mob-col-dpTxSource):not(.mob-col-dpTxLabel):not(.mob-col-dpRxLabel) {
        display: none !important;
    }

    /* Labels */
    .data-table.mobile-table-mode tbody tr.mobile-expanded td::before {
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        font-weight: 700 !important;
        color: var(--text-secondary) !important;
        margin-bottom: 0 !important;
        padding-bottom: 6px !important;
        background: transparent !important;
        display: block !important;
        border-radius: 0 !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    .data-table.mobile-table-mode tbody tr.mobile-expanded td.mob-col-ch::before,
    .data-table.mobile-table-mode tbody tr.mobile-expanded td.col-sbnum::before { content: "Channel"; }
    .data-table.mobile-table-mode tbody tr.mobile-expanded td.mob-col-input::before,
    .data-table.mobile-table-mode tbody tr.mobile-expanded td.mob-col-name::before,
    .data-table.mobile-table-mode tbody tr.mobile-expanded td.col-sticky-name::before { content: "Name"; }
    .data-table.mobile-table-mode tbody tr.mobile-expanded td.mob-col-mic::before { content: "Mic / DI"; }
    .data-table.mobile-table-mode tbody tr.mobile-expanded td.mob-col-loom::before { content: "Loom"; }
    .data-table.mobile-table-mode tbody tr.mobile-expanded td.mob-col-position::before { content: "Position"; }
    .data-table.mobile-table-mode tbody tr.mobile-expanded td.mob-col-stand::before { content: "Stand"; }
    .data-table.mobile-table-mode tbody tr.mobile-expanded td.mob-col-category::before { content: "Category"; }
    .data-table.mobile-table-mode tbody tr.mobile-expanded td.mob-col-info::before { content: "Info"; }
    .data-table.mobile-table-mode tbody tr.mobile-expanded td.mob-col-splitCh::before,
    .data-table.mobile-table-mode tbody tr.mobile-expanded td:has([data-field="splitCh"])::before,
    .data-table.mobile-table-mode tbody tr.mobile-expanded td:has([data-field="split"])::before { content: "Split / Link"; }

    #dp-fullview .mobile-table-mode tbody tr.mobile-expanded td.dp-col-sticky-ch::before { content: "Channel"; }
    #dp-fullview .mobile-table-mode tbody tr.mobile-expanded td.mob-col-dpTxSource::before { content: "TX Source"; }
    #dp-fullview .mobile-table-mode tbody tr.mobile-expanded td.mob-col-dpTxLabel::before { content: "TX Label (Send)"; }
    #dp-fullview .mobile-table-mode tbody tr.mobile-expanded td.mob-col-dpRxLabel::before { content: "RX Label (Receive)"; }

    /* Field styling — clear editable pills with visible borders */
    .data-table.mobile-table-mode tbody tr.mobile-expanded .cell-input, 
    .data-table.mobile-table-mode tbody tr.mobile-expanded .cell-select, 
    .data-table.mobile-table-mode tbody tr.mobile-expanded textarea,
    .data-table.mobile-table-mode tbody tr.mobile-expanded input[type="number"],
    .data-table.mobile-table-mode tbody tr.mobile-expanded input[type="text"] {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        padding: 12px 14px !important;
        background: var(--bg-secondary) !important;
        border: 1px solid rgba(255,255,255,0.18) !important;
        border-radius: 10px !important;
        color: var(--text-primary) !important;
        box-sizing: border-box !important;
        min-height: 48px !important;
        height: auto !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
        margin: 0 !important;
        text-align: left !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
        -webkit-touch-callout: none !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }

    /* Readonly fields — subtle dimmed style */
    .data-table.mobile-table-mode tbody tr.mobile-expanded .cell-input[readonly],
    .data-table.mobile-table-mode tbody tr.mobile-expanded input[readonly] {
        background: rgba(255,255,255,0.03) !important;
        border-color: rgba(255,255,255,0.08) !important;
        color: var(--text-muted) !important;
        font-weight: 600 !important;
        box-shadow: none !important;
    }
    
    /* Allow text selection only for actual text fields, not selects */
    .data-table.mobile-table-mode tbody tr.mobile-expanded .cell-input:not([readonly]),
    .data-table.mobile-table-mode tbody tr.mobile-expanded textarea:not([readonly]),
    .data-table.mobile-table-mode tbody tr.mobile-expanded input[type="text"]:not([readonly]) {
    }

    /* Transparent selects inside Loom TD so the inline TD background shows! */
    .data-table.mobile-table-mode tbody tr.mobile-expanded td.mob-col-loom {
        padding: 12px 14px !important;
        border-radius: 8px !important;
    }
    .data-table.mobile-table-mode tbody tr.mobile-expanded td.mob-col-loom .cell-select {
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        min-height: auto !important;
    }

    /* Select dropdown pill — neutral with gray chevron */
    .data-table.mobile-table-mode tbody tr.mobile-expanded .cell-select {
        appearance: none !important;
        -webkit-appearance: none !important;
        color-scheme: light !important;
        padding-right: 36px !important;
        background-color: var(--bg-secondary) !important;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        background-size: 14px !important;
        cursor: pointer !important;
    }

    /* Fix for raw text / read-only cells in Collab/Stage View */
    .data-table.mobile-table-mode tbody tr.mobile-expanded td {
        font-size: 16px !important;
        font-weight: 500 !important;
        font-style: normal !important;
        color: var(--text-primary) !important;
        line-height: 1.4 !important;
    }

    /* Focus state — subtle ring for visual connection */
    .data-table.mobile-table-mode tbody tr.mobile-expanded .cell-input:focus, 
    .data-table.mobile-table-mode tbody tr.mobile-expanded .cell-select:focus,
    .data-table.mobile-table-mode tbody tr.mobile-expanded textarea:focus {
        border-color: rgba(255,255,255,0.35) !important;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.08) !important;
        background: var(--bg-secondary) !important;
        outline: none !important;
    }

    /* iOS select arrow */
    .data-table.mobile-table-mode tbody tr.mobile-expanded .cell-select {
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23999999%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 14px top 50% !important;
        background-size: 10px auto !important;
        padding-right: 36px !important;
    }

    /* Force light dropdown options for native picker — prevents all-blue-highlight bug.
       Overrides both CSS background and inline style="color:..." from buildChSelect(). */
    .data-table.mobile-table-mode select option {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    .data-table.mobile-table-mode select optgroup {
        background-color: #f0f0f0 !important;
        color: #333333 !important;
    }

    /* Neutralize desktop row-selection highlight in mobile cards.
       The blue rgba(64,112,184,0.12) tint from .row-selected makes
       ALL fields in expanded cards appear blue-highlighted. */
    .data-table.mobile-table-mode tbody tr.row-selected td,
    .data-table.mobile-table-mode tbody tr.row-selected.mobile-expanded td {
        background: transparent !important;
        border-top: none !important;
        border-bottom: none !important;
    }
    .data-table.mobile-table-mode tbody tr.row-selected td:first-child {
        border-left: none !important;
    }
}

/* === Light Mode overrides for mobile cards === */
@media (max-width: 768px), (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
    [data-theme="light"] .data-table.mobile-table-mode tbody tr.mobile-expanded {
        background: #ffffff !important;
        border-color: rgba(0,0,0,0.1) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    }

    [data-theme="light"] .data-table.mobile-table-mode tbody tr.mobile-expanded .cell-input,
    [data-theme="light"] .data-table.mobile-table-mode tbody tr.mobile-expanded .cell-select,
    [data-theme="light"] .data-table.mobile-table-mode tbody tr.mobile-expanded textarea,
    [data-theme="light"] .data-table.mobile-table-mode tbody tr.mobile-expanded input[type="number"],
    [data-theme="light"] .data-table.mobile-table-mode tbody tr.mobile-expanded input[type="text"] {
        background: #f8f9fa !important;
        border-color: rgba(0,0,0,0.15) !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
    }

    [data-theme="light"] .data-table.mobile-table-mode tbody tr.mobile-expanded .cell-input[readonly],
    [data-theme="light"] .data-table.mobile-table-mode tbody tr.mobile-expanded input[readonly] {
        background: #f0f1f3 !important;
        border-color: rgba(0,0,0,0.08) !important;
        color: #999 !important;
    }

    [data-theme="light"] .data-table.mobile-table-mode tbody tr.mobile-expanded .cell-input:focus,
    [data-theme="light"] .data-table.mobile-table-mode tbody tr.mobile-expanded .cell-select:focus,
    [data-theme="light"] .data-table.mobile-table-mode tbody tr.mobile-expanded textarea:focus {
        border-color: rgba(0,0,0,0.3) !important;
        box-shadow: 0 0 0 2px rgba(0,0,0,0.06) !important;
        background: #ffffff !important;
    }

    [data-theme="light"] .data-table.mobile-table-mode tbody tr.mobile-expanded::after {
        background: #f0f1f3 !important;
        color: #aaa !important;
    }
}