/* purgecss start ignore */
/* Your Trix mention styles here */
/* purgecss end ignore */

.lightbox-image {
    width: 100px;
    height: 100px;
    display: inline-block;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.lightbox-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lightbox-image:hover {
    transform: scale(1.05);
}
/* Reset figure margins and display */
figure[data-trix-content-type="application/vnd.trix.mention"] {
    margin: 0;
    display: inline;
  }
  
  /* Style the mention link */
  figure[data-trix-content-type="application/vnd.trix.mention"] a {
    display: inline;
    text-decoration: none;
    background-color: #e6f3ff; /* Light blue background */
    border-radius: 3px;
    padding: 2px 4px;
    color: #0366d6; /* GitHub-like mention color */
  }
  
  /* Remove extra space from figcaption */
  figure[data-trix-content-type="application/vnd.trix.mention"] figcaption {
    display: none;
  }
  
  /* Ensure inline display for the span inside the link */
  figure[data-trix-content-type="application/vnd.trix.mention"] a span {
    display: inline;
  }
  
  /* Optional: Add a subtle hover effect */
  figure[data-trix-content-type="application/vnd.trix.mention"] a:hover {
    background-color: #cce4ff;
  }

/* Make Filament table wider */
.fi-ta-table {
    width: 100% !important;
    max-width: none !important;
}

.fi-ta-content {
    overflow-x: auto;
}

/* Make table columns more spacious */
.fi-ta-table th,
.fi-ta-table td {
    white-space: nowrap;
    padding: 12px 16px !important;
}

/* Ensure the main content area is wider */
.fi-main-content {
    max-width: none !important;
}

/* Remove all container max-widths to use full screen width */
.fi-main,
.fi-page,
.fi-container,
.fi-section-content,
.fi-ta,
.fi-ta-ctn {
    max-width: none !important;
    width: 100% !important;
}

/* Make the entire page content full width */
.fi-layout {
    max-width: none !important;
}

/* Ensure tables take full container width */
.fi-ta-table-container {
    width: 100% !important;
}