/* MapTrax v2.9.0.0 — Asset Detail modal styles
   Mirrors the .color-rules-* pattern but is wider (asset detail has a tract
   table that needs horizontal room) and uses MapTrax's burnt-orange accents. */

.asset-detail-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9100;
    align-items: center;
    justify-content: center;
}

.asset-detail-backdrop.visible {
    display: flex;
}

.asset-detail-dialog {
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    /* v1.5.1.0 (Asset-Info spacing spec): the dialog takes essentially the
       whole monitor — no fixed pixel cap — so the tract table's columns get
       every pixel available before word-wrap/shrink kicks in. */
    width: 97vw;
    max-width: none;
    max-height: 96vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.asset-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(to bottom, #b96c28, #7a4d27);
    color: white;
    border-bottom: 1px solid #5a3a1f;
}

.asset-detail-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.asset-detail-title h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-detail-id-badge {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.asset-detail-mms-link {
    color: #ffe6cc;
    text-decoration: none;
    font-size: 11px;
    border-bottom: 1px dotted #ffe6cc;
    flex-shrink: 0;
}

.asset-detail-mms-link:hover {
    color: white;
    border-bottom-color: white;
}

.asset-detail-chip {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.18);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.asset-detail-close {
    flex-shrink: 0;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    font-size: 22px;
    line-height: 1;
    padding: 2px 12px;
    cursor: pointer;
    border-radius: 4px;
    margin-left: 12px;
}

.asset-detail-close:hover {
    background: rgba(255,255,255,0.3);
}

.asset-detail-content {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    background: #faf6f0;
}

.asset-detail-section {
    background: white;
    border: 1px solid #d4c5b0;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.asset-detail-section h3 {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: #7a4d27;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #ede4d4;
    padding-bottom: 4px;
}

.asset-detail-fields {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 6px 12px;
    align-items: center;
    font-size: 13px;
}

.asset-detail-fields label {
    color: #555;
    font-weight: 500;
}

.asset-detail-fields .value {
    color: #222;
}

.asset-detail-fields .value.muted {
    color: #888;
    font-style: italic;
}

.asset-detail-fields input,
.asset-detail-fields textarea {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #c4b89e;
    border-radius: 3px;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
}

.asset-detail-fields input:focus,
.asset-detail-fields textarea:focus {
    outline: none;
    border-color: #b96c28;
    box-shadow: 0 0 0 2px rgba(185, 108, 40, 0.2);
}

.asset-detail-rollup {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
}

.asset-detail-stat {
    background: #f5efe8;
    border: 1px solid #e0d8c8;
    border-radius: 4px;
    padding: 8px 10px;
    text-align: center;
}

.asset-detail-stat-value {
    font-size: 16px;
    font-weight: 600;
    color: #7a4d27;
    line-height: 1.1;
}

.asset-detail-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    margin-top: 2px;
}

.asset-detail-tract-list {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
    background: white;
}

.asset-detail-tract-list th {
    text-align: left;
    padding: 6px 8px;
    background: #ede4d4;
    color: #555;
    font-weight: 600;
    border-bottom: 1px solid #c4b89e;
    position: sticky;
    top: 0;
}

.asset-detail-tract-list td {
    padding: 5px 8px;
    border-bottom: 1px solid #f0e8d8;
}

.asset-detail-tract-list tbody tr {
    cursor: pointer;
}

.asset-detail-tract-list tbody tr:hover {
    background: #fff8e8;
}

.asset-detail-tract-list tbody tr:last-child td {
    border-bottom: none;
}

.asset-detail-tract-list-wrapper {
    /* v2.13.7.3: horizontal scrolling stays on. MMS rows render their
       editable cells as inline inputs (see css/mms-modal.css) — no
       sticky column anymore. */
    max-height: 50vh;
    overflow: auto;
    border: 1px solid #d4c5b0;
    border-radius: 4px;
}

.asset-detail-tract-list {
    width: 100%;
    table-layout: auto;
}

.asset-detail-tract-list th,
.asset-detail-tract-list td {
    white-space: nowrap;  /* keep numbers and short labels on one line */
}

.asset-detail-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px 0;
    border-bottom: 1px solid #ede4d4;
    padding-bottom: 4px;
}

