:root {
    --green-color: #5e9f5c; /* Darker muted green */
    --dark-green: #185642; /* Darker muted green */
      --dark-green-hover: #124434; /* Slightly darker shade for hover */
    --green-hover: #4f8a4d; /* Even deeper muted green for hover */
}


.btn {
    margin: 8px 4px 8px 0;
}

/* Base button: structure only, no effects */
.btn-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    background-color: transparent;
        white-space: normal;
    color: inherit;
    cursor: pointer;
    gap: 4px;
    margin: 4px 4px 4px 0;

    /* No effects */
    transition: none;
    box-shadow: none;
    outline: none;
}

/* Large Button Variant */
.btn-base.btn-lg {
    width: calc(100% - 1rem); /* Full width minus horizontal margin */
    margin: 0 0.5rem;          /* 0.5rem = 8px margin left and right */
}


.btn-disabled {
    cursor: not-allowed !important;
    opacity: 0.4 !important; /* Less faded */
    pointer-events: none !important;
    filter: grayscale(30%); /* More color retained */
    text-decoration: none;
}


.btn-entity-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid var(--dark-green);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    background-color: transparent;
    color: var(--dark-green);
    white-space: normal;
    cursor: pointer;
    gap: 4px;
    margin: 6px 8px 6px 0; /* More horizontal and vertical spacing */

    /* Remove all transitions */
    transition: none;
    box-shadow: none;
    outline: none;
}


.btn-transparent {
    padding: 0.412rem 0.588rem;  /* Matches your inline padding */
    background-color: rgba(255, 255, 255, 0.2); /* Transparent white */
    border-radius: 5px;  /* Rounded corners */
    color: white;  /* White text */
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s, opacity 0.2s; /* Smooth transition */
    border: none; /* Remove default button border */
}

.btn-transparent:hover {
    background-color: rgba(255, 255, 255, 0.4); /* Slightly more visible on hover */
    color: white;  /* Keep text white */
}

.btn-transparent.btn-sm {
    padding: 0.25rem 0.5rem; /* Smaller padding for `btn-sm` */
    font-size: 0.875rem; /* Adjust font size */
}


/* Pill-Shaped Button */
.btn-rounded {
    border-radius: 999rem !important; /* Ensures the button is pill-shaped */
    padding: 0.5rem 1.5rem !important; /* Bootstrap-style padding */
    transition: all 0.2s ease-in-out;
}

/* Small Pill Button */
.btn-rounded.btn-sm {
    padding: 0.25rem 1rem; /* Adjusted padding for small buttons */
    font-size: 0.875rem; /* Matches Bootstrap's btn-sm font size */
}

/* Hover Effect (Optional) */
.btn-rounded:hover {
    opacity: 0.8;
}

/* Custom Green Button */
.btn-green {
    padding: 0.412rem 0.588rem;  /* Matches your inline padding */
    background-color: var(--dark-green); /* Use root variable */
    border-radius: 5px;  /* Rounded corners */
    color: white;  /* White text */
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s, opacity 0.2s; /* Smooth transition */
    border: none; /* Remove default button border */
}

/* Hover Effect */
.btn-green:hover {
    background-color: var(--dark-green-hover); /* Darker green on hover */
    color: white;  /* Keep text white */
}

/* Small Button Variant */
.btn-green.btn-sm {
    padding: 0.25rem 0.5rem; /* Smaller padding for `btn-sm` */
    font-size: 0.875rem; /* Adjust font size */
}




/* Custom Outline Green Button */
.btn-outline-green {
    background-color: transparent; /* Transparent background */
    border: 1px solid var(--dark-green); /* Green border */
    color: var(--dark-green);  /* Green text */
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s, opacity 0.2s; /* Smooth transition */
    font-weight: 500;
font-size: 14px;
}

/*!* Hover Effect *!*/
/*.btn-outline-green:hover {*/
/*    background-color: var(--green-color); !* Green background on hover *!*/
/*    color: white;  !* White text *!*/
/*    border-color: var(--green-hover); !* Slightly darker green border *!*/
/*}*/

/*!* Active/Focus Effect *!*/
/*.btn-outline-green:focus,*/
/*.btn-outline-green:active {*/
/*    background-color: var(--green-hover); !* Darker green *!*/
/*    color: white;*/
/*    border-color: var(--green-hover); !* Keep consistent border *!*/
/*    outline: none; !* Remove default focus outline *!*/
/*    box-shadow: 0 0 0 3px rgba(106, 191, 105, 0.4); !* Subtle glow *!*/
/*}*/

/* Disabled State */
.btn-outline-green:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Small Button Variant */
.btn-outline-green.btn-sm {
    padding: 0.25rem 0.5rem; /* Smaller padding for `btn-sm` */
    font-size: 0.875rem; /* Adjust font size */
}




/* Background Green Class */
.bg-green {
    background-color: var(--green-color) !important; /* Apply the green background */
    color: white; /* Ensure text is visible */
}




    .btn2 {
      border: 1px solid #ddd;
      background-color: white;
      color: black;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 6px;
      padding: 4px 8px; /* btn-sm sizing */
      text-decoration: none;
      font-weight: 400;
      font-size: 0.875rem; /* btn-sm font size */
      line-height: 1.5;
    }

    .btn2 i {
      font-size: 0.875rem;
    }