/* /Components/CircularPipelineSteps.razor.rz.scp.css */
.circular-steps-container[b-re1voe21rw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Circle visualization */
.steps-circle[b-re1voe21rw] {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto;
}

.steps-svg[b-re1voe21rw] {
    width: 100%;
    height: 100%;
}

.bg-circle[b-re1voe21rw] {
    fill: none;
    stroke: var(--mud-palette-divider);
    stroke-width: 3;
}

.progress-circle[b-re1voe21rw] {
    fill: none;
    stroke: var(--mud-palette-primary);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

/* Step indicators */
.step-indicator .step-dot[b-re1voe21rw] {
    fill: var(--mud-palette-surface);
    stroke: var(--mud-palette-text-secondary);
    stroke-width: 2;
    transition: all 0.3s ease;
}

.step-indicator.passed .step-dot[b-re1voe21rw] {
    fill: var(--mud-palette-success);
    stroke: var(--mud-palette-success);
}

.step-indicator.failed .step-dot[b-re1voe21rw] {
    fill: var(--mud-palette-error);
    stroke: var(--mud-palette-error);
}

.step-indicator.active .step-dot[b-re1voe21rw] {
    fill: var(--mud-palette-primary);
    stroke: var(--mud-palette-primary);
}

/* Pulse animation for active step */
.step-indicator .pulse-ring[b-re1voe21rw] {
    fill: none;
    stroke: var(--mud-palette-primary);
    stroke-width: 2;
    opacity: 0;
    animation: pulse-ring-b-re1voe21rw 1.5s ease-out infinite;
}

@keyframes pulse-ring-b-re1voe21rw {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* Center content */
.center-content[b-re1voe21rw] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100px;
}

.step-number[b-re1voe21rw] {
    font-size: 20px;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.step-title[b-re1voe21rw] {
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.step-status[b-re1voe21rw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

/* Active Agent Card */
.active-agent-card[b-re1voe21rw] {
    background: rgba(91, 164, 201, 0.08);
    border: 1px solid rgba(91, 164, 201, 0.2);
    border-radius: 8px;
    padding: 10px;
    transition: all 0.3s ease;
}

.active-agent-card.processing[b-re1voe21rw] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 12px rgba(91, 164, 201, 0.2);
}

.agent-header[b-re1voe21rw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.agent-avatar[b-re1voe21rw] {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-primary);
    border-radius: 50%;
    color: white;
}

.agent-pulse[b-re1voe21rw] {
    position: absolute;
    inset: -4px;
    border: 2px solid var(--mud-palette-primary);
    border-radius: 50%;
    animation: agent-pulse-b-re1voe21rw 1.5s ease-out infinite;
}

@keyframes agent-pulse-b-re1voe21rw {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.agent-info[b-re1voe21rw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.agent-name[b-re1voe21rw] {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.model-chip[b-re1voe21rw] {
    height: 20px !important;
    font-size: 10px !important;
}

.agent-spinner[b-re1voe21rw] {
    width: 20px !important;
    height: 20px !important;
}

.agent-reason[b-re1voe21rw] {
    margin-top: 8px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

.reason-label[b-re1voe21rw] {
    color: var(--mud-palette-info);
    font-weight: 500;
}

.agent-intent[b-re1voe21rw] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-top: 6px;
    font-size: 11px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.intent-icon[b-re1voe21rw] {
    font-size: 14px !important;
    color: var(--mud-palette-warning);
    flex-shrink: 0;
}

.intent-text[b-re1voe21rw] {
    line-height: 1.4;
}

/* Steps list */
.steps-list[b-re1voe21rw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.step-item[b-re1voe21rw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 12px;
}

.step-item:hover[b-re1voe21rw] {
    background: rgba(255, 255, 255, 0.05);
}

.step-item.in-progress[b-re1voe21rw] {
    background: rgba(91, 164, 201, 0.1);
}

.step-item.completed[b-re1voe21rw] {
    opacity: 0.7;
}

.step-item.failed[b-re1voe21rw] {
    background: rgba(180, 84, 84, 0.1);
}

.step-name[b-re1voe21rw] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}

.step-duration[b-re1voe21rw] {
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
    font-family: monospace;
}

.step-item.more[b-re1voe21rw] {
    justify-content: center;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* No steps state */
.no-steps[b-re1voe21rw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: var(--mud-palette-text-secondary);
    gap: 8px;
}

.no-steps-icon[b-re1voe21rw] {
    opacity: 0.4;
}

/* Animation class */
.steps-circle.animating .step-indicator[b-re1voe21rw] {
    animation: appear-b-re1voe21rw 0.5s ease forwards;
    opacity: 0;
}

.steps-circle.animating .step-indicator:nth-child(1)[b-re1voe21rw] { animation-delay: 0.1s; }
.steps-circle.animating .step-indicator:nth-child(2)[b-re1voe21rw] { animation-delay: 0.15s; }
.steps-circle.animating .step-indicator:nth-child(3)[b-re1voe21rw] { animation-delay: 0.2s; }
.steps-circle.animating .step-indicator:nth-child(4)[b-re1voe21rw] { animation-delay: 0.25s; }
.steps-circle.animating .step-indicator:nth-child(5)[b-re1voe21rw] { animation-delay: 0.3s; }
.steps-circle.animating .step-indicator:nth-child(6)[b-re1voe21rw] { animation-delay: 0.35s; }

@keyframes appear-b-re1voe21rw {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* /Components/ConnectionStatusBar.razor.rz.scp.css */
/* Connection Status Bar - Top of Right Panel */
.connection-status-bar[b-7ck6mq01ne] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Connection Badge - Circular */
.connection-badge[b-7ck6mq01ne] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--mud-palette-background);
    border: 2px solid transparent;
}

/* Connected State - Green */
.connection-badge.connected[b-7ck6mq01ne] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.connection-badge.connected .badge-icon[b-7ck6mq01ne] {
    color: #22C55E;
}

/* Disconnected State - Red */
.connection-badge.disconnected[b-7ck6mq01ne] {
    background: rgba(156, 163, 175, 0.1);
    border-color: rgba(156, 163, 175, 0.3);
    opacity: 0.6;
}

.connection-badge.disconnected .badge-icon[b-7ck6mq01ne] {
    color: #EF4444;
}

.connection-badge.disconnected:hover[b-7ck6mq01ne] {
    opacity: 1;
}

/* Hover Effects */
.connection-badge:hover[b-7ck6mq01ne] {
    transform: scale(1.1);
    border-color: var(--mud-palette-primary);
}

/* Active/Press Effect */
.connection-badge:active[b-7ck6mq01ne] {
    transform: translateY(0) scale(0.95);
}

/* Badge Icon */
.badge-icon[b-7ck6mq01ne] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    z-index: 1;
}

.badge-icon.midev-icon img[b-7ck6mq01ne] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.badge-icon .mud-icon-root[b-7ck6mq01ne] {
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
}

/* Status Indicator - Small Dot */
.status-indicator[b-7ck6mq01ne] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-surface);
    z-index: 2;
}

.status-indicator.online[b-7ck6mq01ne] {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
    animation: pulse-online-b-7ck6mq01ne 2s infinite;
}

.status-indicator.offline[b-7ck6mq01ne] {
    background: #9ca3af;
}

@keyframes pulse-online-b-7ck6mq01ne {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
    }
}

/* Responsive */
@media (max-width: 640px) {
    .connection-status-bar[b-7ck6mq01ne] {
        padding: 10px 16px;
        gap: 10px;
    }

    .connection-badge[b-7ck6mq01ne] {
        width: 36px;
        height: 36px;
    }

    .badge-icon[b-7ck6mq01ne] {
        width: 18px;
        height: 18px;
    }

    .badge-icon[b-7ck6mq01ne]  .mud-icon-root {
        font-size: 18px !important;
    }

    .figma-icon[b-7ck6mq01ne],
    .favicon-icon[b-7ck6mq01ne] {
        width: 18px;
        height: 18px;
    }

    .status-indicator[b-7ck6mq01ne] {
        width: 8px;
        height: 8px;
        bottom: 1px;
        right: 1px;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .connection-badge[b-7ck6mq01ne] {
        transition: none;
    }

    .connection-badge:hover[b-7ck6mq01ne] {
        transform: none;
    }

    .status-indicator.online[b-7ck6mq01ne] {
        animation: none;
    }
}
/* /Components/HealthStatusCard.razor.rz.scp.css */
.health-status-card[b-s62g4pw4fk] {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
}

.card-header[b-s62g4pw4fk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.card-header h3[b-s62g4pw4fk] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
}

.last-check[b-s62g4pw4fk] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.loading-state[b-s62g4pw4fk],
.error-state[b-s62g4pw4fk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}

.loading-state .spinner[b-s62g4pw4fk] {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-s62g4pw4fk 1s linear infinite;
    margin-bottom: 1rem;
}

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

.error-state .icon[b-s62g4pw4fk] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.health-grid[b-s62g4pw4fk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.health-item[b-s62g4pw4fk] {
    background: #f9fafb;
    border-left: 4px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.2s ease;
}

.health-item:hover[b-s62g4pw4fk] {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.health-item.overall[b-s62g4pw4fk] {
    grid-column: 1 / -1;
}

.health-item.status-healthy[b-s62g4pw4fk] {
    border-left-color: #10b981;
}

.health-item.status-degraded[b-s62g4pw4fk] {
    border-left-color: #f59e0b;
}

.health-item.status-unhealthy[b-s62g4pw4fk] {
    border-left-color: #ef4444;
}

.health-item.status-unknown[b-s62g4pw4fk] {
    border-left-color: #6b7280;
}

.item-header[b-s62g4pw4fk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.status-icon[b-s62g4pw4fk] {
    font-size: 1.25rem;
}

.item-title[b-s62g4pw4fk] {
    font-weight: 600;
    color: #374151;
}

.item-value[b-s62g4pw4fk] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.25rem;
}

.item-detail[b-s62g4pw4fk] {
    font-size: 0.875rem;
    color: #6b7280;
}

.alerts-section[b-s62g4pw4fk] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.alerts-section h4[b-s62g4pw4fk] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
}

.alert-item[b-s62g4pw4fk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.alert-item.alert-error[b-s62g4pw4fk] {
    background: #fee2e2;
    color: #991b1b;
}

.alert-item.alert-warning[b-s62g4pw4fk] {
    background: #fef3c7;
    color: #92400e;
}

.alert-item.alert-info[b-s62g4pw4fk] {
    background: #dbeafe;
    color: #1e40af;
}

.alert-icon[b-s62g4pw4fk] {
    font-size: 1rem;
    flex-shrink: 0;
}

.alert-message[b-s62g4pw4fk] {
    flex: 1;
}
/* /Components/Mobile/ApprovalRequestCard.razor.rz.scp.css */
/* /Components/Mobile/ConnectionStatusBadge.razor.rz.scp.css */
/**
 * ConnectionStatusBadge Styles
 * Connection quality indicator with ping history
 */

.connection-status-badge[b-q9ogp7hcuf] {
    display: flex;
    align-items: center;
    gap: var(--mobile-space-2);
    padding: var(--mobile-space-2) var(--mobile-space-3);
    background: var(--mobile-card-bg);
    border: 1px solid var(--mobile-card-border);
    border-radius: var(--mobile-radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
}

.connection-status-badge:hover[b-q9ogp7hcuf] {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--mobile-accent-blue);
    transform: translateY(-1px);
}

.connection-status-badge:active[b-q9ogp7hcuf] {
    transform: translateY(0);
}

/* Status Indicator */
.status-indicator[b-q9ogp7hcuf] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-dot[b-q9ogp7hcuf] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.dot-green[b-q9ogp7hcuf] {
    background-color: var(--mobile-accent-green);
    box-shadow: 0 0 8px var(--mobile-accent-green);
}

.dot-yellow[b-q9ogp7hcuf] {
    background-color: var(--mobile-accent-yellow);
    box-shadow: 0 0 8px var(--mobile-accent-yellow);
}

.dot-red[b-q9ogp7hcuf] {
    background-color: var(--mobile-accent-red);
    box-shadow: 0 0 8px var(--mobile-accent-red);
}

.pulse[b-q9ogp7hcuf] {
    animation: pulse-animation-b-q9ogp7hcuf 2s ease-in-out infinite;
}

.pulse-slow[b-q9ogp7hcuf] {
    animation: pulse-animation-b-q9ogp7hcuf 3s ease-in-out infinite;
}

@keyframes pulse-animation-b-q9ogp7hcuf {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

/* Latency Display */
.latency-display[b-q9ogp7hcuf] {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--mobile-font-mono);
}

.latency-value[b-q9ogp7hcuf] {
    font-size: var(--mobile-text-base);
    font-weight: var(--mobile-font-bold);
    color: var(--mobile-text-primary);
}

.latency-unit[b-q9ogp7hcuf] {
    font-size: var(--mobile-text-xs);
    color: var(--mobile-text-secondary);
}

.latency-text[b-q9ogp7hcuf] {
    font-size: var(--mobile-text-sm);
    color: var(--mobile-text-secondary);
}

/* Color States */
.status-excellent .latency-value[b-q9ogp7hcuf] {
    color: var(--mobile-accent-green-light);
}

.status-good .latency-value[b-q9ogp7hcuf] {
    color: var(--mobile-accent-yellow-light);
}

.status-poor .latency-value[b-q9ogp7hcuf] {
    color: var(--mobile-accent-red-light);
}

.status-disconnected .latency-text[b-q9ogp7hcuf] {
    color: var(--mobile-accent-red);
}

.status-connecting .latency-text[b-q9ogp7hcuf] {
    color: var(--mobile-accent-yellow);
}

/* Expand Icon */
.expand-icon[b-q9ogp7hcuf] {
    display: flex;
    align-items: center;
    color: var(--mobile-text-tertiary);
}

/* Ping History Popup */
.ping-history-popup[b-q9ogp7hcuf] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--mobile-space-2);
    width: 340px;
    background: var(--mobile-card-bg);
    border: 1px solid var(--mobile-card-border);
    border-radius: var(--mobile-radius-lg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: var(--mobile-shadow-xl);
    z-index: 1000;
    overflow: hidden;
}

.history-header[b-q9ogp7hcuf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mobile-space-4);
    border-bottom: 1px solid var(--mobile-card-border);
}

.history-header h4[b-q9ogp7hcuf] {
    margin: 0;
    font-size: var(--mobile-text-lg);
    font-weight: var(--mobile-font-semibold);
    color: var(--mobile-text-primary);
}

.close-btn[b-q9ogp7hcuf] {
    color: var(--mobile-text-tertiary);
}

/* History Stats */
.history-stats[b-q9ogp7hcuf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mobile-space-3);
    padding: var(--mobile-space-4);
    border-bottom: 1px solid var(--mobile-card-border);
}

.stat-item[b-q9ogp7hcuf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mobile-space-1);
}

.stat-label[b-q9ogp7hcuf] {
    font-size: var(--mobile-text-xs);
    color: var(--mobile-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value[b-q9ogp7hcuf] {
    font-size: var(--mobile-text-base);
    font-weight: var(--mobile-font-bold);
    font-family: var(--mobile-font-mono);
    color: var(--mobile-text-primary);
}

.stat-value.text-success[b-q9ogp7hcuf] {
    color: var(--mobile-accent-green-light);
}

.stat-value.text-warning[b-q9ogp7hcuf] {
    color: var(--mobile-accent-yellow-light);
}

.stat-value.text-danger[b-q9ogp7hcuf] {
    color: var(--mobile-accent-red-light);
}

/* History Chart */
.history-chart[b-q9ogp7hcuf] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: var(--mobile-space-4);
    height: 120px;
}

.chart-bar[b-q9ogp7hcuf] {
    flex: 1;
    min-width: 0;
    position: relative;
    background: var(--mobile-accent-blue);
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.chart-bar:hover[b-q9ogp7hcuf] {
    transform: scaleY(1.05);
    box-shadow: 0 0 12px currentColor;
}

.chart-bar.text-success[b-q9ogp7hcuf] {
    background: var(--mobile-accent-green);
}

.chart-bar.text-warning[b-q9ogp7hcuf] {
    background: var(--mobile-accent-yellow);
}

.chart-bar.text-danger[b-q9ogp7hcuf] {
    background: var(--mobile-accent-red);
}

.bar-label[b-q9ogp7hcuf] {
    font-size: 10px;
    font-family: var(--mobile-font-mono);
    color: white;
    padding: 2px;
    opacity: 0;
    transition: opacity 0.2s;
}

.chart-bar:hover .bar-label[b-q9ogp7hcuf] {
    opacity: 1;
}

/* History Footer */
.history-footer[b-q9ogp7hcuf] {
    padding: var(--mobile-space-3) var(--mobile-space-4);
    text-align: center;
    border-top: 1px solid var(--mobile-card-border);
}

/* Responsive */
@media (max-width: 640px) {
    .ping-history-popup[b-q9ogp7hcuf] {
        width: calc(100vw - var(--mobile-space-8));
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .history-stats[b-q9ogp7hcuf] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--mobile-space-4);
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .pulse[b-q9ogp7hcuf],
    .pulse-slow[b-q9ogp7hcuf],
    .chart-bar[b-q9ogp7hcuf] {
        animation: none !important;
        transition: none !important;
    }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .ping-history-popup[b-q9ogp7hcuf] {
        background: rgba(15, 23, 42, 0.95);
    }
}
/* /Components/Mobile/NotificationSettings.razor.rz.scp.css */
/**
 * NotificationSettings Component Styles
 * Mobile-optimized notification settings UI
 */

.notification-settings[b-hrd48xsnhb] {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-space-4);
}

/* Warning Card */
.status-warning[b-hrd48xsnhb] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.warning-content[b-hrd48xsnhb] {
    display: flex;
    align-items: center;
    gap: var(--mobile-space-4);
}

.warning-text h3[b-hrd48xsnhb] {
    margin: 0 0 var(--mobile-space-1) 0;
    font-size: var(--mobile-text-base);
    font-weight: var(--mobile-font-semibold);
    color: var(--mobile-accent-yellow);
}

.warning-text p[b-hrd48xsnhb] {
    margin: 0;
    font-size: var(--mobile-text-sm);
    color: var(--mobile-text-muted);
}

/* Notification Card */
.notification-card[b-hrd48xsnhb] {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-space-5);
}

/* Permission Status */
.permission-status[b-hrd48xsnhb] {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-space-4);
}

.status-header[b-hrd48xsnhb] {
    display: flex;
    align-items: center;
    gap: var(--mobile-space-3);
}

.status-info h3[b-hrd48xsnhb] {
    margin: 0 0 var(--mobile-space-1) 0;
    font-size: var(--mobile-text-lg);
    font-weight: var(--mobile-font-semibold);
    color: var(--mobile-text-primary);
}

.status-info p[b-hrd48xsnhb] {
    margin: 0;
    font-size: var(--mobile-text-sm);
}

.enable-button[b-hrd48xsnhb] {
    margin-top: var(--mobile-space-2);
}

.subscription-active[b-hrd48xsnhb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mobile-space-3);
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--mobile-radius-md);
}

