/* Dialogs (home) screen. Plain CSS served directly from /assets, outside the
   Tailwind build: edit, reload, done. Keep Tailwind syntax (@apply etc) out. */

/* Shared vocabulary, usable from markup anywhere (plain-CSS spellings of
   text-muted-foreground etc, always live without a rebuild) */
.muted { color: var(--color-muted-foreground); }
.sm-caps {
  color: var(--color-muted-foreground);
  font-variant: all-small-caps;
  white-space: nowrap;
}

#dialogs {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 0.5rem;
  /* On phones (single-column grid) show the create-dialog/secrets column first, file listing last */
  order: 9999;
  @media (width >= 48rem) { order: -9999; }

  /* "Show all files?" toggle reveals rows hidden by default (non-dialog files, dotfiles) */
  &:has(#toggle_files:checked) .hiddenrow { display: grid; }

  .dlg-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
    padding-block: 0.5rem;
    @media (width >= 64rem) { flex-direction: row; }
  }
}

#recents {
  display: grid;
  align-content: start;
  flex-basis: 33.3333%;
  li { display: grid; }
  li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    margin-bottom: 0.25rem;
    padding: 0.375rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 500;
    }
  }
}

/* The Name/Size/Modified file table. Keyed on class (not #dlg-table) so other
   contexts (e.g. search results) can reuse the row machinery with this wrapper. */
.file-tbl {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 3fr 1fr 1fr auto;
  place-content: start;

  /* head, body, and rows are all 4-wide subgrids, so cells align as table columns */
  .tbl-head {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 4;
    padding-inline: 0.75rem;
  }

  .tbl-body {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 4;
    border: 1px solid var(--color-border);
    padding: 0.25rem;
  }

  .tbl-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 4;
    align-items: center;
    padding: 0.25rem;
    border-bottom: 1px solid var(--color-border);
    transition: all 75ms;
    &.hiddenrow { display: none; }
    &:focus { outline: none; }
    @media (hover: hover) {
      &:hover { background: color-mix(in oklab, var(--color-muted) 60%, transparent); }
    }
    /* Keyboard-selected row (selection-dialog.js) */
    &[aria-selected="true"]:focus-within { box-shadow: inset 0 0 0 2px var(--color-primary); }

    svg {
      width: 1rem;
      height: 1rem;
      display: inline-block;
      vertical-align: sub;
    }

    .file-link {
      /* clamp the name to 2 lines, breaking anywhere in long unbroken names */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      overflow-wrap: anywhere;
      padding-right: 0.25rem;
      font-weight: 500;
      &[data-disabled] {
        pointer-events: none;
        color: var(--color-muted-foreground);
      }
      svg { margin-right: 0.375rem; }
    }

    .file-opts {
      width: fit-content;
      height: fit-content;
      padding: 0.25rem;
      border-radius: 9999px;
      color: var(--color-muted-foreground);
      @media (hover: hover) {
        &:hover {
          color: var(--color-foreground);
          background: color-mix(in oklab, var(--color-muted-foreground) 10%, transparent);
        }
      }
    }

    .uk-drop {
      min-width: 8rem;
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
      svg { margin-right: 0.375rem; }
    }
  }
}

#disclaimer {
  width: 100%;
  padding-inline: 1rem;
  text-align: center;
  color: var(--color-muted-foreground);
  flex: 0 auto;
  /* Last in the navbar on phones; inline (and truncated) from sm up */
  order: 9999;
  @media (width >= 40rem) {
    order: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

#filter {
  margin-block: 1px;
  margin-left: 0.25rem;
  width: fit-content;
  height: fit-content;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: 500;
  &:empty { display: none; }
  &::before { content: '🔎'; padding-right: 0.25rem; }
}