* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === SVG icon alignment and sizing tweaks === */
/* Align inline SVGs vertically with adjacent text */
.nav-tab > svg,
.theme-toggle > svg,
.burger-btn > svg,
h2 > svg,
h3 > svg,
.stat-icon > svg,
.resource-label > svg,
.flash-label > svg,
.uptime-label > svg,
.latency-label > svg,
.member-status > svg,
.tab-refresh-btn > svg,
.primary-node-info svg,
.upload-btn-compact > svg,
.deploy-btn > svg,
.upload-btn > svg,
.terminal-actions svg,
.terminal-dock-icon > svg {
    vertical-align: middle;
}

/* Monitoring view: slightly larger summary stat icons */
.summary-stats .stat-icon > svg {
    width: 22px;
    height: 22px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-primary);
    height: 100vh;  /* Fixed height instead of min-height */
    padding: 1rem;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;  /* Keep this to prevent body scrolling */
}

.container {
    max-width: none;  /* Remove width constraint for full screen coverage */
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 2rem;  /* Increase horizontal padding for better spacing */
    max-height: calc(100vh - 2rem);  /* Constrain to viewport height minus body padding */
    overflow: hidden;  /* Keep this to maintain layout constraints */
}

/* Header styles removed - integrated into navigation */

p {
    font-size: 1.2rem;
    opacity: 1;
    margin-bottom: 2rem;
}

.cluster-section {
    background: var(--bg-secondary);
    border-radius: 16px;
    backdrop-filter: var(--backdrop-blur);
    box-shadow: var(--shadow-primary);
    border: 1px solid var(--border-primary);
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.cluster-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cluster-header-left {
    /* Placeholder for future content if needed */
}

.primary-node-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border: 1px solid var(--border-primary);
    backdrop-filter: var(--backdrop-blur);
}

.primary-node-label {
    font-size: 0.9rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

.primary-node-ip {
    font-size: 0.9rem;
    color: var(--accent-primary);
    font-weight: 600;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    padding: 0.25rem 0.5rem;
    background: rgba(74, 222, 128, 0.1);
    border-radius: 4px;
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.primary-node-ip.discovering {
    color: var(--accent-warning);
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.2);
}

.primary-node-ip.error {
    color: var(--accent-error);
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.2);
    margin: 0;
    padding: 0.25rem 0.5rem;
}

.primary-node-ip.selecting {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
    animation: pulse 1.5s ease-in-out infinite alternate;
}

@keyframes pulse {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 1;
        transform: scale(1.05);
    }
}

.primary-node-refresh {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.primary-node-refresh:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.1);
}

.primary-node-refresh:active {
    transform: scale(0.95);
}

.firmware-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.firmware-header-left {
    /* Placeholder for future content if needed */
}

.refresh-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid var(--border-secondary);
    color: var(--text-secondary);
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: var(--backdrop-blur);
    margin: 0;
}

.refresh-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.refresh-btn:active {
    transform: translateY(0);
}

.refresh-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 0.3s ease;
}

.refresh-btn:hover .refresh-icon {
    transform: rotate(180deg);
}

.refresh-btn:disabled {
    opacity: 1;
    cursor: not-allowed;
    pointer-events: none;
}

.refresh-icon.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.75rem;
}

/* Responsive grid adjustments */
@media (max-width: 768px) {
    .members-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .members-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

.member-card {
	background: var(--bg-tertiary);
	border: 1px solid var(--border-primary);
	border-radius: 10px;
	padding: 1rem;
	transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
	cursor: pointer;
	position: relative;
	margin-bottom: 0.5rem;
	opacity: 1;
	z-index: 1;
	-webkit-tap-highlight-color: transparent;
}

/* Labels */
.member-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.label-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
    background: rgba(30, 58, 138, 0.35);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #dbeafe;
    white-space: nowrap;
}

.member-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-hover);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.member-card:hover::before {
    opacity: 1;
}

.member-card:hover {
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
	z-index: 2;
}

/* Disable hover effects on touch devices to prevent flicker */
@media (hover: none) {
	.member-card:hover::before {
		opacity: 0 !important;
	}
	.member-card:hover {
		box-shadow: none !important;
		z-index: 1 !important;
	}
}

.member-card.expanded {
	border-color: rgba(255, 255, 255, 0.2);
	box-shadow: var(--shadow-hover);
	z-index: 5;
    overflow: visible;  /* Allow content to expand */
}

.member-card.expanded:hover {
}

.expand-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    border-color: rgba(255, 255, 255, 0.2);
}

.expand-icon:hover svg {
}

.member-card.expanded .expand-icon {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text-secondary);
}

.member-card.expanded .expand-icon svg {
    transform: rotate(180deg);
}

.member-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.member-info {
    flex: 1;
}

.member-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.member-terminal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 6px;
    border: 1px solid var(--border-primary);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.member-terminal-btn:hover,
.member-terminal-btn:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    border-color: rgba(255, 255, 255, 0.2);
}

.member-terminal-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
}

