/* Shared bill-grid look: sortable headers, the toggleable per-column filter
   row, the multi-select filter popover, the horizontal scroll container, the
   Source toggle chips, and the resizable / show-hide column chrome. Used by the
   Bills list and the project landing page so the two grids stay in lockstep.
   Loaded in base.html's always-on cascade next to table.css — NOT per-page, so
   the duplication this file replaces can't creep back. */

/* Sortable headers. */
th.sortable-col a { color: inherit; text-decoration: none; display: inline-block; }
th.sortable-col a:hover { text-decoration: underline; }
th.sortable-col .arrow { color: var(--accent-text); }

/* Toggleable per-column filter row (input/select/dual/stack). */
tr.filter-row th { padding: 6px 8px; background: var(--bg); border-bottom: 1px solid var(--border); }
tr.filter-row input, tr.filter-row select {
  width: 100%; box-sizing: border-box; padding: 5px 7px; font-size: 12px;
  border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--surface); color: var(--text); font-family: inherit;
}
tr.filter-row input:focus, tr.filter-row select:focus { outline: none; border-color: var(--border-strong); }
tr.filter-row .dual { display: flex; gap: 3px; }
tr.filter-row .dual input { min-width: 0; }
/* Date ranges stack vertically — side-by-side they're too narrow to read,
   especially once a column is resized down. */
tr.filter-row .dual.stack { flex-direction: column; gap: 4px; }

/* Multi-select filter dropdown (Category / Account): a compact trigger button
   that opens a checkbox popover, so several values can be combined without the
   ctrl-click awkwardness of a native <select multiple>. Mirrors the Columns
   menu popover pattern used elsewhere on this page. */
.ms-wrap { position: relative; }
.ms-btn {
  width: 100%; box-sizing: border-box; padding: 5px 22px 5px 7px; font-size: 12px;
  text-align: left; border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--surface); color: var(--text); font-family: inherit; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative;
}
.ms-btn::after { content: '▾'; position: absolute; right: 7px; top: 50%;
  transform: translateY(-50%); color: var(--muted); font-size: 10px; }
.ms-btn:focus, .ms-btn.open { outline: none; border-color: var(--border-strong); }
.ms-btn.has-sel { border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.ms-menu {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 35; min-width: 100%;
  max-height: 260px; overflow: auto; padding: 5px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r);
  box-shadow: 0 8px 30px rgba(0,0,0,.16); white-space: nowrap;
}
.ms-menu[hidden] { display: none; }
.ms-item {
  display: flex; align-items: center; gap: 7px; padding: 5px 7px; font-size: 12.5px;
  color: var(--text); border-radius: var(--r-xs); cursor: pointer; width: auto;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.ms-item:hover { background: var(--surface-2); }
.ms-item input { width: auto; margin: 0; }

/* Let the results table exceed the card and scroll sideways, so every column
   is reachable on a narrow window instead of being crushed to fit. */
.table-scroll { overflow-x: auto; }
.table-scroll #bills-table { width: max-content; min-width: 100%; }

/* Source multi-select: toggle chips (checkboxes styled as pills). */
.src-label { margin-right: -2px; font-size: 12px; }
.src-toggles { display: flex; flex-wrap: wrap; gap: 4px; }
.src-chip {
  display: inline-flex; align-items: center; padding: 3px 9px; font-size: 11px;
  line-height: 1; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--muted); cursor: pointer;
  user-select: none; white-space: nowrap; transition: background .12s, border-color .12s;
}
.src-chip:hover { border-color: var(--border-strong); }
.src-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.src-chip.on {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent-text); font-weight: 600;
}

/* Grid headers are static (the resize handles need normal flow), scoped to
   the grid table so other pages keep table.css's sticky th. */
#bills-table thead th { position: static; }
thead th.sortable-col { text-transform: none; letter-spacing: 0; font-size: 11.5px; }

/* Resizable + show/hide columns. Fixed layout so an explicit width on the
   header cell governs the whole column. */
#bills-table { table-layout: fixed; }
#bills-table th, #bills-table td { word-break: break-word; overflow-wrap: anywhere; }
#bills-table thead tr:first-child th { position: relative; }
.col-resize {
  position: absolute; top: 0; right: 0; width: 7px; height: 100%;
  cursor: col-resize; user-select: none; touch-action: none;
}
.col-resize:hover, .col-resize.dragging { background: var(--accent-soft); }
body.col-resizing { cursor: col-resize; user-select: none; }

/* Columns dropdown (toggle which columns show). */
.cols-wrap { position: relative; display: inline-block; }
.cols-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px;
  padding: 6px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r); box-shadow: 0 8px 30px rgba(0,0,0,.16);
}
.cols-menu[hidden] { display: none; }
.cols-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px;
  color: var(--text); border-radius: var(--r-xs); cursor: pointer; white-space: nowrap;
}
.cols-item:hover { background: var(--surface-2); }
.cols-foot { display: flex; justify-content: flex-end; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); }
.cols-foot a { font-size: 12px; color: var(--muted); cursor: pointer; }
.cols-foot a:hover { color: var(--text); }