/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Components/Layout/MainLayout.razor.css */

/* Desktop toolbar buttons — visible by default */
.toolbar-desktop-only[b-328sbt7lx6] {
    display:     flex;
    align-items: center;
    gap:         4px;
}

/* Mobile hamburger — hidden by default; shown on < 768px */
.toolbar-mobile-only[b-328sbt7lx6] {
    display: none;
}

@media (max-width: 767px) {
    .toolbar-desktop-only[b-328sbt7lx6] {
        display: none;
    }

    .toolbar-mobile-only[b-328sbt7lx6] {
        display: flex;
        align-items: center;
    }
}
/* /Components/Mobile/MobileTabBar.razor.rz.scp.css */
/* src/GitVisualizer/Components/Mobile/MobileTabBar.razor.css */

.mobile-tab-bar[b-wegbgaeqmp] {
    display:      flex;
    height:       56px;
    flex-shrink:  0;
    border-top:   1px solid var(--mud-palette-divider);
    background:   var(--mud-palette-surface);
}

.mobile-tab-bar button[b-wegbgaeqmp] {
    flex:            1;
    border:          none;
    background:      transparent;
    cursor:          pointer;
    font-size:       max(14px, 1rem);
    color:           var(--mud-palette-text-secondary);
    min-height:      44px; /* WCAG touch-target minimum */
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.mobile-tab-bar button.active[b-wegbgaeqmp] {
    border-bottom: 3px solid var(--mud-palette-primary);
    color:         var(--mud-palette-primary);
    font-weight:   600;
}

.mobile-tab-bar button:focus-visible[b-wegbgaeqmp] {
    outline:        2px solid var(--gitvis-focus-color, #2DA44E);
    outline-offset: -2px;
}
/* /Components/Sandbox/CommitGraphPanel.razor.rz.scp.css */
.commit-graph-panel[b-xp96ioxpwu] {
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        auto;
    background:      var(--mud-palette-surface);
}

.empty-state[b-xp96ioxpwu] {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    padding:         2rem;
}

.empty-state-border[b-xp96ioxpwu] {
    border:        1.5px dashed var(--mud-palette-divider);
    border-radius: 8px;
    padding:       2rem 3rem;
    opacity:       0.6;
    max-width:     400px;
    text-align:    center;
}

/* ─── Git graph container layout ─── */
.git-graph-container[b-xp96ioxpwu] {
    width:    100%;
    height:   100%;
    overflow: auto;
    outline:  none;
}

/* ─── HEAD commit glow (suppressed by app.css reduced-motion rule) ─── */
@keyframes gitvis-commit-glow-b-xp96ioxpwu {
    0%   { filter: drop-shadow(0 0 4px var(--gitvis-graph-branch-0)); }
    50%  { filter: drop-shadow(0 0 8px var(--gitvis-graph-branch-0)); }
    100% { filter: drop-shadow(0 0 4px var(--gitvis-graph-branch-0)); }
}

.commit-highlight[b-xp96ioxpwu] {
    animation: gitvis-commit-glow-b-xp96ioxpwu 1.5s ease-in-out infinite;
}
/* /Components/Sandbox/HelpOverlay.razor.rz.scp.css */
/* src/GitVisualizer/Components/Sandbox/HelpOverlay.razor.css */

.help-overlay-content[b-qpfh64nivq] {
    padding: 16px 0;
}

.help-command-group[b-qpfh64nivq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.help-command[b-qpfh64nivq] {
    padding: 12px;
    border-left: 3px solid var(--gitvis-primary, #1976d2);
    background-color: var(--mud-palette-background-grey, #fafafa);
    border-radius: 4px;
}

.help-command code[b-qpfh64nivq] {
    background-color: var(--mud-palette-background, #fff);
    border-radius: 3px;
    padding: 2px 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.help-command :deep(.mud-typography)[b-qpfh64nivq] {
    margin-bottom: 4px;
}

.help-command :deep(.mud-typography:last-child)[b-qpfh64nivq] {
    margin-bottom: 0;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .help-command[b-qpfh64nivq] {
        transition: none;
    }
}
/* /Components/Sandbox/SandboxPage.razor.rz.scp.css */
/* src/GitVisualizer/Components/Sandbox/SandboxPage.razor.css */

/* ─── Mobile layout (< 768px): flex column, tab bar at bottom ─── */
.mobile-layout[b-6xcbm42bkq] {
    display:        flex;
    flex-direction: column;
    height:         100%;
    overflow:       hidden;
}

.mobile-panel-content[b-6xcbm42bkq] {
    flex:       1;
    overflow:   hidden;
    min-height: 0; /* needed for flex child overflow */
}

.mobile-panel-content > div[b-6xcbm42bkq] {
    height:     100%;
    overflow-y: auto;
}
/* /Components/Sandbox/SplitPane.razor.rz.scp.css */
.split-pane[b-d1agguc94w] {
    display:        flex;
    flex-direction: row;
    height:         100%;
    overflow:       hidden;
    user-select:    none; /* prevents text selection during drag */
}

.split-handle[b-d1agguc94w] {
    width:       var(--gitvis-split-handle-width, 8px);
    flex-shrink: 0;
    cursor:      col-resize;
    background:  transparent;
    transition:  background 0.15s ease;
}

.split-handle:hover[b-d1agguc94w] {
    background: var(--mud-palette-divider);
}

/* ─── Tablet layout: 768–1023px — stack panels vertically ─── */
@media (max-width: 1023px) and (min-width: 768px) {
    .split-pane[b-d1agguc94w] {
        flex-direction: column;
    }

    /* Left panel (has inline width style) → top panel */
    .split-pane > div:first-child[b-d1agguc94w] {
        width:       100% !important;
        min-width:   0 !important;
        height:      50vh;
        overflow-y:  auto;
    }

    /* Right panel (has inline flex:1) → bottom panel */
    .split-pane > div:last-of-type[b-d1agguc94w] {
        min-width:   0 !important;
        height:      calc(50vh - var(--gitvis-split-handle-width, 8px));
        overflow-y:  auto;
    }

    /* Vertical drag handle → horizontal resize bar */
    .split-handle[b-d1agguc94w] {
        width:  100% !important;
        height: var(--gitvis-split-handle-width, 8px);
        cursor: row-resize;
    }
}

/* ─── Mobile layout: <768px — hide split handle (tabs used instead) ─── */
@media (max-width: 767px) {
    .split-handle[b-d1agguc94w] {
        display: none;
    }
}
/* /Components/Sandbox/TerminalPanel.razor.rz.scp.css */
.terminal-panel[b-h2297yg30m] {
    height:         100%;
    background:     var(--mud-palette-surface);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    font-family:    monospace;
}

.terminal-toolbar[b-h2297yg30m] {
    display:       flex;
    align-items:   center;
    padding:       4px 8px;
    background:    var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap:           4px;
}

.terminal-title[b-h2297yg30m] {
    flex:        1;
    font-size:   0.75rem;
    font-weight: 600;
    opacity:     0.7;
}

.terminal-progress[b-h2297yg30m] {
    height: 3px !important;
}

.terminal-progress--hidden[b-h2297yg30m] {
    visibility: hidden;
}

.terminal-output[b-h2297yg30m] {
    flex:           1;
    overflow-y:     auto;
    padding:        8px 12px;
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.terminal-entry[b-h2297yg30m] {
    margin-bottom: 4px;
}

.terminal-command[b-h2297yg30m] {
    color:     var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.terminal-prompt[b-h2297yg30m] {
    color:        var(--mud-palette-primary);
    margin-right: 4px;
}

.terminal-output-text[b-h2297yg30m] {
    margin:      0;
    font-size:   0.875rem;
    white-space: pre-wrap;
    word-break:  break-word;
}

.terminal-input-row[b-h2297yg30m] {
    display:     flex;
    align-items: flex-start;
    padding:     8px 12px;
    border-top:  1px solid var(--mud-palette-lines-default);
    background:  var(--mud-palette-surface);
}

.terminal-input[b-h2297yg30m] {
    flex:        1;
    background:  transparent;
    border:      none;
    outline:     none;
    color:       var(--mud-palette-text-primary);
    font-family: monospace;
    font-size:   0.875rem;
    resize:      none;
    line-height: 1.5;
}

.reset-confirm-backdrop[b-h2297yg30m] {
    position:         fixed;
    inset:            0;
    background:       rgba(0, 0, 0, 0.4);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    z-index:          1000;
}

.reset-confirm-dialog[b-h2297yg30m] {
    background: var(--mud-palette-surface);
    border:     1px solid var(--mud-palette-lines-default);
    padding:    24px;
    max-width:  400px;
    width:      90%;
    display:    flex;
    flex-direction: column;
    gap:        16px;
}