.expand-icon {
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: auto;
    padding: 0.2rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.expand-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.member-details {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
	opacity: 0;
}

.member-card.expanded .member-details {
	max-height: none; /* Remove fixed limit to allow dynamic height */
	opacity: 1;
	overflow: visible;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.detail-label {
    opacity: 1;
    font-weight: 500;
}

.detail-value {
    font-family: 'Courier New', monospace;
    opacity: 1;
}

/* Monitoring Section Styles */
.monitoring-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.monitoring-header {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Resource Gauges Styles */
.resource-gauges {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.gauge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 130px;
    min-width: 80px;
    box-sizing: border-box;
}

.gauge {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 0.3rem;
}

/* Mobile responsive gauges */
@media (max-width: 768px) {
    .resource-gauges {
        justify-content: center;
        gap: 0.75rem;
        padding: 0.75rem;
    }
    
    .gauge-container {
        flex: 0 0 auto;
        max-width: 90px;
        min-width: 70px;
    }
    
    .gauge {
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 480px) {
    .resource-gauges {
        justify-content: center;
        gap: 0.75rem;
        padding: 0.5rem;
    }
    
    .gauge-container {
        flex: 0 0 calc(50% - 0.375rem);
        max-width: calc(50% - 0.375rem);
        min-width: 0;
    }
    
    .gauge {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 360px) {
    .resource-gauges {
        justify-content: center;
        gap: 0.5rem;
        padding: 0.25rem;
    }
    
    .gauge-container {
        flex: 0 0 calc(50% - 0.25rem);
        max-width: calc(50% - 0.25rem);
        min-width: 0;
    }
    
    .gauge {
        width: 80px;
        height: 80px;
        max-width: 100%;
        max-height: 100%;
    }
}

.gauge-circle {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    padding: 6px;
}

.gauge-circle::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    border-radius: 50%;
    background: var(--bg-primary);
    z-index: 1;
}

.gauge-circle::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    border-radius: 50%;
    background: conic-gradient(
        from -90deg,
        transparent 0deg,
        transparent calc(var(--percentage) * 3.6deg),
        var(--bg-primary) calc(var(--percentage) * 3.6deg),
        var(--bg-primary) 360deg
    );
    z-index: 2;
}

.gauge-text {
    position: relative;
    z-index: 3;
    text-align: center;
    color: var(--text-primary);
}

.gauge-value {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 0.1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.gauge-label {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.1rem;
}

.gauge-detail {
    font-size: 0.65rem;
    opacity: 0.5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
}

/* Responsive gauge text sizes */
@media (max-width: 768px) {
    .gauge-value {
        font-size: 1rem;
    }
    
    .gauge-label {
        font-size: 0.7rem;
    }
    
    .gauge-detail {
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .gauge-value {
        font-size: 0.9rem;
    }
    
    .gauge-label {
        font-size: 0.65rem;
    }
    
    .gauge-detail {
        font-size: 0.55rem;
    }
}

@media (max-width: 360px) {
    .gauge-value {
        font-size: 0.8rem;
    }
    
    .gauge-label {
        font-size: 0.6rem;
    }
    
    .gauge-detail {
        font-size: 0.5rem;
    }
}

/* Dynamic gauge colors based on percentage */
.gauge-empty .gauge-circle {
    background: rgba(255, 255, 255, 0.1);
}

.gauge-green .gauge-circle {
    background: conic-gradient(
        from -90deg,
        var(--accent-success) 0deg,
        var(--accent-success) calc(var(--percentage) * 3.6deg),
        rgba(255, 255, 255, 0.1) calc(var(--percentage) * 3.6deg),
        rgba(255, 255, 255, 0.1) 360deg
    );
}

.gauge-yellow .gauge-circle {
    background: conic-gradient(
        from -90deg,
        var(--accent-warning) 0deg,
        var(--accent-warning) calc(var(--percentage) * 3.6deg),
        rgba(255, 255, 255, 0.1) calc(var(--percentage) * 3.6deg),
        rgba(255, 255, 255, 0.1) 360deg
    );
}

.gauge-red .gauge-circle {
    background: conic-gradient(
        from -90deg,
        var(--accent-error) 0deg,
        var(--accent-error) calc(var(--percentage) * 3.6deg),
        rgba(255, 255, 255, 0.1) calc(var(--percentage) * 3.6deg),
        rgba(255, 255, 255, 0.1) 360deg
    );
}

/* Gauge value color based on usage level */
.gauge[data-percentage] .gauge-value {
    color: var(--text-primary);
}

/* Hover effects */
.gauge:hover .gauge-circle {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.gauge:hover .gauge-value {
    color: var(--accent-primary);
}

.api-endpoints {
    margin-top: 1rem;
}

.api-endpoints h4 {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    opacity: 1;
}

.endpoint-item {
    background: var(--bg-tertiary);
    padding: 0.5rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    font-family: 'Courier New', monospace;
    border: 1px solid var(--border-primary);
    transition: all 0.2s ease;
}

.endpoint-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.loading-details {
    text-align: center;
    padding: 1rem;
    opacity: 1;
    font-size: 0.9rem;
}

/* Compact member card layout */
.member-row-1 {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.status-hostname-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.member-row-2 {
    margin-top: 0.5rem;
}

.member-hostname {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
}

.member-ip {
    font-size: 0.85rem;
    opacity: 1;
    flex-shrink: 0;
}

.member-status,
.node-status-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border-radius: 50%;
    font-size: 0; /* prevent line-height affecting size */
    flex-shrink: 0;
}

.status-online {
    background: rgba(76, 175, 80, 0.3);
    color: var(--accent-success);
    border: 1px solid rgba(76, 175, 80, 0.5);
    border-radius: 50%;
}

.status-offline {
    background: rgba(244, 67, 54, 0.3);
    color: #f44336;
    border: 1px solid rgba(244, 67, 54, 0.5);
    border-radius: 50%;
}

.status-inactive {
    background: rgba(255, 152, 0, 0.3);
    color: #ff9800;
    border: 1px solid rgba(255, 152, 0, 0.5);
    border-radius: 50%;
}

/* Ensure the inner dot SVG fits nicely */
.member-status > svg,
.node-status-indicator > svg {
    width: 8px;
    height: 8px;
    display: block;
}

.member-latency {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
}

.latency-label {
    color: var(--text-tertiary);
    font-weight: 500;
}

.latency-value {
    color: var(--text-primary);
    font-weight: 600;
}

/* Tab Styles */
.tabs-container {
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 0.5rem;
}

.tabs-header {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 1rem;
    gap: 0.5rem;
}

.tab-button {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-secondary);
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border-bottom: none;
}

.tab-button:hover {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.25);
}

.tab-button.active {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Task Styles */
.task-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

/* Modern Tasks Summary Styles */
.tasks-summary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid var(--border-secondary);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: var(--backdrop-blur);
    box-shadow: var(--shadow-secondary);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tasks-summary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.tasks-summary:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

.tasks-summary-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.tasks-summary-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    transition: all 0.2s ease;
    min-width: 80px;
}

.summary-stat:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.summary-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.summary-stat-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-stat.total .summary-stat-value {
    color: var(--accent-primary);
}

.summary-stat.active .summary-stat-value {
    color: var(--accent-primary);
}

.summary-stat.stopped .summary-stat-value {
    color: var(--accent-error);
}

.summary-stat.disabled .summary-stat-value {
    color: var(--accent-warning);
}

.summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid var(--border-secondary);
    margin-right: 1rem;
    font-size: 1.5rem;
}

.summary-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.summary-subtitle {
    font-size: 0.9rem;
    color: var(--text-tertiary);
    font-weight: 400;
}

/* Responsive design for tasks summary */
@media (max-width: 768px) {
    .tasks-summary {
        flex-direction: column;
        gap: 1rem;
        padding: 0.75rem;
        text-align: center;
    }
    
    .tasks-summary-left {
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        justify-content: center;
    }
    
    .tasks-summary-right {
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
    }
    
    .summary-stat {
        min-width: 60px;
        padding: 0.4rem 0.6rem;
        flex: 0 0 auto;
    }
    
    .summary-stat-value {
        font-size: 1.1rem;
    }
    
    .summary-stat-label {
        font-size: 0.65rem;
    }
    
    .summary-icon {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
        margin-right: 0.5rem;
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .tasks-summary {
        padding: 0.5rem;
        gap: 0.75rem;
    }
    
    .tasks-summary-left,
    .tasks-summary-right {
        gap: 0.25rem;
    }
    
    .summary-stat {
        min-width: 50px;
        padding: 0.3rem 0.4rem;
        flex: 0 0 auto;
    }
    
    .summary-stat-value {
        font-size: 1rem;
    }
    
    .summary-stat-label {
        font-size: 0.6rem;
    }
    
    .summary-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
        margin-right: 0.25rem;
    }
}

.task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.task-name {
    font-weight: 600;
    color: var(--text-primary);
}

.task-status {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.task-status.running {
    background: rgba(76, 175, 80, 0.2);
    color: var(--accent-success);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.task-status.stopped {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.task-details {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    opacity: 1;
}

.task-interval, .task-enabled {
    background: var(--bg-tertiary);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Firmware Upload Styles */
.firmware-upload h4 {
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.upload-area {
    text-align: center;
    padding: 2rem;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: var(--bg-tertiary);
}

.upload-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid var(--border-secondary);
    color: var(--text-secondary);
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: var(--backdrop-blur);
    margin-bottom: 1rem;
    margin: auto;

}

.upload-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.upload-btn:active {
    transform: translateY(0);
}

.upload-info {
    font-size: 0.9rem;
    opacity: 1;
    color: var(--text-secondary);
}

/* Upload Status Styles */
#upload-status {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
}

.upload-progress {
    text-align: center;
    color: #ffa726;
}

.upload-success {
    text-align: center;
    color: var(--accent-success);
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.2);
    padding: 0.75rem;
    border-radius: 6px;
}

.upload-error {
    text-align: center;
    color: #f44336;
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.2);
    padding: 0.75rem;
    border-radius: 6px;
}

.upload-btn:disabled {
    opacity: 1;
    cursor: not-allowed;
    transform: none !important;
}

.no-tasks {
    text-align: center;
    padding: 2rem;
    opacity: 1;
}

.loading-tasks {
    text-align: center;
    padding: 1rem;
    opacity: 1;
    font-style: italic;
}

.loading {
    text-align: center;
    padding: 2rem;
    opacity: 1;
}

.error {
    background: rgba(244, 67, 54, 0.2);
    border: 1px solid rgba(244, 67, 54, 0.3);
    color: #ffcdd2;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
}

.empty-state {
    text-align: center;
    padding: 2rem;
    opacity: 1;
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Main Navigation Styles */
.main-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    background: var(--bg-tertiary);
    border-radius: 16px;
    padding: 0.5rem;
    border: 1px solid var(--border-primary);
    backdrop-filter: var(--backdrop-blur);
}

.nav-left {
    display: flex;
    gap: 0.25rem;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-tab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.nav-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-tab:hover {
    color: var(--text-secondary);
    transform: translateY(-1px);
}

.nav-tab:hover::before {
    opacity: 1;
}

.nav-tab.active {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.nav-tab.active::before {
    opacity: 0;
}

/* Cluster Status */
.cluster-status {
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.15) 0%, rgba(0, 255, 0, 0.08) 100%);
    border: 1px solid rgba(0, 255, 0, 0.25);
    color: #00ff88;
    padding: 0.75rem 1.25rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 8px rgba(0, 255, 0, 0.1);
    transition: all 0.3s ease;
}

/* Cluster Status States */
.cluster-status-online {
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.15) 0%, rgba(0, 255, 0, 0.08) 100%);
    border: 1px solid rgba(0, 255, 0, 0.25);
    color: #00ff88;
    box-shadow: 0 2px 8px rgba(0, 255, 0, 0.1);
}

.cluster-status-offline {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.15) 0%, rgba(255, 0, 0, 0.08) 100%);
    border: 1px solid rgba(255, 0, 0, 0.25);
    color: #ff6b6b;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.1);
}

.cluster-status-connecting {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.08) 100%);
    border: 1px solid rgba(255, 193, 7, 0.25);
    color: #ffd54f;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.1);
}

.cluster-status-discovering {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15) 0%, rgba(33, 150, 243, 0.08) 100%);
    border: 1px solid rgba(33, 150, 243, 0.25);
    color: #64b5f6;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
}

