/*  btn-primary Defaults */
.btn-primary {
    color: white !important;
    background-color: #40996d !important; /* bg-green-dark */
    border-color: #414042 !important; /* gray-darker */
}

    .btn-primary:focus,
    .btn-primary:hover {
        color: white !important;
        background-color: #265039 !important; /* bg-green-darker */
        border-color: #7d7e81 !important; /* gray */
    }

/*  btn-success Defaults */
.btn-success {
    color: white !important;
    border-color: darkgray !important;
    background-color: #4DAF7C !important;
}

    .btn-success:focus,
    .btn-success:hover {
        color: white !important;
        border-color: darkgray !important;
        background-color: green !important;
    }

/*  btn-add Defaults */
.btn-add {
    color: #424143 !important; /* almost black */
    border-color: darkgray;
    background-color: lightgreen;
}

    .btn-add:focus,
    .btn-add:hover {
        color: white;
        border-color: darkgray;
        background-color: green;
    }

/*  btn-delete Defaults */
.btn-delete {
    border-color: transparent;
    background-color: transparent;
    color: darkred;
    font-size: 0.9em;
}

    .btn-delete:focus,
    .btn-delete:hover {
        border-color: transparent;
        color: darkred;
        background-color: lightpink;
        font-size: 0.9em;
    }

/* btn-back Defaults */
.btn-back {
    border-color: transparent;
    background-color: dimgray;
    color: white !important;
}

    .btn-back:focus,
    .btn-back:hover {
        border-color: transparent !important;
        color: white !important;
        background-color: darkgray !important;
    }

/*  btn-rename Defaults */
.btn-rename {
    border-color: transparent;
    background-color: transparent;
    color: green;
    font-size: 0.9em;
}

    .btn-rename:focus,
    .btn-rename:hover {
        border-color: transparent;
        color: darkgreen;
        background-color: lightgreen;
        font-size: 0.9em;
    }

/*  btn-billing Defaults */
.btn-billing {
    border-color: transparent;
    background-color: transparent;
    color: blue;
    font-size: 0.9em;
}

    .btn-billing:focus,
    .btn-billing:hover {
        border-color: transparent;
        color: blue;
        background-color: lightblue;
        font-size: 0.9em;
    }



/*  btn-search-fill Defaults */
.btn-search-fill {
    border-color: gray;
    background-color: deepskyblue;
    color: white;
}

    .btn-search-fill:focus,
    .btn-search-fill:hover {
        border-color: gray;
        color: darkblue;
        background-color: lightblue
    }

/*  btn-danger Defaults */
.btn-danger {
    color: white !important;
    background-color: darkred !important;
    border-color: gray !important;
}

    .btn-danger:focus,
    .btn-danger:hover {
        color: white !important;
        background-color: red !important;
        border-color: gray !important;
    }

/* btn-subtle-danger */
.btn-subtle-danger {
    background-color: lightpink;
    border-color: gray;
    color: black;
}

    .btn-subtle-danger:hover {
        background-color: crimson;
        border-color: gray;
        color: white;
    }

/*  btn-warning Defaults */
.btn-warning {
    color: #705103 !important;
    background-color: lightpink !important;
    border-color: #414042 !important;
}

    .btn-warning:focus,
    .btn-warning:hover {
        color: #705103 !important;
        background-color: crimson !important;
        border-color: #7d7e81 !important;
    }

.btn-warning-reverse {
    color: #705103;
    background-color: crimson;
    border-color: darkgray;
}

    .btn-warning-reverse:focus,
    .btn-warning-reverse:hover,
    .btn-warning-reverse:active {
        color: #705103;
        background-color: lightpink;
        border-color: gray; /* gray */
    }

.btn-option {
    color: #705103;
    border-color: #F2CA46;
    background-color: floralwhite;
}

    .btn-option:focus,
    .btn-option:hover {
        color: #705103;
        background-color: #DAA425;
        border-color: #7d7e81; /* gray */
    }

.btn-loglink {
    color: #705103;
    background-color: transparent;
    border-color: transparent;
}

    .btn-loglink:focus,
    .btn-loglink:hover {
        color: #705103;
        background-color: #dec383;
    }

/* #region Top Button */
#top-button {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #C72D27; /* bg-red-dark*/
    color: white;
    cursor: pointer;
    padding: 8px 24px;
    border-radius: 4px;
}

    #top-button:hover {
        background-color: #4A4B4C; /* bg-gray-dark */
    }

    #top-button:active {
        background-color: #C72D27; /* bg-red-dark*/
    }

/* Responsive Nav colors */
.siteNameBig, .siteNameSmall, nav-link, .nav-text > a {
    padding-left: 120px;
    /*color: #4f7d1f !important;
    transition: color 0.3s ease;*/
}
/* #endregion */

/* Base styles for custom checkboxes */
.form-check-input[type=checkbox].custom-checkbox-green {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #ccc;
    border-radius: 0.2em;
    outline: none;
    cursor: pointer;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    /* --- ALIGNMENT NUDGE --- */
    transform: translateY(1px); /* Nudge down by 1px. Adjust this value (e.g., 2px, 0px, -1px) as needed */
}

    /* Styles when the checkbox is checked */
    .form-check-input[type=checkbox].custom-checkbox-green:checked {
        background-color: #ffffff; /* White background when checked */
        border-color: #28a745; /* Green border when checked */
    }

        /* Styles for the checkmark itself when the checkbox is checked */
        .form-check-input[type=checkbox].custom-checkbox-green:checked::before {
            content: '\2713'; /* Unicode checkmark character */
            display: block;
            position: absolute;
            /* Adjust top and left based on visual inspection.
               Start with 50% and then fine-tune by a pixel or two if needed. */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* Centering trick */
            /* Adjust font-size to make the checkmark fit well within the 1.2em box */
            font-size: 1em; /* This is relative to the input's font-size, which might be default */
            /* A fixed pixel size or a slightly larger em value often works better for icons */
            /* Try 0.9em to make it slightly smaller than the box, or 16px if the box is 1.2em (approx 19px) */
            /* Let's try to base it off the box height, but slightly smaller */
            font-size: 1.1em; /* Increased slightly to better fill the 1.2em box */
            line-height: 1; /* Prevent extra space above/below the checkmark character */
            text-align: center; /* Ensures the character itself is centered within its pseudo-element box */
            color: #28a745; /* Green checkmark */
        }

    /* Add focus styles to match the green theme */
    .form-check-input[type=checkbox].custom-checkbox-green:focus {
        box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25); /* Greenish glow on focus */
        outline: none; /* Remove default outline */
    }