/* /Pages/Shell.razor.rz.scp.css */
/* Shell.razor - Remote Shell Terminal Styles */

.shell-page[b-61gdxvo0l4] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    background: #0c0c0c;
}

/* ============================================
   Toolbar
   ============================================ */
.shell-toolbar[b-61gdxvo0l4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #1a1a2e;
    border-bottom: 1px solid #2d2d44;
    flex-shrink: 0;
}

.toolbar-left[b-61gdxvo0l4],
.toolbar-center[b-61gdxvo0l4],
.toolbar-right[b-61gdxvo0l4] {
    display: flex;
    align-items: center;
}

.toolbar-left[b-61gdxvo0l4] {
    color: #e0e0e0;
}

[b-61gdxvo0l4] .toolbar-title {
    color: #e0e0e0 !important;
    font-weight: 500;
}

[b-61gdxvo0l4] .toolbar-btn {
    color: #888 !important;
}

[b-61gdxvo0l4] .toolbar-btn:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   Connection Indicator
   ============================================ */
.connection-indicator[b-61gdxvo0l4] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.connection-indicator.connected[b-61gdxvo0l4] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.connection-indicator.disconnected[b-61gdxvo0l4] {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.indicator-dot[b-61gdxvo0l4] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.connected .indicator-dot[b-61gdxvo0l4] {
    box-shadow: 0 0 6px currentColor;
}

/* ============================================
   Terminal Container
   ============================================ */
.terminal-wrapper[b-61gdxvo0l4] {
    flex: 1;
    padding: 0;
    overflow: hidden;
}

.terminal[b-61gdxvo0l4] {
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'Cascadia Code', 'Cascadia Mono', 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    line-height: 1.5;
    background: #0c0c0c;
    color: #cccccc;
}

.terminal-content[b-61gdxvo0l4] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: 8px;
}

/* Custom scrollbar */
.terminal-content[b-61gdxvo0l4]::-webkit-scrollbar {
    width: 8px;
}

.terminal-content[b-61gdxvo0l4]::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.terminal-content[b-61gdxvo0l4]::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 4px;
}

.terminal-content[b-61gdxvo0l4]::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
}

/* ============================================
   Welcome Screen
   ============================================ */
.terminal-welcome[b-61gdxvo0l4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #4a4a4a;
}

.welcome-icon[b-61gdxvo0l4] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.welcome-text[b-61gdxvo0l4] {
    font-size: 14px;
    text-align: center;
    max-width: 400px;
}

/* ============================================
   Output Lines
   ============================================ */
.output-line[b-61gdxvo0l4] {
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 21px;
}

.output-line.command[b-61gdxvo0l4] {
    color: #ffff00;
}

.output-line.stdout[b-61gdxvo0l4] {
    color: #cccccc;
}

.output-line.stderr[b-61gdxvo0l4] {
    color: #f14c4c;
}

.output-line.info[b-61gdxvo0l4] {
    color: #3794ff;
}

.output-line.success[b-61gdxvo0l4] {
    color: #23d18b;
}

.output-line.executing[b-61gdxvo0l4] {
    color: #888;
}

.executing-dots[b-61gdxvo0l4]::after {
    content: '...';
    animation: dots-b-61gdxvo0l4 1.5s steps(4, end) infinite;
}

@keyframes dots-b-61gdxvo0l4 {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

/* ============================================
   Input Line
   ============================================ */
.terminal-input-line[b-61gdxvo0l4] {
    display: flex;
    align-items: center;
    padding: 8px 16px 16px 16px;
    background: #0c0c0c;
    flex-shrink: 0;
}

.prompt[b-61gdxvo0l4] {
    color: #ffff00;
    margin-right: 8px;
    user-select: none;
    font-weight: 600;
}

.terminal-input[b-61gdxvo0l4] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #cccccc;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    caret-color: #cccccc;
}

.terminal-input:disabled[b-61gdxvo0l4] {
    color: #666;
}

.terminal-input[b-61gdxvo0l4]::placeholder {
    color: #4a4a4a;
}

/* ============================================
   MudBlazor Overrides for Dark Theme
   ============================================ */
[b-61gdxvo0l4] .shell-toolbar .mud-select {
    background: rgba(255, 255, 255, 0.05);
}

[b-61gdxvo0l4] .shell-toolbar .mud-input-label {
    color: #888 !important;
}

[b-61gdxvo0l4] .shell-toolbar .mud-input {
    color: #e0e0e0 !important;
}

[b-61gdxvo0l4] .shell-toolbar .mud-select-input {
    color: #e0e0e0 !important;
}

[b-61gdxvo0l4] .shell-toolbar .mud-icon-default {
    color: #888 !important;
}