/* Searchable "Select Agent" combobox — type name OR email to filter, native
   dropdown kept underneath as the value holder. Shared by the my-properties
   dashboard and the single-property overview page. */
.listin-agent-combo{position:relative;flex:1 1 auto;min-width:0}
.listin-agent-combo .listin-agent-input{width:100%}
.listin-agent-combo .listin-agent-list{position:absolute;z-index:9999;left:0;right:0;top:100%;max-height:240px;overflow-y:auto;background:#fff;border:1px solid #d7dbe0;border-top:none;border-radius:0 0 8px 8px;box-shadow:0 8px 20px rgba(15,23,42,.14);display:none;text-align:left}
.listin-agent-combo .listin-agent-list.open{display:block}
.listin-agent-combo .listin-agent-item{padding:8px 12px;cursor:pointer;font-size:13px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listin-agent-combo .listin-agent-item small{color:#8a8a8a;display:block;font-size:11px}
.listin-agent-combo .listin-agent-item:hover,.listin-agent-combo .listin-agent-item.active{background:#eef6ff}
.listin-agent-combo .listin-agent-empty{padding:8px 12px;color:#999;font-size:13px}

/* ---- Grouped row controls (Assign Agent / Update Status) ---- */
.listin-ctrl-label{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#64748b}
.listin-ctrl-label i{font-size:12px;color:#94a3b8}
.listin-ctrl-group{margin-bottom:12px}
.listin-ctrl-group:last-child{margin-bottom:0}
/* control row (select + button side by side) — base so it works on desktop too */
.listin-ctrl-row{display:flex;gap:8px;align-items:stretch;flex-wrap:nowrap}
.listin-ctrl-row .listin-agent-combo{flex:1 1 auto;min-width:0}
.listin-ctrl-row .btn-assign-orange,.listin-ctrl-row .assign-agent-btn{flex:0 0 auto}

/* Price pill + title-bar only appear on the mobile card; desktop uses the table columns. */
.listin-price-pill{display:none}
.listin-row-titlebar{display:none}

/* Collapsible "Assign / Update" row — sits inside the card, below the info. */
.listin-toggle-controls{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
    background:transparent; border:none; border-top:0.5px solid #eceef1; border-radius:0;
    padding:12px 2px 2px; font-size:13px; font-weight:600; color:#0f766e; cursor:pointer;
}
.listin-toggle-controls .listin-toggle-caret{transition:transform .2s ease; font-size:12px; color:#94a3b8}
.listin-toggle-controls.open .listin-toggle-caret{transform:rotate(180deg)}
.mobile-actions-row .listin-row-controls{margin-top:8px}

/* Consistent control heights + button shape (brand: orange Assign, teal Apply). */
.mobile-assign-wrapper .btn-assign-orange,
.listin-status-box .listin-status-apply{height:44px;font-weight:600;white-space:nowrap;padding:0 18px}
.listin-status-box .listin-status-select,
.mobile-assign-wrapper .listin-agent-input,
.listin-agent-combo .listin-agent-input{height:44px}

/* Desktop assign cell: a light divider between the Assign and Status controls. */
.property-table-assign .listin-status-box{margin-top:12px;padding-top:12px;border-top:1px dashed #e6e9ee}

/* ---- Mobile: wrap the row controls in a soft card ---- */
@media (max-width:991.98px){
    .listin-row-controls{background:#f8fafc;border:1px solid #e6e9ee;border-radius:12px;padding:12px;margin-top:8px;box-shadow:0 1px 2px rgba(15,23,42,.04)}

    /* Both control rows use a gap layout (not Bootstrap's joined input-group). */
    .listin-row-controls .listin-ctrl-row{display:flex;gap:8px;flex-wrap:nowrap;align-items:stretch}
    .listin-row-controls .mobile-assign-wrapper{margin:0}
    .listin-row-controls .listin-agent-combo{flex:1 1 auto;min-width:0}
    .listin-row-controls .listin-agent-input{font-size:14px;line-height:1;padding:6px 12px;border:1px solid #d7dbe0;border-radius:8px}
    .listin-row-controls .btn-assign-orange{flex:0 0 auto;border-radius:8px}

    .listin-row-controls .listin-status-select{flex:1 1 auto;min-width:0;height:44px;font-size:14px;border:1px solid #d7dbe0;border-radius:8px}
    .listin-row-controls .listin-status-apply{flex:0 0 auto;border-radius:8px}
    .listin-row-controls .listin-agent-list{font-size:14px}

    /* Inside the card the status group already has its own label — no divider. */
    .listin-row-controls .listin-status-box{border-top:none;margin-top:0;padding-top:0}
    .listin-row-controls .listin-status-box.listin-ctrl-group{margin-bottom:0}
}

/* ============================================================
   My-properties card layout (<=991.98px)
   Each listing becomes a self-contained card; the row's cells are
   re-arranged with CSS grid (larger photo + price pill on the left,
   title & details on the right). No markup change — reversible.
   ============================================================ */
@media (max-width:991.98px){
    /* Make the responsive table a clean block layout */
    .dashboard-table-properties{display:block;width:100%;border:0}
    .dashboard-table-properties thead{display:none}
    .dashboard-table-properties tbody{display:block;width:100%}

    /* Listing = a card. Top part (info) + bottom part (manage) form one unit. */
    .dashboard-table-properties > tbody > tr:not(.mobile-actions-row){
        display:grid !important;
        grid-template-columns:180px minmax(0,1fr);
        column-gap:14px;
        row-gap:2px;
        align-items:start;
        background:#fff;
        border:1px solid #e8ebef;
        border-bottom:none;
        border-radius:16px 16px 0 0;
        box-shadow:0 2px 10px rgba(15,23,42,.06);
        padding:14px 14px 6px !important;
        margin:0 !important;
    }
    /* Manage section = the bottom of the same card */
    .dashboard-table-properties > tbody > tr.mobile-actions-row{
        display:block !important; margin:0 0 16px; padding:0;
        background:#fff; border:1px solid #e8ebef; border-top:none;
        border-radius:0 0 16px 16px; box-shadow:0 2px 10px rgba(15,23,42,.06);
    }
    .dashboard-table-properties > tbody > tr.mobile-actions-row > td{padding:0 12px 12px !important;border:0 !important;display:block}
    .dashboard-table-properties > tbody > tr.mobile-actions-row .listin-row-controls{margin-top:0}

    /* hide bulk checkbox, columns not needed, and the in-cell duplicate title/LN
       + the unit-cell mobile Actions (we use the full-width one below instead) */
    .dashboard-table-properties .bulk-col,
    .dashboard-table-properties .property-table-type[data-label="Type"],
    .dashboard-table-properties .property-table-details,
    .dashboard-table-properties .property-table-price,
    .dashboard-table-properties .property-table-address .listin-addr-title,
    .dashboard-table-properties .property-table-address .listin-addr-ln,
    .dashboard-table-properties .property-table-address .listin-addr-badges,
    .dashboard-table-properties .property-table-address .listin-addr-note,
    /* Hide the DESKTOP assign cell in card mode — the card has its own assign in
       the manage section, so without this both showed (double "Select Agent"). */
    .dashboard-table-properties .property-table-assign,
    .dashboard-table-properties .property-table-actions{display:none !important}

    /* Title + LN pill: full-width header on top */
    .dashboard-table-properties .listin-row-titlebar{
        display:flex; align-items:center; gap:8px; flex-wrap:wrap;
        grid-column:1 / -1; grid-row:1;
        padding:0 0 10px !important; margin-bottom:10px;
        border:0 !important; border-bottom:0.5px solid #eceef1 !important;
    }
    .dashboard-table-properties .listin-row-titlebar::before{content:none !important}
    .dashboard-table-properties .listin-rt-title{
        font-size:15px; font-weight:700; line-height:1.3; color:#0d9488;
        /* Long names must wrap onto a new line instead of running off the card:
           min-width:0 lets the flex item shrink below its content width. */
        flex:1 1 auto; min-width:0;
        white-space:normal; overflow-wrap:anywhere; word-break:break-word;
    }
    .dashboard-table-properties .listin-rt-ln{flex:0 0 auto}
    .dashboard-table-properties .listin-rt-ln{
        font-size:11px;font-weight:600;color:#64748b;
        background:#f1f5f9;border:0.5px solid #e2e8f0;border-radius:999px;padding:2px 9px;white-space:nowrap;
    }
    .dashboard-table-properties .listin-rt-badges{display:inline-flex;gap:5px;align-items:center;flex-wrap:wrap}
    .dashboard-table-properties .listin-rt-badges br{display:none}
    .dashboard-table-properties .listin-rt-badges .badge{font-size:10px}
    .dashboard-table-properties .listin-rt-note{color:#2563eb;font-size:15px;line-height:1;text-decoration:none}

    /* Thumbnail: left column, spans the badges + details rows */
    .dashboard-table-properties .property-table-thumbnail{
        grid-column:1; grid-row:2 / span 2;
        position:relative; padding:0 !important; border:0 !important;
    }
    /* kill both pseudo-elements: ::before (label) and ::after (the theme/custom
       CSS duplicate price) — the price is now the .listin-price-pill span. */
    .dashboard-table-properties .property-table-thumbnail::before,
    .dashboard-table-properties .property-table-thumbnail::after{content:none !important;display:none !important}
    .dashboard-table-properties .property-table-thumbnail .table-property-thumb{position:relative;display:block;line-height:0;width:180px !important}
    .dashboard-table-properties .property-table-thumbnail .table-property-thumb img{
        width:180px !important; height:150px !important; object-fit:cover;
        border-radius:12px; display:block;
    }
    /* Price pill seated on the IMAGE (anchored to .table-property-thumb, not the
       cell — so it no longer overlaps the bed/bath/car row below the photo). */
    .dashboard-table-properties .property-table-thumbnail .listin-price-pill{
        display:inline-block; position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
        background:#0f766e; color:#fff; font-weight:700; font-size:12px;
        line-height:1; padding:5px 10px; border-radius:999px;
        box-shadow:0 3px 8px rgba(0,0,0,.35);
        max-width:calc(100% - 8px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center;
    }
    /* Bed/bath/car chips under the photo */
    .dashboard-table-properties .property-table-thumbnail .mobile-only-property-info{margin-top:10px}
    .dashboard-table-properties .property-table-thumbnail .property-features{
        font-size:12px !important; color:#475569; font-weight:600; white-space:nowrap;
    }

    /* Right column, top: creator/agent badges only (no empty <br> lines) */
    .dashboard-table-properties .property-table-address{
        grid-column:2; grid-row:2; padding:0 !important; border:0 !important;
    }
    .dashboard-table-properties .property-table-address::before{content:none !important}
    .dashboard-table-properties .property-table-address br{display:none !important}
    .dashboard-table-properties .property-table-address .assigned-agent-info{margin-top:0 !important}

    /* Right column, below badges: unit details (sqft / unit / owner / contact) */
    .dashboard-table-properties .property-table-type[data-label="Unit Details"]{
        grid-column:2; grid-row:3; padding:4px 0 0 !important; border:0 !important;
        font-size:13px; line-height:1.55; color:#475569;
    }
    .dashboard-table-properties .property-table-type[data-label="Unit Details"]::before{content:none !important}

    /* Actions: use the theme's in-cell mobile dropdown (right column, under
       details); make it a tidy full-width button.
       display:block is forced because the theme hides .mobile-actions from 768px
       while the site CSS hides .property-table-actions up to 768px — at exactly
       768px that left the row with no Actions button at all. */
    .dashboard-table-properties .property-table-type .mobile-actions{
        display:block !important; margin-top:12px;
    }
    .dashboard-table-properties .property-table-type .mobile-actions .property-action-menu,
    .dashboard-table-properties .property-table-type .mobile-actions .dropdown-toggle{width:100%}

    /* Assign cell (if ever visible) also spans full width */
    .dashboard-table-properties .property-table-assign{grid-column:1 / -1}
}

/* ============================================================
   Desktop my-properties table — compact & tidy (>=992px)
   ============================================================ */
@media (min-width:992px){
    .dashboard-table-properties{font-size:13px}
    .dashboard-table-properties > thead > tr > th{
        padding:12px 10px !important; font-size:12px; letter-spacing:.2px;
        color:#475569; background:#f8fafc; border-bottom:1px solid #e8ebef;
    }
    .dashboard-table-properties > tbody > tr > td{padding:12px 10px !important; vertical-align:top}
    .dashboard-table-properties > tbody > tr{border-bottom:1px solid #eef0f2}
    .dashboard-table-properties > tbody > tr:hover{background:#fafbfc}

    .dashboard-table-properties .property-table-thumbnail img{
        width:104px !important; height:78px !important; object-fit:cover; border-radius:8px;
    }
    .dashboard-table-properties .property-table-address a strong{font-size:14px; color:#0d9488}

    /* Details column: compact Follow Up / History buttons */
    .dashboard-table-properties .property-table-details .btn{padding:5px 12px; font-size:12px; margin-bottom:4px}

    /* Assign / Update column: tighter controls, clear divider before status */
    .dashboard-table-properties .property-table-assign .form-group{margin:0 !important}
    .dashboard-table-properties .property-table-assign .listin-status-box{margin-top:8px; padding-top:8px}
    .dashboard-table-properties .property-table-assign .input-group .form-control,
    .dashboard-table-properties .property-table-assign .listin-agent-input,
    .dashboard-table-properties .property-table-assign .listin-status-select,
    .dashboard-table-properties .property-table-assign .assign-agent-btn,
    .dashboard-table-properties .property-table-assign .listin-status-apply{height:38px}
}

/* ---- Live-update flash (status badge / assigned agent / History button) ---- */
@keyframes listinFlash{
    0%   {background-color:#fff3cd; box-shadow:0 0 0 4px rgba(255,193,7,.35); border-radius:6px}
    70%  {background-color:#fff8e1; box-shadow:0 0 0 3px rgba(255,193,7,.18); border-radius:6px}
    100% {background-color:transparent; box-shadow:none}
}
.listin-flash{animation:listinFlash 1.5s ease-out}
.listin-status-badge{display:inline-block}
.listin-status-badge:empty{display:none}

/* ============================================================
   Follow-Up History modal — independent narrow layout (<=991.98px)
   The site CSS pins #historyModal to min-width:980px, which makes it
   unusable on a phone. Here it becomes a full-width sheet and the
   9-column table stacks into one card per entry.
   ============================================================ */
@media (max-width:991.98px){
    #historyModal{
        min-width:0 !important;
        width:94vw !important;
        max-width:94vw !important;
        left:50% !important; top:50% !important;
        transform:translate(-50%,-50%) !important;
        max-height:86vh !important; overflow:auto !important;
        padding:14px !important; border-radius:12px !important;
    }
    #historyModalContent{overflow-x:hidden !important}

    /* table -> stacked cards */
    #historyModalContent .follow-up-table{display:block; width:100%; border:0}
    #historyModalContent .follow-up-table thead{display:none}
    #historyModalContent .follow-up-table tbody{display:block; width:100%}
    #historyModalContent .follow-up-table tr{
        display:block; width:100%;
        background:#fff; border:1px solid #e8ebef; border-radius:10px;
        padding:10px 12px; margin:0 0 10px;
        box-shadow:0 1px 3px rgba(15,23,42,.05);
    }
    #historyModalContent .follow-up-table td{
        display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
        width:100% !important; border:0 !important;
        padding:5px 0 !important; font-size:13px; text-align:right;
        border-bottom:1px dashed #f1f3f5 !important;
    }
    #historyModalContent .follow-up-table tr td:last-child{border-bottom:0 !important}
    #historyModalContent .follow-up-table td::before{
        content:attr(data-label);
        flex:0 0 42%; text-align:left;
        font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
        color:#64748b;
    }
    /* long remarks wrap instead of stretching the card */
    #historyModalContent .follow-up-table td[data-label="Remark"]{
        white-space:normal !important; word-break:break-word; min-width:0 !important; max-width:none !important;
    }
    #historyModalContent .follow-up-table .no-history{
        display:block; text-align:center; color:#64748b; padding:14px 0 !important;
    }
    #historyModalContent .follow-up-table .no-history::before{content:none}
}

/* ============================================================
   Tablet/desktop layout fixes
   ============================================================ */
/* "Sort by" always sits UNDER the search block (above the listings), at every
   width — same as the mobile layout. Previously it shared a flex row with the
   search, squeezing the Branch/Member bar and the search fields. */
.dashboard-property-search-wrap > .d-flex{flex-direction:column}
.dashboard-property-search-wrap > .d-flex > .flex-grow-1{width:100%}
.dashboard-property-search-wrap .dashboard-property-sort-by{
    width:100%; margin-top:6px; display:flex; justify-content:flex-start;
}

/* Desktop assign cell: keep the agent field and Assign button on ONE line,
   visually joined (Bootstrap's input-group wraps them onto separate rows once
   the combobox replaces the native select). */
@media (min-width:992px){
    .property-table-assign .input-group{flex-wrap:nowrap}
    .property-table-assign .input-group > .listin-agent-combo{flex:1 1 auto; min-width:0}
    .property-table-assign .listin-agent-input{
        border-top-right-radius:0; border-bottom-right-radius:0;
    }
    .property-table-assign .input-group-append{margin-left:-1px}
    .property-table-assign .input-group-append .assign-agent-btn{
        border-top-left-radius:0; border-bottom-left-radius:0; white-space:nowrap;
    }
    /* status select + Apply stay inline too */
    .property-table-assign .listin-status-box .input-group{flex-wrap:nowrap}
}

/* Mid/narrow desktop (992–1366px, includes 1280 with the sidebar open): the
   table column is too tight to keep the agent field and Assign button side by
   side, so the field gets squeezed and the whole Assign/Update column can clip
   off the right edge. Stack the field + Assign into TWO rows (each full-width,
   radii un-joined) and SHRINK the Actions button. Overrides the >=992 rule above
   for this range only (same selector, declared later). At 1024 the sidebar also
   auto-collapses (load-more.js) to free ~240px more. */
@media (min-width:992px) and (max-width:1366.98px){
    .dashboard-table-properties .property-table-assign .input-group{flex-wrap:wrap; gap:6px}
    .dashboard-table-properties .property-table-assign .input-group > .listin-agent-combo{flex:1 1 100%; min-width:0}
    .dashboard-table-properties .property-table-assign .listin-agent-input{
        border-radius:8px !important;
    }
    .dashboard-table-properties .property-table-assign .input-group-append{margin-left:0; width:100%}
    .dashboard-table-properties .property-table-assign .input-group-append .assign-agent-btn{
        width:100%; border-radius:8px !important;
    }
    /* status field + Apply stack the same way when present */
    .dashboard-table-properties .property-table-assign .listin-status-box .input-group{flex-wrap:wrap; gap:6px}
    /* smaller Actions button in this tight range */
    .dashboard-table-properties .listin-assign-actions .dropdown-toggle{height:32px; font-size:12px; padding:4px 10px}
}

/* ============================================================
   Container + sidebar fixes
   ============================================================ */
/* Keep the wide desktop table inside its own scroll area so it can never push
   the page wider than the viewport (that overflow was squeezing #sidebar-wrapper
   — which is width:250px;overflow:hidden — and clipping the menu labels). */
.listin-table-scroll{width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
.dashboard-content-inner-wrap, .dashboard-content-block-wrap{min-width:0; max-width:100%}

/* Sidebar collapse. The theme only shrinks the inner #sidebar-wrapper to 60px, but
   the teal panel is the OUTER .dashboard-side-menu-wrap (fixed, 240px) and the page
   body keeps .dashboard-content-wrap{padding-left:240px} — so collapsing left a wide
   empty teal band and the content never reflowed. Shrink the outer wrap and the
   content offset together. Scoped to >=992px: below that the sidebar is off-canvas
   (padding-left:0) and hiding labels would break the mobile slide-out menu. */
/* Unscoped on purpose: if body carries .sidebar-collapsed the user asked for a
   collapsed sidebar at whatever width they are on. Only the content offset is
   gated to >=992px, because below that the theme already sets padding-left:0. */
/* Collapse to ZERO width, not a 60px icon rail. The rail reserved 60px that the
   content could not use, which read as a permanent gap on the left — and at
   ~1256px that 60px is exactly what the table needs. #sidebarToggle is
   position:fixed, so the toggle stays reachable with the sidebar fully hidden.
   To go back to an icon rail, set these three widths and the padding to 60px. */
body.sidebar-collapsed .dashboard-side-menu-wrap{
    width:0 !important; min-width:0 !important; max-width:0 !important;
    overflow:hidden;
}
body.sidebar-collapsed #sidebar-wrapper{
    width:0 !important; min-width:0 !important; max-width:0 !important;
    overflow:hidden;
}
@media (min-width:992px){
    body.sidebar-collapsed .dashboard-content-wrap{padding-left:0 !important}
}
.dashboard-side-menu-wrap, #sidebar-wrapper, .dashboard-content-wrap{
    transition:width .25s ease, padding-left .25s ease;
}

/* The open submenu carries an inline display:block from the menu's own jQuery
   toggle, which outranks the theme's `.side-menu-dropdown{display:none}` — that
   is why the ">" arrows survived the collapse. Force it. */
body.sidebar-collapsed .side-menu-dropdown{display:none !important}

/* Menu items have no .menu-label element, so the theme's "hide the label" rule
   matches nothing and the text merely clipped. Hide text, centre the icons. */
body.sidebar-collapsed #sidebar-wrapper .side-menu-item > a{
    font-size:0 !important; text-align:center; padding-left:0 !important; padding-right:0 !important;
}
body.sidebar-collapsed #sidebar-wrapper .side-menu-item > a i{
    font-size:18px !important; margin-right:0 !important;
}
body.sidebar-collapsed #sidebar-wrapper .side-menu-item > a span,
body.sidebar-collapsed #sidebar-wrapper .side-menu-item > a small{display:none !important}
body.sidebar-collapsed .dashboard-logo-wrap{overflow:hidden}

/* Tablet (768–991px): the card has spare width, so surface Property Type too. */
@media (min-width:768px) and (max-width:991.98px){
    .dashboard-table-properties .property-table-type[data-label="Type"]{
        display:block !important;
        grid-column:2; grid-row:4;
        padding:4px 0 0 !important; border:0 !important;
        font-size:13px; line-height:1.5; color:#475569;
    }
    .dashboard-table-properties .property-table-type[data-label="Type"]::before{content:none !important}
}

/* ---- Created / Updated date badges -------------------------------------
   Shown from 600px up, sitting under the unit-details block (right column in
   the card layout, Unit Details cell in the table layout). Hidden below 600px
   where the card is already tight, and hidden from 1200px where the theme's
   own "Details" column (.d-xl-table-cell) already prints both dates. */
.listin-date-badges{display:none}
/* Pill styling is global — the media queries below only decide WHICH copy is
   shown, so the styles must not live inside one of them. */
.listin-date-badge{
    display:inline-flex; align-items:center; gap:4px;
    font-size:10.5px; font-weight:600; line-height:1.5;
    padding:3px 9px; border-radius:999px;
    border:1px solid transparent; white-space:nowrap;
}
.listin-date-badge i{font-size:9px}
.listin-date-created{background:#ecfdf5; color:#047857; border-color:#d1fae5}
.listin-date-updated{background:#eff6ff; color:#1d4ed8; border-color:#dbeafe}

/* Card layout ONLY (<992px): the copy that sits under unit details. Above 992
   the table layout uses the .listin-dates-in-type copy in the Property Type
   column instead — this range used to run to 1199.98px, which is why BOTH
   copies rendered between 992 and 1199. */
@media (min-width:600px) and (max-width:991.98px){
    .dashboard-table-properties .listin-date-badges:not(.listin-dates-in-type){
        display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
    }
}

/* ============================================================
   Table layout, 992px and up
   Follow Up / History and the Created / Updated pills both live in the
   Property Type column. The theme's Details column carried them before but is
   .d-none .d-xl-table-cell (hidden below 1200px), so between 992 and 1199 they
   vanished entirely. Hiding that column outright — header AND cell, so the
   columns stay aligned — and relocating its contents is the consistent fix.
   ============================================================ */
.listin-type-followup{display:none}
.listin-dates-in-type{display:none}

@media (min-width:992px){

    /* Details column retired: its contents now live in Property Type. The <th>
       must go too or every column after it shifts by one. */
    .dashboard-table-properties .property-table-details,
    .dashboard-table-properties th.listin-th-details{display:none !important}

    /* --- Follow Up / History, above the date pills --- */
    .dashboard-table-properties .listin-type-followup{display:block; margin-top:10px}
    .dashboard-table-properties .listin-type-followup-label{
        display:flex; align-items:center; gap:6px; margin-bottom:6px;
        font-size:10px; font-weight:700; letter-spacing:.4px;
        text-transform:uppercase; color:#64748b;
    }
    .dashboard-table-properties .listin-type-followup-label i{font-size:11px; color:#94a3b8}
    .dashboard-table-properties .listin-type-followup-btns{display:flex; gap:6px; flex-wrap:wrap}
    .dashboard-table-properties .listin-type-followup-btns .btn{
        padding:7px 14px; font-size:12px; font-weight:600; line-height:1.3;
        border-radius:8px; white-space:nowrap;
    }
    /* same look as the mobile card: dark "Add Follow Up" + amber "History" */
    .dashboard-table-properties .listin-type-followup-btns .listin-followup-btn{
        flex:1 1 auto; background:#5b6472; border-color:#5b6472; color:#fff;
    }
    .dashboard-table-properties .listin-type-followup-btns .listin-followup-btn:hover{background:#4b5563; color:#fff}
    .dashboard-table-properties .listin-type-followup-btns .listin-history-btn{flex:0 0 auto}

    /* --- Created / Updated pills, under the buttons --- */
    .dashboard-table-properties .listin-dates-in-type{
        display:flex !important; flex-wrap:wrap; gap:6px; margin-top:10px;
    }

    /* --- Thumbnail 20% bigger (was 104x78). The extra .table-property-thumb in
       the selector outranks the earlier 104px rule, which otherwise won. --- */
    .dashboard-table-properties .property-table-thumbnail .table-property-thumb{
        position:relative; display:inline-block; line-height:0;
    }
    .dashboard-table-properties .property-table-thumbnail .table-property-thumb img,
    .dashboard-table-properties .property-table-thumbnail img{
        width:125px !important; height:94px !important;
        object-fit:cover; border-radius:8px;
    }
    /* price pill seated on the photo, as in the card layout */
    .dashboard-table-properties .property-table-thumbnail .listin-price-pill{
        display:inline-block; position:absolute; left:50%; bottom:6px;
        transform:translateX(-50%);
        background:#0f766e; color:#fff; font-weight:700; font-size:11px;
        line-height:1; padding:4px 9px; border-radius:999px;
        box-shadow:0 3px 8px rgba(0,0,0,.35);
        max-width:calc(100% - 8px);
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center;
    }
    .dashboard-table-properties .property-table-thumbnail::after{content:none !important}
}

/* ============================================================
   Table layout refinements (>=992px)
   - bed / bath / car move under the photo in the Thumbnail column
   - the Thumbnail column gets a real width so the 20%-larger image fits
   - Unit Details / Price Info text matched to the form-control size
   ============================================================ */
@media (min-width:992px){

    /* --- Thumbnail column needs an explicit width. The parent theme caps the
       image with `.table-property-thumb img{max-width:100%}`, and with no width
       on the column the cell shrink-wraps, so the image was being squeezed back
       below the 125px set on it. Width on BOTH th and td, or the browser picks
       its own distribution. --- */
    .dashboard-table-properties th.listin-th-thumb,
    .dashboard-table-properties .property-table-thumbnail{
        width:150px !important; min-width:150px;
    }
    .dashboard-table-properties .property-table-thumbnail .table-property-thumb img,
    .dashboard-table-properties .property-table-thumbnail img{
        max-width:none !important;
    }

    /* --- bed / bath / car: show the copy that already sits in the Thumbnail
       cell (it was markup-only, never styled for desktop) and hide the
       duplicate in Property Type. --- */
    .dashboard-table-properties .property-table-thumbnail .mobile-only-property-info{
        display:block !important; margin-top:8px;
    }
    .dashboard-table-properties .property-table-thumbnail .property-features{
        display:block !important;
        font-size:13px; font-weight:600; color:#475569; white-space:nowrap;
    }
    .dashboard-table-properties .property-table-thumbnail .property-features i{
        font-size:12px; color:#94a3b8; margin-right:2px;
    }
    .dashboard-table-properties .listin-type-features{display:none !important}

    /* --- Unit Details + Price Info: bump to the same size as the status select
       ("Published"), which is the theme's .form-control size. --- */
    .dashboard-table-properties .property-table-type[data-label="Unit Details"],
    .dashboard-table-properties .property-table-price{
        font-size:14px; line-height:1.65;
    }
    .dashboard-table-properties .property-table-price strong{font-weight:600}
}

/* ============================================================
   >=992px: fold the Actions column into the Assign / Update column
   There is no separate Actions column on desktop any more — the Actions
   dropdown sits below the Assign picker. Both the column cell and its header
   are hidden so the remaining columns stay aligned.
   ============================================================ */
.listin-assign-actions{display:none}

@media (min-width:992px){
    .dashboard-table-properties .listin-assign-actions{
        display:block; margin-top:10px; padding-top:10px;
        border-top:1px dashed #e6e9ee;
    }
    /* full-width trigger so it lines up with the Assign / Apply controls above */
    .dashboard-table-properties .listin-assign-actions .property-action-menu{width:100%}
    .dashboard-table-properties .listin-assign-actions .dropdown-toggle{width:100%; height:38px}

    /* retire the standalone column — header AND cell, or every column shifts */
    .dashboard-table-properties .property-table-actions,
    .dashboard-table-properties th.action-col{display:none !important}
}

/* ---- Price pill: show the FULL price (up to RM100,000,000) ----------------
   The pill previously clamped to max-width:calc(100% - 8px) with ellipsis, so a
   price wider than the ~125px thumbnail was cut to "RM750,0…". The pill is
   absolutely centred on the image, so letting it size to its content (and
   extend a little past the image edges) shows the whole figure. white-space
   stays nowrap; no ellipsis. Font trimmed so RM100,000,000 stays compact. */
.dashboard-table-properties .property-table-thumbnail .listin-price-pill{
    max-width:none !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
    font-size:10.5px;
    padding:4px 8px;
    letter-spacing:-.1px;
}