.cluster-status-error {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.15) 0%, rgba(244, 67, 54, 0.08) 100%);
    border: 1px solid rgba(244, 67, 54, 0.25);
    color: #ff8a80;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.1);
}

/* View Content Styles */
.view-content {
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    overflow-y: auto;  /* Allow vertical scrolling on content */
    max-height: 100%;  /* Allow content to use available height */
    flex: 1;  /* Take up available space */
    flex-direction: column;  /* Stack content vertically */
}

.view-content.active {
    display: flex;
    opacity: 1;
}

/* Special handling for cluster and firmware views to ensure proper width */
#cluster-view.active, #firmware-view.active, #monitoring-view.active {
    display: flex;  /* Use flex display for proper layout */
    flex-direction: column;  /* Stack content vertically */
    overflow-y: auto;  /* Allow vertical scrolling */
}

/* Firmware Section Styles */
.firmware-section {
    background: var(--bg-secondary);
    border-radius: 16px;
    backdrop-filter: var(--backdrop-blur);
    box-shadow: var(--shadow-primary);
    border: 1px solid var(--border-primary);
    padding: 0.75rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: visible;  /* Allow content to expand and scroll */
}

.firmware-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

/* Firmware header styles moved to general header section above */

/* Firmware Actions */
.firmware-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.action-group {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid var(--border-primary);
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.action-group:hover {
    background: var(--bg-tertiary);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.action-group h3 {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Compact Firmware Upload Interface */
.firmware-upload-compact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.compact-upload-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: transparent;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
}

.compact-upload-row::before {
    content: none;
}

.compact-upload-row:hover::before {
    opacity: 0;
}

.compact-upload-row:hover {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
    transform: none;
}

.file-upload-area {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.file-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    margin-top: 0.25rem;
}

.upload-btn-compact {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid var(--border-secondary);
    color: var(--text-secondary);
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: var(--backdrop-blur);
    white-space: nowrap;
}

.upload-btn-compact:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.upload-btn-compact:active {
    transform: translateY(0);
}

.file-info {
    color: var(--text-tertiary);
    font-size: 0.9rem;
    font-style: italic;
    transition: all 0.2s ease;
    padding: 0.75rem 1.25rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border: 1px solid var(--border-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.file-info:hover {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.file-info.has-file {
    color: var(--accent-primary);
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.2);
    font-weight: 500;
    font-style: normal;
}

.file-info.has-file:hover {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.3);
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.2);
}

.target-options {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-start;
    align-items: center;
    min-height: 36px;
}

.target-option {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
}

.target-option:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.target-option input[type="radio"] {
    display: none;
}

.radio-custom {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    position: relative;
    background: var(--bg-tertiary);
}

.target-option input[type="radio"]:checked + .radio-custom {
    border-color: #667eea;
    background: #667eea;
    box-shadow: none;
    transform: none;
}

.target-option input[type="radio"]:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    background: white;
    border-radius: 50%;
}

@keyframes radioPop {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.target-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.node-select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    cursor: pointer;
    min-width: 120px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.node-select:hover {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.node-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
    background: var(--bg-secondary);
}

/* Style the dropdown options */
.node-select option {
    background: #1a202c;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
}

.node-select option:hover {
    background: #2d3748;
}

.node-select option:checked {
    background: #667eea;
    color: var(--text-primary);
    font-weight: 600;
}

/* Ensure the select field text is always visible */
.node-select:invalid {
    color: var(--text-secondary);
}

.node-select:valid {
    color: var(--text-primary);
}

/* Style for no-nodes message */
.no-nodes-message {
    color: #fbbf24 !important;
    font-size: 0.8rem !important;
    margin-top: 0.25rem !important;
    font-style: italic !important;
    text-align: center;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: var(--bg-tertiary);
    border: 1px solid rgba(251, 191, 36, 0.3);
    transition: all 0.2s ease;
}

.no-nodes-message:hover {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(251, 191, 36, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.deploy-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid var(--border-secondary);
    color: var(--text-secondary);
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: var(--backdrop-blur);
    min-width: 100px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.deploy-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.deploy-btn:hover:not(:disabled)::before {
    left: 100%;
}

.deploy-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.deploy-btn:active:not(:disabled) {
    transform: translateY(0);
}

.deploy-btn:disabled {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.deploy-btn.loading {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1f2937;
    cursor: not-allowed;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .firmware-actions {
        gap: 0.75rem;
    }
    
    .action-group {
        padding: 0.75rem;
    }
    
    .compact-upload-row {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem;
    }
    
    .file-upload-area {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .file-input-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .upload-btn-compact {
        width: 100%;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    
    .target-options {
        justify-content: flex-start;
        gap: 0.75rem;
        flex-wrap: wrap;
        align-items: center;
        min-height: 40px;
    }
    
    .target-option {
        padding: 0.2rem 0.4rem;
        border-radius: 6px;
        display: flex;
        align-items: center;
        gap: 0.3rem;
    }
    
    .target-label {
        font-size: 0.8rem;
        white-space: nowrap;
    }
    
    .specific-node-option {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    
    .specific-node-option .node-select {
        margin-left: 0;
        min-width: auto;
        width: auto;
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
        flex: 1;
        min-width: 120px;
        max-width: 200px;
    }
    
    .deploy-btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        min-width: 120px;
    }
    
    .file-info {
        text-align: center;
        padding: 0.5rem;
        font-size: 0.85rem;
    }
    
    .radio-custom {
        width: 16px;
        height: 16px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .action-group {
        padding: 0.5rem;
    }
    
    .compact-upload-row {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    
    .upload-btn-compact {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .deploy-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        min-width: 100px;
    }
    
    .file-info {
        padding: 0.4rem;
        font-size: 0.8rem;
    }
    
    .target-label {
        font-size: 0.8rem;
    }
    
    .radio-custom {
        width: 14px;
        height: 14px;
    }
    
    .node-select {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
        min-width: 100px;
    }
    
    .target-options {
        gap: 0.75rem;
    }
    
    .target-option {
        padding: 0.2rem 0.4rem;
    }
} 

/* Firmware upload progress and results styling */
.firmware-upload-progress,
.firmware-upload-results {
    background: var(--bg-tertiary);
    border-radius: 16px;
    backdrop-filter: var(--backdrop-blur);
    box-shadow: var(--shadow-primary);
    border: 1px solid var(--border-primary);
    padding: 1.5rem;
    margin-top: 1rem;
    transition: all 0.2s ease;
}

.firmware-upload-progress:hover,
.firmware-upload-results:hover {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.progress-header,
.results-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.progress-header h3,
.results-header h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
}

.progress-header {
    position: relative;
}

.progress-refresh-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid var(--border-secondary);
    color: var(--text-secondary);
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: var(--backdrop-blur);
}

.progress-refresh-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.progress-refresh-btn:active {
    transform: translateY(0);
}

.progress-info,
.results-summary {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--text-tertiary);
}

.progress-info span,
.results-summary span {
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border: 1px solid var(--border-primary);
    transition: all 0.2s ease;
}

.progress-info span:hover,
.results-summary span:hover {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.overall-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.progress-bar-container {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: #fbbf24;
    border-radius: 4px;
    transition: width 0.3s ease, background-color 0.3s ease;
    width: 0%;
}

.progress-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
    min-width: 80px;
    text-align: right;
}

.progress-summary {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 10px;
    border: 1px solid var(--border-primary);
    transition: all 0.2s ease;
}

.progress-summary:hover {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.progress-summary span {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.success-count {
    color: #4ade80 !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
}

.failure-count {
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

.total-count {
    color: #60a5fa !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

.progress-list,
.results-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.progress-item,
.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 10px;
    border: 1px solid var(--border-primary);
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
}

.progress-item::before,
.result-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-hover);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.progress-item:hover::before,
.result-item:hover::before {
    opacity: 1;
}

.progress-item:hover,
.result-item:hover {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.progress-node-info,
.result-node-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.node-name {
    font-weight: 600;
    color: var(--text-primary);
}

.node-ip {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.progress-status,
.result-status {
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    min-width: 100px;
    text-align: center;
}

.progress-time {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    min-width: 120px;
    text-align: right;
}

.progress-status.success,
.result-status.success {
    background: rgba(74, 222, 128, 0.1);
    color: var(--accent-primary);
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.progress-status.error,
.result-status.error {
    background: rgba(248, 113, 113, 0.1);
    color: var(--accent-error);
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.progress-status.uploading {
    background: rgba(251, 191, 36, 0.1);
    color: var(--accent-warning);
    border: 1px solid rgba(251, 191, 36, 0.2);
    animation: pulse 1.5s ease-in-out infinite alternate;
}

.result-details {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    max-width: 300px;
    text-align: right;
}

.results-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.clear-btn,
.refresh-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid var(--border-secondary);
    color: var(--text-secondary);
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clear-btn:hover,
.refresh-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.clear-btn:active,
.refresh-btn:active {
    transform: translateY(0);
}

/* Responsive design for progress and results */
@media (max-width: 768px) {
    .progress-item,
    .result-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .progress-status,
    .result-status {
        align-self: flex-end;
    }
    
    .result-details {
        text-align: left;
        max-width: none;
    }
    
    .progress-info,
    .results-summary {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .results-actions {
        flex-direction: column;
    }
} 

/* Loading and state transitions */
.loading, .error, .empty-state {
    opacity: 0;
    animation: fadeIn 0.3s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth expand/collapse animations */
.member-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
    opacity: 0;
}

.member-card.expanded .member-details {
    opacity: 1;
}

/* Expand icon rotation */
.expand-icon svg {
    transition: transform 0.2s ease-in-out;
}

.member-card.expanded .expand-icon svg {
    transform: rotate(180deg);
}

/* Navigation tab transitions */
.nav-tab {
    transition: all 0.2s ease;
}

.nav-tab:hover {
    transform: translateY(-1px);
}

.nav-tab.active {
    transform: translateY(0);
} 

.specific-node-option {
    gap: 0.5rem;
    align-items: center;
}

.specific-node-option .node-select {
    margin-left: 0.5rem;
    display: none;
}


/* Capabilities Styles */
.endpoints-list {
	margin-top: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Custom dropdown wrapper and arrow for endpoint selector */
.endpoint-selector {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

#endpoint-select {
	padding-right: 2rem;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ecf0f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	background-size: 12px 12px;
}

.endpoint-item {
	background: var(--bg-tertiary);
	border: 1px solid var(--border-primary);
	border-radius: 8px;
	padding: 0.75rem;
}

.endpoint-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.endpoint-method {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	border: 1px solid var(--border-hover);
	background: rgba(255, 255, 255, 0.08);
	color: var(--text-secondary);
}

.endpoint-uri {
	font-family: 'Courier New', monospace;
	font-size: 0.85rem;
	opacity: 1;
	flex: 1;
}

.endpoint-call-btn {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
	border: 1px solid var(--border-secondary);
	color: var(--text-secondary);
	padding: 0.4rem 0.8rem;
	border-radius: 8px;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 500;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	backdrop-filter: var(--backdrop-blur);
}

.endpoint-call-btn:hover {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
	border-color: rgba(255, 255, 255, 0.25);
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.endpoint-form {
	gap: 0.5rem 0.75rem;
	margin-top: 0.5rem;
}

.endpoint-param {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	background: var(--bg-hover);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	padding: 0.5rem;
}

.param-name {
	font-size: 0.8rem;
	color: var(--text-secondary);
	font-weight: 500;
}

/* Adjust param-input to support <select> as well */
.param-input {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-primary);
	color: var(--text-primary);
	padding: 0.45rem 0.6rem;
	border-radius: 6px;
	outline: none;
	transition: border-color 0.2s ease, background 0.2s ease;
	font-size: 0.9rem;
	appearance: none;
}

/* Add dropdown arrow for select elements in param-input */
.param-input[type="select"],
select.param-input {
	padding-right: 2rem;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ecf0f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	background-size: 12px 12px;
}

.param-input option {
	background: #1f2937;
	color: var(--text-primary);
}

.param-input:focus {
	border-color: rgba(139, 92, 246, 0.5);
	background: rgba(139, 92, 246, 0.08);
	box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}

/* Ensure arrow stays visible on focus for select elements */
.param-input[type="select"]:focus,
select.param-input:focus {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ecf0f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	background-size: 12px 12px;
}

/* Boolean checkbox styling */
.boolean-input-container {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.param-input.boolean-checkbox {
	width: auto;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 1px solid var(--border-primary);
	border-radius: 4px;
	width: 16px;
	height: 16px;
	appearance: none;
	cursor: pointer;
	position: relative;
	transition: all 0.2s ease;
}

.param-input.boolean-checkbox:checked {
	background: var(--accent-primary);
	border-color: var(--accent-primary);
}

.param-input.boolean-checkbox:checked::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 10px;
	font-weight: bold;
}

.param-input.boolean-checkbox:focus {
	border-color: rgba(139, 92, 246, 0.5);
	box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}

.boolean-label {
	font-size: 0.9rem;
	color: var(--text-primary);
	cursor: pointer;
	user-select: none;
}

.endpoint-params.none {
	opacity: 1;
	font-size: 0.85rem;
	padding: 0.25rem 0.25rem 0 0.25rem;
}

.endpoint-result {
	margin-top: 0.5rem;
	border-radius: 8px;
	border: 1px solid var(--border-primary);
	background: var(--bg-tertiary);
	padding: 0.75rem;
}

.endpoint-call-success {
	color: var(--accent-success);
	background: rgba(76, 175, 80, 0.1);
	border: 1px solid rgba(76, 175, 80, 0.2);
	padding: 0.5rem;
	border-radius: 6px;
}

.endpoint-call-error {
	color: #f44336;
	background: rgba(244, 67, 54, 0.1);
	border: 1px solid rgba(244, 67, 54, 0.2);
	padding: 0.5rem;
	border-radius: 6px;
}

.endpoint-result-pre {
	margin-top: 0.5rem;
	white-space: pre-wrap;
	word-break: break-word;
	font-family: 'Courier New', monospace;
	font-size: 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 0.5rem;
	border-radius: 6px;
} 

/* Modernized Tab Styles (overrides) */
.tabs-container {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 0.75rem;
}

.tabs-header {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	backdrop-filter: var(--backdrop-blur);
	border-bottom: none;
}

/* Refresh button aligned to the right of tabs, blends with tab header */
.tabs-header .tab-refresh-btn {
	margin-left: auto;
	background: transparent;
	border: 1px solid transparent;
	color: var(--text-secondary);
	padding: 0.4rem;
	border-radius: 8px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tabs-header .tab-refresh-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--text-primary);
}
.tabs-header .tab-refresh-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.tab-button {
	background: transparent;
	border: 1px solid transparent;
	color: rgba(255, 255, 255, 0.75);
	padding: 0.5rem 1rem;
	border-radius: 10px;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.2px;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	position: relative;
}

.tab-button:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.95);
	transform: translateY(-1px);
}

.tab-button.active {
	background: rgba(255, 255, 255, 0.16);
	color: var(--text-primary);
	border-color: rgba(255, 255, 255, 0.24);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Animated underline indicator */
.tab-button::after {
	content: '';
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -6px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, #8b5cf6, #60a5fa);
	opacity: 0;
	transform: scaleX(0.4);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.tab-button.active::after {
	opacity: 1;
	transform: scaleX(1);
}

.tab-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

/* Content panel polish */
.tab-content {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 0.75rem;
	background: var(--bg-tertiary);
	backdrop-filter: var(--backdrop-blur);
}

.tab-content.active {
	animation: tabFadeIn 0.2s ease-out;
}

@keyframes tabFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Small screens: allow horizontal scroll of tabs */
@media (max-width: 640px) {
	.tabs-header {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.tab-button {
		white-space: nowrap;
	}
} 

/* Lighter Tab Theme (final overrides) */
.tabs-container {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--border-primary);
}

.tabs-header {
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.tab-button {
	color: rgba(255, 255, 255, 0.85);
}

.tab-button:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.18);
}

.tab-button.active {
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.32);
}

.tab-button::after {
	background: linear-gradient(90deg, #a78bfa, #93c5fd);
	bottom: -4px;
}

.tab-content {
	border: 1px solid var(--border-primary);
	background: rgba(255, 255, 255, 0.08);
} 

/* Active tab: no background or border (keep underline) */
.tab-button.active {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.tab-button.active:hover {
	background: transparent;
	border-color: transparent;
} 

/* Preserve focus ring on active tab */
.tab-button.active:focus-visible {
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
} 

/* Responsive Capability Selector */
@media (max-width: 768px) {
	.endpoint-selector {
		flex-wrap: wrap;
		align-items: stretch;
	}
	#endpoint-select {
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
}

@media (max-width: 480px) {
	#endpoint-select {
		padding-right: 1.75rem;
		background-position: right 0.5rem center;
		background-size: 10px 10px;
	}
	
	/* Responsive styles for param-input select elements */
	.param-input[type="select"],
	select.param-input {
		padding-right: 1.75rem;
		background-position: right 0.5rem center;
		background-size: 10px 10px;
	}
	
	/* Ensure arrow stays visible on focus for mobile */
	.param-input[type="select"]:focus,
	select.param-input:focus {
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ecf0f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
		background-repeat: no-repeat;
		background-position: right 0.5rem center;
		background-size: 10px 10px;
	}
} 

/* Endpoint header mobile wrapping */
@media (max-width: 768px) {
	.endpoint-header {
		flex-wrap: wrap;
	}
	.endpoint-uri {
		flex: 1 1 100%;
		min-width: 0;
	}
	.endpoint-call-btn {
		flex: 1 1 100%;
		width: 100%;
		justify-content: center;
		margin-top: 0.5rem;
	}
}

@media (max-width: 480px) {
	.endpoint-call-btn {
		padding: 0.35rem 0.75rem;
	}
} 

.label-select {
	background: var(--bg-tertiary);
	border: 1px solid var(--border-primary);
	color: var(--text-primary);
	padding: 0.3rem 2rem 0.3rem 0.5rem;
	border-radius: 6px;
	font-size: 0.8rem;
	transition: all 0.2s ease;
	cursor: pointer;
	min-width: 160px;
	font-weight: 500;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
	appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ecf0f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	background-size: 12px 12px;
}

.label-select:hover {
	background-color: rgba(0, 0, 0, 0.25);
	border-color: rgba(255, 255, 255, 0.15);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transform: translateY(-1px);
}

.label-select:focus {
	outline: none;
	border-color: #667eea;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
	background-color: rgba(0, 0, 0, 0.3);
}

.label-select option {
	background: #1a202c;
	color: var(--text-primary);
}

.label-select option:hover {
	background: #2d3748;
}

.label-select option:checked {
	background: #667eea;
	color: var(--text-primary);
	font-weight: 600;
}

.label-select:invalid {
	color: var(--text-secondary);
}

.label-select:valid {
	color: var(--text-primary);
}

.selected-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-left: 0.5rem;
	max-width: 100%;
}

.label-chip.removable {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding-right: 0.35rem;
	background: rgba(30, 58, 138, 0.35);
	border: 1px solid rgba(59, 130, 246, 0.55);
}

.label-chip .chip-remove {
	appearance: none;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	font-size: 0.85rem;
	line-height: 1;
	padding: 0 0.25rem;
	border-radius: 9999px;
	transition: background 0.15s ease, transform 0.15s ease;
}

.label-chip .chip-remove:hover {
	background: rgba(255, 255, 255, 0.12);
	transform: scale(1.05);
}

@media (max-width: 768px) {
	.by-label-option {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
		width: 100%;
		flex-wrap: wrap;
	}
	.by-label-option .target-label {
		white-space: nowrap;
	}
	.by-label-option .label-select {
		flex: 0 1 55%;
		min-width: 120px;
		max-width: 60%;
	}
	#selected-labels-container.selected-labels {
		flex: 1 1 100%;
		min-width: 0;
		margin-left: 0;
	}
}

@media (max-width: 480px) {
	.label-select {
		padding: 0.3rem 1.5rem 0.3rem 0.5rem;
		background-position: right 0.4rem center;
		background-size: 10px 10px;
	}
} 

.compact-upload-row,
.file-upload-area,
.file-input-wrapper {
	max-width: 100%;
}

.label-select {
	max-width: 100%;
}

/* Keep By Label on a single line for the label + select, but allow chips to wrap below */
@media (max-width: 768px) {
	.by-label-option {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
		width: 100%;
		flex-wrap: wrap;
	}
	.by-label-option .target-label {
		white-space: nowrap;
	}
	.by-label-option .label-select {
		flex: 0 1 55%;
		min-width: 120px;
		max-width: 60%;
	}
	#selected-labels-container.selected-labels {
		flex: 1 1 100%;
		min-width: 0;
		margin-left: 0;
	}
}

/* Burger menu */
.burger-btn {
	display: none;
	background: transparent;
	border: 1px solid var(--border-secondary);
	color: var(--text-secondary);
	padding: 0.5rem;
	border-radius: 10px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

.burger-btn svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	stroke-width: 2;
}

@media (max-width: 768px) {
	.main-navigation {
		position: relative;
		z-index: 1000;
	}
	.burger-btn {
		display: inline-flex;
		margin-right: 0.5rem;
	}
	.nav-left {
		display: none;
	}
	.main-navigation.mobile-open .nav-left {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--bg-primary);
		border: 1px solid var(--border-primary);
		border-radius: 12px;
		padding: 0.5rem;
		gap: 0.25rem;
		z-index: 1100;
	}
	.main-navigation.mobile-open .nav-left .nav-tab {
		width: 100%;
		text-align: left;
	}
}

/* Topology View Styles */
#topology-view {
    flex: 1;  /* Take up remaining space */
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;  /* Use full container width */
    min-height: 0;  /* Allow flex item to shrink */
    max-height: 100vh;  /* Never exceed viewport height */
    overflow: hidden;  /* Keep this for topology view since it has its own scrolling */
}

/* Ensure other views work properly with flexbox */
#cluster-view, #firmware-view {
    flex: 0 0 auto;  /* Don't grow or shrink, use natural size */
    width: 100%;  /* Use full container width */
}

#topology-graph-container {
    background: var(--bg-tertiary);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border-primary);
    box-sizing: border-box;
    max-height: 100%;  /* Ensure it doesn't exceed parent height */
}

#topology-graph-container svg {
    width: 100%;
    height: 100%;
}

#topology-graph-container .loading,
#topology-graph-container .error,
#topology-graph-container .no-data {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 1.1rem;
}

#topology-graph-container .error {
    color: var(--accent-error);
}

#topology-graph-container .no-data {
    color: rgba(255, 255, 255, 0.5);
}

/* Node and link styles for the graph */
.node circle {
    cursor: pointer;
    transition: all 0.2s ease;
}

.node text {
    pointer-events: none;
    user-select: none;
}

.node:hover circle {
    stroke-width: 3;
    stroke: #60a5fa;
}

/* Legend styles */
.legend text {
    pointer-events: none;
    user-select: none;
}

.legend line {
    pointer-events: none;
}

/* Graph container enhancements */
#members-graph-container {
    position: relative;
}

