/* @grupohaganah/dash-canvas-v2 — CSS base */

.dcv2-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 16px;
  padding: 0;
}

.dcv2-grid.dcv2-dragging .dcv2-widget:not(.dcv2-dragging-self) {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.2s ease,
              box-shadow 0.2s ease;
}

/* Widget wrapper */
.dcv2-widget {
  background: var(--dcv2-bg-card, #151d30);
  border: 1px solid var(--dcv2-border, #1c2540);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: grid-column 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              grid-row 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.2s ease,
              box-shadow 0.2s ease,
              transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease;
}

.dcv2-widget:hover {
  border-color: var(--dcv2-border-light, #253050);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.dcv2-widget.dcv2-dragging-self {
  opacity: 0.4;
  transform: scale(0.95);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Drop zones */
.dcv2-widget.dcv2-drop-center {
  border-color: var(--dcv2-accent, #f45419);
  box-shadow: 0 0 0 2px var(--dcv2-accent-glow, rgba(244, 84, 25, 0.15));
  transform: scale(1.02);
}

.dcv2-widget.dcv2-drop-left {
  border-left: 3px solid var(--dcv2-accent, #f45419);
  box-shadow: -4px 0 12px var(--dcv2-accent-glow, rgba(244, 84, 25, 0.15));
  transform: translateX(4px);
}

.dcv2-widget.dcv2-drop-right {
  border-right: 3px solid var(--dcv2-accent, #f45419);
  box-shadow: 4px 0 12px var(--dcv2-accent-glow, rgba(244, 84, 25, 0.15));
  transform: translateX(-4px);
}

/* Widget header */
.dcv2-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--dcv2-border, #1c2540);
  background: var(--dcv2-bg-base, #0f1729);
  cursor: grab;
  user-select: none;
  transition: background 0.2s ease;
}

.dcv2-header:hover { background: var(--dcv2-bg-elevated, #1e2a45); }
.dcv2-header:active { cursor: grabbing; }

.dcv2-drag-handle { color: var(--dcv2-text-dim, #505a6e); font-size: 16px; line-height: 1; }

.dcv2-title {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--dcv2-text-secondary, #8892a6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dcv2-size-badge {
  font-size: 10px;
  color: var(--dcv2-text-dim, #505a6e);
  background: var(--dcv2-bg-elevated, #1e2a45);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.dcv2-fullscreen-btn {
  background: none;
  border: none;
  color: var(--dcv2-text-dim, #505a6e);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 0.15s;
}

.dcv2-fullscreen-btn:hover {
  color: var(--dcv2-accent, #f45419);
  background: var(--dcv2-accent-glow, rgba(244, 84, 25, 0.15));
}

/* Widget body */
.dcv2-body { padding: 16px; }

/* Empty slot */
.dcv2-empty-slot {
  border: 2px dashed var(--dcv2-border-light, #253050);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--dcv2-text-dim, #505a6e);
  cursor: default;
  transition: border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease,
              color 0.2s ease,
              transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.dcv2-empty-slot.dcv2-active {
  border-color: var(--dcv2-accent, #f45419);
  background: var(--dcv2-accent-glow, rgba(244, 84, 25, 0.15));
  color: var(--dcv2-accent, #f45419);
  transform: scale(1.02);
}

/* Resize handles */
.dcv2-resize-right {
  position: absolute; top: 0; right: 0; width: 6px; height: 100%;
  cursor: ew-resize; z-index: 2; transition: background 0.2s ease;
}

.dcv2-resize-bottom {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 6px;
  cursor: ns-resize; z-index: 2; transition: background 0.2s ease;
}

.dcv2-resize-corner {
  position: absolute; bottom: 0; right: 0; width: 12px; height: 12px;
  cursor: nwse-resize; z-index: 3; transition: background 0.2s ease;
}

.dcv2-resize-right:hover,
.dcv2-resize-bottom:hover,
.dcv2-resize-corner:hover {
  background: var(--dcv2-accent-glow, rgba(244, 84, 25, 0.15));
}

.dcv2-resize-corner::after {
  content: '';
  position: absolute; bottom: 3px; right: 3px;
  width: 6px; height: 6px;
  border-right: 2px solid var(--dcv2-text-dim, #505a6e);
  border-bottom: 2px solid var(--dcv2-text-dim, #505a6e);
  opacity: 0; transition: opacity 0.2s ease;
}

.dcv2-widget:hover .dcv2-resize-corner::after { opacity: 1; }

/* Common widget internals */
.dcv2-metric { margin-bottom: 12px; }
.dcv2-metric-label { font-size: 12px; color: var(--dcv2-text-secondary, #8892a6); margin-bottom: 2px; }
.dcv2-metric-value { font-size: 14px; font-weight: 600; color: var(--dcv2-text-primary, #f0f1f3); }

.dcv2-progress {
  background: var(--dcv2-bg-elevated, #1e2a45); border-radius: 4px;
  height: 6px; width: 100%; margin: 4px 0 8px; overflow: hidden;
}

.dcv2-progress-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }

.dcv2-status-online { background: var(--dcv2-success-bg); color: var(--dcv2-success); }
.dcv2-status-offline { background: var(--dcv2-error-bg); color: var(--dcv2-error); }

.dcv2-status-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 12px; text-transform: uppercase; letter-spacing: 0.5px;
}

.dcv2-btn { flex: 1; padding: 6px 0; border-radius: 6px; border: none; cursor: pointer; font-size: 12px; font-weight: 500; transition: opacity 0.15s; }
.dcv2-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dcv2-btn-action { background: var(--dcv2-info-bg); color: var(--dcv2-info); }
.dcv2-btn-danger { background: var(--dcv2-error-bg); color: var(--dcv2-error); }

.dcv2-input {
  padding: 8px 12px;
  background: var(--dcv2-bg-elevated, #1e2a45);
  border: 1px solid var(--dcv2-border-light, #253050);
  border-radius: 8px;
  color: var(--dcv2-text-primary, #f0f1f3);
  font-size: 13px; outline: none; width: 100%; box-sizing: border-box;
}

.dcv2-input:focus { border-color: var(--dcv2-accent, #f45419); }

.dcv2-terminal {
  background: #0d1117; color: #c9d1d9; font-family: monospace;
  font-size: 12px; line-height: 1.6; padding: 12px; border-radius: 8px;
  overflow-y: auto; max-height: 350px; white-space: pre-wrap; word-break: break-all;
}

/* Toast */
.dcv2-toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none;
}

.dcv2-toast {
  pointer-events: all; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--dcv2-bg-card, #151d30);
  border: 1px solid var(--dcv2-border, #1c2540);
  border-left: 3px solid var(--dcv2-toast-color);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  font-size: 13px; color: var(--dcv2-text-primary, #f0f1f3);
  min-width: 280px; max-width: 400px;
  animation: dcv2-toast-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dcv2-toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Fullscreen modal */
.dcv2-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7);
  z-index: 9998; display: flex; align-items: center; justify-content: center;
  animation: dcv2-overlay-in 0.2s ease; backdrop-filter: blur(4px);
}

@keyframes dcv2-overlay-in { from { opacity: 0; } to { opacity: 1; } }

.dcv2-modal {
  width: 90vw; max-width: 1200px; max-height: 85vh;
  background: var(--dcv2-bg-base, #0f1729); border: 1px solid var(--dcv2-border, #1c2540);
  border-radius: 16px; display: flex; flex-direction: column; overflow: hidden;
  animation: dcv2-modal-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

@keyframes dcv2-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Widget catalog */
.dcv2-catalog-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5);
  z-index: 9997; display: flex; justify-content: flex-end;
  animation: dcv2-overlay-in 0.2s ease;
}

.dcv2-catalog {
  width: 320px; background: var(--dcv2-bg-base, #0f1729);
  border-left: 1px solid var(--dcv2-border, #1c2540);
  height: 100%; display: flex; flex-direction: column;
  animation: dcv2-catalog-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
}

@keyframes dcv2-catalog-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

.dcv2-catalog-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 8px; cursor: pointer; transition: all 0.15s;
}

.dcv2-catalog-item:hover { background: var(--dcv2-bg-card, #151d30); transform: translateX(-2px); }

/* Responsive */
@media (max-width: 768px) {
  .dcv2-grid { grid-template-columns: 1fr; }
  .dcv2-widget, .dcv2-empty-slot { grid-column: span 1 !important; grid-row: span 1 !important; }
}