*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #0f0f1e;
  --panel: #111128;
  --border: #1e1e3a;
  --text: #e0e0f0;
  --text-dim: #6a6a8a;
  --green: #4ade80;
  --green-bg: rgba(74, 222, 128, 0.08);
  --red: #f87171;
  --red-bg: rgba(248, 113, 113, 0.08);
  --yellow: #facc15;
  --yellow-bg: rgba(250, 204, 21, 0.08);
  --purple: #a78bfa;
  --purple-bg: rgba(167, 139, 250, 0.08);
  --orange: #ff9f43;
  --orange-bg: rgba(255, 159, 67, 0.08);
  --cyan: #22d3ee;
  --cyan-bg: rgba(34, 211, 238, 0.08);
  --highlight-row: rgba(250, 204, 21, 0.06);
  --row-hover: rgba(255, 255, 255, 0.03);
  --row-alt: rgba(255, 255, 255, 0.015);
  --selected-row: rgba(167, 139, 250, 0.1);
}

html,
body {
  background: var(--bg);
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.5;
  height: 100%;
  overflow: hidden;
}

#root {
  height: 100%;
}

::selection {
  background: rgba(167, 139, 250, 0.3);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

/* GridStack overrides for dark theme */
.grid-stack {
  min-height: 100%;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.grid-stack > .grid-stack-item.widget-focused > .grid-stack-item-content {
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.15);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.grid-stack-placeholder > .placeholder-content {
  background: rgba(167, 139, 250, 0.08) !important;
  border: 1px dashed var(--purple) !important;
  border-radius: 6px;
}

/* Widget portal fills its container */
.widget-portal-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Widget content wrapper fills item */
.widget-content-wrapper {
  display: flex;
  flex-direction: column;
}

/* Drag handle cursor */
.widget-drag-handle {
  cursor: grab;
}

.widget-drag-handle:active {
  cursor: grabbing;
}

/* Resize handle styling */
.grid-stack-item > .ui-resizable-se,
.grid-stack-item > .ui-resizable-sw,
.grid-stack-item > .ui-resizable-ne,
.grid-stack-item > .ui-resizable-nw {
  filter: invert(0.7);
}

.grid-stack-item > .ui-resizable-e,
.grid-stack-item > .ui-resizable-w,
.grid-stack-item > .ui-resizable-s,
.grid-stack-item > .ui-resizable-n {
  background: transparent;
}

.grid-stack-item > .ui-resizable-e:hover,
.grid-stack-item > .ui-resizable-w:hover {
  background: rgba(167, 139, 250, 0.2);
}

.grid-stack-item > .ui-resizable-s:hover,
.grid-stack-item > .ui-resizable-n:hover {
  background: rgba(167, 139, 250, 0.2);
}

/* During drag/resize, override default opacity */
.ui-draggable-dragging > .grid-stack-item-content,
.ui-resizable-resizing > .grid-stack-item-content {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  opacity: 0.95 !important;
}

/* Frozen grid: hide resize handles and disable drag cursor */
.grid-stack-static > .grid-stack-item > .ui-resizable-e,
.grid-stack-static > .grid-stack-item > .ui-resizable-w,
.grid-stack-static > .grid-stack-item > .ui-resizable-s,
.grid-stack-static > .grid-stack-item > .ui-resizable-n,
.grid-stack-static > .grid-stack-item > .ui-resizable-se,
.grid-stack-static > .grid-stack-item > .ui-resizable-sw,
.grid-stack-static > .grid-stack-item > .ui-resizable-ne,
.grid-stack-static > .grid-stack-item > .ui-resizable-nw {
  display: none !important;
}

.grid-stack-static .widget-drag-handle {
  cursor: default !important;
}

.grid-stack-static .widget-drag-handle:active {
  cursor: default !important;
}

/* Auto-refresh spinning icon */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
