.link-button {
  background: none; /* Remove default button background */
  border: none; /* Remove default button border */
  padding: 0; /* Remove default button padding */
  font: inherit; /* Inherit font from parent, buttons use OS-specific fonts by default */
  text-decoration: underline; /* Add link underline */
  cursor: pointer; /* Ensure pointer cursor on hover */
  color: blue; /* Default link color */
  display: inline; /* Display inline with text flow */
}
/* Initial state when the element is added to the DOM */
.fade-me-in {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease-out;
}

/* State after HTMX "settles" */
.htmx-settling .fade-me-in {
    opacity: 0;
}

/* Final visible state */
.fade-me-in {
    opacity: 1;
    transform: translateY(0);
}

/* State when the element is being swapped out (Closing) */
.htmx-swapping {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease-in;
}

.htmx-request {
    opacity: 0.5;
    transition: opacity 200ms ease-in;
    pointer-events: none; /* Prevent double-clicks */
}

/* Make the table look integrated rather than overlayed */
#transaction-container {
    border: 1px solid rgba(89, 150, 105, 0.3); /* Subtle green border from your primary color */
    background: #1a1d21 !important; /* Match your sidebar/background */
}

.table.is-hoverable tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.table th {
    border-color: #363636 !important;
    letter-spacing: 0.1em;
}

.border-green {
    border: 1px solid #599669 !important;
}

/* htmx Loading State Indicators */
.htmx-request .table-container {
    filter: blur(2px);
    transition: filter 0.2s ease;
}

// note: alternating row colors
.transaction-list .columns:nth-child(even) {
    background-color: rgba(255, 255, 25, 0.03); /* Very subtle white tint for dark mode */
}
.transaction-list .columns:hover {
    background-color: rgba(89, 150, 105, 0.1) !important; /* Subtle green tint on hover */
    transition: background-color 0.2s ease;
}
.transaction-list .columns:first-child {
    border-top: 1px solid rgba(255, 25, 255, 0.1);
}

.transaction-list .has-text-success {
    position: relative;
}
.transaction-list .columns:has(.has-text-success) {
    border-left: 3px solid #48c78e;
}

/* full width */
#transaction-container {
    width: 100% !important;
    min-width: 100%;
    grid-column: 1 / -1;
    max-width: none !important;
}

@media screen and (max-width: 768px) {
    /* Prevent scientific notation from breaking layout */
    .transaction-list p {
        word-break: break-all;
        line-height: 1.2;
    }

    /* Add more breathing room between rows on mobile */
    .transaction-list .columns {
        margin-bottom: 0.5rem !important;
        background: rgba(255, 255, 255, 0.02);
        border-radius: 8px;
    }

    /* Scale down the "Jump to Date" text or hide it for an icon */
    .button.is-small span:not(.icon) {
        display: none; /* Only show icon on very small screens */
    }
}