@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@layer components {
  .btn {
    @apply py-2 px-4 rounded font-medium transition-colors duration-200 inline-block text-center;
  }

  .btn-primary {
    @apply btn bg-blue-600 text-white hover:bg-blue-700;
  }

  .btn-secondary {
    @apply btn bg-gray-600 text-white hover:bg-gray-700;
  }

  .btn-success {
    @apply btn bg-green-600 text-white hover:bg-green-700;
  }

  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700;
  }
}

.pagy {
  @apply flex space-x-1 font-semibold text-sm text-gray-500 justify-center my-4;
  a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200;
    &:hover {
      @apply bg-gray-300;
    }
    &:not([href]) { /* disabled links */
      @apply text-gray-300 bg-gray-100 cursor-default;
    }
    &.current {
      @apply text-white bg-gray-400;
    }
  }
  label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
    input {
      @apply bg-gray-100 border-none rounded-md;
    }
  }
}

.header_active::after {
  content: '\A \2981';  
  white-space: pre;
  position: relative;
  top: -10px;
  left: calc(45%);
}

.header_inactive::after {
  content: '\A \2981';  
  white-space: pre;
  color: #f3f4f6;
  position: relative;
  top: -10px;
  left: calc(40%);
}

.group:hover .img_icon{
  filter: brightness(0) invert(1);
}

@layer components {
  .parent-peer:has(input:checked) {
    @apply bg-semantic-primary;
  }
}

.hide-arrow[type="number"]::-webkit-inner-spin-button,
.hide-arrow[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox support for hiding number input arrows */
.hide-arrow[type="number"] {
  -moz-appearance: textfield;
}

/* Enhanced styling for numeric text inputs */
.hide-arrow[inputmode="numeric"] {
  text-align: center;
}

/* Ensure consistent appearance across browsers */
.hide-arrow {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.breadcrumb-item::after {
  content: ">";
  margin-left: 0.5rem; /* Tailwind’s ml-2 */
  @apply text-gray-400;
}

.breadcrumb-item:last-child a {
  font-weight: semibold;
  @apply text-black;
}

.breadcrumb-item:last-child::after {
  content: "";
}

.pagy {
  justify-content: end;
}

/* SortableJS custom styles for form builder */
.sortable-ghost {
  @apply opacity-40 bg-blue-100 border-blue-400 border-dashed;
}

.sortable-drag {
  @apply opacity-100 shadow-lg ring-2 ring-blue-500 bg-white;
}

.sortable-chosen {
  @apply cursor-grabbing;
}

/* Prevent text selection during drag */
.sortable-drag * {
  @apply select-none;
}

/* Smooth transitions for sortable items */
.field-item,
.form-builder-section {
  @apply transition-all duration-150 ease-in-out;
}

/* Drop zone highlighting */
.section-fields.sortable-drag-over {
  @apply bg-blue-50 border-blue-300 border-2 border-dashed;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */