:root {
    --color-earthy: black;
    --background-color-earthy: white;
    --border-color-earthy: #4d3006;
    --gradient-colour-1: #a2c5c0;
    --gradient-colour-2: #3c605b;
    --gradient-angle: 50deg;
}

body {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    font-family: 'Source Sans Pro', 'Inter', sans-serif;
    color: var(--color-earthy);
    background-color: var(--background-color-earthy);
}

.alert-earthy {
    color: var(--color-earthy);
    background-color: var(--background-color-earthy);
    border-color: var(--border-color-earthy);
}

.alert-earthy hr {
    border-top-color: var(--border-color-earthy);
}

.alert-earthy .alert-link {
    color: var(--color-earthy);
}

.border-earthy {
    border-color: var(--border-color-earthy) !important;
}

.btn-earthy {
    color: var(--color-earthy);
    background-color: var(--background-color-earthy);
    border-color: var(--border-color-earthy);
}

.btn-earthy:hover {
    color: var(--color-earthy);
    background-color: var(--background-color-earthy);
    border-color: var(--border-color-earthy);
}

.btn-earthy:focus, .btn-earthy.focus {
    box-shadow: 0 0 0 0.2rem var(--border-color-earthy);
}

.btn-earthy.disabled, .btn-earthy:disabled {
    color: var(--color-earthy);
    background-color: var(--background-color-earthy);
    border-color: var(--border-color-earthy);
}

.btn-earthy:not(:disabled):not(.disabled):active, .btn-earthy:not(:disabled):not(.disabled).active, .show > .btn-earthy.dropdown-toggle {
    color: var(--color-earthy);
    background-color: var(--background-color-earthy);
    border-color: var(--border-color-earthy);
}

.btn-earthy:not(:disabled):not(.disabled):active:focus, .btn-earthy:not(:disabled):not(.disabled).active:focus, .show > .btn-earthy.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--border-color-earthy);
}

.btn-outline-earthy {
    color: var(--color-earthy);
    background-color: var(--background-color-earthy);
    border-color: var(--border-color-earthy);
}

.btn-outline-earthy:hover {
    color: var(--color-earthy);
    background-color: var(--background-color-earthy);
    border-color: var(--border-color-earthy);
}

.btn-outline-earthy:focus, .btn-outline-earthy.focus {
    box-shadow: 0 0 0 0.2rem var(--border-color-earthy);
}

.btn-outline-earthy:not(:disabled):not(.disabled):active, .btn-outline-earthy:not(:disabled):not(.disabled).active, .show > .btn-outline-earthy.dropdown-toggle {
    color: var(--color-earthy);
    background-color: var(--background-color-earthy);
    border-color: var(--border-color-earthy);
}

.list-group-item-earthy {
    color: var(--color-earthy);
    background-color: var(--background-color-earthy);
    border-color: var(--border-color-earthy);
}

.list-group-item-earthy.list-group-item-action.active {
    color: var(--color-earthy);
    background-color: var(--background-color-earthy);
    border-color: var(--border-color-earthy);
}

.table-earthy,
.table-earthy > th,
.table-earthy > td {
    background-color: var(--background-color-earthy);
}

.table-hover .table-earthy:hover {
    background-color: var(--border-color-earthy);
}

.table-hover .table-earthy:hover > td,
.table-hover .table-earthy:hover > th {
    background-color: var(--border-color-earthy);
}

.text-earthy {
    color: var(--color-earthy) !important;
}

a.text-earthy:hover, a.text-earthy:focus {
    color: var(--color-earthy) !important;
}

/*------------------------------------
- COLOR leafy-green
------------------------------------*/
.alert-leafy-green {
    color: #0c1413;
    background-color: #a2c5c0;
    border-color: #96bdb8;
}

.alert-leafy-green hr {
    border-top-color: #86b3ad;
}

.alert-leafy-green .alert-link {
    color: #000000;
}

.badge-leafy-green {
    color: #fff;
    background-color: #3c605b;
}

.badge-leafy-green[href]:hover, .badge-leafy-green[href]:focus {
    color: #fff;
    background-color: #28403d;
}

.bg-leafy-green {
    background-color: #3c605b !important;
}

a.bg-leafy-green:hover, a.bg-leafy-green:focus,
button.bg-leafy-green:hover,
button.bg-leafy-green:focus {
    background-color: #28403d !important;
}

.border-leafy-green {
    border-color: #3c605b !important;
}

.btn-leafy-green {
    color: #fff !important;
    background-color: #3c605b;
    border-color: #3c605b;
}

.btn-leafy-green:hover, .btn-leafy-green:focus, .btn-leafy-green.focus {
    color: #fff !important;
    background-color: #28403d;
    border-color: #28403d;
}

.btn-leafy-green:hover, .btn-leafy-green:focus, .btn-leafy-green.focus {
    box-shadow: 0 0 0 0.2rem rgba(60, 96, 91, 0.5);
}

.btn-leafy-green.disabled, .btn-leafy-green:disabled {
    color: rgba(255, 255, 255, 0.5);
    background-color: #3c605b;
    border-color: #3c605b;
}

.btn-leafy-green:not(:disabled):not(.disabled):active, .btn-leafy-green:not(:disabled):not(.disabled).active, .show > .btn-leafy-green.dropdown-toggle {
    color: #fff !important;
    background-color: #28403d;
    border-color: #223734;
}

.btn-leafy-green:not(:disabled):not(.disabled):active:focus, .btn-leafy-green:not(:disabled):not(.disabled).active:focus, .show > .btn-leafy-green.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(60, 96, 91, 0.5);
}

.btn-outline-leafy-green {
    color: #3c605b;
    background-color: transparent;
    border-color: #3c605b;
}

.btn-outline-leafy-green:hover {
    color: #fff;
    background-color: #3c605b;
    border-color: #3c605b;
}

.btn-outline-leafy-green:hover, .btn-outline-leafy-green:focus, .btn-outline-leafy-green.focus {
    box-shadow: 0 0 0 0.2rem rgba(60, 96, 91, 0.5);
}

[data-theme="dark"] .btn-outline-leafy-green:hover {
    color: black !important;
}

.btn-outline-leafy-green.disabled, .btn-outline-leafy-green:disabled {
    color: #3c605b;
    background-color: transparent;
}

.btn-outline-leafy-green:not(:disabled):not(.disabled):active, .btn-outline-leafy-green:not(:disabled):not(.disabled).active, .show > .btn-outline-leafy-green.dropdown-toggle {
    color: var(--bg-color);
    background-color: var(--toggle-icon);
    border-color: var(--toggle-border);
}

.btn-outline-leafy-green:not(:disabled):not(.disabled):active:focus, .btn-outline-leafy-green:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-leafy-green.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(60, 96, 91, 0.5);
}

.list-group-item-leafy-green {
    color: #0c1413;
    background-color: #96bdb8;
}

.list-group-item-leafy-green.list-group-item-action:hover, .list-group-item-leafy-green.list-group-item-action:focus {
    color: #0c1413;
    background-color: #86b3ad;
}

.list-group-item-leafy-green.list-group-item-action.active {
    color: #fff;
    background-color: #0c1413;
    border-color: #0c1413;
}

.table-leafy-green,
.table-leafy-green > th,
.table-leafy-green > td {
    background-color: #96bdb8;
}

.table-hover .table-leafy-green:hover {
    background-color: #86b3ad;
}

.table-hover .table-leafy-green:hover > td,
.table-hover .table-leafy-green:hover > th {
    background-color: #86b3ad;
}

.text-leafy-green {
    color: #3c605b !important;
}

a.text-leafy-green:hover, a.text-leafy-green:focus {
    color: #28403d !important;
}


/*OTHER*/
.bg-leftover-gradient {
    background: linear-gradient(41deg, #cee7d6, #ebffd76b);
}

a, btn-link {
    color: #2c6e49;
}

a:visited:not(.btn) {
    color: #2c6e49;
}

.url-underline {
    text-decoration: underline;
}

.select2-dropdown--below {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
}

.login-icon {
    border-radius: 50%;
    --bs-icon-size: 2.5rem;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: var(--bs-icon-size);
    width: calc(var(--bs-icon-size) * 2);
    height: calc(var(--bs-icon-size) * 2);
    color: var(--bs-primary)
}

/*<button type="button" class="btn btn-outline-primary    " data-mdb-ripple-color="#3c605b"*/
/*style="background-color:#a2c5c0;color:#a2c5c0;border-color:#a2c5c0;"> button </button>*/

.gradient-placeholder {
    width: 60px;
    height: 60px;
    background: linear-gradient(var(--gradient-angle), var(--gradient-colour-1), var(--gradient-colour-2));
}

h1 {
    font-size: 2.6rem;
}

.external-link::after {
    content: '\f35d'; /* Font Awesome icon unicode for 'arrow up right' */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 5px;
}

.text-highlighted {
    color: #4D7C5FFF;
    font-weight: 600;
}

/* 
 * Theme-text utility class
 * -----------------------
 * A utility class that automatically adjusts text color based on the current theme:
 * - Black (#000) in light theme for good contrast against light backgrounds
 * - White (#fff) in dark theme for good contrast against dark backgrounds
 *
 * Usage: Add the 'theme-text' class to any text element that needs to maintain
 * proper contrast in both light and dark themes.
 *
 * Example: <p class="theme-text">This text will be black in light mode and white in dark mode</p>
 */
.theme-text {
    color: #000 !important; /* Black by default (light theme) */
}

[data-theme="dark"] .theme-text {
    color: #fff !important; /* White in dark theme */
}

/* Also support Bootstrap 5's data-bs-theme attribute */
[data-bs-theme="dark"] .theme-text {
    color: #fff !important; /* White in dark theme */
}

/*
  Dropdown menu fix for collapsed navbar on small screens.
  Ensures dropdown menus open underneath their toggle button instead of to the side.
*/
@media (max-width: 767.98px) {
  .navbar-collapse .navbar-nav .nav-item .dropdown-menu {
    position: static !important;
    width: 100%;
    background-color: transparent;
    border: none;
    box-shadow: none;
    float: none;
  }

  .navbar-collapse .navbar-nav .nav-item .dropdown-item {
    color: var(--color-earthy);
    padding-left: 1rem;
  }

  [data-theme="dark"] .navbar-collapse .navbar-nav .nav-item .dropdown-item {
    color: white;
  }

  .navbar-collapse .navbar-nav .nav-item .dropdown-item:hover {
      background-color: rgba(0,0,0,0.1);
  }

  [data-theme="dark"] .navbar-collapse .navbar-nav .nav-item .dropdown-item:hover {
      background-color: rgba(255,255,255,0.1);
  }
}