@import "tailwindcss";

@variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: Inter, sans-serif;

  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a8a;

  /* Dynamic brand text color - uses RGB for opacity support */
  /* Format: rgb(R G B / alpha) where R G B come from --color-brand-text-rgb */
  --color-brand-text: rgb(var(--color-brand-text-rgb) / 1);
}

:root {
  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  /* Default brand text color (light blue-white for dark backgrounds) */
  /* This is dynamically updated by applyBrandColors() based on brand color luminance */
  --color-brand-text-rgb: 233 239 255;
}

/* Custom text-brand-text utility classes with opacity support */
.text-brand-text {
  color: rgb(var(--color-brand-text-rgb));
}
.text-brand-text\/5 {
  color: rgb(var(--color-brand-text-rgb) / 0.05);
}
.text-brand-text\/10 {
  color: rgb(var(--color-brand-text-rgb) / 0.1);
}
.text-brand-text\/20 {
  color: rgb(var(--color-brand-text-rgb) / 0.2);
}
.text-brand-text\/30 {
  color: rgb(var(--color-brand-text-rgb) / 0.3);
}
.text-brand-text\/40 {
  color: rgb(var(--color-brand-text-rgb) / 0.4);
}
.text-brand-text\/50 {
  color: rgb(var(--color-brand-text-rgb) / 0.5);
}
.text-brand-text\/60 {
  color: rgb(var(--color-brand-text-rgb) / 0.6);
}
.text-brand-text\/70 {
  color: rgb(var(--color-brand-text-rgb) / 0.7);
}
.text-brand-text\/80 {
  color: rgb(var(--color-brand-text-rgb) / 0.8);
}
.text-brand-text\/90 {
  color: rgb(var(--color-brand-text-rgb) / 0.9);
}

/* Hover variants */
.hover\:text-brand-text:hover {
  color: rgb(var(--color-brand-text-rgb));
}
.hover\:text-brand-text\/60:hover {
  color: rgb(var(--color-brand-text-rgb) / 0.6);
}
.hover\:text-brand-text\/80:hover {
  color: rgb(var(--color-brand-text-rgb) / 0.8);
}

/* Background variants using brand-text color */
.bg-brand-text\/5 {
  background-color: rgb(var(--color-brand-text-rgb) / 0.05);
}
.bg-brand-text\/10 {
  background-color: rgb(var(--color-brand-text-rgb) / 0.1);
}
.hover\:bg-brand-text\/5:hover {
  background-color: rgb(var(--color-brand-text-rgb) / 0.05);
}

/* Border variants */
.border-brand-text\/10 {
  border-color: rgb(var(--color-brand-text-rgb) / 0.1);
}
.border-brand-text\/20 {
  border-color: rgb(var(--color-brand-text-rgb) / 0.2);
}

html, body {
  margin: 0;
  min-width: 320px;
  height: 100%;
}

#root {
  width: 100%;
  height: 100%;
}

/* React Grid Layout Dashboard Styling */
.layout {
  position: relative;
}

.widget-container {
  height: 100%;
}

.widget-container > div {
  height: 100%;
}

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

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

/* React Grid Layout overrides */
.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top;
}

.react-grid-item.cssTransforms {
  transition-property: transform;
}

.react-grid-item.resizing {
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
}

.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 6px;
  height: 6px;
  border-right: 2px solid rgba(0, 0, 0, 0.3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}

.dark .react-grid-item > .react-resizable-handle::after {
  border-right-color: rgba(255, 255, 255, 0.3);
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}

.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
}

.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
}

.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
}

/* =============================================================================
   Email Template Editor - Force Light Mode
   Puck editor for emails should always use light theme for accurate preview
   ============================================================================= */

.email-editor-light-mode {
  color-scheme: light !important;
  background-color: #ffffff !important;
}

/* Override all Puck dark mode styles within email editor */
.email-editor-light-mode,
.email-editor-light-mode * {
  --puck-color-bg: #ffffff !important;
  --puck-color-text: #1f2937 !important;
}

/* Puck sidebar and component list */
.email-editor-light-mode [class*="Puck-"] {
  background-color: #f9fafb !important;
  color: #1f2937 !important;
}

/* Puck frame/canvas area */
.email-editor-light-mode [class*="Frame"],
.email-editor-light-mode [class*="canvas"],
.email-editor-light-mode [class*="preview"] {
  background-color: #f3f4f6 !important;
}

/* Puck component panels */
.email-editor-light-mode [class*="ComponentList"],
.email-editor-light-mode [class*="Fields"],
.email-editor-light-mode [class*="Outline"] {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* Puck inputs and form elements */
.email-editor-light-mode input,
.email-editor-light-mode select,
.email-editor-light-mode textarea {
  background-color: #ffffff !important;
  border-color: #d1d5db !important;
  color: #1f2937 !important;
}

/* Puck buttons */
.email-editor-light-mode button {
  color: #374151 !important;
}

/* Puck labels and text */
.email-editor-light-mode label,
.email-editor-light-mode [class*="label"] {
  color: #374151 !important;
}

/* Puck header bar */
.email-editor-light-mode [class*="header"] {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* =============================================================================
   Puck Editor Height Fix
   Force Puck to fill container and enable sidebar scrolling
   ============================================================================= */

/* Container must be positioned for absolute child */
.email-editor-light-mode {
  position: relative !important;
}

/* Force Puck root to fill container absolutely */
.email-editor-light-mode > [id^="_r_"] {
  position: absolute !important;
  inset: 0 !important;
}

/* Target Puck's main layout - all direct children need height constraints */
.email-editor-light-mode > [id^="_r_"] > div {
  height: 100% !important;
}

.email-editor-light-mode > [id^="_r_"] > div > div {
  height: 100% !important;
}

/* Force the left sidebar to be constrained and scrollable */
/* Use calc to account for the header areas above the editor */
.email-editor-light-mode [class*="_Sidebar_"][class*="--left"],
.email-editor-light-mode [class*="_Sidebar_"][class*="--right"] {
  max-height: calc(100vh - 280px) !important;
  overflow-y: auto !important;
  border: 3px solid red !important; /* TEST - remove after confirming selector works */
}