.selector-multiple-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;
    margin-top: 20px;
}

.btn-multiselect, .btn-multiselect:hover {
    background-color: var(--secondary-bg-color);
    padding: 0.375rem;
    border-radius: 0.25rem;
    color: white;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    margin: 5px 10px;
}

.select-multiple-container {
    flex: 1;
}

.select-multiple {
    border-radius: 0.45rem;
    line-height: 10px;
    width: 100%
}

.size-16 {
    font-size: 16px;
}
/* ---------------------------------------------------------------------------
   Blazor reconnection UI (see the #components-reconnect-modal element in App.razor)

   Blazor's default overlay is a full-screen blocking modal. On the client's office network the
   SignalR connection drops routinely and usually recovers within seconds, so blocking the whole
   screen each time is disruptive out of proportion to the event. Draft autosave already protects
   in-progress work, so we suppress the "reconnecting" state entirely and keep the element
   non-blocking at all times.

   States Blazor applies:
     .components-reconnect-show      lost connection, retrying   -> hidden (see below)
     .components-reconnect-hide      reconnected                 -> hidden
     .components-reconnect-failed    retries exhausted           -> shown (a reload follows)
     .components-reconnect-rejected  server refused, state lost  -> shown (a reload follows)
   --------------------------------------------------------------------------- */

#components-reconnect-modal {
    display: none;
    /* Belt and braces: even when visible this must never intercept clicks, so the UI stays
       usable and nothing can be "blocked" by a stuck overlay. */
    pointer-events: none;
}

/* Retrying: stay completely silent. Reconnection is normally transparent, and a banner on every
   brief blip trains users to ignore it. To surface it after all, replace `display: none` here
   with the same block as the failed/rejected rule below. */
#components-reconnect-modal.components-reconnect-show {
    display: none;
}

/* Retries exhausted or session rejected: Blazor is about to reload the page. Say so — otherwise
   the reload looks like a crash. To hide this too, change `display: flex` to `display: none`. */
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 10001;
    max-width: 22rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border-left: 3px solid #dc3545;
    background-color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    font-size: 13px;
    color: #212529;
}

#components-reconnect-modal .reconnect-title {
    font-weight: 600;
}

#components-reconnect-modal .reconnect-detail {
    color: #6c757d;
    line-height: 1.35;
}

@media (prefers-color-scheme: dark) {
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        background-color: #2b2f36;
        color: #e9ecef;
    }

    #components-reconnect-modal .reconnect-detail {
        color: #adb5bd;
    }
}