/* --- Enhanced Custom CSS for Arboriculture-Themed Website --- */

/* General Background */
body {
    background: linear-gradient(to bottom, #f5f8f3, #e3ead8); /* Softer green gradient for nature */
    font-family: 'Nunito', sans-serif; /* Modern, friendly font */
    color: #2c3e3c;
    margin: 0;
    padding: 0;
    /*font-size: 1.2rem; /* Increased base font size */
}

h2 {
	font: 36px/36px 'Oleo Script';
	color: #45443a;
	margin: 0 0 14px 0;
}
h3 {
	font: 30px/30px 'Oleo Script';
	color: #45443a;
	margin: 0 0 31px 0;
}
h4 {
	font: 24px/24px 'Oleo Script';
	color: #45443a;
	margin: 0 0 8px 0;
}

/* Navbar */
#menu_nav.navbar {
    background-color: #4a7a45 !important; /*4a7a45  Harmonized deep green  #4a7a45;*/
    border-bottom: 2px solid #365c34;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Oleo Script';;
    /*font-family: 'Montserrat', sans-serif;*/
}

.navbar-brand img.logo {
    max-height: 45px;
    margin-right: 15px;
}

.navbar-nav .nav-link {
    color: #f7faf5; /* f7faf5 Light text for contrast */
    font-weight: 600;
    padding: 0.75rem 1rem;
    transition: color 0.3s, background 0.3s, border-radius 0.3s;
}

.navbar-nav .nav-link:hover {
    background-color: #365c34; /* Highlight on hover */
    color: #f1ffe7;
    border-radius: 5px;
}

.navbar-toggler {
    border-color: #f7faf5;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(247,250,245,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Dropdown Menu */
.dropdown-menu {
    background: #51844b; /* f9fdf6 Softer light green */
    border: 1px solid #c5d3c5;
    border-radius: 8px;
    font-size:1.2rem;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.dropdown-item {
    color: #2c3e3c;
    font-weight: 500;
    padding: 0.8rem 1.2rem;
    border-radius: 5px;
    transition: background 0.3s, color 0.3s;
}

.dropdown-item:hover {
    background-color: #4a7a45 !important; /*e9f2e9*/
    color: #4b6b5b;
}

.navbar-nav .dropdown a {
    color : #ffbc42 !important;
}
    


/* Buttons */
.btn {
    background: linear-gradient(90deg, #639a59, #486b3d); /* Subtle green gradient */
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(90deg, #486b3d, #639a59);
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(99, 154, 89, 0.5);
}

.btn-success {
    background: linear-gradient(90deg, #28a745, #218838);
}

.btn-danger {
    background: linear-gradient(90deg, #dc3545, #bd2130);
}

.btn-warning {
    background: linear-gradient(90deg, #ffc107, #e0a800);
    color: #212529;
}

.btn-info {
    background: linear-gradient(90deg, #17a2b8, #117a8b);
}

.btn-primary {
    background: linear-gradient(90deg, #007bff, #0056b3);
}

/* Tables */
.table {
    border: 1px solid #c5d3c5;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f9fdf6;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.table th {
    
    font-family: 'Oleo Script';;
    background-color: #4a7a45; /* Same as navbar */
    color: #ffffff;
    text-transform: uppercase;
    font-size: 1.1rem;
    letter-spacing: 0.05rem;
    padding: 1rem;
}

.table td {
    padding: 1rem;
    border-bottom: 1px solid #e6f1e6;
    font-size: 1rem;
    color: #2c3e3c;
    transition: background 0.3s;
}

.table tr:hover td {
    background-color: #eef4e9;
}

/* Harmonized Links Inside Tables */
.table th a {
    color: #ffbc42; /* White links inside table headers */
    text-decoration: none;
    transition: color 0.3s;
    font-size: 1.2rem;
}

.table th a:hover {
    color: #ffffff; /* Subtle golden yellow hover effect */
}

/* Links */
a {
    color: #4a7a45;
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: #ffbc42;
    /*text-decoration: underline;*/
}

/* Cards */
.card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.2);
}

.card-header {
    background: linear-gradient(90deg, #639a59, #486b3d);
    color: #ffffff;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 1rem;
}

.card-body {
    background-color: #f9fbf9;
    padding: 1.5rem;
}

/* Inputs */
.form-control {
    border-radius: 8px;
    border: 1px solid #c5d3c5;
    padding: 0.8rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-control:focus {
    border-color: #639a59;
    box-shadow: 0 0 5px rgba(99, 154, 89, 0.4);
    outline: none;
}

/* Badges */
.badge {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    background-color: #639a59;
    color: #ffffff;
    border-radius: 12px;
    text-transform: uppercase;
}

.badge-secondary {
    background-color: #8e6b47;
}

.badge-success {
    background-color: #28a745;
}

.badge-danger {
    background-color: #dc3545;
}

.badge-warning {
    background-color: #ffc107;
    color: #212529;
}

.badge-info {
    background-color: #17a2b8;
}

/* Alerts */
.alert {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 1rem;
    font-size: 1rem;
    transition: background-color 0.3s, border-color 0.3s;
}

.alert-primary {
    background-color: #f5faf5;
    border-color: #c5d3c5;
    color: #2c3e3c;
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

/* Utility Classes */
.shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s;
}

.shadow:hover {
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.2);
}


.pagination .current {
    background: #39557a none repeat scroll 0 0;
    cursor: default;
    padding: 0.1875rem 0.625rem;
  }


  /* Toast Success avec dégradé */
.toast.text-bg-success {
    background: linear-gradient(90deg, #28a745, #218838); /* Dégradé vert similaire au bouton */
    color: white; /* Texte blanc */
    border: 1px solid #218838; /* Bordure fine verte foncée */
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.5); /* Ombre subtile */
}

/* Animation de fermeture pour toast */
.toast.hidden {
    animation: slideOut 0.5s ease-in;
    display: none !important;
}

/* Animation pour apparition de toast */
.toast.show {
    animation: slideIn 0.5s ease-out;
}

/* Effet hover dynamique pour toast */
.toast.text-bg-success:hover {
    background: linear-gradient(90deg, #218838, #28a745); /* Inversion du dégradé */
}


/* Appliquer l'animation à l'apparition du toast */
.toast.show {
    animation: slideIn 0.5s ease-out;
}

/* Appliquer l'animation à la disparition */
.toast.hidden {
    animation: slideOut 0.5s ease-in;
    display: none !important; /* Cacher après l'animation */
}

/* Style pour le dégradé rouge du toast */
.toast.text-bg-danger {
    background: linear-gradient(90deg, #dc3545, #bd2130); /* Dégradé rouge */
    color: white;
    border: 1px solid #bd2130; /* Bordure fine rouge foncé */
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.5); /* Ombre subtile */
}

/* Quand l'écran est plus petit que 768px 
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .table th {
        font-size: 1.1rem;
    }
    .table td {
        font-size: 1rem;
    }
}

/* Quand l'écran est plus petit que 480px 
@media (max-width: 480px) {
    body {
        font-size: 8px;
    }
    .table th {
        font-size: 1rem;
    }
    .table td {
        font-size: 0.2rem;
    }
}
    */