html, body {
    height: 100%;
    margin: 0;
}
body {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    color: #555555;
    /*background-image: url('../../static/img/b_header.svg');*/
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 -142px;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

#main {
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding: 0 10% 0 10%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.card {
    margin: 3px;
}
#content {
    font-size: 14px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 15px;
    padding-right: 15px;
}
#div_main {
    flex: 1;
    margin-left: 5%;
}
#logo_div {
    position: absolute;
    top: 10px;
    left: 1%;
}

.footer {
    bottom: 0;
    /* Set the fixed height of the footer here */
    height: 40px;
    line-height: 20px; /* Vertically center the text there */
    border-top: 1px solid #dddddd;
    padding-top: 10px;
    color: darkgrey;
}
.footer a {
    color: darkgrey;
}
.clickable {
    cursor: pointer;
}
.sovon_brown {

}
.alert {
    opacity: 0.6;
}
.upload_div {
    background-color: white !important;
    border: 2px solid #93c54b;
    border-radius: 20px;
    min-height: 4em;
    cursor: pointer;
    text-align: center;
    font-size: larger;
    padding: 10px
}
.progress {
    height: 20px;
    width: 100%;
}
progress[value]::-webkit-progress-bar {background-color: transparent;}
.progress-bar {
    color: white;
    border: 1px solid #dfd7ca;
}
.bi-ddm {
    font-size: 18px;
    margin-right: 5px;
}
#spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white overlay */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}
#page_header {
    border-bottom: 1px solid #eeeeee;
}
#spinner-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}
/* HTMX indicator classes */
#spinner-overlay.htmx-request,
#spinner-container.htmx-request {
    opacity: 1;
    visibility: visible;
}

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}
.alert {
    opacity: 1;
    transition: opacity 1s ease-in-out;
}
.cursor-pointer { cursor: pointer; }
/* Reserve space for one alert line even when hidden */
#messages {
    min-height: 42px; /* tweak to match your alert height */
    margin-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 10px;
}
/* Avoid extra spacing that changes the row height */
#messages .alert {
    margin-bottom: 0;
}

/* Optional: responsive tweaks if needed */
@media (max-width: 576px) {
    #messages { min-height: 56px; }
}
#success-message.fade {
    transition: opacity 0.6s ease; /* smoother fade-out */
}
/* Hide ID column by default, reveal on row hover (layout stays stable) */
.id-col { opacity: 0.3; transition: opacity .15s ease-in-out; white-space: nowrap; }
tbody tr:hover .id-col { opacity: 1; }
.table-row-clickable { cursor: pointer; }
.card-title { font-size: 1.10rem; }

/* ========== DROPDOWN BASE STYLES ========== */
.dropdown-menu {
    min-width: 200px;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    transition: all 0.15s ease;
}
/* Right-align main dropdown */
.dropdown-menu-end {
    right: 0;
    left: auto;
}

/* ========== BUTTON-STYLED LINKS ========== */
.dropdown-item.btn-like {
    text-decoration: none !important;
    padding: 0.6rem 1rem; /* Slightly increased for better targeting */
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.15s ease;
    position: relative;
    z-index: 1;
}
.dropdown-item.btn-like:hover {
    background-color: #d1e7dd; /* Updated hover background color */
    color: #0f5132; /* Updated font color for better contrast */
}

/* Active state */
.dropdown-item.active,
.dropdown-submenu .dropdown-toggle.active {
    font-weight: 500;
    color: #0d6efd;
    background-color: #e9ecef; /* Added background color for active state */
}

/* ========== SUBMENU STYLES WITH DELAY ========== */
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: auto;
    right: 100%;
    margin-right: -1px;
    min-width: 200px;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    position: absolute;
}
.dropdown-submenu:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.1s;
}

/* Keep parent highlighted when submenu is open */
.dropdown-submenu:hover > .dropdown-toggle {
    color: #0f5132; /* Updated font color for better contrast */
    transition-delay: 0s;
}

/* ========== HOVER BEHAVIOR WITH DELAY ========== */
.dropdown:hover > .dropdown-menu {
    display: block;
}

/* Delayed hide on mouse leave */
.dropdown-submenu .dropdown-menu {
    display: block; /* Always rendered, just hidden */
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Add a small buffer area for easier targeting */
.dropdown-submenu {
    padding: 0.2rem 0;
    margin: 0.1rem 0;
}

/* ========== VISUAL IMPROVEMENTS ========== */
/* Add small arrow for submenu items */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    transition: transform 0.2s ease;
}
/* Submenu item spacing */
.dropdown-submenu .dropdown-menu .dropdown-item {
    padding-left: 1.5rem;
    transition: all 0.15s ease;
}

.dropdown-submenu .dropdown-menu {
    margin-top: -6px;
    z-index: 1000;
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */
@media (min-width: 576px) {
    .dropdown-menu {
        min-width: 220px;
    }
    .dropdown-submenu .dropdown-menu {
        min-width: 220px;
    }
}
/* ========== DARK MODE STYLES ========== */
[data-bs-theme="dark"] .dropdown-item.btn-like:hover {
    background-color: #2b3035; /* Updated hover background color for dark mode */
    color: #adb5bd; /* Updated font color for better contrast in dark mode */
}

[data-bs-theme="dark"] .dropdown-submenu:hover > .dropdown-toggle {
    background-color: #2b3035; /* Updated hover background color for dark mode */
    color: #adb5bd; /* Updated font color for better contrast in dark mode */
}
[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-submenu .dropdown-toggle.active {
    background-color: #343a40; /* Added background color for active state in dark mode */
    color: #adb5bd; /* Updated font color for better contrast in dark mode */
}