#members-graph-container svg {
    width: 100%;
    height: 100%;
}

/* Member Card Overlay Styles */
.member-card-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.member-card-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.member-overlay-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s ease;
}

.member-card-overlay.visible .member-overlay-content {
    transform: scale(1) translateY(0);
}

.member-overlay-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.member-overlay-header .member-info {
    flex: 1;
    margin-right: 16px;
}

.member-overlay-header .member-info .member-row-1 {
    margin-bottom: 8px;
}

.member-overlay-header .member-info .member-hostname {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.member-overlay-header .member-info .member-ip {
    font-size: 1rem;
    color: var(--text-secondary);
}

.member-overlay-header .member-info .member-latency {
    font-size: 0.9rem;
    color: var(--text-tertiary);
}

.member-overlay-header .member-info .member-status {
    font-size: 1.2rem;
    margin-right: 8px;
}

.member-overlay-header .member-info .member-labels {
    margin-top: 12px;
}

.member-overlay-header .member-info .member-labels .label-chip {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 4px;
    background: rgba(30, 58, 138, 0.35);
    color: #dbeafe;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    border: 1px solid rgba(59, 130, 246, 0.4);
    font-family: inherit;
    white-space: nowrap;
}

.member-overlay-subtitle {
    font-size: 1rem;
    color: var(--text-tertiary);
    font-family: 'Courier New', monospace;
}

.member-overlay-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-overlay-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.member-overlay-close svg {
    width: 20px;
    height: 20px;
}


.member-overlay-section {
    margin-bottom: 24px;
}

/* Member card container within overlay */
.member-overlay-body {
    padding: 0;
    overflow: auto;
    max-height: calc(90vh - 120px); /* Account for header */
}

/* Ensure member cards render properly in overlay */
.member-overlay-body .member-card {
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

.member-overlay-body .member-card .member-header {
    padding: 20px 24px 0px;
    border-bottom: none;
}

/* Hide expand icon in overlay since card is always expanded */
.member-overlay-body .member-card .expand-icon {
    display: none;
}

/* Hide expand icon on desktop screens */
@media (min-width: 1025px) {
    .expand-icon {
        display: none;
    }
}

/* Ensure expanded state is visually clear */
.member-overlay-body .member-card.expanded .member-details {
    display: block;
}

/* Disable hover effects on topology dialog member cards */
.member-overlay-body .member-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

.member-overlay-body .member-card::before {
    display: none !important;
}

.member-overlay-body .member-card .member-header:hover {
    background: none !important;
}

/* Label chips styling for overlay */
.member-overlay-body .member-labels {
    margin-top: 16px;
}

/* unified with .label-chip */
.member-overlay-body .label-chip {
    margin-right: 10px;
    background: rgba(30, 58, 138, 0.35);
    color: #dbeafe;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    border: 1px solid rgba(59, 130, 246, 0.4);
    font-family: inherit;
    white-space: nowrap;
    display: inline-flex;
}

/* Desktop slide-in details drawer */
.details-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: clamp(33.333vw, 650px, 90vw);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-left: 1px solid var(--border-primary);
    box-shadow: var(--shadow-primary);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}
.details-drawer.open { transform: translateX(0); }

.details-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-secondary);
    background: var(--bg-secondary);
}
.details-drawer-header .drawer-title {
    font-weight: 600;
}
.details-drawer-header .drawer-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.drawer-terminal-btn {
    background: transparent;
    border: 1px solid var(--border-secondary);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 0.35rem;
    cursor: pointer;
}
.drawer-terminal-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.drawer-terminal-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
}
.drawer-close {
    background: transparent;
    border: 1px solid var(--border-secondary);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 0.35rem;
    cursor: pointer;
}
.drawer-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.drawer-close svg { width: 18px; height: 18px; }

