/**
 * SAF Dashboard CRUD Kit (CSS).
 *
 * Styles the standard list scaffold + drawer + filter bar emitted by
 * SAF_Dashboard_Crud_Kit::render_list_scaffold(). Scoped under
 * .saf-dash-crud so it never leaks into other dashboard layouts.
 *
 * Token-driven; consumes the design system variables already loaded by
 * saf-dashboard-base.css. No hardcoded colors.
 */

.saf-dash-crud {
  display: grid;
  gap: 1.25rem;
}

.saf-dash-crud__filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--saf-dash-surface, #fff);
  border: 1px solid var(--saf-dash-border, #d8d2c4);
  border-radius: 0.5rem;
}

.saf-dash-crud__filter {
  display: grid;
  gap: 0.25rem;
}

.saf-dash-crud__filter-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--saf-dash-ink-muted, #5c5644);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.saf-dash-crud__filter input,
.saf-dash-crud__filter select {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--saf-dash-border, #d8d2c4);
  border-radius: 0.35rem;
  background: #fff;
  font: inherit;
}

.saf-dash-crud__table-wrap {
  overflow-x: auto;
}

.saf-dash-crud__table {
  width: 100%;
  border-collapse: collapse;
}

.saf-dash-crud__table th,
.saf-dash-crud__table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--saf-dash-border, #d8d2c4);
  vertical-align: top;
}

.saf-dash-crud__table th {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--saf-dash-ink-muted, #5c5644);
}

.saf-dash-crud__table th[data-saf-crud-sortable="1"] {
  cursor: pointer;
}

.saf-dash-crud__loading,
.saf-dash-crud__empty {
  color: var(--saf-dash-ink-muted, #5c5644);
  font-style: italic;
}

.saf-dash-crud__row-actions {
  white-space: nowrap;
  text-align: right;
}

.saf-dash-crud__row-actions .saf-dash-link {
  margin-left: 0.5rem;
}

.saf-dash-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--saf-brand, #962432);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.saf-dash-link:focus {
  outline: 2px solid var(--saf-brand, #962432);
  outline-offset: 2px;
}

.saf-dash-link--danger {
  color: var(--saf-danger, #9a3c2c);
}

.saf-dash-crud__pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-end;
  padding-top: 0.5rem;
}

.saf-dash-crud__page-info {
  color: var(--saf-dash-ink-muted, #5c5644);
  font-size: 0.875rem;
}

.saf-dash-crud__drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(560px, 100vw);
  height: 100vh;
  background: #fff;
  border-left: 1px solid var(--saf-dash-border, #d8d2c4);
  box-shadow: -16px 0 32px rgba(20, 18, 14, 0.12);
  padding: 1.5rem;
  overflow-y: auto;
  z-index: 9999;
}

.saf-dash-crud__drawer[hidden] {
  display: none;
}

.saf-dash-button {
  appearance: none;
  border: 1px solid transparent;
  background: var(--saf-brand, #962432);
  color: #fff;
  padding: 0.55rem 1rem;
  border-radius: 0.35rem;
  font-weight: 600;
  cursor: pointer;
}

.saf-dash-button:hover {
  filter: brightness(0.92);
}

.saf-dash-button--ghost {
  background: #fff;
  color: var(--saf-brand, #962432);
  border-color: var(--saf-brand, #962432);
}

.saf-dash-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .saf-dash-crud__filters {
    grid-template-columns: 1fr;
  }
  .saf-dash-crud__drawer {
    width: 100vw;
    padding: 1rem;
  }
}

/* Phase 9.1b: drag-drop reorder + CSV import mixins */

.saf-dash-reorder-row {
  cursor: grab;
}

.saf-dash-reorder-row.is-dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.saf-dash-reorder-row td:first-child::before {
  content: "\2630"; /* trigram for heaven, used as drag handle */
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--saf-dash-ink-muted, #5c5644);
  font-size: 0.875rem;
  vertical-align: middle;
  cursor: grab;
}

.saf-dash-csv-import {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--saf-dash-surface, #fff);
  border: 1px dashed var(--saf-dash-border, #d8d2c4);
  border-radius: 0.5rem;
}

.saf-dash-csv-import__label {
  font-weight: 600;
  font-size: 0.875rem;
}

.saf-dash-csv-import__preview {
  display: grid;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--saf-dash-ink-muted, #5c5644);
}

.saf-dash-csv-import__header-line {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.4rem 0.5rem;
  border-radius: 0.25rem;
  word-break: break-all;
}

.saf-dash-csv-import__count {
  font-weight: 600;
  color: var(--saf-dash-ink, #2a2620);
}

.saf-dash-csv-import__warn {
  color: var(--saf-danger, #9a3c2c);
  font-weight: 600;
}

.saf-dash-csv-import__status {
  font-size: 0.875rem;
  color: var(--saf-dash-ink-muted, #5c5644);
}

/*
 * Phase 44-K: mobile card layout for every CRUD-kit list table. Each
 * row collapses into a stack of label/value pairs sourced from the
 * `data-label` attr the JS renderer attaches to every td (Phase 44-K
 * patch to renderRows). Scoped to .saf-dash-crud so it applies to
 * audit + board + awards + sponsors + expenses + future CRUD tabs.
 *
 * Override base saf-dash-table min-width per memory
 * `saf-dash-table-mobile-min-width-override` -- otherwise the table
 * stays 480px wide and horizontal-scrolls inside the card mode.
 */
@media (max-width: 480px) {
  .saf-dash-crud .saf-dash-crud__table {
    min-width: 0;
    display: block;
  }
  .saf-dash-crud .saf-dash-crud__table thead {
    display: none;
  }
  .saf-dash-crud .saf-dash-crud__table tbody,
  .saf-dash-crud .saf-dash-crud__table tr {
    display: block;
  }
  .saf-dash-crud .saf-dash-crud__table tr {
    border: 1px solid var(--saf-dash-border, #d8d2c4);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--saf-dash-surface, #fff);
  }
  .saf-dash-crud .saf-dash-crud__table td {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border: none;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
    text-align: right;
  }
  .saf-dash-crud .saf-dash-crud__table tr td:last-child {
    border-bottom: none;
  }
  .saf-dash-crud .saf-dash-crud__table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--saf-dash-ink-muted, #5c5644);
    text-align: left;
    flex: 0 0 40%;
  }
  .saf-dash-crud .saf-dash-crud__row-actions {
    justify-content: flex-end;
  }
}