/* ============================================
   Network Optimizer - Main Stylesheet
   Modern, dark-mode friendly design
   ============================================ */

/* CSS Variables for theming - Ozark Connect Brand Colors */
:root {
    /* Typography - Two font families only */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;

    /* Brand Colors - Ozark Connect Blue + Orange */
    --primary-color: #0559C9;
    --primary-hover: #3385d6;
    --accent-color: #F97316;
    --accent-hover: #fb923c;

    /* Status Colors - refined for dark backgrounds */
    --success-color: #24bc70;
    --warning-color: #e79613;
    --danger-color: #ee6368;
    --info-color: #4797ff;

    /* Purple/Violet - WiFi 6E, sponsorship */
    --purple-color: #a855f7;
    --purple-light: #c084fc;

    /* Dark Mode Backgrounds - Ozark Connect blue-tinted */
    --bg-primary: #1a2029;
    --bg-secondary: #242c39;
    --bg-tertiary: #334155;
    --bg-card: #242c39;
    --bg-hover: #334155;
    --surface: #242c39;
    --surface-secondary: #2d3748;

    /* Text Colors */
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --text-dark: #1F2937;

    /* Borders & Effects */
    --border-color: #334155;
    --border-radius: 4px;
    --border-radius-lg: 6px;
    --shadow: rgba(0, 0, 0, 0.4) 0px 4px 12px 0px, rgba(255, 255, 255, 0.03) 0px 0px 1px 0px;
    --shadow-lg: rgba(0, 0, 0, 0.5) 0px 8px 24px 0px, rgba(255, 255, 255, 0.03) 0px 0px 1px 0px;
    --focus-ring: 0 0 0 1px var(--primary-color);

    /* Layout */
    --sidebar-width: 260px;
    --topbar-height: 56px;
}

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

html, body {
    height: 100%;
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

/* Anchor Links - Ubiquiti Blue primary, Orange for hover emphasis */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:visited {
    color: inherit;
}

a:hover {
    color: var(--primary-hover);
}

.leaflet-container a.map-popup-link {
    color: var(--primary-hover);
}

.leaflet-container a.map-popup-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* App Container Layout */
.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sidebar-header {
    display: block;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.sidebar-header:hover {
    text-decoration: none;
}

.sidebar-logo {
    max-width: 180px;
    height: auto;
}

.app-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
    margin: 0;
}

.app-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0 0;
}

/* Navigation Menu */
.nav-menu {
    flex: 1;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    margin: 0.25rem 0;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 10px 16px 10px 11px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-left: 2px solid transparent;
}

.nav-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-link.active {
    background: var(--bg-tertiary);
    color: var(--accent-color);
    border-left-color: var(--accent-color);
}