.asset-detail-section-header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #7a4d27;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* v2.13.14.8: "Add Selected Tracts (N)" button shown in the Tracts
   section header when the dialog is in MMS-host Edit mode. Disabled
   when there are no new-selection tracts to add. */
.asset-detail-add-tracts-btn {
    padding: 3px 10px;
    font-size: 11px;
    background: #fff;
    color: #7a4d27;
    border: 1px solid #b96c28;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.12s, color 0.12s;
}
.asset-detail-add-tracts-btn:hover:not(:disabled) {
    background: #b96c28;
    color: #fff;
}
.asset-detail-add-tracts-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* v2.13.14.8: per-row 🗑 Remove button. Sits in its own column to the
   right of the ✏ Edit button when the dialog is in MMS-host Edit mode. */
.mms-remove-tract-cell {
    width: 28px;
    text-align: center;
}
.mms-remove-tract-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: #b91c1c;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.mms-remove-tract-btn:hover {
    background: #fee2e2;
    color: #991b1b;
    border-color: #b91c1c;
}

.asset-detail-hint {
    font-size: 11px;
    color: #888;
    font-style: italic;
}

/* Breakdown section: side-by-side mini tables for Interest Type and County */
.asset-detail-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 720px) {
    .asset-detail-breakdown { grid-template-columns: 1fr; }
}

.asset-detail-breakdown-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.asset-detail-breakdown-label {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.asset-detail-mini-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
    background: white;
    border: 1px solid #e0d8c8;
    border-radius: 3px;
    overflow: hidden;
}

.asset-detail-mini-table th {
    text-align: left;
    padding: 4px 6px;
    background: #f5efe8;
    color: #555;
    font-weight: 600;
    font-size: 11px;
    border-bottom: 1px solid #e0d8c8;
}

.asset-detail-mini-table td {
    padding: 4px 6px;
    border-bottom: 1px solid #f3eddf;
}

.asset-detail-mini-table tbody tr:last-child td {
    border-bottom: none;
}

/* Interest type tag — small color-coded chip on the breakdown + tract rows */
.asset-int-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid currentColor;
    background: rgba(0, 0, 0, 0.02);
}

