/* Markers View (panel mirror) — port of panel_app/css/panel.css.
   Dense, table-first. The navigator drawer overlays the table so the table
   gets the full view height by default. Colors lean on the companion theme
   vars so light theme works; the green current-row fill, red stop styling and
   row-shading defaults are the panel's exact values (shared app conventions). */

#markers-panel-view {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    font-size: 13px;
}
#markers-panel-view.active { display: flex; }
#markers-panel-view .hidden { display: none !important; }

/* Transient status strip (write-action errors) */
#mv-status {
    flex: 0 0 auto;
    padding: 5px 10px;
    background: var(--danger);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
/* HLDBG diagnostics take over the strip: monospace log, selectable so a
   tester can copy it, capped so the table stays usable underneath. */
#mv-status.hldbg {
    background: #101810;
    color: #9fdc9f;
    font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre-wrap;
    max-height: 38%;
    overflow: auto;
    user-select: text;
    -webkit-user-select: text;
}

/* Current-group bar (always visible; toggles the navigator) */
#mv-group-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--bg-tertiary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
}
#mv-group-bar-chevron { opacity: 0.6; transition: transform 0.12s; }
#mv-group-bar[aria-expanded="true"] #mv-group-bar-chevron { transform: rotate(180deg); }

/* Navigator drawer — overlays the content below the bar */
#mv-navigator {
    position: absolute;
    top: 0; left: 0; right: 0;
    max-height: 70%;
    overflow: auto;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    z-index: 20;
}
#mv-nav-tabs {
    display: flex;
    gap: 6px;
    padding: 8px;
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    align-items: center;
    z-index: 1;
}
#mv-nav-tabs button {
    background: var(--bg-tertiary);
    border: 1px solid var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 8px 10px;
    font: inherit;
    cursor: pointer;
}
#mv-nav-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
#mv-nav-search {
    margin-left: auto;
    background: var(--bg-tertiary);
    border: 1px solid var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: 5px;
    padding: 7px 8px;
    font-size: 13px;
    width: 38%;
    min-width: 0;
}
#mv-nav-close {
    flex: none;
    width: 34px;
    background: var(--bg-tertiary);
    border: 1px solid var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 8px 0;
    font: inherit;
    cursor: pointer;
}

.mv-nav-list { list-style: none; margin: 0; padding: 0; }
.mv-nav-list li {
    padding: 12px;
    border-bottom: 1px solid var(--bg-tertiary);
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: center;
}
.mv-nav-list li .num { opacity: 0.55; min-width: 1.4em; }
#mv-groups-list li.selected { background: var(--accent); color: #fff; }
#mv-groups-list li.all-markers-item { font-weight: 600; }
#mv-groups-list li.empty, #mv-super-groups-list li.empty { opacity: 0.5; cursor: default; }

/* Super Groups tab: header rows + nested (indented) group rows */
#mv-super-groups-list li.super-header {
    background: #241b34;
    color: #c9b3f0;
    font-weight: 700;
    cursor: default;
}
#mv-super-groups-list li.super-header.active-sg {
    background: #6c3fb5;
    color: #fff;
    box-shadow: inset 3px 0 0 #c9b3f0;
}
#mv-super-groups-list li.group-item { padding-left: 26px; }
#mv-super-groups-list li.group-item.selected { background: #6c3fb5; color: #fff; }

/* Toolbar: stop countdown + Rename + ＋ Header */
#mv-toolbar {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    flex: 0 0 auto;
    align-items: stretch;
}
#mv-toolbar button {
    flex: 0 0 auto;
    background: var(--bg-tertiary);
    border: 1px solid var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 14px;
    cursor: pointer;
}
#mv-rename-btn.armed { background: var(--accent); border-color: var(--accent); color: #fff; }
#mv-stop-countdown {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    border-radius: 6px;
    background: #2a1414;
    color: #ff7b72;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
#mv-stop-countdown.active { opacity: 1; }

/* ＋ Header inline input row (Enter commits, Esc cancels — no prompt()) */
#mv-header-input-row {
    flex: 0 0 auto;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--bg-tertiary);
}
#mv-header-input-row input {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--text-primary);
    font: inherit;
    padding: 8px;
}

/* Markers table — fills the remaining view height */
#mv-markers-scroll { flex: 1 1 auto; overflow: auto; min-height: 0; }
#mv-markers-table { width: 100%; border-collapse: collapse; }
#mv-markers-table th, #mv-markers-table td {
    padding: 10px 6px;
    border-bottom: 1px solid var(--bg-tertiary);
    text-align: left;
    white-space: nowrap;
}
#mv-markers-table td:nth-child(4) { white-space: normal; }
#mv-markers-table th {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 1;
    font-size: 12px;
    color: var(--text-secondary);
}
#mv-markers-body tr { cursor: pointer; }