.details-drawer-content {
    padding: 1rem;
    overflow: auto;
}

/* Only enable drawer on wider screens; on small keep inline cards */
@media (max-width: 1023px) {
    .details-drawer { display: none; }
}

/* Terminal Panel - bottom-centered modal style */
.terminal-panel-container {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center; /* bottom-centered by default */
    z-index: 1001;
    pointer-events: none;
}

/* When the right drawer is open, dock the terminal to the right and offset by drawer width */
.terminal-panel-container.drawer-open {
    /* Bottom-aligned; keep panel centered while reserving space for drawer */
    align-items: flex-end;
    justify-content: center;
    /* reserve space equal to drawer width */
    margin-right: clamp(33.333vw, 650px, 90vw);
}

.terminal-panel {
    position: fixed; /* lock to viewport to avoid container reflow */
    left: 50%;
    bottom: 1.5rem;
    width: 33.333vw; /* 1/3 of the screen by default */
    height: min(45vh, 520px);
    max-height: 65vh;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
    transform: translateX(-50%);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    border-radius: 12px;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    z-index: 1002;
}

/* Desktop layout: terminal takes 1/3 of the screen and fills height when docked */
@media (min-width: 1024px) {
    .terminal-panel-container.drawer-open .terminal-panel {
        /* Keep terminal width EXACTLY the same as non-drawer state */
        width: 33.333vw;
        max-width: none;
        /* Keep terminal height consistent with non-docked state */
        height: min(45vh, 520px);
        max-height: 65vh;
        border-radius: 12px;
        /* Keep same centering transform to avoid jump */
    }
}

