/* ----------------------------------------------------------------------------
   library.css — The Library page proper: the model-context capacity meter, the search
   toolbar, the nested folder tree (rows, folders, drag-to-move, Finder-style
   selection) and the per-row badges and metadata.
   Slice 8 of 16 (see css/tokens.css for the full load order).
   ------------------------------------------------------------------------- */
/* library: model-context capacity meter */
.capacity {
  margin: 16px 0 4px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.capacity-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.capacity-label {
  font-size: 13px;
  font-weight: 600;
}

.capacity-text {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.capacity-track {
  height: 7px;
  background: var(--surface-3);
  border-radius: 6px;
  overflow: hidden;
}

.capacity-fill {
  height: 100%;
  width: 0%;
  border-radius: 6px;
  background: var(--accent-2);
  transition: width 0.35s ease, background-color 0.25s ease;
}

.capacity-fill.warn {
  background: var(--warn-text);
}

.capacity-fill.danger {
  background: var(--danger-text);
}

.capacity-note {
  margin-top: 7px;
  font-size: 12px;
  color: var(--muted);
}

.capacity-note.full {
  color: var(--danger-text);
  font-weight: 500;
}

/* library: search toolbar + nested folder tree */
.library-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 8px;
  flex-wrap: wrap;
}

.library-toolbar #doc-search,
.library-toolbar #admin-doc-search,
.library-toolbar #company-search {
  flex: 1;
  min-width: 160px;
  height: 38px;
}

/* Autofill tripwire (see the #doc-search guard in js/app.js): the moment any
   WebKit/Blink autofill touches the field it applies :-webkit-autofill, which
   starts this no-op animation — the animationstart event is the only reliable
   signal for fills that never fire an input event. Also neutralises the
   yellow/blue autofill flash for the frame it exists. */
@keyframes autofill-tripwire {
  from { opacity: 1; }
  to { opacity: 1; }
}

#doc-search:-webkit-autofill,
#admin-doc-search:-webkit-autofill,
#company-search:-webkit-autofill {
  animation: autofill-tripwire 1ms;
  transition: background-color 9999s ease-out;
  -webkit-text-fill-color: var(--text);
}

.select-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.bulk-bar #bulk-count {
  font-size: 13px;
  font-weight: 600;
  margin-right: auto;
}

.doc-tree {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
}

.doc-tree .empty {
  color: var(--muted);
  padding: 16px 6px;
}

.folder-header,
.tree-file {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding-right: 10px;
  border-radius: var(--radius-sm);
  transition: background-color 0.16s ease, box-shadow 0.18s ease,
    transform 0.16s ease, opacity 0.16s ease;
}

.folder-header {
  cursor: pointer;
  font-weight: 600;
}

.folder-header:hover,
.tree-file:hover {
  background: var(--surface-2);
}

/* a gentle nudge on hover so the list feels alive (suppressed mid-drag —
   rows shifting under the pointer would fight the drop highlight) */
.doc-tree:not(.drag-active) .folder-header:hover,
.doc-tree:not(.drag-active) .tree-file:hover {
  transform: translateX(3px);
}

/* delete buttons stay out of the way until the row is hovered (pointer
   devices only — on touch they must always be visible) */
@media (hover: hover) {

  .folder-header .icon-btn,
  .tree-file .icon-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .folder-header:hover .icon-btn,
  .tree-file:hover .icon-btn,
  .folder-header .icon-btn:focus-visible,
  .tree-file .icon-btn:focus-visible {
    opacity: 1;
  }
}

.tw-caret {
  display: inline-flex;
  color: var(--muted);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.folder-header.collapsed .tw-caret {
  transform: rotate(-90deg);
}

.tw-caret svg {
  width: 14px;
  height: 14px;
  display: block;
}

.tw-icon {
  display: inline-flex;
  color: var(--muted);
  flex-shrink: 0;
}

.tree-file .tw-icon {
  color: var(--accent-2);
}

.tw-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}

.tw-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-count {
  color: var(--muted);
  font-weight: 500;
  font-size: 12px;
  margin-left: auto;
  flex-shrink: 0;
  background: var(--surface-2);
  padding: 1px 9px;
  border-radius: 12px;
}

