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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

.btn {
    @apply w-full px-6 py-3 text-sm font-medium leading-5 text-center text-white rounded-md shadow-sm;
}

.btn-blue {
    @apply bg-blue-500;
}

.btn-green {
    @apply bg-green-500;
}

/* Ensure buttons have the same width and height */
@media (min-width: 640px) {
    .btn {
        @apply min-w-[140px] h-[50px];
    }
}

@layer utilities {
    .error {
        @apply border-2 border-red-500 animate-pulse; /* Pulse animation for visibility */
        @apply shadow-lg; /* Soft shadow for depth */
    }

    .error-message {
        @apply text-red-500 text-sm mt-1 font-medium; /* Style for error messages */
        @apply flex items-center space-x-2; /* Flexbox for alignment */
    }

    .error-icon {
        @apply w-4 h-4 inline-block; /* Icon size */
    }
}

.hidden {
    display: none;
}

/*
 * 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.
 *


 */




.hidden-checkbox {
    display: none;
}



.green {
    background-color: green;
    color: white;
}

table {
    width: 100%;
    border-collapse: collapse;
}


@media (max-width: 1000px) { /* Adjusts styles for screens up to 600px wide */
    th {
        font-size: 11px; /* Smaller font size for mobile screens */
    }
    td {
        font-size: 12px; /* Smaller font size for mobile screens */
    }
}

input[type="checkbox"] {
    transform: scale(1.5); /* Adjust scale as needed */
    margin: 5px; /* Adds some space around the checkbox to avoid layout issues */
}

button:not(.section-button) {
    transform: scale(1.2); /* Adjust scale as needed */
}

.section-button{
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
}