/* Mobile layout: terminal spans full width */
@media (max-width: 1023px) {
    .terminal-panel-container {
        margin-right: 0;
        justify-content: center;
        align-items: flex-end;
    }
    .terminal-panel {
        width: 100vw;
        max-width: 100vw;
    }
}

.terminal-panel.minimized {
    display: none;
}

.terminal-panel.visible {
    transform: translateX(-50%);
    opacity: 1;
}

.terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-secondary);
    background: var(--bg-secondary);
    border-radius: 12px 12px 0 0;
}
.terminal-title {
    font-weight: 600;
    font-size: 0.95rem;
}
.terminal-actions {
    display: flex;
    gap: 0.5rem;
}
.terminal-actions button {
    background: transparent;
    border: 1px solid var(--border-secondary);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}
.terminal-actions button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.terminal-actions .terminal-minimize-btn {
    width: 2rem;
    padding: 0.25rem 0;
    font-size: 1rem;
    line-height: 1;
}

.terminal-body {
    flex: 1;
    overflow: auto;
    padding: 0.5rem 0.75rem;
}
.terminal-log {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: "Courier New", monospace;
    font-size: 0.85rem;
    color: var(--text-primary);
}
.terminal-input-row {
    display: flex;
    gap: 0.5rem;
    border-top: 1px solid var(--border-secondary);
    padding: 0.5rem;
    background: var(--bg-secondary);
}
.terminal-input {
    flex: 1;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
}
.terminal-input-row .terminal-clear-btn {
    background: transparent;
    border: 1px solid var(--border-secondary);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
}
.terminal-input-row .terminal-clear-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.terminal-send-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
}
.terminal-send-btn:hover {
    filter: brightness(1.05);
}

.terminal-dock {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    display: none;
    pointer-events: none;
}

.terminal-dock.visible {
    display: flex;
}

.terminal-dock-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(21, 31, 46, 0.85);
    backdrop-filter: blur(14px);
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    pointer-events: auto;
}

.terminal-dock-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(0,0,0,0.35);
    background: rgba(35, 49, 68, 0.95);
}

.terminal-dock-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.terminal-dock-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
}

.terminal-dock-label {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Topology hover tooltip for labels */
.topology-tooltip {
    position: fixed;
    z-index: 1001;
    pointer-events: none;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-secondary);
    border-radius: 10px;
    padding: 0.5rem 0.6rem;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.topology-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}
.topology-tooltip .member-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.topology-tooltip .label-chip {
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
}

/* Labels section styling in node details */
.detail-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-section-title {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: capitalize;
}

/* Resource and API chips styling */
.member-resources, .member-api {
    margin-top: 16px;
}

.resources-title, .api-title {
    color: var(--text-tertiary);
    font-size: 0.9rem;
    margin-bottom: 12px;
    font-weight: 500;
}

.resources-container, .api-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.resource-chip, .api-chip {
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent-secondary);
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    border: 1px solid rgba(59, 130, 246, 0.3);
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}



.api-chip {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

/* Highlight animation for member cards */
.member-card.highlighted {
    animation: highlight-pulse 2s ease-in-out;
}

/* Selected member card styling */
.member-card.selected {
    border-color: #3b82f6 !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 8px 25px rgba(0, 0, 0, 0.2) !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, var(--bg-tertiary) 100%) !important;
    z-index: 10 !important;
}

.member-card.selected::before {
    opacity: 0.8 !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%) !important;
}

.member-card.selected .member-header {
    background: rgba(59, 130, 246, 0.05) !important;
}

.member-card.selected .member-status {
    filter: brightness(1.2) !important;
}

.member-card.selected .member-hostname {
    color: #3b82f6 !important;
    font-weight: 600 !important;
}

.member-card.selected .member-ip {
    color: #60a5fa !important;
}

@keyframes highlight-pulse {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
    }
}

/* Responsive design for overlay */
@media (max-width: 768px) {
	.member-overlay-content {
		width: 95%;
		max-width: none;
		margin: 20px;
	}
	
	.member-overlay-header {
		padding: 20px 20px 12px;
	}
	
	.member-overlay-header .member-info .member-hostname {
		font-size: 1.3rem;
	}
	
	.member-overlay-body {
		padding: 0px;
	}
	
	.member-overlay-actions {
		flex-direction: column;
	}
	
	/* Compact layout adjustments for mobile */
	.member-overlay-header .member-info .member-row-1 {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	
	.member-overlay-header .status-hostname-group {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}
	
	.member-overlay-header .member-status,
	.member-overlay-header .member-hostname,
	.member-overlay-header .member-ip,
	.member-overlay-header .member-latency {
		flex-shrink: 1;
	}
	
	/* Keep status and hostname together on mobile */
	.member-overlay-header .member-status {
		min-width: 1.3rem;
		min-height: 1.3rem;
	}
	
	.member-overlay-header .member-info .member-labels {
		margin-top: 8px;
	}
	
	.member-overlay-header .member-info .member-labels .label-chip {
		font-size: 0.7rem;
		padding: 0.2rem 0.5rem;
		margin-right: 6px;
		margin-bottom: 3px;
	}
}

/* Compact mobile layout for overlay */
@media (max-width: 480px) {
	.member-overlay-content {
		width: calc(100% - 16px);
		margin: 8px;
		border-radius: 12px;
	}

	.member-overlay-header {
		padding: 12px 14px 8px;
	}

	.member-overlay-body {
		padding: 0px;
		max-height: calc(90vh - 80px);
	}

	/* Further compact layout for very small screens */
	.member-overlay-header .member-info .member-row-1 {
		gap: 0.25rem;
	}
	
	.member-overlay-header .member-info .member-hostname {
		font-size: 1rem;
	}
	
	.member-overlay-header .member-info .member-ip {
		font-size: 0.8rem;
	}
	
	.member-overlay-header .member-info .member-status {
		font-size: 0.8rem;
		padding: 0.15rem;
		min-width: 1.1rem;
		min-height: 1.1rem;
	}
	
	.member-overlay-header .member-info .member-labels {
		margin-top: 6px;
	}
	
	.member-overlay-header .member-info .member-labels .label-chip {
		font-size: 0.65rem;
		padding: 0.15rem 0.4rem;
		margin-right: 4px;
		margin-bottom: 2px;
	}
}

/* Test page styles */
.test-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
}