.folder-header:hover .tw-count {
  background: var(--surface-3);
}

/* folder open/close animates height via the grid 0fr/1fr trick (no JS
   measuring): .folder-body is a one-row grid, the inner wrapper clips.
   visibility rides along so collapsed content can't be tabbed into. */
.folder-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.folder-body.collapsed {
  grid-template-rows: 0fr;
}

.folder-body-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
  visibility: visible;
  transition: visibility 0.28s;
}

.folder-body.collapsed>.folder-body-inner {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {

  .folder-body,
  .folder-body-inner {
    transition: none;
  }
}

.tree-file .grow {
  overflow: hidden;
}

/* drag-to-move: rows and folder headers can be picked up; folders (and the
   tree background = the library root) light up as drop targets. While a drag
   is live (.drag-active) row children ignore the pointer so enter/leave fires
   on whole rows — that keeps the highlight rock-steady. */
.tree-file {
  cursor: grab;
}

.tree-file:active {
  cursor: grabbing;
}

.doc-tree.drag-active .folder-header>*,
.doc-tree.drag-active .tree-file>* {
  pointer-events: none;
}

.tree-file.dragging,
.folder-header.dragging {
  opacity: 0.4;
  transform: scale(0.99);
}

.folder-header.drop-target,
.tree-file.drop-target {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.folder-header.drop-target {
  animation: drop-ring 1s ease-in-out infinite;
}

@keyframes drop-ring {
  50% {
    box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent);
  }
}

/* hovering a file row targets its folder — light the folder header up too,
   and tint the folder's contents so the whole destination reads as one */
.tree-folder:has(> .folder-body > .folder-body-inner > .tree-file.drop-target)>.folder-header {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.tree-folder:has(> .folder-header.drop-target)>.folder-body,
.tree-folder:has(> .folder-body > .folder-body-inner > .tree-file.drop-target)>.folder-body {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: var(--radius-sm);
}

.doc-tree.drop-root {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

/* ---- Finder-like selection: a persistent accent wash on picked rows.
   Distinct from the (pulsing, ringed) drop-target so a selected row you're
   dragging onto still reads clearly. */
.tree-file.selected,
.folder-header.selected {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.tree-file.selected:hover,
.folder-header.selected:hover {
  background: color-mix(in srgb, var(--accent) 26%, var(--surface));
}

.tree-file.selected .doc-name,
.folder-header.selected .tw-name {
  color: var(--text);
}

/* the whole selection dims together while it's being dragged as one */
.tree-file.dragging.selected,
.folder-header.dragging.selected {
  opacity: 0.4;
}

/* the "N items" pill used as the drag image for a multi-item drag. Kept just
   off-screen so the browser rasterises it for setDragImage without a flash;
   if a browser can't, it simply falls back to dragging the row itself. */
.drag-badge {
  position: fixed;
  top: -40px;
  left: 0;
  z-index: -1;
  pointer-events: none;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow);
}

/* solid red confirm button for destructive modals */
button.danger-solid {
  background: var(--danger-text);
  border-color: transparent;
  color: #fff;
  box-shadow: none;
}

button.danger-solid:hover:not(:disabled) {
  filter: brightness(1.08);
  border-color: transparent;
}

.tree-file .doc-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-btn svg {
  width: 15px;
  height: 15px;
  display: block;
}

.list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  min-height: 52px;
}

.list-item .grow {
  overflow-wrap: anywhere;
}

.list .empty {
  color: var(--muted);
  padding: 10px 2px;
  border: none;
  background: none;
  min-height: 0;
}

.badge {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-ready {
  background: var(--ok-bg);
  color: var(--ok-text);
}

.badge-inline {
  background: var(--surface-2);
  color: var(--muted);
}

.badge-image {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

.doc-type {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.doc-tokens {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
}

.folder-tokens {
  margin-left: auto;
  font-weight: 500;
  flex-shrink: 0;
}

.folder-header .tw-count {
  margin-left: 10px;
}