body {
    display: flex;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

.sidebar-title {
    display: flex;
    align-items: center;
    font-size: 1.25rem;   /* bigger text */
    color: #4a2fd2;          /* adjust color */
    font-weight: bold;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;          /* space between icon and text */
}

.sidebar-title i {
    font-size: 1.3rem;    /* make icon match text height */
}

/* Sidebar on the left */
#sidebar {
    width: 300px;
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
    padding-top: 20px;
    overflow-y: auto;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}


/* Hidden sidebar for small screens */
#sidebar.hidden {
    transform: translateX(-300px);
}

/* Sidebar links (navigation buttons) */
#sidebar a {
    display: block;
    padding: 5px 15px;   /* reduced vertical padding */
    color: #333;
    text-decoration: none;
}
#sidebar a:hover {
    background-color: #e9ecef;
}
#sidebar a i {
    margin-right: 8px;
    vertical-align: middle;
}

.sidebar-controls {
    margin-top: 0.5rem;
    border-top: 1px solid #dee2e6; /* matches Bootstrap border color */
    padding-top: 0.8rem !important;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 0.9em !important;
}

/* Make form inputs, selects, textareas, checkboxes more compact */
#sidebar .sidebar-controls .form-control,
#sidebar .sidebar-controls .form-select,
#sidebar .sidebar-controls textarea {
    font-size: 0.85em !important;
}

#sidebar .sidebar-controls .form-check-label {
    font-size: 0.85em !important;
    margin-bottom: 0 !important;
}

#sidebar .sidebar-controls button.btn {
    font-size: 0.85em !important;
}

#content {
    flex-grow: 1;
    padding: 0; /* remove padding so canvas fills */
    width: 100%;
    position: relative; /* ensures children fill correctly */
}

.input-group-text.unit {
    font-size:0.9em !important;
    justify-content: center !important;
    width:35px!important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        transform: translateX(-300px);
        z-index: 1000;
    }

    #sidebar.active {
        transform: translateX(0);
    }

    #content {
        margin-left: 0;
        width: 100%;
    }
}
#content canvas {
    display: block; /* remove inline gaps */
    width: 100%;
    height: 100%;
}

/* In styles/site.css */

/* Max specificity for autocomplete menu item text */
.ui-autocomplete.ui-front .ui-menu-item .ui-menu-item-wrapper {
    font-size: 0.85em !important; /* Adjusted to 0.9em, 0.5em is usually too small */
    padding: 0.2em 0.4em !important; /* Adjust padding for better look with smaller text */
    line-height: 1.2 !important; /* Adjust line height for better spacing */
}

/* Optional: If the above still doesn't work, target the LI directly if the text lives there.
   Usually, it's the wrapper, but some themes/versions might differ. */
.ui-autocomplete.ui-front .ui-menu-item {
    font-size: 0.85em !important; 
    padding: 0.2em 0.4em !important;
    line-height: 1.2 !important;
}

/* Ensure the main container doesn't have conflicting padding/margin */
.ui-autocomplete {
    padding: 0 !important;
    margin: 0 !important;
}