@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
    :root {
        /* Global Font Sizes - Edit these to change font sizes across the entire app */
        --font-size-xs: 0.75rem;     /* 12px - Very small text, help text */
        --font-size-sm: 0.875rem;    /* 14px - Labels, secondary text */
        --font-size-base: 1rem;      /* 16px - Body text, inputs */
        --font-size-lg: 1.125rem;    /* 18px - Section headers */
        --font-size-xl: 1.25rem;     /* 20px - Page titles */
        --font-size-2xl: 1.5rem;     /* 24px - Main headings */

        /* Line Heights */
        --line-height-tight: 1.25;
        --line-height-normal: 1.5;
        --line-height-relaxed: 1.75;
    }
}

@layer components {
    /* Form Labels */
    .form-label {
      @apply block font-medium text-gray-700;
      font-size: var(--font-size-sm);
    }

    /* Form Inputs */
    .form-input {
      @apply bg-gray-50 border border-gray-300 text-gray-900 rounded-lg w-full p-2;
      @apply focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500;
      font-size: var(--font-size-base);
    }

    /* Form Select */
    .form-select {
      @apply bg-gray-50 border border-gray-300 text-gray-900 rounded-lg w-full p-2;
      @apply focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500;
      font-size: var(--font-size-base);
    }

    /* Form Textarea */
    .form-textarea {
      @apply bg-gray-50 border border-gray-300 text-gray-900 rounded-lg w-full p-2;
      @apply focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500;
      font-size: var(--font-size-base);
    }

    /* Input with Icon (like the salary input) */
    .form-input-with-prefix {
      @apply pl-8;
    }

    /* File Input */
    .form-file-input {
      @apply block w-full text-sm text-gray-900
             border border-gray-300 rounded-lg cursor-pointer
             bg-gray-50 focus:outline-none
             file:mr-4 file:py-2 file:px-4
             file:rounded-lg file:border-0
             file:text-sm file:font-medium
             file:bg-emerald-50 file:text-emerald-700
             hover:file:bg-emerald-100;
    }

    /* Buttons */
    .form-button-primary {
      @apply inline-flex items-center px-4 py-2 border border-transparent
             rounded-lg shadow-sm text-sm font-medium text-white
             bg-emerald-500 hover:bg-emerald-600
             focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500;
    }

    .form-button-secondary {
      @apply inline-flex items-center px-4 py-2 border border-gray-300
             rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white
             hover:bg-gray-50 hover:text-gray-900
             focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500;
    }

    /* Checkbox & Radio */
    .form-checkbox {
      @apply w-4 h-4 text-emerald-500 bg-gray-100 border-gray-300 rounded
             focus:ring-emerald-500 focus:ring-2;
    }

    .form-radio {
      @apply w-4 h-4 text-emerald-500 bg-gray-100 border-gray-300
             focus:ring-emerald-500 focus:ring-2;
    }

    /* Form Groups */
    .form-group {
      @apply mb-6;
    }

    /* Help Text */
    .form-help-text {
      @apply mt-1 text-sm text-gray-500;
    }

    /* Error States */
    .form-input-error {
      @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg
             focus:ring-red-500 focus:border-red-500 block w-full p-2.5;
    }

    .form-error-message {
      @apply mt-2 text-sm text-red-600;
    }

    /* Page header */
    .page-header {
      @apply mb-6;
    }

    .page-header-content {
      @apply flex flex-col sm:flex-row sm:items-center sm:justify-between;
    }

    .page-title {
      @apply font-bold text-gray-900;
      font-size: var(--font-size-xl);
    }

    .section-title {
      @apply font-semibold text-gray-900;
      font-size: var(--font-size-sm);
    }

    .card-title {
      @apply font-medium text-gray-900;
      font-size: var(--font-size-base);
    }

    .page-action-button {
      @apply mt-4 sm:mt-0 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500;
    }

    /* List container */
    .list-container {
      @apply bg-white shadow overflow-hidden sm:rounded-lg;
    }

    /* Search and filters */
    .filters-section {
      @apply px-4 py-5 border-b border-gray-200 sm:px-6;
    }

    .filters-form {
      @apply grid gap-4 sm:grid-cols-2 lg:grid-cols-4;
    }

    .search-input-group {
      @apply relative sm:col-span-2;
    }

    .search-input {
      @apply block w-full pl-10 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm;
    }

    .filter-select {
      @apply block w-full py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm;
    }

    /* List items */
    .list-items {
      @apply divide-y divide-gray-200;
    }

    .list-item {
      @apply px-4 py-4 sm:px-6 hover:bg-gray-50;
    }

    .list-item-content {
      @apply flex items-center justify-between;
    }

    .list-item-main {
      @apply flex items-center min-w-0;
    }

    .list-item-avatar {
      @apply flex-shrink-0 h-12 w-12 bg-emerald-100 rounded-full flex items-center justify-center;
    }

    .list-item-avatar-text {
      @apply text-sm font-medium text-emerald-800;
    }

    .list-item-details {
      @apply min-w-0 flex-1 px-4;
    }

    .list-item-title {
      @apply flex items-center;
    }

    .list-item-name {
      @apply text-sm font-medium text-emerald-600 truncate;
    }

    .list-item-meta {
      @apply mt-1 flex flex-wrap gap-4;
    }

    .list-item-meta-entry {
      @apply flex items-center text-sm text-gray-500;
    }

    .list-item-meta-icon {
      @apply flex-shrink-0 mr-1.5 h-4 w-4 text-gray-400;
    }

    .list-item-actions {
      @apply flex flex-shrink-0 ml-4 space-x-2;
    }

    .action-button {
      @apply bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500;
    }

    .action-button-delete {
      @apply bg-white rounded-md text-red-400 hover:text-red-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
    }

    /* Empty state */
    .empty-state {
      @apply px-4 py-12 text-center;
    }

    .empty-state-icon {
      @apply mx-auto h-12 w-12 text-gray-400;
    }

    .empty-state-title {
      @apply mt-2 text-sm font-medium text-gray-900;
    }

    .empty-state-description {
      @apply mt-1 text-sm text-gray-500;
    }

    /* Pagination */
    .pagination-container {
      @apply bg-white px-4 py-3 border-t border-gray-200 sm:px-6;
    }

    /* Form Layout Components */
    .form-page {
      @apply max-w-3xl mx-auto py-6 sm:px-6 lg:px-8;
    }

    .form-container {
      @apply bg-white shadow sm:rounded-lg;
    }

    .form-header {
      @apply px-4 py-5 border-b border-gray-200 sm:px-6;
    }

    .form-header-content {
      @apply flex items-center justify-between;
    }

    .form-title {
      @apply text-lg leading-6 font-medium text-gray-900;
    }

    .form-subtitle {
      @apply mt-1 text-sm text-gray-500;
    }

    .form-body {
      @apply px-4 py-5 sm:p-6;
    }

    .form-section {
      @apply grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6;
    }

    .form-field-full {
      @apply sm:col-span-6;
    }

    .form-field-half {
      @apply sm:col-span-3;
    }

    .form-field-third {
      @apply sm:col-span-2;
    }

    .form-footer {
      @apply px-4 py-3 bg-gray-50 text-right sm:px-6 border-t border-gray-200;
    }

    .form-footer-content {
      @apply flex justify-end space-x-3;
    }

    /* Add these styles to your CSS */
    .modal-open {
      overflow: hidden;
    }

    .modal-open .modal {
      overflow-x: hidden;
      overflow-y: auto;
    }
}
/*
 * This is a manifest file that'll be compiled into application.tailwind.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.
 *


 */

/* Check for any button styles here that might override your Tailwind components */

/* Allow text selection in inputs */
input, textarea, select {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* Font size overrides - making text slightly larger system-wide */
/* Override hardcoded text-[10px] to be larger (12px instead of 10px) */
.text-\[10px\] {
  font-size: 0.75rem !important; /* 12px - was 10px */
}

/* You can also use this utility class for very small text */
.text-2xs {
  font-size: 0.75rem; /* 12px */
}