/*
 * custom-toolbar.css - dark toolbar styling for Spiderweb's index page,
 * inspired by web.cluster.iz3mez.it (CC BY-SA, Francesco IZ3MEZ).
 * Loaded after style.min.css, so these rules only add to / override it;
 * nothing here touches the existing .ipcs banner or other pages.
 */

.toolbar-ccluster {
        background-color: #1b1e21;
        border-radius: 0.4rem;
        padding: 0.6rem 0.6rem 0.3rem 0.6rem;
        margin: 0.5rem 0.5rem 0.75rem 0.5rem;
}

.toolbar-ccluster .btn-mode,
.toolbar-ccluster .btn-mode-outline {
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        padding: 0.3rem 0.6rem;
        border-radius: 0.3rem;
        border: 1px solid #495057;
        background-color: #2b3035;
        color: #e9ecef;
}

.toolbar-ccluster .btn-mode:hover,
.toolbar-ccluster .btn-mode-outline:hover {
        background-color: #343a40;
        color: #fff;
}

.toolbar-ccluster .btn-mode.active {
        background-color: #dc3545;
        border-color: #dc3545;
        color: #fff;
}

.toolbar-ccluster .btn-mode-outline.active {
        background-color: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
}

.toolbar-ccluster input.form-control {
        font-size: 0.78rem;
        max-width: 9rem;
}

.toolbar-ccluster .filter-status {
        font-size: 0.72rem;
        letter-spacing: 0.03em;
        text-transform: uppercase;
}

.toolbar-ccluster .dropdown-menu {
        background-color: #2b3035;
        border: 1px solid #495057;
}

.toolbar-ccluster .dropdown-menu .form-check-label {
        color: #e9ecef;
        font-size: 0.85rem;
}

/* compact the big banner on the index page (kept, not removed - just smaller) */
body.index-page .ipcs {
        padding: 0.6rem 1rem !important;
        margin: 0.5rem !important;
}

body.index-page .ipcs h1.display-4 {
        font-size: 1.4rem;
}

body.index-page .ipcs p.lead {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
}

.toolbar-ccluster .toolbar-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap !important;
        padding-bottom: 0.3rem;
}
.toolbar-ccluster .toolbar-scroll::-webkit-scrollbar {
        height: 6px;
}
.toolbar-ccluster .toolbar-scroll::-webkit-scrollbar-thumb {
        background-color: #495057;
        border-radius: 3px;
}
.toolbar-ccluster .btn-mode,
.toolbar-ccluster .btn-mode-outline {
        flex-shrink: 0;
}
.toolbar-ccluster .toolbar-sep {
        flex-shrink: 0;
        width: 1px;
        align-self: stretch;
        background-color: #495057;
        margin: 0 0.25rem;
}

/* tighten sizing so the single toolbar row fits on one line more often */
.toolbar-ccluster .btn-mode,
.toolbar-ccluster .btn-mode-outline {
        font-size: 0.7rem;
        padding: 0.22rem 0.45rem;
}
.toolbar-ccluster input.form-control {
        max-width: 6.5rem;
}

/* keep each REF/BAND dropdown item on a single line, let the menu widen instead */
.toolbar-ccluster #ref-dropdown-menu,
.toolbar-ccluster #band-dropdown-menu {
        white-space: nowrap;
        min-width: max-content;
}
.toolbar-ccluster #ref-dropdown-menu .form-check-label,
.toolbar-ccluster #band-dropdown-menu .form-check-label {
        white-space: nowrap;
}

/* slightly bigger toolbar buttons */
.toolbar-ccluster .btn-mode,
.toolbar-ccluster .btn-mode-outline {
        font-size: 0.85rem;
        padding: 0.35rem 0.7rem;
}
.toolbar-ccluster input.form-control {
        font-size: 0.85rem;
        max-width: 8rem;
}