.test-section h2 {
    color: var(--text-primary);
    margin-top: 0;
}

#test-overlay-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

#test-overlay-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    transform: translateY(-1px);
}

/* Loading and error states */
.loading, .error, .no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 1.1rem;
    color: var(--text-tertiary);
}

.loading div {
    text-align: center;
}

.error div {
    color: var(--accent-error);
    text-align: center;
}

.no-data div {
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

/* Responsive design for progress and results */
@media (max-width: 768px) {
	.progress-info,
	.results-summary {
		flex-direction: column;
		gap: 0.5rem;
	}
	
	.progress-info span,
	.results-summary span {
		text-align: center;
	}
	
	.overall-progress {
		flex-direction: column;
		gap: 0.75rem;
	}
	
	.progress-text {
		text-align: center;
		min-width: auto;
	}
	
	.results-actions {
		flex-direction: column;
		gap: 0.75rem;
	}
	
	.clear-btn,
	.refresh-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Mobile-responsive cluster header toolbar */
@media (max-width: 480px) {
	.cluster-header {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
		padding: 0.75rem 0.5rem;
	}
	
	.cluster-header-left {
		display: flex;
		justify-content: center;
	}
	
	.primary-node-info {
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
		padding: 0.75rem;
		text-align: center;
	}
	
	.primary-node-label {
		font-size: 0.95rem;
	}
	
	.primary-node-ip {
		font-size: 0.95rem;
		padding: 0.4rem 0.6rem;
	}
	
	.primary-node-refresh {
		padding: 0.4rem;
		margin-top: 0;
	}
	
	.refresh-btn {
		width: 100%;
		justify-content: center;
		padding: 0.75rem;
		font-size: 0.95rem;
	}
}

#cluster-members-container {
    overflow-y: auto;  /* Allow vertical scrolling */
    max-height: calc(100vh - 200px);  /* Leave space for header and navigation */
    padding-right: 0.5rem;  /* Add some padding for scrollbar */
}

#firmware-container {
    overflow-y: auto;  /* Allow vertical scrolling */
    max-height: calc(100vh - 200px);  /* Leave space for header and navigation */
    padding-right: 0.5rem;  /* Add some padding for scrollbar */
}

/* Ensure proper scrolling for expanded member cards */
.member-card.expanded {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-hover);
    z-index: 5;
    overflow: visible;  /* Allow content to expand */
}

/* Custom scrollbar styling for better UX */
.view-content::-webkit-scrollbar,
#cluster-members-container::-webkit-scrollbar,
#firmware-container::-webkit-scrollbar {
    width: 8px;
}

.view-content::-webkit-scrollbar-track,
#cluster-members-container::-webkit-scrollbar-track,
#firmware-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.view-content::-webkit-scrollbar-thumb,
#cluster-members-container::-webkit-scrollbar-thumb,
#firmware-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.view-content::-webkit-scrollbar-thumb:hover,
#cluster-members-container::-webkit-scrollbar-thumb:hover,
#firmware-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.firmware-nodes-list {
    overflow-y: auto;  /* Allow vertical scrolling */
    max-height: calc(100vh - 300px);  /* Leave space for header, navigation, and upload area */
    padding-right: 0.5rem;  /* Add some padding for scrollbar */
}

.firmware-nodes-list::-webkit-scrollbar {
    width: 8px;
}

.firmware-nodes-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.firmware-nodes-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.firmware-nodes-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Responsive scrolling adjustments */
@media (max-width: 768px) {
    #cluster-members-container,
    #firmware-container,
    .firmware-nodes-list {
        max-height: calc(100vh - 180px);  /* Adjust for mobile layout */
        padding-right: 0.25rem;  /* Reduce padding on mobile */
    }
    
    .view-content {
        max-height: calc(100vh - 180px);  /* Adjust for mobile layout */
    }
}

@media (max-width: 480px) {
    #cluster-members-container,
    #firmware-container,
    .firmware-nodes-list {
        max-height: calc(100vh - 160px);  /* Further adjust for small screens */
        padding-right: 0.25rem;
    }
    
    .view-content {
        max-height: calc(100vh - 160px);  /* Further adjust for small screens */
    }
}

/* Ensure smooth scrolling behavior */
html {
    scroll-behavior: smooth;
}

/* Improve touch scrolling on mobile devices */
.view-content,
#cluster-members-container,
#firmware-container,
.firmware-nodes-list {
    -webkit-overflow-scrolling: touch;  /* Smooth scrolling on iOS */
    scrollbar-width: thin;  /* Thin scrollbar on Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);  /* Firefox scrollbar colors */
}

/* Mobile width optimization: maximize horizontal space */
@media (max-width: 768px) {
	body {
		padding: 0.5rem;
	}
	.container {
		padding: 0 0.5rem;
		max-height: calc(100vh - 1rem);
	}
	.cluster-section,
	.firmware-section {
		padding: 0.5rem;
	}
	.main-navigation {
		padding: 0.25rem;
	}
	.nav-tab {
		padding: 0.6rem 0.8rem;
	}
	.members-grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 0.5rem;
	}
}

@media (max-width: 480px) {
	body {
		padding: 0.25rem;
	}
	.container {
		padding: 0 0.25rem;
		max-height: calc(100vh - 0.5rem);
	}
	.member-card {
		padding: 0.75rem;
	}
	.main-navigation {
		padding: 0.25rem;
	}
}

@media (max-width: 768px) {
	/* Use single scroll on mobile: let the page/body scroll */
	body {
		height: auto;
		min-height: 100vh;
		overflow-y: auto;
	}
	.container {
		max-height: none;
		overflow: visible;
	}
	.view-content,
	#cluster-view.active {
		max-height: none;
		overflow: visible;
	}
	#cluster-members-container,
	#firmware-container,
	.firmware-nodes-list {
		max-height: none;
		overflow: visible;
		padding-right: 0;
	}
}

@media (max-width: 480px) {
	/* Make primary node section more compact */
	.cluster-header {
		gap: 0.5rem;
		padding: 0.5rem 0;
	}
	.primary-node-info {
		gap: 0.35rem;
		padding: 0.35rem 0.5rem;
	}
	.primary-node-label {
		font-size: 0.8rem;
	}
	.primary-node-ip {
		font-size: 0.85rem;
		padding: 0.2rem 0.4rem;
	}
	.primary-node-refresh {
		padding: 0.3rem;
	}
}

/* Reduce tap highlight and flicker in firmware view */
#firmware-view,
.upload-btn,
.upload-btn-compact,
.deploy-btn,
.cap-call-btn,
.progress-refresh-btn,
.clear-btn,
.refresh-btn,
.progress-item,
.result-item,
.file-info {
	-webkit-tap-highlight-color: transparent;
}

/* Disable hover-driven animations/effects on touch devices in firmware view */
@media (hover: none) {
	#firmware-view .upload-btn:hover,
	#firmware-view .upload-btn-compact:hover,
	#firmware-view .deploy-btn:hover:not(:disabled),
	#firmware-view .progress-refresh-btn:hover,
	#firmware-view .cap-call-btn:hover,
	#firmware-view .clear-btn:hover,
	#firmware-view .refresh-btn:hover,
	#firmware-view .progress-item:hover,
	#firmware-view .result-item:hover,
	#firmware-view .firmware-upload-progress:hover,
	#firmware-view .firmware-upload-results:hover,
	#firmware-view .file-info:hover {
		transform: none !important;
		box-shadow: none !important;
	}

	#firmware-view .progress-item:hover::before,
	#firmware-view .result-item:hover::before {
		opacity: 0 !important;
	}

	/* Prevent shimmer animation on deploy button hover */
	#firmware-view .deploy-btn:hover:not(:disabled)::before {
		left: -100% !important;
	}
}

/* Cluster view specific error styling */
#cluster-members-container .error {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    margin-top: 0.75rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.15) 0%, rgba(244, 67, 54, 0.08) 100%);
    border: 1px solid rgba(244, 67, 54, 0.35);
    color: #ffcdd2;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    height: auto;              /* override global 100% height */
    justify-content: flex-start; /* override global centering */
    text-align: left;          /* ensure left alignment */
}

#cluster-members-container .error::before {
    content: '⚠️';
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
}

#cluster-members-container .error strong {
    color: #ffebee;
    font-weight: 700;
    margin-right: 0.25rem;
}