.asset-int-min      { color: #1a8c44; }   /* mineral interest — green */
.asset-int-nri      { color: #1a8c44; }
.asset-int-mineral  { color: #1a8c44; }
.asset-int-npri     { color: #b96c28; }   /* non-participating royalty — burnt orange */
.asset-int-orri     { color: #6b5b95; }   /* override — purple */
.asset-int-rsa      { color: #555; }      /* surface area / fallback */

/* AOI pills — for the "Areas of Interest" list under Breakdown */
.asset-detail-aoi-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.asset-detail-aoi-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.asset-aoi-pill {
    background: #f5efe8;
    border: 1px solid #d4c5b0;
    color: #7a4d27;
    padding: 2px 8px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 500;
}

.asset-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    background: #ede4d4;
    border-top: 1px solid #d4c5b0;
}

/* v2.13.15.8: Delete button for inactive prospects. Pushed to the
   left edge so it's visually separated from the Close / Edit pair
   and the red text/hover signals destructiveness. */
.asset-detail-btn-delete {
    margin-right: auto;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    background: #fff;
    color: #b3261e;
    border: 1px solid #b3261e;
    cursor: pointer;
}
.asset-detail-btn-delete:hover {
    background: #b3261e;
    color: #fff;
}

.asset-detail-btn-primary {
    padding: 6px 18px;
    background: linear-gradient(to bottom, #d17b2f, #b96c28);
    border: 1px solid #8a5a2f;
    color: white;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
}

.asset-detail-btn-primary:hover {
    background: linear-gradient(to bottom, #d8853a, #c47731);
}

.asset-detail-btn-secondary {
    padding: 6px 16px;
    background: white;
    border: 1px solid #c4b89e;
    color: #555;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
}

.asset-detail-btn-secondary:hover {
    background: #f5efe8;
}

/* Floating Asset Panel — left side, dedicated to the asset list */
.assets-panel {
    position: absolute;
    top: 92px;       /* clear of the toolbar */
    left: 14px;
    width: 280px;
    max-height: calc(100vh - 140px);
    background: white;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    z-index: 850;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* v2.10.2.1: hold the user's chosen width across resize + reload. The
       inline `style="width: Npx"` set by JS on init / drag overrides this. */
}

/* v2.10.2.1: drag-to-resize handle on the right edge. 6px wide so it's
   easy to grab without taking visible space from the panel content. */
.assets-panel-resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 851;
}

.assets-panel-resize:hover {
    background: var(--gold-muted);
    opacity: 0.4;
}

/* While the handle is grabbed, body cursor is set programmatically; CSS
   here just keeps the visual indicator on hover when not dragging. */

/* v2.10.2.1: wrap-names mode — long asset names break to multiple lines
   so the full name is visible. Off by default (toggleable in header). */
.assets-panel.wrap-names .asset-row-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* v2.10.2.1: wrap toggle button in panel header. Sits next to collapse. */
.assets-panel-wrap {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    width: 22px;
    height: 22px;
    padding: 0;
    margin-right: 4px;
    line-height: 18px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.assets-panel-wrap:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

.assets-panel-wrap.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--ink-950);
}

.assets-panel.collapsed .assets-panel-wrap,
.assets-panel.collapsed .assets-panel-resize {
    display: none;
}

.assets-panel.collapsed {
    width: 44px;
}

.assets-panel.collapsed .assets-panel-body,
.assets-panel.collapsed .assets-panel-title {
    display: none;
}

.assets-panel.collapsed .assets-panel-collapse {
    transform: rotate(180deg);
}

.assets-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 10px;
    background: var(--primary);
    color: white;
    border-bottom: 1px solid var(--chrome-border);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.assets-panel-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assets-panel-count {
    color: var(--gold-200);
    font-weight: 500;
    font-size: 11px;
}

.assets-panel-collapse {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 11px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
}

.assets-panel-collapse:hover {
    background: rgba(255, 255, 255, 0.3);
}

.assets-panel-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px;
    background: var(--bg-page);
    flex: 1;
}

/* v2.13.5.1: Assets / Prospects tab strip (MMS hosts only — hidden by
 * default; shown via JS). Pill-tab pattern, brown to match the panel header. */
.assets-tab-strip {
    display: flex;
    gap: 2px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-primary);
    background: transparent;
}
.assets-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: border-color 0.15s ease, background 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.assets-tab-btn:hover {
    background: var(--gold-050);
}
.assets-tab-btn.active {
    border-bottom-color: var(--gold-text);
    color: var(--text-secondary);
    font-weight: 600;
    background: var(--gold-050);
}
.assets-tab-count {
    display: inline-block;
    min-width: 18px;
    text-align: center;
    background: var(--border-primary);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 700;
}
.assets-tab-btn.active .assets-tab-count {
    background: var(--gold-muted);
    color: #fff;
}

/* v2.13.14.9 (PR #81 review): each tab + its eyeball are now siblings
   wrapped in a span. Nested <button> in <button> is invalid HTML; the
   wrapper keeps them visually adjacent without nesting. */
.inactive-tab-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* v2.13.14.9: eyeball next to each tab label in the Inactive Prospects
   panel (Killed / Lost / Passed). Click toggles map visibility for the
   whole sub-category at once. Mirrors the dim-when-off pattern used on
   the per-row eyeballs. */
/* v2.14.3.24 — strip the pill background + border per user. Eyeball
   is now just the SVG icon in a dark color (off = red), no box. The
   inactive-tab-group's `gap: 2px` keeps it tight against the label. */
.inactive-tab-eye {
    margin-left: 0;
    padding: 1px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    line-height: 0;
    cursor: pointer;
    transition: color 0.12s, transform 0.08s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.inactive-tab-eye svg { display: block; }
.inactive-tab-eye:hover { color: var(--mt-brown-600, var(--gold-muted)); }
.inactive-tab-eye:active { transform: scale(0.9); }
.inactive-tab-eye.off { color: #c4392f; }
.inactive-tab-eye.off:hover { color: #8a2c25; }

/* v2.13.14.9: Select all / Select none row above the row list in the
   Inactive Prospects panel. Mass-toggles per-row eyeballs in the
   active sub-tab. */
.inactive-prospects-bulk-actions {
    display: flex;
    gap: 6px;
    padding: 6px 10px 4px;
    border-bottom: 1px solid var(--bg-tertiary);
}
.inactive-bulk-btn {
    padding: 3px 9px;
    font-size: 11px;
    background: white;
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    cursor: pointer;
}
.inactive-bulk-btn:hover {
    background: var(--gold-050);
    border-color: var(--gold-text);
}

/* v2.13.14.9: ↻ Reactivate button on Killed rows. Same size as the
   other action buttons; green-tinted on hover to read as a positive
   action (vs. the red 🗑 in the asset-detail dialog). */
.asset-row-action.asset-row-reactivate {
    color: #1a8c44;
}
.asset-row-action.asset-row-reactivate:hover {
    background: #d8efdf;
    color: #0f6b30;
    border-color: #1a8c44;
}

.assets-panel-filter {
    width: 100%;
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    box-sizing: border-box;
    background: white;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.assets-panel-filter:focus {
    outline: none;
    border-color: var(--gold-text);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold, #c9a962) 20%, transparent);
}

/* Sidebar Assets list (now lives inside the floating Asset panel) */
.assets-sidebar-list {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    background: white;
    min-height: 100px;
}

/* v2.10.1.0: row body is no longer clickable (explicit Zoom/Details
   buttons handle the actions). Hover-highlight stays as a visual cue
   for which asset's tracts are currently glowing on the map. */
.asset-row {
    display: flex;
    flex-direction: column;
    padding: 4px 8px;
    font-size: 12px;
    border-bottom: 1px solid var(--border-primary);
    cursor: default;
    user-select: none;
}

.asset-row-main {
    display: flex;
    align-items: center;
    /* v2.13.15.9: tightened from 6px so the name column eats less
       horizontal space at the seams. ID → name and count → buttons
       both look noticeably more compact. */
    gap: 4px;
}

.asset-row:last-child {
    border-bottom: none;
}

/* v2.13.15.0 — secondary line under .asset-row-main. Used by the
   Inactive Prospects sidebar to show the outcome date
   ("Killed 5/22/2026" / "Lost ..." / "Passed ..."). */
.asset-row-meta {
    font-size: 11px;
    color: var(--text-tertiary);
    /* v2.13.15.9: keep aligned with .asset-row-name after the id
       width was tightened from 40 to 28 (+ 4 gap). */
    padding: 2px 0 0 32px;
}
.asset-row-killed-at {
    font-style: italic;
}

.asset-row:hover {
    background: var(--gold-050);
}

.asset-row-id {
    flex-shrink: 0;
    color: var(--text-muted);
    font-family: monospace;
    font-size: 11px;
    /* v2.13.15.9: was 40px which left obvious whitespace between
       "#NN" and the name. 28px still fits up to 4-digit asset
       numbers (#9999) without truncation. */
    min-width: 28px;
}

.asset-row-name {
    flex: 1;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* v2.13.15.9: pull a hair more right-side space when the row
       has many action buttons (count + eye + zoom + i + table).
       Negative right margin tightens the count's visual gap to the
       buttons without affecting the name's ellipsis. */
    margin-right: -2px;
}

/* v1.1.2.0 (Fortress): Assets-panel category filter chips + row badges.
   The list mixes Working Interest and Mineral/Royalty holdings; the
   chips filter by holding.category and every row carries a short badge
   so the type is scannable without filtering. */
.asset-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 6px 6px;
    border-bottom: 1px solid var(--border-primary);
}
.asset-cat-chip {
    border: 1px solid var(--ink-300);
    background: var(--bg-surface);
    color: var(--text-secondary);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    line-height: 16px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.asset-cat-chip:hover { background: var(--bg-tertiary); }
/* Category swatch dot on filter chips — matches the row badges
   (green M&R, blue WI) so the filter ties to the data. */
.asset-cat-chip.asset-cat-mr::before,
.asset-cat-chip.asset-cat-wi::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.asset-cat-chip.asset-cat-mr::before { background: var(--badge-mr); }
.asset-cat-chip.asset-cat-wi::before { background: var(--badge-wi); }
.asset-cat-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.asset-cat-chip-n { opacity: 0.75; font-weight: 500; }

.asset-row-cat {
    flex-shrink: 0;
    border-radius: 3px;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0.03em;
    color: #fff;
    background: var(--text-muted);              /* fallback for unmapped categories */
}
.asset-cat-wi { background: var(--badge-wi); }  /* Working Interest — blue  */
.asset-cat-mr { background: var(--badge-mr); }  /* Mineral & Royalty — green */
/* chips reuse the same group classes but keep chip chrome unless active */
.asset-cat-chip.asset-cat-wi:not(.active),
.asset-cat-chip.asset-cat-mr:not(.active) { background: var(--bg-surface); color: var(--text-secondary); }
.asset-cat-chip.asset-cat-wi.active { background: var(--primary); border-color: var(--primary); }
.asset-cat-chip.asset-cat-mr.active { background: var(--primary); border-color: var(--primary); }

.asset-row-count {
    flex-shrink: 0;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    /* v2.13.15.9: tighter horizontal padding (was 1 6) so the count
       chip butts up closer to the action buttons. */
    padding: 1px 5px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
}

/* v2.10.1.0: per-row action buttons (Zoom + Details). */
.asset-row-action {
    flex-shrink: 0;
    /* v2.13.15.9: trimmed from 24x22 so 4-5 action buttons don't
       crowd the name column. */
    width: 22px;
    height: 20px;
    padding: 0;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.asset-row-action:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* v2.13.15.6: 🗑 Delete button — red hover so a destructive action
   reads distinctly from the other (read-only) row buttons. Only
   appears in the 🗃 Inactive Prospects panel; backend gate also
   refuses to delete anything that isn't state='inactive'. */
.asset-row-action.asset-row-delete:hover {
    background: #b3261e;
    border-color: #8a1e18;
}

/* v2.13.14.7: per-row eyeball — visible state inherits the action style;
   hidden state dims the icon so it reads as "off" at a glance, and the
   row itself fades to half opacity so the user can quickly spot which
   holdings they've toggled off. */
.asset-row-action.asset-row-eye.off {
    opacity: 0.55;
    filter: grayscale(1);
}
.asset-row.asset-row-hidden {
    opacity: 0.55;
}
.asset-row.asset-row-hidden:hover {
    opacity: 0.85;
}

/* v2.10.1.0: source-file sub-label, shown only when multiple files
   contribute assets (computed in renderAssetSidebar). */
.asset-row-source {
    margin-top: 1px;
    margin-left: 46px;       /* aligns under the name (past the ID column) */
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* v2.10.1.0: inline sort header rendered above the asset list. Mirrors the
   color legend's sort UI for consistency — up/down triangles above each
   sortable column (ID, name, count). One-click access to every sort. */
.asset-sort-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 6px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--border-primary);
}

.asset-sort-col {
    display: inline-flex;
    gap: 1px;
    line-height: 1;
}

.asset-sort-col-name {
    /* Center the name-column arrows over the (variable-width) name area */
    justify-content: center;
}

.asset-sort-arrow {
    background: transparent;
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    color: var(--text-muted);
    padding: 1px 2px;
    margin: 0;
    cursor: pointer;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}

.asset-sort-arrow svg {
    display: block;
}

.asset-sort-arrow:hover {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}

/* Trailing background override defends against any global
   `button.active { background: var(--gold-muted) }` rule. */
.asset-sort-arrow.active {
    color: var(--gold-text);
    background: transparent;
}

.asset-sort-arrow.active:hover {
    background: var(--bg-tertiary);
}

.asset-row.asset-row-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    cursor: default;
    padding: 12px 8px;
}

.asset-row.asset-row-empty:hover {
    background: white;
}



/* ----------------------------------------------------------------------
 * v2.13.14.0 (W1b) — Lifecycle pill bar + date inputs + action buttons
 * on the asset-detail dialog.
 *
 * Per "Prospect and Asset Status Process MapTracts MMS.pdf":
 *   - Pending steps have an hourglass ⏳
 *   - Completed steps have a checkmark ✓
 *   - Current step is bold/brighter
 *   - Future steps are lower opacity
 * ---------------------------------------------------------------------- */

.asset-lifecycle-section {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.lifecycle-pill-bar {
    margin-bottom: 10px;
}

.lifecycle-loading {
    color: var(--text-tertiary);
    font-size: 12px;
    font-style: italic;
    padding: 6px 0;
}

.lifecycle-error {
    color: var(--error-text);
    font-style: normal;
}

.lifecycle-pill-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.lifecycle-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background: white;
    border: 1px solid var(--border-primary);
    color: var(--text-tertiary);
    font-size: 11px;
    line-height: 1.3;
    opacity: 0.55;  /* future steps are dim */
    transition: opacity 100ms, background 100ms;
    white-space: normal;
    max-width: 160px;
}

.lifecycle-pill-icon { font-size: 12px; }

.lifecycle-pill-done {
    opacity: 1;
    background: var(--success-bg);
    border-color: var(--success);
    color: #2e7d32;
}

.lifecycle-pill-current {
    opacity: 1;
    background: white;
    border-color: var(--text-secondary);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--text-secondary) inset;
}

.lifecycle-pill-inactive {
    text-decoration: line-through;
    color: var(--text-muted);
}

.lifecycle-pill-sep {
    color: var(--ink-300);
    font-size: 14px;
    margin: 0 2px;
}

/* --- Controls row: dates + actions side by side -------------------- */

.lifecycle-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--bg-tertiary);
}

@media (max-width: 900px) {
    .lifecycle-controls { grid-template-columns: 1fr; }
}

.lifecycle-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.lifecycle-date {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    min-width: 130px;
}

.lifecycle-date-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.lifecycle-date-input {
    font-size: 12px;
    padding: 3px 6px;
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    background: white;
    color: var(--text-primary);
}

.lifecycle-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
}

.lifecycle-action-btn {
    font-size: 12px;
    padding: 5px 10px;
    border: 1px solid var(--text-secondary);
    border-radius: 4px;
    background: white;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.2;
    transition: background 100ms, opacity 100ms;
}

.lifecycle-action-btn:hover:not(:disabled) {
    background: var(--bg-tertiary);
}

.lifecycle-action-btn:disabled,
.lifecycle-action-btn.lifecycle-action-done {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--success-bg);
    border-color: var(--success);
    color: #2e7d32;
}

.lifecycle-action-kill {
    border-color: var(--error-text);
    color: var(--error-text);
    margin-left: auto;  /* push to the right */
}

.lifecycle-action-kill:hover:not(:disabled) {
    background: var(--error-bg);
}

.lifecycle-action-reactivate {
    border-color: #2e7d32;
    color: #2e7d32;
}

.lifecycle-action-reactivate:hover:not(:disabled) {
    background: var(--success-bg);
}

/* --- Status badge (transient feedback) ----------------------------- */

.lifecycle-status {
    grid-column: 1 / -1;
    font-size: 11px;
    min-height: 14px;
    margin-top: 4px;
}

.lifecycle-status-busy  { color: var(--text-tertiary); font-style: italic; }
.lifecycle-status-ok    { color: #2e7d32; }
.lifecycle-status-warn  { color: var(--warning-text); }
.lifecycle-status-error { color: var(--error-text); }

/* ============================================================
   v1.6.0.0 — Worklists / Reports panel (issue #14). Reuses the
   .assets-panel frame; these rules style the worklist sections,
   kind chips, and rows inside #worklists-panel.
   ============================================================ */

/* Worklist tab bar — each worklist (QC Review / Do Not Count) on its own
   tab (user feedback, 2026-07-16). */
.worklist-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 2px 0 2px;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.worklist-tab {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    color: var(--text-tertiary);
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 10px;
    cursor: pointer;
    margin-bottom: -1px;
}

.worklist-tab:hover {
    color: var(--gold-text);
}

.worklist-tab-active {
    background: #fff;
    color: var(--text-secondary);
    border-color: var(--border-primary);
    border-bottom: 1px solid #fff;
}

.worklist-tab .assets-panel-count {
    font-weight: 400;
}

/* A tab pane owns the section header/hint/list; it must keep the flex
   column so .assets-sidebar-list's scroll behavior still works. */
.worklist-tab-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.worklist-tab-pane-hidden {
    display: none;
}

/* "· depth-severed line" note on Do-Not-Count rows whose tract_key carries
   the importer's ~ disambiguator (same section, different depth severance). */
.worklist-row-depth {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
}

.worklist-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 2px 4px 2px;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.worklist-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.worklist-section-future .worklist-section-title {
    color: var(--text-muted);
}

.worklist-section-tools {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.worklist-tool-btn {
    background: #fff;
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
}

.worklist-tool-btn:hover {
    background: var(--gold-050);
    border-color: var(--gold-text);
    color: var(--gold-text);
}

.worklist-section-hint {
    font-size: 10.5px;
    color: var(--text-tertiary);
    line-height: 1.35;
    padding: 4px 2px 2px 2px;
    flex-shrink: 0;
}

.worklist-kind-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 2px;
    flex-shrink: 0;
}

/* QC Review facet filters (holding-type + issue-type). Two single-select
   segmented button groups; the active button in each group is highlighted. */
.worklist-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 2px 6px;
    flex-shrink: 0;
}
.worklist-filter-group {
    display: inline-flex;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
}
.worklist-filter-btn {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    background: #fff;
    border: none;
    border-left: 1px solid #e2e8f0;
    padding: 3px 9px;
    cursor: pointer;
}
.worklist-filter-btn:first-child { border-left: none; }
/* Value-driven facet dropdowns (Fund / Type). Sized to match the segmented
   filter buttons so the row reads as one control strip. */
.worklist-filter-select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.worklist-filter-select-wrap[hidden] { display: none; }
.worklist-filter-select {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 2px 5px;
    max-width: 150px;
    cursor: pointer;
}
.worklist-filter-select:focus { outline: 2px solid #2563eb; outline-offset: 1px; }
.worklist-filter-btn:hover { background: #f1f5f9; }
.worklist-filter-btn.active {
    background: #2563eb;
    color: #fff;
}

.worklist-kind-chip {
    font-size: 10.5px;
    font-weight: 600;
    border: 1px solid;
    border-radius: 10px;
    padding: 2px 8px;
    background: #fff;
}

.worklist-kind-chip-clean {
    border-color: #2e7d32;
    color: #2e7d32;
}

.worklist-list {
    /* .assets-sidebar-list already provides flex/scroll behavior */
    padding-top: 2px;
}

.worklist-row {
    border: 1px solid var(--border-primary);
    border-radius: 5px;
    background: #fff;
    padding: 6px 8px;
    margin-bottom: 6px;
}

.worklist-row:hover {
    border-color: var(--gold);
    background: var(--gold-050);
}

.worklist-row-top {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.worklist-row-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: center;
}

.worklist-row-legal {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.worklist-row-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 2px 0 4px 15px;
    line-height: 1.35;
    word-break: break-word;
}

/* Import Review: the resolver's review reason under each row so the user
   sees WHY a tract was flagged (e.g. "supplied abstract … CONFIRM"). */
.worklist-row-note {
    font-size: 10.5px;
    color: #8a5a2b;
    background: #fdf4e8;
    border-left: 2px solid #d99a52;
    margin: 0 0 5px 15px;
    padding: 3px 7px;
    border-radius: 0 4px 4px 0;
    line-height: 1.35;
    word-break: break-word;
}

.worklist-row-actions {
    display: flex;
    gap: 5px;
    margin-left: 15px;
    align-items: center;
    flex-wrap: wrap;
}

/* No-map-match rows carry no fly/edit action — a short inline prompt in
   the actions row explains what to do instead. */
.worklist-row-nomap {
    font-size: 10px;
    color: #a04040;
    font-style: italic;
}

.worklist-row-btn {
    background: var(--gold-050);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    font-size: 10.5px;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.worklist-row-btn:hover {
    background: var(--gold-050);
    border-color: var(--gold-text);
    color: var(--gold-text);
}

.worklist-empty {
    font-size: 11.5px;
    color: var(--text-tertiary);
    padding: 10px 4px;
    font-style: italic;
}

/* Inline "Sort" caption before the sort segmented group. */
.worklist-sort-label {
    align-self: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Worklist tabs — table view: the shared sortable "mini table with links"
   used by QC Review, Import Review and Do Not Count (user request
   2026-07-23). It FITS the panel width (table-layout:fixed → no hidden
   columns; long legal / quarter-call text wraps) so nothing is ever clipped
   off the right edge, and it's genuinely DRAG-RESIZABLE: a tall default with
   `resize: vertical` grip on the bottom edge lets the user make it bigger /
   smaller (the worklists panel itself carries no resize handle, so the
   affordance lives on the table wrapper — codex PR #61 P2). Content scrolls
   under a sticky header. */
.worklist-table-wrap {
    height: 60vh;
    min-height: 200px;
    max-height: 82vh;
    resize: vertical;
    overflow: auto;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: #fff;
}
.worklist-table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    font-size: 11px;
}
.worklist-table th,
.worklist-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-primary);
    text-align: left;
    vertical-align: top;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.worklist-th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--gold-050);
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.25;
}
.worklist-th-sortable { cursor: pointer; user-select: none; }
.worklist-th-sortable:hover { color: var(--gold-text); }
.worklist-th-active { color: var(--gold-text); }
.worklist-table td { color: var(--text-primary); }
.worklist-table tbody tr:hover { background: var(--gold-050); }
.worklist-td-status .worklist-row-dot { display: inline-block; margin-right: 5px; vertical-align: middle; }
.worklist-td-num { text-align: right; font-variant-numeric: tabular-nums; }
.worklist-td-legal { font-weight: 600; }
.worklist-td-call { color: var(--text-secondary); }
/* Secondary line inside a cell (a Do-Not-Count row's quarter call / depth). */
.worklist-td-sub { font-size: 10px; color: var(--text-tertiary); margin-top: 1px; line-height: 1.3; }
.worklist-td-actions .worklist-row-btn { padding: 2px 6px; margin: 0 1px 1px 0; }

/* v1.16.1.0 — Fund facet: chip row (second strip under the type chips)
   and the small per-row fund badge. Both reuse the category-chip look. */
.asset-fund-chips { margin-top: 2px; }
.asset-row-fund {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 8px;
    background: var(--bg-tertiary, #eee8dd);
    color: var(--text-secondary, #6b5d4f);
    white-space: nowrap;
    flex: 0 0 auto;
}