/* A CUSTOMER'S FILES TAB (Steven, 2026-10-17) - Davidson HR's document browser (Shared.Ui document-browser.css) and its
   preview (document-preview.css), with the CRM's icons (AppIcon) for Tabler's font. Steven is colourblind: file kinds
   are told apart by the icon's SHAPE and a word on the row's second line, never by colour alone; the tints are a
   second cue only. Added for the CRM: the drop box and New folder, tags, each item's ⋯ menu, and the Move dialog. */

.doc-browser { display: flex; flex-direction: column; gap: .875rem; container-type: inline-size; }

/* Top bar: 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), so the two always line up. Three columns, then 2 in a narrower pane, 1 on a phone. */
.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; display: inline-flex; }
.doc-crumb { background: none; border: none; padding: 2px .25rem; font: inherit; display: inline-flex; align-items: center; gap: .1875rem; }
.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-crumb-search { color: #8a90a6; }

.doc-search { position: relative; display: flex; align-items: center; min-width: 0; }
.doc-search .doc-search-icon { position: absolute; left: .625rem; color: #8a90a6; 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; }
/* ONE clear button: the browser's own × on a type="search" box is hidden. */
.doc-search input[type="search"]::-webkit-search-cancel-button,
.doc-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.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 results: every matching folder and file, each with the folders it's in. */
.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; text-decoration: none;
}
.doc-result:hover { background: #f4f7fb; border-color: #e4e7ee; color: #1a1f2b; }
.doc-result:focus-visible { outline: 2px solid #7aa9e6; outline-offset: 1px; }
.doc-result-icon { color: #6b7280; flex: none; }
.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-name mark { background-color: #fff066; color: inherit; padding: 0; border-radius: 0; }
.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; }

/* State rows (loading / empty). */
.doc-state { padding: 1.75rem .75rem; color: #6b7280; font-size: .875rem; display: flex; align-items: center; gap: .5rem; justify-content: center; }

/* Each item is a ROW: icon on the left, the FULL name beside it - wrapping, never cut short - and its second line under
   it. 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; width: 100%;
    padding: .625rem 2.25rem .625rem .75rem; border: 1px solid #e4e7ee; border-radius: .625rem;
    background: #fff; cursor: pointer; font: inherit; color: #1a1f2b; text-decoration: none;
    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; justify-self: center; }
.doc-tile > .doc-tile-name, .doc-tile > .doc-tile-sub, .doc-tile > .files-tags { grid-column: 2; }
.doc-tile:hover { border-color: #b9c4d6; box-shadow: 0 2px .625rem rgba(20,31,43,.07); background: #fbfcfe; color: #1a1f2b; }
.doc-tile:focus-visible { outline: 2px solid #7aa9e6; outline-offset: 1px; }
.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-icon { color: #6b7280; }
/* Folders read as folders first. */
.doc-tile.folder .doc-icon, .files-move .doc-icon, .doc-result-icon.folder { color: #e0a83e; }
/* A second tint by kind - NOT the only signal; the icon's shape and the second line carry it. */
.doc-icon.word, .doc-result-icon.word { color: #2b579a; }
.doc-icon.excel, .doc-result-icon.excel { color: #217346; }
.doc-icon.powerpoint, .doc-result-icon.powerpoint { color: #c43e1c; }
.doc-icon.pdf, .doc-result-icon.pdf { color: #b30b00; }
.doc-icon.image, .doc-result-icon.image { color: #6f42c1; }
.doc-icon.archive, .doc-result-icon.archive { color: #7a6a3a; }
.doc-icon.text, .doc-result-icon.text { color: #4b5566; }

/* ---- added for the CRM ---- */

/* The drop box (the card window's .drop) beside New folder. */
.files-tools { display: flex; align-items: stretch; gap: .625rem; }
.files-drop { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem .75rem; }
.files-tools > .cmd-btn { flex: none; }

/* TAGS: words in a quiet pill, never colour alone. On a row they sit under its second line; above the list, the
   customer's tags filter it - the one chosen is filled and ticked. */
.files-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .1875rem; }
.files-tag {
    display: inline-flex; align-items: center; gap: .25rem; padding: 1px .5rem; border-radius: 999px;
    border: 1px solid #cddcf3; background: #eef3fb; color: #2b5cad; font-size: .6875rem; font-weight: 600; line-height: 1.5;
}
.files-tagbar { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; }
.files-tagbar .cell-sub { margin-right: .125rem; }
button.files-tag { cursor: pointer; font-family: inherit; }
button.files-tag:hover { border-color: #9fb9e0; background: #e3ecf8; }
button.files-tag.on { background: #2b5cad; border-color: #2b5cad; color: #fff; }
.files-tag-x { border: 0; background: none; padding: 0; margin-left: .125rem; color: inherit; cursor: pointer; display: inline-flex; }
.files-tag-edit { display: flex; gap: .5rem; margin-top: .625rem; }
.files-tag-edit input { flex: 1 1 auto; }

/* DRAG AND DROP: the item being dragged fades; a folder (or a folder in the path) it would go into is outlined. */
.doc-tile-wrap[draggable="true"] > .doc-tile { cursor: grab; }
.doc-tile-wrap.dragging { opacity: .45; }
.doc-tile-wrap.drop-on > .doc-tile { border-color: #1f5fae; box-shadow: inset 0 0 0 2px #7aa9e6; background: #eef4fb; }
.doc-crumb.drop-on { background: #dce9f8; outline: 2px solid #7aa9e6; }

/* Each item's ⋯, top right of its row, and the menu under it. The shade behind the menu only closes it. */
.doc-tile-wrap { position: relative; display: flex; min-width: 0; }
.files-more {
    position: absolute; top: .4375rem; right: .375rem; width: 1.75rem; height: 1.75rem; border: 0; border-radius: .375rem;
    background: transparent; color: #8a90a6; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.files-more:hover, .files-more:focus-visible { background: #eef1f6; color: #1a1f2b; outline: none; }
.files-menu-shade { position: fixed; inset: 0; z-index: 30; }
.files-menu {
    position: absolute; top: 2.375rem; right: .375rem; z-index: 31; min-width: 10rem; padding: .25rem;
    background: #fff; border: 1px solid #d7dbe3; border-radius: .5rem; box-shadow: 0 8px 24px rgba(20,31,43,.14);
    display: flex; flex-direction: column;
}
.files-menu > button, .files-menu > a {
    display: flex; align-items: center; gap: .5rem; padding: .4375rem .625rem; border: 0; border-radius: .375rem;
    background: none; font: inherit; font-size: .875rem; color: #1a1f2b; text-align: left; cursor: pointer; text-decoration: none;
}
.files-menu > button:hover, .files-menu > a:hover { background: #f1f4f9; color: #1a1f2b; }
.files-menu > .danger { color: #b42318; }
.files-menu > .danger:hover { background: #fdecea; color: #b42318; }

/* Move: the folders as a tree; the one chosen is marked by its edge AND its weight. */
.files-move { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.files-move > button {
    display: flex; align-items: center; gap: .5rem; padding: .4375rem .625rem; border: 1px solid transparent; border-radius: .375rem;
    background: none; font: inherit; font-size: .875rem; color: #1a1f2b; text-align: left; cursor: pointer;
}
.files-move > button:hover:not(:disabled) { background: #f4f7fb; border-color: #e4e7ee; }
.files-move > button:disabled { color: #8a90a6; cursor: default; }
.files-move > button.on { background: #eef4fb; border-color: #7aa9e6; font-weight: 600; }

/* ---- the preview (Davidson HR's document-preview.css) ---- */

/* The shade is only a shade: clicks go through it to the page (click away closes; another file opens). */
.dp-shade { position: fixed; inset: 0; background: rgba(12, 18, 32, .28); z-index: 1060; pointer-events: none; animation: dp-fade .18s ease; }
.dp-place { position: fixed; inset: 0; z-index: 1061; display: flex; align-items: center; justify-content: center; padding: 20px; pointer-events: none; }
.dp { pointer-events: auto; width: min(1040px, 100%); height: min(88vh, 900px); background: #fff; border-radius: 14px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .32); display: flex; flex-direction: column; outline: none; animation: dp-rise .2s ease;
      font-family: inherit; color: #1c2130; }
.dp.dp-gone { display: none; }
@keyframes dp-fade { from { opacity: 0; } }
@keyframes dp-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } }

.dp-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-bottom: 1px solid #e2e5ee; }
.dp-icon { flex: 0 0 auto; color: #55607a; }
.dp-icon.word { color: #2b579a; }
.dp-icon.excel { color: #217346; }
.dp-icon.powerpoint { color: #b7472a; }
.dp-icon.pdf { color: #b30b00; }
.dp-icon.image { color: #6f42c1; }
.dp-title { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.dp-title b { font-size: 15px; font-weight: 600; color: #191F45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-title span { color: #6b7287; font-size: 12.5px; }
.dp-acts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.dp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid #08203d;
          background: #08203d; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; }
.dp-btn:hover, .dp-btn:focus-visible { background: #0d2f57; color: #fff; outline: none; }
.dp-btn:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #08203d; }
.dp-x { width: 36px; height: 36px; border-radius: 8px; border: 0; background: transparent; color: #55607a; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.dp-x:hover, .dp-x:focus-visible { background: #eef1f6; outline: none; }

/* The pages, on grey: the frame over the "Preparing preview…" line until it has drawn. */
.dp-body { flex: 1 1 auto; min-height: 0; position: relative; background: #d9dde6; border-radius: 0 0 14px 14px; overflow: hidden; }
.dp-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #3b4256; font-size: 14px; }
.dp-loaded .dp-wait { display: none; }
.dp-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
/* A picture: centred, as large as fits, never larger than it is. */
.dp-img { object-fit: scale-down; padding: 20px; box-sizing: border-box; }
.dp-say { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 24px;
          color: #3b4256; font-size: 15px; }
.dp-nopdf { display: none; }
.dp.no-pdf .dp-frame, .dp.no-pdf .dp-wait { display: none; }
.dp.no-pdf .dp-nopdf { display: flex; }

/* A phone: the whole screen, the action under the name. */
@media (max-width: 640px) {
    .dp-place { padding: 0; align-items: stretch; }
    .dp { width: 100%; height: 100%; border-radius: 0; }
    .dp-body { border-radius: 0; }
    .dp-head { flex-wrap: wrap; }
    .dp-title { flex-basis: calc(100% - 90px); }
    .dp-acts { order: 3; flex-basis: 100%; }
    .dp-acts .dp-btn { flex: 1; justify-content: center; }
}