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

@layer components {
  body {
    @apply bg-gray-100 text-neutral-600 font-['Open_Sans',_Helvetica,_sans-serif] font-light m-4 mt-2 py-0.5 mb-4 min-h-screen;
    font-family: "Libre Franklin", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

  strong {
    @apply font-bold;
  }

  table {
    @apply border-collapse mb-5 w-full text-sm;
  }

  th {
    @apply bg-gray-100 hover:bg-gray-200 border border-gray-200 whitespace-nowrap font-semibold py-1 px-2 text-left cursor-pointer;
  }

  td {
    @apply bg-white py-2 px-2 text-left border border-gray-200;
  }

  button {
    @apply bg-slate-900 py-2 md:py-1 px-2 text-sm font-medium text-white rounded md:mr-2 min-w-[65px];

    &.active {
      @apply font-bold;
    }

    &.frameless {
      @apply bg-transparent text-[13px] text-blue p-0 m-0 border-none min-w-0;
    }
  }

  th.sort-asc::after,
  th.sort-desc::after {
    content: "⌃";
    @apply inline-block relative transform transition-transform duration-200 mx-0.5;
  }

  th.sort-asc::after {
    @apply rotate-[0deg] top-[2px];
  }

  th.sort-desc::after {
    @apply rotate-[-180deg] -top-px;
  }

  tbody td {
    background-color: #fff;
  }

  a {
    @apply text-blue underline font-semibold;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-bold mb-2;
  }

  h2, h3 {
    @apply mt-6;
  }

  h1 {
    @apply text-2xl;
  }

  h2 {
    @apply text-xl;
  }

  h4, h5, h6 {
    @apply mt-4;
  }

  h1 {
    @apply text-2xl;
  }

  p {
    @apply mb-2;
  }

  .radio-group {
    @apply flex flex-col;

    label {
      @apply flex items-center gap-2 cursor-pointer;

      &:hover {
        @apply bg-gray-100;
      }
    }

    input[type="radio"] {
      @apply m-0;

      &:checked + span {
        @apply font-bold;
      }
    }
  }
  .lucide-icon {
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
  }

  select {
    @apply border border-gray-300 p-1 rounded-sm;
  }

  .prose {
    li {
      p {
       @apply !my-0; 
      }
    }
  }

  /* Menu collapse/expand styles */
  header#site-header {
    @apply md:fixed flex flex-col bg-navy md:overflow-auto md:mx-auto p-2 md:p-0 text-white left-4 top-4 transition-all duration-300 md:rounded-lg md:w-[300px] max-h-[calc(100vh-2rem)] bottom-4;
  }
  
  header#site-header.collapsed {
    @apply md:w-8 max-h-36 md:rounded !bottom-auto;
  }
  
  /* Main content margin adjustment */
  body > div#main-content {
    @apply transition-all duration-300;
  }
  
  body > div#main-content.menu-collapsed {
    @apply md:ml-10;
  }

  body > div#main-content.menu-expanded {
    @apply md:ml-[316px] xl:ml-[326px];
  }
}

.tooltip {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
  max-width: 200px;
  opacity: 0;
  transition: opacity 0.2s;
}

.tooltip.visible {
  opacity: 1;
}

.legend-item {
  @apply flex border items-center text-[13px] hover:!border-black font-medium rounded-sm px-1.5 py-0.5 text-white cursor-pointer opacity-100;
}

.legend-FAMILY:not(.disabled) { @apply border-[#E11D48] bg-[#E11D48] }
.legend-FAMILY.disabled { @apply border-[#E11D48] text-[#E11D48] }

.legend-WORK:not(.disabled) { @apply border-[#2563EB] bg-[#2563EB] }
.legend-WORK.disabled { @apply border-[#2563EB] text-[#2563EB] }

.legend-POLITICAL:not(.disabled) { @apply border-[#9333EA] bg-[#9333EA] }
.legend-POLITICAL.disabled { @apply border-[#9333EA] text-[#9333EA] }

.legend-LEGAL:not(.disabled) { @apply border-[#7C3AED] bg-[#7C3AED] }
.legend-LEGAL.disabled { @apply border-[#7C3AED] text-[#7C3AED] }

.legend-MEDIA:not(.disabled) { @apply border-[#EA580C] bg-[#EA580C] }
.legend-MEDIA.disabled { @apply border-[#EA580C] text-[#EA580C] }

.legend-EDUCATION:not(.disabled) { @apply border-[#4ADE80] bg-[#4ADE80] }
.legend-EDUCATION.disabled { @apply border-[#4ADE80] text-[#4ADE80] }

.legend-HISTORICAL:not(.disabled) { @apply border-[#D97706] bg-[#D97706] }
.legend-HISTORICAL.disabled { @apply border-[#D97706] text-[#D97706] }

.legend-SOCIAL:not(.disabled) { @apply border-[#14B8A6] bg-[#14B8A6] }
.legend-SOCIAL.disabled { @apply border-[#14B8A6] text-[#14B8A6] }

.legend-OTHER:not(.disabled) { @apply border-[#6B7280] bg-[#6B7280] }
.legend-OTHER.disabled { @apply border-[#6B7280] text-[#6B7280] }

.legend-UNKNOWN:not(.disabled) { @apply border-[#6B7280] bg-[#6B7280] }
.legend-UNKNOWN.disabled { @apply border-[#6B7280] text-[#6B7280] }