/* Absence Module Styles - TailwindCSS */

/* Base Components */
@layer components {
  /* Card Components */
  .absence-card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden;
  }

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

  .absence-card-title {
    @apply text-lg font-semibold text-gray-900 mb-0 flex items-center gap-2;
  }

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

  /* Table Components */
  .absence-table {
    @apply w-full border-collapse;
  }

  .absence-table-responsive {
    @apply overflow-x-auto shadow-sm rounded-lg border border-gray-200;
  }

  .absence-table thead th {
    @apply bg-gray-900 text-white px-6 py-3 text-left text-xs font-medium uppercase tracking-wider border-b border-gray-700;
  }

  .absence-table tbody td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b border-gray-100;
  }

  .absence-table tbody tr {
    @apply hover:bg-gray-50 transition-colors duration-150;
  }

  .absence-table tbody tr:nth-child(even) {
    @apply bg-gray-50;
  }

  .absence-table tbody tr:nth-child(even):hover {
    @apply bg-gray-100;
  }

  /* Badge Components */
  .absence-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .absence-badge-secondary {
    @apply bg-gray-100 text-gray-800;
  }

  .absence-badge-info {
    @apply bg-blue-100 text-blue-800;
  }

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

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

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

  /* Button Components */
  .absence-btn-group {
    @apply inline-flex rounded-md shadow-sm;
  }

  .absence-btn-group > .absence-btn:not(:last-child) {
    @apply rounded-r-none border-r-0;
  }

  .absence-btn-group > .absence-btn:not(:first-child) {
    @apply rounded-l-none;
  }

  .absence-btn {
    @apply inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-150;
  }

  .absence-btn-sm {
    @apply px-2 py-1 text-xs;
  }

  .absence-btn-primary {
    @apply border-red-600 text-white bg-red-600 hover:bg-red-700 focus:ring-red-500;
  }

  .absence-btn-outline-primary {
    @apply border-red-600 text-red-600 bg-white hover:bg-red-50;
  }

  .absence-btn-outline-warning {
    @apply border-yellow-500 text-yellow-600 bg-white hover:bg-yellow-50;
  }

  .absence-btn-outline-secondary {
    @apply border-gray-300 text-gray-700 bg-white hover:bg-gray-50;
  }

  .absence-btn-outline-info {
    @apply border-blue-500 text-blue-600 bg-white hover:bg-blue-50;
  }

  .absence-btn-warning {
    @apply border-yellow-500 text-white bg-yellow-500 hover:bg-yellow-600 focus:ring-yellow-500;
  }

  /* Form Components */
  .absence-form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }

  .absence-form-control {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 text-sm;
  }

  .absence-form-text {
    @apply mt-1 text-sm text-gray-600;
  }

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

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

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

  .absence-empty-text {
    @apply text-gray-500 text-base;
  }

  /* Statistics Cards */
  .absence-stats-card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6 text-center;
  }

  .absence-stats-title {
    @apply text-sm font-medium text-gray-500 uppercase tracking-wide;
  }

  .absence-stats-value {
    @apply text-3xl font-bold text-gray-900 mt-2;
  }

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

  /* Period Display */
  .absence-period-display {
    @apply text-center p-4 border border-gray-200 rounded-lg;
  }

  .absence-period-title {
    @apply text-sm font-medium text-blue-600 mb-1;
  }

  .absence-period-value {
    @apply text-lg font-bold text-gray-900;
  }

  .absence-period-subtitle {
    @apply text-sm text-gray-500;
  }

  /* Days Display */
  .absence-days-display {
    @apply text-center p-4 border border-gray-200 rounded-lg;
  }

  .absence-days-title {
    @apply text-sm font-medium text-yellow-600 mb-1;
  }

  .absence-days-value {
    @apply text-2xl font-bold text-yellow-600;
  }

  .absence-days-subtitle {
    @apply text-sm text-gray-500;
  }

  /* Hours Display */
  .absence-hours-display {
    @apply text-center p-4 border border-gray-200 rounded-lg;
  }

  .absence-hours-title {
    @apply text-sm font-medium text-green-600 mb-1;
  }

  .absence-hours-value {
    @apply text-2xl font-bold text-green-600;
  }

  .absence-hours-subtitle {
    @apply text-sm text-gray-500;
  }

  /* Filter Form */
  .absence-filter-form {
    @apply bg-gray-50 p-4 rounded-lg border border-gray-200 mb-6;
  }

  .absence-filter-row {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4;
  }

  .absence-filter-col {
    @apply space-y-1;
  }

  /* Import Form */
  .absence-import-form {
    @apply space-y-4;
  }

  .absence-file-input {
    @apply block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-red-50 file:text-red-700 hover:file:bg-red-100 file:cursor-pointer cursor-pointer;
  }

  /* Accordion Components */
  .absence-accordion {
    @apply border border-gray-200 rounded-lg overflow-hidden;
  }

  .absence-accordion-item {
    @apply border-b border-gray-200 last:border-b-0;
  }

  .absence-accordion-header {
    @apply w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition-colors duration-150;
  }

  .absence-accordion-button {
    @apply flex items-center justify-between w-full text-sm font-medium text-gray-900;
  }

  .absence-accordion-body {
    @apply px-4 py-3 bg-white;
  }

  /* Navigation */
  .absence-nav-header {
    @apply flex justify-between items-center mb-6;
  }

  .absence-nav-title {
    @apply text-2xl font-bold text-gray-900;
  }

  .absence-nav-actions {
    @apply flex gap-2;
  }

  /* Responsive Utilities */
  .absence-mobile-hidden {
    @apply hidden md:table-cell;
  }

  .absence-desktop-hidden {
    @apply md:hidden;
  }

  /* Text Utilities */
  .absence-text-truncate {
    @apply truncate;
  }

  .absence-text-muted {
    @apply text-gray-500;
  }

  .absence-text-small {
    @apply text-sm;
  }

  /* Link Styles */
  .absence-link {
    @apply text-blue-600 hover:text-blue-800 no-underline hover:underline;
  }

  /* Loading States */
  .absence-loading {
    @apply opacity-50 pointer-events-none;
  }

  .absence-spinner {
    @apply animate-spin h-5 w-5 text-red-600;
  }
}

/* Dark Mode Support */
:root.dark .absence-card {
  @apply bg-gray-800 border-gray-700;
}

:root.dark .absence-card-header {
  @apply bg-gray-700 border-gray-600;
}

:root.dark .absence-card-title {
  @apply text-gray-100;
}

:root.dark .absence-table thead th {
  @apply bg-gray-800 text-gray-200 border-gray-600;
}

:root.dark .absence-table tbody td {
  @apply text-gray-200 border-gray-700;
}

:root.dark .absence-table tbody tr:hover {
  @apply bg-gray-700;
}

:root.dark .absence-table tbody tr:nth-child(even) {
  @apply bg-gray-750;
}

:root.dark .absence-form-control {
  @apply bg-gray-700 border-gray-600 text-gray-200 placeholder-gray-400;
}

:root.dark .absence-form-label {
  @apply text-gray-300;
}

:root.dark .absence-btn {
  @apply bg-gray-700 border-gray-600 text-gray-200 hover:bg-gray-600;
}

/* Print Styles */
@media print {
  .absence-btn,
  .absence-nav-actions,
  .absence-filter-form {
    @apply hidden;
  }
  
  .absence-table {
    @apply text-xs;
  }
  
  .absence-table thead th,
  .absence-table tbody td {
    @apply px-2 py-1;
  }
}