/*
 * 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;
}

/* per-row filter/QRZ icons added next to DE/DX callsigns */
.toolbar-row-icon {
    cursor: pointer;
    margin-left: 0.3rem;
}
.toolbar-row-icon:hover {
    opacity: 0.7;
}
.toolbar-entity-code {
    font-size: 0.8em;
}

/* make all spot table text bold */
#bodyspot {
    font-weight: bold;
}

/* icons column: keep the 3 icons aligned on one line */
.toolbar-icons-cell {
    white-space: nowrap;
}
.toolbar-row-icon {
    margin: 0 0.15rem;
}

/* bigger frequency badge */
.badge-responsive {
    font-size: 1.0rem !important;
    padding: 0.35rem 1.3rem !important;
    min-width: 5.5rem;
    display: inline-block;
    text-align: center;
}

/* DX callsign as a red/white badge, like web.cluster.iz3mez.it */
.badge-callsign-dx {
    background-color: #dc3545;
    color: #fff;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    font-weight: bold;
    font-size: 1.0rem;
}
.badge-callsign-de {
background-color: #198754;
color: #fff;
padding: 0.15rem 0.45rem;
border-radius: 0.25rem;
font-weight: bold;
    font-size: 1.0rem;
}

/* DX Cluster themed banner (dark navy + stylized globe + propagation rings) */
.ipcs {
background-image:
url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22260%22%20height%3D%22260%22%20viewBox%3D%220%200%20260%20260%22%3E%0A%3Ccircle%20cx%3D%22150%22%20cy%3D%22130%22%20r%3D%2295%22%20fill%3D%22none%22%20stroke%3D%22%234fc3f7%22%20stroke-width%3D%221.4%22%20opacity%3D%220.55%22/%3E%0A%3Cellipse%20cx%3D%22150%22%20cy%3D%22130%22%20rx%3D%2238%22%20ry%3D%2295%22%20fill%3D%22none%22%20stroke%3D%22%234fc3f7%22%20stroke-width%3D%221%22%20opacity%3D%220.35%22/%3E%0A%3Cellipse%20cx%3D%22150%22%20cy%3D%22130%22%20rx%3D%2268%22%20ry%3D%2295%22%20fill%3D%22none%22%20stroke%3D%22%234fc3f7%22%20stroke-width%3D%221%22%20opacity%3D%220.35%22/%3E%0A%3Cline%20x1%3D%2255%22%20y1%3D%22130%22%20x2%3D%22245%22%20y2%3D%22130%22%20stroke%3D%22%234fc3f7%22%20stroke-width%3D%221%22%20opacity%3D%220.35%22/%3E%0A%3Cellipse%20cx%3D%22150%22%20cy%3D%22130%22%20rx%3D%2295%22%20ry%3D%2222%22%20fill%3D%22none%22%20stroke%3D%22%234fc3f7%22%20stroke-width%3D%221%22%20opacity%3D%220.3%22/%3E%0A%3Cellipse%20cx%3D%22150%22%20cy%3D%22130%22%20rx%3D%2295%22%20ry%3D%2248%22%20fill%3D%22none%22%20stroke%3D%22%234fc3f7%22%20stroke-width%3D%221%22%20opacity%3D%220.3%22/%3E%0A%3Cellipse%20cx%3D%22150%22%20cy%3D%22130%22%20rx%3D%2295%22%20ry%3D%2272%22%20fill%3D%22none%22%20stroke%3D%22%234fc3f7%22%20stroke-width%3D%221%22%20opacity%3D%220.3%22/%3E%0A%3Ccircle%20cx%3D%22150%22%20cy%3D%22130%22%20r%3D%223%22%20fill%3D%22%23ffb300%22/%3E%0A%3Ccircle%20cx%3D%22150%22%20cy%3D%22130%22%20r%3D%2218%22%20fill%3D%22none%22%20stroke%3D%22%23ffb300%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6%22/%3E%0A%3Ccircle%20cx%3D%22150%22%20cy%3D%22130%22%20r%3D%2234%22%20fill%3D%22none%22%20stroke%3D%22%23ffb300%22%20stroke-width%3D%221%22%20opacity%3D%220.4%22/%3E%0A%3Ccircle%20cx%3D%22150%22%20cy%3D%22130%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ffb300%22%20stroke-width%3D%220.8%22%20opacity%3D%220.25%22/%3E%0A%3Ccircle%20cx%3D%22112%22%20cy%3D%2295%22%20r%3D%222.4%22%20fill%3D%22%234fc3f7%22/%3E%0A%3Ccircle%20cx%3D%22190%22%20cy%3D%22160%22%20r%3D%222.4%22%20fill%3D%22%234fc3f7%22/%3E%0A%3Ccircle%20cx%3D%22175%22%20cy%3D%2280%22%20r%3D%222.4%22%20fill%3D%22%234fc3f7%22/%3E%0A%3C/svg%3E"),
repeating-radial-gradient(circle at 75% 50%, rgba(79,195,247,0.07) 0, rgba(79,195,247,0.07) 1px, transparent 2px, transparent 36px),
linear-gradient(135deg, #050b14 0%, #0b1c2e 45%, #123049 75%, #081422 100%) !important;
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: right -10px center, right center, center;
background-size: 220px 220px, auto, cover;
}

/* === DXSPIDER-REF-CSS-BEGIN === */
/* --- REF lookup button + modal (#dxspiderRefModal), see ref.js --- */
.ref-lookup-btn {
	padding: 0 0.35rem;
	margin-left: 0.35rem;
	line-height: 1.6;
	/* Bootstrap's base .btn class sets its own resting color (and wins the
	   cascade tie against this same-specificity rule), but doesn't carry
	   !important - that's why :hover/:focus below (also plain, but with no
	   competing Bootstrap rule to lose to) already looked right while the
	   resting state didn't. Force it here too. */
	color: #ffffff !important;
	background: none;
	border: none;
}

.ref-lookup-btn:hover,
.ref-lookup-btn:focus {
	color: #fff;
}

#dxspiderRefModal .modal-content {
	background-color: #212529;
	color: #f8f9fa;
}

