/* Project documents (Documents.razor): the documents table with a type icon per row. */
.ish-doc-name { display: flex; min-width: 0; align-items: center; gap: 12px; }

.ish-doc-icon { --tone: var(--brand); display: inline-flex; width: 38px; height: 38px; flex: none; align-items: center; justify-content: center; border-radius: 9px; background: color-mix(in srgb, var(--tone) 13%, transparent); color: var(--tone); font-size: 21px; }

.ish-doc-icon--pdf { --tone: var(--error); }

.ish-doc-icon--image { --tone: var(--violet); }

.ish-doc-icon--file { --tone: var(--muted); }

.ish-doc-text { display: flex; min-width: 0; flex-direction: column; gap: 2px; }

.ish-doc-text a { color: var(--ink); font-size: .86rem; font-weight: 800; overflow-wrap: anywhere; }

.ish-doc-text a:hover { color: var(--brand); text-decoration: none; }

.ish-doc-text small { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: .74rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }

.ish-doc-grid .fl-table tbody tr:hover { background: var(--brand-tint-2); }

.ish-doc-grid .fl-table td .fl-rowactions { justify-content: flex-start; }

.ish-doc-kind { display: inline-block; max-width: 100%; overflow: hidden; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .72rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 620px) {
  /* Document rows become cards: the document, then its type and date, with actions at the end. */
  .ish-doc-grid .fl-table tbody tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "doc doc doc" "kind date actions"; gap: 8px 10px; }

  .ish-doc-grid .fl-table tbody tr:hover { background: transparent; }

  .ish-doc-grid .fl-table tbody td:nth-child(1) { grid-area: doc; }

  .ish-doc-grid .fl-table tbody td:nth-child(2) { grid-area: kind; }

  .ish-doc-grid .fl-table tbody td:nth-child(3) { grid-area: date; font-size: .74rem; }

  .ish-doc-grid .fl-table tbody td:nth-child(4) { grid-area: actions; }
}