/* DeedsIQ mobile layer. Linked last in on every page, so it can override each page's inline CSS. Phones: up to 700px wide. Small phones: up to 480px. */ /* Smooth touch scrolling for every table that still scrolls sideways */ .table-scroll, .tbl-wrap, .preview-scroll { -webkit-overflow-scrolling: touch; } @media (max-width: 768px) { /* 16px form text stops iOS from zooming the page when a field gets focus */ input, select, textarea { font-size: 16px !important; } /* Side drawer for a property fills the screen instead of a narrow strip */ .detail-drawer { width: 100vw !important; max-width: 100vw !important; } } /* ---------- Property tables become one card per property ---------- */ @media (max-width: 700px) { #tableScroll, .cat-modal-table { overflow: visible !important; max-height: none !important; } #tableScroll table, .cat-modal-table table { display: block; min-width: 0 !important; width: 100%; table-layout: auto; } #tableScroll thead, .cat-modal-table thead { display: none; } #tableScroll tbody, .cat-modal-table tbody { display: block; } #propsBody tr, #categoryModalBody tr, #watchBody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.65rem; margin: 0 0 0.65rem; padding: 0.8rem 0.9rem; border: 1px solid var(--border2, rgba(128, 128, 128, 0.25)) !important; border-radius: 12px; background: var(--card2, transparent); } #propsBody td, #categoryModalBody td, #watchBody td { display: block; padding: 0 !important; max-width: none !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; text-align: left !important; border: 0 !important; font-size: 0.9rem; } /* Small caption above the two money columns */ #propsBody td:nth-child(9)::before, #propsBody td:nth-child(10)::before, #categoryModalBody td:nth-child(9)::before, #categoryModalBody td:nth-child(10)::before, #watchBody td:nth-child(7)::before, #watchBody td:nth-child(8)::before, #watchBody td:nth-child(9)::before { display: block; margin-bottom: 0.1rem; color: var(--muted, #888); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; } /* Properties page and dashboard list: 1 star, 2 item, 3 cause, 4 county, 5 address, 6 status, 7 sale type, 8 acres, 9 opening bid, 10 market value */ #propsBody td:nth-child(1), #categoryModalBody td:nth-child(1) { order: 1; } #propsBody td:nth-child(4), #categoryModalBody td:nth-child(4) { order: 2; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } #propsBody td:nth-child(2), #categoryModalBody td:nth-child(2) { order: 3; color: var(--muted, #888); } #propsBody td:nth-child(2)::before, #categoryModalBody td:nth-child(2)::before { content: "Item "; } #propsBody td:nth-child(6), #categoryModalBody td:nth-child(6) { order: 4; margin-left: auto; } #propsBody td:nth-child(5), #categoryModalBody td:nth-child(5) { order: 5; flex: 1 1 100%; font-weight: 500; } #propsBody td:nth-child(3), #categoryModalBody td:nth-child(3) { order: 6; font-size: 0.82rem; } #propsBody td:nth-child(7), #categoryModalBody td:nth-child(7) { order: 7; } #propsBody td:nth-child(8), #categoryModalBody td:nth-child(8) { order: 8; color: var(--muted, #888); font-size: 0.82rem; } #propsBody td:nth-child(8)::before, #categoryModalBody td:nth-child(8)::before { content: "Acres "; } #propsBody td:nth-child(9), #categoryModalBody td:nth-child(9), #propsBody td:nth-child(10), #categoryModalBody td:nth-child(10) { flex: 1 1 calc(50% - 0.65rem); margin-top: 0.35rem; padding-top: 0.55rem !important; border-top: 1px solid var(--border2, rgba(128, 128, 128, 0.25)) !important; font-size: 1rem; } #propsBody td:nth-child(9), #categoryModalBody td:nth-child(9) { order: 9; } #propsBody td:nth-child(10), #categoryModalBody td:nth-child(10) { order: 10; } #propsBody td:nth-child(9)::before, #categoryModalBody td:nth-child(9)::before { content: "Opening bid"; } #propsBody td:nth-child(10)::before, #categoryModalBody td:nth-child(10)::before { content: "Market value"; } /* Watchlist: 1 research, 2 item, 3 county, 4 address, 5 cause, 6 status, 7 opening bid, 8 max bid, 9 market value, 10 action (COTD and ROI show in the drawer) */ #watchBody td:nth-child(3) { order: 1; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } #watchBody td:nth-child(2) { order: 2; color: var(--muted, #888); } #watchBody td:nth-child(2)::before { content: "Item "; } /* MVBA online sales number their own lots, so the card says Lot */ #propsBody tr.lot-row td:nth-child(2)::before, #categoryModalBody tr.lot-row td:nth-child(2)::before, #watchBody tr.lot-row td:nth-child(2)::before { content: "Lot "; } #watchBody td:nth-child(6) { order: 3; margin-left: auto; } #watchBody td:nth-child(4) { order: 4; flex: 1 1 100%; font-weight: 500; } #watchBody td:nth-child(5) { order: 5; flex: 1 1 100%; font-size: 0.82rem; } #watchBody td:nth-child(7), #watchBody td:nth-child(9) { flex: 1 1 calc(50% - 0.65rem); margin-top: 0.35rem; padding-top: 0.55rem !important; border-top: 1px solid var(--border2, rgba(128, 128, 128, 0.25)) !important; font-size: 1rem; } #watchBody td:nth-child(8) { flex: 1 1 100%; } #watchBody td:nth-child(7) { order: 6; } #watchBody td:nth-child(9) { order: 7; } #watchBody td:nth-child(8) { order: 8; } #watchBody td:nth-child(7)::before { content: "Opening bid"; } #watchBody td:nth-child(8)::before { content: "Max bid"; } #watchBody td:nth-child(9)::before { content: "Market value"; } #watchBody td:nth-child(1) { order: 9; } #watchBody td:nth-child(10) { order: 10; margin-left: auto; } } /* ---------- Top bar on small phones: keep all icons on one row ---------- */ @media (max-width: 480px) { .topbar { gap: 0.35rem; padding-left: 0.6rem; padding-right: 0.6rem; } .topbar-month-wrap { max-width: 30vw !important; } /* Shortcuts that duplicate the side menu or an on-screen field are hidden so the avatar stays on the same row as the other icons. */ .topbar > .tb-icon-btn[title="Search"], .topbar > a.tb-icon-btn[title="Properties"], .topbar > a.tb-icon-btn[title="Dashboard"] { display: none !important; } /* Bigger tap area for the star in property cards */ #propsBody .btn-star, #categoryModalBody .btn-star { min-width: 40px; min-height: 40px; } }