/**
 * EventHub Styles
 */

/* Full width layout override for eventhub */
.eventhub-main-layout {
    max-width: 100% !important;
    width: 100% !important;
}

/* Override container constraints when eventhub layout is present */
main.container:has(.eventhub-main-layout),
main:has(.eventhub-main-layout) {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Sidebar styles */
.event-select-sidebar {
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.event-select-sidebar:hover {
    background: color-mix(in srgb, var(--dgw-accent) 10%, transparent) !important;
    color: var(--dgw-text) !important;
}

.event-select-sidebar.active {
    background: color-mix(in srgb, var(--dgw-accent) 15%, transparent) !important;
    color: var(--dgw-text) !important;
}

/* Sidebar collapse button */
.btn-toggle {
    transition: transform 0.15s ease, color 0.15s ease;
    border: none;
    background: transparent;
}

.btn-toggle:hover {
    color: var(--dgw-accent) !important;
}

.btn-toggle:focus {
    box-shadow: none;
    outline: none;
}

/* Add child button hover effect */
.event-select-sidebar:hover ~ .add-child-btn,
li:hover .add-child-btn {
    opacity: 1 !important;
}

.add-child-btn:hover {
    color: var(--dgw-accent) !important;
    background: color-mix(in srgb, var(--dgw-accent) 10%, transparent) !important;
}

/* Sidebar children list indentation */
.btn-toggle-nav {
    padding-left: 0.5rem;
    margin-top: 0.25rem;
}

.btn-toggle-nav li {
    margin-left: 0.5rem;
    display: flex;
    flex-direction: column;
}

/* Sidebar spinner */
.spinner-border-sm {
    width: 0.75rem;
    height: 0.75rem;
}

/* Event details panel */
#eventDetailsContainer {
    transition: all 0.3s ease;
}

/* Map container */
#eventMap {
    border-radius: 0;
}

/* Nav links in overview */
#overview .nav-pills .nav-link {    
    color: var(--dgw-text);
    transition: all 0.15s ease;
}

#overview .nav-pills .nav-link:hover {
    color: var(--dgw-accent);
    background-color: color-mix(in srgb, var(--dgw-accent) 10%, transparent);
}

#overview .nav-pills .nav-link i {
    margin-right: 0.25rem;
}



/* Event details list styling */
#eventDetailsContainer .list-group-item {
    border-left: none;
    border-right: none;
}

#eventDetailsContainer .list-group-item:first-child {
    border-top: none;
}

#eventDetailsContainer .list-group-item:last-child {
    border-bottom: none;
}

/* Sidebar scrollbar styling */
.flex-shrink-0::-webkit-scrollbar {
    width: 6px;
}

.flex-shrink-0::-webkit-scrollbar-track {
    background: var(--dgw-panel);
}

.flex-shrink-0::-webkit-scrollbar-thumb {
    background: var(--dgw-border);
    border-radius: 3px;
}

.flex-shrink-0::-webkit-scrollbar-thumb:hover {
    background: var(--dgw-accent);
}

/* Sidebar item styling */
.btn-toggle-nav a {
    color: var(--dgw-text-dim);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    display: flex;
    flex-direction: column;
    border-radius: var(--dgw-radius);
    transition: background-color 0.15s ease;
    min-width: 0;
}

.btn-toggle-nav a:hover {
    background: color-mix(in srgb, var(--dgw-accent) 8%, transparent);
    color: var(--dgw-text);
}