/* ============================================================
  BOOWS Card View - Grid-based card display for table data
============================================================ */

/* Card view container - hidden by default (table view is default) */
.boows-table .boows-card-view {
  display: none;
}

/* Show card view when in card mode */
.boows-table.boows-view-card .boows-card-view {
  display: block;
}

/* Hide table content when in card mode */
.boows-table.boows-view-card .scroll-container {
  display: none;
}

/* Hide table header when in card mode */
.boows-table.boows-view-card header.adm-table-head {
  display: none;
}

/* ---- Grid Layout ---- */
.boows-card-grid {
  display: grid;
  gap: var(--boows-whitespace-l2);
  width: 100%;
}

.boows-card-grid--cols-1 { grid-template-columns: 1fr; }
.boows-card-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.boows-card-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.boows-card-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.boows-card-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.boows-card-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }

/* ---- Card Item ---- */
.boows-card-item {
  background: var(--boows-col-text-5);
  border-radius: var(--boows-default-border-container);
  border: 1px solid var(--boows-col-text-20);
  transition: var(--boows-transition);
  overflow: hidden;
}

.boows-card-item:hover {
  border-color: var(--boows-col-primary-40);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.boows-card-item.is-link {
  cursor: pointer;
}

.boows-card-item.is-link:hover {
  border-color: var(--boows-col-primary);
}

/* Hidden card (filtered out) */
.boows-card-item.hide {
  display: none;
}

/* ---- View Toggle Button ---- */
.boows-view-toggle {
  position: relative;
}

.boows-view-toggle .boows-view-toggle-icon {
  transition: var(--boows-transition);
}

/* ---- Responsive ---- */
@media screen and (max-width: 768px) {
  .boows-card-grid--cols-3,
  .boows-card-grid--cols-4,
  .boows-card-grid--cols-5,
  .boows-card-grid--cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .boows-card-grid--cols-2,
  .boows-card-grid--cols-3,
  .boows-card-grid--cols-4,
  .boows-card-grid--cols-5,
  .boows-card-grid--cols-6 {
    grid-template-columns: 1fr;
  }
}

/* ---- Theme Variants ---- */
body.boows-rounded .boows-card-item {
  border-radius: var(--boows-border-radius-button);
}

body.boows-pill .boows-card-item {
  border-radius: var(--boows-default-border-pill);
}