/* General Theme Settings */
:root {
    --bs-primary-rgb: 0, 126, 255; /* Equivalent to #314b32 */
    --bs-bg-opacity: 1; /* Default opacity for backgrounds */
    --primary-color: #007eff; /* Main theme color */
    --secondary-color: #6c757d; /* Secondary color */
    --background-color: #f8f9fa; /* App background color */
    --text-color: #212529; /* Default text color */
    --header-bg: var(--primary-color); /* Header background */
    --header-text-color: #ffffff; /* Header text color */
    --footer-bg: #007eff; /* Footer background color */
    --footer-text-color: #ffffff; /* Footer text color */
}

/* Global Styles */
body {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    font-family: 'Roboto', sans-serif !important;
    margin: 0;
    padding: 0;
}

/* Header */
header {
    background-color: var(--header-bg) !important;
    color: var(--header-text-color) !important;
    text-align: center !important;
    padding: 1rem 0 !important;
}

header h1 img {
    max-height: 50px !important;
}

.bg-primary {
   
    background-color: rgb(255 255 255) !important;
}

/* Footer */
footer {
    background-color: var(--footer-bg) !important;
    color: var(--footer-text-color) !important;
    border-top: 1px solid #e0e0e0 !important;
    padding: 0.5rem 0 !important;
}

footer a {
    color: var(--footer-text-color) !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
}

footer a:hover {
    color: #cecece !important;
}

/* Bottom Navigation Menu */
footer .d-flex a {
    flex-grow: 1 !important;
    text-align: center !important;
}

footer .d-flex i {
    font-size: 1.5rem !important;
    display: block !important;
}

footer .d-flex p {
    font-size: 0.75rem !important;
    margin: 0 !important;
}

/* Buttons */
button {
    color: #ffffff !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 9px !important;
    cursor: pointer !important;
    font-weight: 900 !important;
}

/*button:hover {
    background-color: darken(var(--primary-color), 10%) !important;
}*/

/* Forms */
form label {
    font-weight: bold !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

form input {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    padding: 0.5rem !important;
}

.pb-10{padding-bottom: 100px;}

h2{font-weight: 900 !important;}
h5{font-weight: 900 !important;}

.card{border-radius: 25px !important;border:0px !important;}
.card-text{font-weight: 100 !important;}

.status-circle {
    position: absolute;
    bottom: 20px;       /* Adjust to your preferred spacing */
    right: 20px;        /* Adjust to your preferred spacing */
           /* Circle diameter */
    ;       /* Circle diameter */
    border-radius: 6px;
    /* By default, the example uses Bootstrap's "bg-success" class for a green color.
       If you'd like a custom color, comment out the next line and replace with background-color: #whatever;
    */
    /* background-color: #28a745; */
}
.dataTables_filter {
    margin-bottom: 15px !important;
}

@media (min-width: 768px) {
    footer {
        display: none;
    }
    
.bg-primary {
   
    background-color: rgb(0 126 255) !important;
}
    .nav-link {    
        color: #FFFFFF !important;
    }
}
@media (max-width: 767.98px) {
    .navbarNav {
        display: none;
    }
            main {
            height: calc(100% - 180px); /* Subtract combined header and footer height */
            overflow: scroll;
        }
}

  /* Global styles for dynamic layout */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }



        #boxMap {
            height: 100%; /* Fill the remaining height in main */
            width: 100%; /* Full width */
        }

        header {
            height: 90px; /* Set the header height */
        }
/* Animation for button feedback */
.button-activated {
    animation: pulse-effect 0.3s ease-out;
    transform: scale(1.1); /* Temporary scaling */
    background-color: #28a745 !important; /* Flash green */
    color: #fff !important;
}

@keyframes pulse-effect {
    0% {
        transform: scale(1);
        background-color: inherit;
    }
    50% {
        transform: scale(1.1);
        background-color: #28a745;
    }
    100% {
        transform: scale(1);
        background-color: inherit;
    }
}

/* Styling for dashed drop zones (visible only in edit mode) */
.group-items {
    min-height: 50px;
    border: 2px dashed transparent;
    transition: all 0.3s ease;
}

.dropzone-visible {
    border-color: #007bff;
}

/* Visual feedback for draggable items */
.draggable-card {
    cursor: default;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.draggable-enabled {
    cursor: grab;
    opacity: 1;
}

.draggable-enabled:active {
    cursor: grabbing;
}
.input-widget .output-card {
    cursor: grab;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
}

.input-widget:active {
    cursor: grabbing;
    transform: scale(1.02);
}

.input-status-circle {
    position: absolute;
    bottom: 8px;       /* Adjust to your preferred spacing */
    right: 20px;        /* Adjust to your preferred spacing */
    width: 25px;        /* Circle diameter */
    height: 25px;       /* Circle diameter */
    border-radius: 50%;
}