/* Textarea Component Styles */
/* Styled to match the design system textarea component */

.custom-textarea {
  width: 100% !important;
  height: 100% !important; /* Allow textarea to fill parent container */
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important; /* Allow flex child to shrink */
}

/* Mantine Textarea root wrapper - ensure it also respects height */
.custom-textarea .mantine-Textarea-root,
.custom-textarea .mantine-Textarea-wrapper {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* Textarea field styling - min-h-[80px], rounded-app-radius (6px), border, padding */
.custom-textarea .mantine-Textarea-input,
.custom-textarea textarea {
  height: 200px; /* No !important to allow for resizing */
  width: 100% !important;
  padding: 12px !important; /* p-3 */
  font-size: 16px !important; /* text-base */
  line-height: 1.5 !important; /* leading-normal */
  border-radius: 6px !important; /* rounded-app-radius */
  border: 1px solid hsl(var(--border)) !important; /* border border-input */
  background-color: transparent !important; /* bg-transparent */
  color: hsl(var(--foreground)) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; /* shadow-sm */
  transition: background-color 150ms ease, border-color 150ms ease !important; /* transition-[background-color,border-color] duration-150 */
  box-sizing: border-box !important;
  resize: vertical !important; /* Allow vertical resize */
  font-family: inherit !important;
  overflow: auto !important; /* Show scrollbar when content exceeds size */
}

/* Placeholder styling */
.custom-textarea .mantine-Textarea-input::placeholder,
.custom-textarea textarea::placeholder {
  color: hsl(var(--muted-foreground)) !important; /* placeholder:text-muted-foreground */
}



/* Disabled state */
.custom-textarea textarea:disabled,
.custom-textarea .mantine-Textarea-input[disabled],
.custom-textarea textarea[disabled] {
  cursor: not-allowed !important; /* disabled:cursor-not-allowed */
  opacity: 0.5 !important; /* disabled:opacity-50 */
  background-color: hsl(var(--muted) / 0.1) !important;
}

/* Medium screen and up - text-sm (14px) */
@media (min-width: 768px) {
  .custom-textarea .mantine-Textarea-input,
  .custom-textarea textarea {
    font-size: 14px !important; /* md:text-sm */
  }
}