/* DocumentBrowser (Shared.Ui) — icon/tile grid + breadcrumb + search. Used by the CRM
   Documents screen and, later, the client portal. Steven is colourblind: file kinds are
   distinguished by ICON SHAPE and by a text label in the tile subtitle, never by colour
   alone. The faint kind tints below are a secondary cue only. */

.doc-browser { display: flex; flex-direction: column; gap: .875rem; }
/* When hosted in a fill-to-bottom pane, grow to fill it (the grid area takes the slack, the
   top bar stays put). Harmless elsewhere — a plain container just sizes to content. */
.detail-cols .tab-pane.doc-pane .doc-browser { flex: 1 1 auto; min-height: 0; }
.detail-cols .tab-pane.doc-pane .doc-grid { align-content: start; }

/* Documents page: the browser sits INSIDE the shared .tab-pane (which already draws the white
   panel, border and padding connected to the selected tab) — so the browser adds no border of
   its own, it IS the tab's content. The pane fills to the bottom via .detail-cols; make its
   host cell a flex column so the browser can fill that height too (Steven, 2026-09-14). */
.detail-cols .tab-pane.doc-pane { display: flex; flex-direction: column; }

/* Bespoke tab: the "choose a client" bar above the browser — a searchable DxComboBox. */
.doc-clientbar { display: flex; align-items: center; gap: .625rem; margin-bottom: .875rem; }
/* ONE clear button in the search box (2026-10-05): the browser's own × on a type="search" box is hidden,
   leaving the browser component's - the portal showed both, and only one worked. */
