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

/*

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

*/
/* Data Table Sorting Styles */
.sortable-table th[data-sortable="true"] {
  position: relative;
  cursor: pointer;
  user-select: none;
  padding-right: 2rem;
}

.sortable-table th[data-sortable="true"]:hover {
  background-color: #f9fafb;
}

.sort-indicator {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  transition: color 0.2s ease;
}

.sortable-table th[data-sortable="true"]:hover .sort-indicator {
  color: #4f46e5 !important;
}

/* Ensure proper spacing for sortable headers */
.sortable-table th[data-sortable="true"] .sort-indicator svg {
  width: 1rem;
  height: 1rem;
}
/* Logged Time Table Styles */
/* Sticky column functionality for horizontal scrolling tables */

.logged-time-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.logged-time-table th:first-child,
.logged-time-table td:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 10 !important;
  min-width: 300px !important; /* Ensure enough space for indentation */
}

.logged-time-table thead th:first-child {
  z-index: 20 !important;
}

/* Light mode sticky column backgrounds */
.logged-time-table thead th:first-child {
  background-color: rgb(249 250 251) !important; /* bg-gray-50 */
}

.logged-time-table tbody tr:nth-child(odd) td:first-child {
  background-color: rgb(255 255 255) !important; /* bg-white */
}

.logged-time-table tbody tr:nth-child(even) td:first-child,
.logged-time-table tbody tr.bg-gray-50 td:first-child {
  background-color: rgb(249 250 251) !important; /* bg-gray-50 */
}

/* Dark mode sticky column backgrounds */
.dark .logged-time-table thead th:first-child {
  background-color: rgb(31 41 55) !important; /* dark:bg-gray-800 */
}

.dark .logged-time-table tbody tr:nth-child(odd) td:first-child {
  background-color: rgb(17 24 39) !important; /* dark:bg-gray-900 */
}

.dark .logged-time-table tbody tr:nth-child(even) td:first-child,
.dark .logged-time-table tbody tr.bg-gray-50 td:first-child {
  background-color: rgb(31 41 55) !important; /* dark:bg-gray-800 */
}

/* Hover states for sticky column */
.logged-time-table tbody tr:hover td:first-child {
  background-color: rgb(249 250 251) !important; /* hover:bg-gray-50 */
}

.dark .logged-time-table tbody tr:hover td:first-child {
  background-color: rgb(31 41 55) !important; /* dark:hover:bg-gray-800 */
}

/* Hierarchical indentation handled by Tailwind utility classes in HTML */
/*
 * 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.
 *


 */