/*
  Custom stylesheet for the G-Code Converter.
  This file complements TailwindCSS.
*/

body {
    /* Use a slightly different bg color for contrast */
    background-color: #f4f7f6;
}

/* Custom class for action buttons.
  I've replaced the non-working '@apply' rules with the
  actual CSS properties for padding, shadow, etc.
*/
.action-button {
    /* Replaced: @apply w-full; */
    width: 100%; 
    
    /* Replaced: @apply font-bold py-2 px-4 rounded-lg shadow-md ... */
    font-weight: 700;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    
    /* Replaced: @apply transition-all ... */
    transition-property: all;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* This part makes the buttons full-width on mobile
  and auto-width on desktop.
  Replaced: @apply sm:w-auto; 
*/
@media (min-width: 640px) {
  .action-button {
    width: auto;
  }
}

/* Custom styles for textareas */
.custom-textarea {
    resize: vertical; /* Allow vertical resize */
    min-height: 200px;
    font-size: 0.875rem; /* 14px */
    line-height: 1.5;
}

/* Custom scrollbar for webkit browsers (Chrome, Safari) */
.custom-textarea::-webkit-scrollbar {
    width: 8px;
}

.custom-textarea::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 4px;
}

.custom-textarea::-webkit-scrollbar-thumb {
    background-color: #a0a0a0;
    border-radius: 4px;
    border: 2px solid #e0e0e0;
}

.custom-textarea::-webkit-scrollbar-thumb:hover {
    background-color: #707070;
}