/* Alternating row shading. Colours come from the desktop app (Settings ->
   Appearance -> Row Shading) via state.ui.row_shading -> CSS vars set on
   #markers-panel-view by markers_view.js; defaults are the panel's stock look.
   MUST stay tr-level and ABOVE the .stop/.next-stop/.current/.header rules
   (same cascade contract as panel.css). The [data-theme="light"] variants
   are one specificity step heavier (1,2,1) than `#mv-markers-body tr.current`
   (1,1,1), so the current-row rule needs its own light-theme twin below. */
#mv-markers-body tr:nth-child(odd)  { background-color: var(--mv-row-a, #141414); }
#mv-markers-body tr:nth-child(even) { background-color: var(--mv-row-b, #1d1d1d); }
[data-theme="light"] #mv-markers-body tr:nth-child(odd)  { background-color: var(--mv-row-a, #f5f5f5); }
[data-theme="light"] #mv-markers-body tr:nth-child(even) { background-color: var(--mv-row-b, #ffffff); }

/* Stop markers: red text; the upcoming stop gets a red edge + tint. */
#mv-markers-body tr.stop td { color: #ff7b72; }
#mv-markers-body tr.next-stop td { background: #2a1416; box-shadow: inset 3px 0 0 #ff7b72; }
#mv-markers-body tr.current {
    background-color: #1f7a37;
    background-image: linear-gradient(90deg, #0f4f22, #0f4f22);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    /* No static transition here: a transition on a <tr> whose background
       toggles has stopped Chrome repainting the row (crbug 40429633 pattern;
       reproduced on a Surface Pro 9, 2026-09-08). The sweep still animates —
       updateRowProgress() sets an inline transition only while playing. */
}
/* Light theme: out-specifies the (1,2,1) light nth-child shading above, which
   otherwise beats the (1,1,1) rule and the green never paints. */
[data-theme="light"] #mv-markers-body tr.current { background-color: #1f7a37; }
#mv-markers-body tr.current td {
    background-color: rgba(31, 122, 55, 0);  /* transparent green: pure-alpha fade */
    color: #fff;
    /* (no transition — see the tr.current note above) */
}
#mv-markers-body tr.current.next-stop td { background-color: rgba(31, 122, 55, 0); }
/* Fade-out: cells go opaque green, covering the dark fill beneath. LAST so it
   also wins on a current+next-stop row. */
#mv-markers-body tr.current.bar-fade td { background-color: #1f7a37; }

/* Section header rows */
#mv-markers-table tbody tr.header td {
    text-align: center;
    font-weight: 700;
    background: var(--hdr, #8A6D00);
    color: #fff;
    position: relative;  /* anchors the overlaid ⣿ drag handle */
}
#mv-markers-table tbody tr.header .mv-drag {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
}

/* ⣿ drag handle — touch-action:none so a press on it goes to pointer events
   (the long-press drag) instead of native scroll. The rest of the table
   scrolls normally. */
.mv-drag {
    cursor: grab;
    opacity: 0.5;
    touch-action: none;
    padding: 4px 8px;   /* fat touch target */
}
#mv-markers-body tr.dragging { opacity: 0.35; }
#mv-markers-body tr.drop-above td { border-top: 2px solid var(--accent); }
#mv-markers-body tr.drop-below td { border-bottom: 2px solid var(--accent); }

/* Inline rename input (arm the Rename button, then tap a row) */
.mv-rename-input {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--text-primary);
    font: inherit;
    padding: 6px;
}
/* Row dimmed while a rename is in flight, waiting for the server's reply */
#mv-markers-body tr.row-pending { opacity: 0.45; }

/* Row remove (✕) — subtle until armed */
.mv-rm-cell { text-align: center; white-space: nowrap; }
.mv-rm-btn {
    display: inline-block;
    opacity: 0.4;
    color: #ff7b72;
    cursor: pointer;
    padding: 4px 10px;   /* fat touch target */
    border-radius: 4px;
}
.mv-rm-btn.armed { opacity: 1; color: #fff; background: #b3261e; font-weight: 700; }

/* Unified search results */
#mv-search-results .result-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#mv-search-results .result-name mark { background: transparent; color: #00C853; font-weight: 700; }
#mv-search-results .result-loc {
    flex: 0 0 auto;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}
#mv-search-results .result-badges { flex: 0 0 auto; display: flex; gap: 4px; margin-left: auto; }
#mv-search-results li.empty { opacity: 0.5; cursor: default; }
.mv-badge {
    background: var(--bg-tertiary);
    border: 1px solid var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 11px;
    white-space: nowrap;
}
.mv-badge-ungrouped { color: #d9a441; border-color: #4a3a1a; }

/* Reveal flash: a search-result tap scrolls to the row and pulses it green. */
#mv-markers-body tr.reveal-flash td { animation: mv-reveal-flash 1.6s ease-out; }
@keyframes mv-reveal-flash {
    0%, 55% { background-color: rgba(0, 200, 83, 0.30); }
    100%    { background-color: transparent; }
}

/* View Only: rows are read-only — no locate cursor, no write affordances. */
body.view-only #mv-markers-body tr { cursor: default; }
body.view-only #mv-rename-btn,
body.view-only #mv-insert-header-btn,
body.view-only .mv-drag,
body.view-only .mv-rm-btn { display: none; }