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

@layer components {
  /* Responsive key name truncation */
  .key-name {
    max-width: 20rem; /* ~320px, ~45 chars on mobile */
    min-width: 0; /* Allow shrinking in flex container */
  }
  
  @media (min-width: 640px) {
    .key-name {
      max-width: 25rem; /* ~400px, ~60 chars on small tablets */
    }
  }
  
  @media (min-width: 768px) {
    .key-name {
      max-width: 30rem; /* ~480px, ~70 chars on tablets */
    }
  }
  
  @media (min-width: 1024px) {
    .key-name {
      max-width: 40rem; /* ~640px, ~90 chars on desktop */
    }
  }
  
  @media (min-width: 1280px) {
    .key-name {
      max-width: 50rem; /* ~800px, ~115 chars on large desktop */
    }
  }

  /* Responsive metadata truncation */
  .metadata-text {
    max-width: 6rem; /* ~96px, ~12 chars on mobile */
    min-width: 0; /* Allow shrinking in flex container */
  }
  
  @media (min-width: 640px) {
    .metadata-text {
      max-width: 8rem; /* ~128px, ~16 chars on small tablets */
    }
  }
  
  @media (min-width: 768px) {
    .metadata-text {
      max-width: 12rem; /* ~192px, ~24 chars on tablets */
    }
  }
  
  @media (min-width: 1024px) {
    .metadata-text {
      max-width: 16rem; /* ~256px, ~32 chars on desktop */
    }
  }
  
  @media (min-width: 1280px) {
    .metadata-text {
      max-width: 20rem; /* ~320px, ~40 chars on large desktop */
    }
  }

  /* Ensure truncate class works properly in flex containers */
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.flash-message {
  @apply mb-4 p-4 text-sm rounded-lg;
}

.flash-message.notice {
  @apply bg-blue-100 text-blue-700;
}

.flash-message.alert {
  @apply bg-red-100 text-red-700;
}

.flash-message.warning {
  @apply bg-yellow-100 text-yellow-700;
}

.flash-message.success {
  @apply bg-green-100 text-green-700;
}