body {
    background-color: whitesmoke;
    padding-bottom: 100px;
}

/* Service Tree View Styling */
.service-row {
    transition: background-color 0.2s ease;
}

.service-row:hover {
    background-color: #f8f9fa;
}

.service-row.level-1 {
    border-left: 2px solid #e9ecef;
}

.service-row.level-2 {
    border-left: 2px solid #dee2e6;
}

.service-row.level-3 {
    border-left: 2px solid #ced4da;
}

/* Service toggle button */
.service-toggle {
    color: #0d6efd;
    transition: transform 0.3s ease;
}

.service-toggle[aria-expanded="false"] .service-toggle-icon {
    transform: rotate(-90deg);
}

.service-toggle[aria-expanded="true"] .service-toggle-icon {
    transform: rotate(0deg);
}

.service-toggle:hover {
    color: #0b5ed7;
    text-decoration: none;
}

/* Hidden children (when toggled) */
.service-children-hidden {
    display: none;
}

/* Group Toggle Styling */
.process-group {
    transition: box-shadow 0.2s ease;
}

.process-group:hover {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header[data-action="group-toggle#toggle"] {
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
}

.card-header[data-action="group-toggle#toggle"]:hover {
    background-color: #0d47a1 !important;
}

.card-header[data-action="group-toggle#toggle"]:focus {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}

/* Group toggle icon animation */
.group-toggle-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 1.2em;
}

.group-toggle-icon.group-toggle-collapsed {
    transform: rotate(-90deg);
}

/* Hidden group content */
.group-content-hidden {
    display: none;
}

/* Group content styling */
.group-content {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Process Card Styling */
.process-card {
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.process-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* Cursor pointer for clickable headers */
.cursor-pointer {
    cursor: pointer;
}

/* List group item styling in process cards */
.process-card .list-group-item {
    padding: 0.75rem 0;
    border: none;
    border-bottom: 1px solid #f0f0f0;
}

.process-card .list-group-item:last-child {
    border-bottom: none;
}

.process-card .list-group-item:hover {
    background-color: #f8f9fa;
}

/* Button group spacing improvements */
.btn-group-sm .btn {
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
}

/* Ensure proper spacing between individual action buttons */
.d-flex.gap-2 .btn,
.d-flex.gap-3 .btn,
.d-flex.gap-4 .btn {
    flex-shrink: 0;
}

/* Service tree action buttons */
.service-row .btn-group-sm .btn {
    padding: 0.35rem 0.5rem;
    margin: 0 2px;
}

/* Multiselect fields - increase height for better UX */
select[multiple],
.form-select[multiple] {
    min-height: 200px !important;
    height: auto !important;
}

/* Ensure multiselect has proper padding */
select[multiple] option,
.form-select[multiple] option {
    padding: 4px 8px;
}

/* Override Bootstrap's default height for multiselect */
select.form-select[multiple] {
    padding: 0.375rem 0.75rem !important;
}