/* Badge Styles */
  .badge-blue {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800;
  }
  .badge-green {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-400 text-green-800;
  }
  .badge-red {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-600 text-white;
  }

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* File Input Styling - Rounded edges with important flag */
  input[type="file"] {
    @apply block w-full text-sm text-gray-900 border border-gray-300 cursor-pointer bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500;
    border-radius: 0.5rem !important;
  }

  input[type="file"]::file-selector-button {
    @apply mr-4 py-2 px-4 border-0 text-sm font-semibold bg-indigo-50 text-indigo-700 hover:bg-indigo-100 cursor-pointer;
    border-radius: 0.5rem 0 0 0.5rem !important;
  }

  /* Dark mode support */
  .dark input[type="file"] {
    @apply bg-gray-800 border-gray-600 text-gray-200;
  }

  .dark input[type="file"]::file-selector-button {
    @apply bg-indigo-900 text-indigo-300 hover:bg-indigo-800;
  }

  /* Button Styles */
  .btn-primary {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors;
  }

  .btn-secondary {
    @apply inline-flex items-center px-4 py-2 border border-gray-200 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors;
  }

  /* Circle Button Base */
  .btn-circle {
    @apply rounded-full flex items-center justify-center p-0 w-8 h-8;
  }

  /* placeholder for btn-cancel (defined later) */

  /* Add (Primary) Circle Button */
  .btn-add {
    @apply btn-circle bg-blue-100 border border-blue-400 text-blue-800 hover:bg-blue-200 hover:border-blue-500;
  }

  /* View (Green) Circle Button */
  .btn-view {
    @apply btn-circle bg-green-100 border border-green-400 text-green-800 hover:bg-green-200 hover:border-green-500;
  }

  /* Danger (Red) Circle Button */
  .btn-delete {
    @apply btn-circle bg-red-100 border border-red-400 text-red-800 hover:bg-red-200 hover:border-red-500;
  }

  /* Edit (Blue) Circle Button */
  .btn-edit {
    @apply btn-circle bg-blue-100 border border-blue-400 text-blue-800 hover:bg-blue-200 hover:border-blue-500;
  }

  /* Cancel (Clear) Circle Button */
  .btn-cancel {
    @apply btn-circle bg-transparent border border-gray-300 text-gray-600 hover:bg-gray-50 hover:border-gray-400;
  }

  .btn-danger {
    @apply inline-flex items-center px-4 py-2 border border-red-600 text-sm font-medium rounded-md shadow-sm text-red-600 bg-white hover:bg-red-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }

  /* Form Styles */
  .form-group {
    @apply space-y-1;
  }

  .form-input {
    @apply mt-1 block w-full px-4 py-3 rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none sm:text-sm;
  }

  .form-select {
    @apply mt-1 block w-full px-4 py-3 h-10 rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none sm:text-sm;
  }

  .form-label {
    @apply block text-sm font-medium text-gray-700;
  }

  .form-label.required::after {
    @apply text-red-600 ml-1;
    content: '*';
  }

  .form-hint {
    @apply mt-1 text-xs text-gray-500;
  }

  .form-error {
    @apply mt-1 text-xs text-red-600;
  }

  .form-field-wrapper {
    @apply mt-1;
  }

  .form-checkbox {
    @apply h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500;
  }

  /* Card Styles */
  .card {
    @apply bg-white shadow rounded-lg overflow-hidden;
  }

  .card-body {
    @apply p-6;
  }

  .card-header {
    @apply px-6 py-4 border-b border-gray-200;
  }

  .card-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
  }

  /* File preview badge */
  .file-preview {
    @apply mt-2 inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800;
  }

  /* File preview badge */
  .icon {
    @apply inline-block align-middle bg-current select-none pointer-events-none;
    width: 1em;
    height: 1em;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
  }

  .icon--add {
    mask-image: asset-url("icons/add.svg");
    -webkit-mask-image: asset-url("icons/add.svg");
  }

  .icon--all {
    mask-image: asset-url("/assets/icons/all-c0ce837a.svg");
    -webkit-mask-image: asset-url("/assets/icons/all-c0ce837a.svg");
  }

  .icon--analyze {
    mask-image: asset-url("/assets/icons/analyze-65cd047f.svg");
    -webkit-mask-image: asset-url("/assets/icons/analyze-65cd047f.svg");
  }
  
  .icon--arrow-left {
    mask-image: asset-url("/assets/icons/arrow-left-2fc3e2b3.svg");
    -webkit-mask-image: asset-url("/assets/icons/arrow-left-2fc3e2b3.svg");
  }
  .icon--arrow-right {
    mask-image: asset-url("/assets/icons/arrow-right-88ff0eae.svg");
    -webkit-mask-image: asset-url("/assets/icons/arrow-right-88ff0eae.svg");
  }
  
  .icon--arrow-down {
    mask-image: asset-url("/assets/icons/arrow-down-19170b97.svg");
    -webkit-mask-image: asset-url("/assets/icons/arrow-down-19170b97.svg");
  }

  .icon--batch {
    mask-image: asset-url("/assets/icons/batch-58a92220.svg");
    -webkit-mask-image: asset-url("/assets/icons/batch-58a92220.svg");
  }
  
  .icon--cancel {
    mask-image: asset-url("/assets/icons/cancel-6e68320e.svg");
    -webkit-mask-image: asset-url("/assets/icons/cancel-6e68320e.svg");
  }

  .icon--calendar {
    mask-image: asset-url("/assets/icons/calendar-b290a887.svg");
    -webkit-mask-image: asset-url("/assets/icons/calendar-b290a887.svg");
  }

  .icon--checked {
    mask-image: asset-url("/assets/icons/checked-2f9555d3.svg");
    -webkit-mask-image: asset-url("/assets/icons/checked-2f9555d3.svg");
  }
  
  .icon--unchecked {
    mask-image: asset-url("/assets/icons/unchecked-d420d22d.svg");
    -webkit-mask-image: asset-url("/assets/icons/unchecked-d420d22d.svg");
  }
  /*.icon--error {
    mask-image: asset-url("/assets/icons/error-ec5c19e9.svg");
    -webkit-mask-image: asset-url("/assets/icons/error-ec5c19e9.svg");
  } */
  
  .icon--gear {
    mask-image: asset-url("/assets/icons/gear-469ae1c1.svg");
    -webkit-mask-image: asset-url("/assets/icons/gear-469ae1c1.svg");
  }

  .icon--info {
    mask-image: asset-url("/assets/icons/info-63ee4eb2.svg");
    -webkit-mask-image: asset-url("/assets/icons/info-63ee4eb2.svg");
  }

  .icon--integration {
    mask-image: asset-url("/assets/icons/integration-3c626bf5.svg");
    -webkit-mask-image: asset-url("/assets/icons/integration-3c626bf5.svg");
  }

  .icon--job-completed {
    mask-image: asset-url("/assets/icons/job-completed-f5eb14cf.svg");
    -webkit-mask-image: asset-url("/assets/icons/job-completed-f5eb14cf.svg");
  }

  .icon--job-failed {
    mask-image: asset-url("/assets/icons/job-failed-aa1cc6f6.svg");
    -webkit-mask-image: asset-url("/assets/icons/job-failed-aa1cc6f6.svg");
  }

  .icon--job-in-progress {
    mask-image: asset-url("icons/job-in-progress.svg");
    -webkit-mask-image: asset-url("icons/job-in-progress.svg");
  }

  .icon--job-total {
    mask-image: asset-url("icons/job-total.svg");
    -webkit-mask-image: asset-url("icons/job-total.svg");
  }

  .icon--key {
    mask-image: asset-url("/assets/icons/key-abee2022.svg");
    -webkit-mask-image: asset-url("/assets/icons/key-abee2022.svg");
  }

  .icon--literal {
    mask-image: asset-url("/assets/icons/literal-720571e7.svg");
    -webkit-mask-image: asset-url("/assets/icons/literal-720571e7.svg");
  }

  .icon--quickbooks {
    mask-image: asset-url("/assets/icons/quickbooks-3c1b876a.svg");
    -webkit-mask-image: asset-url("/assets/icons/quickbooks-3c1b876a.svg");
  }

  .icon--qbo {
    mask-image: asset-url("/assets/icons/qbo-565bef2b.svg");
    -webkit-mask-image: asset-url("/assets/icons/qbo-565bef2b.svg");
  }

  .icon--clock {
    mask-image: asset-url("/assets/icons/clock-0e11a8d8.svg");
    -webkit-mask-image: asset-url("/assets/icons/clock-0e11a8d8.svg");
  }

  .icon--copy {
    mask-image: asset-url("/assets/icons/copy-7cb3a6ba.svg");
    -webkit-mask-image: asset-url("/assets/icons/copy-7cb3a6ba.svg");
  }
  
  .icon--document {
    mask-image: asset-url("/assets/icons/document-03497698.svg");
    -webkit-mask-image: asset-url("/assets/icons/document-03497698.svg");
  }

  .icon--edit {
    mask-image: asset-url("/assets/icons/edit-b4be5ff1.svg");
    -webkit-mask-image: asset-url("/assets/icons/edit-b4be5ff1.svg");
  }

  .icon--eye {
    mask-image: asset-url("/assets/icons/eye-583a4f08.svg");
    -webkit-mask-image: asset-url("/assets/icons/eye-583a4f08.svg");
  }

  .icon--placeholder {
    mask-image: asset-url("/assets/icons/placeholder-82847768.svg");
    -webkit-mask-image: asset-url("/assets/icons/placeholder-82847768.svg");
  }

  .icon--save {
    mask-image: asset-url("/assets/icons/save-5578564f.svg");
    -webkit-mask-image: asset-url("/assets/icons/save-5578564f.svg");
  }

  .icon--shield-gear {
    mask-image: asset-url("/assets/icons/shield-gear-f531bacf.svg");
    -webkit-mask-image: asset-url("/assets/icons/shield-gear-f531bacf.svg");
  }

  .icon--dattuh_book {
    mask-image: asset-url("/assets/icons/dattuh_book-a26ff70f.svg");
    -webkit-mask-image: asset-url("/assets/icons/dattuh_book-a26ff70f.svg");
  }

  .icon--trashcan {
    mask-image: asset-url("/assets/icons/trashcan-f10a0353.svg");
    -webkit-mask-image: asset-url("/assets/icons/trashcan-f10a0353.svg");
  }

}