@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

.element-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  background-color: white;
  border: 1px solid #f1f5f9;
  border-radius: 0.75rem;
  transition: all 0.2s ease-in-out;
}

.element-btn:hover {
  border-color: #6366F1;
  color: #4f46e5;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.element-btn:hover i {
  transform: scale(1.1);
  transition: transform 0.2s;
}

.element-btn:active {
  transform: scale(0.95);
}

#canvas-viewport {
  perspective: 1000px;
  background-color: #f1f3f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 0;
}

#canvas-wrapper {
  margin-top: 2rem;
  background: white;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: none;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#canvas-wrapper::-webkit-scrollbar {
  display: none;
}

#canvas {
  min-height: 100%;
  transform-origin: top left;
  background-image: radial-gradient(#E2E8F0 1px, transparent 1px);
  background-size: 20px 20px;
  position: relative;
  background-color: white;
}

#canvas-viewport:has(#canvas.full-width) {
  padding: 0;
}

#canvas-viewport:has(#canvas.full-width) #canvas-wrapper {
  width: 100%;
  height: 100%;
  border: none;
  box-shadow: none;
}

#canvas-viewport:has(#canvas.full-width) #canvas {
}

.canvas-element {
  cursor: pointer;
  box-sizing: border-box;
  transition: outline 0.2s ease, outline-offset 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.canvas-element.selected {
  outline: 2px solid #6366F1;
  outline-offset: 2px;
  z-index: 50;
}

.canvas-element:hover:not(.selected) {
  outline: 1px solid #A5B4FC;
  outline-offset: 1px;
}

.resizer {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #6366F1;
  border: 1px solid white;
  border-radius: 50%;
  z-index: 60;
}

.resizer-se {
  bottom: -4px;
  right: -4px;
  cursor: nwse-resize;
}

.resizer-s {
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.resizer-e {
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}

#left-sidebar.collapsed {
  width: 0;
  border-right: none;
}

#left-sidebar.collapsed > *:not(#expand-sidebar) {
  display: none;
}

.disclaimer-badge {
  padding: 0.25rem 0.75rem;
  background-color: #fffbeb;
  color: #d97706;
  border: 1px solid #fef3c7;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

#canvas-viewport:has(#canvas.full-width) {
  padding: 0;
}

.dragging {
  opacity: 0.7;
  transform: scale(1.02);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  z-index: 100;
  pointer-events: none;
}

.resizing {
  outline: 2px dashed #6366F1 !important;
  outline-offset: 4px !important;
  z-index: 100;
}

.drag-over {
  outline: 2px dashed #6366F1 !important;
  outline-offset: -2px !important;
  background-color: rgba(99, 102, 241, 0.05) !important;
}

.drag-over-top {
  box-shadow: inset 0 4px 0 0 #6366F1 !important;
}

.drag-over-bottom {
  box-shadow: inset 0 -4px 0 0 #6366F1 !important;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideLeft {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideRight {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-10px);}
  60% {transform: translateY(-5px);}
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.animate-fadeIn { animation: fadeIn 0.6s ease-out forwards; }
.animate-slideUp { animation: slideUp 0.6s ease-out forwards; }
.animate-slideDown { animation: slideDown 0.6s ease-out forwards; }
.animate-slideLeft { animation: slideLeft 0.6s ease-out forwards; }
.animate-slideRight { animation: slideRight 0.6s ease-out forwards; }
.animate-bounce { animation: bounce 1s infinite; }
.animate-pulse { animation: pulse 2s infinite; }

.guide-line {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
  background-color: #6366F1;
  display: none;
}

.guide-line.vertical {
  width: 1px;
  height: 10000px;
  top: -5000px;
}

.guide-line.horizontal {
  height: 1px;
  width: 10000px;
  left: -5000px;
}

.guide-line.show {
  display: block;
}

#code-modal:not(.hidden) {
  display: flex;
}

.modal-overlay {
  animation: fadeInModal 0.2s ease-out;
}

#suggest-modal,
#upi-payment-overlay {
  align-items: flex-start;
  overflow-y: auto;
  padding: 1rem;
}

#suggest-modal > div,
#upi-payment-overlay > div {
  display: flex;
  flex-direction: column;
  margin: auto;
  max-height: calc(100vh - 2rem);
  min-height: 0;
  overflow: hidden;
}

#suggest-form,
#upi-payment-overlay > div > div:last-child {
  min-height: 0;
  overflow-y: auto;
}

@keyframes fadeInModal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tree-item-btn {
  transition: all 0.2s;
}

.tree-item-btn.active {
  background-color: #EEF2FF;
  color: #4338CA;
  font-weight: 600;
}

body.dark-theme {
  background-color: #0f172a;
  color: #f1f5f9;
}

body.dark-theme #home-view {
  background-color: #0f172a;
}

body.dark-theme nav, 
body.dark-theme main, 
body.dark-theme aside, 
body.dark-theme #sidebar-header,
body.dark-theme #sidebar-footer,
body.dark-theme #sidebar-content,
body.dark-theme #properties-view,
body.dark-theme .bg-white {
  background-color: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

body.dark-theme .text-slate-900,
body.dark-theme .text-slate-600,
body.dark-theme .text-slate-700 {
  color: #f1f5f9;
}

body.dark-theme .text-slate-500,
body.dark-theme .text-slate-400 {
  color: #94a3b8;
}

body.dark-theme .bg-slate-50,
body.dark-theme .bg-slate-100,
body.dark-theme .bg-slate-200 {
  background-color: #334155;
}

body.dark-theme .border-slate-100,
body.dark-theme .border-slate-200 {
  border-color: #475569;
}

body.dark-theme #canvas-viewport {
  background-color: #0f172a;
}

body.dark-theme #canvas-wrapper {
  background-color: #1e293b;
  border-color: #334155;
}

body.dark-theme #canvas {
  background-color: #1e293b;
  background-image: radial-gradient(#334155 1px, transparent 1px);
}

body.dark-theme .element-btn {
  background-color: #1e293b;
  border-color: #334155;
}

body.dark-theme .element-btn:hover {
  background-color: #334155;
  border-color: #4f46e5;
}

body.dark-theme #custom-modal .bg-white,
body.dark-theme #settings-modal .bg-white,
body.dark-theme #tutorial-modal .bg-white,
body.dark-theme #project-modal .bg-white,
body.dark-theme #code-modal .bg-white {
  background-color: #1e293b;
  color: #f1f5f9;
}

body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select {
  background-color: #334155;
  border-color: #475569;
  color: #f1f5f9;
}

.sidebar-content::-webkit-scrollbar {
  width: 4px;
}

.sidebar-content::-webkit-scrollbar-thumb {
  background: #E2E8F0;
  border-radius: 10px;
}

/* Canvas Selected Element Floating Actions Toolbar */
#canvas-element-toolbar {
  pointer-events: auto;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -100%) translateY(-12px);
  will-change: top, left, transform, opacity;
}

#canvas-element-toolbar button {
  cursor: pointer;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  width: 26px;
  height: 26px;
  color: #94a3b8;
  transition: all 0.15s ease;
}

#canvas-element-toolbar button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}

#canvas-element-toolbar button:active {
  transform: scale(0.9);
}

body.dark-theme #canvas-element-toolbar {
  background-color: #1e293b;
  border: 1px solid #334155;
}

#canvas.hide-guidelines .canvas-element:hover:not(.selected) {
  outline: none !important;
}
#canvas.hide-guidelines [style*="border-style: dashed"],
#canvas.hide-guidelines [style*="border-style:dashed"] {
  border-width: 0px !important;
  border-style: none !important;
}
#canvas.hide-guidelines {
  background-image: none !important;
}

/* List element style overrides inside canvas */
#canvas ul, #canvas ol {
  list-style-position: inside !important;
  padding-left: 1.5rem !important;
}

/* Hover Presets */
.hover-preset-grow {
  transition: transform 0.25s ease-out !important;
}
.hover-preset-grow:hover {
  transform: scale(1.05) !important;
}

.hover-preset-lift {
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out !important;
}
.hover-preset-lift:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 20px -3px rgba(0,0,0,0.12), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
}

.hover-preset-glow {
  transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out !important;
}
.hover-preset-glow:hover {
  border-color: #6366F1 !important;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.5) !important;
}

.hover-preset-fade {
  transition: opacity 0.25s ease-out !important;
}
.hover-preset-fade:hover {
  opacity: 0.8 !important;
}