/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #64748b; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Table row transitions */
tbody tr { transition: background-color 0.15s ease; }

/* HTMX swap fade */
.htmx-swapping { opacity: 0; transition: opacity 0.2s ease-out; }
.htmx-settling { opacity: 1; transition: opacity 0.1s ease-in; }

/* Layout grid classes */
.layout-four-column {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
}

.layout-two-by-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
}

.layout-wide-left {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
}
.layout-wide-left .panel-gainers {
  grid-column: 1;
  grid-row: 1 / 3;
}
.layout-wide-left .panel-hod {
  grid-column: 2 / 4;
  grid-row: 2;
}

.layout-stacked {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.layout-logs-focus {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
}
.layout-logs-focus .panel-gainers {
  grid-column: 1;
  grid-row: 1 / 3;
}
.layout-logs-focus .panel-running-up {
  grid-column: 2;
  grid-row: 1 / 3;
}

/* Drag and drop */
.sortable-ghost {
  opacity: 0.4;
  background: rgba(59, 130, 246, 0.2);
}
.drag-handle {
  cursor: grab;
  opacity: 0;
  transition: opacity 0.15s;
}
.panel-header:hover .drag-handle {
  opacity: 1;
}
.drag-handle:active {
  cursor: grabbing;
}

/* Layout picker active state */
.layout-picker-btn.active {
  color: #3b82f6;
  background-color: rgba(59, 130, 246, 0.1);
}

/* Collapsed panel — header-only view */
.panel-collapsed {
  border-style: dashed !important;
  border-color: #94a3b8 !important;
}
html.dark .panel-collapsed {
  border-color: #475569 !important;
}
.panel-collapsed .panel-body {
  display: none;
}