/* FTM Screening Platform - Custom Styles */

/* Button styles */
.btn-primary {
    @apply bg-ftm-black text-white px-6 py-3 font-heading font-bold text-sm uppercase tracking-wide
           hover:bg-ftm-gray-800 transition-colors duration-200;
}

.btn-primary-sm {
    @apply bg-white text-ftm-black px-4 py-2 font-heading font-bold text-xs uppercase tracking-wide
           hover:bg-ftm-gray-200 transition-colors duration-200;
}

.btn-secondary {
    @apply border-2 border-ftm-black text-ftm-black px-6 py-3 font-heading font-bold text-sm uppercase tracking-wide
           hover:bg-ftm-black hover:text-white transition-colors duration-200;
}

.btn-secondary-sm {
    @apply border border-ftm-black text-ftm-black px-4 py-2 font-heading font-bold text-xs uppercase tracking-wide
           hover:bg-ftm-black hover:text-white transition-colors duration-200;
}

/* Card styles */
.card {
    @apply bg-white border border-ftm-gray-200 p-6 shadow-sm;
}

.card-hover {
    @apply card hover:shadow-md transition-shadow duration-200;
}

/* Form styles */
.form-input {
    @apply w-full border border-ftm-gray-300 px-4 py-3 font-body text-sm
           focus:outline-none focus:border-ftm-black focus:ring-1 focus:ring-ftm-black;
}

.form-label {
    @apply block font-heading font-bold text-sm uppercase tracking-wide mb-2;
}

.form-textarea {
    @apply form-input resize-none;
}

.form-select {
    @apply form-input appearance-none bg-white;
}

/* Heading styles */
.heading-1 {
    @apply font-heading font-black text-4xl md:text-5xl lg:text-6xl tracking-tight;
}

.heading-2 {
    @apply font-heading font-bold text-2xl md:text-3xl tracking-tight;
}

.heading-3 {
    @apply font-heading font-bold text-xl md:text-2xl tracking-tight;
}

.heading-4 {
    @apply font-heading font-bold text-lg tracking-tight;
}

/* Tag styles */
.tag {
    @apply inline-block bg-ftm-gray-200 text-ftm-gray-700 px-3 py-1 text-xs uppercase tracking-wide;
}

.tag-primary {
    @apply inline-block bg-ftm-black text-white px-3 py-1 text-xs uppercase tracking-wide;
}

/* Badge styles */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 text-xs font-heading uppercase;
}

.badge-success {
    @apply badge bg-green-100 text-green-800;
}

.badge-warning {
    @apply badge bg-yellow-100 text-yellow-800;
}

.badge-error {
    @apply badge bg-red-100 text-red-800;
}

.badge-info {
    @apply badge bg-ftm-gray-200 text-ftm-gray-700;
}

/* Chat styles for surveys */
.chat-container {
    @apply flex flex-col h-[600px] max-h-[80vh];
}

.chat-messages {
    @apply flex-grow overflow-y-auto p-4 space-y-4;
}

.chat-message {
    @apply max-w-[80%] p-4;
}

.chat-message-user {
    @apply chat-message bg-ftm-black text-white ml-auto;
}

.chat-message-assistant {
    @apply chat-message bg-ftm-gray-100 text-ftm-black mr-auto;
}

.chat-input-container {
    @apply border-t border-ftm-gray-200 p-4;
}

/* QR Code display */
.qr-code-container {
    @apply bg-white p-4 border border-ftm-gray-200 inline-block;
}

.qr-code-container img {
    @apply w-48 h-48;
}

/* Loading indicator */
.htmx-indicator {
    @apply opacity-0 transition-opacity duration-200;
}

.htmx-request .htmx-indicator {
    @apply opacity-100;
}

.htmx-request.htmx-indicator {
    @apply opacity-100;
}

/* Spinner */
.spinner {
    @apply animate-spin h-5 w-5 border-2 border-ftm-gray-300 border-t-ftm-black rounded-full;
}

/* Table styles */
.table-container {
    @apply overflow-x-auto;
}

.table {
    @apply min-w-full divide-y divide-ftm-gray-200;
}

.table th {
    @apply px-6 py-3 text-left text-xs font-heading font-bold uppercase tracking-wider bg-ftm-gray-100;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm;
}

.table tbody tr {
    @apply hover:bg-ftm-gray-50;
}

/* Search input */
.search-input {
    @apply form-input pl-10;
}

/* Toggle switch */
.toggle {
    @apply relative inline-flex h-6 w-11 items-center rounded-full transition-colors
           focus:outline-none focus:ring-2 focus:ring-ftm-black focus:ring-offset-2;
}

.toggle-on {
    @apply bg-ftm-black;
}

.toggle-off {
    @apply bg-ftm-gray-300;
}

.toggle-dot {
    @apply inline-block h-4 w-4 transform rounded-full bg-white transition-transform;
}

.toggle-dot-on {
    @apply translate-x-6;
}

.toggle-dot-off {
    @apply translate-x-1;
}