.nav-icon {
    font-size: 1.25rem;
    margin-right: 0.75rem;
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.nav-icon-img {
    width: 2.5rem;
    height: 1.875rem;
    margin-right: 0.5rem;
    object-fit: contain;
    object-position: right;
    flex-shrink: 0;
}

.nav-text {
    font-weight: 500;
}

.nav-sub-item {
    padding-left: 1rem;
}

.nav-sub-icon {
    width: 2.5rem;
    margin-right: 0.5rem;
    text-align: right;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.nav-footer {
    margin-top: auto;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

.license-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--success-color);
    font-size: 0.875rem;
}

.license-icon {
    font-size: 1rem;
}

/* Main Content Area */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Top Bar */
.top-bar {
    height: var(--topbar-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.status-indicators {
    display: flex;
    gap: 2rem;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.status-item.status-connected .status-icon {
    color: var(--success-color);
}

.status-icon {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.confirm-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.confirm-text {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.timestamp {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Page Content */
.page-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.content {
    max-width: 1400px;
    margin: 0 auto;
}

/* Page Header */
.page-header {
    margin-bottom: 24px;
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.page-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    margin-bottom: 1rem;
    overflow: hidden;
}

.card-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header.history-card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

.header-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header-collapsible {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.card-header-collapsible:hover {
    background: var(--bg-tertiary);
}

.card-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.collapse-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.collapse-chevron.expanded {
    transform: rotate(90deg);
}

.card-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-icon {
    width: 32px;
    height: 32px;
}

.card-title {
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0;
}

@media (max-width: 412px) {
    .card-title {
        font-size: 1rem;
    }
}

@media (max-width: 382px) {
    .card-title {
        font-size: 0.95rem;
    }
}

.card-action {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.card-action:hover {
    color: var(--accent-hover);
}

/* Clickable card title links */
.card-title-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.card-title-link:hover {
    color: var(--primary-color);
}

.card-title-link:hover .card-title {
    color: var(--primary-color);
}

.card-body {
    padding: 16px;
}

/* Info section text (How it Works, etc.) */
.info-section {
    font-size: 0.8125rem;
    line-height: 1.6;
}

.info-section p,
.info-section ol,
.info-section ul,
.info-section li {
    font-size: 0.8125rem;
}

.info-section ol,
.info-section ul {
    padding-left: 1.5rem;
    margin: 0.75rem 0;
}

.info-section li {
    margin-bottom: 0.5rem;
}

.card-span-2 {
    grid-column: span 2;
}

.card-full-width {
    width: 100%;
    margin-bottom: 1.5rem;
}

/* Clickable card */
.clickable-card {
    cursor: pointer;
    transition: background 0.15s ease;
}

.clickable-card:hover {
    background: var(--bg-tertiary);
}

/* Speed Test Stats (Dashboard panel) */
.speed-test-stats {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.speed-stat {
    text-align: center;
}

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

.speed-stat-unit {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-left: 0.25rem;
}

.speed-stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.speed-test-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
}

/* Speed Test List (Dashboard - multiple results) */
.speed-test-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.speed-test-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.speed-test-row:last-child {
    border-bottom: none;
}

.speed-test-row .speed-test-device {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 33%;
}

.speed-test-speeds {
    display: flex;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

.speed-down {
    color: var(--speed-download-color);  /* blue - From Device */
}

.speed-up {
    color: var(--speed-upload-color);  /* green - To Device */
}

.speed-test-row .speed-test-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: auto;
}

/* Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 88px;
}

.stat-card.stat-success {
    border-left: 2px solid var(--success-color);
}

.stat-card.stat-warning {
    border-left: 2px solid var(--warning-color);
}

.stat-card.stat-danger {
    border-left: 2px solid var(--danger-color);
}

/* Clickable stat cards */
a.stat-card-link,
a.stat-card-link:link,
a.stat-card-link:visited {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.stat-card-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

a.stat-card-link:active {
    transform: translateY(0);
}

.stat-icon {
    width: 3rem;
    height: 3rem;
    font-size: 2.5rem;
    line-height: 1;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg {
    width: 3rem;
    height: 3rem;
}

.stat-icon-img {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    opacity: 0.9;
    flex-shrink: 0;
}

.stat-icon-img.stat-icon-sm {
    width: 2.5rem;
    height: 2.5rem;
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-value-text {
    font-size: 1.5rem;
    font-weight: 600;
}

.stat-value.cleanest-channels {
    font-size: 1.25rem;
}

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

/* Responsive label helpers */
.mobile-label { display: none; }
.desktop-label { display: inline; }

@media (max-width: 768px) {
    .mobile-label { display: inline; }
    .desktop-label { display: none; }
}

/* Content Grid */
.content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Main dashboard cards - fixed height to prevent flash during load */
.content-grid > .card:nth-child(-n+4) {
    min-height: 37vh;
}

/* Dashboard Grid */
.dashboard-grid {
    /* Dashboard specific styles */
}

.device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

/* Device Card */
.device-card {
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    padding: 12px;
    border-left: 2px solid var(--border-color);
}

.device-card.device-online {
    border-left-color: var(--success-color);
}

.device-card.device-offline {
    border-left-color: var(--danger-color);
}

.device-header,
.ap-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.device-header {
    margin-left: -0.2rem;
}

.ap-header {
    margin-left: -0.3rem;
}

.device-icon {
    font-size: 1.5rem;
}

.device-info {
    flex: 1;
}

.device-name {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
}

.device-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.125rem;
}

.device-type {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.device-status {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.status-dot.online {
    background: var(--success-color);
}

.status-dot.offline {
    background: var(--text-tertiary);
}

.device-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.device-detail {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
}

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

.detail-value {
    color: var(--text-primary);
    font-weight: 500;
}

/* Security Score Gauge */
.security-score-gauge {
    text-align: center;
    padding: 1rem;
}

.gauge-container {
    max-width: 300px;
    margin: 0 auto 1rem;
}

.gauge-svg {
    width: 100%;
    height: auto;
}

.gauge-rating {
    margin-top: 1rem;
}

.rating-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: 2rem;
    font-weight: 700;
    font-size: 0.875rem;
}

.rating-badge.rating-excellent {
    background: var(--success-color);
    color: white;
}

.rating-badge.rating-good {
    background: var(--primary-color);
    color: white;
}

.rating-badge.rating-fair {
    background: var(--warning-color);
    color: white;
}

.rating-badge.rating-poor {
    background: var(--danger-color);
    color: white;
}

.rating-badge.rating-none {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.security-summary {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
}

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

.summary-value {
    font-weight: 600;
    min-height: 1.25rem;
    display: inline-flex;
    align-items: center;
}

.summary-value.critical {
    color: var(--danger-color);
}

.summary-value.warning,
.summary-value.recommended {
    color: var(--warning-color);
}

/* SQM Status Panel */
.sqm-status-panel {
    /* Styles handled in component */
}

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

.sqm-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.status-indicator.status-active {
    background: var(--success-color);
    box-shadow: 0 0 8px var(--success-color);
}

.status-indicator.status-inactive {
    background: var(--text-muted);
}

.learning-badge {
    background: var(--info-color);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.metric-icon {
    font-size: 1.5rem;
}

.metric-content {
    flex: 1;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.metric-value .unit {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-secondary);
}

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

.metric-baseline {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.metric-baseline.latency-good {
    color: var(--success-color);
}

.metric-baseline.latency-fair {
    color: var(--warning-color);
}

.metric-baseline.latency-poor {
    color: var(--danger-color);
}

.learning-progress {
    background: var(--bg-primary);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

.sqm-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* Alerts List */
.alerts-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.alert-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--border-color);
}

.alert-item.alert-critical {
    border-left-color: var(--danger-color);
}

.alert-item.alert-warning,
.alert-item.alert-recommended {
    border-left-color: var(--warning-color);
}

.alert-item.alert-info {
    border-left-color: var(--info-color);
}

.alert-icon {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 0.125rem;
}

.alert-item.alert-critical .alert-icon {
    color: var(--danger-color);
}

.alert-item.alert-warning .alert-icon,
.alert-item.alert-recommended .alert-icon {
    color: var(--warning-color);
}

.alert-item.alert-info .alert-icon {
    color: var(--info-color);
}

.alert-content {
    flex: 1;
}

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

.alert-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.alert-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.alert-message {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem 0;
}

.alert-source {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.alert-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

.no-alerts {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.no-alerts-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    color: var(--success-color);
}

/* Agent Status Table */
.agent-status-table {
    /* Styles for table */
}

/* Table responsive wrapper - enables horizontal scroll on mobile */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px; /* Ensures table doesn't compress too much */
}

.data-table thead {
    background: var(--bg-primary);
}

.data-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.data-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8125rem;
}

.data-table tr:not(.history-details-row):hover {
    background: #2d3a4d;
}

.data-table code {
    background: var(--bg-primary);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
}

/* TC Monitor Configuration */
.section-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.wan-interfaces-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.wan-interfaces-section h4 {
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.config-output {
    margin-top: 1.5rem;
}

.config-output h4 {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.config-block {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin-bottom: 0.75rem;
}

.agent-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.agent-icon {
    font-size: 1.25rem;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.status-active,
.status-badge.status-connected {
    background: rgba(36, 188, 112, 0.2);
    color: var(--success-color);
}

.status-badge.status-inactive,
.status-badge.status-disconnected {
    background: rgba(100, 116, 139, 0.2);
    color: var(--text-muted);
}

.status-badge.status-error {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger-color);
}

/* Buttons - Three colors only: primary (blue), secondary (grey), danger (red) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    min-width: 6rem;
    padding: 0 20px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 1;
    vertical-align: middle;
}

/* Ensure anchor buttons match button elements */
a.btn {
    line-height: 36px;
}

.btn-sm {
    height: 28px;
    padding: 0 12px;
    font-size: 0.8125rem;
}

a.btn-sm {
    line-height: 28px;
}

.btn-group-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.btn-lg {
    height: 44px;
    padding: 0 24px;
    font-size: 0.9375rem;
    border-radius: var(--border-radius-lg);
}

a.btn-lg {
    line-height: 44px;
}

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

/* Primary - Blue */
.btn-primary {
    background: var(--primary-color);
    color: white !important;
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
    color: white !important;
}

.btn-primary:visited {
    color: white !important;
}

/* Secondary - Grey (alias: btn-secondary, btn-ghost) */
.btn-secondary,
.btn-ghost {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled),
.btn-ghost:hover:not(:disabled) {
    background: #475569;
}

/* Danger - Red (for destructive actions) */
.btn-danger {
    background: var(--danger-color);
    color: white !important;
}

.btn-danger:hover:not(:disabled) {
    background: #dc5559;
    color: white !important;
}

.btn-danger:visited {
    color: white !important;
}

/* Legacy aliases - map to three main colors */
.btn-success,
.btn-accent,
.btn-gradient {
    background: var(--primary-color);
    color: white !important;
}

.btn-success:hover:not(:disabled),
.btn-accent:hover:not(:disabled),
.btn-gradient:hover:not(:disabled) {
    background: var(--primary-hover);
    color: white !important;
}

.btn-warning {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-warning:hover:not(:disabled) {
    background: var(--bg-hover);
}

/* Outline variant - primary only */
.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-primary:hover:not(:disabled) {
    background: var(--primary-color);
    color: white !important;
}

/* Test button with progress indicator */
.test-button {
    position: relative;
    overflow: hidden;
    min-width: 7.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.test-button .test-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
}

.test-button .test-progress .progress-bar {
    height: 100%;
    background: rgba(255, 255, 255, 0.25);
    transition: width 0.25s ease-out;
}

.test-button .test-phase {
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.btn-sm.test-button {
    min-width: 6.5rem;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    align-items: center;
}

@media (max-width: 768px) {
    .action-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.action-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Action button spacing in tables */

/* Data Management Section */
.data-actions {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.action-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.action-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.action-item:first-child {
    padding-top: 0;
}

.action-item h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.action-item p {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.action-item.danger-zone h4 {
    color: var(--danger-color);
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(5, 89, 201, 0.2);
}

select.form-control {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    appearance: none;
    -webkit-appearance: none;
}

.form-help {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.input-row {
    display: flex;
    gap: 0.75rem;
}

.input-with-button {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.input-with-button .form-control {
    flex: 1;
    min-width: 0;
}

.input-with-button .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.checkbox-label,
.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.checkbox-group,
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Progress Bar */
.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-primary);
    border-radius: 1rem;
    overflow: hidden;
    margin-top: 1rem;
}

.progress-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.progress-text {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Spinner */
.spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

/* Empty States */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

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

.empty-state h3 {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.empty-state p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 0.8125rem;
}

/* Alerts/Messages */
.alert {
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-top: 1rem;
    font-size: 0.875rem;
}

.alert-success {
    background: rgba(36, 188, 112, 0.1);
    border: 1px solid var(--success-color);
    color: var(--success-color);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--warning-color);
    color: var(--warning-color);
}

.alert-warning a {
    color: #fbbf24;
    text-decoration: underline;
}

.alert-warning a:hover {
    color: #fcd34d;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
}

.alert-info {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* Dark inline code (for use in alerts) */
.code-dark {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

/* Alert with progress bar */
.alert-progress {
    position: relative;
    overflow: hidden;
    background: var(--bg-tertiary);
}

.alert-progress .alert-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(5, 89, 201, 0.4) 0%, rgba(5, 89, 201, 0.25) 100%);
    transition: width 0.25s ease-out;
    border-right: 2px solid rgba(5, 89, 201, 0.6);
}

.alert-progress .alert-progress-text {
    position: relative;
    z-index: 1;
}

/* Alert as clickable link */
.alert-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

.alert-link:hover {
    background: rgba(36, 188, 112, 0.25);
    transform: translateY(-1px);
}

.alert-link:active {
    transform: translateY(0);
}

.alert-link-hint {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-left: 1rem;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-pdf {
    background: var(--danger-color);
    color: white;
}

.badge-markdown {
    background: var(--info-color);
    color: white;
}

.badge-html {
    background: var(--warning-color);
    color: white;
}

.badge-premium {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* Tabs */
.filter-tabs {
    display: flex;
    gap: 0.5rem;
}

.tab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.tab:hover {
    color: var(--accent-color);
}

.tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.tab.tab-muted {
    color: var(--text-muted);
}

.tab.tab-muted.active {
    color: var(--text-secondary);
    border-bottom-color: var(--text-secondary);
}

/* Issue Styling */
.issues-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.issue-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--border-color);
}

.issue-item.issue-critical {
    border-left-color: var(--danger-color);
}

.issue-item.issue-warning,
.issue-item.issue-recommended {
    border-left-color: var(--warning-color);
}

.issue-item.issue-info,
.issue-item.info {
    border-left-color: var(--info-color);
}

/* Simplified severity classes (without issue- prefix) */
.issue-item.critical {
    border-left-color: var(--danger-color);
}

.issue-item.warning {
    border-left-color: var(--warning-color);
}

.issue-icon {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    margin-top: 22px;
    width: 24px;
    min-height: 24px;
}

.issue-item.issue-critical .issue-icon {
    color: var(--danger-color);
}

.issue-item.issue-warning .issue-icon,
.issue-item.issue-recommended .issue-icon {
    color: var(--warning-color);
}

.issue-item.issue-info .issue-icon,
.issue-item.info .issue-icon {
    color: var(--info-color);
}

/* Simplified severity classes for icons */
.issue-item.critical .issue-icon {
    color: var(--danger-color);
}

.issue-item.warning .issue-icon {
    color: var(--warning-color);
}

.issue-body,
.issue-content {
    flex: 1;
    min-width: 0;
}

.issue-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    min-height: 28px;
}

.issue-severity {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.issue-critical .issue-severity {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger-color);
}

.issue-warning .issue-severity,
.issue-recommended .issue-severity {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-color);
}

.issue-info .issue-severity {
    background: rgba(6, 182, 212, 0.15);
    color: var(--info-color);
}

.issue-category {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.issue-action {
    margin-left: auto;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    opacity: 0.7;
}

.issue-action:hover {
    opacity: 1;
}

.issue-settings-icon {
    width: 20px;
    height: 20px;
    margin-left: 0.5rem;
    background: transparent;
    text-decoration: none;
}

.issue-settings-icon svg {
    width: 14px;
    height: 14px;
}

.issue-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.offline-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    background: var(--text-muted);
    color: var(--bg-primary);
}

.issue-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.issue-recommendation {
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.issue-recommendation strong {
    color: var(--text-primary);
}

.issue-recommendation a,
.issue-type-recommendation a,
.issue-description a,
.issue-type-description a,
.issue-item-description a {
    color: var(--text-secondary);
    text-decoration: none;
}

.issue-recommendation a:hover,
.issue-type-recommendation a:hover,
.issue-description a:hover,
.issue-type-description a:hover,
.issue-item-description a:hover {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.no-issues {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.issue-item.issue-dismissed {
    opacity: 0.6;
    border-left-color: var(--text-muted);
}

.issue-item.issue-dismissed .issue-icon {
    color: var(--text-muted);
}

/* Collapsible Issue Type Groups */
.issue-type-group {
    margin-bottom: 0.5rem;
}

.issue-type-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.15s ease;
    font-weight: 500;
    color: var(--text-primary);
    border-left: 4px solid var(--border-color);
}

.issue-type-header:hover {
    background: var(--bg-hover);
}

.issue-type-header.expanded {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.issue-type-group .expand-wrapper .expand-content {
    border-left: 4px solid var(--border-color);
}

.issue-type-group .expand-wrapper.expanded .expand-content {
    background: var(--bg-primary);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.issue-type-group.issue-critical .expand-wrapper .expand-content {
    border-left-color: var(--danger-color);
}

.issue-type-group.issue-recommended .expand-wrapper .expand-content {
    border-left-color: var(--warning-color);
}

.issue-type-group.issue-info .expand-wrapper .expand-content {
    border-left-color: var(--info-color);
}

/* Issue type group severity colors - uses same classes as issue-item */
.issue-type-group.issue-critical .issue-type-header {
    border-left-color: var(--danger-color);
}

.issue-type-group.issue-recommended .issue-type-header {
    border-left-color: var(--warning-color);
}

.issue-type-group.issue-info .issue-type-header {
    border-left-color: var(--info-color);
}

.issue-type-icon {
    display: flex;
    align-items: flex-start;
    margin: auto 0;
    width: 24px;
    min-height: 24px;
    flex-shrink: 0;
}

.issue-type-icon svg {
    width: 24px;
    height: 24px;
}

.issue-type-group.issue-critical .issue-type-icon {
    color: var(--danger-color);
}

.issue-type-group.issue-recommended .issue-type-icon {
    color: var(--warning-color);
}

.issue-type-group.issue-info .issue-type-icon {
    color: var(--info-color);
}

.issue-type-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.issue-type-body .issue-title {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.issue-type-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: auto;
}

.issue-type-header .issue-type-chevron {
    width: 2rem;
}

.issue-type-name {
    font-weight: 500;
    flex: 1;
}

.issue-type-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: normal;
    margin-right: 0.5rem;
}

.issue-type-description {
    padding: 0.75rem 1rem 0.5rem 3.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.issue-type-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.75rem 3.5rem;
}

.issue-type-item .issue-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    font-size: 0.875rem;
    margin: 0;
}

.issue-type-item .issue-context .context-item {
    display: inline-flex;
    gap: 0.25rem;
}

.issue-type-item .issue-context .context-item strong {
    color: var(--text-muted);
}

.issue-type-item .issue-action {
    margin-left: auto;
    background: var(--bg-secondary);
}

.issue-type-item .issue-item-description {
    flex: 1;
    color: var(--text-secondary);
}

.issue-type-recommendation {
    padding: 0.75rem 1rem 1.25rem 3.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Footer */
.app-footer {
    padding: 1.5rem 2rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
}

/* Hamburger Menu Button - hidden on desktop */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    margin-right: 0.5rem;
}

.hamburger-btn span {
    display: block;
    width: 24px;
    height: 3px;
    background: var(--text-primary);
    border-radius: 2px;
    margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Mobile logo - hidden on desktop */
.mobile-logo {
    display: none;
}

/* Sidebar Overlay - hidden on desktop */
.sidebar-overlay {
    display: none;
}

@media (max-width: 768px) {
    /* Show hamburger button on mobile */
    .hamburger-btn {
        display: block;
    }

    /* Show mobile logo next to hamburger */
    .mobile-logo {
        display: block;
        height: 60px;
        margin: -0.5rem 0;
        max-height: 20vw;
    }

    .mobile-logo img {
        height: 100%;
        width: auto;
    }

    /* Off-canvas sidebar */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Overlay when sidebar is open */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .sidebar-overlay.visible {
        display: block;
    }

    /* Main content takes full width */
    .main-content {
        width: 100%;
    }

    /* Top bar adjustments */
    .top-bar {
        height: auto;
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }

    .status-indicators {
        display: none;
    }

    .header-actions {
        flex: 1;
        justify-content: flex-end;
    }

    .timestamp {
        font-size: 0.75rem;
    }

    /* Content adjustments */
    .stats-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .content-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .device-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .page-content {
        padding: 1rem;
    }

    .content {
        padding: 0;
    }

    /* Card adjustments for mobile */
    .card {
        padding: 1rem;
    }

    .card-header {
        padding: 0 0 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
        position: relative;
    }

    .card-header .issue-type-chevron {
        position: static;
        transform: none;
    }

    /* Filter tabs mobile - wrap below title, compact sizing */
    .filter-tabs {
        width: 100%;
        gap: 0.25rem;
        justify-content: flex-start;
    }

    .filter-tabs .tab {
        padding: 0.35rem 0.5rem;
        font-size: 0.8rem;
    }

    .card-body {
        padding: 1rem 0;
    }

    /* Footer adjustments */
    .app-footer {
        padding: 0.75rem;
        font-size: 0.7rem;
    }

    /* Alert items - icon inline with title on mobile */
    .alert-item {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 0.5rem;
        row-gap: 0.25rem;
    }

    .alert-icon {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        padding-top: 0.15rem;
    }

    .alert-content {
        display: contents;
    }

    .alert-header {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
        align-items: center;
    }

    .alert-title {
        font-size: 0.9rem;
    }

    .alert-time {
        font-size: 0.7rem;
        margin-left: auto;
    }

    .alert-message {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .alert-source {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .alert-actions {
        grid-column: 1 / -1;
        grid-row: 4;
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    /* Issue items - icon inline with title on mobile */
    .issue-item {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 0.5rem;
        row-gap: 0.25rem;
    }

    .issue-icon {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        margin-top: 0;
        padding-top: 0.05rem;
    }

    .issue-body,
    .issue-content {
        display: contents;
    }

    .issue-meta {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .issue-header {
        grid-column: 1 / -1;
        grid-row: 1;
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
        min-height: 0;
    }

    .issue-severity {
        font-size: 0.6rem;
    }

    .issue-category {
        font-size: 0.65rem;
    }

    .issue-title {
        grid-column: 2;
        grid-row: 2;
        font-size: 0.9rem;
        margin-top: 0.125rem;
    }

    .issue-description {
        grid-column: 1 / -1;
        grid-row: 3;
        font-size: 0.8rem;
    }

    .issue-entity,
    .issue-recommendation {
        grid-column: 1 / -1;
    }

    .issue-context {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    .issue-recommendation {
        grid-column: 1 / -1;
        grid-row: 5;
        font-size: 0.8rem;
    }

    .issue-action {
        margin-left: auto;
    }

    /* Collapsible group header - match single item layout */
    .issue-type-header {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 0.5rem;
        row-gap: 0.25rem;
        position: relative;
        padding-right: 2rem;
    }

    .issue-type-icon {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        padding-top: 0.05rem;
        margin: 0;
    }

    .issue-type-body {
        display: contents;
    }

    .issue-type-body .issue-header {
        grid-column: 1 / -1;
        grid-row: 1;
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }

    .issue-type-body .issue-title {
        grid-column: 2;
        grid-row: 2;
        font-size: 0.9rem;
        margin-top: 0.125rem;
    }

    .issue-type-chevron {
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Expanded items - full width context */
    .issue-type-description {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .issue-type-items-list {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .issue-type-recommendation {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .issue-type-item .issue-context {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }

    .issue-type-item .issue-context .context-item {
        width: 100%;
    }

    .issue-type-item .issue-action {
        margin-top: 0.5rem;
    }
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.text-muted {
    color: var(--text-muted);
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }

.hidden-placeholder {
    visibility: hidden;
}

@media (max-width: 768px) {
    .hidden-placeholder,
    .action-buttons .btn.hidden-placeholder {
        display: none;
    }
}

.d-flex {
    display: flex;
}

.gap-1 {
    gap: 0.5rem;
}

.gap-2 {
    gap: 1rem;
}

/* Connection Banner */
.connection-banner {
    background: linear-gradient(135deg, var(--warning-color) 0%, #d97706 100%);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.banner-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.banner-icon {
    font-size: 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.banner-text strong {
    font-size: 1rem;
    color: white;
}

.banner-text span {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
}

.connection-banner .btn-secondary {
    background: white;
    color: var(--warning-color) !important;
    border: none;
}

.connection-banner .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
    .connection-banner .banner-content {
        flex-wrap: wrap;
        justify-content: center;
    }

    .connection-banner .banner-content .banner-text {
        flex-basis: calc(100% - 3.5rem);
    }
}

/* Sponsorship Banner */
.sponsorship-banner {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.08) 100%);
    border: 1px solid var(--purple-color);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.sponsorship-banner .banner-icon {
    background: var(--purple-color);
    color: white;
}

.sponsorship-banner .banner-text strong {
    color: var(--purple-light);
}

.sponsorship-banner .banner-text span {
    color: var(--text-primary);
}

.sponsorship-banner .banner-text a {
    color: var(--purple-light);
    text-decoration: underline;
}

.sponsorship-banner .banner-text a:hover {
    color: white;
}

.sponsorship-banner .banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.sponsorship-banner .btn-dismiss,
.sponsorship-banner .btn-sponsor {
    background: rgba(168, 85, 247, 0.15);
    color: var(--purple-light);
    border: none;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.sponsorship-banner .btn-dismiss:hover,
.sponsorship-banner .btn-sponsor:hover {
    background: rgba(168, 85, 247, 0.3);
    color: white;
}

@media (max-width: 768px) {
    .sponsorship-banner {
        padding: 1rem;
    }

    .sponsorship-banner .banner-content {
        flex-wrap: wrap;
    }

    .sponsorship-banner .banner-icon {
        display: none;
    }

    .sponsorship-banner .banner-separator {
        display: none;
    }

    .sponsorship-banner .banner-text strong {
        font-size: 0.95rem;
    }

    .sponsorship-banner .banner-commercial {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.8rem;
    }

    .sponsorship-banner .banner-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.5rem;
    }
}

/* Loading State */
.loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--text-secondary);
    min-height: 150px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
}

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

.empty-state .empty-icon-img {
    margin-bottom: 0;
}

.empty-state .empty-icon-img img {
    width: 100px;
    height: 100px;
    opacity: 0.5;
}

.empty-state h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.empty-state p {
    margin-bottom: 1.5rem;
    font-size: 0.8125rem;
}

/* Status indicators for disconnected state */
.status-disconnected {
    color: var(--text-muted);
}

.status-disconnected .status-icon {
    color: var(--text-muted);
}

/* SQM unavailable state */
.sqm-unavailable {
    padding: 1rem;
    text-align: center;
}

.sqm-unavailable .status-message {
    color: var(--text-secondary);
    margin: 1rem 0;
    font-size: 0.8125rem;
}

/* SQM not deployed state */
.sqm-not-deployed {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}

.not-deployed-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.not-deployed-icon {
    width: 48px;
    height: 48px;
    opacity: 0.6;
}

.not-deployed-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.not-deployed-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.not-deployed-message {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.status-not-configured {
    color: var(--text-muted);
}

.status-unavailable {
    color: var(--warning-color);
}

/* TC Interfaces Grid */
.tc-interfaces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.tc-interface-card {
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--border-color);
}

.tc-interface-card.inactive {
    opacity: 0.6;
}

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

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

.interface-status {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    background: var(--bg-secondary);
}

.interface-status.status-active {
    background: rgba(36, 188, 112, 0.2);
    color: var(--success-color);
}

.interface-status.status-not_found {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger-color);
}

.interface-rate {
    margin: 0.75rem 0;
}

.interface-rate .rate-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent-color);
}

.interface-rate .rate-unit {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-left: 0.25rem;
}

.interface-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.rate-raw {
    color: var(--text-secondary);
}

.tc-timestamp {
    color: var(--text-muted);
}

/* Spinner small */
.spinner-sm {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--text-muted);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.status-offline {
    color: var(--danger-color);
}

/* Accent Highlight Box (Ozark Connect style) */
.highlight-box {
    background: rgba(249, 115, 22, 0.1);
    border-left: 4px solid var(--accent-color);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    margin: 1rem 0;
}

.highlight-box p {
    color: var(--accent-color);
    font-weight: 500;
    margin: 0;
}

/* Accent Links */
.link-accent {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.link-accent:hover {
    color: var(--accent-hover);
}

/* Primary Links (for light elements on dark bg) */
.link-primary {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

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

/* Accent Text */
.text-accent {
    color: var(--accent-color);
}

.text-primary-brand {
    color: var(--primary-color);
}

/* Stat Value Accent (for prominent numbers) */
.stat-value-accent {
    color: var(--accent-color);
}

/* Audit Issue Context Styles */
.issue-context {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.75rem 0;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
}

.issue-context .context-item {
    display: inline-flex;
    gap: 0.25rem;
}

.issue-context .context-item strong {
    color: var(--text-muted);
}

/* ============================================
   Ozark Connect Gradient & Accent Styles
   ============================================ */

/* Gradient Backgrounds */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #0466e0 100%);
}

.bg-gradient-hero {
    background: linear-gradient(135deg, rgba(5, 89, 201, 0.1) 0%, transparent 100%);
}

/* Info Box (Blue - Ozark Connect style) */
.info-box {
    background: rgba(5, 89, 201, 0.08);
    border-left: 4px solid var(--primary-color);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    margin: 1rem 0;
}

.info-box p {
    color: var(--text-primary);
    margin: 0;
}

.info-box strong {
    color: var(--primary-color);
}

/* Callout Box (Orange highlight - Ozark Connect style) */
.callout-box {
    background: rgba(249, 115, 22, 0.08);
    border-left: 4px solid var(--accent-color);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    margin: 1rem 0;
}

.callout-box p {
    color: var(--text-primary);
    margin: 0;
}

.callout-box strong {
    color: var(--accent-color);
}

/* Feature Badge (Ozark Connect style) */
.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-tertiary);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.feature-badge .badge-icon {
    color: var(--primary-color);
}

/* Card with gradient header */
.card-gradient-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #0466e0 100%);
    color: white;
    padding: 1.5rem;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.card-gradient-header h3 {
    color: white;
    margin: 0;
}

/* ============================================
   Speed Test Results Component
   ============================================ */

/* Color variables for speed test */
:root {
    --speed-upload-color: var(--success-color);    /* green - To Device */
    --speed-download-color: var(--primary-hover);  /* blue - From Device */
}

.speed-results {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin: 1rem 0;
    position: relative;
}

.speed-results > .detail-actions {
    position: absolute;
    right: 0.5rem;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.speed-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: var(--bg-card);
    border-radius: var(--border-radius);
    min-width: 180px;
}

#latest-result .speed-result {
    background: var(--bg-tertiary);
}

#latest-result .tooltip-icon {
    background: var(--bg-secondary);
}

.speed-result.upload {
    border-left: 4px solid var(--speed-upload-color);
}

.speed-result.upload .speed-icon,
.speed-result.upload .speed-value {
    color: var(--speed-upload-color);
}

.speed-result.download {
    border-left: 4px solid var(--speed-download-color);
}

.speed-result.download .speed-icon,
.speed-result.download .speed-value {
    color: var(--speed-download-color);
}

.speed-icon {
    font-size: 1.5rem;
    font-weight: bold;
    place-content: center;
    display: flex;
}

.speed-details,
.speed-info {
    display: flex;
    flex-direction: column;
}

.speed-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.speed-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 0.8;
}

.speed-value.speed-down {
    color: var(--speed-download-color);
}

.speed-value.speed-up {
    color: var(--speed-upload-color);
}

.speed-details .speed-value {
    font-size: 1.25rem;
}

.speed-unit {
    font-size: 0.875rem;
    font-weight: normal;
    color: var(--text-secondary);
    vertical-align: baseline;
}

.speed-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
}

.retransmits-info {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}

.test-timestamp {
    text-align: center;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.test-details {
    display: flex;
    gap: 1rem 2rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 0.875rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.test-details code {
    background: var(--bg-primary);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
}

.btn-action-icon {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--text-muted);
    opacity: 0.6;
    transition: opacity 0.15s, color 0.15s;
    display: flex;
    align-items: center;
}

.btn-action-icon:hover {
    opacity: 1;
    color: var(--primary-color);
}

.btn-action-danger:hover {
    color: var(--danger-color);
}

.btn-action-icon:disabled {
    cursor: wait;
    opacity: 0.4;
}

.detail-actions .wan-reassign-overlay {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.wan-reassign-select {
    position: relative;
    z-index: 100;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.wan-reassign-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.wan-reassign-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.detail-actions .wan-saved-indicator {
    font-size: 0.7rem;
    color: var(--success-color);
    opacity: 0.8;
}

.detail-actions .spinner-sm {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--text-muted);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Speed test result notes */
.result-notes {
    flex: 1;
    position: relative;
    min-width: 150px;
}

.notes-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--text-primary);
    resize: none;
    min-height: 2.5rem;
    transition: border-color 0.15s, background-color 0.15s;
}

.notes-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.08);
}

.notes-input::placeholder {
    color: var(--text-muted);
    opacity: 0.75;
}

.notes-status {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.notes-status.saving {
    color: var(--text-muted);
}

.notes-status.saved {
    color: var(--success-color);
}

.show-mobile {
    display: none !important;
}

.col-actions {
    width: 1%;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .col-actions {
        width: auto;
        white-space: normal;
    }

    .speed-results {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .test-details {
        gap: 0.5rem 1rem;
    }

    .test-details > span {
        min-width: 34%;
        text-align: center;
    }

    .speed-results > .detail-actions {
        position: static;
        transform: none;
        width: 100%;
        justify-content: center;
    }

    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: table-cell !important;
    }

    .speedtest-container .data-table,
    .client-speedtest-container .data-table {
        min-width: 350px;
    }

    .table-responsive {
        padding: 0;
    }

    [class*="badge-vpn-"] {
        margin-bottom: 0.25rem;
    }

    .data-table td {
        padding: 0.75rem 0.5rem;
    }

    td .btn {
        margin: 0 auto;
    }

    td .btn + .btn {
        margin: 0 auto;
    }
}

/* Path Analysis - Redesigned */
.path-analysis {
    margin-top: 1.25rem;
    padding: 1rem 1rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
}

.history-details .test-details {
    position: relative;
    border-top: 1px solid var(--bg-card);
}

.history-details .path-analysis {
    margin-top: 0rem;
    padding-bottom: 0.25rem;
}

.path-analysis .path-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.path-analysis .path-max-speed {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-radius: 6px;
    min-width: 80px;
}

.path-analysis .path-max-speed .speed-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25rem;
}

/* Directional speed colors for asymmetric links (matching speed-results) */
.path-analysis .path-max-speed .speed-from {
    color: var(--speed-download-color);  /* blue - From Device (↓) */
}

.path-analysis .path-max-speed .speed-to {
    color: var(--speed-upload-color);    /* green - To Device (↑) */
}

.path-analysis .path-max-speed .speed-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0;
}

.path-analysis .efficiency-grades {
    display: flex;
    gap: 0.5rem;
}

.path-analysis .grade-badge {
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: help;
}

.grade-excellent { background: rgba(36, 188, 112, 0.2); color: var(--success-color); }
.grade-good { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.grade-fair { background: rgba(234, 179, 8, 0.2); color: #eab308; }
.grade-poor { background: rgba(249, 115, 22, 0.2); color: #f97316; }
.grade-critical { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

/* Path Visualization */
.path-analysis .path-visualization {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-card);
    border-radius: 6px;
    row-gap: 0.75rem;
}

.path-analysis .path-hop {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    min-height: 41px;
    z-index: 1;
}

.path-analysis .path-hop .hop-icon {
    font-size: 0.9rem;
}

.path-analysis .path-hop .hop-name {
    color: var(--text-primary);
    font-weight: 500;
}

.path-analysis .path-hop.bottleneck {
    border: 1px solid var(--warning-color);
}

.path-analysis .path-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.2rem;
    margin-top: 1rem;
    gap: 0.1rem;
}

.path-analysis .path-connector .connector-line {
    width: calc(100% + 23px);
    height: 2px;
    background: #3b82f6;
    position: relative;
    z-index: 0;
}

.path-analysis .path-connector .connector-line::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    border: 4px solid transparent;
    border-left-color: #3b82f6;
}

.path-analysis .path-connector .connector-speed {
    font-size: 0.6rem;
    color: #93c5fd;
    white-space: nowrap;
}

.path-analysis .path-connector.bottleneck .connector-line {
    background: var(--warning-color);
}

.path-analysis .path-connector.bottleneck .connector-line::after {
    border-left-color: var(--warning-color);
}

.path-analysis .path-connector.bottleneck .connector-speed {
    color: var(--warning-color);
    font-weight: 500;
}

/* Wireless link indicator - shows wifi icon above the connector line */
.path-analysis .path-connector.wireless {
    position: relative;
}

.path-analysis .path-connector .wireless-icon {
    position: absolute;
    top: -0.9rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

/* Path row - base styling (always flex) */
.path-analysis .path-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Switchback layout - snake pattern for multi-row traces */
.path-analysis .path-visualization.path-switchback {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 1rem;
}

.path-analysis .path-switchback .path-row {
    padding: 0.5rem 0;
    position: relative;
    width: 100%;
}

/* First row aligns left with margin */
.path-analysis .path-switchback .path-row:not(.reversed) {
    justify-content: flex-start;
    margin-left: 0.75rem;
}

/* Reversed rows start from right, turn exits on left */
.path-analysis .path-switchback .path-row.reversed {
    justify-content: flex-end;
    align-self: flex-end;
    margin-right: 0.75rem;
}

/* Left-pointing arrows for reversed rows */
.path-analysis .path-connector.arrow-left .connector-line::after {
    right: auto;
    left: 0;
    border-left-color: transparent;
    border-right-color: #3b82f6;
}

.path-analysis .path-connector.arrow-left.bottleneck .connector-line::after {
    border-right-color: var(--warning-color);
}

/* Turn connector - L-shaped corner going down then across */
.path-analysis .path-connector.path-turn {
    position: relative;
    flex-grow: 0.7;
    margin-left: -2px;
}

/* Extend the connector line to the edge for turn connectors */
.path-analysis .path-connector.path-turn .connector-line {
    width: calc(101% + 18px);
    min-width: 3rem;
}

.path-analysis .path-connector.path-turn .turn-corner {
    position: absolute;
    width: 2px;
    background: #3b82f6;
    right: -8px;
    top: 0;
    height: calc(100% + 2.55rem);
}

/* Horizontal part of the L at the bottom - extends left to meet next row */
.path-analysis .path-connector.path-turn .turn-corner::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 4.25rem;
    height: 2px;
    background: #3b82f6;
}

/* Turn from left side (reversed rows going to next row) - mirrored */
.path-analysis .path-connector.path-turn.turn-left {
    flex-grow: 0.7;
    margin-left: 0;
    margin-right: -2px;
}

.path-analysis .path-connector.path-turn.turn-left .connector-line {
    width: calc(101% + 18px);
}

/* Arrow on turn-left: positioned on left end, pointing left (into the turn) */
.path-analysis .path-connector.path-turn.turn-left .connector-line::after {
    right: auto;
    left: 0;
    border-left-color: transparent;
    border-right-color: #3b82f6;
}

.path-analysis .path-connector.path-turn.turn-left.bottleneck .connector-line::after {
    border-right-color: var(--warning-color);
}

.path-analysis .path-connector.path-turn.turn-left .turn-corner {
    right: auto;
    left: -8px;
}

.path-analysis .path-connector.path-turn.turn-left .turn-corner::after {
    right: auto;
    left: 0;
}

.path-analysis .path-connector.path-turn.bottleneck .turn-corner,
.path-analysis .path-connector.path-turn.bottleneck .turn-corner::after {
    background: var(--warning-color);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    /* Wrap path-summary (grades + notes) on mobile */
    .path-analysis .path-summary {
        flex-wrap: wrap;
        justify-content: center;
    }

    .path-analysis .path-summary .result-notes {
        flex-basis: 100%;
        min-width: 0;
    }

    .path-analysis .path-max-speed {
        padding: 0.75rem 0.5rem;
    }

    .path-analysis .path-max-speed .speed-value {
        font-size: 1rem;
    }

    .path-analysis .grade-badge {
        padding: 0.35rem 0.4rem;
    }

    /* Mobile: simple vertical stack layout */
    .path-analysis .path-visualization {
        flex-direction: column;
        align-items: center;
    }

    .path-analysis .path-visualization.path-switchback {
        align-items: center;
    }

    .path-analysis .path-switchback .path-row {
        flex-direction: column;
        align-items: center;
        justify-content: center !important;
        align-self: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: auto;
    }

    /* Undo server-side reversal on mobile - reverse back to normal order */
    .path-analysis .path-switchback .path-row.reversed {
        flex-direction: column-reverse;
        padding-top: 0;
    }

    .path-analysis .path-row {
        flex-direction: column;
        align-items: center;
    }

    /* Vertical connectors on mobile */
    .path-analysis .path-connector {
        transform: rotate(90deg);
        margin: 0.25rem 0;
    }

    /* Fixed width for connector lines on mobile */
    .path-analysis .path-connector .connector-line,
    .path-analysis .path-connector.path-turn .connector-line,
    .path-analysis .path-connector.path-turn.turn-left .connector-line {
        width: 43px;
        min-width: 0;
    }

    /* Reset arrow direction on mobile - all arrows point same way (down after rotation) */
    .path-analysis .path-connector.arrow-left .connector-line::after {
        right: 0;
        left: auto;
        border-right-color: transparent;
        border-left-color: #3b82f6;
    }

    .path-analysis .path-connector.arrow-left.bottleneck .connector-line::after {
        border-right-color: transparent;
        border-left-color: var(--warning-color);
    }

    /* Reset turn-left arrow direction on mobile - all arrows point same way (down after rotation) */
    .path-analysis .path-connector.path-turn.turn-left .connector-line::after {
        right: 0;
        left: auto;
        border-right-color: transparent;
        border-left-color: #3b82f6;
    }

    .path-analysis .path-connector.path-turn.turn-left.bottleneck .connector-line::after {
        border-left-color: var(--warning-color);
    }

    /* Remove top padding on subsequent rows */
    .path-analysis .path-switchback .path-row + .path-row {
        padding-top: 0;
    }

    /* Hide turn connectors on mobile - not needed for vertical layout */
    .path-analysis .path-connector.path-turn .turn-corner {
        display: none;
    }

    /* Rotate speed badges to be readable on mobile */
    .path-analysis .path-connector .connector-speed {
        transform: rotate(-90deg);
        padding-right: 65%;
    }

    /* Reset turn connector margins on mobile */
    .path-analysis .path-connector.path-turn {
        margin-left: 0;
    }

    .path-analysis .path-connector.path-turn.turn-left {
        margin-right: 0;
    }

    /* Counter-rotate wireless icon to stay upright when connector is rotated */
    .path-analysis .path-connector .wireless-icon {
        transform: translateX(-50%) rotate(-90deg);
    }

}

/* Wi-Fi tooltip styling */
.wifi-tooltip-header {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
    color: #f1f5f9;
}

.wifi-tooltip-row {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 0.2rem;
}

.wifi-tooltip-signal {
    color: #60a5fa;
}

.wifi-tooltip-speed {
    color: #4ade80;
    font-weight: 500;
}

.wifi-tooltip-divider {
    height: 1px;
    background: rgba(148, 163, 184, 0.2);
    margin: 0.4rem 0;
}

.wifi-tooltip-link {
    font-size: 0.8rem;
    margin-bottom: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wifi-tooltip-link-signal {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.3rem;
    padding-left: 0.25rem;
}

.wifi-tooltip-link-speed {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 0.15rem;
    padding-left: 0.25rem;
}

.wifi-speed-rx {
    color: var(--speed-download-color);
}

.wifi-speed-tx {
    color: var(--speed-upload-color);
}

.wifi-tooltip-bottleneck {
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--warning-color);
    font-size: 0.75rem;
    font-weight: 500;
}

.wifi-band-badge {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
}

.wifi-band-badge.wifi-band-ng {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.wifi-band-badge.wifi-band-na {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.wifi-band-badge.wifi-band-6e {
    background: rgba(168, 85, 247, 0.2);
    color: var(--purple-light);
}

/* Device tooltip styling (path visualization) */
.device-tooltip-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    margin-bottom: 0.15rem;
    color: #e2e8f0;
}

.device-tooltip-row:last-child {
    margin-bottom: 0;
}

.device-tooltip-label {
    color: #94a3b8;
    font-weight: 500;
}

.wifi-tooltip-client-link {
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #60a5fa;
    font-size: 0.75rem;
}

.device-tooltip-link {
    color: #60a5fa;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Client name links to Wi-Fi Optimizer */
a.client-link {
    color: var(--primary-hover);
    text-decoration: none;
}

a.client-link:visited {
    color: var(--primary-hover);
}

a.client-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Clickable hop (wireless client linking to Wi-Fi Optimizer) */
a.path-hop.hop-clickable {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.path-hop.hop-clickable:hover {
    border-color: #60a5fa;
    background: rgba(59, 130, 246, 0.15);
}

/* VPN hop icons (Teleport, Tailscale, generic VPN) */
.vpn-icon {
    color: currentColor;
    vertical-align: middle;
    display: inline-block;
}

.vpn-shield-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.path-analysis .path-hop.hop-teleport {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.3);
}

.path-analysis .path-hop.hop-teleport .hop-icon {
    color: var(--purple-light);
}

.path-analysis .path-hop.hop-tailscale {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

.path-analysis .path-hop.hop-tailscale .hop-icon {
    color: #60a5fa;
}

.path-analysis .path-hop.hop-wan {
    background: rgba(125, 211, 252, 0.15);
    border-color: rgba(125, 211, 252, 0.3);
}

.path-analysis .path-hop.hop-wan .hop-icon {
    color: #7dd3fc;
}

.path-analysis .path-hop.hop-vpn {
    background: rgba(20, 184, 166, 0.15);
    border-color: rgba(20, 184, 166, 0.3);
}

.path-analysis .path-hop.hop-vpn .hop-icon {
    color: #2dd4bf;
}

/* Warnings and badges */
.path-analysis .bottleneck-warning {
    padding: 0.5rem 0.75rem;
    background: rgba(234, 179, 8, 0.1);
    border-left: 3px solid var(--warning-color);
    border-radius: 0 4px 4px 0;
    font-size: 0.8rem;
    color: var(--warning-color);
    margin-bottom: 0.5rem;
}

.path-analysis .routing-badge {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 4px;
    font-size: 0.8rem;
    color: #93c5fd;
    margin-bottom: 0.5rem;
}

.path-analysis .path-error {
    padding: 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

/* Notes section */
.path-analysis .path-notes {
    border-top: 1px solid var(--border-color);
}

.path-analysis .note {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 0.25rem 0;
}

.path-analysis .note::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 0.35rem;
    vertical-align: -4px;
    background: currentColor;
    -webkit-mask: var(--note-icon) center/contain no-repeat;
    mask: var(--note-icon) center/contain no-repeat;
}

/* Info circle icon for insights */
.path-analysis .note.insight {
    --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

/* Trending up arrow for recommendations */
.path-analysis .note.recommendation {
    color: #93c5fd;
    --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");
}

.test-error {
    padding: 1rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--border-radius);
    color: var(--danger-color);
    font-size: 0.9rem;
}

.no-results {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* History Table Expandable Rows */
.history-row-clickable {
    cursor: pointer;
    transition: background 0.15s ease;
}

.history-row-clickable:hover {
    background: #2d3a4d;
}

.history-row-expanded {
    background: #2d3a4d;
}

.history-details-row {
    background: #2d3a4d;
}

.expand-chevron {
    width: 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.history-details-row {
    background: var(--bg-tertiary);
}

.history-details-row td {
    padding: 0 !important;
}

.history-details-row .expand-wrapper.expanded {
    border-top: 1px solid var(--border-color);
}

.history-details {
    padding: 1rem 1.5rem 1.5rem;
}

/* ============================================
   Pagination Component
   ============================================ */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.pagination-info {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* ============================================
   Result Summary (compact link to full result)
   ============================================ */

/* Expandable result box - unified container for summary + details */
.result-box {
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    margin: 1rem 0 0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.result-box:hover {
    background: var(--bg-hover);
}

.result-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
}

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

.result-box-details {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease-out;
}

.result-box.expanded .result-box-details {
    grid-template-rows: 1fr;
}

.result-box-details-inner {
    overflow: hidden;
    padding: 0 1rem;
}

.result-box.expanded .result-box-details-inner {
    padding: 0 1rem 1rem;
}

/* Legacy result-summary for any remaining uses */
.result-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.2s ease;
    margin: 1rem 0 0;
}

.result-summary:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.result-speeds {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-weight: 600;
}

.result-speed {
    font-size: 1.25rem;
}

.result-unit {
    font-size: 0.875rem;
    font-weight: normal;
    color: var(--text-secondary);
}

.result-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.result-summary {
    cursor: pointer;
}

.result-expand-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 1rem;
}

/* Expandable details animation wrapper */
.expand-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease-out;
}

.expand-wrapper.expanded {
    grid-template-rows: 1fr;
}

.expand-wrapper > .expand-content {
    overflow: hidden;
}

.result-expanded-details {
    padding: 1rem 0;
}

/* Form section header */
.form-section-header h5 {
    color: var(--text-primary);
}

.form-section-header .form-help {
    color: var(--text-muted);
}

.form-section-header a {
    color: var(--primary-color);
}

/* ============================================
   Blazor Reconnection Dialog (Dark Theme)
   ============================================ */
.components-reconnect-dialog {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    padding: 2rem !important;
    box-shadow: var(--shadow-lg) !important;
}

.components-reconnect-dialog p {
    color: var(--text-primary) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
}

.components-reconnect-dialog button {
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--border-radius) !important;
    padding: 0.625rem 1.25rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.components-reconnect-dialog button:hover {
    background: var(--primary-hover) !important;
}

/* Blazor error UI */
#blazor-error-ui {
    background: var(--danger-color) !important;
    color: white !important;
    padding: 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: none;
}

#blazor-error-ui * {
    color: white !important;
}

#blazor-error-ui.show {
    display: block;
}

/* ============================================
   Audit Page Styles
   ============================================ */

/* Audit Controls Layout */
.audit-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    padding-top: 1rem;
}

.audit-controls .btn {
    margin-right: 0.5rem;
}

/* Audit Options (Checkboxes) */
.audit-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
    width: 100%;
}

.audit-options .checkbox-label {
    gap: 0.625rem;
}

@media (max-width: 768px) {
    .audit-controls,
    .gateway-actions {
        justify-content: center;
        padding-top: 0;
    }

    .audit-controls .btn,
    .gateway-actions .btn {
        margin-right: 0;
    }

    .audit-options,
    .diagnostics-options {
        justify-content: center;
        margin-top: 0.5rem;
    }
}

/* Audit Results Summary */
.results-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3rem;
    place-content: center;
}

@media (max-width: 768px) {
    .results-summary {
        gap: 1rem;
    }
}

.summary-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.score-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 4px solid var(--border-color);
}

.score-circle.score-excellent {
    border-color: var(--success-color);
    background: rgba(36, 188, 112, 0.1);
}

.score-circle.score-good {
    border-color: var(--primary-color);
    background: rgba(5, 89, 201, 0.1);
}

.score-circle.score-fair {
    border-color: var(--warning-color);
    background: rgba(245, 158, 11, 0.1);
}

.score-circle.score-poor {
    border-color: var(--danger-color);
    background: rgba(239, 68, 68, 0.1);
}

.score-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.score-max {
    font-size: 1rem;
    color: var(--text-muted);
    margin-left: 0.125rem;
}

.score-label {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.score-excellent .score-label,
.summary-score:has(.score-excellent) .score-label {
    color: var(--success-color);
}

.score-good .score-label,
.summary-score:has(.score-good) .score-label {
    color: var(--primary-color);
}

.score-fair .score-label,
.summary-score:has(.score-fair) .score-label {
    color: var(--warning-color);
}

.score-poor .score-label,
.summary-score:has(.score-poor) .score-label {
    color: var(--danger-color);
}

/* Issue Counts */
.issue-counts {
    display: flex;
    gap: 2rem;
}

.issue-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 1.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    min-width: 80px;
}

.issue-count .count {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.issue-count .label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.issue-count.critical .count {
    color: var(--danger-color);
}

.issue-count.warning .count,
.issue-count.recommended .count {
    color: var(--warning-color);
}

.issue-count.info .count {
    color: var(--info-color);
}

/* Compact issue count for card headers */
.issue-count-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    color: var(--text-muted);
}

/* Audit Timestamp */
.audit-timestamp {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ============================================
   Audit Detail Sections
   ============================================ */

/* Switch section */
.switch-section {
    margin-bottom: 2rem;
}

.switch-section:last-child {
    margin-bottom: 0;
}

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

.switch-model {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.switch-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.5rem;
}

/* AP section */
.ap-section {
    margin-bottom: 1.5rem;
}

.ap-section:last-child {
    margin-bottom: 0;
}

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

.client-count {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Port table - fixed column widths */
.port-table {
    table-layout: fixed;
}

.port-table th,
.port-table td {
    font-size: 0.8rem;
    padding: 0.4rem 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Switch port table columns: Port, Name, Link, PoE, Port Sec, Forward, Native VLAN, Status */
.port-table th:nth-child(1),
.port-table td:nth-child(1) { width: 5%; }   /* Port */
.port-table th:nth-child(2),
.port-table td:nth-child(2) { width: 18%; }  /* Name */
.port-table th:nth-child(3),
.port-table td:nth-child(3) { width: 8%; }   /* Link */
.port-table th:nth-child(4),
.port-table td:nth-child(4) { width: 6%; }   /* PoE */
.port-table th:nth-child(5),
.port-table td:nth-child(5) { width: 9%; }   /* Port Sec */
.port-table th:nth-child(6),
.port-table td:nth-child(6) { width: 10%; }  /* Forward */
.port-table th:nth-child(7),
.port-table td:nth-child(7) { width: 28%; }  /* Native VLAN */
.port-table th:nth-child(8),
.port-table td:nth-child(8) { width: 16%; }  /* Status */

/* Wireless client table - fixed column widths */
.wireless-client-table {
    table-layout: fixed;
}

.wireless-client-table th,
.wireless-client-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Wireless client columns: Client, Type, Network, Status */
.wireless-client-table th:nth-child(1),
.wireless-client-table td:nth-child(1) { width: 35%; }  /* Client */
.wireless-client-table th:nth-child(2),
.wireless-client-table td:nth-child(2) { width: 20%; }  /* Type */
.wireless-client-table th:nth-child(3),
.wireless-client-table td:nth-child(3) { width: 25%; }  /* Network */
.wireless-client-table th:nth-child(4),
.wireless-client-table td:nth-child(4) { width: 20%; }  /* Status */

/* Offline client table - fixed column widths */
.offline-client-table {
    table-layout: fixed;
}

.offline-client-table th,
.offline-client-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Offline client columns: Client, Type, Network, Last Seen, Status */
.offline-client-table th:nth-child(1),
.offline-client-table td:nth-child(1) { width: 30%; }  /* Client */
.offline-client-table th:nth-child(2),
.offline-client-table td:nth-child(2) { width: 18%; }  /* Type */
.offline-client-table th:nth-child(3),
.offline-client-table td:nth-child(3) { width: 22%; }  /* Network */
.offline-client-table th:nth-child(4),
.offline-client-table td:nth-child(4) { width: 13%; }  /* Last Seen */
.offline-client-table th:nth-child(5),
.offline-client-table td:nth-child(5) { width: 17%; }  /* Status */

/* Status classes */
.status-success {
    color: var(--success-color);
    font-weight: 500;
}

.status-warning {
    color: var(--warning-color);
    font-weight: 500;
}

.status-danger {
    color: var(--danger-color);
    font-weight: 500;
}

.status-neutral {
    color: var(--text-muted);
    font-weight: 500;
}

.row-warning {
    background-color: rgba(231, 150, 19, 0.1);
}

.row-warning td {
    border-color: rgba(231, 150, 19, 0.2);
}

.row-critical {
    background-color: rgba(218, 68, 68, 0.1);
}

.row-critical td {
    border-color: rgba(218, 68, 68, 0.2);
}

/* Hardening list */
.hardening-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hardening-list li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.hardening-list li:last-child {
    border-bottom: none;
}

.hardening-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--success-color);
    font-weight: bold;
}

/* DNS Security summary */
.dns-summary {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
}

.dns-protected {
    background-color: rgba(36, 188, 112, 0.1);
    border: 1px solid rgba(36, 188, 112, 0.3);
    color: var(--success-color);
}

.dns-partial {
    background-color: rgba(231, 150, 19, 0.1);
    border: 1px solid rgba(231, 150, 19, 0.3);
    color: var(--warning-color);
}

/* ============================================
   Tooltip Icon Component (using Tippy.js)
   Interactive popovers with link support
   ============================================ */
.tooltip-wrapper {
    display: inline-flex;
    align-items: center;
}

.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-radius: 50%;
    cursor: pointer;
    vertical-align: middle;
    transition: all 0.2s ease;
    user-select: none;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.tooltip-icon:hover {
    color: var(--text-primary);
    background: var(--primary-color);
}

/* Smaller tooltip icon for table cells and inline use */
.tooltip-icon-sm {
    width: 14px;
    height: 14px;
    font-size: 10px;
    margin-left: 3px;
}

/* Hidden content element (Tippy reads innerHTML from this) */
.tooltip-content {
    display: none;
}

/* Tippy.js custom theme to match app styling */
.tippy-box[data-theme~='custom'] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    box-shadow: var(--shadow-lg);
}

.tippy-box[data-theme~='custom'] .tippy-content {
    padding: 10px 14px;
}

.tippy-box[data-theme~='custom'] .tippy-arrow {
    color: var(--border-color);
}

/* Links inside Tippy tooltips */
.tippy-box[data-theme~='custom'] a {
    color: var(--primary-hover);
    text-decoration: none;
}

.tippy-box[data-theme~='custom'] a:hover {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tippy-box[data-theme~='custom'] strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Alert with tooltip (SSH troubleshooting, etc.) */
.alert-with-tooltip {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.alert-with-tooltip .alert-text {
    flex: 1;
}

.alert-with-tooltip .tooltip-wrapper {
    flex-shrink: 0;
    margin-left: auto;
}

.alert-with-tooltip .tooltip-icon {
    width: 22px;
    height: 22px;
    font-size: 14px;
    margin-left: 0;
}

/* Wide tooltip content for detailed help */
.tippy-box[data-theme~='custom'].tooltip-wide {
    max-width: 360px;
}

/* ============================================
   Login Page Styles
   ============================================ */

.auth-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-primary) 0%, #0d1117 50%, var(--bg-secondary) 100%);
    padding: 1rem;
}

.login-container {
    width: 100%;
    max-width: 420px;
}

.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
}

.login-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-logo {
    width: 140px;
    height: auto;
    margin-bottom: 0.75rem;
}

.login-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.login-subtitle {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0.25rem 0 0 0;
}

.login-card .form-group {
    margin-bottom: 1.5rem;
}

.login-card .form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.login-card .form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-card .form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.login-card .form-control::placeholder {
    color: var(--text-muted);
}

.login-btn {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.login-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.login-footer .text-muted {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* Logout Button in Header */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logout-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.logout-btn:hover {
    background: var(--bg-hover);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.logout-btn svg {
    width: 14px;
    height: 14px;
}

/* ============================================
   Device Icons
   ============================================ */

/* Device icon image */
.device-icon {
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Size variants */
.device-icon-sm {
    width: 16px;
    height: 16px;
}

.device-icon-md {
    width: 28px;
    height: 28px;
}

.device-icon-lg {
    width: 34px;
    height: 34px;
}

.device-icon-xl {
    width: 48px;
    height: 48px;
}

/* Fallback emoji display */
.device-icon-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.device-icon-fallback.device-icon-sm {
    font-size: 14px;
}

.device-icon-fallback.device-icon-md {
    font-size: 18px;
}

.device-icon-fallback.device-icon-lg {
    font-size: 24px;
}

.device-icon-fallback.device-icon-xl {
    font-size: 36px;
}

/* Device icon with name wrapper */
.device-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Table icon cell */
.icon-cell {
    width: 32px;
    padding-right: 0 !important;
    text-align: center;
}

.icon-cell .device-icon {
    display: block;
    margin: 0 -0.5rem 0 auto;
}

@media (max-width: 768px) {
    .icon-cell .device-icon {
        margin: 0 auto;
    }
}

/* ============================================
   MOBILE OVERRIDES (must come after base styles)
   ============================================ */
@media (max-width: 768px) {
    /* Issue counts - reduce gap and padding on mobile */
    .issue-counts {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .issue-count {
        padding: 1rem 1rem;
        min-width: 70px;
    }

    /* Audit timestamp - hide label, reduce font size */
    .audit-timestamp {
        font-size: 0.75rem;
    }

    .audit-timestamp .timestamp-label {
        display: none;
    }
}

@media (max-width: 412px) {
    .issue-count {
        padding: 0.75rem 0.75rem;
    }
}

/* ============================================
   SETUP GUIDE - Collapsible help sections
   ============================================ */

.setup-guide {
    margin-top: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.setup-guide summary {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-secondary);
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.setup-guide summary::-webkit-details-marker {
    display: none;
}

.setup-guide summary::before {
    content: "▶";
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.setup-guide[open] summary::before {
    transform: rotate(90deg);
}

.setup-guide summary:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-radius: 8px 8px 0 0;
}

.setup-guide:not([open]) summary:hover {
    border-radius: 8px;
}

.setup-guide-content {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.setup-guide-content h4 {
    color: var(--text-primary);
    margin: 1rem 0 0.5rem 0;
    font-size: 0.95rem;
}

.setup-guide-content h4:first-child {
    margin-top: 0;
}

.setup-guide-content p {
    margin: 0.5rem 0;
}

.setup-guide-content ol,
.setup-guide-content ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.setup-guide-content li {
    margin: 0.35rem 0;
}

.setup-guide-content ul ul {
    margin-top: 0.25rem;
}

.setup-guide-content code {
    background: var(--bg-tertiary);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85em;
}

/* Audit page table minimum widths for mobile */
@media (max-width: 768px) {
    .port-table {
        min-width: 800px;
    }

    .wireless-client-table,
    .offline-client-table {
        min-width: 700px;
    }
}

/* Nav icon SVG (inline SVG icons) */
.nav-icon-svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
    opacity: 0.8;
}

.nav-link:hover .nav-icon-svg,
.nav-link.active .nav-icon-svg {
    opacity: 1;
}

/* ================================
   UPnP Inspector Page
   ================================ */

.upnp-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.upnp-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.upnp-controls .control-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.upnp-controls .filter-label {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.upnp-controls .filter-select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
}

/* Summary Cards */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.summary-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.summary-card .summary-value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
}

.summary-card .summary-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.summary-card.summary-warning .summary-value {
    color: #fbbf24;
}

.summary-card.summary-muted {
    opacity: 0.6;
}

.summary-card.summary-muted .summary-value {
    color: var(--text-muted);
}

/* UPnP Device Groups */
.upnp-device-group {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.upnp-device-group.has-expiring {
    border-color: rgba(251, 191, 36, 0.4);
}

.upnp-device-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
}

.upnp-device-header:hover {
    background: var(--bg-hover);
}

.upnp-device-header .device-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.upnp-device-header .device-ip {
    font-weight: 600;
    font-family: ui-monospace, monospace;
    color: var(--text-primary);
}

.upnp-device-header .device-count {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.upnp-device-header .expand-chevron {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* UPnP Rules List */
.upnp-rules-list {
    padding: 0 1rem 1rem 1rem;
}

.upnp-rule-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 1rem;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border-color);
}

.upnp-rule-item:last-child {
    border-bottom: none;
}

/* Status Indicator */
.rule-status {
    width: 24px;
    display: flex;
    justify-content: center;
}

.rule-status .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--success-color);
}

.rule-status.status-active .status-dot {
    background: var(--success-color);
}

.rule-status.status-expiring .status-dot {
    background: #fbbf24;
    animation: pulse-yellow 2s infinite;
}

.rule-status.status-stale .status-dot {
    background: #94a3b8;
}

.rule-status.status-disabled .status-dot {
    background: var(--danger-color);
}

@keyframes pulse-yellow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Rule Details */
.rule-details {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.rule-details .rule-main {
    width: 220px;
    flex-shrink: 0;
}

.rule-details .rule-name {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rule-details .rule-ports {
    display: flex;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
}

.rule-protocol {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 500;
}

.rule-protocol.protocol-udp {
    background: rgba(168, 85, 247, 0.2);
    color: var(--purple-light);
}

.rule-protocol.protocol-both {
    background: rgba(249, 115, 22, 0.2);
    color: var(--accent-hover);
}

.rule-details .rule-port-mapping {
    font-family: ui-monospace, monospace;
}

.rule-ports code {
    background: var(--bg-primary);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
}

/* Lease Time */
.rule-lease {
    text-align: right;
    min-width: 70px;
}

.rule-lease .lease-time {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-family: ui-monospace, monospace;
}

.rule-lease .lease-time.expiring {
    color: #fbbf24;
    font-weight: 500;
}

/* Traffic Info */
.rule-traffic {
    text-align: right;
    min-width: 120px;
}

.rule-traffic .traffic-info {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.rule-traffic .traffic-info.no-traffic {
    color: var(--text-muted);
    opacity: 0.6;
}

/* Note Input */
.rule-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 380px;
    flex-shrink: 0;
}

.rule-note .note-input {
    width: 320px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    transition: border-color 0.15s, background-color 0.15s;
}

.rule-note .note-input::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

.rule-note .note-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.08);
}

.rule-note .note-status {
    font-size: 0.6875rem;
    white-space: nowrap;
}

.rule-note .note-status.saving {
    color: var(--text-muted);
}

.rule-note .note-status.saved {
    color: #4ade80;
}

@media (max-width: 768px) {
    .rule-note .note-input {
        width: 90%;
    }
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-active {
    background: rgba(36, 188, 112, 0.2);
    color: var(--success-color);
}

.badge-idle {
    background: rgba(100, 116, 139, 0.2);
    color: var(--text-muted);
}

.badge-disabled {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Row disabled state */
.row-disabled {
    opacity: 0.5;
}

/* Expand/collapse animation using CSS grid for true auto-height */
.expand-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease-in;
}

.expand-wrapper.expanded {
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease-out;
}

.expand-wrapper > .expand-content {
    overflow: hidden;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .upnp-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .upnp-controls .control-group {
        justify-content: space-between;
    }

    .summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .upnp-rule-item {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 0.5rem;
    }

    .rule-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .rule-note {
        width: 100%;
    }

    .rule-lease,
    .rule-traffic {
        grid-column: 2;
        text-align: left;
        min-width: unset;
    }

    .rule-lease {
        display: inline;
    }

    .rule-traffic {
        display: inline;
        margin-left: 1rem;
    }
}

/* ============================================
   Diagnostics Page Styles
   ============================================ */

.diagnostics-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.diagnostics-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    padding-top: 1rem;
}

.diagnostics-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
    width: 100%;
}

.diagnostics-options .checkbox-label {
    gap: 0.625rem;
}

.empty-section-text {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.875rem;
    font-style: italic;
}

/* Diagnostics Summary Stats */
.diagnostics-summary {
    display: flex;
    justify-content: center;
}

.summary-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 1.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    min-width: 100px;
}

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

.stat-item .stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.stat-item.has-warnings .stat-value {
    color: var(--warning-color);
}

.stat-item.has-info .stat-value {
    color: var(--info-color);
}

/* Diagnostics Issues List */
.issues-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Issue item variants for diagnostics severity levels */
.issue-item.severity-warning {
    border-left-color: var(--warning-color);
}

.issue-item.severity-info {
    border-left-color: var(--info-color);
}

.issue-item.severity-unknown {
    border-left-color: var(--text-muted);
}

.issue-item.severity-low {
    border-left-color: var(--info-color);
}

.issue-item.severity-medium {
    border-left-color: var(--warning-color);
}

.issue-item.severity-high {
    border-left-color: var(--danger-color);
}

/* Severity Badge */
.severity-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.severity-badge.warning,
.severity-badge.medium {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-color);
}

.severity-badge.info,
.severity-badge.low {
    background: rgba(6, 182, 212, 0.15);
    color: var(--info-color);
}

.severity-badge.high {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger-color);
}

.severity-badge.unknown {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-muted);
}

/* Issue Details Grid */
.issue-details {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0.5rem 0;
}

.detail-row {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.detail-label {
    color: var(--text-muted);
    flex-shrink: 0;
}

.detail-value {
    color: var(--text-secondary);
}

/* Issue Count Badge (card header) */
.issue-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.5rem;
    border-radius: 12px;
    background: var(--bg-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* No Issues Success State */
.no-issues {
    text-align: center;
    padding: 3rem 2rem;
}

.no-issues .success-icon {
    display: block;
    font-size: 3rem;
    color: var(--success-color);
    margin-bottom: 1rem;
}

.no-issues h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.no-issues p {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Responsive adjustments for diagnostics */
@media (max-width: 768px) {
    .diagnostics-controls {
        justify-content: center;
        padding-top: 0;
    }

    .summary-stats {
        gap: 0.75rem;
    }

    .stat-item {
        min-width: 80px;
        padding: 0.75rem 1rem;
    }

    .stat-item .stat-value {
        font-size: 1.5rem;
    }

    .detail-row {
        flex-direction: column;
        gap: 0.125rem;
    }
}

/* ================================
   Wi-Fi Optimizer Page
   ================================ */

.wifi-content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* Override main dashboard min-height for WiFi overview cards */
.wifi-content-grid > .card:nth-child(-n+4) {
    min-height: auto;
}

@media (max-width: 1024px) {
    .wifi-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .wifi-content-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
}

/* Stat icon SVG */
.stat-icon-svg {
    width: 3rem;
    height: 3rem;
    opacity: 0.8;
    color: var(--primary);
    flex-shrink: 0;
}

.stat-icon-svg.stat-icon-sm {
    width: 2.5rem;
    height: 2.5rem;
}

/* Health score icon in stat card */
.wifi-health-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
}

.wifi-health-icon .health-score-num {
    font-size: 1.25rem;
    font-weight: 700;
}

.wifi-health-icon.score-excellent {
    border-color: var(--success-color);
    color: var(--success-color);
}

.wifi-health-icon.score-good {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.wifi-health-icon.score-fair {
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.wifi-health-icon.score-poor {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

/* Score label colors and font for stat card */
.stat-value.score-excellent,
.stat-value.score-good,
.stat-value.score-fair,
.stat-value.score-poor {
    font-size: 1.6rem;
}
.stat-value.score-excellent { color: var(--success-color); }
.stat-value.score-good { color: var(--primary-color); }
.stat-value.score-fair { color: var(--warning-color); }
.stat-value.score-poor { color: var(--danger-color); }

@media (max-width: 450px) {
    .stat-value.score-excellent,
    .stat-value.score-good,
    .stat-value.score-fair,
    .stat-value.score-poor {
        font-size: 5.3vw;
    }
}

/* Health Score Display */
.health-score-display {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.health-score-main {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
    row-gap: 0;
}

.health-score-main .score-circle {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 120px;
    height: 120px;
}

.health-score-main .score-label {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    align-self: end;
}

.health-score-main .health-score-timestamp {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0;
    align-self: start;
}

.health-score-main .score-value.score-perfect {
    font-size: 2rem;
}

/* Health Dimensions */
.health-dimensions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dimension-row {
    display: grid;
    grid-template-columns: 140px 1fr 40px;
    gap: 1rem;
    align-items: center;
}

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

.dimension-bar-container {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 0 4px 4px 0;
    overflow: hidden;
}

.dimension-bar {
    height: 100%;
    border-radius: 0 4px 4px 0;
    transition: width 0.3s ease;
}

.dimension-bar.bar-excellent { background: #22c55e; }
.dimension-bar.bar-good { background: #84cc16; }
.dimension-bar.bar-fair { background: #fbbf24; }
.dimension-bar.bar-poor { background: #ef4444; }

.dimension-score {
    font-size: 0.875rem;
    font-weight: 600;
    text-align: right;
    color: var(--text-primary);
}

/* Band Distribution */
.band-distribution {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 1rem 0;
}

.band-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.band-bar-container {
    width: 60px;
    height: 120px;
    background: var(--bg-tertiary);
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.band-bar {
    width: 100%;
    border-radius: 6px 6px 0 0;
    transition: height 0.3s ease;
    min-height: 4px;
}

.band-bar.band-2ghz { background: #fbbf24; }
.band-bar.band-5ghz { background: #3b82f6; }
.band-bar.band-6ghz { background: #a855f7; }

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

.band-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.band-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.band-stat {
    display: flex;
    gap: 0.5rem;
}

.band-stat-label {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.band-stat-value {
    font-weight: 600;
    font-size: 0.875rem;
}

/* Satisfaction/Signal colors */
.satisfaction-excellent, .signal-excellent { color: #22c55e; }
.satisfaction-good, .signal-good { color: #84cc16; }
.satisfaction-fair, .signal-fair { color: #fbbf24; }
.satisfaction-poor, .signal-poor { color: #ef4444; }

/* WiFi Health Issues List */
.wifi-issues-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wifi-issue-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border-left: 4px solid var(--border-color);
}

.wifi-issue-item.issue-critical {
    border-left-color: #ef4444;
}

.wifi-issue-item.issue-warning {
    border-left-color: #fbbf24;
}

.wifi-issue-item.issue-info {
    border-left-color: #3b82f6;
}

.wifi-issue-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wifi-issue-badge {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--bg-primary);
}

.wifi-issue-item.issue-critical .wifi-issue-badge {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

.wifi-issue-item.issue-warning .wifi-issue-badge {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
}

.wifi-issue-item.issue-info .wifi-issue-badge {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.15);
}

.wifi-issue-dimension {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.wifi-issue-impact {
    font-size: 0.75rem;
    color: #ef4444;
    font-weight: 500;
}

.wifi-issue-title {
    font-weight: 600;
    color: var(--text-primary);
}

.wifi-issue-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.wifi-issue-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.wifi-issue-entity {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.wifi-issue-action {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: 6px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* WiFi Issues List Responsive */
@media (max-width: 900px) {
    .wifi-issue-item {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .wifi-issue-meta {
        flex-wrap: wrap;
    }

    .wifi-issue-action {
        justify-self: start;
    }
}

/* Success State */
.success-state {
    color: #22c55e;
}

.success-state svg {
    opacity: 0.6;
}

.success-state p {
    color: var(--text-secondary);
}

/* Access Points List */
.ap-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.ap-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
}

.ap-card.ap-offline {
    opacity: 0.5;
}

.ap-status {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.ap-status-text {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.ap-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

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

.ap-model {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ap-stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
    margin-left: 0.25rem;
}

.ap-stat {
    display: flex;
    flex-direction: column;
}

.roaming-stat-value,
.channel-stat-value,
.load-stat-value,
.power-stat-value,
.airtime-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.33;
}

.ap-stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ap-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.ap-radios {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.ap-radio {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
}

.radio-band {
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
}

.radio-band.band-2ghz {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.radio-band.band-5ghz {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.radio-band.band-6ghz {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.radio-channel {
    color: var(--text-secondary);
}

.radio-util {
    font-weight: 500;
}

.radio-util.util-low { color: #22c55e; }
.radio-util.util-medium { color: #fbbf24; }
.radio-util.util-high { color: #ef4444; }

.radio-clients {
    color: var(--text-muted);
    margin-left: auto;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .dimension-row {
        grid-template-columns: 100px 1fr 35px;
        gap: 0.5rem;
    }

    .dimension-label {
        font-size: 0.75rem;
    }

    .band-distribution {
        gap: 1.5rem;
    }

    .band-bar-container {
        width: 50px;
        height: 100px;
    }

    .band-stats {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }

    .ap-list {
        grid-template-columns: 1fr;
    }

    .health-score-main .score-circle {
        width: 100px;
        height: 100px;
    }

    .health-score-main .score-value {
        font-size: 2rem;
    }

    .health-score-main .score-value.score-perfect {
        font-size: 1.75rem;
    }
}

/* ================================
   Metrics Component
   ================================ */

.metrics-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.metrics-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

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

.metrics-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.metrics-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Pill selector - used for toggle buttons (time ranges, status filters, etc.) */
.pill-selector,
.time-refresh-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 768px) {
    .time-refresh-group {
        width: 100%;
        justify-content: space-around;
    }

    .time-range-selector {
        max-width: 400px;
    }
}

.time-range-selector {
    display: flex;
    gap: 0.25rem;
    background: var(--bg-primary);
    border-radius: 6px;
    padding: 0.25rem;
}

/* Use secondary background when inside nested cards */
.card .card .pill-selector,
.card .card .time-range-selector,
.card .card .band-tab,
.card .card .btn-secondary,
.card .card .btn-ghost {
    background: var(--bg-secondary);
}

.pill-btn,
.time-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.pill-btn:hover,
.time-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.pill-btn.active,
.time-btn.active {
    background: var(--primary-color);
    color: white;
}

.metrics-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.filter-group.metrics-filter-right {
    margin-left: auto;
}

.metrics-filters .band-tabs,
.env-controls .band-tabs {
    margin-bottom: 0;
}

/* Band filter label colors */
.filter-checkbox .checkbox-label.band-2ghz { color: #fbbf24; }
.filter-checkbox .checkbox-label.band-5ghz { color: #3b82f6; }
.filter-checkbox .checkbox-label.band-6ghz { color: #a855f7; }

.filter-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.ap-filter-select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    min-width: 225px;
}

.ap-filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.ap-filter-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
}

.filter-checkbox input {
    cursor: pointer;
}

.filter-checkbox .checkbox-label {
    font-size: 0.8rem;
    font-weight: 500;
}

.filter-checkbox .checkbox-label.airtime { color: #2ba89a; }
.filter-checkbox .checkbox-label.interference { color: #a78bfa; }
.filter-checkbox .checkbox-label.retries { color: #ef5858; }

.filter-checkboxes {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.metrics-loading,
.metrics-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
    gap: 1rem;
}

.band-charts-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    min-height: 50vh;
}

@media (max-width: 768px) {
    .band-charts-wrapper {
        min-height: 70vh;
    }
}

.band-chart-container {
    flex: 1;
    min-height: 0;
    position: relative;
    padding-bottom: 2.2rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.band-chart-container > div:last-child {
    position: absolute;
    top: 2rem;
    left: 0;
    right: 0;
    bottom: 0;
}

.band-chart-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.band-chart-header .band-count {
    font-size: 0.75rem;
    color: #6b7280;
}

.band-chart-header .band-label {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.band-chart-header .band-label.band-2ghz {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.band-chart-header .band-label.band-5ghz {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.band-chart-header .band-label.band-6ghz {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

/* ApexCharts dark theme overrides */
.apexcharts-canvas {
    background: transparent !important;
}

.apexcharts-text {
    fill: #9ca3af !important;
}

.apexcharts-gridline {
    stroke: #374151 !important;
}

.apexcharts-tooltip {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.apexcharts-tooltip-title {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

@media (max-width: 768px) {
    .metrics-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .metrics-controls {
        width: 100%;
        justify-content: space-between;
    }

    .time-range-selector {
        flex: 1;
    }

    .time-btn {
        flex: 1;
        padding: 0.5rem 0.25rem;
    }

    .filter-group {
        flex-wrap: wrap;
    }
}

/* ================================
   Client Timeline Component
   ================================ */

.client-timeline-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.timeline-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.timeline-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.client-selector {
    min-width: 250px;
}

.client-selector .form-select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    width: 100%;
}

.client-selector .form-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.timeline-loading,
.timeline-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
    gap: 1rem;
}

/* Sortable column headers */
.data-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.5rem;
}

.data-table th.sortable:hover {
    background: rgba(255, 255, 255, 0.05);
}

.data-table th.sortable::after {
    content: '↕';
    position: absolute;
    right: 0.5rem;
    opacity: 0.3;
    font-size: 0.75rem;
}

.data-table th.sortable.sort-asc::after {
    content: '↑';
    opacity: 1;
}

.data-table th.sortable.sort-desc::after {
    content: '↓';
    opacity: 1;
}

/* Client selector combo (View All + filterable select) */
.client-selector-combo {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.client-selector-combo .view-all-btn {
    padding: 0.5rem 0.75rem;
    margin-right: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.client-selector-combo .view-all-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

/* Filterable select dropdown */
.filterable-select {
    position: relative;
    min-width: 400px;
    max-width: 400px;
}

@media (max-width: 768px) {
    .filterable-select {
        min-width: 80vw;
        max-width: 80vw;
    }
}

.filterable-select-input {
    width: 100%;
    height: 34px;
    cursor: pointer;
    padding: 0 2.5rem 0 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
}

.filterable-select.open .filterable-select-input {
    cursor: text;
}

.filterable-select-input::placeholder {
    color: var(--text-tertiary);
}

.filterable-select-display {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    height: 34px;
    padding: 0 2.5rem 0 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
}

.filterable-select-display:hover {
    border-color: var(--primary-color);
}

.filterable-select-display .option-text {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filterable-select-display .option-mac {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: monospace;
}

/* Overlay for click-outside-to-close */
.filterable-select-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.filterable-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.filterable-select-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.1s ease;
}

.filterable-select-option:hover {
    background: rgba(59, 130, 246, 0.15);
}

.filterable-select-option.offline {
    opacity: 0.7;
}

.filterable-select-option .option-text {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filterable-select-option .option-mac {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: monospace;
}

.filterable-select-empty {
    padding: 0.75rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Client list table */
.client-list-section {
    margin-top: 1rem;
}

.client-list-section .table-responsive {
    overflow-x: auto;
}

.client-list-section .data-table tbody tr {
    cursor: pointer;
}

.client-list-section .data-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.1);
}

/* Pagination (shared with SpectrumAnalysis) */
.client-list-section .pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0 0;
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
}

.client-list-section .pagination-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.client-list-section .pagination-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.client-list-section .page-btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.client-list-section .page-btn:hover:not(:disabled) {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.client-list-section .page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.client-list-section .page-indicator {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0 0.5rem;
}

.client-list-section .data-table td:first-child {
    text-align: center;
}

.client-offline {
    opacity: 0.7;
}

.client-info-banner {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.client-info-main {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.client-info-main .client-name {
    font-size: 1.1rem;
}

.client-info-main .client-dashboard-link {
    color: var(--text-muted);
    transition: color 0.15s;
}

.client-info-main .client-dashboard-link:hover {
    color: var(--primary-color);
}

.client-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.client-mac {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-family: monospace;
}

.client-info-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.info-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.band-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.timeline-chart-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

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

.chart-title {
    font-weight: 600;
    font-size: 0.9rem;
}

.chart-filters {
    display: flex;
    gap: 1rem;
}

.chart-empty {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

.filter-checkbox .checkbox-label.signal { color: #3b82f6; }

.events-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

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

.events-title {
    font-weight: 600;
    font-size: 0.9rem;
}

.events-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.events-empty {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

.events-list {
    max-height: 300px;
    overflow-y: auto;
}

.event-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.event-item:last-child {
    border-bottom: none;
}

.event-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
    background: var(--bg-primary);
    color: var(--text-muted);
}

.event-connect .event-icon {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.event-disconnect .event-icon {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.event-roam .event-icon {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.event-warning .event-icon {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.event-success .event-icon {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.event-content {
    flex: 1;
    min-width: 0;
}

.event-title {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.event-details {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
}

.event-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Wi-Fi View Tabs */
.wifi-view-tabs-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
    margin-bottom: 1.5rem;
}

.wifi-view-tabs {
    display: flex;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.wifi-view-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.wifi-tabs-scroll-btn {
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 0.4rem;
    font-size: 1.2rem;
    flex-shrink: 0;
    z-index: 1;
    transition: color 0.15s ease;
}

.wifi-tabs-scroll-btn:hover {
    color: var(--text-primary);
}

/* Show scroll buttons when tabs overflow */
.wifi-view-tabs-wrapper.has-overflow .wifi-tabs-scroll-btn {
    display: flex;
}

.wifi-view-tabs-wrapper.has-overflow .wifi-view-tabs {
    padding-top: 0.5rem;
}

/* Collapse button when scrolled to start/end */
.wifi-view-tabs-wrapper.at-start .wifi-tabs-scroll-left,
.wifi-view-tabs-wrapper.at-end .wifi-tabs-scroll-right {
    width: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
}

.wifi-view-tab {
    padding: 0.5rem 0.68rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.wifi-view-tab:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.wifi-view-tab.active {
    background: var(--primary-color);
    color: white;
    border-radius: 4px;
}

@@media (max-width: 768px) {
    .wifi-view-tabs-wrapper {
        margin-bottom: 0.75rem;
    }

    .wifi-stats-row {
        margin-bottom: 16px;
    }
}

/* ============================================
   Roaming Analytics Component
   ============================================ */


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

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

.roaming-loading,
.roaming-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
    gap: 1rem;
}

/* Roaming Stats Row */
.roaming-stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.roaming-stat-card {
    flex: 1;
    min-width: 120px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}


.roaming-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.roaming-stat-card.rate-excellent .roaming-stat-value { color: var(--success-color); }
.roaming-stat-card.rate-good .roaming-stat-value { color: #3b82f6; }
.roaming-stat-card.rate-fair .roaming-stat-value { color: var(--warning-color); }
.roaming-stat-card.rate-poor .roaming-stat-value { color: var(--danger-color); }

/* Topology Visualization */
.roaming-topology-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

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

.section-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.section-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.topology-graph {
    width: 100%;
    height: 300px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    overflow: hidden;
    padding: 10px 0;
}

.topology-graph-inner {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: -15px;
}

.topology-node {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40px;
    height: 40px;
}

.node-icon {
    width: 40px;
    height: 40px;
    background: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    flex-shrink: 0;
}

.node-label {
    position: absolute;
    top: 100%;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.node-model {
    position: absolute;
    top: calc(100% + 1.1rem);
    font-size: 0.65rem;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
}

.topology-edges {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.topology-edge {
    fill: none;
    stroke-linecap: round;
}

.topology-edge-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 12px;
    stroke-linecap: round;
    cursor: pointer;
}

.topology-edge.edge-excellent { stroke: var(--success-color); }
.topology-edge.edge-good { stroke: #3b82f6; }
.topology-edge.edge-fair { stroke: var(--warning-color); }
.topology-edge.edge-poor { stroke: var(--danger-color); }

.topology-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.legend-line {
    width: 24px;
    height: 3px;
    border-radius: 2px;
}

.legend-line.legend-excellent { background: var(--success-color); }
.legend-line.legend-good { background: #3b82f6; }
.legend-line.legend-fair { background: var(--warning-color); }
.legend-line.legend-poor { background: var(--danger-color); }

/* Roaming Paths Table */
.roaming-paths-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.roaming-paths-table {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.paths-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.paths-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.paths-row:hover {
    background: var(--bg-tertiary);
}

.path-col {
    display: flex;
    align-items: center;
}

.path-aps {
    gap: 0.5rem;
}

.path-arrow {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.path-aps .ap-name {
    font-weight: 500;
}

.path-rate.rate-excellent { color: var(--success-color); }
.path-rate.rate-good { color: #3b82f6; }
.path-rate.rate-fair { color: var(--warning-color); }
.path-rate.rate-poor { color: var(--danger-color); }

/* Edge Details */
.edge-details-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--primary-color);
}

.edge-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.direction-card {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 1rem;
}

.direction-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.direction-arrow {
    color: var(--primary-color);
    font-size: 1.25rem;
}

.direction-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.direction-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.direction-stat .stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

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

.direction-stat .stat-value.rate-excellent { color: var(--success-color); }
.direction-stat .stat-value.rate-good { color: #3b82f6; }
.direction-stat .stat-value.rate-fair { color: var(--warning-color); }
.direction-stat .stat-value.rate-poor { color: var(--danger-color); }

.trigger-stats {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.trigger-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

/* Top Clients Section */
.top-clients-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.top-clients-section h5 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.top-clients-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.top-client-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 0.8rem;
}

.top-client-item .client-name {
    font-size: 0.8rem;
    font-weight: 500;
    flex: 1;
}

.top-client-item .client-mac {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

.top-client-item .client-roams {
    color: var(--text-secondary);
}

.top-client-item .client-rate.rate-excellent { color: var(--success-color); }
.top-client-item .client-rate.rate-good { color: #3b82f6; }
.top-client-item .client-rate.rate-fair { color: var(--warning-color); }
.top-client-item .client-rate.rate-poor { color: var(--danger-color); }

/* Roaming Clients Grid */
.roaming-clients-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
}

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

.client-card {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 0.75rem;
}

.client-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.client-info .client-name {
    font-weight: 500;
    font-size: 0.875rem;
}

.client-info .client-mac {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.client-stats {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.client-stats .stat {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.client-stats .stat.rate-excellent { color: var(--success-color); }
.client-stats .stat.rate-good { color: #3b82f6; }
.client-stats .stat.rate-fair { color: var(--warning-color); }
.client-stats .stat.rate-poor { color: var(--danger-color); }

/* Responsive Roaming Analytics */
@media (max-width: 768px) {
    .roaming-stats-row {
        flex-direction: column;
    }

    .roaming-stat-card {
        min-width: unset;
    }

    .paths-header,
    .paths-row {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

    .path-fast,
    .paths-header .path-fast,
    .path-success,
    .paths-header .path-success {
        display: none;
    }

    .edge-details-grid {
        grid-template-columns: 1fr;
    }

    .direction-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   Channel Analysis Component
   ============================================ */


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

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

.channel-loading,
.channel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
    gap: 1rem;
}

/* Channel Stats Row */
.channel-stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.channel-stat-card {
    flex: 1;
    min-width: 100px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.channel-stat-card.stat-warning .channel-stat-value { color: var(--warning-color); }
.channel-stat-card.stat-danger .channel-stat-value { color: var(--danger-color); }


.channel-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Band Tabs */
.band-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.band-tab {
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.band-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.band-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Band-specific colors for active tabs */
.band-tab.active.band-2ghz {
    background: #fbbf24;
    border-color: #fbbf24;
    color: #1a1a1a;
}

.band-tab.active.band-5ghz {
    background: #3b82f6;
    border-color: #3b82f6;
}

.band-tab.active.band-6ghz {
    background: #a855f7;
    border-color: #a855f7;
}


.band-tab .issue-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--warning-color);
    color: white;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 0.5rem;
}

.band-tab .mesh-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    font-size: 0.5rem;
    font-weight: 700;
    margin-left: 0.5rem;
}

/* Channel Map */
.channel-map-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.channel-map {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 0;
}

.channel-slot {
    width: 48px;
    height: 64px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.channel-slot:hover {
    border-color: var(--primary-color);
}

.channel-slot.occupied {
    background: var(--bg-hover);
    border-color: var(--primary-color);
}

.channel-slot.overlap {
    border-color: var(--warning-color);
    background: rgba(231, 150, 19, 0.1);
}

.channel-slot.mesh {
    border-color: #60a5fa;
    background: rgba(59, 130, 246, 0.1);
}

/* Channel width grouping - shows bonded channels with alternating half-outlines */
/* Odd groups: "hat" shape (top half) - horizontal top + vertical from 50% up */
/* Even groups: "cup" shape (bottom half) - horizontal bottom + vertical from 50% down */
.channel-slot.width-group {
    position: relative;
    --group-border-color: var(--success-color);
}

/* Band-specific colors matching the badge colors */
.channel-slot.band-2ghz { --group-border-color: #fbbf24; }
.channel-slot.band-5ghz { --group-border-color: #3b82f6; }
.channel-slot.band-6ghz { --group-border-color: #a855f7; }

/* Base styles for the outline pseudo-element */
.channel-slot.width-group::before {
    content: '';
    position: absolute;
    pointer-events: none;
}

/* === ODD GROUPS: "Hat" shape (top half) === */

/* Single channel - odd: top border + left/right from top to 50% */
.channel-slot.group-single.group-odd::before {
    left: 0;
    right: 0;
    top: -3px;
    bottom: 50%;
    border-top: 2px solid var(--group-border-color);
    border-left: 2px solid var(--group-border-color);
    border-right: 2px solid var(--group-border-color);
    border-radius: 4px 4px 0 0;
}

/* Start of group - odd: top border extending right + left vertical from top to 50% */
.channel-slot.group-start.group-odd::before {
    left: 0;
    right: calc(-0.5rem - 1px);
    top: -3px;
    bottom: 50%;
    border-top: 2px solid var(--group-border-color);
    border-left: 2px solid var(--group-border-color);
    border-radius: 4px 0 0 0;
}

/* Middle of group - odd: top border only */
.channel-slot.group-middle.group-odd::before {
    left: calc(-0.5rem - 1px);
    right: calc(-0.5rem - 1px);
    top: -3px;
    bottom: 50%;
    border-top: 2px solid var(--group-border-color);
}

/* End of group - odd: top border extending left + right vertical from top to 50% */
.channel-slot.group-end.group-odd::before {
    left: calc(-0.5rem - 1px);
    right: 0;
    top: -3px;
    bottom: 50%;
    border-top: 2px solid var(--group-border-color);
    border-right: 2px solid var(--group-border-color);
    border-radius: 0 4px 0 0;
}

/* === EVEN GROUPS: "Cup" shape (bottom half) === */

/* Single channel - even: bottom border + left/right from 50% to bottom */
.channel-slot.group-single.group-even::before {
    left: 0;
    right: 0;
    top: 50%;
    bottom: -3px;
    border-bottom: 2px solid var(--group-border-color);
    border-left: 2px solid var(--group-border-color);
    border-right: 2px solid var(--group-border-color);
    border-radius: 0 0 4px 4px;
}

/* Start of group - even: bottom border extending right + left vertical from 50% to bottom */
.channel-slot.group-start.group-even::before {
    left: 0;
    right: calc(-0.5rem - 1px);
    top: 50%;
    bottom: -3px;
    border-bottom: 2px solid var(--group-border-color);
    border-left: 2px solid var(--group-border-color);
    border-radius: 0 0 0 4px;
}

/* Middle of group - even: bottom border only */
.channel-slot.group-middle.group-even::before {
    left: calc(-0.5rem - 1px);
    right: calc(-0.5rem - 1px);
    top: 50%;
    bottom: -3px;
    border-bottom: 2px solid var(--group-border-color);
}

/* End of group - even: bottom border extending left + right vertical from 50% to bottom */
.channel-slot.group-end.group-even::before {
    left: calc(-0.5rem - 1px);
    right: 0;
    top: 50%;
    bottom: -3px;
    border-bottom: 2px solid var(--group-border-color);
    border-right: 2px solid var(--group-border-color);
    border-radius: 0 0 4px 0;
}

/* Hatched pattern for overlapping width groups - applied via background on element */
.channel-slot.width-overlap-hatched {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 3px,
        var(--group-border-color) 3px,
        var(--group-border-color) 5px
    );
    background-blend-mode: overlay;
}

/* === SECOND GROUP (has-group2): Renders via ::after === */
/* Uses group2-* classes to determine band color and position */

.channel-slot.has-group2 {
    --group2-border-color: var(--success-color);
}

.channel-slot.has-group2.group2-band-2ghz { --group2-border-color: #fbbf24; }
.channel-slot.has-group2.group2-band-5ghz { --group2-border-color: #3b82f6; }
.channel-slot.has-group2.group2-band-6ghz { --group2-border-color: #a855f7; }

.channel-slot.has-group2::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

/* Second group ODD (hat/top) */
.channel-slot.has-group2.group2-single.group2-group-odd::after {
    left: 0;
    right: 0;
    top: -3px;
    bottom: 50%;
    border-top: 2px solid var(--group2-border-color);
    border-left: 2px solid var(--group2-border-color);
    border-right: 2px solid var(--group2-border-color);
    border-radius: 4px 4px 0 0;
}

.channel-slot.has-group2.group2-start.group2-group-odd::after {
    left: 0;
    right: calc(-0.5rem - 1px);
    top: -3px;
    bottom: 50%;
    border-top: 2px solid var(--group2-border-color);
    border-left: 2px solid var(--group2-border-color);
    border-radius: 4px 0 0 0;
}

.channel-slot.has-group2.group2-middle.group2-group-odd::after {
    left: calc(-0.5rem - 1px);
    right: calc(-0.5rem - 1px);
    top: -3px;
    bottom: 50%;
    border-top: 2px solid var(--group2-border-color);
}

.channel-slot.has-group2.group2-end.group2-group-odd::after {
    left: calc(-0.5rem - 1px);
    right: 0;
    top: -3px;
    bottom: 50%;
    border-top: 2px solid var(--group2-border-color);
    border-right: 2px solid var(--group2-border-color);
    border-radius: 0 4px 0 0;
}

/* Second group EVEN (cup/bottom) */
.channel-slot.has-group2.group2-single.group2-group-even::after {
    left: 0;
    right: 0;
    top: 50%;
    bottom: -3px;
    border-bottom: 2px solid var(--group2-border-color);
    border-left: 2px solid var(--group2-border-color);
    border-right: 2px solid var(--group2-border-color);
    border-radius: 0 0 4px 4px;
}

.channel-slot.has-group2.group2-start.group2-group-even::after {
    left: 0;
    right: calc(-0.5rem - 1px);
    top: 50%;
    bottom: -3px;
    border-bottom: 2px solid var(--group2-border-color);
    border-left: 2px solid var(--group2-border-color);
    border-radius: 0 0 0 4px;
}

.channel-slot.has-group2.group2-middle.group2-group-even::after {
    left: calc(-0.5rem - 1px);
    right: calc(-0.5rem - 1px);
    top: 50%;
    bottom: -3px;
    border-bottom: 2px solid var(--group2-border-color);
}

.channel-slot.has-group2.group2-end.group2-group-even::after {
    left: calc(-0.5rem - 1px);
    right: 0;
    top: 50%;
    bottom: -3px;
    border-bottom: 2px solid var(--group2-border-color);
    border-right: 2px solid var(--group2-border-color);
    border-radius: 0 0 4px 0;
}

.channel-number {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.channel-aps {
    display: flex;
    gap: 2px;
    margin-top: 4px;
}

.channel-ap-dot {
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border-radius: 50%;
}

.channel-ap-dot.dot-single {
    width: 14px;
    height: 14px;
}

/* Band-specific colors for AP dots */
.channel-ap-dot.band-2ghz { background: #fbbf24; }
.channel-ap-dot.band-5ghz { background: #3b82f6; }
.channel-ap-dot.band-6ghz { background: #a855f7; }

.channel-ap-more {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.channel-metrics {
    margin-top: 4px;
}

.channel-util {
    font-size: 0.65rem;
}

.channel-util.util-low { color: var(--success-color); }
.channel-util.util-medium { color: var(--warning-color); }
.channel-util.util-high { color: var(--danger-color); }

.channel-recommendations {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.rec-channels {
    font-weight: 600;
    color: var(--success-color);
}

/* Channel Details Section */
.channel-details-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--primary-color);
}

.overlap-warning {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(231, 150, 19, 0.1);
    border: 1px solid var(--warning-color);
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--warning-color);
}

.overlap-warning .warning-icon {
    width: 20px;
    height: 20px;
    background: var(--warning-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
}

.mesh-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid #60a5fa;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #60a5fa;
}

.mesh-info .mesh-icon {
    width: 20px;
    height: 20px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.65rem;
}

.channel-aps-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.channel-ap-card {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 1rem;
}

.channel-ap-card .ap-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

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

.channel-ap-card .ap-model {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ap-radio-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.ap-radio-details .detail-item {
    display: flex;
    flex-direction: column;
}

.ap-radio-details .detail-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.ap-radio-details .detail-value {
    font-size: 0.875rem;
    font-weight: 500;
}

.ap-radio-details .detail-value.util-low { color: var(--success-color); }
.ap-radio-details .detail-value.util-medium { color: var(--warning-color); }
.ap-radio-details .detail-value.util-high { color: var(--danger-color); }

.ap-radio-details .detail-value.interf-low { color: var(--success-color); }
.ap-radio-details .detail-value.interf-medium { color: var(--warning-color); }
.ap-radio-details .detail-value.interf-high { color: var(--danger-color); }

.ap-radio-details .detail-value.sat-excellent { color: var(--success-color); }
.ap-radio-details .detail-value.sat-good { color: #3b82f6; }
.detail-value.sat-fair { color: var(--warning-color); }
.detail-value.sat-poor { color: var(--danger-color); }

/* APs Band Table */
.aps-band-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.aps-band-table {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.aps-header {
    display: grid;
    grid-template-columns: 2fr 0.8fr 0.8fr 1fr 1.2fr 0.8fr 0.6fr;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.aps-row {
    display: grid;
    grid-template-columns: 2fr 0.8fr 0.8fr 1fr 1.2fr 0.8fr 0.6fr;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
    align-items: center;
}

.aps-row:hover {
    background: var(--bg-tertiary);
}

.ap-name-col {
    display: flex;
    flex-direction: column;
}

.ap-name-col .ap-name {
    font-weight: 500;
}

.ap-name-col .ap-model {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.channel-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-weight: 600;
}

.channel-badge.overlap {
    background: rgba(231, 150, 19, 0.2);
    color: var(--warning-color);
}

.channel-badge.mesh {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.power-value {
    font-weight: 500;
}

.power-mode {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: 0.25rem;
}

.util-bar-container {
    width: 60px;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 0 3px 3px 0;
    overflow: hidden;
    display: inline-block;
    margin-right: 0.5rem;
}

.util-bar {
    height: 100%;
    border-radius: 0 3px 3px 0;
    transition: width 0.3s ease;
}

.util-bar.util-low { background: var(--success-color); }
.util-bar.util-medium { background: var(--warning-color); }
.util-bar.util-high { background: var(--danger-color); }

.util-value {
    font-size: 0.75rem;
}

.ap-interf-col.interf-low { color: var(--success-color); }
.ap-interf-col.interf-medium { color: var(--warning-color); }
.ap-interf-col.interf-high { color: var(--danger-color); }

/* Channel Issues Section - wrapper only, issue styling from IssuesList component */
.channel-issues-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
}

/* Responsive Channel Analysis */
@media (max-width: 768px) {
    .channel-stats-row {
        flex-direction: column;
    }

    .channel-stat-card {
        min-width: unset;
    }

    .band-tabs {
        flex-wrap: wrap;
    }

    .channel-map {
        justify-content: center;
    }

    .aps-header,
    .aps-row {
        grid-template-columns: 1.5fr 0.8fr 0.8fr 1fr;
    }

    .ap-power-col,
    .aps-header .ap-power-col,
    .ap-interf-col,
    .aps-header .ap-interf-col,
    .ap-clients-col,
    .aps-header .ap-clients-col {
        display: none;
    }

    .ap-radio-details {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   AP Load Balance Component
   ============================================ */


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

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

.load-loading,
.load-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
    gap: 1rem;
}

/* Load Stats Row */
.load-stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.load-stat-card {
    flex: 1;
    min-width: 100px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}


.load-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.load-stat-card.stat-good .load-stat-value { color: var(--success-color); }
.load-stat-card.stat-warning .load-stat-value { color: var(--warning-color); }
.load-stat-card.stat-danger .load-stat-value { color: var(--danger-color); }

/* Load Chart Section */
.load-chart-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.load-chart-section .chart-legend {
    display: flex;
    gap: 1rem;
}

.load-chart-section .legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.load-chart-section .legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.load-chart-section .legend-color.band-2ghz { background: #fbbf24; }
.load-chart-section .legend-color.band-5ghz { background: #3b82f6; }
.load-chart-section .legend-color.band-6ghz { background: #a855f7; }

.load-chart {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0;
}

.load-bar-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.load-bar-label {
    width: 180px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.load-bar-label .ap-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.load-bar-label .ap-clients {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.load-bar-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.load-bar {
    height: 24px;
    border-radius: 0 4px 4px 0;
    display: flex;
    overflow: hidden;
    min-width: 4px;
}

.load-segment {
    height: 100%;
    transition: width 0.3s ease;
}

.load-segment.band-2ghz { background: #fbbf24; }
.load-segment.band-5ghz { background: #3b82f6; }
.load-segment.band-6ghz { background: #a855f7; }

.overload-indicator {
    width: 20px;
    height: 20px;
    background: var(--warning-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.ideal-line-container {
    position: relative;
    height: 24px;
    margin-left: 196px;
    border-top: 1px dashed var(--text-muted);
}

.ideal-marker {
    position: absolute;
    top: -8px;
    transform: translateX(-50%);
}

.ideal-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 3px;
}

/* AP Details Section */
.ap-details-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.ap-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.ap-detail-card {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 1rem;
    border: 1px solid transparent;
}

.ap-detail-card.ap-overloaded {
    border-color: var(--warning-color);
}

.ap-detail-card.ap-underloaded {
    border-color: var(--info-color);
    opacity: 0.8;
}

.ap-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.ap-detail-header .ap-info {
    display: flex;
    flex-direction: column;
}

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

.ap-detail-header .ap-model {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ap-client-count {
    text-align: right;
}

.ap-client-count .count-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ap-client-count .count-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    display: block;
}

.ap-radios-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.radio-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
}

.radio-summary .radio-band {
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 500;
}

.radio-summary .radio-band.band-2ghz {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.radio-summary .radio-band.band-5ghz {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.radio-summary .radio-band.band-6ghz {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.radio-summary .radio-clients {
    color: var(--text-secondary);
}

.radio-summary .radio-util {
    margin-left: auto;
}

.radio-summary .radio-util.util-low { color: var(--success-color); }
.radio-summary .radio-util.util-medium { color: var(--warning-color); }
.radio-summary .radio-util.util-high { color: var(--danger-color); }

.ap-satisfaction {
    display: flex;
    justify-content: space-between;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.8rem;
}

.ap-satisfaction .sat-label {
    color: var(--text-muted);
}

.ap-satisfaction .sat-value.sat-excellent { color: var(--success-color); }
.ap-satisfaction .sat-value.sat-good { color: #3b82f6; }
.ap-satisfaction .sat-value.sat-fair { color: var(--warning-color); }
.ap-satisfaction .sat-value.sat-poor { color: var(--danger-color); }

.ap-warning,
.ap-info-msg {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.ap-warning {
    background: rgba(231, 150, 19, 0.1);
    color: var(--warning-color);
}

.ap-info-msg {
    background: rgba(71, 151, 255, 0.1);
    color: var(--info-color);
}

/* Load Recommendations Section */
.load-recommendations-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
}

.recommendations-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.recommendation-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border-left: 3px solid var(--border-color);
}

.recommendation-item.warning {
    border-left-color: var(--warning-color);
}

.recommendation-item.info {
    border-left-color: var(--info-color);
}

.rec-icon {
    width: 24px;
    height: 24px;
    background: var(--bg-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.recommendation-item.warning .rec-icon {
    background: var(--warning-color);
    color: white;
}

.recommendation-item.info .rec-icon {
    background: var(--info-color);
    color: white;
}

.rec-content {
    flex: 1;
}

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

.rec-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.rec-action {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-left: 2px solid var(--info-color);
}

/* Responsive AP Load Balance */
@media (max-width: 768px) {
    .load-stats-row {
        flex-direction: column;
    }

    .load-stat-card {
        min-width: unset;
    }

    .load-bar-label {
        width: 120px;
    }

    .load-chart-section .chart-legend {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ideal-line-container {
        margin-left: 136px;
    }
}

@media (max-width: 768px) {
    .timeline-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .timeline-controls {
        width: 100%;
        flex-direction: column;
    }

    .client-selector {
        width: 100%;
        min-width: unset;
    }

    .client-info-details {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ============================================
   Power & Coverage Analysis Component
   ============================================ */


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

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

.power-loading,
.power-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
    gap: 1rem;
}

/* Power Stats Row */
.power-stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.power-stat-card {
    flex: 1;
    min-width: 100px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}


.power-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.power-stat-card.stat-good .power-stat-value { color: var(--success-color); }
.power-stat-card.stat-warning .power-stat-value { color: var(--warning-color); }
.power-stat-card.stat-danger .power-stat-value { color: var(--danger-color); }

/* Signal quality classes */
.power-stat-card.signal-excellent .power-stat-value,
.signal-excellent { color: #10b981; }
.power-stat-card.signal-good .power-stat-value,
.signal-good { color: #22c55e; }
.power-stat-card.signal-fair .power-stat-value,
.signal-fair { color: #eab308; }
.power-stat-card.signal-weak .power-stat-value,
.signal-weak { color: #f97316; }
.power-stat-card.signal-poor .power-stat-value,
.signal-poor { color: #ef4444; }

/* WiFi Page Sections - Nested Card Colors */
.wifi-sections .card {
    background: var(--bg-tertiary);
}

.wifi-sections .card .data-table tbody tr {
    background: var(--bg-secondary);
}

.wifi-sections .card .card {
    background: var(--bg-secondary);
}

.wifi-sections .card .card .data-table tbody tr {
    background: var(--bg-tertiary);
}

.wifi-sections .card .card .card {
    background: var(--bg-tertiary);
}

.wifi-sections .card .card .card .data-table tbody tr {
    background: var(--bg-secondary);
}

.wifi-sections .card .card .card .card {
    background: var(--bg-secondary);
}

/* Power Sections */
.power-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}


.power-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.power-section .section-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.power-section .section-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Signal Distribution Chart */
.signal-distribution {
    padding: 1rem 0;
}

.signal-bars {
    display: flex;
    align-items: flex-end;
    height: 150px;
    gap: 4px;
    padding: 0 0.5rem;
    margin-bottom: 0;
}

.signal-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    border-radius: 0 0 4px 4px;
}

.signal-bar {
    width: 100%;
    border-radius: 0 0 4px 4px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 4px;
    transition: height 0.3s ease;
    position: relative;
}

.signal-bar .bar-count {
    font-size: 0.65rem;
    color: white;
    font-weight: 600;
    position: absolute;
    top: 4px;
}

.signal-bar.signal-excellent { background: #10b981; }
.signal-bar.signal-good { background: #22c55e; }
.signal-bar.signal-fair { background: #eab308; }
.signal-bar.signal-weak { background: #f97316; }
.signal-bar.signal-poor { background: #ef4444; }

.signal-bar-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    text-align: center;
}

.signal-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.signal-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.signal-legend .legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.signal-legend .legend-color.signal-excellent { background: #10b981; }
.signal-legend .legend-color.signal-good { background: #22c55e; }
.signal-legend .legend-color.signal-fair { background: #eab308; }
.signal-legend .legend-color.signal-weak { background: #f97316; }
.signal-legend .legend-color.signal-poor { background: #ef4444; }

/* TX Power Grid */
.ap-power-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.ap-power-card {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 1rem;
}

.ap-power-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

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

.ap-power-header .ap-model {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.radio-power-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.radio-power-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.radio-power-item .radio-info {
    width: 80px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.radio-power-item .radio-band {
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 500;
    width: fit-content;
}

.radio-power-item .radio-band.band-2ghz {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.radio-power-item .radio-band.band-5ghz {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.radio-power-item .radio-band.band-6ghz {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.radio-power-item .radio-channel {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.power-bar-container {
    flex: 1;
    height: 20px;
    background: var(--bg-secondary);
    border-radius: 0 4px 4px 0;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.power-bar-stack {
    display: flex;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.power-bar-tx {
    height: 100%;
    transition: width 0.3s ease;
}

.power-bar-tx.power-high { background: linear-gradient(90deg, #f97316, #ea580c); }
.power-bar-tx.power-medium { background: linear-gradient(90deg, #22c55e, #16a34a); }
.power-bar-tx.power-low { background: linear-gradient(90deg, #3b82f6, #2563eb); }
.power-bar-tx.power-auto { background: linear-gradient(90deg, #3b82f6, #2563eb); }

.power-bar-gain {
    height: 100%;
    border-left: 1px dashed rgba(255, 255, 255, 0.3);
    border-radius: 0 4px 4px 0;
    transition: width 0.3s ease;
}

.power-bar-gain.power-high {
    background: repeating-linear-gradient(90deg, #f97316 0px, #f97316 3px, #ea580c 3px, #ea580c 6px);
}
.power-bar-gain.power-medium {
    background: repeating-linear-gradient(90deg, #22c55e 0px, #22c55e 3px, #16a34a 3px, #16a34a 6px);
}
.power-bar-gain.power-low {
    background: repeating-linear-gradient(90deg, #3b82f6 0px, #3b82f6 3px, #2563eb 3px, #2563eb 6px);
}
.power-bar-gain.power-auto {
    background: repeating-linear-gradient(90deg, #3b82f6 0px, #3b82f6 3px, #2563eb 3px, #2563eb 6px);
}

.power-values {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-primary);
    z-index: 1;
}

.power-tx {
    color: var(--text-primary);
}

.power-eirp {
    font-style: italic;
}

.power-unit {
    margin-left: 2px;
}

.power-mode {
    width: 50px;
    text-align: right;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: capitalize;
}

.power-warning {
    margin-top: 0.75rem;
    padding: 0.5rem;
    border-radius: 4px;
    background: rgba(231, 150, 19, 0.1);
    color: var(--warning-color);
    font-size: 0.75rem;
}

/* Coverage Grid */
.coverage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.coverage-card {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 1rem;
    border: 1px solid transparent;
}

.coverage-card.coverage-poor {
    border-color: var(--danger-color);
}

.coverage-card.coverage-fair {
    border-color: var(--warning-color);
}

.coverage-card.coverage-good {
    border-color: var(--success-color);
}

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

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

.coverage-header .client-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.coverage-metrics {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.coverage-metric {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
}

.coverage-metric .metric-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.coverage-metric .metric-value {
    font-size: 0.875rem;
    font-weight: 600;
}

.weak-clients-warning {
    padding: 0.5rem;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
}

.coverage-distribution {
    height: 8px;
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.dist-segment {
    height: 100%;
    transition: width 0.3s ease;
}

.dist-segment.signal-excellent { background: #10b981; }
.dist-segment.signal-good { background: #22c55e; }
.dist-segment.signal-fair { background: #eab308; }
.dist-segment.signal-weak { background: #f97316; }
.dist-segment.signal-poor { background: #ef4444; }

/* Overlap Issues */
.overlap-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.overlap-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border-left: 3px solid var(--warning-color);
}

.overlap-icon {
    width: 24px;
    height: 24px;
    background: var(--warning-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.overlap-content {
    flex: 1;
}

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

.overlap-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Power/Coverage Recommendations */
.power-section .recommendations-list .rec-action {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-left: 2px solid var(--info-color);
}

/* Responsive Power/Coverage */
@media (max-width: 768px) {
    .power-stats-row {
        flex-direction: column;
    }

    .power-stat-card {
        min-width: unset;
    }

    .signal-bars {
        height: 120px;
    }

    .signal-legend {
        gap: 0.5rem;
    }

    .ap-power-grid,
    .coverage-grid {
        grid-template-columns: 1fr;
    }

    .coverage-metrics {
        flex-wrap: wrap;
    }

    .coverage-metric {
        min-width: calc(50% - 0.5rem);
    }
}

/* ============================================
   Band Steering Analysis Component
   ============================================ */


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

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

.steering-loading,
.steering-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
    gap: 1rem;
}

/* Steering Stats Row */
.steering-stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.steering-stat-card {
    flex: 1;
    min-width: 100px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.steering-stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.steering-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.steering-stat-card.band-2ghz-card {
    border-left: 3px solid #fbbf24;
}
.steering-stat-card.band-5ghz-card {
    border-left: 3px solid #3b82f6;
}
.steering-stat-card.band-6ghz-card {
    border-left: 3px solid #a855f7;
}

/* Steering Sections */
.steering-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}


.steering-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.steering-section .section-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.steering-section .section-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Steering Effectiveness Chart */
.steering-effectiveness {
    padding: 1rem 0;
}

.effectiveness-chart {
    margin-bottom: 1rem;
}

.effectiveness-bar {
    height: 32px;
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-tertiary);
}

.eff-segment {
    height: 100%;
    transition: width 0.3s ease;
}

.eff-segment.optimal { background: #22c55e; }
.eff-segment.suboptimal { background: #f97316; }
.eff-segment.legacy { background: #6b7280; }

.effectiveness-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
}

.eff-label {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.effectiveness-legend {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.effectiveness-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.effectiveness-legend .legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.effectiveness-legend .legend-color.optimal { background: #22c55e; }
.effectiveness-legend .legend-color.suboptimal { background: #f97316; }
.effectiveness-legend .legend-color.legacy { background: #6b7280; }

/* Steerable Groups */
.steerable-group {
    margin-bottom: 1rem;
}

.steerable-group:last-child {
    margin-bottom: 0;
}

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

.steerable-band {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.steerable-band.band-5ghz {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.steerable-band.band-6ghz {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.steerable-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.steerable-clients {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.steerable-client-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.steerable-client-row .client-info {
    flex: 1;
    min-width: 0;
}

.steerable-client-row .client-name {
    font-weight: 500;
    color: var(--text-primary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.steerable-client-row .client-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.steerable-client-row .client-current-band {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.steerable-client-row .current-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.band-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 500;
}

.band-badge.band-2ghz {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.band-badge.band-5ghz {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.band-badge.band-6ghz {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.steerable-client-row .client-signal {
    font-size: 0.8rem;
    color: var(--text-secondary);
    min-width: 60px;
    text-align: right;
}

.more-clients {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Wi-Fi Generation Breakdown */
.wifi-gen-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wifi-gen-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.wifi-gen-label {
    width: 130px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gen-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
}

.gen-badge.gen-7 { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.gen-badge.gen-6 { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.gen-badge.gen-6e {
    background: repeating-linear-gradient(
        -45deg,
        rgba(168, 85, 247, 0.15),
        rgba(168, 85, 247, 0.15) 3px,
        rgba(59, 130, 246, 0.15) 3px,
        rgba(59, 130, 246, 0.15) 6px
    );
    color: #a855f7;
}
.gen-badge.gen-5 { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.gen-badge.gen-4 { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.gen-badge.gen-legacy { background: rgba(107, 114, 128, 0.15); color: #6b7280; }

.gen-standard {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.wifi-gen-bar-container {
    flex: 1;
    height: 16px;
    background: var(--bg-tertiary);
    border-radius: 0 4px 4px 0;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
}

.wifi-gen-bar {
    height: 100%;
    border-radius: 0 4px 4px 0;
    transition: width 0.3s ease;
}

.wifi-gen-bar.gen-5, .gen-bar.gen-5 { background: #3b82f6; }
.wifi-gen-bar.gen-4, .gen-bar.gen-4 { background: #fbbf24; }
.wifi-gen-bar.gen-legacy, .gen-bar.gen-legacy { background: #6b7280; }

.wifi-gen-count {
    width: 40px;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Legacy Clients */
.legacy-clients-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.legacy-client-card {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 0.75rem;
}

.legacy-client-info {
    margin-bottom: 0.5rem;
}

.legacy-client-info .client-name {
    font-weight: 500;
    color: var(--text-primary);
    display: block;
}

.legacy-client-info .client-manufacturer {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.legacy-client-stats {
    display: flex;
    gap: 1rem;
}

.legacy-stat {
    display: flex;
    flex-direction: column;
}

.legacy-stat .stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.legacy-stat .stat-value {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Band Steering Recommendations */
.steering-section .rec-action {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-left: 2px solid var(--info-color);
}

/* Responsive Band Steering */
@media (max-width: 768px) {
    .steering-stats-row {
        flex-direction: column;
    }

    .steering-stat-card {
        min-width: unset;
    }

    .steerable-client-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .steerable-client-row .client-current-band {
        margin-top: 0.25rem;
    }

    .steerable-client-row .client-signal {
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

    .wifi-gen-label {
        width: 100px;
    }

    .wifi-gen-bar-container {
        flex: 1;
    }

    .legacy-clients-list {
        grid-template-columns: 1fr;
    }

    .effectiveness-legend {
        gap: 0.75rem;
    }
}

/* ============================================
   Airtime Fairness Component
   ============================================ */


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

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

.header-actions {
    min-height: 34.5px;
    display: flex;
    align-items: center;
}

.airtime-loading,
.airtime-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
    gap: 1rem;
}

/* Airtime Stats Row */
.airtime-stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.airtime-stat-card {
    flex: 1;
    min-width: 100px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.airtime-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.airtime-stat-card.stat-warning .airtime-stat-value {
    color: var(--warning-color);
}

/* Concept Explanation */
.airtime-concept {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border-left: 3px solid var(--info-color);
}

.airtime-concept .concept-icon {
    width: 24px;
    height: 24px;
    background: var(--info-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

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

.airtime-concept .concept-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Airtime Sections */
.airtime-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.airtime-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.airtime-section .section-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.airtime-section .section-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Radio Utilization Grid */
.radio-utilization-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.radio-util-card {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 1rem;
}

.radio-util-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.radio-util-header .ap-name {
    font-weight: 600;
    color: var(--text-primary);
}

.radio-util-header .client-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.radio-util-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.radio-util-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.radio-util-row .radio-info {
    width: 90px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.radio-util-row .radio-band {
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 500;
    width: fit-content;
}

.radio-util-row .radio-channel {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.radio-util-bar-container {
    flex: 1;
    height: 16px;
    background: var(--bg-secondary);
    border-radius: 0 4px 4px 0;
    overflow: hidden;
    position: relative;
}

.radio-util-bar {
    height: 100%;
    border-radius: 0 4px 4px 0;
    transition: width 0.3s ease;
}

.radio-util-bar.util-low { background: #22c55e; }
.radio-util-bar.util-medium { background: #eab308; }
.radio-util-bar.util-high { background: #ef4444; }

.radio-util-value {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-primary);
}

.radio-util-row .radio-clients {
    width: 30px;
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.util-warning {
    margin-top: 0.75rem;
    padding: 0.5rem;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
    font-size: 0.75rem;
}

/* Wi-Fi Generation Airtime Chart */
.gen-airtime-chart {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gen-airtime-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gen-airtime-row .gen-label {
    width: 150px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.gen-airtime-row .gen-factor {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.gen-bar-container {
    flex: 1;
    height: 20px;
    background: var(--bg-tertiary);
    border-radius: 0 4px 4px 0;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
}

.gen-bar {
    height: 100%;
    border-radius: 0 4px 4px 0;
    transition: width 0.3s ease;
}

/* Band-segmented bars for Wi-Fi 6/7 */
.gen-bar-segment {
    height: 100%;
    display: inline-block;
    vertical-align: top;
    transition: width 0.3s ease;
}

.gen-bar-segment:first-child {
    border-radius: 0;
}

.gen-bar-segment:last-child {
    border-radius: 0 4px 4px 0;
}

.gen-bar-segment.band-2ghz {
    background: #fbbf24;
}

.gen-bar-segment.band-5ghz {
    background: #3b82f6;
}

.gen-bar-segment.band-6ghz {
    background: #a855f7;
}


.gen-airtime-row .gen-stats {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.gen-airtime-row .gen-count {
    font-weight: 600;
    color: var(--text-primary);
}

.gen-airtime-row .gen-impact {
    font-size: 0.65rem;
}

.gen-impact.impact-low { color: var(--success-color); }
.gen-impact.impact-medium { color: var(--warning-color); }
.gen-impact.impact-high { color: var(--danger-color); }

/* Airtime Factor Legend */
.airtime-factor-legend {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.factor-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.factor-gen {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.factor-value {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Airtime Clients List */
.airtime-clients-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.airtime-client-card {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 0.75rem;
    border-left: 3px solid var(--border-color);
}

.airtime-client-card.airtime-high {
    border-left-color: var(--danger-color);
}

.airtime-client-card.airtime-medium {
    border-left-color: var(--warning-color);
}

.airtime-client-card .client-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.airtime-client-card .client-name {
    font-weight: 500;
    color: var(--text-primary);
}

.airtime-indicator {
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    white-space: nowrap;
}

.airtime-client-card.airtime-high .airtime-indicator {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger-color);
}

.airtime-client-card.airtime-medium .airtime-indicator {
    background: rgba(234, 179, 8, 0.15);
    color: var(--warning-color);
}

.airtime-client-card .client-details {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.airtime-client-card .client-detail {
    display: flex;
    flex-direction: column;
}

.airtime-client-card .detail-label {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.airtime-client-card .detail-value {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.airtime-client-card .client-reason {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

/* TX Retry Rates */
.retry-rate-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.retry-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.retry-ap-info {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.retry-ap-info .ap-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.retry-bar-container {
    flex: 1;
    height: 12px;
    background: var(--bg-tertiary);
    border-radius: 0 4px 4px 0;
    overflow: hidden;
}

.retry-bar {
    height: 100%;
    border-radius: 0 4px 4px 0;
    transition: width 0.3s ease;
}

.retry-bar.retry-low { background: #22c55e; }
.retry-bar.retry-medium { background: #eab308; }
.retry-bar.retry-high { background: #ef4444; }

.retry-value {
    width: 50px;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 500;
}

.retry-value.retry-low { color: var(--success-color); }
.retry-value.retry-medium { color: var(--warning-color); }
.retry-value.retry-high { color: var(--danger-color); }

/* Airtime Recommendations */
.airtime-section .rec-action {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-left: 2px solid var(--info-color);
}

/* Responsive Airtime */
@media (max-width: 768px) {
    .airtime-stats-row {
        flex-direction: column;
    }

    .airtime-stat-card {
        min-width: unset;
    }

    .radio-utilization-grid,
    .airtime-clients-list {
        grid-template-columns: 1fr;
    }

    .gen-airtime-row .gen-label {
        width: 120px;
    }

    .gen-airtime-row .gen-stats {
        width: 80px;
    }

    .retry-ap-info {
        width: 180px;
    }

    .airtime-factor-legend {
        gap: 0.75rem;
    }
}

/* ============================================
   Environmental Correlation Component
   ============================================ */


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

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

.env-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.env-controls .btn {
    margin-top: 1px;
}

.time-range-select {
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.env-loading,
.env-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
    gap: 1rem;
}

/* Environmental Sections */
.env-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.env-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.env-section .section-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.env-section .section-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Time of Day Grid */
.time-of-day-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.tod-card {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 1rem;
    border-left: 3px solid var(--border-color);
}

.tod-card.period-good { border-left-color: var(--success-color); }
.tod-card.period-fair { border-left-color: var(--warning-color); }
.tod-card.period-poor { border-left-color: var(--danger-color); }

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

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

.tod-hours {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.tod-metrics {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tod-metric {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

.tod-metric .metric-label {
    color: var(--text-muted);
}

.tod-metric .metric-value {
    font-weight: 500;
}

.tod-warning {
    margin-top: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
    font-size: 0.7rem;
    border-radius: 3px;
    text-align: center;
}

/* Heatmap */
.heatmap-container {
    overflow-x: auto;
}

.heatmap-row {
    display: flex;
    gap: 2px;
    margin-bottom: 2px;
}

.heatmap-row.header-row {
    margin-bottom: 4px;
}

.heatmap-label {
    width: 40px;
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.heatmap-hour-label {
    flex: 1;
    min-width: 30px;
    font-size: 0.6rem;
    color: var(--text-muted);
    text-align: center;
}

.heatmap-cell {
    flex: 1;
    min-width: 30px;
    height: 24px;
    border-radius: 3px;
    cursor: default;
}

.heatmap-cell.heat-none { background: var(--bg-tertiary); }

.heatmap-legend {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.heatmap-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.heat-color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

.heat-color.heat-low { background: #22c55e; }
.heat-color.heat-medium { background: #eab308; }
.heat-color.heat-high { background: #f97316; }
.heat-color.heat-critical { background: #ef4444; }

/* Detected Patterns */
.patterns-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pattern-card {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border-left: 3px solid var(--border-color);
}

.pattern-card.warning { border-left-color: var(--warning-color); }
.pattern-card.info { border-left-color: var(--info-color); }

.pattern-icon {
    width: 28px;
    height: 28px;
    background: var(--bg-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
    color: var(--text-muted);
}

.pattern-card.warning .pattern-icon {
    background: var(--warning-color);
    color: white;
}

.pattern-card.info .pattern-icon {
    background: var(--info-color);
    color: white;
}

.pattern-content {
    flex: 1;
}

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

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

.pattern-timing {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Band Environment Grid */
.band-env-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.band-env-card {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 1rem;
    border-top: 3px solid var(--border-color);
}

.band-env-card.band-2ghz { border-top-color: #fbbf24; }
.band-env-card.band-5ghz { border-top-color: #3b82f6; }
.band-env-card.band-6ghz { border-top-color: #a855f7; }

.band-env-header {
    margin-bottom: 0.75rem;
}

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

.band-env-metrics {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.band-env-metric .metric-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.band-env-metric .metric-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.band-env-metric .metric-value {
    font-size: 0.8rem;
    font-weight: 500;
}

.band-env-metric .metric-bar {
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 0 3px 3px 0;
    overflow: hidden;
}

.band-env-metric .metric-fill {
    height: 100%;
    border-radius: 0 3px 3px 0;
    background: var(--text-muted);
    transition: width 0.3s ease;
}

.band-env-metric .metric-fill.interference-low { background: #22c55e; }
.band-env-metric .metric-fill.interference-medium { background: #eab308; }
.band-env-metric .metric-fill.interference-high { background: #ef4444; }
.band-env-metric .metric-fill.util-low { background: #22c55e; }
.band-env-metric .metric-fill.util-medium { background: #eab308; }
.band-env-metric .metric-fill.util-high { background: #ef4444; }

.band-peak-time {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Interference/Util/Retry classes */
.interference-low, .metric-value.interference-low { color: var(--success-color); }
.interference-medium, .metric-value.interference-medium { color: var(--warning-color); }
.interference-high, .metric-value.interference-high { color: var(--danger-color); }

.util-low, .metric-value.util-low { color: var(--success-color); }
.util-medium, .metric-value.util-medium { color: var(--warning-color); }
.util-high, .metric-value.util-high { color: var(--danger-color); }

.retry-low, .metric-value.retry-low { color: var(--success-color); }
.retry-medium, .metric-value.retry-medium { color: var(--warning-color); }
.retry-high, .metric-value.retry-high { color: var(--danger-color); }

/* Environmental Recommendations */
.env-section .rec-action {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-left: 2px solid var(--info-color);
}

/* Responsive Environmental */
@media (max-width: 900px) {
    .time-of-day-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .band-env-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .env-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .env-controls {
        width: 100%;
    }

    .time-range-select {
        flex: 1;
    }

    .time-of-day-grid {
        grid-template-columns: 1fr;
    }

    .heatmap-container {
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .heatmap-cell {
        min-width: 24px;
    }

    .heatmap-legend {
        gap: 0.5rem;
    }
}

/* ============================================
   Connectivity Flow Component
   ============================================ */


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

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

.flow-loading,
.flow-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
    gap: 1rem;
}

/* Flow Sections */
.flow-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.flow-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.flow-section .section-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.flow-section .section-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Flow Diagram - Connection Stages */
.flow-diagram {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 1rem 0;
}

.flow-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    min-width: 140px;
}

.stage-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.stage-icon {
    width: 32px;
    height: 32px;
    background: var(--bg-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.stage-icon.success-icon {
    background: var(--success-color);
    color: white;
}

.stage-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.stage-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.stage-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.stage-metrics {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.stage-count {
    font-size: 1.5rem;
    font-weight: 700;
}

.stage-count.success { color: var(--success-color); }
.stage-count.warning { color: var(--warning-color); }
.stage-count.danger { color: var(--danger-color); }

.stage-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.stage-bar {
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 0 3px 3px 0;
    overflow: hidden;
    margin-top: auto;
}

.bar-fill {
    height: 100%;
    border-radius: 0 3px 3px 0;
    transition: width 0.3s ease;
}

.bar-fill.success { background: var(--success-color); }
.bar-fill.warning { background: var(--warning-color); }
.bar-fill.danger { background: var(--danger-color); }

/* Flow Connector - scoped to connectivity-flow to avoid conflict with speed test trace */
.connectivity-flow-container .flow-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    flex-shrink: 0;
    position: relative;
}

.connectivity-flow-container .connector-line {
    width: 100%;
    height: 2px;
    background: var(--border-color);
    position: relative;
}

.connectivity-flow-container .connector-line::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-left: 6px solid var(--border-color);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.connectivity-flow-container .connector-drop {
    position: absolute;
    top: calc(50% + 10px);
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger-color);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Flow Success Rate */
.flow-success-rate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    margin-top: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.success-rate-label {
    font-weight: 500;
    color: var(--text-secondary);
}

.success-rate-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.success-rate-value.rate-excellent { color: var(--success-color); }
.success-rate-value.rate-good { color: #22c55e; }
.success-rate-value.rate-fair { color: var(--warning-color); }
.success-rate-value.rate-poor { color: var(--danger-color); }

/* Connection Issues - WiFi specific additions */
.connection-issue-count {
    font-weight: 700;
    font-size: 1.125rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
}

.issue-item.issue-warning .connection-issue-count { color: var(--warning-color); }
.issue-item.issue-info .connection-issue-count { color: var(--info-color); }
.issue-item.issue-critical .connection-issue-count { color: var(--danger-color); }

.affected-clients {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.affected-client {
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

a.affected-client {
    color: #60a5fa;
    text-decoration: none;
}

a.affected-client:hover {
    color: #93c5fd;
    text-decoration: underline;
}

.affected-more {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Client Status Summary */
.status-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.status-card {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
    position: relative;
    border-top: 3px solid var(--border-color);
}

.status-card.status-connected { border-top-color: var(--success-color); }
.status-card.status-authorized { border-top-color: var(--info-color); }
.status-card.status-guest { border-top-color: #a855f7; }
.status-card.status-issue { border-top-color: var(--warning-color); }

.status-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.status-card.status-connected .status-value { color: var(--success-color); }
.status-card.status-issue .status-value { color: var(--warning-color); }

.status-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.status-card .status-icon {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Per-AP Connection Stats */
.ap-success-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ap-success-row {
    display: grid;
    grid-template-columns: 200px 1fr 60px;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.ap-info {
    display: flex;
    flex-direction: column;
}

.ap-info .ap-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.ap-info .ap-clients {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ap-success-bar-container {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 0 4px 4px 0;
    overflow: hidden;
}

.ap-success-bar {
    height: 100%;
    border-radius: 0 4px 4px 0;
    transition: width 0.3s ease;
}

.ap-success-bar.rate-excellent { background: var(--success-color); }
.ap-success-bar.rate-good { background: #22c55e; }
.ap-success-bar.rate-fair { background: var(--warning-color); }
.ap-success-bar.rate-poor { background: var(--danger-color); }

.ap-success-value {
    font-weight: 600;
    text-align: right;
}

.ap-success-value.rate-excellent { color: var(--success-color); }
.ap-success-value.rate-good { color: #22c55e; }
.ap-success-value.rate-fair { color: var(--warning-color); }
.ap-success-value.rate-poor { color: var(--danger-color); }

/* Responsive Connectivity Flow */
@media (max-width: 1024px) {
    .flow-diagram {
        flex-direction: column;
        gap: 0;
    }

    .flow-stage {
        width: 100%;
        flex-direction: row;
        align-items: center;
        padding: 0.75rem 1rem;
        border-radius: 0;
    }

    .flow-stage:first-child {
        border-radius: 8px 8px 0 0;
    }

    .flow-stage:last-child {
        border-radius: 0 0 8px 8px;
    }

    .stage-header {
        margin-bottom: 0;
        flex: 1;
    }

    .stage-metrics {
        flex-direction: column;
        align-items: flex-end;
        margin-bottom: 0;
        gap: 0;
    }

    .stage-bar {
        display: none;
    }

    .connectivity-flow-container .flow-connector {
        width: 100%;
        height: 30px;
        flex-direction: row;
    }

    .connectivity-flow-container .connector-line {
        width: 2px;
        height: 100%;
    }

    .connectivity-flow-container .connector-line::after {
        right: 50%;
        top: auto;
        bottom: 0;
        transform: translateX(50%);
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 6px solid var(--border-color);
    }

    .connectivity-flow-container .connector-drop {
        top: auto;
        left: calc(50% + 20px);
    }

    .status-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .flow-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .flow-success-rate {
        flex-direction: column;
        gap: 0.5rem;
    }

    .ap-success-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .ap-info {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .ap-success-value {
        text-align: left;
    }

    .status-grid {
        grid-template-columns: 1fr 1fr;
    }

    .status-card {
        padding: 1rem;
    }

    .status-value {
        font-size: 1.5rem;
    }
}

/* ============================================
   WAN Speed Test
   ============================================ */

.wan-speedtest .wan-test-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.wan-speedtest .wan-test-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1rem;
}

.wan-speedtest .wan-test-option {
    flex: 1;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
}

.wan-speedtest .wan-test-option-unavailable {
    opacity: 0.6;
}

.wan-speedtest .wan-test-option-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.wan-speedtest .wan-test-option-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.wan-speedtest .wan-test-option-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.wan-speedtest .wan-test-option-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.wan-speedtest .wan-reassign-select {
    max-width: 200px;
}

.wan-speedtest .wan-test-option-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.wan-speedtest .wan-test-button {
    min-width: 160px;
}

.wan-speedtest .wan-result-summary {
    background: var(--bg-primary);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.wan-speedtest .wan-metadata {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.wan-speedtest .metadata-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.wan-speedtest .metadata-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wan-speedtest .metadata-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.wan-speedtest .test-details {
    gap: 1rem 1.4rem;
}

@@media (max-width: 768px) {
    .wan-speedtest .wan-test-options {
        flex-direction: column;
    }

    .wan-speedtest .wan-test-option-controls {
        flex-direction: column;
    }

    .wan-speedtest .wan-reassign-select {
        max-width: 100%;
        width: 100%;
    }

    .wan-speedtest .wan-metadata {
        gap: 0.75rem;
    }

    .wan-speedtest .wan-test-button {
        width: 100%;
    }
}

/* WAN Speed Chart */
.wan-chart-container {
    margin-bottom: 0;
}

.wan-chart-container .apexcharts-tooltip,
.wan-chart-container .apexcharts-marker {
    cursor: pointer;
    pointer-events: auto;
}

.wan-time-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0 0 1rem;
}

.wan-time-slider input[type="range"] {
    width: 280px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #3b82f6, #60a5fa);
    border-radius: 2px;
    cursor: pointer;
}

.wan-time-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.wan-time-slider input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.wan-time-slider .time-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 60px;
}

/* WAN Filter Badges */
.wan-filter-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 1rem;
}

.wan-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: opacity 0.15s, border-color 0.15s;
}

.wan-filter-badge:hover {
    border-color: #fff;
}

.wan-filter-badge.active {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.5);
}

.wan-filter-badge.active:hover {
    border-color: #fff;
}

.wan-filter-badge.inactive {
    color: var(--text-muted, #666);
}

.wan-badge-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.wan-badge-dot-inline {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.3rem;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .wan-time-slider input[type="range"] {
        width: 200px;
        height: 8px;
    }

    .wan-time-slider input[type="range"]::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
    }

    .wan-time-slider input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
    }
}