/* Widget System CSS */

/* Widget Canvas */
.widget-canvas {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 60px;
  /* Each row is 60px for TV readability */
  gap: 1rem;
  min-height: 100vh;
  padding: 2rem;
  position: relative;
}

/* Widget Canvas in Edit Mode */
.widget-canvas--edit-mode {
  background-image:
    linear-gradient(to right, rgba(59, 130, 246, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
  background-size: calc(100% / 12) 60px;
  /* Ensure canvas doesn't block widget control clicks */
  pointer-events: none;
}

/* But allow pointer events on actual widgets */
.widget-canvas--edit-mode .menu-widget {
  pointer-events: auto;
}

/* Allow pointer events on widgets within the canvas */
.tv-canvas .menu-widget,
.tv-canvas-container .menu-widget {
  pointer-events: auto;
}

/* Individual Widget Containers */
.menu-widget {
  transition: all 0.2s ease-in-out;
  border-radius: 8px;
  overflow: visible;
  /* Allow resize handles to be visible */
  min-height: 60px;
  /* Ensure minimum height */
  position: relative;
  /* No border or background by default - only in edit mode */
}

.menu-widget--edit-mode {
  cursor: pointer;
  /* Add dashed outline and background only in edit mode */
  border: 1px dashed rgba(156, 163, 175, 0.2);
  background: rgba(255, 255, 255, 0.95);
}

.menu-widget--edit-mode:hover {
  /* Enhanced hover state with more visible outline and shadow */
  border: 1px dashed rgba(59, 130, 246, 0.5);
  /* Blue dashed outline on hover */
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  background: rgba(255, 255, 255, 1);
  /* Solid white background on hover */
}

/* Widget Content */
.widget-content {
  height: 100%;
  width: 100%;
  overflow: visible;
  /* Allow content to be visible for proper text display */
  position: relative;
  z-index: 1;
  /* Keep content below edit controls */
  display: flex;
  flex-direction: column;
}

/* Empty Widget State */
.empty-widget-state {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
}

.menu-widget--edit-mode .empty-widget-state {
  border-color: #93c5fd;
  background: #eff6ff;
}

/* Edit Mode Controls */
.widget-edit-wrapper {
  pointer-events: none;
  position: absolute;
  z-index: 1000;
  overflow: visible;
}

.widget-control-bar {
  pointer-events: auto !important;
  z-index: 1001;
}

.resize-handles-container {
  pointer-events: none;
  overflow: visible;
}

.widget-control-bar button {
  pointer-events: auto !important;
  cursor: pointer;
}

/* Widget edit mode hover effects - hide controls by default, show on hover */
.menu-widget--edit-mode .widget-edit-wrapper {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.menu-widget--edit-mode:hover .widget-edit-wrapper {
  opacity: 1;
}

/* Resize handles container - no border to avoid double border effect */



/* Resize Handles */
.resize-handle {
  opacity: 0.7;
  transition: all 0.2s ease-in-out;
  position: absolute;
  pointer-events: auto !important;
  z-index: 1002;
}

.menu-widget--edit-mode:hover .resize-handle {
  opacity: 1;
}

.resize-handle:hover {
  transform: scale(1.1);
  opacity: 1 !important;
}

.resize-handle--se {
  cursor: se-resize;
}

.resize-handle--s {
  cursor: s-resize;
}

.resize-handle--e {
  cursor: e-resize;
}

/* Drag Placeholder */
.widget-drag-placeholder {
  border: 2px dashed #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 8px;
}

/* Widget Types Specific Styling */

/* Header Widget */
.widget-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  /* Better padding for text spacing */
  text-align: center;
  height: 100%;
  flex: 1;
  /* Take up available space in widget-content */
  overflow: visible;
  /* Allow text to be visible */
  position: relative;
  z-index: 1;
  /* Ensure content stays below controls */
  min-height: 60px;
  /* Ensure minimum height for proper centering */
}

.widget-header h1 {
  margin: 0;
  line-height: 1.2;
}

.widget-header h2 {
  margin: 0;
  opacity: 0.8;
}

/* Menu Items Widget */
.widget-menu-items {
  padding: 1rem;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.widget-menu-items--grid {
  display: grid;
  gap: 1rem;
  overflow-y: auto;
  flex: 1;
}

.widget-menu-items--grid.columns-1 {
  grid-template-columns: 1fr;
}

.widget-menu-items--grid.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.widget-menu-items--grid.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.widget-menu-items--grid.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.widget-menu-items--list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  flex: 1;
}

.widget-menu-items--cards .menu-item {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 1rem;
}

/* Menu item styling improvements */
.widget-menu-items .menu-item {
  min-height: 0;
  /* Allow items to shrink */
  overflow: hidden;
}

.widget-menu-items .menu-item h3 {
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.widget-menu-items .menu-item p {
  line-height: 1.4;
  word-wrap: break-word;
}

/* Logo Widget */
.widget-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.widget-logo--left {
  justify-content: flex-start;
}

.widget-logo--center {
  justify-content: center;
}

.widget-logo--right {
  justify-content: flex-end;
}

.widget-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.widget-logo .logo-text {
  font-weight: bold;
}

.widget-logo .logo-text--small {
  font-size: 1rem;
}

.widget-logo .logo-text--medium {
  font-size: 1.5rem;
}

.widget-logo .logo-text--large {
  font-size: 2rem;
}

/* Footer Widget */
.widget-footer {
  display: flex;
  align-items: center;
  padding: 1rem;
}

.widget-footer--left {
  justify-content: flex-start;
  text-align: left;
}

.widget-footer--center {
  justify-content: center;
  text-align: center;
}

.widget-footer--right {
  justify-content: flex-end;
  text-align: right;
}

/* Custom Text Widget */
.widget-custom-text {
  display: flex;
  align-items: center;
  padding: 1rem;
}

.widget-custom-text--left {
  text-align: left;
}

.widget-custom-text--center {
  text-align: center;
}

.widget-custom-text--right {
  text-align: right;
}

/* Spacer Widget */
.widget-spacer {
  background: transparent;
  position: relative;
}

/* Show spacer boundaries in edit mode */
.menu-widget--edit-mode .widget-spacer {
  background: rgba(156, 163, 175, 0.05);
  border: 1px dashed rgba(156, 163, 175, 0.3);
}

.menu-widget--edit-mode .widget-spacer::before {
  content: 'SPACER';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: rgba(156, 163, 175, 0.6);
  font-weight: 500;
  letter-spacing: 1px;
}

.widget-spacer--small {
  min-height: 20px;
}

.widget-spacer--medium {
  min-height: 40px;
}

.widget-spacer--large {
  min-height: 80px;
}

/* TV Display Optimizations */
@media (min-width: 1920px) {
  .widget-canvas {
    grid-auto-rows: 75px;
    /* Larger rows for TV displays */
    gap: 1.5rem;
    padding: 3rem;
  }

  .widget-header h1 {
    font-size: 3rem;
  }

  .widget-header h2 {
    font-size: 1.5rem;
  }

  .menu-item {
    font-size: 1.25rem;
  }
}

@media (min-width: 2560px) {
  .widget-canvas {
    grid-auto-rows: 90px;
    gap: 2rem;
    padding: 4rem;
  }

  .widget-header h1 {
    font-size: 4rem;
  }

  .widget-header h2 {
    font-size: 2rem;
  }
}

/* Widget Configuration Form Styling - High specificity to override any conflicts */
.widget-config-input {
  @apply mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-500 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white;
}

.widget-config-select {
  @apply mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-500 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white cursor-pointer;
}

.widget-config-textarea {
  @apply mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-500 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white;
}

/* Widget config forms using proper Tailwind styling like menu_items/new.html.erb - High specificity to override TV canvas */
.tv-canvas [data-widget-canvas-target="configModal"] input[type="text"],
.tv-canvas [data-widget-canvas-target="configModal"] input[type="url"],
.tv-canvas [data-widget-canvas-target="configModal"] textarea,
.tv-canvas [data-widget-canvas-target="configModal"] select,
[data-widget-canvas-target="configModal"] input[type="text"],
[data-widget-canvas-target="configModal"] input[type="url"],
[data-widget-canvas-target="configModal"] textarea,
[data-widget-canvas-target="configModal"] select {
  /* Light mode - matching menu_items/new.html.erb exactly */
  display: block !important;
  width: 100% !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  /* bg-white/50 */
  color: #0f172a !important;
  /* text-slate-900 */
  border-color: #cbd5e1 !important;
  /* border-slate-300 */
  border-width: 1px !important;
  border-radius: 0.375rem !important;
  /* rounded-md */
  padding: 0.5rem 0.75rem !important;
  /* px-3 py-2 */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  /* shadow-sm */
  font-size: 0.875rem !important;
  /* sm:text-sm */
  line-height: 1.25rem !important;
  outline: none !important;
  /* focus:outline-none */
}

.tv-canvas [data-widget-canvas-target="configModal"] input[type="text"]:focus,
.tv-canvas [data-widget-canvas-target="configModal"] input[type="url"]:focus,
.tv-canvas [data-widget-canvas-target="configModal"] textarea:focus,
.tv-canvas [data-widget-canvas-target="configModal"] select:focus,
[data-widget-canvas-target="configModal"] input[type="text"]:focus,
[data-widget-canvas-target="configModal"] input[type="url"]:focus,
[data-widget-canvas-target="configModal"] textarea:focus,
[data-widget-canvas-target="configModal"] select:focus {
  outline: none !important;
  border-color: #6366f1 !important;
  /* focus:border-indigo-500 */
  box-shadow: 0 0 0 1px #6366f1 !important;
  /* focus:ring-indigo-500 - matching menu_items/new.html.erb exactly */
}

.tv-canvas [data-widget-canvas-target="configModal"] input[type="text"]::placeholder,
.tv-canvas [data-widget-canvas-target="configModal"] input[type="url"]::placeholder,
.tv-canvas [data-widget-canvas-target="configModal"] textarea::placeholder,
[data-widget-canvas-target="configModal"] input[type="text"]::placeholder,
[data-widget-canvas-target="configModal"] input[type="url"]::placeholder,
[data-widget-canvas-target="configModal"] textarea::placeholder {
  color: #94a3b8 !important;
  /* placeholder-slate-400 */
}

/* Dark mode - matching menu_items/new.html.erb exactly - High specificity to override TV canvas */
.tv-canvas.dark [data-widget-canvas-target="configModal"] input[type="text"],
.tv-canvas.dark [data-widget-canvas-target="configModal"] input[type="url"],
.tv-canvas.dark [data-widget-canvas-target="configModal"] textarea,
.tv-canvas.dark [data-widget-canvas-target="configModal"] select,
.dark .tv-canvas [data-widget-canvas-target="configModal"] input[type="text"],
.dark .tv-canvas [data-widget-canvas-target="configModal"] input[type="url"],
.dark .tv-canvas [data-widget-canvas-target="configModal"] textarea,
.dark .tv-canvas [data-widget-canvas-target="configModal"] select,
.dark [data-widget-canvas-target="configModal"] input[type="text"],
.dark [data-widget-canvas-target="configModal"] input[type="url"],
.dark [data-widget-canvas-target="configModal"] textarea,
.dark [data-widget-canvas-target="configModal"] select,
html.dark [data-widget-canvas-target="configModal"] input[type="text"],
html.dark [data-widget-canvas-target="configModal"] input[type="url"],
html.dark [data-widget-canvas-target="configModal"] textarea,
html.dark [data-widget-canvas-target="configModal"] select {
  background-color: rgba(30, 41, 59, 0.5) !important;
  /* dark:bg-slate-800/50 */
  color: #f1f5f9 !important;
  /* dark:text-slate-100 */
  border-color: #475569 !important;
  /* dark:border-slate-600 */
}

.tv-canvas.dark [data-widget-canvas-target="configModal"] input[type="text"]::placeholder,
.tv-canvas.dark [data-widget-canvas-target="configModal"] input[type="url"]::placeholder,
.tv-canvas.dark [data-widget-canvas-target="configModal"] textarea::placeholder,
.dark .tv-canvas [data-widget-canvas-target="configModal"] input[type="text"]::placeholder,
.dark .tv-canvas [data-widget-canvas-target="configModal"] input[type="url"]::placeholder,
.dark .tv-canvas [data-widget-canvas-target="configModal"] textarea::placeholder,
.dark [data-widget-canvas-target="configModal"] input[type="text"]::placeholder,
.dark [data-widget-canvas-target="configModal"] input[type="url"]::placeholder,
.dark [data-widget-canvas-target="configModal"] textarea::placeholder,
html.dark [data-widget-canvas-target="configModal"] input[type="text"]::placeholder,
html.dark [data-widget-canvas-target="configModal"] input[type="url"]::placeholder,
html.dark [data-widget-canvas-target="configModal"] textarea::placeholder {
  color: #64748b !important;
  /* dark:placeholder-slate-500 */
}

/* Custom dropdown styling to match menu_items/new.html.erb beer style dropdown */
[data-widget-canvas-target="configModal"] select {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.5rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
  padding-right: 2.5rem !important;
}

.dark [data-widget-canvas-target="configModal"] select,
html.dark [data-widget-canvas-target="configModal"] select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Animation for widget transitions */
.widget-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Newly created widget highlight effect */
.widget-newly-created {
  animation: newWidgetPulse 3s ease-in-out;
  position: relative;
  z-index: 1000;
}

.widget-newly-created::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(45deg, #3b82f6, #1d4ed8, #3b82f6);
  border-radius: 8px;
  z-index: -1;
  animation: newWidgetGlow 3s ease-in-out;
}

@keyframes newWidgetPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }
}

@keyframes newWidgetGlow {

  0%,
  100% {
    opacity: 0;
  }

  25%,
  75% {
    opacity: 0.6;
  }

  50% {
    opacity: 0.8;
  }
}

/* Loading states */
.widget-loading {
  position: relative;
  overflow: hidden;
}

.widget-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}