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

@layer components {

  /* Preview text should visually match expanded content sizing */
  .log-preview-text {
    font-size: 0.8rem !important;
    line-height: 1 !important;
  }

  /* Log entry expanded state - remove ALL spacing between tags */
  .log-entry.expanded .log-message {
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    /* Remove whitespace between inline elements */
  }

  .log-entry.expanded .log-message>div {
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* For non-tagged content, restore normal formatting and remove indentation */
  .log-entry.expanded .log-message>div:not(.tag-section):not(.tag-header):not(.tag-content):not(.tag-footer) {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: 0 !important;
    padding-left: 0 !important;
  }

  /* Ensure the main content div for non-tagged logs has proper formatting */
  .log-entry.expanded .log-message>div.text-sm {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: 0 !important;
    padding-left: 0 !important;
    white-space: pre-wrap !important;
  }

  /* Override any inherited indentation from parent elements */
  .log-entry.expanded .log-message>div.text-sm.font-mono {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    white-space: pre-wrap !important;
  }

  /* Remove ALL spacing between tag sections in expanded view */
  .log-entry.expanded .tag-section {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    display: block !important;
  }

  .log-entry.expanded .tag-header,
  .log-entry.expanded .tag-footer {
    margin: 0 !important;
    padding: 4px 0 !important;
    line-height: 1 !important;
    display: block !important;
    font-size: 0.8rem !important;
  }

  .log-entry.expanded .tag-content {
    margin: 0 !important;
    padding: 4px 0 !important;
    /* Small vertical gap between lines */
    line-height: 1 !important;
    display: block !important;
    font-size: 0.8rem !important;
  }

  /* Ensure no spacing between consecutive elements */
  .log-entry.expanded .tag-section+.tag-section,
  .log-entry.expanded .tag-header+.tag-content,
  .log-entry.expanded .tag-content+.tag-footer,
  .log-entry.expanded .tag-footer+.tag-section {
    margin-top: 0 !important;
  }

  /* Remove any default div spacing */
  .log-entry.expanded div {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Expand icon animation */
  .expand-icon.expanded {
    @apply rotate-90;
  }

  /* Allow text selection while keeping cursor pointer */
  .log-entry {
    user-select: text; /* Allow text selection */
  }

  /* Make text areas more obviously selectable */
  .log-preview-text,
  .log-message,
  .log-content {
    user-select: text;
  }

  /* Visual feedback when text is being selected */
  .log-entry ::selection {
    background-color: #3b82f6;
    color: white;
  }

  .log-entry ::-moz-selection {
    background-color: #3b82f6;
    color: white;
  }

  /* Syntax highlighting - legacy classes */
  .json-key {
    @apply text-blue-600 font-medium;
  }

  .string {
    @apply text-green-700;
  }

  .number {
    @apply text-blue-700;
  }

  .boolean {
    @apply text-red-600;
  }

  /* JSON syntax highlighting - new colorized classes */
  .json-formatted {
    @apply font-mono;
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .json-formatted .json-key {
    @apply text-purple-600 font-semibold;
  }

  .json-formatted .json-string {
    @apply text-green-600;
  }

  .json-formatted .json-number {
    @apply text-blue-600 font-medium;
  }

  .json-formatted .json-boolean {
    @apply text-orange-600 font-medium;
  }

  .json-formatted .json-bracket {
    @apply text-gray-500 font-bold;
  }

  /* Tag section styles for XML/tag content */
  .tag-section {
    @apply my-0;
  }

  .tag-section .tag-header,
  .tag-section .tag-footer {
    @apply font-mono select-text;
    font-size: 0.8rem !important;
  }

  .tag-section .tag-content {
    @apply pl-2;
  }

  /* Nested JSON inside tags should have proper formatting */
  .tag-content .json-formatted {
    @apply bg-gray-50 rounded p-1 my-0;
  }

  mark {
    @apply bg-yellow-200 px-0.5;
  }

  /* Agent legend disabled state */
  .agent-legend-item.inactive {
    @apply opacity-50;
  }

  .agent-legend-item.inactive .agent-status-indicator {
    @apply bg-gray-400;
  }

  .agent-legend-item:not(.inactive) .agent-status-indicator {
    @apply bg-green-400;
  }

  /* Pagination styling - override Bootstrap defaults */
  .pagination {
    @apply flex items-center -space-x-px;
  }

  .pagination .page-link {
    @apply relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500;
  }

  .pagination .page-item:first-child .page-link {
    @apply rounded-l-md;
  }

  .pagination .page-item:last-child .page-link {
    @apply rounded-r-md;
  }

  .pagination .page-item.active .page-link {
    @apply z-10 bg-indigo-50 border-indigo-500 text-indigo-600;
  }

  .pagination .page-item.disabled .page-link {
    @apply text-gray-400 cursor-not-allowed bg-gray-50;
  }

  .pagination .page-item.disabled .page-link:hover {
    @apply bg-gray-50;
  }

  /* Target highlighting for anchor navigation */
  .log-entry:target,
  .workflow-section-header:target {
    animation: target-highlight 2s ease-out;
  }

  @keyframes target-highlight {
    0% {
      background-color: #fef3c7; /* yellow-100 */
    }
    100% {
      background-color: transparent;
    }
  }

  /* Subworkflow sidebar inactive state */
  .subworkflow-legend-item.inactive {
    @apply opacity-40;
  }
}