.doc-search input[type="search"]::-webkit-search-cancel-button,
.doc-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* Document Templates: Master Templates | Client View switch above either view (2026-10-05). */
.doc-viewbar { margin-bottom: .875rem; }
.doc-clientbar-label { font-size: .8125rem; color: #55607a; }
.doc-client-combo { width: 21.25rem; max-width: 100%; }

/* Client → Documents: the "linked to X · Change…" row above the merged browser. */
.doc-linkrow { display: flex; align-items: center; gap: .625rem; margin-bottom: .75rem; }
.doc-linkrow .link-btn { background: none; border: none; color: #1f5fae; cursor: pointer; font: inherit; font-size: .8125rem; padding: 0; }
.doc-linkrow .link-btn:hover { text-decoration: underline; }

/* Client → Documents controls row: what is left after the linked folder moved up beside the
   heading (2026-09-16) — the hide-master-templates toggle. */
.doc-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .875rem; }
.doc-check { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; color: #1a1f2b; cursor: pointer; white-space: nowrap; }
.doc-check input { cursor: pointer; }

/* Footer note under the grid, e.g. "3 empty folders hidden". */
.doc-foot-note { margin-top: .875rem; font-size: .7812rem; color: #8a90a6; display: flex; align-items: center; gap: .375rem; }
.doc-empty {
    display: flex; flex-direction: column; align-items: center; gap: .625rem;
    text-align: center; padding: 3rem 1.25rem; color: #6b7280;
}
.doc-empty > .ti { font-size: 2.5rem; color: #b9c1cf; }
.doc-empty p { margin: 0; max-width: 46ch; }
/* The rule under the client view's controls, its words set into the middle and pointing down
   ("Ark Mat view below ↓", 2026-09-15). The words sit on the pane's white, breaking the line. */
.doc-viewline { display: flex; align-items: center; gap: .75rem; margin: .25rem 0 .875rem; color: #59607a; font-size: .7812rem; font-weight: 600; }
.doc-viewline::before, .doc-viewline::after { content: ""; flex: 1 1 auto; border-top: 1px solid #d5d9e6; }
.doc-viewline > span { display: inline-flex; align-items: center; gap: .3125rem; white-space: nowrap; }
.doc-empty.compact { padding: 1.25rem 1.25rem 1.5rem; }
.doc-empty.compact > .ti { font-size: 1.875rem; }

/* The client view's two sections — Documents (SharePoint) and Case Documents (the CRM's own
   uploads), 2026-09-15. Documents has a heading; Case Documents is named by its browser's own
   root and set apart from the first by a rule. */
.doc-section-h { margin: 0 0 .75rem; font-size: 1rem; font-weight: 700; color: #191F45; display: flex; align-items: center; gap: .4375rem; }
.doc-section-sep { margin-top: 1.625rem; padding-top: 1.125rem; border-top: 1px solid #e4e7ee; }
/* The Documents heading with, when no bespoke folder is linked, the quiet link action at its
   right (2026-09-15). The heading keeps its own margin; the row only lines the two up. */
.doc-section-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; }
.doc-link-quiet { display: inline-flex; align-items: center; gap: .625rem; margin-bottom: .75rem; }
/* A linked folder the connected library doesn't have (2026-09-16): words and a warning icon, amber. */
.doc-link-missing { display: inline-flex; align-items: center; gap: .3125rem; color: #9a5a12; font-weight: 600; }

/* Top bar (Steven, 2026-10-05): SEARCH ON THE LEFT, its edges on the first column's below; the trail
   beside it. The bar IS the list's grid (the same columns and gap as .doc-grid, in the same width), so
   the two always line up. Change one template, change both.
   THREE COLUMNS (Steven, 2026-10-06): the width the browser is GIVEN decides it, not the screen's - the
   CRM puts it in a pane, the portal in a card - so a container query. 3, then 2 on a small laptop, 1 on a phone. */
.doc-browser { container-type: inline-size; }
.doc-bar, .doc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; }
.doc-bar { align-items: center; }
.doc-bar > .doc-search { grid-column: 1; grid-row: 1; }
.doc-bar > .doc-crumbs { grid-column: 2 / -1; grid-row: 1; }
@container (max-width: 760px) {
    .doc-bar, .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 480px) {
    .doc-bar, .doc-grid { grid-template-columns: minmax(0, 1fr); }
    .doc-bar > .doc-crumbs { grid-column: 1; grid-row: 2; }
}

.doc-crumbs { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; font-size: .875rem; min-width: 0; }
.doc-crumb-sep { color: #9aa3b2; font-size: .8125rem; }
.doc-crumb { background: none; border: none; padding: 2px .25rem; font: inherit; }
.doc-crumb.link { color: #1f5fae; cursor: pointer; border-radius: .25rem; }
.doc-crumb.link:hover { background: #eef4fb; text-decoration: underline; }
.doc-crumb.current { color: #1a1f2b; font-weight: 600; }

.doc-search { position: relative; display: flex; align-items: center; min-width: 0; }
.doc-search .ti-search { position: absolute; left: .625rem; color: #8a90a6; font-size: 1rem; pointer-events: none; }
.doc-search input {
    padding: .4375rem 1.875rem .4375rem 2rem; border: 1px solid #d7dbe3; border-radius: .5rem;
    font: inherit; font-size: .875rem; width: 100%; min-width: 0; background: #fff; color: #1a1f2b;
}
.doc-search input:focus { outline: 2px solid #9cc2ef; outline-offset: 0; border-color: #7aa9e6; }
.doc-search-clear {
    position: absolute; right: .375rem; background: none; border: none; cursor: pointer;
    color: #8a90a6; padding: 2px; display: inline-flex; border-radius: .25rem;
}
.doc-search-clear:hover { color: #4b5566; background: #eef1f6; }

/* Search breadcrumb marker — “/ 🔍 term” at the end of the trail while searching. */
.doc-crumb-search { font-size: .8125rem; margin-right: .1875rem; color: #8a90a6; }

/* Search results: a flat, scannable list of matching files AND folders from the whole tree.
   Each row = type icon · name (matched chars highlighted) · folder path. */
.doc-results { display: flex; flex-direction: column; gap: 2px; }
.doc-results-head { font-size: .75rem; color: #8a90a6; padding: 2px .25rem .5rem; }
.doc-result {
    display: flex; align-items: center; gap: .75rem; text-align: left; width: 100%;
    padding: .5625rem .625rem; border: 1px solid transparent; border-radius: .5rem;
    background: none; cursor: pointer; font: inherit; color: #1a1f2b;
}
.doc-result:hover { background: #f4f7fb; border-color: #e4e7ee; }
.doc-result:focus-visible { outline: 2px solid #7aa9e6; outline-offset: 1px; }
.doc-result-icon { font-size: 1.375rem; color: #6b7280; flex: none; }
.doc-result-icon.folder { color: #e0a83e; }
.doc-result-icon.word { color: #2b579a; }
.doc-result-icon.excel { color: #217346; }
.doc-result-icon.powerpoint { color: #c43e1c; }
.doc-result-icon.pdf { color: #b30b00; }
.doc-result-icon.image { color: #6f42c1; }
.doc-result-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.doc-result-name { font-size: .875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-result-path { font-size: .75rem; color: #8a90a6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-result-sub { font-size: .75rem; color: #8a90a6; flex: none; }
.doc-result-tick { flex: none; font-size: .75rem; font-weight: 600; color: #191F45; display: inline-flex; align-items: center; gap: .1875rem; }

/* PICKING FILES (2026-09-16 — a case's policy documents). A chosen tile gets a tick in its corner
   and a heavier navy edge; the tick is the signal, the edge only backs it up. */
.doc-tile.selectable { position: relative; }
.doc-tile-tick {
    position: absolute; top: .5rem; right: .5rem; width: 1.25rem; height: 1.25rem; border-radius: .3125rem;
    border: 1.5px solid #c3cad8; background: #fff; display: flex; align-items: center; justify-content: center;
    font-size: .875rem; color: #fff;
}
.doc-tile.selected { border-color: #191F45; box-shadow: inset 0 0 0 1px #191F45; }
.doc-tile.selected .doc-tile-tick { background: #191F45; border-color: #191F45; }

/* Matched-character highlight — the same yellow <mark> the CRM grids use (app.css). Repeated
   here so it also applies inside this Shared.Ui component (and in the portal). Yellow is an
   ADDITIVE emphasis on already-listed results, never the sole signal — safe for colourblind. */
.doc-result-name mark { background-color: #fff066; color: inherit; padding: 0; border-radius: 0; }

/* State rows (loading / error / empty). */
.doc-state { padding: 1.75rem .75rem; color: #6b7280; font-size: .875rem; display: flex; align-items: center; gap: .5rem; justify-content: center; }
.doc-state.error { color: #b32121; }
.doc-state .spin { animation: doc-spin 0.9s linear infinite; }
@keyframes doc-spin { to { transform: rotate(360deg); } }

/* The list (.doc-grid's columns are set with the bar's, above). Each item is a ROW (Steven, 2026-10-06):
   icon on the left, the FULL name beside it - wrapping, never cut short - and its second line (and pill)
   under the name. Read across: folders first, then files, A-Z. */
.doc-tile {
    display: grid; grid-template-columns: 1.875rem minmax(0, 1fr); column-gap: .75rem; row-gap: 2px;
    align-content: start; text-align: left;
    padding: .625rem .75rem; border: 1px solid #e4e7ee; border-radius: .625rem;
    background: #fff; cursor: pointer; font: inherit; color: #1a1f2b;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.doc-tile > .doc-icon { grid-column: 1; grid-row: 1 / span 3; align-self: start; text-align: center; }
.doc-tile > .doc-tile-name, .doc-tile > .doc-tile-sub, .doc-tile > .doc-tile-pill { grid-column: 2; }
.doc-tile:hover { border-color: #b9c4d6; box-shadow: 0 2px .625rem rgba(20,31,43,.07); background: #fbfcfe; }
.doc-tile:focus-visible { outline: 2px solid #7aa9e6; outline-offset: 1px; }

.doc-icon { font-size: 1.75rem; line-height: 1; color: #6b7280; }
/* Folders read as folders first. */
.doc-tile.folder .doc-icon { color: #e0a83e; }
/* Secondary colour tint by kind — NOT the only signal; the icon glyph and the subtitle carry it. */
.doc-icon.word { color: #2b579a; }
.doc-icon.excel { color: #217346; }
.doc-icon.powerpoint { color: #c43e1c; }
.doc-icon.pdf { color: #b30b00; }
.doc-icon.image { color: #6f42c1; }
.doc-icon.archive { color: #7a6a3a; }
.doc-icon.text { color: #4b5566; }

/* A file that opens in a new tab carries the external-link icon after its name (2026-09-15). */
.doc-tile .new-tab-icon, .doc-result .new-tab-icon { font-size: .85em; margin-left: .25rem; vertical-align: -1px; opacity: .7; }
/* The WHOLE name (2026-10-06) - no longer clamped to two lines; a long one wraps and its row grows. */
.doc-tile-name { font-size: .8438rem; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.doc-tile-sub { font-size: .75rem; color: #8a90a6; line-height: 1.3; }
.doc-tile-pill { display: flex; align-items: center; margin-top: .1875rem; }
.doc-tile-pill:empty { display: none; }
/* A pickable file's tick sits top right: keep the name clear of it. */
.doc-tile.selectable { padding-right: 2.375rem; }

/* A folder tile with its own action (Case Documents' "Case details"): the action is a separate
   button laid over the tile's (empty, kept) pill row, under the name - the tile's bottom padding puts it there. */
.doc-tile-wrap { position: relative; display: flex; }
.doc-tile-wrap > .doc-tile { flex: 1 1 auto; min-width: 0; }
.doc-tile-wrap .doc-tile-pill:empty { display: block; height: 1.25rem; }
.doc-tile-action {
    position: absolute; left: 3.4375rem; bottom: .625rem;   /* 13px border+padding, 30px icon, 12px gap */
    height: 1.25rem; display: inline-flex; align-items: center; gap: .1875rem; white-space: nowrap;
    font: inherit; font-size: .6562rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    padding: 0 .5rem; border-radius: 62.4375rem; border: 1px solid #c9d1de; background: #f4f6fa; color: #191F45; cursor: pointer;
}
.doc-tile-action .ti { font-size: .75rem; }
.doc-tile-action:hover { background: #e7ecf4; border-color: #9fb0c8; }
.doc-tile-action:focus-visible { outline: 2px solid #7aa9e6; outline-offset: 1px; }

/* Bespoke folder icon is BLUE; everything else keeps the default amber (Steven, 2026-09-15). */
.doc-tile.folder .doc-icon.bespoke, .doc-icon.bespoke { color: #2b5cad; }

/* Provenance pill — a WORD + icon, never colour alone (Steven is colourblind; the legacy
   portal's blue-text-only marker is deliberately not copied). Only BESPOKE is labelled. */
.doc-pill { display: inline-flex; align-items: center; gap: .1875rem; font-size: .6562rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 1px .4375rem; border-radius: 62.4375rem; border: 1px solid; }
.doc-pill .ti { font-size: .75rem; }
.doc-pill.bespoke { background: #eef3fb; color: #2b5cad; border-color: #cddcf3; }
.doc-result-name .doc-pill { margin-left: .375rem; vertical-align: middle; }

/* Dark theme: the CRM is light today, but keep the component honest if a host is dark. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .doc-search input,
    :root:not([data-theme="light"]) .doc-tile { background: #1a1e27; color: #e8ecf3; border-color: #2c333f; }
    :root:not([data-theme="light"]) .doc-crumb.current { color: #e8ecf3; }
    :root:not([data-theme="light"]) .doc-tile:hover { background: #222834; border-color: #3a4250; }
}