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

@layer components {
  /* Base page styles */
  .page {
    p {
      @apply my-2;
    }
  }

  footer {
    @apply mt-3 text-center text-slate-500;
  }

  footer, .page {
    a {
      @apply text-blue-500 underline underline-offset-2 hover:no-underline;
    }

    p {
      @apply md:leading-6 text-sm;
    }
  }

  /* Primary button styles */
  .btn-primary {
    @apply my-2 font-bold py-2 px-4 rounded-md inline-block cursor-pointer btn-primary-bg;
  }

  .btn-primary-bg {
    @apply bg-gradient-to-r from-blue-600 to-indigo-600 hover:bg-gradient-to-r hover:from-blue-700 hover:to-indigo-700 text-white;
  }

  .btn-danger {
    @apply my-2 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-md inline-block;
  }

  /* Header button styles */
  .header-button {
    @apply text-blue-600 inline-block font-bold border-b-2 border-transparent hover:border-blue-600 py-1 text-lg;
  }

  .header-button-active {
    @apply font-bold inline-block border-b-2 border-blue-600 py-1 text-lg;
  }

  .header-menu-text {
    @apply hidden md:inline;
  }

  /* Button size variants */
  .btn-xs-resp {
    @apply my-1 text-xs py-1 px-2 md:text-sm rounded;
  }

  .btn-xs {
    @apply my-1 text-xs py-1 px-2 rounded;
  }

  .btn-sm {
    @apply py-1.5 px-3 text-sm;
  }

  .btn-md {
    @apply py-2 px-4 text-base;
  }

  .btn-lg {
    @apply py-3 px-6 text-lg;
  }

  /* Main page content area */
  #main-page-content {
    a {
      @apply text-blue-500 underline underline-offset-2 hover:no-underline;
    }

    h2 {
      @apply text-3xl font-extrabold mt-8 mb-2;
    }
  }

  /* Date filter component */
  .date-filter {
    @apply rounded-md flex flex-wrap justify-center w-full;

    a {
      @apply px-4 py-2 text-sm font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 w-auto;
    }

    .active {
      @apply text-blue-700 bg-gray-100;
    }

    .first {
      @apply border-gray-200 rounded-s-lg border-l border-t border-b;
    }

    .last {
      @apply border border-gray-200 rounded-e-lg;
    }

    .middle {
      @apply border-l border-t border-b border-gray-200;
    }
  }

  /* News page styles */
  #news-page {
    p {
      @apply mb-2 text-base/6;
    }

    .date {
      @apply text-xs text-gray-500;
    }
  }

  /* Card component variants */
  .card {
    @apply bg-white rounded-xl overflow-hidden shadow;
  }
  
  .card-small {
    @apply bg-white rounded-xl shadow transition duration-200 md:hover:translate-y-[-4px] hover:shadow-lg;
  }

  .card-hover {
    @apply card transition duration-200 md:hover:translate-y-[-4px] hover:shadow-lg;
  }

  .card-flat {
    @apply bg-white rounded-xl border border-gray-200;
  }

  /* Action buttons container */
  .action-buttons {
    .action-button {
      @apply py-2 border rounded-md font-medium cursor-pointer transition duration-200 text-sm w-full block text-center;
    }
  }

  /* Card layout elements */
  .card-header-image {
    @apply h-64 lg:h-80 overflow-hidden bg-gray-200;
  }

  .card-content {
    @apply px-1 md:px-6 py-6;
  }

  /* Stat display styles */
  .stat-value {
    @apply text-2xl font-bold text-blue-600;
  }

  .stat-label {
    @apply text-xs text-gray-500;
  }

  /* Grid Layout Components */
  .grid-responsive {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-5;
  }

  .grid-responsive-4 {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-5;
  }

  .grid-responsive-2 {
    @apply grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-5;
  }

  /* Responsive Container */
  .container-responsive {
    @apply mx-auto md:w-11/12 px-1 pb-2 lg:w-9/12 m-1 md:mt-2 max-w-6xl;
  }

  /* Responsive Spacing Utilities */
  .spacing-section {
    @apply mb-6;
  }

  .spacing-element {
    @apply mb-4;
  }

  /* Action button variants */
  .action-button {
    @apply my-2 px-4 py-2 border rounded-md font-medium cursor-pointer transition duration-200 w-full sm:w-auto inline-block text-center;
  }

  .action-button:disabled {
    @apply text-gray-400 bg-gray-200 border-gray-200 cursor-not-allowed;
    background-image: none !important;
  }

  .primary-action {
    @apply text-white btn-primary-bg border-blue-600;
  }

  .ai-action {
    @apply bg-gradient-to-r from-purple-600 to-fuchsia-600 hover:from-purple-700 hover:to-fuchsia-700 text-white;
  }

  .disabled-action{
    @apply text-gray-400 bg-gray-200 border-gray-200 cursor-not-allowed;
  }

  .secondary-action {
    @apply bg-white text-blue-600 border-blue-600 hover:bg-blue-50;
  }

  /* Tab navigation */
  .tab-container {
    @apply px-6 py-4 border-b border-gray-200;
  }

  .tab-menu {
    @apply flex gap-x-4 md:gap-x-6 text-lg font-medium;
  }

  .tab {
    @apply text-gray-500 hover:text-gray-700 pb-2;
  }

  .tab-active {
    @apply text-blue-600 border-b-2 border-blue-600 pb-2;
  }

  .tab-active-fuchsia {
    @apply text-fuchsia-600 border-b-2 border-fuchsia-600 pb-2;
  }

  /* Dropdown menu styles */
  .dropdown-menu {
    @apply absolute bg-white mt-2 rounded-md shadow-lg border border-gray-200 p-2 z-10 right-0;
  }

  .dropdown-item {
    @apply px-3 py-1.5 rounded text-sm whitespace-nowrap text-left;
  }

  .dropdown-item-primary {
    @apply text-blue-600 hover:bg-blue-50;
  }

  .dropdown-item-danger {
    @apply text-red-600 hover:bg-red-50;
  }

  /* Hide collapsible details marker */
  details summary::-webkit-details-marker {
    display: none;
  }
  details summary {
    outline: none;
    list-style: none;
  }

  /* Accuracy log table styles */
  .accuracy-chart {
    @apply mb-6 rounded-lg overflow-hidden;
  }

  .accuracy-summary {
    @apply my-6 px-1 md:px-4 py-2 md:py-4 rounded-lg bg-blue-50 text-center text-base md:text-lg;
  }

  .accuracy-table {
    @apply w-full rounded-lg overflow-hidden border border-gray-200;
  }

  .accuracy-table-header {
    @apply bg-gray-50 text-left;
  }

  .accuracy-table-header th {
    @apply py-3 px-2 md:px-3 text-sm font-medium text-gray-500;
  }

  .accuracy-table-row {
    @apply border-t border-gray-200 hover:bg-gray-50 transition;
  }

  .accuracy-table-row td {
    @apply pt-3 pb-3 px-2 md:px-4 text-sm;
  }

  .accuracy-table-row.with-note td {
    @apply px-2 md:px-3 text-sm;
  }

  .accuracy-table-row.baseline {
    @apply bg-blue-50;
  }

  .accuracy-note {
    @apply text-sm text-gray-600 pr-1 md:pr-3 pl-2 md:pl-6 pb-2;
  }

  .baseline-divider {
    @apply w-48 h-0.5 mx-auto my-4 md:my-6 bg-blue-200 rounded-full;
  }

  .baseline-summary {
    @apply py-4 text-center text-sm md:text-base italic text-gray-600;
  }

  /* Content card styles */
  .content-card {
    @apply bg-white rounded-xl shadow overflow-hidden mb-3 md:mb-6;
  }

  .content-header {
    @apply border-b border-gray-200 px-4 py-3 md:p-6;
  }

  .help-icon {
    @apply font-extrabold text-blue-600 text-2xl;
  }

  .content-header h1, h2 {
    @apply text-3xl font-bold text-gray-800
  }

  .content-body {
    @apply p-2 md:p-6;

    p {
      a {
        @apply text-blue-500 underline underline-offset-2 hover:no-underline;
      }
    }
  }

  /* Content sections */
  .content-section {
    @apply mb-8 last:mb-0;

    h2 {
      @apply text-2xl font-bold text-gray-800 mb-1;
    }
  }

  .content-title {
    @apply text-2xl font-bold text-gray-800 mb-1;
  }

  .content-subtitle {
    @apply text-xl font-bold text-gray-800 mb-4 mt-8;
  }

  .content-date {
    @apply text-xs text-gray-500 mb-4;
  }

  #news .content-section > p {
    @apply text-gray-700 mb-4 leading-relaxed;
  }

  .ai-description-bubble {
    @apply bg-fuchsia-50 p-4 rounded-lg border border-fuchsia-200;
  }

  #news .content-section > img {
    @apply w-full md:w-2/3 mx-auto my-2;
  }

  .alert-component a:not(.action-button) {
    @apply underline hover:no-underline;
  }

  /* Collapsible component styles */
  .collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
    opacity: 0;
  }
  
  .collapsible-content.open {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0.3s ease-in, opacity 0.2s ease-in;
  }
}

/* Fix image display in ActionText */
.trix-content .attachment--preview {
  @apply my-6 mx-auto text-center;
}

.trix-content .attachment--preview img {
  @apply max-w-full h-auto rounded inline-block;
}

/* Fix figcaption in ActionText */
.trix-content figcaption {
  @apply text-sm text-gray-600 text-center mt-2;
}

.tooltip {
  @apply absolute z-50 whitespace-normal break-words rounded-lg bg-white py-1.5 px-3 text-sm font-normal text-gray-600 focus:outline-none shadow;
  display: none;
}

.tooltip[data-show] {
  display: block;
}

/* AI Insight animations */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

.fade-out {
  animation: fadeOut 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

/* PWA Install notification animations */
.notification-enter {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Ensure PWA notification appears above everything */
[data-pwa-install-target="notification"] {
  z-index: 9999 !important;
}

/* Hide PWA notification on desktop screens */
@media (min-width: 1025px) {
  [data-pwa-install-target="notification"] {
    display: none !important;
  }
}