/* Profile folder management — clean list + dialogs */

.folders-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-md);
}

.folders-toolbar > button {
  margin-bottom: 0;
}

/* ---------- Folder list rows ---------- */

.folder-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.folder-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--pico-card-border-color);
}

.folder-row:last-child {
  border-bottom: 0;
}

.folder-row-info {
  flex: 1 1 18rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.folder-row-name {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  word-break: break-word;
}

.folder-row-meta {
  color: var(--pico-muted-color);
}

.folder-row-description {
  color: var(--pico-muted-color);
  font-style: italic;
  margin-top: 0.15rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.folder-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.folder-row-actions > a,
.folder-row-actions > button {
  margin-bottom: 0;
}

.folder-row-danger {
  color: var(--pico-del-color, #c1272d);
  border-color: currentColor;
}

@media (max-width: 768px) {
  .folder-row {
    flex-direction: column;
    align-items: stretch;
  }

  /* In a column the horizontal flex-basis becomes a vertical one — reset so
     the info block hugs its content instead of stretching to ~18rem tall. */
  .folder-row-info {
    flex: 0 0 auto;
  }

  .folder-row-actions {
    justify-content: flex-start;
  }

  .folder-row-actions > a,
  .folder-row-actions > button {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* ---------- Dialogs ---------- */

.folder-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.folder-dialog > article {
  width: min(36rem, 92vw);
  max-height: 90dvh;
  overflow-y: auto;
}

.folder-dialog > article > header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--pico-card-background-color);
}

.folder-dialog > article > header h3 {
  margin: 0;
  word-break: break-word;
}

.folder-dialog footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--space-md);
}

.folder-dialog footer > button {
  margin-bottom: 0;
}

/* ---------- Edit dialog meta list ---------- */

.folder-edit-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--pico-card-sectioning-background-color);
  border-radius: var(--radius-md);
}

.folder-edit-meta > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.folder-edit-meta dt {
  font-size: var(--text-xs);
  color: var(--pico-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.folder-edit-meta dd {
  margin: 0;
  font-weight: var(--weight-medium);
  word-break: break-word;
}

.folder-edit-extra {
  margin-top: var(--space-sm);
}

.folder-edit-extra > form {
  margin: 0;
}

.folder-edit-extra > form > button {
  margin-bottom: 0;
}

/* ---------- Share dialog ---------- */

/* padding (not margin) so the gap survives Pico's collapsing header
   margin — otherwise the autofocused input's focus ring sits under the
   opaque sticky header and looks clipped. */
.folder-share-form {
  padding-top: var(--space-sm);
}

.folder-share-form-grid {
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--space-sm);
  margin-bottom: 0;
}

.folder-share-form-grid > input,
.folder-share-form-grid > select,
.folder-share-form-grid > button {
  margin-bottom: 0;
}

/* Username and the submit button span the full width; the role and
   permission selects sit side by side on the row between them. */
.folder-share-form-grid > input[name="username"],
.folder-share-form-grid > button[type="submit"] {
  grid-column: 1 / -1;
}

.folder-share-form-hint {
  display: block;
  margin-top: var(--space-xs);
  color: var(--muted-color, #6c757d);
}

.folder-share-role-tag {
  font-weight: normal;
  font-size: 0.85em;
  color: var(--muted-color, #6c757d);
}

.folder-share-message {
  display: block;
  min-height: 1.2em;
  margin-top: var(--space-xs);
}

.folder-share-message--success {
  color: var(--pico-ins-color);
}

.folder-share-message--success::before {
  content: "✓ ";
  font-weight: 600;
}

.folder-share-message--error {
  color: var(--pico-del-color);
}

.folder-share-message--error::before {
  content: "⚠ ";
  font-weight: 600;
}

.folder-share-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.folder-share-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--pico-card-border-color);
}

.folder-share-list > li:last-child {
  border-bottom: 0;
}

.folder-share-list > li.folder-share-empty {
  color: var(--pico-muted-color);
  border-bottom: 0;
}

.folder-share-list .folder-share-revoke {
  margin-left: auto;
  margin-bottom: 0;
}

@media (max-width: 540px) {
  .folder-share-form-grid {
    grid-template-columns: 1fr;
  }
}