#cluster-members-container .error br {
    display: none; /* tighten layout by avoiding forced line-breaks */
}
/* Color picker styles */
.color-input-container {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.color-picker {
	width: 50px !important;
	height: 35px !important;
	padding: 0 !important;
	border-radius: 6px !important;
	cursor: pointer;
}

.color-rgb-display {
	background: rgba(0, 0, 0, 0.3) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	color: rgba(255, 255, 255, 0.9) !important;
	text-align: center;
	font-family: 'Courier New', monospace !important;
}

/* Number range slider styles */
.number-range-container {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.range-slider {
	width: 100%;
	height: 6px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	outline: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.range-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	background: var(--accent-primary);
	border-radius: 50%;
	cursor: pointer;
	border: 2px solid var(--bg-secondary);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.range-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	background: var(--accent-primary);
	border-radius: 50%;
	cursor: pointer;
	border: 2px solid var(--bg-secondary);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.range-slider::-webkit-slider-track {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	height: 6px;
}

.range-slider::-moz-range-track {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	height: 6px;
	border: none;
}

.range-display {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.9rem;
	color: var(--text-secondary);
}

.range-value {
	font-weight: 600;
	color: var(--accent-primary);
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.range-max {
	opacity: 0.7;
}

.color-rgb-display:focus {
	border-color: rgba(139, 92, 246, 0.5) !important;
	background: rgba(139, 92, 246, 0.08) !important;
}

/* Monitoring View Styles */
.monitoring-view-section {
    background: var(--bg-secondary);
    border-radius: 16px;
    backdrop-filter: var(--backdrop-blur);
    box-shadow: var(--shadow-primary);
    border: 1px solid var(--border-primary);
    padding: 1rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: visible;
}

.monitoring-view-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.monitoring-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-primary);
}

.monitoring-header h2 {
    color: var(--text-primary);
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.monitoring-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
    min-height: 0;
}

/* Cluster Summary Styles */
.cluster-summary-content {
    /*
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-primary);*/
}

.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.summary-header h3 {
    color: var(--text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.last-updated {
    color: var(--text-secondary);
    font-size: 0.875rem;
    opacity: 0.8;
}

.summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.stat-card {
    background: var(--bg-primary);
    border-radius: 10px;
    padding: 1.25rem;
    border: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

.stat-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon {
    font-size: 2rem;
    opacity: 0.8;
}

.stat-content {
    flex: 1;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.stat-value {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.stat-utilization {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.utilization-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.utilization-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ade80, #22c55e);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Utilization bar colors based on percentage (same as gauges) */
.utilization-empty {
    background: rgba(255, 255, 255, 0.1) !important;
}

.utilization-green {
    background: linear-gradient(90deg, var(--accent-success), var(--accent-success)) !important;
}

.utilization-yellow {
    background: linear-gradient(90deg, var(--accent-warning), var(--accent-warning)) !important;
}

.utilization-red {
    background: linear-gradient(90deg, var(--accent-error), var(--accent-error)) !important;
}

.utilization-text {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    min-width: 3rem;
}

/* Nodes Monitoring Styles */
.nodes-monitoring {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.nodes-monitoring-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.nodes-monitoring-content h3 {
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    flex-shrink: 0;
}

.nodes-grid {
    display: grid;
    gap: 1rem;
    /* Default desktop grid shows 5 items per row */
    grid-template-columns: repeat(5, 1fr);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Dynamic grid layouts based on number of items */
.nodes-grid[data-item-count="1"] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
}

.nodes-grid[data-item-count="2"] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
}

.nodes-grid[data-item-count="3"] {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
}

.nodes-grid[data-item-count="4"] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.nodes-grid[data-item-count="5"],
.nodes-grid[data-item-count="6"] {
    grid-template-columns: repeat(5, 1fr);
}

.nodes-grid[data-item-count="7"],
.nodes-grid[data-item-count="8"] {
    grid-template-columns: repeat(5, 1fr);
}

.nodes-grid[data-item-count="9"] {
    grid-template-columns: repeat(5, 1fr);
}

.nodes-grid[data-item-count="10"],
.nodes-grid[data-item-count="11"],
.nodes-grid[data-item-count="12"] {
    grid-template-columns: repeat(5, 1fr);
}

/* For more than 12 items, use auto-fit with reasonable minimum */
.nodes-grid[data-item-count="13"],
.nodes-grid[data-item-count="14"],
.nodes-grid[data-item-count="15"],
.nodes-grid[data-item-count="16"] {
    grid-template-columns: repeat(5, 1fr);
}

.nodes-grid[data-item-count="17"] {
    grid-template-columns: repeat(5, 1fr);
}

.node-card {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid var(--border-primary);
    transition: all 0.2s ease;
}

.node-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

.node-card[data-node-ip] {
    cursor: pointer;
    transition: all 0.2s ease;
}

.node-card[data-node-ip]:active {
    transform: translateY(0);
}

.node-card.error {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

.node-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-primary);
}

.node-title {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.node-ip {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-family: 'Courier New', monospace;
}

.ip-label {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.8;
    margin-right: 0.25rem;
}

.node-status {
    margin-bottom: 0.75rem;
}

.node-labels {
    margin-bottom: 0.75rem;
}

.labels-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.labels-divider {
    height: 1px;
    background: var(--border-primary);
    margin: 0.5rem 0;
    opacity: 0.3;
}

.label-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    background: rgba(30, 58, 138, 0.35);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #dbeafe;
    white-space: nowrap;
    font-family: inherit;
}

.node-uptime {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0;
}

.uptime-label {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: bold;
    opacity: 0.8;
}

.uptime-value {
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    opacity: 0.9;
}

.node-latency {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0;
}

.latency-label {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: bold;
    opacity: 0.8;
}

.latency-value {
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    opacity: 0.9;
}

.latency-divider {
    height: 1px;
    background: var(--border-primary);
    margin: 0.5rem 0;
    opacity: 0.3;
}

.node-flash {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background: var(--bg-primary);
    border-radius: 6px;
    border: 1px solid var(--border-primary);
}

.flash-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.flash-value {
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.error {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-badge.success {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.node-error {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-style: italic;
}

.node-resources {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.resource-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.resource-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.resource-value {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
}

.value-label {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.8;
}

.error-label {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.8;
    margin-bottom: 0.25rem;
}

.error-message {
    color: var(--text-primary);
    font-size: 0.875rem;
    font-style: italic;
}

.resource-utilization {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Error and Loading States */
.error {
    text-align: center;
    padding: 2rem;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
}

.no-data {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
}

/* Monitoring Section in Node Details Drawer */
.details-drawer .monitoring-section {

}

.details-drawer .monitoring-section .monitoring-header {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-primary);
}

/* Themed Scrollbars (Global and Components) */
/* Firefox */
* {
    scrollbar-width: thin; /* auto | thin | none */
    scrollbar-color: var(--border-secondary) var(--bg-tertiary); /* thumb track */
}

/* WebKit (Chrome, Edge, Safari) */
/* Global default */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 8px;
    border: 2px solid var(--bg-tertiary); /* creates padding and rounded effect */
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

/* Terminal panel body - slightly thinner */
.terminal-body {
    scrollbar-width: thin;
}
.terminal-body::-webkit-scrollbar {
    width: 8px;
}
.terminal-body::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
}

/* Drawer content area */
.details-drawer-content {
    scrollbar-width: thin;
}
.details-drawer-content::-webkit-scrollbar {
    width: 10px;
}
.details-drawer-content::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
}

/* Responsive Design */
@media (max-width: 768px) {
    .summary-stats {
        grid-template-columns: 1fr;
    }
    
    /* Mobile grid layouts - simplified for smaller screens but still maximize vertical space */
    .nodes-grid[data-item-count="1"] {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        justify-items: center;
    }
    
    .nodes-grid[data-item-count="2"] { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; }
    .nodes-grid[data-item-count="3"],
    .nodes-grid[data-item-count="4"] { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
    .nodes-grid[data-item-count="5"],
    .nodes-grid[data-item-count="6"],
    .nodes-grid[data-item-count="7"],
    .nodes-grid[data-item-count="8"],
    .nodes-grid[data-item-count="9"],
    .nodes-grid[data-item-count="10"],
    .nodes-grid[data-item-count="11"],
    .nodes-grid[data-item-count="12"],
    .nodes-grid[data-item-count="13"],
    .nodes-grid[data-item-count="14"],
    .nodes-grid[data-item-count="15"],
    .nodes-grid[data-item-count="16"],
    .nodes-grid[data-item-count="17"] { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(auto-fit, 1fr); }
    
    .monitoring-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .stat-card {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    
    .stat-icon {
        font-size: 1.5rem;
    }
}