#dxspiderRefModal .modal-header,
#dxspiderRefModal .modal-footer {
	border-color: #495057;
}

/* Bootstrap's .text-muted relies on a CSS variable tuned for a light
   background - on our dark modal it comes out almost black-on-black.
   Force a readable light grey instead of relying on inheritance. */
#dxspiderRefModal .text-muted {
	color: #ced4da !important;
}

#dxspiderRefList {
	max-height: 55vh;
	overflow-y: auto;
}

.ref-entry {
	border: 1px solid #495057;
	border-radius: 0.3rem;
	background-color: #2b3035;
	padding: 0.3rem 0.6rem;
	margin-bottom: 0.3rem;
	font-size: 0.85rem;
	color: #f8f9fa;
}

.ref-entry code {
	color: #ffc107;
	background: none;
}
/* === DXSPIDER-REF-CSS-END === */

/* --- WHO modal (#whoModal): same dark modal treatment as the REF modal --- */
#whoModal .modal-content {
	background-color: #212529;
	color: #f8f9fa;
}

#whoModal .modal-header,
#whoModal .modal-footer {
	border-color: #495057;
}

/* --- HELP modal (#helpModal): toolbar usage guide, same dark modal treatment --- */
#helpModal .modal-content {
	background-color: #212529;
	color: #f8f9fa;
}

#helpModal .modal-header,
#helpModal .modal-footer {
	border-color: #495057;
}

#helpModal dt {
	color: #ffc107;
}

/*
 * CAT bridge (catbridge/op0p_catbridge.py) styling - only ever relevant
 * when the page is served through the local bridge, see catbridge.min.js.
 */
.catbridge-tunable {
	cursor: pointer;
}

.catbridge-tunable:hover,
.catbridge-tunable:focus {
	outline: 2px solid #28a745;
	outline-offset: 1px;
}

#catbridge-indicator {
	font-size: 0.85rem;
}

#catbridge-indicator.catbridge-ok {
	color: #28a745;
}

#catbridge-indicator.catbridge-err {
	color: #dc3545;
}