@use "../base/color" as cl;
@use "../base/border" as bo;
@use "../base/font" as ft;
@use "../base/space" as sp;
@use "../base/size" as sz;

// Data grid
//
//   <div class="qo-grid-shell">
//     <div class="qo-grid-scroll">
//       <table class="qo-table">
//         <thead><tr class="qo-table-header">…</tr>
//                <tr class="qo-table-filter">…</tr></thead>
//         <tbody>…</tbody>
//       </table>
//     </div>
//     <div class="qo-grid-footer">…</div>
//   </div>
//
// Row heights come from the component-height tokens, so a grid lines up with
// the toolbar above it without either side re-deciding.

.qo-grid-shell {
  overflow: hidden;
  background-color: cl.$background-default;
  border: bo.$border-width-sm solid cl.$border-light;
  border-radius: bo.$border-radius-md;
  box-shadow: cl.$shadow-sm;
}

// Horizontal scroll rather than squeezing columns until text is unreadable.
.qo-grid-scroll {
  width: 100%;
  overflow-x: auto;
}

.qo-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: cl.$text-dark;
  font-family: ft.$font-family-primary;
  font-size: ft.$font-size-md;

  th,
  td {
    border-right: bo.$border-width-sm solid cl.$border-light;
    border-bottom: bo.$border-width-sm solid cl.$border-light;
  }

  tr > *:last-child { border-right: 0; }
  tbody tr:last-child td { border-bottom: 0; }

  tbody tr {
    height: sz.$grid-row-height;
    transition: background-color 0.15s ease;
  }

  tbody tr:hover { background-color: cl.$background-hover; }

  tbody td {
    padding: sp.$space-3;
    background: inherit;
    vertical-align: middle;
    font-size: ft.$font-size-md;
    font-weight: ft.$font-weight-regular;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  // Variants
  &.qo-table-auto { table-layout: auto; }
  &.qo-table-borderless th,
  &.qo-table-borderless td { border: 0; }
  &.qo-table-striped tbody tr:nth-child(even) { background-color: cl.$background-light; }
  &.qo-table-compact tbody tr { height: sz.$grid-filter-height; }
  &.qo-table-compact tbody td { padding: sp.$space-2; }
  &.qo-table-static tbody tr:hover { background-color: transparent; }
}

.qo-table-header th {
  height: sz.$grid-header-height;
  padding: 0 sp.$space-3;
  background-color: cl.$background-header;
  color: cl.$text-dark;
  text-align: left;
  vertical-align: middle;
  font-size: ft.$font-size-sm;
  font-weight: ft.$font-weight-semibold;
  line-height: 1.2;
  white-space: nowrap;
}

// A sortable header is a button in spirit — it needs hover and focus.
.qo-table-sort {
  display: inline-flex;
  align-items: center;
  gap: sp.$space-1;
  cursor: pointer;
  user-select: none;

  &:hover { color: cl.$text-primary; }
  &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; }
  &.qo-table-sort-active { color: cl.$text-primary; }
}

.qo-table-filter th {
  height: sz.$grid-filter-height;
  padding: sp.$space-2;
  background-color: cl.$background-default;
  vertical-align: middle;
}

// Cell content helpers
.qo-table-link {
  color: cl.$text-primary;
  font-size: ft.$font-size-md;
  font-weight: ft.$font-weight-medium;
  text-decoration: none;

  &:hover { text-decoration: underline; }
  &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; border-radius: bo.$border-radius-sm; }
}

.qo-table-meta {
  display: block;
  margin-top: 2px;
  color: cl.$text-secondary;
  font-size: ft.$font-size-xs;
  font-weight: ft.$font-weight-regular;
}

.qo-table-cell-group {
  display: inline-flex;
  align-items: center;
  gap: sp.$space-2;
}

// A row the user must not act on — protected/system records.
.qo-table-row-locked {
  background-color: cl.$background-light;
  &:hover { background-color: cl.$background-secondary; }
}

.qo-lock-icon {
  color: cl.$text-default;
  font-size: ft.$font-size-sm;
}

// Footer / results summary
.qo-grid-footer {
  min-height: sz.$grid-filter-height;
  padding: sp.$space-2 sp.$space-3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: sp.$space-3;
  background-color: cl.$background-default;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
  }
}

.qo-grid-summary {
  color: cl.$text-dark;
  font-size: ft.$font-size-sm;
  font-weight: ft.$font-weight-regular;
}