.active-badge[b-hrd48xsnhb] {
    display: flex;
    align-items: center;
    gap: var(--mobile-space-2);
    color: var(--mobile-accent-green);
    font-weight: var(--mobile-font-semibold);
    font-size: var(--mobile-text-sm);
}

/* Notification Types */
.notification-types[b-hrd48xsnhb] {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-space-3);
    padding-top: var(--mobile-space-3);
    border-top: 1px solid var(--mobile-card-border);
}

.types-header[b-hrd48xsnhb] {
    margin: 0 0 var(--mobile-space-2) 0;
    font-size: var(--mobile-text-base);
    font-weight: var(--mobile-font-semibold);
    color: var(--mobile-text-primary);
}

.type-item[b-hrd48xsnhb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mobile-space-3);
    padding: var(--mobile-space-3);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--mobile-radius-md);
    transition: background var(--mobile-transition-base);
}

.type-item:hover[b-hrd48xsnhb] {
    background: rgba(255, 255, 255, 0.06);
}

.type-info[b-hrd48xsnhb] {
    display: flex;
    align-items: center;
    gap: var(--mobile-space-3);
    flex: 1;
    min-width: 0;
}

.type-details[b-hrd48xsnhb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.type-name[b-hrd48xsnhb] {
    font-size: var(--mobile-text-sm);
    font-weight: var(--mobile-font-medium);
    color: var(--mobile-text-primary);
}

.type-desc[b-hrd48xsnhb] {
    font-size: var(--mobile-text-xs);
    line-height: 1.3;
}

/* Test Section */
.test-section[b-hrd48xsnhb] {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.test-description[b-hrd48xsnhb] {
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.test-buttons[b-hrd48xsnhb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.test-button[b-hrd48xsnhb] {
    justify-content: flex-start !important;
    text-transform: none !important;
    font-weight: 500 !important;
}

.loading-indicator[b-hrd48xsnhb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    justify-content: center;
}

.loading-indicator span[b-hrd48xsnhb] {
    font-size: 0.875rem;
}

/* Info */
.notification-info[b-hrd48xsnhb] {
    display: flex;
    gap: var(--mobile-space-2);
    padding: var(--mobile-space-3);
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--mobile-radius-md);
}

.info-icon[b-hrd48xsnhb] {
    flex-shrink: 0;
    color: var(--mobile-accent-blue);
}

.notification-info p[b-hrd48xsnhb] {
    margin: 0;
    font-size: var(--mobile-text-xs);
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 640px) {
    .type-item[b-hrd48xsnhb] {
        padding: var(--mobile-space-2);
    }

    .type-name[b-hrd48xsnhb] {
        font-size: var(--mobile-text-xs);
    }

    .type-desc[b-hrd48xsnhb] {
        font-size: 0.6875rem;
    }
}

/* Animations */
.notification-card[b-hrd48xsnhb] {
    animation: slide-in-up-b-hrd48xsnhb 0.3s ease;
}

@keyframes slide-in-up-b-hrd48xsnhb {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Mobile/ProximityMenu.razor.rz.scp.css */
/**
 * ProximityMenu Styles
 * Spring physics, glassmorphism, and flag-style animations
 */

/* ============================================================================
   PROXIMITY DETECTION ZONE
   ============================================================================ */
.proximity-zone[b-z5bxsxu6m5] {
    position: fixed;
    top: 0;
    right: 0;
    width: 96px;
    height: 96px;
    z-index: 99;
    /* Invisible but interactive */
    pointer-events: all;
}

/* ============================================================================
   MENU BUTTON
   ============================================================================ */
.menu-button[b-z5bxsxu6m5] {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 56px;
    height: 56px;
    z-index: 100;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2));
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Spring physics simulation via cubic-bezier */
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease,
                box-shadow 0.3s ease;
}

/* Button States */
.menu-button.state-hidden[b-z5bxsxu6m5] {
    transform: scale(0.4);
    opacity: 0.3;
}

.menu-button.state-nearby[b-z5bxsxu6m5] {
    transform: scale(1.0);
    opacity: 1.0;
}

.menu-button.state-open[b-z5bxsxu6m5] {
    transform: scale(1.1) rotate(180deg);
    opacity: 1.0;
    box-shadow: 0 30px 60px rgba(59, 130, 246, 0.4);
}

/* ============================================================================
   PULSE EFFECTS
   ============================================================================ */
.pulse-ring[b-z5bxsxu6m5] {
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(59, 130, 246, 0.5);
    border-radius: 50%;
    pointer-events: none;
}

.pulse-ring.fast[b-z5bxsxu6m5] {
    animation: pulse-ring-fast-b-z5bxsxu6m5 0.6s cubic-bezier(0.4, 0, 0.6, 1) 0.4s infinite;
}

.pulse-ring.slow[b-z5bxsxu6m5] {
    animation: pulse-ring-slow-b-z5bxsxu6m5 1.5s cubic-bezier(0.4, 0, 0.6, 1) 1s infinite;
}

@keyframes pulse-ring-fast-b-z5bxsxu6m5 {
    0% {
        transform: scale(1.0);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes pulse-ring-slow-b-z5bxsxu6m5 {
    0% {
        transform: scale(1.0);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

.pulse-background[b-z5bxsxu6m5] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.3);
    animation: pulse-background-b-z5bxsxu6m5 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    pointer-events: none;
}

@keyframes pulse-background-b-z5bxsxu6m5 {
    0% {
        transform: scale(1.0);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ============================================================================
   HAMBURGER ICON
   ============================================================================ */
.hamburger-icon[b-z5bxsxu6m5] {
    width: 24px;
    height: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hamburger-icon .line[b-z5bxsxu6m5] {
    width: 20px;
    height: 2px;
    background: white;
    border-radius: 2px;
    position: absolute;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger-icon .line-1[b-z5bxsxu6m5] {
    transform: translateY(-6px);
}

.hamburger-icon .line-2[b-z5bxsxu6m5] {
    transform: translateY(0);
}

.hamburger-icon .line-3[b-z5bxsxu6m5] {
    transform: translateY(6px);
}

/* X-form when open */
.hamburger-icon.open .line-1[b-z5bxsxu6m5] {
    transform: translateY(0) rotate(45deg);
}

.hamburger-icon.open .line-2[b-z5bxsxu6m5] {
    opacity: 0;
    transform: scale(0);
}

.hamburger-icon.open .line-3[b-z5bxsxu6m5] {
    transform: translateY(0) rotate(-45deg);
}

/* ============================================================================
   BACKDROP
   ============================================================================ */
.menu-backdrop[b-z5bxsxu6m5] {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: backdrop-fade-in-b-z5bxsxu6m5 0.2s ease;
}

@keyframes backdrop-fade-in-b-z5bxsxu6m5 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================================================
   MENU PANEL (FLAG ANIMATION)
   ============================================================================ */
.menu-panel[b-z5bxsxu6m5] {
    position: fixed;
    top: 80px;
    right: 16px;
    width: 288px;
    max-height: calc(100vh - 6rem);
    z-index: 95;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
    backdrop-filter: blur(48px);
    -webkit-backdrop-filter: blur(48px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* FLAG ANIMATION - CRITICAL! */
    transform-origin: top center;
    transform: scaleY(0) rotateX(-15deg);
    opacity: 0;
}

.menu-panel.open[b-z5bxsxu6m5] {
    /* Spring physics via cubic-bezier approximation */
    animation: flag-unfold-b-z5bxsxu6m5 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes flag-unfold-b-z5bxsxu6m5 {
    0% {
        transform: scaleY(0) rotateX(-15deg);
        opacity: 0;
    }
    100% {
        transform: scaleY(1) rotateX(0deg);
        opacity: 1;
    }
}

/* ============================================================================
   MENU HEADER
   ============================================================================ */
.menu-header[b-z5bxsxu6m5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-avatar[b-z5bxsxu6m5] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.menu-title-section[b-z5bxsxu6m5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-title[b-z5bxsxu6m5] {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.menu-subtitle[b-z5bxsxu6m5] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* ============================================================================
   MENU ITEMS
   ============================================================================ */
.menu-items[b-z5bxsxu6m5] {
    padding: 8px 0;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.menu-item[b-z5bxsxu6m5] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 24px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    /* Stagger animation */
    opacity: 0;
    transform: translateX(-20px);
    animation: menu-item-slide-in-b-z5bxsxu6m5 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes menu-item-slide-in-b-z5bxsxu6m5 {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.menu-item:hover[b-z5bxsxu6m5] {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(4px);
}

.menu-item:active[b-z5bxsxu6m5] {
    transform: translateX(4px) scale(0.98);
}

/* Hover bar (left side) */
.hover-bar[b-z5bxsxu6m5] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 0 2px 2px 0;
    transition: height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.menu-item:hover .hover-bar[b-z5bxsxu6m5] {
    height: 70%;
}

.menu-item-icon[b-z5bxsxu6m5] {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s ease;
}

.menu-item:hover .menu-item-icon[b-z5bxsxu6m5] {
    color: rgba(255, 255, 255, 1);
}

.menu-item-label[b-z5bxsxu6m5] {
    flex: 1;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.2s ease;
}

.menu-item:hover .menu-item-label[b-z5bxsxu6m5] {
    color: rgba(255, 255, 255, 1);
}

.menu-item-badge[b-z5bxsxu6m5] {
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Badge animation */
    transform: scale(0);
    animation: badge-pop-b-z5bxsxu6m5 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes badge-pop-b-z5bxsxu6m5 {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

/* ============================================================================
   MENU FOOTER
   ============================================================================ */
.menu-footer[b-z5bxsxu6m5] {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-version[b-z5bxsxu6m5] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.footer-status[b-z5bxsxu6m5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.status-dot[b-z5bxsxu6m5] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
}

.status-dot.pulse[b-z5bxsxu6m5] {
    animation: status-pulse-b-z5bxsxu6m5 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes status-pulse-b-z5bxsxu6m5 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
    }
}

/* ============================================================================
   SCROLLBAR STYLING
   ============================================================================ */
.menu-items[b-z5bxsxu6m5]::-webkit-scrollbar {
    width: 4px;
}

.menu-items[b-z5bxsxu6m5]::-webkit-scrollbar-track {
    background: transparent;
}

.menu-items[b-z5bxsxu6m5]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.menu-items[b-z5bxsxu6m5]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================================================
   MOBILE RESPONSIVE
   ============================================================================ */
@media (max-width: 640px) {
    .menu-panel[b-z5bxsxu6m5] {
        width: calc(100vw - 32px);
        right: 16px;
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .menu-button[b-z5bxsxu6m5],
    .menu-panel[b-z5bxsxu6m5],
    .menu-item[b-z5bxsxu6m5],
    .pulse-ring[b-z5bxsxu6m5],
    .pulse-background[b-z5bxsxu6m5],
    .hamburger-icon .line[b-z5bxsxu6m5] {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Mobile/RejectionReasonModal.razor.rz.scp.css */
/**
 * RejectionReasonModal Styles
 * Modal dialog for rejection reason
 */

/* Backdrop */
.rejection-modal-backdrop[b-q4rn2b8rcv] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mobile-space-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.rejection-modal-backdrop.show[b-q4rn2b8rcv] {
    opacity: 1;
    pointer-events: auto;
}

/* Modal */
.rejection-modal[b-q4rn2b8rcv] {
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    background: var(--mobile-card-bg);
    border: 1px solid var(--mobile-card-border);
    border-radius: var(--mobile-radius-xl);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: var(--mobile-shadow-2xl);
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rejection-modal.show[b-q4rn2b8rcv] {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Header */
.modal-header[b-q4rn2b8rcv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mobile-space-5);
    border-bottom: 1px solid var(--mobile-card-border);
}

.modal-header h3[b-q4rn2b8rcv] {
    margin: 0;
    font-size: var(--mobile-text-xl);
    font-weight: var(--mobile-font-semibold);
    color: var(--mobile-text-primary);
}

.close-btn[b-q4rn2b8rcv] {
    color: var(--mobile-text-tertiary);
}

/* Body */
.modal-body[b-q4rn2b8rcv] {
    flex: 1;
    overflow-y: auto;
    padding: var(--mobile-space-5);
}

.modal-description[b-q4rn2b8rcv] {
    margin: 0 0 var(--mobile-space-6) 0;
    font-size: var(--mobile-text-sm);
    line-height: 1.6;
}

/* Quick Reasons */
.quick-reasons[b-q4rn2b8rcv] {
    margin-bottom: var(--mobile-space-6);
}

.quick-reasons h4[b-q4rn2b8rcv] {
    margin: 0 0 var(--mobile-space-3) 0;
    font-size: var(--mobile-text-base);
    font-weight: var(--mobile-font-semibold);
    color: var(--mobile-text-primary);
}

.reason-buttons[b-q4rn2b8rcv] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mobile-space-3);
}

.reason-btn[b-q4rn2b8rcv] {
    display: flex;
    align-items: center;
    gap: var(--mobile-space-2);
    padding: var(--mobile-space-3) var(--mobile-space-4);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--mobile-card-border);
    border-radius: var(--mobile-radius-lg);
    color: var(--mobile-text-secondary);
    font-size: var(--mobile-text-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.reason-btn:hover[b-q4rn2b8rcv] {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--mobile-accent-blue);
    color: var(--mobile-text-primary);
    transform: translateY(-1px);
}

.reason-btn:active[b-q4rn2b8rcv] {
    transform: translateY(0);
}

.reason-btn.selected[b-q4rn2b8rcv] {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--mobile-accent-red);
    color: var(--mobile-accent-red-light);
}

.reason-btn.selected:hover[b-q4rn2b8rcv] {
    background: rgba(239, 68, 68, 0.15);
}

/* Custom Reason */
.custom-reason[b-q4rn2b8rcv] {
    margin-bottom: var(--mobile-space-3);
}

.custom-reason h4[b-q4rn2b8rcv] {
    margin: 0 0 var(--mobile-space-3) 0;
    font-size: var(--mobile-text-base);
    font-weight: var(--mobile-font-semibold);
    color: var(--mobile-text-primary);
}

.char-count[b-q4rn2b8rcv] {
    text-align: right;
    margin-top: var(--mobile-space-2);
}

/* Footer */
.modal-footer[b-q4rn2b8rcv] {
    display: flex;
    justify-content: flex-end;
    gap: var(--mobile-space-3);
    padding: var(--mobile-space-5);
    border-top: 1px solid var(--mobile-card-border);
}

.cancel-btn[b-q4rn2b8rcv],
.submit-btn[b-q4rn2b8rcv] {
    text-transform: uppercase;
    font-weight: var(--mobile-font-semibold);
    letter-spacing: 0.05em;
}

/* Responsive */
@media (max-width: 640px) {
    .rejection-modal-backdrop[b-q4rn2b8rcv] {
        padding: 0;
        align-items: flex-end;
    }

    .rejection-modal[b-q4rn2b8rcv] {
        max-width: 100%;
        max-height: 80vh;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .rejection-modal.show[b-q4rn2b8rcv] {
        transform: scale(1) translateY(0);
    }

    .reason-buttons[b-q4rn2b8rcv] {
        grid-template-columns: 1fr;
    }

    .modal-body[b-q4rn2b8rcv] {
        padding: var(--mobile-space-4);
    }

    .modal-header[b-q4rn2b8rcv],
    .modal-footer[b-q4rn2b8rcv] {
        padding: var(--mobile-space-4);
    }
}

/* Scrollbar */
.modal-body[b-q4rn2b8rcv]::-webkit-scrollbar {
    width: 8px;
}

.modal-body[b-q4rn2b8rcv]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.modal-body[b-q4rn2b8rcv]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.modal-body[b-q4rn2b8rcv]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .rejection-modal-backdrop[b-q4rn2b8rcv],
    .rejection-modal[b-q4rn2b8rcv],
    .reason-btn[b-q4rn2b8rcv] {
        transition: none !important;
    }
}

/* Dark Mode Optimizations */
@media (prefers-color-scheme: dark) {
    .rejection-modal[b-q4rn2b8rcv] {
        background: rgba(15, 23, 42, 0.95);
    }

    .reason-btn[b-q4rn2b8rcv] {
        background: rgba(255, 255, 255, 0.05);
    }

    .reason-btn:hover[b-q4rn2b8rcv] {
        background: rgba(255, 255, 255, 0.08);
    }
}
/* /Components/Mobile/ServiceHealthCard.razor.rz.scp.css */
/**
 * ServiceHealthCard Styles
 * Modern health card with metrics and status
 */

.service-health-card[b-rvjiamjfm0] {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-space-4);
    min-height: 200px;
}

/* Header Section */
.card-header-section[b-rvjiamjfm0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.service-icon-container[b-rvjiamjfm0] {
    width: 56px;
    height: 56px;
    border-radius: var(--mobile-radius-lg);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mobile-transition-base);
}

.service-health-card:hover .service-icon-container[b-rvjiamjfm0] {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

.status-indicator[b-rvjiamjfm0] {
    display: flex;
    align-items: center;
}

/* Service Name Section */
.service-name-section[b-rvjiamjfm0] {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-space-2);
}

.service-name[b-rvjiamjfm0] {
    font-size: var(--mobile-text-xl);
    font-weight: var(--mobile-font-semibold);
    color: var(--mobile-text-primary);
    margin: 0;
}

.status-text[b-rvjiamjfm0] {
    display: flex;
    align-items: center;
    gap: var(--mobile-space-2);
    color: var(--mobile-text-secondary);
}

/* Metrics Grid */
.metrics-grid[b-rvjiamjfm0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mobile-space-4);
    padding: var(--mobile-space-3) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.metric-item[b-rvjiamjfm0] {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-space-1);
}

.metric-label[b-rvjiamjfm0] {
    font-size: var(--mobile-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-value[b-rvjiamjfm0] {
    font-size: var(--mobile-text-lg);
    font-weight: var(--mobile-font-semibold);
    color: var(--mobile-text-primary);
}

/* Error Message Section */
.error-message-section[b-rvjiamjfm0] {
    display: flex;
    align-items: flex-start;
    gap: var(--mobile-space-2);
    padding: var(--mobile-space-3);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--mobile-radius-md);
    font-size: var(--mobile-text-sm);
    line-height: 1.5;
}

/* Footer Section */
.card-footer-section[b-rvjiamjfm0] {
    margin-top: auto;
}

.last-checked[b-rvjiamjfm0] {
    display: flex;
    align-items: center;
    gap: var(--mobile-space-2);
    font-size: var(--mobile-text-xs);
}

/* Animations */
.service-health-card[b-rvjiamjfm0] {
    animation: service-card-fade-in-b-rvjiamjfm0 0.3s ease;
}

@keyframes service-card-fade-in-b-rvjiamjfm0 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover Effects */
.service-health-card:hover[b-rvjiamjfm0] {
    transform: translateY(-4px);
}

.service-health-card:active[b-rvjiamjfm0] {
    transform: translateY(-2px) scale(0.98);
}

/* Status-specific styling */
.service-health-card.status-healthy[b-rvjiamjfm0] {
    border-left-color: var(--mobile-status-healthy);
}

.service-health-card.status-healthy .metric-value[b-rvjiamjfm0] {
    color: var(--mobile-accent-green-light);
}

.service-health-card.status-warning[b-rvjiamjfm0] {
    border-left-color: var(--mobile-status-warning);
}

.service-health-card.status-warning .metric-value[b-rvjiamjfm0] {
    color: var(--mobile-accent-yellow-light);
}

.service-health-card.status-error[b-rvjiamjfm0] {
    border-left-color: var(--mobile-status-error);
}

.service-health-card.status-error .metric-value[b-rvjiamjfm0] {
    color: var(--mobile-accent-red-light);
}

/* Responsive */
@media (max-width: 640px) {
    .metrics-grid[b-rvjiamjfm0] {
        grid-template-columns: 1fr;
        gap: var(--mobile-space-3);
    }

    .service-health-card[b-rvjiamjfm0] {
        min-height: 180px;
    }
}

/* Dark Mode (already optimized) */
@media (prefers-color-scheme: dark) {
    .service-icon-container[b-rvjiamjfm0] {
        background: rgba(255, 255, 255, 0.03);
    }

    .service-health-card:hover .service-icon-container[b-rvjiamjfm0] {
        background: rgba(255, 255, 255, 0.08);
    }
}
/* /Components/Mobile/Settings/AboutSection.razor.rz.scp.css */
.info-group[b-gntoqfem2t] {
    padding: 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.info-group:last-child[b-gntoqfem2t] {
    border-bottom: none;
}

.app-logo[b-gntoqfem2t] {
    text-align: center;
    margin-bottom: 16px;
}

.app-name[b-gntoqfem2t] {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 8px;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.app-tagline[b-gntoqfem2t] {
    text-align: center;
    font-size: 0.875rem;
    font-style: italic;
}

.info-row[b-gntoqfem2t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.info-row:last-child[b-gntoqfem2t] {
    border-bottom: none;
}

.info-label[b-gntoqfem2t] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.info-value[b-gntoqfem2t] {
    font-size: 0.875rem;
    text-align: right;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-list[b-gntoqfem2t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.link-item[b-gntoqfem2t] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.link-item:hover[b-gntoqfem2t] {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(4px);
}

.link-item span[b-gntoqfem2t] {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 500;
}

.external-icon[b-gntoqfem2t] {
    opacity: 0.5;
}

.copyright[b-gntoqfem2t] {
    padding: 24px 16px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.copyright-text[b-gntoqfem2t] {
    font-size: 0.8125rem;
    margin-bottom: 4px;
}

.copyright-text:last-child[b-gntoqfem2t] {
    margin-bottom: 0;
}
/* /Components/Mobile/Settings/ApprovalsSection.razor.rz.scp.css */
.timeout-slider[b-mm16hqbnt2] {
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.slider-label[b-mm16hqbnt2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    font-size: 0.875rem;
}

.slider-value[b-mm16hqbnt2] {
    font-weight: 500;
    color: var(--mud-palette-primary);
    font-size: 0.8125rem;
}

.slider-hint[b-mm16hqbnt2] {
    margin-top: 12px;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.info-box[b-mm16hqbnt2] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid var(--mud-palette-info);
    border-radius: 8px;
    margin-top: 16px;
}

.info-icon[b-mm16hqbnt2] {
    color: var(--mud-palette-info);
    flex-shrink: 0;
}

.info-content[b-mm16hqbnt2] {
    flex: 1;
}

.info-title[b-mm16hqbnt2] {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.info-text[b-mm16hqbnt2] {
    font-size: 0.8125rem;
    line-height: 1.5;
}
/* /Components/Mobile/Settings/NotificationsSection.razor.rz.scp.css */
.section-content[b-sk6p954615] {
    padding: 0;
}

.setting-group[b-sk6p954615] {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.setting-group:last-child[b-sk6p954615] {
    border-bottom: none;
}

.group-title[b-sk6p954615] {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 12px;
}

.setting-item[b-sk6p954615] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.setting-info[b-sk6p954615] {
    flex: 1;
    padding-right: 16px;
}

.setting-name[b-sk6p954615] {
    font-weight: 500;
    font-size: 0.9375rem;
    margin-bottom: 4px;
}

.setting-desc[b-sk6p954615] {
    font-size: 0.8125rem;
    line-height: 1.4;
}

.quiet-hours-config[b-sk6p954615] {
    margin-top: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.time-picker[b-sk6p954615] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.time-label[b-sk6p954615] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    min-width: 50px;
}

.quiet-hours-note[b-sk6p954615] {
    margin-top: 12px;
    padding: 12px;
    background: rgba(255, 200, 0, 0.1);
    border-left: 3px solid var(--mud-palette-warning);
    border-radius: 4px;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.type-desc[b-sk6p954615] {
    font-size: 0.8125rem;
    margin-bottom: 16px;
    line-height: 1.4;
}

.type-category[b-sk6p954615] {
    margin-bottom: 20px;
}

.type-category:last-child[b-sk6p954615] {
    margin-bottom: 0;
}

.category-header[b-sk6p954615] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.type-item[b-sk6p954615] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    transition: background 0.2s;
}

.type-item:hover[b-sk6p954615] {
    background: rgba(255, 255, 255, 0.04);
}

.type-info[b-sk6p954615] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.type-emoji[b-sk6p954615] {
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
}

.type-details[b-sk6p954615] {
    flex: 1;
}

.type-name[b-sk6p954615] {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 2px;
}

.type-severity[b-sk6p954615] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
/* /Components/Mobile/Settings/StatusSection.razor.rz.scp.css */
.settings-section[b-ktf6503xd3] {
    padding: 0;
}

.section-header[b-ktf6503xd3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section-icon[b-ktf6503xd3] {
    color: var(--mud-palette-primary);
}

.section-header h3[b-ktf6503xd3] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.status-content[b-ktf6503xd3] {
    padding: 16px;
}

.status-card[b-ktf6503xd3] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.status-header[b-ktf6503xd3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.status-label[b-ktf6503xd3] {
    font-weight: 600;
    font-size: 1rem;
}

.status-detail[b-ktf6503xd3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.status-detail:first-of-type[b-ktf6503xd3] {
    border-top: none;
}

.metric-label[b-ktf6503xd3] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.metric-value[b-ktf6503xd3] {
    font-size: 0.875rem;
    font-weight: 500;
}

.services-list h4[b-ktf6503xd3] {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6);
    margin: 20px 0 12px;
}

.service-item[b-ktf6503xd3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-bottom: 8px;
}

.service-info[b-ktf6503xd3] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.service-details[b-ktf6503xd3] {
    flex: 1;
}

.service-name[b-ktf6503xd3] {
    font-weight: 500;
    font-size: 0.9375rem;
}

.service-desc[b-ktf6503xd3] {
    font-size: 0.8125rem;
    margin-top: 2px;
}

.connection-info[b-ktf6503xd3] {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.connection-info h4[b-ktf6503xd3] {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 12px;
}

.info-row[b-ktf6503xd3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.info-label[b-ktf6503xd3] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.info-value[b-ktf6503xd3] {
    font-size: 0.875rem;
    font-weight: 500;
    text-align: right;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.refresh-button[b-ktf6503xd3] {
    margin-top: 12px;
    width: 100%;
}

.loading-state[b-ktf6503xd3],
.error-state[b-ktf6503xd3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 16px;
    text-align: center;
}

.error-message[b-ktf6503xd3] {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}
/* /Components/Mobile/Settings/UISection.razor.rz.scp.css */
.group-desc[b-gqo469j03z] {
    font-size: 0.8125rem;
    margin-bottom: 16px;
    line-height: 1.4;
}

.card-toggle-item[b-gqo469j03z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    transition: background 0.2s;
}

.card-toggle-item:hover[b-gqo469j03z] {
    background: rgba(255, 255, 255, 0.05);
}

.card-info[b-gqo469j03z] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.card-details[b-gqo469j03z] {
    flex: 1;
}

.card-name[b-gqo469j03z] {
    font-weight: 500;
    font-size: 0.9375rem;
    margin-bottom: 4px;
}

.card-desc[b-gqo469j03z] {
    font-size: 0.8125rem;
}

.density-option[b-gqo469j03z],
.detail-option[b-gqo469j03z] {
    padding: 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.density-info[b-gqo469j03z],
.detail-info[b-gqo469j03z] {
    margin-left: 32px;
}

.density-name[b-gqo469j03z],
.detail-name[b-gqo469j03z] {
    font-weight: 500;
    font-size: 0.9375rem;
    margin-bottom: 4px;
}

.density-desc[b-gqo469j03z],
.detail-desc[b-gqo469j03z] {
    font-size: 0.8125rem;
}

.refresh-slider[b-gqo469j03z] {
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.slider-label[b-gqo469j03z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 0.875rem;
}

.slider-value[b-gqo469j03z] {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.slider-hint[b-gqo469j03z] {
    margin-top: 12px;
    font-size: 0.8125rem;
    line-height: 1.4;
}
/* /Components/Mobile/SmartNav.razor.rz.scp.css */
/* Smart Navigation Component Styles */
/* Dark glass theme matching existing MiDevCompanion aesthetic */

.smart-nav[b-e3i8m3t17i] {
    position: relative;
    width: 100%;
}

/* ============================================================================
   HAMBURGER MODE - Dark Glass Drawer
   ============================================================================ */

.smart-nav-hamburger[b-e3i8m3t17i] {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1100;
    width: 48px;
    height: 48px;
    border: none;
    background: rgba(30, 30, 30, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.smart-nav-hamburger:hover[b-e3i8m3t17i] {
    background: rgba(40, 40, 40, 0.9);
    transform: scale(1.05);
}

.smart-nav-hamburger:active[b-e3i8m3t17i] {
    transform: scale(0.95);
}

.hamburger-icon[b-e3i8m3t17i] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.hamburger-icon span[b-e3i8m3t17i] {
    display: block;
    width: 24px;
    height: 2px;
    background: #e0e0e0;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.smart-nav-drawer-overlay[b-e3i8m3t17i] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1200;
    animation: fadeIn-b-e3i8m3t17i 0.2s ease;
}

.smart-nav-drawer[b-e3i8m3t17i] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
    z-index: 1300;
    padding: 1.5rem;
    overflow-y: auto;
    animation: slideInRight-b-e3i8m3t17i 0.3s ease;
}

.drawer-header[b-e3i8m3t17i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.drawer-header h3[b-e3i8m3t17i] {
    margin: 0;
    color: #e0e0e0;
    font-size: 1.25rem;
    font-weight: 600;
}

.drawer-close[b-e3i8m3t17i] {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    font-size: 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drawer-close:hover[b-e3i8m3t17i] {
    background: rgba(255, 255, 255, 0.2);
}

.drawer-items[b-e3i8m3t17i] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.drawer-items li[b-e3i8m3t17i] {
    margin-bottom: 0.5rem;
}

.drawer-item[b-e3i8m3t17i] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    color: #b0b0b0;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.2s ease;
    position: relative;
}

.drawer-item:hover[b-e3i8m3t17i] {
    background: rgba(255, 255, 255, 0.08);
    color: #e0e0e0;
}

.drawer-item.active[b-e3i8m3t17i] {
    background: rgba(102, 126, 234, 0.2);
    color: #8b9ff5;
    font-weight: 500;
}

.drawer-item.active[b-e3i8m3t17i]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: #8b9ff5;
    border-radius: 0 2px 2px 0;
}

.item-icon[b-e3i8m3t17i] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.item-text[b-e3i8m3t17i] {
    flex: 1;
}

.item-badge[b-e3i8m3t17i] {
    background: #ef4444;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

/* ============================================================================
   TABS MODE - Swipeable Horizontal Scroll
   ============================================================================ */

.smart-nav-tabs[b-e3i8m3t17i] {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.tabs-container[b-e3i8m3t17i] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding: 0.5rem 1rem;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.tabs-container[b-e3i8m3t17i]::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

/* Dragging state */
.tabs-container.dragging[b-e3i8m3t17i] {
    cursor: grabbing;
    scroll-behavior: auto; /* Disable smooth scroll during drag */
}

.tabs-container.dragging .nav-tab[b-e3i8m3t17i] {
    pointer-events: none; /* Prevent accidental clicks during drag */
}

.nav-tab[b-e3i8m3t17i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    color: #b0b0b0;
    text-decoration: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
}

.nav-tab:hover[b-e3i8m3t17i] {
    background: rgba(255, 255, 255, 0.08);
    color: #e0e0e0;
    border-color: rgba(255, 255, 255, 0.2);
}

.nav-tab.active[b-e3i8m3t17i] {
    background: rgba(102, 126, 234, 0.2);
    color: #8b9ff5;
    border-color: rgba(102, 126, 234, 0.4);
    font-weight: 500;
}

.tab-icon[b-e3i8m3t17i] {
    font-size: 1.125rem;
}

.tab-text[b-e3i8m3t17i] {
    font-size: 0.9375rem;
}

.tab-badge[b-e3i8m3t17i] {
    background: #ef4444;
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 8px;
    min-width: 18px;
    text-align: center;
}

/* Fade hint for overflow */
.smart-nav-tabs.has-overflow .tabs-fade-hint[b-e3i8m3t17i] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
    background: linear-gradient(to left, rgba(15, 15, 15, 1), transparent);
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes fadeIn-b-e3i8m3t17i {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInRight-b-e3i8m3t17i {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 640px) {
    .smart-nav-hamburger[b-e3i8m3t17i] {
        top: 0.75rem;
        right: 0.75rem;
    }

    .smart-nav-drawer[b-e3i8m3t17i] {
        width: min(280px, 90vw);
    }

    .nav-tab[b-e3i8m3t17i] {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
}
/* /Components/Mobile/SystemHealthBar.razor.rz.scp.css */
/**
 * SystemHealthBar Component Styles
 * Compact horizontal status indicator
 */

.system-health-bar[b-nlv2ejzpco] {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

.system-health-bar:hover[b-nlv2ejzpco] {
    height: 6px;
    transform: translateY(-1px);
}

.bar-fill[b-nlv2ejzpco] {
    width: 100%;
    height: 100%;
    transition: background-color 0.3s ease;
}

/* Status Colors */
.status-healthy .bar-fill[b-nlv2ejzpco] {
    background: var(--mobile-accent-green);
    box-shadow: 0 0 8px var(--mobile-accent-green);
}

.status-slow .bar-fill[b-nlv2ejzpco] {
    background: var(--mobile-accent-yellow);
    box-shadow: 0 0 8px var(--mobile-accent-yellow);
}

.status-down .bar-fill[b-nlv2ejzpco] {
    background: var(--mobile-accent-red);
    box-shadow: 0 0 8px var(--mobile-accent-red);
    animation: pulse-error-b-nlv2ejzpco 2s ease-in-out infinite;
}

.status-disabled .bar-fill[b-nlv2ejzpco] {
    background: rgba(255, 255, 255, 0.2);
}

@keyframes pulse-error-b-nlv2ejzpco {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .system-health-bar[b-nlv2ejzpco],
    .bar-fill[b-nlv2ejzpco] {
        transition: none !important;
        animation: none !important;
    }
}
/* /Components/MobileOperationCard.razor.rz.scp.css */
.mobile-operation-card[b-m4ptra360k] {
    display: flex;
    gap: 1rem;
    background: white;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

.mobile-operation-card:hover[b-m4ptra360k] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.mobile-operation-card:active[b-m4ptra360k] {
    transform: scale(0.98);
}

/* Status-specific colors */
.mobile-operation-card.status-running[b-m4ptra360k] {
    border-left-color: #3b82f6;
}

.mobile-operation-card.status-completed[b-m4ptra360k] {
    border-left-color: #10b981;
}

.mobile-operation-card.status-failed[b-m4ptra360k] {
    border-left-color: #ef4444;
}

.mobile-operation-card.status-paused[b-m4ptra360k] {
    border-left-color: #f59e0b;
}

.mobile-operation-card.status-queued[b-m4ptra360k] {
    border-left-color: #6b7280;
}

/* Card Icon */
.card-icon[b-m4ptra360k] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
}

/* Card Content */
.card-content[b-m4ptra360k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Header */
.card-header[b-m4ptra360k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.op-type[b-m4ptra360k] {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

.status-chip[b-m4ptra360k] {
    font-size: 0.75rem !important;
    height: 20px !important;
}

/* Stage */
.op-stage[b-m4ptra360k] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: -0.25rem;
}

/* Progress */
.progress-container[b-m4ptra360k] {
    margin: 0.25rem 0;
}

.progress-info[b-m4ptra360k] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.progress-percent[b-m4ptra360k] {
    font-weight: 600;
}

.progress-steps[b-m4ptra360k] {
    opacity: 0.8;
}

/* Footer */
.card-footer[b-m4ptra360k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
}

.op-message[b-m4ptra360k] {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #4b5563;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.op-elapsed[b-m4ptra360k] {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 500;
    white-space: nowrap;
}

/* Animations */
.status-running .card-icon[b-m4ptra360k] {
    animation: pulse-b-m4ptra360k 2s ease-in-out infinite;
}

@keyframes pulse-b-m4ptra360k {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .mobile-operation-card[b-m4ptra360k] {
        background: #1f2937;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .mobile-operation-card:hover[b-m4ptra360k] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    .op-type[b-m4ptra360k] {
        color: #f3f4f6;
    }

    .op-stage[b-m4ptra360k],
    .op-message[b-m4ptra360k] {
        color: #9ca3af;
    }

    .card-footer[b-m4ptra360k] {
        border-top-color: #374151;
    }
}

/* Responsive */
@media (max-width: 640px) {
    .mobile-operation-card[b-m4ptra360k] {
        padding: 0.75rem;
    }

    .card-icon[b-m4ptra360k] {
        min-width: 40px;
        height: 40px;
    }

    .op-type[b-m4ptra360k] {
        font-size: 0.9375rem;
    }

    .op-stage[b-m4ptra360k] {
        font-size: 0.8125rem;
    }
}
/* /Components/MobilePairingQRCode.razor.rz.scp.css */
.pairing-qr-container[b-4ej8l1e3t7] {
    background: #1A1A1A; /* FIX: Dark background */
    border: 1px solid #262626; /* FIX: Dark border */
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.loading-state[b-4ej8l1e3t7],
.error-state[b-4ej8l1e3t7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    text-align: center;
}

.loading-state .spinner[b-4ej8l1e3t7] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #404040; /* FIX: Dark spinner */
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin-b-4ej8l1e3t7 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-4ej8l1e3t7 {
    to { transform: rotate(360deg); }
}

.error-state .icon[b-4ej8l1e3t7] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.error-state p[b-4ej8l1e3t7] {
    margin: 0 0 1rem 0;
    color: #9ca3af; /* FIX: Muted text */
}

.btn-retry[b-4ej8l1e3t7],
.btn-refresh[b-4ej8l1e3t7],
.btn-start[b-4ej8l1e3t7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-retry[b-4ej8l1e3t7] {
    background: #ef4444;
    color: white;
}

.btn-retry:hover[b-4ej8l1e3t7] {
    background: #dc2626;
}

.btn-start[b-4ej8l1e3t7] {
    background: #667eea;
    color: white;
    width: 100%;
}

.btn-start:hover[b-4ej8l1e3t7] {
    background: #5a67d8;
    transform: translateY(-2px);
}

.qr-section[b-4ej8l1e3t7] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.qr-header[b-4ej8l1e3t7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #262626; /* FIX: Dark border */
}

.qr-header h4[b-4ej8l1e3t7] {
    margin: 0;
    font-size: 1.125rem;
    color: #E5E5E5; /* FIX: Light text */
}

.expires-timer[b-4ej8l1e3t7] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15); /* FIX: Transparent background */
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.qr-code-display[b-4ej8l1e3t7] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    border-radius: 0.5rem;
    border: 2px dashed #404040;
    min-height: 400px; /* FIX: Mycket st�rre box f�r att se HELA QR:n */
    min-width: 400px;
}

.qr-code-wrapper[b-4ej8l1e3t7] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 322px; /* FIX: St�rre wrapper (var 220px) */
    height: 313px;
    background: radial-gradient(
        ellipse at center,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.02) 40%,
        rgba(0,0,0,0.25) 100%
    );
    background-color: #0f172a;
    border-radius: 0.5rem;
    padding: 20px; /* FIX: Mer padding (var 10px) */
    box-shadow: 0 4px 12px #5a67d8;
    position: relative;
}



.qr-code-wrapper[b-4ej8l1e3t7]  svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* FIX: Remove any transforms or positions from QR library */
.qr-code-wrapper[b-4ej8l1e3t7]  svg * {
    shape-rendering: crispEdges;
}

.qr-placeholder[b-4ej8l1e3t7] {
    width: 280px; /* FIX: Match wrapper */
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #262626; /* FIX: Dark placeholder */
    border-radius: 0.5rem;
    color: #6b7280;
    font-weight: 600;
    flex-shrink: 0; /* FIX: Prevent shrinking */
}

.pairing-code-display[b-4ej8l1e3t7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(102, 126, 234, 0.1); /* FIX: Transparent blue */
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 0.5rem;
}

.code-label[b-4ej8l1e3t7] {
    font-size: 0.875rem;
    color: #9ca3af; /* FIX: Muted label */
    font-weight: 500;
}

.pairing-code[b-4ej8l1e3t7] {
    border-radius: 0.5rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.5rem;
    color: #667eea; /* FIX: Primary color */
    font-family: monospace;
}

.server-url-display[b-4ej8l1e3t7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: rgba(59, 130, 246, 0.1); /* Blue tint */
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 0.5rem;
}

.url-label[b-4ej8l1e3t7] {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.server-url[b-4ej8l1e3t7] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #60a5fa;
    font-family: 'Courier New', monospace;
    padding: 0.25rem 0.5rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 0.25rem;
}

.pairing-instructions[b-4ej8l1e3t7] {
    padding: 1rem;
    background: #0F0F0F; /* FIX: Dark background */
    border-radius: 0.5rem;
    border-left: 4px solid #667eea;
}

.pairing-instructions ol[b-4ej8l1e3t7] {
    margin: 0;
    padding-left: 1.5rem;
}

.pairing-instructions li[b-4ej8l1e3t7] {
    margin-bottom: 0.5rem;
    color: #D4D4D4; /* FIX: Light text */
    line-height: 1.5;
}

.pairing-instructions strong[b-4ej8l1e3t7] {
    color: #E5E5E5; /* FIX: Brighter emphasis */
}

.paired-status[b-4ej8l1e3t7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(16, 185, 129, 0.15); /* FIX: Transparent green */
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 0.5rem;
    color: #10b981;
    font-weight: 600;
}

.paired-status .icon[b-4ej8l1e3t7] {
    font-size: 1.5rem;
}

.qr-actions[b-4ej8l1e3t7] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #262626; /* FIX: Dark border */
}

.btn-refresh[b-4ej8l1e3t7] {
    flex: 1;
    background: #262626; /* FIX: Dark button */
    color: #D4D4D4;
    border: 1px solid #404040;
}

.btn-refresh:hover[b-4ej8l1e3t7] {
    background: #404040;
}
/* /Components/MobileStatusBadge.razor.rz.scp.css */
.mobile-status-badge[b-l7efe5jrt9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    background: transparent; /* FIX: Always transparent */
    border: 1px solid; /* FIX: Outline style */
    cursor: pointer; /* NEW: Clickable */
    user-select: none; /* NEW: Prevent text selection */
}

.mobile-status-badge.connected[b-l7efe5jrt9] {
    border-color: #10b981; /* FIX: Green outline */
    color: #10b981;
}

.mobile-status-badge.connected .status-icon[b-l7efe5jrt9] {
    color: #10b981;
}

.mobile-status-badge.disconnected[b-l7efe5jrt9] {
    border-color: #404040; /* FIX: Dark gray outline */
    color: #737373;
}

.mobile-status-badge.disconnected .status-icon[b-l7efe5jrt9] {
    color: #737373;
}

.mobile-status-badge .status-text[b-l7efe5jrt9] {
    line-height: 1;
}

.mobile-status-badge:hover[b-l7efe5jrt9] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.mobile-status-badge.connected:hover[b-l7efe5jrt9] {
    background: rgba(16, 185, 129, 0.1);
    border-color: #22c55e; /* Brighter green on hover */
}

.mobile-status-badge.disconnected:hover[b-l7efe5jrt9] {
    background: rgba(64, 64, 64, 0.1);
    border-color: #667eea; /* Blue hint on hover */
}

.mobile-status-badge:active[b-l7efe5jrt9] {
    transform: translateY(0); /* Slight press effect */
}
/* /Components/OperationsProgressCard.razor.rz.scp.css */
.operations-progress-card[b-nr2dvoq7nd] {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    max-height: 600px;
    display: flex;
    flex-direction: column;
}

.card-header[b-nr2dvoq7nd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.card-header h3[b-nr2dvoq7nd] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
}

.connection-status[b-nr2dvoq7nd] {
    font-size: 0.875rem;
    font-weight: 500;
}

.connection-status.connected[b-nr2dvoq7nd] {
    color: #10b981;
}

.connection-status.disconnected[b-nr2dvoq7nd] {
    color: #6b7280;
}

.operations-list[b-nr2dvoq7nd] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.no-operations[b-nr2dvoq7nd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}

.no-operations .icon[b-nr2dvoq7nd] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.no-operations p[b-nr2dvoq7nd] {
    margin: 0;
    font-size: 0.875rem;
}

.operation-item[b-nr2dvoq7nd] {
    background: #f9fafb;
    border-left: 4px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.2s ease;
}

.operation-item:hover[b-nr2dvoq7nd] {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.operation-item.status-running[b-nr2dvoq7nd] {
    border-left-color: #3b82f6;
}

.operation-item.status-completed[b-nr2dvoq7nd] {
    border-left-color: #10b981;
}

.operation-item.status-failed[b-nr2dvoq7nd] {
    border-left-color: #ef4444;
}

.operation-header[b-nr2dvoq7nd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.operation-type-icon[b-nr2dvoq7nd] {
    font-size: 1.25rem;
}

.operation-type[b-nr2dvoq7nd] {
    font-weight: 600;
    color: #374151;
    flex: 1;
}

.operation-status[b-nr2dvoq7nd] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: #e5e7eb;
    color: #6b7280;
}

.status-running .operation-status[b-nr2dvoq7nd] {
    background: #dbeafe;
    color: #1e40af;
}

.status-completed .operation-status[b-nr2dvoq7nd] {
    background: #d1fae5;
    color: #065f46;
}

.status-failed .operation-status[b-nr2dvoq7nd] {
    background: #fee2e2;
    color: #991b1b;
}

.operation-stage[b-nr2dvoq7nd] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
}

.operation-stage .step-count[b-nr2dvoq7nd] {
    color: #9ca3af;
    margin-left: 0.25rem;
}

.progress-bar-container[b-nr2dvoq7nd] {
    position: relative;
    height: 1.5rem;
    background: #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.progress-bar[b-nr2dvoq7nd] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    transition: width 0.3s ease;
    border-radius: 0.5rem;
}

.progress-text[b-nr2dvoq7nd] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
}

.operation-message[b-nr2dvoq7nd] {
    font-size: 0.875rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
}

.severity-info[b-nr2dvoq7nd] {
    background: #eff6ff;
    color: #1e40af;
}

.severity-success[b-nr2dvoq7nd] {
    background: #d1fae5;
    color: #065f46;
}

.severity-warning[b-nr2dvoq7nd] {
    background: #fef3c7;
    color: #92400e;
}

.severity-error[b-nr2dvoq7nd] {
    background: #fee2e2;
    color: #991b1b;
}

.operation-footer[b-nr2dvoq7nd] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #9ca3af;
}

.elapsed-time[b-nr2dvoq7nd] {
    font-weight: 500;
}

.updated-time[b-nr2dvoq7nd] {
    font-style: italic;
}
/* /Components/PipelineCircleProgress.razor.rz.scp.css */
.pipeline-circle-container[b-i54z41tk5j] {
    position: relative;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    aspect-ratio: 1;
}

.pipeline-circle-svg[b-i54z41tk5j] {
    width: 100%;
    height: 100%;
}

.pipeline-center[b-i54z41tk5j] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 60%;
}

.active-step-info[b-i54z41tk5j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.step-title[b-i54z41tk5j] {
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.intent-text[b-i54z41tk5j] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
    opacity: 0.8;
}

.run-summary[b-i54z41tk5j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pipeline-stats[b-i54z41tk5j] {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
    font-size: 0.85rem;
}

.stat[b-i54z41tk5j] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
}

/* Progress arc animation */
.progress-arc[b-i54z41tk5j] {
    transition: stroke-dasharray 0.5s ease-out;
}

/* Step indicator animations */
.step-indicator[b-i54z41tk5j] {
    transition: all 0.3s ease;
}

.step-indicator.active circle[b-i54z41tk5j] {
    filter: drop-shadow(0 0 6px var(--mud-palette-info));
}

.step-indicator.passed circle[b-i54z41tk5j] {
    filter: drop-shadow(0 0 3px var(--mud-palette-success));
}

.step-indicator.failed circle[b-i54z41tk5j] {
    filter: drop-shadow(0 0 3px var(--mud-palette-error));
}

/* Pulse animation for active step */
.pulse[b-i54z41tk5j] {
    animation: pulse-b-i54z41tk5j 1.5s ease-in-out infinite;
}

.pulse-ring[b-i54z41tk5j] {
    animation: pulse-ring-b-i54z41tk5j 1.5s ease-out infinite;
}

@keyframes pulse-b-i54z41tk5j {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes pulse-ring-b-i54z41tk5j {
    0% {
        r: 12;
        opacity: 0.8;
    }
    100% {
        r: 20;
        opacity: 0;
    }
}

/* Spin animation for loading icon */
.spin[b-i54z41tk5j] {
    animation: spin-b-i54z41tk5j 1.5s linear infinite;
}

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

/* Responsive */
@media (max-width: 600px) {
    .pipeline-circle-container[b-i54z41tk5j] {
        max-width: 220px;
    }
    
    .pipeline-stats[b-i54z41tk5j] {
        gap: 8px;
        font-size: 0.75rem;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* MiDevCompanion - Engineering Control Center Layout */

/* === ANIMATED LOGO === */
.app-logo[b-zyafhc5unf] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 10px;
}

.logo-icon[b-zyafhc5unf] {
    color: var(--mud-palette-primary);
    transition: all 0.3s ease;
    z-index: 1;
}

.app-logo.pipeline-active .logo-icon[b-zyafhc5unf] {
    animation: logo-spin-b-zyafhc5unf 3s linear infinite, logo-color-shift-b-zyafhc5unf 2s ease-in-out infinite;
}

.logo-glow[b-zyafhc5unf] {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(91, 164, 201, 0.4) 0%, transparent 70%);
    animation: logo-glow-pulse-b-zyafhc5unf 1.5s ease-in-out infinite;
    z-index: 0;
}

.logo-ring[b-zyafhc5unf] {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(91, 164, 201, 0.3);
    animation: logo-ring-expand-b-zyafhc5unf 2s ease-out infinite;
    z-index: 0;
}

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

@keyframes logo-color-shift-b-zyafhc5unf {
    0%, 100% { color: #5BA4C9; }
    25% { color: #8B5CF6; }
    50% { color: #22C55E; }
    75% { color: #F59E0B; }
}

@keyframes logo-glow-pulse-b-zyafhc5unf {
    0%, 100% { 
        opacity: 0.6;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes logo-ring-expand-b-zyafhc5unf {
    0% { 
        transform: scale(0.8);
        opacity: 0.8;
    }
    100% { 
        transform: scale(1.5);
        opacity: 0;
    }
}

.running-badge[b-zyafhc5unf] {
    margin-left: auto;
    font-size: 0.5rem !important;
    height: 18px !important;
    animation: badge-pulse-b-zyafhc5unf 1s ease-in-out infinite;
}

@keyframes badge-pulse-b-zyafhc5unf {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* === BASE LAYOUT === */
.midev-layout[b-zyafhc5unf] {
    display: grid;
    grid-template-columns: 220px 1fr 320px;
    min-height: 100vh;
    background-color: var(--mud-palette-background);
}

/* === LEFT SIDEBAR === */
.midev-sidebar-left[b-zyafhc5unf] {
    background-color: #141414;
    border-right: 1px solid #262626;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow-y: auto;
}

.sidebar-header[b-zyafhc5unf] {
    display: flex;
    align-items: center;
    padding: 16px 16px 20px 16px;
    border-bottom: 1px solid #262626;
}

.app-title[b-zyafhc5unf] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #E5E5E5;
}

/* Context Section */
.context-section[b-zyafhc5unf] {
    padding: 16px;
}

.context-label[b-zyafhc5unf] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #737373;
    margin-bottom: 6px;
    margin-top: 12px;
}

.context-label:first-child[b-zyafhc5unf] {
    margin-top: 0;
}

.context-select[b-zyafhc5unf] {
    margin-bottom: 4px;
}

.context-select[b-zyafhc5unf]  .mud-input {
    font-size: 0.8125rem;
    background-color: #1A1A1A;
}

.context-select[b-zyafhc5unf]  .mud-input-outlined-border {
    border-color: #262626;
}

/* Environment Badges */
.environment-badges[b-zyafhc5unf] {
    padding: 0 16px 16px 16px;
}

.badge-row[b-zyafhc5unf] {
    display: flex;
    gap: 6px;
}

.env-badge[b-zyafhc5unf] {
    font-size: 0.625rem !important;
    height: 22px !important;
    font-weight: 600;
}

/* Navigation */
.sidebar-nav[b-zyafhc5unf] {
    flex: 1;
    padding: 8px;
    border-top: 1px solid #262626;
}

.nav-menu[b-zyafhc5unf]  .mud-nav-link {
    font-size: 0.8125rem;
    color: #A3A3A3;
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 2px;
}

.nav-menu[b-zyafhc5unf]  .mud-nav-link:hover {
    background-color: rgba(91, 164, 201, 0.08);
    color: #E5E5E5;
}

.nav-menu[b-zyafhc5unf]  .mud-nav-link.active {
    background-color: rgba(91, 164, 201, 0.15);
    color: #5BA4C9;
}

.nav-menu[b-zyafhc5unf]  .mud-nav-link .mud-icon-root {
    margin-right: 10px;
    font-size: 1.125rem;
}

/* User Section */
.user-section[b-zyafhc5unf] {
    padding: 16px;
    margin-top: auto;
}

.user-info[b-zyafhc5unf] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-name[b-zyafhc5unf] {
    flex: 1;
    font-size: 0.8125rem;
    color: #A3A3A3;
}

/* === CENTER WORKSPACE === */
.midev-workspace[b-zyafhc5unf] {
    background-color: #0F0F0F;
    padding: 24px 32px;
    overflow-y: auto;
    min-height: 100vh;
}

/* Fix MudGrid alignment in workspace */
.midev-workspace[b-zyafhc5unf]  .mud-grid {
    align-items: flex-start !important;
    align-content: flex-start !important;
}

.midev-workspace[b-zyafhc5unf]  .mud-grid-item {
    align-self: flex-start !important;
}

/* === RIGHT SIDEBAR - Companion Panel === */
.midev-sidebar-right[b-zyafhc5unf] {
    background-color: #141414;
    border-left: 1px solid #262626;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Companion Header */
.companion-header[b-zyafhc5unf] {
    padding: 16px 20px;
    border-bottom: 1px solid #262626;
}

.companion-title[b-zyafhc5unf] {
    color: #E5E5E5 !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    margin-bottom: 2px;
}

.companion-subtitle[b-zyafhc5unf] {
    color: #5BA4C9 !important;
    font-size: 0.75rem !important;
}

.companion-subtitle-idle[b-zyafhc5unf] {
    color: #525252 !important;
    font-size: 0.75rem !important;
}

/* Companion Sections */
.companion-section[b-zyafhc5unf] {
    padding: 16px 20px;
    border-bottom: 1px solid #1F1F1F;
}

.section-header[b-zyafhc5unf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-header .section-label[b-zyafhc5unf] {
    margin-bottom: 0;
}

.section-action[b-zyafhc5unf] {
    color: #525252 !important;
}

.section-action:hover[b-zyafhc5unf] {
    color: #5BA4C9 !important;
}

.section-label[b-zyafhc5unf] {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #525252;
    margin-bottom: 12px;
}

.subsection-label[b-zyafhc5unf] {
    display: block;
    font-size: 0.5625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #404040;
    margin: 12px 0 8px 0;
}

/* Pipeline Info */
.pipeline-info[b-zyafhc5unf] {
    background-color: #1A1A1A;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.pipeline-info:hover[b-zyafhc5unf] {
    background-color: #222222;
}

.pipeline-title-row[b-zyafhc5unf] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.pipeline-title[b-zyafhc5unf] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #E5E5E5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-meta[b-zyafhc5unf] {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: #525252;
}

.pipeline-id[b-zyafhc5unf] {
    font-family: 'SF Mono', 'Consolas', monospace;
}

/* Active Agent */
.active-agent[b-zyafhc5unf] {
    margin-top: 12px;
}

.agent-card[b-zyafhc5unf] {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(91, 164, 201, 0.08);
    border: 1px solid rgba(91, 164, 201, 0.2);
    border-radius: 6px;
    padding: 10px 12px;
}

.agent-info[b-zyafhc5unf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agent-name[b-zyafhc5unf] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #E5E5E5;
}

.agent-model[b-zyafhc5unf] {
    font-size: 0.6875rem;
    color: #5BA4C9;
    font-family: 'SF Mono', 'Consolas', monospace;
}

/* Checklist Steps */
.checklist-steps[b-zyafhc5unf] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checklist-item[b-zyafhc5unf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.checklist-item:hover[b-zyafhc5unf] {
    background-color: #1A1A1A;
}

.checklist-item.in-progress[b-zyafhc5unf] {
    background-color: rgba(91, 164, 201, 0.08);
}

.checklist-title[b-zyafhc5unf] {
    font-size: 0.75rem;
    color: #A3A3A3;
}

.checklist-item.completed .checklist-title[b-zyafhc5unf] {
    color: #22C55E;
}

.checklist-item.in-progress .checklist-title[b-zyafhc5unf] {
    color: #5BA4C9;
}

.checklist-item.failed .checklist-title[b-zyafhc5unf] {
    color: #B45454;
}

.checklist-more[b-zyafhc5unf] {
    font-size: 0.6875rem;
    color: #525252;
    padding: 4px 8px;
    cursor: pointer;
}

.checklist-more:hover[b-zyafhc5unf] {
    color: #5BA4C9;
}

/* === PIPELINE SECTION - Live Timeline === */
.pipeline-section[b-zyafhc5unf] {
    padding: 12px 20px 16px 20px;
}

.pipeline-header[b-zyafhc5unf] {
    background-color: #1A1A1A;
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    margin-bottom: 12px;
}

.pipeline-header:hover[b-zyafhc5unf] {
    background-color: #222222;
}

.pipeline-title-row[b-zyafhc5unf] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.pipeline-title[b-zyafhc5unf] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #E5E5E5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-meta[b-zyafhc5unf] {
    display: flex;
    justify-content: flex-end;
    font-size: 0.6875rem;
    color: #525252;
}

/* Agent Section */
.agent-section[b-zyafhc5unf] {
    margin-bottom: 12px;
}

.agent-header[b-zyafhc5unf] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.agent-icon[b-zyafhc5unf] {
    font-size: 0.75rem;
}

.agent-label[b-zyafhc5unf] {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #525252;
}

.agent-card[b-zyafhc5unf] {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #1A1A1A;
    border-radius: 6px;
    padding: 10px 12px;
    border: 1px solid #262626;
    transition: all 0.2s ease;
}

.agent-card.processing[b-zyafhc5unf] {
    border-color: rgba(91, 164, 201, 0.4);
    background-color: rgba(91, 164, 201, 0.05);
}

.agent-avatar[b-zyafhc5unf] {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(91, 164, 201, 0.15);
    border-radius: 8px;
    color: #5BA4C9;
}

.agent-pulse[b-zyafhc5unf] {
    position: absolute;
    inset: -2px;
    border-radius: 10px;
    border: 2px solid #5BA4C9;
    animation: pulse-ring-b-zyafhc5unf 1.5s ease-out infinite;
}

@keyframes pulse-ring-b-zyafhc5unf {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.3); opacity: 0; }
}

.agent-details[b-zyafhc5unf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.agent-name[b-zyafhc5unf] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #E5E5E5;
}

.agent-model[b-zyafhc5unf] {
    font-size: 0.625rem;
    color: #5BA4C9;
    font-family: 'SF Mono', 'Consolas', monospace;
}

.agent-role[b-zyafhc5unf] {
    font-size: 0.625rem;
    color: #737373;
}

/* Agent Intent */
.agent-intent[b-zyafhc5unf] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    background-color: rgba(139, 92, 246, 0.08);
    border-radius: 4px;
    border-left: 2px solid #8B5CF6;
}

.intent-icon[b-zyafhc5unf] {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.intent-text[b-zyafhc5unf] {
    font-size: 0.75rem;
    color: #A3A3A3;
    line-height: 1.4;
    font-style: italic;
}

/* Tempo Section */
.tempo-section[b-zyafhc5unf] {
    margin-bottom: 12px;
}

.tempo-header[b-zyafhc5unf] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.tempo-icon[b-zyafhc5unf] {
    font-size: 0.75rem;
}

.tempo-label[b-zyafhc5unf] {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #525252;
    flex: 1;
}

.tempo-info[b-zyafhc5unf] {
    display: flex;
    gap: 12px;
    padding: 8px 12px;
    background-color: #1A1A1A;
    border-radius: 6px;
}

.tempo-current[b-zyafhc5unf],
.tempo-expected[b-zyafhc5unf],
.tempo-total[b-zyafhc5unf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.tempo-current[b-zyafhc5unf] {
    flex: 1;
}

.tempo-value[b-zyafhc5unf] {
    font-size: 1rem;
    font-weight: 600;
    color: #5BA4C9;
    font-family: 'SF Mono', 'Consolas', monospace;
}

.tempo-value-small[b-zyafhc5unf] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #737373;
    font-family: 'SF Mono', 'Consolas', monospace;
}

.tempo-desc[b-zyafhc5unf] {
    font-size: 0.5625rem;
    color: #525252;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tempo-warning[b-zyafhc5unf] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    background-color: rgba(245, 158, 11, 0.1);
    border-radius: 4px;
    font-size: 0.6875rem;
    color: #F59E0B;
}

.tempo-warning .mud-icon-root[b-zyafhc5unf] {
    font-size: 0.875rem !important;
}

/* Timeline Section */
.timeline-section[b-zyafhc5unf] {
    margin-bottom: 8px;
}

.timeline-header[b-zyafhc5unf] {
    margin-bottom: 8px;
}

.timeline-label[b-zyafhc5unf] {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #525252;
}

.timeline-steps[b-zyafhc5unf] {
    display: flex;
    flex-direction: column;
}

.timeline-step[b-zyafhc5unf] {
    display: flex;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-radius: 4px;
    padding: 2px 4px;
}

.timeline-step:hover[b-zyafhc5unf] {
    background-color: rgba(255, 255, 255, 0.03);
}

.timeline-connector[b-zyafhc5unf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24px;
    margin-right: 8px;
}

.connector-line[b-zyafhc5unf] {
    width: 2px;
    flex: 1;
    background-color: #262626;
    min-height: 8px;
}

.connector-line.hidden[b-zyafhc5unf] {
    visibility: hidden;
}

.step-node[b-zyafhc5unf] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
    position: relative;
    flex-shrink: 0;
}

.step-node.node-pending[b-zyafhc5unf] {
    background-color: #262626;
    color: #525252;
}

.step-node.node-active[b-zyafhc5unf] {
    background-color: #5BA4C9;
    color: white;
}

.step-node.node-completed[b-zyafhc5unf] {
    background-color: #22C55E;
    color: white;
}

.step-node.node-failed[b-zyafhc5unf] {
    background-color: #EF4444;
    color: white;
}

.step-node .mud-icon-root[b-zyafhc5unf] {
    font-size: 0.75rem !important;
}

.node-pulse[b-zyafhc5unf] {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid #5BA4C9;
    animation: pulse-ring-b-zyafhc5unf 1.5s ease-out infinite;
}

.step-number[b-zyafhc5unf] {
    font-size: 0.5625rem;
}

.step-content[b-zyafhc5unf] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    min-width: 0;
}

.step-title[b-zyafhc5unf] {
    font-size: 0.75rem;
    color: #A3A3A3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-step.active .step-title[b-zyafhc5unf] {
    color: #5BA4C9;
    font-weight: 500;
}

.timeline-step.completed .step-title[b-zyafhc5unf] {
    color: #22C55E;
}

.timeline-step.failed .step-title[b-zyafhc5unf] {
    color: #EF4444;
}

.step-duration[b-zyafhc5unf] {
    font-size: 0.625rem;
    color: #5BA4C9;
    font-family: 'SF Mono', 'Consolas', monospace;
    flex-shrink: 0;
    margin-left: 8px;
}

.step-duration.completed[b-zyafhc5unf] {
    color: #525252;
}

.timeline-more[b-zyafhc5unf] {
    font-size: 0.6875rem;
    color: #5BA4C9;
    text-align: center;
    padding: 8px;
    cursor: pointer;
    margin-top: 4px;
}

.timeline-more:hover[b-zyafhc5unf] {
    color: #7DBDE0;
}

/* No Pipeline State */
.no-pipeline[b-zyafhc5unf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px;
    text-align: center;
}

.no-pipeline-icon[b-zyafhc5unf] {
    color: #262626 !important;
    margin-bottom: 12px;
}

.no-pipeline-text[b-zyafhc5unf] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #525252;
    margin-bottom: 4px;
}

.no-pipeline-hint[b-zyafhc5unf] {
    font-size: 0.75rem;
    color: #404040;
}

/* Decisions */
.decisions-list[b-zyafhc5unf] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.decision-card[b-zyafhc5unf] {
    background-color: #1A1A1A;
    border-radius: 6px;
    padding: 12px;
    border-left: 3px solid #8B5CF6;
    transition: all 0.15s ease;
}

.decision-card:hover[b-zyafhc5unf] {
    background-color: #222222;
}

.decision-card.decision-success[b-zyafhc5unf] {
    border-left-color: #22C55E;
}

.decision-card.decision-failed[b-zyafhc5unf] {
    border-left-color: #B45454;
}

/* Decision Header */
.decision-header[b-zyafhc5unf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 8px;
}

.decision-title-row[b-zyafhc5unf] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.decision-indicator[b-zyafhc5unf] {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.decision-title[b-zyafhc5unf] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #E5E5E5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Confidence Badge */
.decision-confidence[b-zyafhc5unf] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.decision-confidence.confidence-high[b-zyafhc5unf] {
    background-color: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}

.decision-confidence.confidence-medium[b-zyafhc5unf] {
    background-color: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.decision-confidence.confidence-low[b-zyafhc5unf] {
    background-color: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

.decision-confidence .mud-icon-root[b-zyafhc5unf] {
    font-size: 0.75rem !important;
}

/* Decision Trigger */
.decision-trigger[b-zyafhc5unf] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background-color: #0F0F0F;
    border-radius: 4px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.decision-trigger:hover[b-zyafhc5unf] {
    background-color: #171717;
}

.trigger-icon[b-zyafhc5unf] {
    font-size: 0.6875rem;
    flex-shrink: 0;
}

.trigger-type[b-zyafhc5unf] {
    font-size: 0.625rem;
    font-weight: 600;
    color: #8B5CF6;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.trigger-ref[b-zyafhc5unf] {
    font-size: 0.6875rem;
    color: #737373;
    font-family: 'SF Mono', 'Consolas', monospace;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trigger-link[b-zyafhc5unf] {
    color: #525252 !important;
    font-size: 0.75rem !important;
    flex-shrink: 0;
}

.trigger-link:hover[b-zyafhc5unf] {
    color: #8B5CF6 !important;
}

/* Decision Rationale */
.decision-rationale[b-zyafhc5unf] {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.rationale-icon[b-zyafhc5unf] {
    font-size: 0.6875rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.rationale-text[b-zyafhc5unf] {
    font-size: 0.75rem;
    color: #A3A3A3;
    margin: 0;
    line-height: 1.4;
    flex: 1;
}

/* Decision Footer */
.decision-footer[b-zyafhc5unf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid #262626;
}

.decision-meta[b-zyafhc5unf] {
    display: flex;
    gap: 12px;
}

.meta-time[b-zyafhc5unf],
.meta-agent[b-zyafhc5unf] {
    font-size: 0.625rem;
    color: #525252;
}

.review-btn[b-zyafhc5unf] {
    padding: 2px !important;
}

.review-btn .mud-icon-root[b-zyafhc5unf] {
    font-size: 0.875rem !important;
}

/* Decisions More Link */
.decisions-more[b-zyafhc5unf] {
    font-size: 0.6875rem;
    color: #5BA4C9;
    text-align: center;
    padding: 8px;
    cursor: pointer;
    transition: color 0.15s ease;
}

.decisions-more:hover[b-zyafhc5unf] {
    color: #7DBDE0;
}

/* No Decisions State */
.no-items-message[b-zyafhc5unf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #404040;
    padding: 16px;
}

.no-decisions-icon[b-zyafhc5unf] {
    font-size: 1rem;
}

/* === INSIGHTS SECTION - Three Level Warnings === */
.insights-section[b-zyafhc5unf] {
    padding: 12px 20px 16px 20px;
}

.insight-group[b-zyafhc5unf] {
    margin-bottom: 12px;
}

.insight-group:last-child[b-zyafhc5unf] {
    margin-bottom: 0;
}

.insight-header[b-zyafhc5unf] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 4px 0;
}

.insight-indicator[b-zyafhc5unf] {
    font-size: 0.75rem;
}

.insight-label[b-zyafhc5unf] {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    flex: 1;
}

.insight-count[b-zyafhc5unf] {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* ?? BLOCKING */
.insight-header.blocking .insight-label[b-zyafhc5unf] {
    color: #EF4444;
}

.insight-header.blocking .insight-count[b-zyafhc5unf] {
    background-color: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

.insight-card.blocking[b-zyafhc5unf] {
    background-color: rgba(239, 68, 68, 0.08);
    border-left: 3px solid #EF4444;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 6px;
}

.insight-card.blocking .insight-type[b-zyafhc5unf] {
    color: #EF4444;
}

/* ?? RISK */
.insight-header.risk .insight-label[b-zyafhc5unf] {
    color: #F59E0B;
}

.insight-header.risk .insight-count[b-zyafhc5unf] {
    background-color: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.insight-card.risk[b-zyafhc5unf] {
    background-color: rgba(245, 158, 11, 0.08);
    border-left: 3px solid #F59E0B;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 6px;
}

.insight-card.risk .insight-type[b-zyafhc5unf] {
    color: #F59E0B;
}

/* ?? OPPORTUNITY */
.insight-header.opportunity .insight-label[b-zyafhc5unf] {
    color: #3B82F6;
}

.insight-header.opportunity .insight-count[b-zyafhc5unf] {
    background-color: rgba(59, 130, 246, 0.2);
    color: #3B82F6;
}

.insight-card.opportunity[b-zyafhc5unf] {
    background-color: rgba(59, 130, 246, 0.06);
    border-left: 3px solid #3B82F6;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 6px;
}

.insight-card.opportunity .insight-type[b-zyafhc5unf] {
    color: #3B82F6;
}

/* Insight Card Content */
.insight-content[b-zyafhc5unf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.insight-type[b-zyafhc5unf] {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.insight-message[b-zyafhc5unf] {
    font-size: 0.75rem;
    color: #D4D4D4;
    margin: 0;
    line-height: 1.4;
}

.insight-location[b-zyafhc5unf] {
    font-size: 0.625rem;
    color: #525252;
    font-family: 'SF Mono', 'Consolas', monospace;
}

.insight-suggestion[b-zyafhc5unf] {
    font-size: 0.6875rem;
    color: #6B7280;
    font-style: italic;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed #262626;
}

.no-insights[b-zyafhc5unf] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #525252;
    font-size: 0.75rem;
    padding: 12px 8px;
    background-color: rgba(34, 197, 94, 0.05);
    border-radius: 4px;
}

/* Directive Input */
.directive-input[b-zyafhc5unf] {
    margin-top: auto;
    padding: 16px 20px;
    border-top: 1px solid #262626;
}

.directive-context[b-zyafhc5unf] {
    margin-bottom: 8px;
}

.directive-target[b-zyafhc5unf] {
    font-size: 0.625rem !important;
    height: 20px !important;
}

.directive-field[b-zyafhc5unf]  .mud-input {
    font-size: 0.8125rem;
    background-color: #1A1A1A;
}

.directive-field[b-zyafhc5unf]  .mud-input-outlined-border {
    border-color: #262626;
}

.directive-field[b-zyafhc5unf]  .mud-input-slot {
    color: #737373;
}

.directive-field[b-zyafhc5unf]  .mud-input-adornment-end {
    cursor: pointer;
}

.directive-field[b-zyafhc5unf]  .mud-input-adornment-end:hover {
    color: #5BA4C9;
}

.directive-hint[b-zyafhc5unf] {
    font-size: 0.625rem;
    color: #404040;
    margin-top: 6px;
}

/* === RESPONSIVE === */
@media (max-width: 1400px) {
    .midev-layout[b-zyafhc5unf] {
        grid-template-columns: 200px 1fr 280px;
    }
}

@media (max-width: 1200px) {
    .midev-sidebar-right[b-zyafhc5unf] {
        display: none;
    }
    .midev-layout[b-zyafhc5unf] {
        grid-template-columns: 200px 1fr;
    }
}

@media (max-width: 768px) {
    .midev-sidebar-left[b-zyafhc5unf] {
        display: none;
    }
    .midev-layout[b-zyafhc5unf] {
        grid-template-columns: 1fr;
    }
}
/* /Layout/MobileShell.razor.rz.scp.css */
/* Mobile Shell Layout Styles */
/* Dark glass theme for mobile companion */

.mobile-shell[b-0prd41gklp] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
}

/* ============================================================================
   HEADER
   ============================================================================ */

.mobile-header[b-0prd41gklp] {
    position: sticky;
    top: 0;
    z-index: 1400; /* Above all MudBlazor overlays */
    padding: 0.75rem 1rem;
    position: relative;
    min-height: 60px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Banner Background (100% width) */
.header-banner-background[b-0prd41gklp] {
    position: absolute;
    inset: 0;
    background-image: url('/mobilecompanion/mobilecompanion-topbanner-dark.png');
    background-size: cover; /* Changed from contain to cover */
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

/* Light mode banner */
@media (prefers-color-scheme: light) {
    .header-banner-background[b-0prd41gklp] {
        background-image: url('/mobilecompanion/mobilecompanion-topbanner-light.png');
    }
}

/* Header content overlay on top of banner */
.header-content[b-0prd41gklp] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 1;
}

/* Header Actions */
.header-actions-left[b-0prd41gklp],
.header-actions-right[b-0prd41gklp] {
    display: flex;
    align-items: center;
    min-width: 44px; /* Touch-friendly size */
}

.header-actions-left[b-0prd41gklp] {
    justify-content: flex-start;
}

.header-actions-right[b-0prd41gklp] {
    justify-content: flex-end;
}

.header-spacer[b-0prd41gklp] {
    flex: 1;
}

/* Close Button */
.header-close-btn[b-0prd41gklp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #e0e0e0;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.header-close-btn:hover[b-0prd41gklp] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.header-close-btn:active[b-0prd41gklp] {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.2);
}

/* Connection Indicator */
.connection-indicator[b-0prd41gklp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.8125rem;
}

.indicator-dot[b-0prd41gklp] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse-b-0prd41gklp 2s ease-in-out infinite;
}

.connection-indicator.connected .indicator-dot[b-0prd41gklp] {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.connection-indicator.connecting .indicator-dot[b-0prd41gklp] {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.connection-indicator.disconnected .indicator-dot[b-0prd41gklp] {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
    animation: none;
}

@keyframes pulse-b-0prd41gklp {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ============================================================================
   NAVIGATION
   ============================================================================ */

.mobile-navigation[b-0prd41gklp] {
    background: rgba(15, 15, 15, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 60px; /* Below header */
    z-index: 1399; /* Just below header but above everything else */
}

/* ============================================================================
   CONTENT
   ============================================================================ */

.mobile-content[b-0prd41gklp] {
    flex: 1;
    padding: 1.5rem;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 640px) {
    .mobile-header[b-0prd41gklp] {
        padding: 0.625rem 0.75rem;
        min-height: 54px;
    }

    .header-close-btn[b-0prd41gklp] {
        width: 32px;
        height: 32px;
        font-size: 1.125rem;
    }

    .header-actions-left[b-0prd41gklp],
    .header-actions-right[b-0prd41gklp] {
        min-width: 36px;
    }

    .mobile-content[b-0prd41gklp] {
        padding: 1rem;
    }

    .mobile-navigation[b-0prd41gklp] {
        top: 54px; /* Adjusted for smaller header */
    }
}

@media (min-width: 1024px) {
    /* On larger screens, give more breathing room */
    .mobile-content[b-0prd41gklp] {
        padding: 2rem;
    }
}

/* ============================================================================
   UTILITY: Prevent bounce scroll on iOS
   ============================================================================ */

.mobile-shell[b-0prd41gklp] {
    overscroll-behavior: none;
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-twlbm0ykim] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-twlbm0ykim] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-twlbm0ykim] {
    font-size: 1.1rem;
}

.bi[b-twlbm0ykim] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-twlbm0ykim] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-twlbm0ykim] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-twlbm0ykim] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-twlbm0ykim] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-twlbm0ykim] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-twlbm0ykim] {
        padding-bottom: 1rem;
    }

    .nav-item[b-twlbm0ykim]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-twlbm0ykim]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-twlbm0ykim]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-twlbm0ykim] {
        display: none;
    }

    .collapse[b-twlbm0ykim] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
    
    .nav-scrollable[b-twlbm0ykim] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Agents.razor.rz.scp.css */
.agents-page[b-n0jhgbcped] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-n0jhgbcped] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.header-left h5[b-n0jhgbcped] {
    margin-bottom: 4px;
}

.header-actions[b-n0jhgbcped] {
    display: flex;
    gap: 12px;
}

/* Summary Cards */
.summary-cards[b-n0jhgbcped] {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card[b-n0jhgbcped] {
    flex: 1;
    padding: 16px 20px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    text-align: center;
}

.summary-value[b-n0jhgbcped] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.summary-value.active[b-n0jhgbcped] {
    color: var(--mud-palette-success);
}

.summary-label[b-n0jhgbcped] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Tabs */
.agents-tabs[b-n0jhgbcped] {
    background-color: var(--mud-palette-surface);
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
}

/* Agents Grid */
.agents-grid[b-n0jhgbcped] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    padding: 16px;
}

.agent-card[b-n0jhgbcped] {
    background-color: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s ease;
}

.agent-card:hover[b-n0jhgbcped] {
    border-color: var(--mud-palette-primary);
}

.agent-card.inactive[b-n0jhgbcped] {
    opacity: 0.6;
}

.agent-card.system[b-n0jhgbcped] {
    border-left: 3px solid var(--mud-palette-info);
}

.agent-header[b-n0jhgbcped] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.agent-icon[b-n0jhgbcped] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(91, 164, 201, 0.15);
    color: var(--mud-palette-primary);
}

.agent-icon.role-architect[b-n0jhgbcped] {
    background-color: rgba(139, 92, 246, 0.15);
    color: #8B5CF6;
}

.agent-icon.role-security[b-n0jhgbcped] {
    background-color: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

.agent-icon.role-database[b-n0jhgbcped] {
    background-color: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}

.agent-info[b-n0jhgbcped] {
    flex: 1;
    min-width: 0;
}

.agent-name[b-n0jhgbcped] {
    font-weight: 600;
    margin-bottom: 4px;
}

.agent-badges[b-n0jhgbcped] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.role-chip[b-n0jhgbcped] {
    font-size: 0.75rem !important;
}

.agent-description[b-n0jhgbcped] {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 12px;
    font-size: 0.875rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.agent-details[b-n0jhgbcped] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background-color: var(--mud-palette-surface);
    border-radius: 6px;
    margin-bottom: 12px;
}

.detail-row[b-n0jhgbcped] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
}

.detail-label[b-n0jhgbcped] {
    color: var(--mud-palette-text-secondary);
}

.detail-value[b-n0jhgbcped] {
    color: var(--mud-palette-text-primary);
}

.detail-value.model[b-n0jhgbcped] {
    font-family: 'SF Mono', 'Consolas', monospace;
    color: var(--mud-palette-primary);
    font-size: 0.75rem;
}

.agent-tags[b-n0jhgbcped] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.tag-chip[b-n0jhgbcped] {
    font-size: 0.6875rem !important;
    height: 20px !important;
}

.agent-guardrails[b-n0jhgbcped] {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.guardrail-icon[b-n0jhgbcped] {
    color: var(--mud-palette-text-disabled);
}

.guardrail-icon.active[b-n0jhgbcped] {
    color: var(--mud-palette-success);
}

.guardrail-icon.security[b-n0jhgbcped] {
    color: var(--mud-palette-warning);
}

/* Models Table */
.models-section[b-n0jhgbcped] {
    padding: 16px;
}

.models-table[b-n0jhgbcped] {
    background: transparent !important;
}

.model-name[b-n0jhgbcped] {
    display: flex;
    align-items: center;
    font-family: 'SF Mono', 'Consolas', monospace;
}

.capabilities[b-n0jhgbcped] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.more-caps[b-n0jhgbcped] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.role-chip-small[b-n0jhgbcped] {
    font-size: 0.625rem !important;
    height: 18px !important;
}

.response-time[b-n0jhgbcped] {
    font-family: 'SF Mono', 'Consolas', monospace;
    color: var(--mud-palette-success);
}

.no-data[b-n0jhgbcped] {
    color: var(--mud-palette-text-disabled);
}

/* Empty State */
.empty-state[b-n0jhgbcped] {
    text-align: center;
    padding: 48px 24px;
    background-color: var(--mud-palette-background);
    border-radius: 8px;
    margin: 24px;
}

.empty-icon[b-n0jhgbcped] {
    color: var(--mud-palette-text-disabled) !important;
    margin-bottom: 16px;
}

.empty-actions[b-n0jhgbcped] {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Loading */
.loading-container[b-n0jhgbcped] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 48px;
}

/* Dialog */
.create-mode-tabs[b-n0jhgbcped] {
    margin-bottom: 16px;
}

.quick-create-section[b-n0jhgbcped] {
    padding: 16px 0;
}

.agent-form[b-n0jhgbcped] {
    padding-top: 8px;
}

.guardrails-grid[b-n0jhgbcped] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-n0jhgbcped] {
        flex-direction: column;
        gap: 16px;
    }
    
    .header-actions[b-n0jhgbcped] {
        width: 100%;
    }
    
    .summary-cards[b-n0jhgbcped] {
        flex-wrap: wrap;
    }
    
    .summary-card[b-n0jhgbcped] {
        flex: 1 1 calc(50% - 8px);
        min-width: 120px;
    }
    
    .agents-grid[b-n0jhgbcped] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Figma.razor.rz.scp.css */
.function-linked[b-iogx7681ar] {
    position: relative;
    border: 2px solid var(--mud-palette-info);
    box-shadow: 0 0 8px var(--mud-palette-info-lighten);
    transition: all 0.3s ease;
}

.function-linked:hover[b-iogx7681ar] {
    box-shadow: 0 0 12px var(--mud-palette-info);
    transform: translateY(-2px);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .function-linked[b-iogx7681ar] {
        border-color: var(--mud-palette-info-darken);
        box-shadow: 0 0 8px var(--mud-palette-info-darken);
    }
    
    .function-linked:hover[b-iogx7681ar] {
        box-shadow: 0 0 12px var(--mud-palette-info);
    }
}
/* /Pages/MobileApprovals.razor.rz.scp.css */
/* /Pages/MobileDashboard.razor.rz.scp.css */
/* Mobile Dashboard - Dark Glass Theme */
/* Consistent with mobile-design-system.css */

.mobile-dashboard[b-fgzrmihhk1] {
    min-height: 100vh;
    background: transparent; /* Let MobileShell background show */
    padding: 0;
}

.dashboard-header[b-fgzrmihhk1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.dashboard-header h1[b-fgzrmihhk1] {
    margin: 0;
    font-size: 1.5rem;
    color: #e0e0e0;
}

.connection-badge[b-fgzrmihhk1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.connection-badge.connected[b-fgzrmihhk1] {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.connection-badge.disconnected[b-fgzrmihhk1] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.auth-required[b-fgzrmihhk1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1rem;
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.auth-required h3[b-fgzrmihhk1] {
    margin: 1rem 0 0.5rem 0;
    font-size: 1.5rem;
    color: #e0e0e0;
}

.auth-required p[b-fgzrmihhk1] {
    margin: 0 0 1.5rem 0;
    color: #94a3b8;
}

.btn-pair[b-fgzrmihhk1] {
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-pair:hover[b-fgzrmihhk1] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-pair:active[b-fgzrmihhk1] {
    transform: translateY(0);
}

.section[b-fgzrmihhk1] {
    margin-bottom: 1.5rem;
}

.section h2[b-fgzrmihhk1] {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #e0e0e0;
}

.empty-state[b-fgzrmihhk1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    color: #64748b;
}

.empty-state p[b-fgzrmihhk1] {
    margin-top: 0.5rem;
}

.operations-list[b-fgzrmihhk1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.operation-card[b-fgzrmihhk1] {
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.operation-card:hover[b-fgzrmihhk1] {
    background: rgba(40, 40, 40, 0.7);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.operation-card:active[b-fgzrmihhk1] {
    transform: scale(0.98);
}

.op-header[b-fgzrmihhk1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.op-icon[b-fgzrmihhk1] {
    font-size: 1.5rem;
}

.op-info[b-fgzrmihhk1] {
    flex: 1;
}

.op-type[b-fgzrmihhk1] {
    font-weight: 600;
    color: #e0e0e0;
}

.op-stage[b-fgzrmihhk1] {
    font-size: 0.875rem;
    color: #94a3b8;
}

.op-status[b-fgzrmihhk1] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.3);
}

.status-running .op-status[b-fgzrmihhk1] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

.status-completed .op-status[b-fgzrmihhk1] {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}

.status-failed .op-status[b-fgzrmihhk1] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

.op-progress[b-fgzrmihhk1] {
    position: relative;
    height: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.progress-bar[b-fgzrmihhk1] {
    height: 100%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    transition: width 0.3s ease;
}

.progress-text[b-fgzrmihhk1] {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    font-size: 0.625rem;
    font-weight: 600;
    color: #e0e0e0;
}

.op-message[b-fgzrmihhk1] {
    font-size: 0.875rem;
    color: #94a3b8;
}

.health-summary[b-fgzrmihhk1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.75rem;
}

.health-item[b-fgzrmihhk1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.health-icon[b-fgzrmihhk1],
.action-icon[b-fgzrmihhk1] {
    color: #8b9ff5;
}

.health-info[b-fgzrmihhk1] {
    flex: 1;
}

.health-label[b-fgzrmihhk1] {
    font-size: 0.75rem;
    color: #64748b;
}

.health-value[b-fgzrmihhk1] {
    font-weight: 600;
    color: #e0e0e0;
}

.actions-grid[b-fgzrmihhk1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.action-btn[b-fgzrmihhk1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover[b-fgzrmihhk1] {
    background: rgba(40, 40, 40, 0.7);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.action-btn:active[b-fgzrmihhk1] {
    transform: scale(0.95);
}

.action-icon[b-fgzrmihhk1] {
    font-size: 1.5rem;
}

.action-btn span:last-child[b-fgzrmihhk1] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #e0e0e0;
}
/* /Pages/MobileHealth.razor.rz.scp.css */
/**
 * MobileHealth Page Styles
 * Complete system health monitoring
 */

.health-page-header[b-4gk3qo0gt0] {
    margin-bottom: var(--mobile-space-6);
}

.health-page-header h1[b-4gk3qo0gt0] {
    font-size: var(--mobile-text-2xl);
    font-weight: var(--mobile-font-bold);
    color: var(--mobile-text-primary);
    margin: 0 0 var(--mobile-space-4) 0;
}

/* Header Stats */
.header-stats[b-4gk3qo0gt0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mobile-space-4); /* ADD GAP */
    margin-bottom: var(--mobile-space-3);
}

.overall-health[b-4gk3qo0gt0],
.services-count[b-4gk3qo0gt0] {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-space-1);
    padding: var(--mobile-space-4);
    background: var(--mobile-card-bg);
    border: 1px solid var(--mobile-card-border);
    border-radius: var(--mobile-radius-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.health-percentage[b-4gk3qo0gt0] {
    font-size: var(--mobile-text-4xl);
    font-weight: var(--mobile-font-bold);
    font-family: var(--mobile-font-mono);
}

.health-percentage.health-excellent[b-4gk3qo0gt0] {
    color: var(--mobile-accent-green);
}

.health-percentage.health-good[b-4gk3qo0gt0] {
    color: var(--mobile-accent-blue);
}

.health-percentage.health-warning[b-4gk3qo0gt0] {
    color: var(--mobile-accent-yellow);
}

.health-percentage.health-critical[b-4gk3qo0gt0] {
    color: var(--mobile-accent-red);
}

.health-label[b-4gk3qo0gt0],
.count-label[b-4gk3qo0gt0] {
    font-size: var(--mobile-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.count-value[b-4gk3qo0gt0] {
    font-size: var(--mobile-text-3xl);
    font-weight: var(--mobile-font-bold);
    color: var(--mobile-text-primary);
}

.last-refresh[b-4gk3qo0gt0] {
    font-size: var(--mobile-text-sm);
    text-align: center;
}

/* Services Grid */
.services-grid[b-4gk3qo0gt0] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mobile-space-4); /* ENSURE GAP EXISTS */
    margin-bottom: var(--mobile-space-6);
}

/* Loading State */
.loading-state[b-4gk3qo0gt0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mobile-space-10);
    gap: var(--mobile-space-4);
}

/* Error State */
.error-state[b-4gk3qo0gt0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mobile-space-10);
    gap: var(--mobile-space-4);
    text-align: center;
}

.error-state h3[b-4gk3qo0gt0] {
    font-size: var(--mobile-text-xl);
    font-weight: var(--mobile-font-semibold);
    color: var(--mobile-text-primary);
    margin: 0;
}

/* Anomaly Alert */
.anomaly-alert[b-4gk3qo0gt0] {
    margin-top: var(--mobile-space-4);
}

/* Responsive */
@media (max-width: 640px) {
    .services-grid[b-4gk3qo0gt0] {
        grid-template-columns: 1fr;
        gap: var(--mobile-space-4); /* Keep gap on mobile */
    }

    .header-stats[b-4gk3qo0gt0] {
        grid-template-columns: 1fr;
        gap: var(--mobile-space-4); /* Keep gap on mobile */
    }

    .health-percentage[b-4gk3qo0gt0],
    .count-value[b-4gk3qo0gt0] {
        font-size: var(--mobile-text-3xl);
    }
}

/* Pull-to-Refresh Hint (for future) */
.pull-to-refresh-indicator[b-4gk3qo0gt0] {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--mobile-space-2);
    padding: var(--mobile-space-3);
    background: var(--mobile-card-bg);
    border-radius: var(--mobile-radius-full);
    box-shadow: var(--mobile-shadow-lg);
    transition: top 0.3s ease;
    z-index: 100;
}

.pull-to-refresh-indicator.show[b-4gk3qo0gt0] {
    top: var(--mobile-space-4);
}

/* Animations */
@keyframes health-pulse-b-4gk3qo0gt0 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.health-percentage.health-critical[b-4gk3qo0gt0] {
    animation: health-pulse-b-4gk3qo0gt0 2s ease-in-out infinite;
}
/* /Pages/MobileNotifications.razor.rz.scp.css */
/* Mobile Notifications Page Styles */

.notifications-page[b-e86kixppch] {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-space-4);
}

/* ============================================================================
   NOTIFICATION PROMPT (when not subscribed)
   ============================================================================ */

.notification-prompt[b-e86kixppch] {
    text-align: center;
    padding: var(--mobile-space-6);
}

.prompt-icon[b-e86kixppch] {
    margin-bottom: var(--mobile-space-4);
    color: var(--mobile-accent-blue);
}

.notification-prompt h3[b-e86kixppch] {
    margin: 0 0 var(--mobile-space-2) 0;
    color: var(--mobile-text-primary);
    font-size: var(--mobile-text-lg);
}

.notification-prompt p[b-e86kixppch] {
    margin-bottom: var(--mobile-space-4);
}

/* ============================================================================
   FILTER TABS
   ============================================================================ */

.filter-tabs[b-e86kixppch] {
    display: flex;
    gap: var(--mobile-space-2);
    background: rgba(255, 255, 255, 0.03);
    padding: var(--mobile-space-1);
    border-radius: var(--mobile-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-tab[b-e86kixppch] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mobile-space-2);
    padding: var(--mobile-space-2) var(--mobile-space-3);
    background: transparent;
    border: none;
    border-radius: var(--mobile-radius-md);
    color: var(--mobile-text-secondary);
    font-size: var(--mobile-text-sm);
    font-weight: var(--mobile-font-medium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-tab:hover[b-e86kixppch] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--mobile-text-primary);
}

.filter-tab.active[b-e86kixppch] {
    background: rgba(102, 126, 234, 0.2);
    color: #8b9ff5;
}

.tab-count[b-e86kixppch] {
    background: rgba(255, 255, 255, 0.15);
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: var(--mobile-text-xs);
    font-weight: var(--mobile-font-semibold);
}

.filter-tab.active .tab-count[b-e86kixppch] {
    background: rgba(102, 126, 234, 0.3);
}

/* ============================================================================
   NOTIFICATIONS LIST
   ============================================================================ */

.notifications-list[b-e86kixppch] {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-space-3);
}

.notification-item[b-e86kixppch] {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.notification-item:hover[b-e86kixppch] {
    transform: translateX(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.notification-item:active[b-e86kixppch] {
    transform: scale(0.98);
}

.notification-item.unread[b-e86kixppch] {
    border-left: 3px solid #8b9ff5;
}

.notification-item.read[b-e86kixppch] {
    opacity: 0.7;
}

.notification-header[b-e86kixppch] {
    display: flex;
    align-items: center;
    gap: var(--mobile-space-3);
    margin-bottom: var(--mobile-space-2);
}

.notification-icon[b-e86kixppch] {
    width: 36px;
    height: 36px;
    border-radius: var(--mobile-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-icon.notification-info[b-e86kixppch] {
    background: rgba(59, 130, 246, 0.2);
    color: rgb(59, 130, 246);
}

.notification-icon.notification-warning[b-e86kixppch] {
    background: rgba(245, 158, 11, 0.2);
    color: rgb(245, 158, 11);
}

.notification-icon.notification-error[b-e86kixppch] {
    background: rgba(239, 68, 68, 0.2);
    color: rgb(239, 68, 68);
}

.notification-icon.notification-critical[b-e86kixppch] {
    background: rgba(220, 38, 38, 0.2);
    color: rgb(220, 38, 38);
}

.notification-meta[b-e86kixppch] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notification-type[b-e86kixppch] {
    font-size: var(--mobile-text-xs);
    font-weight: var(--mobile-font-semibold);
    color: var(--mobile-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.notification-time[b-e86kixppch] {
    font-size: var(--mobile-text-xs);
}

.unread-indicator[b-e86kixppch] {
    width: 8px;
    height: 8px;
    background: #8b9ff5;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(139, 159, 245, 0.6);
}

.notification-content[b-e86kixppch] {
    margin-bottom: var(--mobile-space-2);
}

.notification-title[b-e86kixppch] {
    margin: 0 0 var(--mobile-space-1) 0;
    font-size: var(--mobile-text-base);
    font-weight: var(--mobile-font-semibold);
    color: var(--mobile-text-primary);
}

.notification-body[b-e86kixppch] {
    margin: 0;
    font-size: var(--mobile-text-sm);
    line-height: 1.5;
}

.notification-actions[b-e86kixppch] {
    padding-top: var(--mobile-space-2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */

.empty-state[b-e86kixppch] {
    text-align: center;
    padding: var(--mobile-space-8) var(--mobile-space-4);
}

.empty-icon[b-e86kixppch] {
    margin-bottom: var(--mobile-space-3);
    opacity: 0.5;
}

.empty-state h3[b-e86kixppch] {
    margin: 0 0 var(--mobile-space-2) 0;
    color: var(--mobile-text-secondary);
    font-size: var(--mobile-text-base);
}

.empty-state p[b-e86kixppch] {
    margin: 0;
    font-size: var(--mobile-text-sm);
}

/* ============================================================================
   FOOTER ACTIONS
   ============================================================================ */

.notifications-footer[b-e86kixppch] {
    text-align: center;
    padding: var(--mobile-space-2) 0;
}

/* ============================================================================
   TEST SECTION
   ============================================================================ */

.test-section[b-e86kixppch] {
    margin-top: var(--mobile-space-4);
}

.test-section h4[b-e86kixppch] {
    margin: 0 0 var(--mobile-space-1) 0;
    font-size: var(--mobile-text-base);
    color: var(--mobile-text-primary);
}

.test-section p[b-e86kixppch] {
    margin: 0 0 var(--mobile-space-3) 0;
    font-size: var(--mobile-text-sm);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 640px) {
    .notification-header[b-e86kixppch] {
        gap: var(--mobile-space-2);
    }

    .notification-icon[b-e86kixppch] {
        width: 32px;
        height: 32px;
    }
}
/* /Pages/MobileOperationDetails.razor.rz.scp.css */
.operation-details[b-ax46jzdn0m] {
    min-height: 100vh;
    background: #f3f4f6;
    padding-bottom: 5rem;
}

.details-header[b-ax46jzdn0m] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 1rem;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.details-header h1[b-ax46jzdn0m] {
    margin: 0;
    font-size: 1.25rem;
    text-align: center;
    color: #111827;
}

.btn-back[b-ax46jzdn0m] {
    padding: 0.5rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #667eea;
}

.loading-state[b-ax46jzdn0m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}

.loading-state .spinner[b-ax46jzdn0m] {
    width: 3rem;
    height: 3rem;
    border: 4px solid #e5e7eb;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

.operation-card[b-ax46jzdn0m] {
    margin: 1rem;
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.operation-card.status-running[b-ax46jzdn0m] {
    border-top: 4px solid #3b82f6;
}

.operation-card.status-completed[b-ax46jzdn0m] {
    border-top: 4px solid #10b981;
}

.operation-card.status-failed[b-ax46jzdn0m] {
    border-top: 4px solid #ef4444;
}

.card-section[b-ax46jzdn0m] {
    padding: 1rem;
    border-bottom: 1px solid #f3f4f6;
}

.card-section:last-child[b-ax46jzdn0m] {
    border-bottom: none;
}

.card-section h3[b-ax46jzdn0m] {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.operation-header[b-ax46jzdn0m] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.op-icon[b-ax46jzdn0m] {
    font-size: 2.5rem;
}

.op-title[b-ax46jzdn0m] {
    flex: 1;
}

.op-type[b-ax46jzdn0m] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
}

.op-id[b-ax46jzdn0m] {
    font-size: 0.75rem;
    color: #9ca3af;
    font-family: monospace;
}

.op-status[b-ax46jzdn0m] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
}

.badge-running[b-ax46jzdn0m] {
    background: #dbeafe;
    color: #1e40af;
}

.badge-completed[b-ax46jzdn0m] {
    background: #d1fae5;
    color: #065f46;
}

.badge-failed[b-ax46jzdn0m] {
    background: #fee2e2;
    color: #991b1b;
}

.badge-queued[b-ax46jzdn0m] {
    background: #f3f4f6;
    color: #6b7280;
}

.progress-section[b-ax46jzdn0m] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.progress-label[b-ax46jzdn0m] {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.progress-percent[b-ax46jzdn0m] {
    color: #667eea;
}

.progress-bar-container[b-ax46jzdn0m] {
    height: 1rem;
    background: #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

.progress-bar[b-ax46jzdn0m] {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transition: width 0.5s ease;
}

.progress-steps[b-ax46jzdn0m] {
    font-size: 0.75rem;
    color: #9ca3af;
    text-align: center;
}

.stage-info[b-ax46jzdn0m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 0.5rem;
}

.stage-icon[b-ax46jzdn0m] {
    font-size: 1.25rem;
}

.stage-name[b-ax46jzdn0m] {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.message-box[b-ax46jzdn0m] {
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.severity-info[b-ax46jzdn0m] {
    background: #eff6ff;
    color: #1e40af;
}

.severity-success[b-ax46jzdn0m] {
    background: #d1fae5;
    color: #065f46;
}

.severity-warning[b-ax46jzdn0m] {
    background: #fef3c7;
    color: #92400e;
}

.severity-error[b-ax46jzdn0m] {
    background: #fee2e2;
    color: #991b1b;
}

.timeline-grid[b-ax46jzdn0m] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.timeline-item[b-ax46jzdn0m] {
    text-align: center;
}

.timeline-label[b-ax46jzdn0m] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 0.25rem;
}

.timeline-value[b-ax46jzdn0m] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.metadata-list[b-ax46jzdn0m] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.metadata-item[b-ax46jzdn0m] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
    padding: 0.5rem;
    background: #f9fafb;
    border-radius: 0.375rem;
}

.metadata-key[b-ax46jzdn0m] {
    font-weight: 600;
    color: #6b7280;
}

.metadata-value[b-ax46jzdn0m] {
    color: #111827;
    font-family: monospace;
}

.action-buttons[b-ax46jzdn0m] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 1rem;
    background: white;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.btn-refresh[b-ax46jzdn0m],
.btn-cancel[b-ax46jzdn0m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border: none;
    border-radius: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-refresh[b-ax46jzdn0m] {
    background: #667eea;
    color: white;
}

.btn-cancel[b-ax46jzdn0m] {
    background: #ef4444;
    color: white;
}
/* /Pages/MobileOperations.razor.rz.scp.css */
/**
 * MobileOperations Page Styles
 * Operations monitoring with dark glass theme
 */

/* Page Header */
.page-header[b-inujqd18ew] {
    margin-bottom: var(--mobile-space-6);
}

.page-header h1[b-inujqd18ew] {
    font-size: var(--mobile-text-2xl);
    font-weight: var(--mobile-font-bold);
    color: var(--mobile-text-primary);
    margin: 0 0 var(--mobile-space-2) 0;
}

.operations-count[b-inujqd18ew] {
    font-size: var(--mobile-text-sm);
}

/* Loading & Empty States */
.loading-state[b-inujqd18ew],
.empty-state[b-inujqd18ew] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mobile-space-10);
    gap: var(--mobile-space-4);
    text-align: center;
}

.empty-icon[b-inujqd18ew] {
    margin-bottom: var(--mobile-space-2);
}

.empty-state h3[b-inujqd18ew] {
    font-size: var(--mobile-text-xl);
    font-weight: var(--mobile-font-semibold);
    color: var(--mobile-text-primary);
    margin: 0;
}

/* Operations List */
.operations-list[b-inujqd18ew] {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-space-4);
    margin-bottom: var(--mobile-space-6);
}

.operation-card[b-inujqd18ew] {
    padding: var(--mobile-space-4);
}

/* Operation Header */
.op-header[b-inujqd18ew] {
    display: flex;
    align-items: flex-start;
    gap: var(--mobile-space-3);
    margin-bottom: var(--mobile-space-4);
}

.op-icon-badge[b-inujqd18ew] {
    width: 40px;
    height: 40px;
    border-radius: var(--mobile-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.op-icon-badge.op-pipeline[b-inujqd18ew] {
    background: rgba(59, 130, 246, 0.15);
    color: var(--mobile-accent-blue);
}

.op-icon-badge.op-figma[b-inujqd18ew] {
    background: rgba(139, 92, 246, 0.15);
    color: var(--mobile-accent-purple);
}

.op-icon-badge.op-capability[b-inujqd18ew] {
    background: rgba(16, 185, 129, 0.15);
    color: var(--mobile-accent-green);
}

.op-icon-badge.op-security[b-inujqd18ew] {
    background: rgba(239, 68, 68, 0.15);
    color: var(--mobile-accent-red);
}

.op-title-section[b-inujqd18ew] {
    flex: 1;
    min-width: 0;
}

.op-title[b-inujqd18ew] {
    font-size: var(--mobile-text-base);
    font-weight: var(--mobile-font-semibold);
    color: var(--mobile-text-primary);
    margin-bottom: var(--mobile-space-1);
}

.op-subtitle[b-inujqd18ew] {
    font-size: var(--mobile-text-xs);
}

/* Progress Section */
.op-progress-section[b-inujqd18ew] {
    margin-bottom: var(--mobile-space-4);
}

.op-progress-label[b-inujqd18ew] {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--mobile-space-2);
    color: var(--mobile-text-secondary);
}

/* Details Grid */
.op-details-grid[b-inujqd18ew] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mobile-space-3);
    margin-bottom: var(--mobile-space-3);
    padding: var(--mobile-space-3);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--mobile-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-item[b-inujqd18ew] {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-space-1);
}

.detail-item-full[b-inujqd18ew] {
    grid-column: 1 / -1;
}

.detail-label[b-inujqd18ew] {
    display: flex;
    align-items: center;
    gap: var(--mobile-space-1);
}

.detail-value[b-inujqd18ew] {
    font-weight: var(--mobile-font-semibold);
    color: var(--mobile-text-primary);
    word-break: break-word;
}

/* Message */
.op-message[b-inujqd18ew] {
    padding: var(--mobile-space-3);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--mobile-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Responsive */
@media (max-width: 640px) {
    .op-details-grid[b-inujqd18ew] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/MobileSettings.razor.rz.scp.css */
.mobile-settings-page[b-zf8ag6fcti] {
    max-width: 1200px;
    margin: 0 auto;
}

.page-header[b-zf8ag6fcti] {
    margin-bottom: 2rem;
}

.page-header h1[b-zf8ag6fcti] {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    color: #E5E5E5; /* FIX: Dark theme text */
}

.page-header p[b-zf8ag6fcti] {
    margin: 0;
    color: #A3A3A3; /* FIX: Dark theme subtext */
    font-size: 1rem;
}

.settings-grid[b-zf8ag6fcti] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 1.5rem;
}

.settings-card[b-zf8ag6fcti] {
    background: #1A1A1A; /* FIX: Dark background */
    border: 1px solid #262626; /* FIX: Dark border */
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* FIX: Darker shadow */
    overflow: hidden;
}

.card-header[b-zf8ag6fcti] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #262626; /* FIX: Dark border */
}

.card-header h3[b-zf8ag6fcti] {
    margin: 0;
    font-size: 1.125rem;
    color: #E5E5E5; /* FIX: Light text */
}

.session-count[b-zf8ag6fcti] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    background: #667eea;
    color: white;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.card-body[b-zf8ag6fcti] {
    padding: 0.5rem;/* 1.5rem */
}

.empty-state[b-zf8ag6fcti] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    color: #6b7280; /* FIX: Muted text */
}

.empty-state span[b-zf8ag6fcti] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    filter: grayscale(0.3) opacity(0.7); /* FIX: Subtle emoji */
}

.sessions-list[b-zf8ag6fcti] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.session-item[b-zf8ag6fcti] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: #0F0F0F; /* FIX: Darker background */
    border-radius: 0.5rem;
    border: 1px solid #262626; /* FIX: Dark border */
}

.session-info[b-zf8ag6fcti] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.session-device[b-zf8ag6fcti] {
    font-weight: 600;
    color: #E5E5E5; /* FIX: Light text */
}

.session-time[b-zf8ag6fcti] {
    font-size: 0.875rem;
    color: #9ca3af; /* FIX: Muted text */
}

.btn-revoke[b-zf8ag6fcti] {
    padding: 0.5rem 1rem;
    background: rgba(239, 68, 68, 0.15); /* FIX: Transparent red */
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-revoke:hover[b-zf8ag6fcti] {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
}

.status-grid[b-zf8ag6fcti] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.status-item[b-zf8ag6fcti] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: #0F0F0F; /* FIX: Darker background */
    border-radius: 0.5rem;
    border: 1px solid #262626;
}

.status-label[b-zf8ag6fcti] {
    font-size: 0.875rem;
    color: #9ca3af; /* FIX: Muted label */
    font-weight: 500;
}

.status-value[b-zf8ag6fcti] {
    font-size: 1rem;
    font-weight: 600;
    color: #E5E5E5; /* FIX: Light text */
}

.status-value.connected[b-zf8ag6fcti] {
    color: #10b981;
}

.status-value.disconnected[b-zf8ag6fcti] {
    color: #ef4444;
}

.settings-options[b-zf8ag6fcti] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.option-item[b-zf8ag6fcti] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #0F0F0F; /* FIX: Darker background */
    border-radius: 0.5rem;
    border: 1px solid #262626;
}

.option-info[b-zf8ag6fcti] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.option-label[b-zf8ag6fcti] {
    font-weight: 600;
    color: #E5E5E5; /* FIX: Light text */
}

.option-desc[b-zf8ag6fcti] {
    font-size: 0.875rem;
    color: #9ca3af; /* FIX: Muted description */
}

/* Toggle Switch */
.toggle-switch[b-zf8ag6fcti] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.toggle-switch input[b-zf8ag6fcti] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-zf8ag6fcti] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #404040; /* FIX: Dark inactive */
    transition: 0.3s;
    border-radius: 24px;
}

.slider[b-zf8ag6fcti]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #9ca3af; /* FIX: Gray knob */
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .slider[b-zf8ag6fcti] {
    background-color: #667eea;
}

input:checked + .slider[b-zf8ag6fcti]:before {
    background-color: white; /* FIX: White knob when active */
    transform: translateX(24px);
}
/* /Pages/MobileSettingsPage.razor.rz.scp.css */
/**
 * MobileSettingsPage Styles
 * Dark glass theme for settings sections
 */

/* Page Header */
.page-header[b-8wfrs5b26c] {
    margin-bottom: var(--mobile-space-6);
}

.page-header h1[b-8wfrs5b26c] {
    font-size: var(--mobile-text-2xl);
    font-weight: var(--mobile-font-bold);
    color: var(--mobile-text-primary);
    margin: 0;
}

/* Loading State */
.loading-state[b-8wfrs5b26c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mobile-space-10);
    gap: var(--mobile-space-4);
    text-align: center;
}

/* Settings Sections */
.settings-sections[b-8wfrs5b26c] {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-space-4);
    margin-bottom: var(--mobile-space-6);
}

.settings-section[b-8wfrs5b26c] {
    padding: var(--mobile-space-4);
}

.section-header[b-8wfrs5b26c] {
    display: flex;
    align-items: center;
    gap: var(--mobile-space-3);
    margin-bottom: var(--mobile-space-4);
    padding-bottom: var(--mobile-space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section-header h3[b-8wfrs5b26c] {
    margin: 0;
    font-size: var(--mobile-text-lg);
    font-weight: var(--mobile-font-semibold);
    color: var(--mobile-text-primary);
}

/* Reset Section */
.reset-section[b-8wfrs5b26c] {
    padding: var(--mobile-space-4);
    margin-top: var(--mobile-space-6);
}