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

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.overflow-y-hidden {
  overflow-y: hidden;
}


/* Enhanced focus indicators for accessibility */
@layer utilities {
  .focus-visible-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
  }
  
  .focus-visible-ring-inset {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset;
  }
}

/* Ensure all interactive elements have visible focus */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-800;
}

/* Special focus styles for tabs */
.tab:focus-visible {
  @apply outline-none ring-2 ring-blue-500 ring-inset;
}

/* Focus styles for table sortable headers */
th.sortable:focus-visible {
  @apply outline-none ring-2 ring-blue-500 ring-inset;
}

.subtle-stripes-light {
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.025) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.025) 50%, rgba(0, 0, 0, 0.025) 75%, transparent 75%, transparent);
  background-size: 10px 10px;
}

.subtle-stripes-dark {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.02) 75%, transparent 75%, transparent);
  background-size: 10px 10px; /* Explicitly set for dark mode too */
}

/* Dynamic column widths for responsive tables */
:root {
  --name-col-width: 150px;
  --uptime-col-width: 80px;
  --pbs-name-col-width: 120px;
  --pbs-path-col-width: 150px;
  --backup-name-col-width: 150px;
  --backup-node-col-width: 80px;
  --backup-pbs-col-width: 100px;
  --backup-ds-col-width: 100px;
  --storage-name-col-width: 150px;
  --storage-type-col-width: 80px;
}

/* Make sticky name column respond to row hover - use opaque colors */
tr:hover td.sticky {
  @apply bg-gray-50 dark:bg-gray-700 !important;
}

/* Spin animation for loading indicators */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .pulse-logo-circle {
    animation: none !important;
  }
  
  .animate-spin {
    animation: none !important;
  }
  
  .transition-all,
  .transition-colors,
  .transition-opacity {
    transition: none !important;
  }
}