/* ──────────────────────────────────────────────────────────────────────────
   Shared Table ⇄ List view switcher (pilot: cases list).
   The page marks a wrapper `.data-list-body` that is Alpine-bound to the
   `listView('<module>')` component (see base.html) and swaps class between
   `.view-table` and `.view-list`.

   Markup contract:
     <div class="data-list-body" :class="view === 'list' ? 'view-list' : 'view-table'">
       <div class="data-list-table-view"> … <table> … </table> </div>
       <div class="data-list-card-view">  … [class*="-card-grid"] …   </div>
     </div>

   The card wrapper defaults to block; per-page CSS owns the responsive
   table→cards fallback at ≤500px, and the `.view-list` rules below force the
   stacked card grid at all widths. `.view-table` leaves the per-page defaults
   untouched.
   ────────────────────────────────────────────────────────────────────────── */

.data-list-card-view { display: block; }

/* Record lists always stack in one column so rows never compete for width. */
.projects-card-grid,
.tickets-card-grid,
.clients-list-grid {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}

/* List view: hide the table block entirely, force the stacked card grid */
.data-list-body.view-list .data-list-table-view { display: none; }
.data-list-body.view-list .data-list-card-view [class*="-card-grid"] {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* View toggle buttons */
.data-list-view-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--theme-accent-800, #059669);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.data-list-view-toggle:hover {
  background: var(--theme-accent-100, rgba(16, 185, 129, 0.1));
  color: var(--theme-accent, #6ee7b7);
}
.data-list-view-toggle.active {
  background: var(--erp-btn-primary-bg, #064e3b);
  color: var(--erp-btn-primary-fg, #a7f3d0);
}
html.dark .data-list-view-toggle { color: var(--theme-accent, #6ee7b7); }
html.dark .data-list-view-toggle:hover { background: var(--theme-accent-200, rgba(16, 185, 129, 0.15)); }
html.dark .data-list-view-toggle.active {
  background: var(--theme-accent-200, rgba(16, 185, 129, 0.2));
  color: var(--theme-accent, #34d399);
}