body {
    padding: 20px;
    background-color: #2e2e2e !important;
    color: #e0e0e0 !important;
    font-family: 'Arial', sans-serif !important;
}

h1, h2 {
    margin-bottom: 30px;
    text-shadow: 2px 2px 5px #111;
}

label {
    text-shadow: 1px 1px 4px #111;
}

a, .btn {
    margin-top: 10px;
    background-color: #444444 !important; /* Dark Purple */
    border-color: #4a007a !important; /* Slightly darker purple for border */
    color: #e0e0e0 !important;
}

a:hover, .btn:hover {
    background-color: #4a007a !important;
    border-color: #370059 !important;
    color: #ffffff !important;
}

.dropdown-menu {
    background-color: #2a2a2a !important; /* Match app-box */
    border: 1px solid #4a007a !important;
}

.dropdown-item {
    color: #e0e0e0 !important;
}

.dropdown-item:hover {
    background-color: #4a007a !important;
    color: #ffffff !important;
}

.app-box {
    background-color: #2a2a2a; /* Lighter Grey */
    padding: 20px;
    margin-top: 40px; /* Move it a little lower */
    border-radius: 25px; /* Rounded corners for aesthetics */
}

/* Purple styling for dropdowns (GUI elements) */
.Select-control {
    background-color: #444444 !important; /* Dark Purple */
    border-color: #4a007a !important;
    color: #e0e0e0 !important;
}

.Select-menu-outer {
    background-color: #2a2a2a !important;
    border-color: #4a007a !important;
}

.Select-option {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}

.Select-option.is-selected {
    background-color: #4a007a !important;
    color: #ffffff !important;
}

.Select-option.is-focused {
    background-color: #4a007a !important;
    color: #ffffff !important;
}

.Select-arrow-zone {
    background-color: #444444 !important;
}

.Select-input > input {
    color: #e0e0e0 !important;
}


/* Ensure Loading overlay is on top and centered */
#plot-loading .dash-loading,
#plot-loading .dash-spinner {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5000 !important;
}

/* If any parent clips it, unclip */
#plot-container, .app-box { overflow: visible !important; }
/* Optional: darken background while loading */
#plot-loading .dash-loading { background: rgba(0,0,0,0.25); }