/* ============================================================
 * Documents & Comments (D1 — Tabs + Threaded Comments)
 *
 * Ported verbatim (spacing / color / typography) from the build
 * handoff reference: docs Documents-Comments-Reference.html. The
 * chosen variant is a single collapsible "Documents & Comments"
 * card with a two-column body — documents (1.4fr) on the left,
 * threaded comments (1fr) on the right.
 *
 * Reuses existing infrastructure from royalty-screen.css:
 *   - .bd-section / .bd-section-head / -chevron / -title / -meta / -body
 *   - .ld-modal* + .ld-btn-* (preview modal chrome)
 *   - the --mt-* brand tokens (defined in royalty-screen.css :root)
 *
 * In this Documents-first slice the comments column is a styled but
 * INERT shell — the composer + threaded view render per the
 * reference, but nothing is persisted yet. The Comments PR wires it
 * to a real backend.
 * ============================================================ */

.docw-section .bd-section-body { padding: 0; background: #fff; }

.docw-grid {
    display: grid;
    /* Documents column takes only a slim edge over comments — just enough for
     * the tab strip to space its words; comments keeps the rest. */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 0;
}
.docw-docs-col {
    background: #fff;
    border-right: 1px solid var(--mt-tan-200);
    min-width: 0;
    /* visible so the row move/more popovers aren't clipped horizontally;
     * the card body still clips vertically (collapse animation), which is
     * why bottom rows open their popover upward (.doc-row-move-pop-up). */
    overflow: visible;
}
.docw-comments-col {
    background: #fff;
    min-width: 0;
    overflow: hidden;
}

/* --- Doc tabs --------------------------------------------------------- */
/* TODO (revisit later — Working Interest document tabs): a working_interest
 * holding renders 12 tabs (All + lease, assignment, plat, ownership_report,
 * run_sheet, original_docs, title, afe, jib, revenue, other). With the
 * mandated "one row, never wrap, never scroll" rule (overflow:hidden below),
 * a narrow detail dialog can push the right-most tabs (Revenue/Misc) past the
 * column edge where they get clipped and become unclickable. Deferred per
 * user direction; revisit how WI overflow should behave (shrink-to-fit vs
 * conditional scroll). See PR #113 discussion r3322366444. */
.doc-tab-strip {
    /* Always exactly one row — never wrap, never scroll. Tabs share the
     * available width evenly; multi-word labels stack internally rather
     * than wrapping the strip or scrolling. */
    display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 3px;
    padding: 8px 6px 0;
    border-bottom: 1px solid var(--mt-tan-200);
    overflow: hidden;
}
.doc-tab {
    /* Folder-style tab: every category reads as a real tab (filled, bordered,
     * rounded top). The active one erases the baseline beneath it so it
     * connects to the document pane below. */
    background: var(--mt-tan-100);
    border: 1px solid var(--mt-tan-200);
    border-top: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    /* Roomier margin to the left/right of the words; modest top/bottom. */
    padding: 0.55em 1.1em;
    margin-bottom: -1px;
    box-sizing: border-box;
    /* Tabs grow to fill the strip so the extra width becomes margin around
     * the centered words (no jammed-against-the-edge labels); the two-line
     * label area below keeps every tab the same height. */
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11.5px;
    color: #6b5236;
    cursor: pointer;
    /* Label with the count badge after it (to the right), vertically centered
     * against the two-line label area so one- and two-word tabs stay the same
     * height. */
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 5px;
    line-height: 1.15;
    text-align: center;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    font-family: inherit;
}
.doc-tab-label {
    /* Column flex stacks the per-word spans reliably (a <br> wouldn't break
     * inside a flex container). Reserve two lines so single-word labels match
     * the wrapped two-word ones. */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 2.3em;
}
.doc-tab-count { flex: 0 0 auto; }
.doc-tab-count.is-zero { background: var(--mt-tan-200); color: #b3a489; }
/* Keep the muted treatment even when the tab is active (e.g. an empty All tab
 * on a doc-less holding) — higher specificity than the active-badge rule. */
.doc-tab.active .doc-tab-count.is-zero { background: var(--mt-tan-200); color: #b3a489; }
.doc-tab:hover { background: #fbf7ee; color: var(--mt-brown-800); }
.doc-tab.active {
    background: #fff;
    border-color: var(--mt-tan-200);
    border-top-color: var(--mt-brown-600);
    border-bottom-color: #fff;   /* erase the baseline → connected active tab */
    color: var(--mt-brown-900);
    font-weight: 600;
    position: relative; z-index: 1;
}
.doc-tab-count {
    background: var(--mt-tan-200);
    color: #6b5236;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}
.doc-tab.active .doc-tab-count {
    background: var(--mt-brown-600);
    color: #fff;
}

/* --- Upload zone ------------------------------------------------------ */
.doc-upload-zone {
    margin: 14px;
    padding: 24px 16px;
    background: var(--mt-cream-100);
    border: 2px dashed var(--mt-tan-300);
    border-radius: 8px;
    display: flex; align-items: center; gap: 14px;
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
}
.doc-upload-zone:hover {
    background: var(--mt-tan-100);
    border-color: var(--mt-brown-600);
}
.docw-docs-col.doc-drop-hover .doc-upload-zone,
.docw-docs-col.doc-drop-hover .doc-upload-zone-mini {
    background: var(--mt-tan-100);
    border-color: var(--mt-brown-600);
}
.doc-upload-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--mt-brown-600);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700;
    flex-shrink: 0;
}
.doc-upload-text { font-size: 12.5px; color: #2c1d0a; line-height: 1.5; }
.doc-upload-hint { color: #888; font-size: 11.5px; }
.doc-upload-hint a { color: var(--mt-brown-700); text-decoration: underline; cursor: pointer; }

.doc-upload-zone-mini {
    margin: 8px 12px;
    padding: 6px 12px;
    background: var(--mt-cream-100);
    border: 1px dashed var(--mt-tan-300);
    border-radius: 5px;
    font-size: 11.5px;
    color: #6b5236;
    text-align: center;
    cursor: pointer;
}
.doc-upload-zone-mini a { color: var(--mt-brown-700); text-decoration: underline; cursor: pointer; }

/* --- Category picker (All-tab upload) -------------------------------- */
.doc-category-picker {
    margin: 10px 14px;
    background: #fff;
    border: 1px solid var(--mt-brown-600);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    overflow: hidden;
    text-align: left;
    max-width: 480px;
}
.doc-category-picker-head {
    padding: 8px 12px;
    background: var(--mt-cream-100);
    border-bottom: 1px solid var(--mt-tan-200);
    font-size: 12px;
    color: var(--mt-brown-800);
    display: flex; align-items: center;
}
.doc-category-picker-head button {
    margin-left: auto;
    background: transparent; border: none; color: #888;
    cursor: pointer; font-size: 13px;
}
.doc-category-picker-options {
    padding: 10px 12px;
    display: flex; flex-wrap: wrap; gap: 6px;
}
.doc-category-picker-opt {
    background: #fff;
    border: 1px solid var(--mt-tan-300);
    color: #6b5236;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.doc-category-picker-opt:hover { background: var(--mt-cream-100); border-color: var(--mt-brown-600); }
.doc-category-picker-opt.on {
    background: var(--mt-brown-600);
    color: #fff;
    border-color: var(--mt-brown-700);
    font-weight: 600;
}
.doc-category-picker-foot {
    padding: 8px 12px;
    background: var(--mt-cream-50);
    border-top: 1px solid var(--mt-tan-200);
    display: flex; gap: 6px; justify-content: flex-end;
}

/* --- Doc list --------------------------------------------------------- */
/* Internal scroller so large attachment sets (the API returns up to 200)
 * stay reachable — the parent .bd-section-body inherits a max-height cap
 * with overflow:hidden from royalty-screen.css, which would otherwise
 * clip the rows past the cap. */
.doc-list {
    padding: 0 6px 12px;
    max-height: 520px;
    overflow-y: auto;
}
.doc-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    margin: 2px 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
}
.doc-row:hover { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.doc-row:focus-within { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.doc-row-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.doc-ic-pdf   { color: #c44; }
.doc-ic-sheet { color: #2e7d32; }
.doc-ic-word  { color: #2a6fdb; }
.doc-ic-img   { color: #9b6b9e; }
.doc-ic-other { color: #888; }
.doc-row-main { flex: 1; min-width: 0; position: relative; }
.doc-row-name {
    font-size: 12.5px; font-weight: 600; color: #2c1d0a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-row-meta {
    font-size: 11px; color: #888;
    display: flex; gap: 4px; margin-top: 2px;
    flex-wrap: wrap;
}
.doc-row-kind { color: var(--mt-brown-700); font-weight: 600; }
.doc-row-kind-btn {
    background: transparent;
    border: 1px solid transparent;
    padding: 0 5px;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: var(--mt-brown-700);
    font-weight: 600;
}
.doc-row-kind-btn:hover {
    background: var(--mt-cream-100);
    border-color: var(--mt-tan-300);
}
.doc-row-move-pop {
    position: absolute;
    background: #fff;
    border: 1px solid var(--mt-brown-600);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    z-index: 20;
    margin-top: 4px;
    min-width: 220px;
}
.doc-row-move-head {
    padding: 6px 10px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--mt-brown-800);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--mt-cream-100);
    border-bottom: 1px solid var(--mt-tan-200);
}
.doc-row-move-pop-up {
    bottom: calc(100% - 14px);
    margin-top: 0;
}
.doc-row-move-options {
    padding: 6px;
    display: flex; flex-wrap: wrap; gap: 4px;
}
.doc-row-move-opt {
    background: #fff;
    border: 1px solid var(--mt-tan-300);
    color: #6b5236;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    cursor: pointer;
    font-family: inherit;
}
.doc-row-move-opt:hover {
    background: var(--mt-brown-600); color: #fff; border-color: var(--mt-brown-700);
}
.doc-row-comments-badge {
    background: var(--mt-cream-100);
    border: 1px solid var(--mt-tan-300);
    color: var(--mt-brown-700);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
.doc-row-comments-badge.active:hover {
    background: var(--mt-brown-600);
    color: #fff;
    border-color: var(--mt-brown-700);
}
.doc-row-actions {
    display: flex; gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.doc-row:hover .doc-row-actions,
.doc-row:focus-within .doc-row-actions { opacity: 1; }
.doc-row-actions button,
.doc-row-actions a {
    background: transparent;
    border: 1px solid var(--mt-tan-300);
    color: var(--mt-brown-800);
    width: 26px; height: 26px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.doc-row-actions button:hover,
.doc-row-actions a:hover {
    background: var(--mt-cream-100);
    border-color: var(--mt-brown-600);
}

/* --- Empty / loading -------------------------------------------------- */
.doc-pane-loading {
    padding: 24px 14px;
    text-align: center;
    color: #8a7050;
    font-style: italic;
    font-size: 12.5px;
}

/* --- Comments column -------------------------------------------------- */
.doc-comments-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mt-tan-200);
    background: #fff;
}
.doc-comments-title {
    font-size: 11px; font-weight: 700; color: var(--mt-brown-800);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.doc-comments-meta { font-size: 11px; color: #888; }
.doc-comments-sort {
    margin-left: auto;
    background: #fff;
    border: 1px solid var(--mt-tan-300);
    color: var(--mt-brown-800);
    padding: 4px 10px;
    font-size: 11.5px;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
}
.doc-comments-sort:hover { background: var(--mt-cream-100); border-color: var(--mt-brown-600); }

/* --- Composer --------------------------------------------------------- */
.doc-composer {
    padding: 12px 14px;
    border-bottom: 1px dashed var(--mt-tan-200);
}
.doc-composer.compact { padding: 6px; }
.doc-composer-reply-to {
    font-size: 11px; color: #6b5236;
    background: var(--mt-cream-100);
    border: 1px solid var(--mt-tan-300);
    border-radius: 4px;
    padding: 4px 8px;
    margin-bottom: 6px;
    display: flex; align-items: center;
}
.doc-composer-reply-to button {
    margin-left: auto;
    background: transparent; border: none; color: #888;
    cursor: pointer; font-size: 12px;
}
.doc-composer-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--mt-tan-300);
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 12.5px;
    font-family: inherit;
    color: #2c1d0a;
    background: #fff;
    resize: vertical;
    min-height: 36px;
}
.doc-composer-input:focus { outline: none; border-color: var(--mt-brown-600); box-shadow: 0 0 0 2px rgba(185,108,40,0.15); }
.doc-composer-input::placeholder { color: #b3a487; }
.doc-composer-foot {
    display: flex; align-items: center; gap: 8px;
    margin-top: 6px;
}
.doc-composer-hint {
    flex: 1;
    font-size: 10.5px; color: #888;
}
.doc-composer-task {
    background: #fff;
    border: 1px solid var(--mt-tan-300);
    color: var(--mt-brown-800);
    padding: 4px 10px;
    font-size: 11.5px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    font-family: inherit;
}
.doc-composer-task:hover { background: var(--mt-cream-100); border-color: var(--mt-brown-600); }
.doc-composer-send {
    background: var(--mt-brown-600);
    color: #fff;
    border: 1px solid var(--mt-brown-700);
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    line-height: 1.3;
    font-family: inherit;
}
.doc-composer-send:hover { background: var(--mt-brown-700); }
.doc-composer-send:disabled { opacity: 0.5; cursor: default; }
.doc-comments-sort { cursor: pointer; }

/* --- Mention popover -------------------------------------------------- */
/* Mounted on <body> with fixed positioning (left/top/width set in JS from the
 * textarea rect) so the Documents & Comments card's overflow:hidden can't clip
 * it. z-index sits above the asset-detail dialog (9100). Scrolls if the team
 * list is long so every user stays reachable. */
.doc-mention-pop {
    position: fixed;
    background: #fff;
    border: 1px solid var(--mt-tan-300);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    min-width: 220px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 10000;
}
.doc-mention-pop-head {
    padding: 6px 10px;
    background: var(--mt-cream-100);
    border-bottom: 1px solid var(--mt-tan-200);
    font-size: 10.5px; font-weight: 700; color: var(--mt-brown-800);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.doc-mention-pop-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 6px 10px;
    font-size: 12px;
    color: #2c1d0a;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.doc-mention-pop-item:hover,
.doc-mention-pop-item.active { background: var(--mt-cream-50); }
.doc-mention-pop-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--mt-brown-600);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* --- Comment item + thread ------------------------------------------- */
.doc-comment {
    display: flex; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mt-tan-200);
}
.doc-comment:last-child { border-bottom: none; }
.doc-comment-reply {
    padding-left: 50px;
    background: var(--mt-cream-50);
}
.doc-comment-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--mt-brown-600);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.doc-comment-body { flex: 1; min-width: 0; }
.doc-comment-meta {
    display: flex; gap: 8px; align-items: baseline;
    margin-bottom: 3px;
}
.doc-comment-author { font-size: 12.5px; font-weight: 600; color: #2c1d0a; }
.doc-comment-delete {
    margin-left: auto;
    background: transparent; border: none;
    color: #b3a489; cursor: pointer;
    font-size: 11px; line-height: 1; padding: 2px 4px;
    font-family: inherit;
}
.doc-comment-delete:hover { color: #b00020; }
.doc-comment-ts { font-size: 10.5px; color: #888; font-variant-numeric: tabular-nums; }
.doc-comment-text {
    font-size: 12.5px; color: #2c1d0a;
    line-height: 1.5;
    word-wrap: break-word;
}
.doc-mention {
    color: var(--mt-brown-700);
    background: var(--mt-cream-100);
    border-radius: 3px;
    padding: 0 4px;
    font-weight: 600;
}
.doc-thread-list { max-height: 480px; overflow: auto; }
.doc-thread-reply-btn {
    background: transparent;
    border: none;
    color: var(--mt-brown-700);
    font-size: 11px;
    padding: 4px 14px 8px 50px;
    cursor: pointer;
    font-family: inherit;
}
.doc-thread-reply-btn:hover { color: var(--mt-brown-900); }
/* Inline editor (double-click your own comment). */
.doc-edit-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--mt-brown-600);
    border-radius: 6px;
    padding: 6px 8px;
    font: inherit;
    font-size: 12.5px;
    resize: vertical;
}
.doc-edit-actions {
    display: flex; justify-content: flex-end; gap: 6px;
    margin-top: 6px;
}
.doc-edit-actions button {
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.doc-edit-cancel { background: transparent; border: 1px solid var(--mt-tan-200); color: #6b5236; }
.doc-edit-save { background: var(--mt-brown-600); border: 1px solid var(--mt-brown-600); color: #fff; }
.doc-edit-save:hover { background: var(--mt-brown-700); }
/* "Replying to <name>" chip above the composer when composing a reply. */
.doc-reply-chip {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    margin-bottom: 6px;
    background: var(--mt-cream-100);
    border: 1px solid var(--mt-tan-200);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--mt-brown-800);
}
.doc-reply-cancel {
    margin-left: auto;
    background: transparent; border: none;
    color: #8a7050; cursor: pointer;
    font-size: 12px; line-height: 1; padding: 2px 4px;
    font-family: inherit;
}
.doc-reply-cancel:hover { color: #b00020; }
.doc-comments-empty {
    padding: 22px 14px;
    text-align: center;
    color: #8a7050;
    font-style: italic;
    font-size: 12px;
}

/* --- Preview modal: must sit ABOVE the asset-detail dialog (z-index
 *     9100 in asset-detail.css) — the shared .ld-modal-backdrop is only
 *     2000, which renders behind it. And .ld-modal is a fixed 640px wide,
 *     too small for a document; widen it for the preview. ---------------- */
.doc-preview-backdrop { z-index: 9999; }
.doc-preview-modal {
    width: min(1100px, 94vw);
    max-width: 1100px;
    /* Definite height (not just max-height) so the flex:1 preview body has
     * a real height to fill — otherwise the PDF iframe collapses to its
     * ~150px intrinsic default. */
    height: 88vh;
    max-height: 92vh;
}

/* --- Preview modal body (real PDF/image viewer in ld-modal chrome) ---- */
.doc-preview-body {
    flex: 1 1 auto;
    min-height: 0;
    background: #e9e3d3;
    display: flex; align-items: center; justify-content: center;
    overflow: auto;
    padding: 0;
}
.doc-preview-frame { width: 100%; height: 100%; border: none; background: #fff; }
.doc-preview-img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Office viewers (SheetJS / Mammoth) render inert DOM into a full-height
 * white scroller. */
.doc-preview-office {
    width: 100%; height: 100%;
    overflow: auto;
    background: #fff;
    padding: 20px 28px;
    box-sizing: border-box;
    align-self: stretch;
}
.doc-preview-doc {
    font-family: ui-serif, Georgia, serif;
    color: #2c1d0a;
    line-height: 1.5;
    max-width: 820px;
    margin: 0 auto;
}
.doc-preview-doc img { max-width: 100%; height: auto; }
.doc-preview-doc table { border-collapse: collapse; margin: 8px 0; }
.doc-preview-doc td, .doc-preview-doc th { border: 1px solid #ccc; padding: 4px 8px; }
.doc-preview-sheet-name {
    font-weight: 700; color: var(--mt-brown-800);
    font-size: 13px; margin: 16px 0 6px;
}
.doc-preview-sheet-block:first-child .doc-preview-sheet-name { margin-top: 0; }
.doc-preview-sheet table {
    border-collapse: collapse;
    font-size: 12.5px;
    margin-bottom: 8px;
    font-family: ui-sans-serif, system-ui, sans-serif;
}
.doc-preview-sheet td, .doc-preview-sheet th {
    border: 1px solid #ccc;
    padding: 3px 8px;
    text-align: left;
    white-space: nowrap;
}
.doc-preview-loading { color: #6b5236; font-style: italic; font-size: 13px; }
.doc-preview-unsupported {
    text-align: center;
    color: #6b5236;
    font-size: 13px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 24px;
}
.doc-preview-head-sub { font-size: 11px; color: #888; }

/* --- Responsive: stack columns on a narrow dialog -------------------- */
@media (max-width: 1100px) {
    .docw-grid { grid-template-columns: 1fr; }
    .docw-docs-col { border-right: none; border-bottom: 1px solid var(--mt-tan-200); }
}