/* CardGrid (cardgrid.js) on Gridstack: cards, tools, placeholder, handles. */

.cg-grid { margin: 0 -8px 16px; }          /* the grid's 8px item margin lines the cards up with the page edge */
.cg-grid.cg-fallback { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 0 0 16px; }
.cg-grid.cg-fallback > .cg-item { position: static; }
.cg-grid.cg-fallback .grid-stack-item-content { position: static; }

.cg-grid > .grid-stack-item > .grid-stack-item-content { overflow: visible auto; border-radius: 8px; }
.cg-grid .grid-stack-item-content > .card {
  margin: 0 !important;
  position: relative;
  box-sizing: border-box;
}
/* A card with a hand-set height fills its slot; its content scrolls inside. */
.cg-grid .cg-item:not(.cg-auto) .grid-stack-item-content > .card { min-height: 100%; }
.cg-grid .cg-item.cg-auto > .grid-stack-item-content { overflow-y: hidden; }

/* Room for the tools on the title line. */
.cg-card.cg-has-tools > :first-child { padding-right: 86px; }
.cg-handle { cursor: grab; user-select: none; }
.cg-handle:active { cursor: grabbing; }

.cg-tools {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 3;
}
.cg-card:hover > .cg-tools, .cg-card:focus-within > .cg-tools, .cg-card.cg-min > .cg-tools { opacity: 1; }
@media (hover: none) { .cg-tools { opacity: 1; } }
.cg-tool {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
}
.cg-tool:hover { color: var(--accent); background: var(--surface-hover); border-color: var(--border); }
.cg-grip { cursor: grab; touch-action: none; }

/* Collapsed: the title line only. */
.cg-card.cg-min > *:not(:first-child):not(.cg-tools) { display: none !important; }
.cg-card.cg-min { padding-bottom: 12px; }
.cg-card.cg-min > :first-child { margin-bottom: 0; }

/* While dragging or resizing */
.cg-grid .grid-stack-placeholder > .placeholder-content {
  background: rgba(232, 199, 122, .06);
  border: 1px dashed var(--accent-dim);
  border-radius: 8px;
}
.cg-grid .ui-draggable-dragging > .grid-stack-item-content > .card,
.cg-grid .ui-resizable-resizing > .grid-stack-item-content > .card {
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  border-color: var(--accent-dim);
}
.cg-grid .ui-draggable-dragging { opacity: .96; }
body.cg-busy { user-select: none; }

/* Resize handles: quiet until the card is hovered. */
.cg-grid > .grid-stack-item > .ui-resizable-se,
.cg-grid > .grid-stack-item > .ui-resizable-sw { opacity: .45; filter: invert(1); }
.cg-grid > .grid-stack-item:hover > .ui-resizable-se,
.cg-grid > .grid-stack-item:hover > .ui-resizable-sw { opacity: .9; }
.cg-grid > .grid-stack-item > .ui-resizable-e,
.cg-grid > .grid-stack-item > .ui-resizable-w { width: 10px; }
.cg-grid > .grid-stack-item > .ui-resizable-s { height: 10px; }
.cg-grid > .grid-stack-item > .ui-resizable-e:hover,
.cg-grid > .grid-stack-item > .ui-resizable-w:hover { box-shadow: inset -2px 0 0 var(--accent-dim); }
.cg-grid > .grid-stack-item > .ui-resizable-s:hover { box-shadow: inset 0 -2px 0 var(--accent-dim); }

/* Toolbar and the Cards list */
.cg-toolbar { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cg-toolbar .filter-btn.is-on { color: var(--accent); border-color: var(--accent-dim); }
.cg-panel {
  margin: 10px 0 14px;
  padding: 12px 14px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 16px;
  width: 100%;
}
.cg-panel-title { grid-column: 1 / -1; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 4px; }
.cg-panel-row { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; cursor: pointer; }
.cg-toolbar-host { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }

@media (max-width: 760px) {
  .cg-card.cg-has-tools > :first-child { padding-right: 70px; }
}
.cg-panel[hidden] { display: none; }