/* Page transition for all <main> elements */
main {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1);
}
main.loaded {
  opacity: 1;
}

/* Fade-in on scroll */
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.animate-fade-in {
  opacity: 1 !important;
  transform: none !important;
}

/* Mobile responsive page headers */
/* This targets the header sections on pages like /registrars/, /access-keys/, /audit-log/, etc. */
/* On mobile, title/description takes full width, buttons appear on next line right-aligned */
@media (max-width: 768px) {
  /* Make page headers stack vertically on mobile */
  main .flex.items-center.justify-between {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  
  /* Make title and description take full width */
  main .flex.items-center.justify-between > div:first-child {
    width: 100%;
  }
  
  /* Ensure h1 elements maintain left alignment on mobile */
  main .flex.items-center.justify-between > div:first-child h1 {
    text-align: left;
  }
  
  /* Make button container take full width and align buttons to the right */
  main .flex.items-center.justify-between > div:last-child {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  /* Ensure buttons don't wrap unnecessarily */
  main .flex.items-center.justify-between > div:last-child .inline-flex {
    flex-shrink: 0;
  }
  
  /* Handle complex header controls (like playground) */
  main .flex.items-center.justify-between > div:last-child .header-controls {
    width: 100%;
    justify-content: flex-end;
  }
  
  /* Playground-specific mobile improvements */
  .playground-header .header-controls {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
  }
  
  .playground-header .domain-info {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
  }
  
  /* Make LAK selector badge more compact on mobile */
  .playground-header #domain-count-badge {
    min-width: fit-content;
    white-space: nowrap;
    max-width: 200px;
  }
  
  /* Ensure refresh button doesn't wrap and stays visible */
  .playground-header #refresh-data-btn {
    white-space: nowrap;
    min-width: fit-content;
    flex-shrink: 0;
  }
  
  /* Improve LAK selector positioning on mobile */
  .playground-header .lak-selector {
    position: relative;
  }
  
  /* Additional playground mobile improvements */
  .playground-header .header-controls .domain-info {
    max-width: 100%;
    overflow: hidden;
  }
  
  /* Ensure proper text truncation if needed */

/* Registrar dropdown positioning and styling */
.registrar-menu {
  position: fixed !important;
  z-index: 9999 !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.75rem !important;
  background: white !important;
  min-width: 12rem !important;
}

.registrar-menu button {
  transition: background-color 0.15s ease-in-out;
}

.registrar-menu button:hover {
  background-color: #f9fafb !important;
}

.registrar-menu button:first-child {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.registrar-menu button:last-child {
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}
  .playground-header #domain-count-badge span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Better spacing for mobile layout */
  @media (max-width: 640px) {
    .playground-header .header-controls {
      gap: 0.5rem;
    }
    
    .playground-header .domain-info {
      gap: 0.25rem;
    }
    
    /* Make LAK selector badge even more compact on very small screens */
    .playground-header #domain-count-badge {
      padding: 0.25rem 0.5rem;
      font-size: 0.75rem;
      max-width: 150px;
    }
    
    .playground-header #refresh-data-btn {
      padding: 0.25rem 0.5rem;
      font-size: 0.75rem;
    }
    

  }
  
  /* Ensure LAK display name doesn't break layout */
  .playground-header #lak-display-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  @media (max-width: 640px) {
    .playground-header #lak-display-name {
      max-width: 80px;
    }
  }
  
  /* Ensure dropdown works properly on mobile */
  .playground-header .lak-selector {
    position: relative;
    z-index: 10;
  }
  
  /* Fix dropdown positioning on mobile */
  @media (max-width: 768px) {
    .playground-header #lak-dropdown {
      position: fixed;
      top: 24%;
      left: 10%;
      transform: translate(-50%, -50%);
      width: 80vw;
      max-width: 350px;
      z-index: 1000;
      margin: 0;
    }
    
    /* Ensure dropdown is visible and readable */
    .playground-header #lak-dropdown {
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      border: 1px solid #e5e7eb;
    }
    
    /* Ensure dropdown content is readable */
    .playground-header #lak-dropdown .p-3 {
      padding: 1rem;
    }
    
    .playground-header #lak-dropdown h3 {
      font-size: 0.875rem;
      font-weight: 600;
      margin-bottom: 0.25rem;
    }
    
    .playground-header #lak-dropdown p {
      font-size: 0.75rem;
      line-height: 1.4;
    }
    
    /* Improve option readability and styling */
    .playground-header #lak-options {
      max-height: 200px;
    }
    
    .playground-header #lak-options .p-3 {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid #f3f4f6;
      transition: background-color 0.2s ease;
      background-color: #ffffff !important;
      color: #374151 !important;
    }
    
    .playground-header #lak-options .p-3:hover {
      background-color: #f9fafb !important;
    }
    
    .playground-header #lak-options .p-3:last-child {
      border-bottom: none;
    }
    
    /* Style for selected option */
    .playground-header #lak-options .p-3.bg-blue-50 {
      background-color: #dbeafe !important;
      color: #1e40af !important;
    }
    
    .playground-header #lak-options .p-3.bg-blue-50:hover {
      background-color: #bfdbfe !important;
    }
  }
  
  /* Ensure refresh button is always visible */
  .playground-header .domain-info {
    position: relative;
  }
  
  .playground-header #refresh-data-btn {
    position: relative;
    z-index: 5;
  }
}

/* Registrar Tester Styles */
.nerve-tester-container {
    max-width: 800px;
}

.nerve-tester-section {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nerve-tester-section h2 {
    margin-top: 0;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.nerve-tester-section select,
.nerve-tester-section input {
    width: 100%;
    max-width: 400px;
    margin-bottom: 10px;
}

.nerve-tester-section .description {
    color: #666;
    font-style: italic;
    margin-top: 5px;
}

#json-results {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#test-status .notice {
    margin: 10px 0;
    padding: 10px 15px;
    border-radius: 4px;
}

#test-status .notice-info {
    background: #e7f3ff;
    border-left: 4px solid #0073aa;
    color: #0073aa;
}

#test-status .notice-success {
    background: #dff0d8;
    border-left: 4px solid #5cb85c;
    color: #3c763d;
}

#test-status .notice-error {
    background: #f2dede;
    border-left: 4px solid #d9534f;
    color: #a94442;
}

/* Documentation Links Styles */
.doc-links-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.doc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    text-decoration: none;
    color: #495057;
    font-size: 14px;
    transition: all 0.2s ease;
}

.doc-link:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    color: #212529;
    text-decoration: none;
}

.doc-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.doc-link.external {
    background: #e3f2fd;
    border-color: #2196f3;
    color: #1976d2;
}

.doc-link.external:hover {
    background: #bbdefb;
    border-color: #1976d2;
    color: #0d47a1;
}