/* ==========================================================================
   MGT2E DATAPAD — Database module (.db)
   Layout, panes, bars, rows, rich text and the confirm dialog come from components.css.
   1. Index: tree rows
   2. Reader
   3. Link mode: the index picking a link's target
   ========================================================================== */

@layer modules {

  /* ---------- 1. Index ---------- */
  .db-children {
    list-style: none;
  }

  .db-caret {
    display: grid;
    place-items: center;
    width: 10px;
    height: 10px;
    color: var(--c-ice-dim);
  }

  .db-row:hover .db-caret {
    color: var(--c-ice-bright);
  }

  .db-caret svg {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--dur) var(--ease);
  }

  .db-caret.is-open svg {
    transform: rotate(90deg);
  }

  .db-icon {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
  }

  .db-icon--entry {
    background: var(--c-ice-dim);
  }

  .db-icon--folder {
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    color: var(--c-orange);
  }

  .db-icon--folder svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
  }

  /* ---------- 2. Reader ---------- */
  .db-body {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
  }

  /* Highlight while a file is dragged over the reader */
  .db-reader.is-file-drop {
    outline: 1px dashed var(--c-orange);
    outline-offset: -6px;
    background: rgba(255, 138, 31, 0.06);
  }

  /* ---------- 3. Link mode ---------- */
  /* The index picks a link's target: outlined in orange, the search box saying so in orange, and a Cancel
     button laid over the new/folder/delete buttons */
  .split__index.is-linking {
    box-shadow: inset 0 0 0 1px var(--c-orange);
  }

  .is-linking .search::placeholder {
    color: var(--c-orange);
  }

  .db-actions {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
  }

  .db-cancel-link {
    position: absolute;
    inset: 0;
  }

  /* Hidden but still holding their space, so the Cancel button covers exactly their width (the buttons are see-through) */
  .is-linking .db-actions [data-act] {
    visibility: hidden;
  }

  .db-cancel-link[hidden] {
    display: none;
  }

  /* The entry being linked from can't be picked */
  .is-linking .db-node[data-kind="entry"] > .db-row.is-active {
    cursor: default;
  }
}