/**
 * Git Repository Plugin Styles
 *
 * Self-contained CSS module for the git repository file selection modal
 * and git repository node tree display.
 */

/* =============================================================================
   Git Repository Modal Styles
   ============================================================================= */

.git-repo-url-display {
    margin-bottom: 16px;
}

.git-repo-url-display label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.git-repo-url-text {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    word-break: break-all;
}

.git-repo-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
}

.git-repo-error {
    padding: 12px;
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-sm);
    color: var(--error-text);
    margin-bottom: 16px;
}

.git-repo-file-selection-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.git-repo-selection-count {
    font-size: 13px;
    color: var(--text-muted);
}

.git-repo-warning {
    padding: 8px 12px;
    background: var(--warning-bg, #fff3cd);
    border: 1px solid var(--warning-border, #ffc107);
    border-radius: var(--radius-sm);
    color: var(--warning-text, #856404);
    margin-bottom: 12px;
    font-size: 13px;
}

.git-repo-file-tree {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 8px;
    background: var(--bg-primary);
    margin-bottom: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.git-repo-file-tree-list {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Display is controlled by inline style from JS for expand/collapse */
}

.git-repo-file-tree-item {
    padding: 2px 0;
    font-size: 13px;
    line-height: 20px;
    min-height: 22px;
    position: relative;
    display: block;
    /* Ensure proper vertical stacking - children appear below parent */
    clear: both;
    /* Prevent hover on parent when hovering children */
    pointer-events: none;
}

/* Content wrapper contains button/spacer, checkbox, label in a row */
.git-repo-file-tree-item-content {
    display: inline-flex;
    align-items: center;
    width: 100%;
    /* Add padding for hover effect without affecting layout */
    padding: 1px 2px;
    margin: -1px -2px;
    border-radius: var(--radius-sm);
}

/* Spacer for files to align with directory arrows */
.git-repo-expand-spacer {
    flex-shrink: 0;
}

/* Hover effect only on the content wrapper, and only when directly hovering that specific item */
/* Use :hover with pointer-events to prevent parent highlighting when hovering children */
.git-repo-file-tree-item > .git-repo-file-tree-item-content {
    pointer-events: auto;
}

/* Subtle light blue hover effect */
.git-repo-file-tree-item > .git-repo-file-tree-item-content:hover {
    background: rgba(100, 150, 255, 0.1); /* Light blue with transparency */
    border-radius: var(--radius-sm);
}

/* Prevent hover on parent when hovering nested items */
.git-repo-file-tree-item > ul {
    pointer-events: auto;
}

.git-repo-file-tree-item input[type='checkbox'] {
    margin-right: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.git-repo-file-tree-item input[type='checkbox']:indeterminate {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.git-repo-file-label,
.git-repo-dir-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex: 1;
    user-select: none;
    color: var(--text-primary);
}

.git-repo-file-icon,
.git-repo-folder-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.git-repo-expand-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.git-repo-expand-btn:hover:not(:disabled) {
    color: var(--text-primary);
}

.git-repo-expand-btn:disabled {
    cursor: default;
    opacity: 0;
}

.git-repo-expand-icon {
    font-size: 10px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.15s ease;
}

.git-repo-expand-btn.expanded .git-repo-expand-icon {
    transform: rotate(0deg);
}

.git-repo-dir-label {
    font-weight: 500;
    color: var(--text-primary);
}

/* Nested ul must be a block element that appears below the parent li content */
/* Note: display is controlled by JS (inline style) for expand/collapse, don't force it */
.git-repo-file-tree-item > ul.git-repo-file-tree-list {
    margin: 0;
    margin-left: 20px;
    margin-top: 2px;
    padding: 0;
    list-style: none;
    width: auto;
    /* Display is controlled by inline style from JS - don't override with !important */
    /* Re-enable pointer events for nested items so they can be hovered */
    pointer-events: auto;
}

/* =============================================================================
   Git Repository Node Tree Styles (rendered in node content)
   ============================================================================= */

.git-repo-node-tree {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.git-repo-node-header {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bg-secondary);
}

.git-repo-node-tree-container {
    /* Container for the tree */
    /* Reuse the same styles as modal tree - classes are shared */
}

/* Node tree uses the same classes as modal tree, so styles are inherited */
/* Additional highlighting for fetched files */

.git-repo-node-tree-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.git-repo-node-tree-nested {
    /* Nested lists should appear below parent, indented */
    margin-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

.git-repo-node-tree-item {
    padding: 2px 0;
    font-size: 13px;
    line-height: 20px;
    min-height: 22px;
    white-space: nowrap;
    position: relative;
}

.git-repo-node-tree-item > span:first-child {
    /* Expand icon or spacer */
    display: inline-block;
    width: 16px;
    margin-right: 4px;
    text-align: center;
    font-size: 10px;
    vertical-align: middle;
}

/* Remove this - node tree now uses same classes as modal tree */
/* Hover is handled by .git-repo-file-tree-item:hover .git-repo-file-tree-item-content */

.git-repo-node-tree-item .git-repo-node-expand-icon {
    cursor: pointer;
}

.git-repo-node-tree-item .git-repo-node-expand-icon-empty {
    /* Empty spacer for files */
}

.git-repo-node-tree-item .git-repo-node-file-icon,
.git-repo-node-tree-item .git-repo-node-folder-icon {
    margin-right: 6px;
    vertical-align: middle;
}

.git-repo-node-dir-item {
    cursor: pointer;
}

/* Nested lists must appear below parent, not to the right */
.git-repo-node-tree-item > ul.git-repo-node-tree-nested {
    display: block;
    margin-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

/* Highlight fetched files in node tree view */
.git-repo-file-fetched {
    /* Fetched files get a subtle background highlight */
}

.git-repo-file-fetched-label {
    font-weight: 600;
    color: var(--accent-primary);
}

/* Also apply to node tree items (when using same classes) */
/* Highlight fetched files - apply to content wrapper to avoid covering nested items */
.git-repo-file-tree-item.git-repo-file-fetched > .git-repo-file-tree-item-content {
    background: var(--bg-secondary); /* Gray background for fetched files */
    border-left: 2px solid var(--accent-primary);
    padding-left: 4px;
    margin-left: -2px; /* Compensate for border */
}

/* When hovering fetched files, use light blue hover (overrides gray background) */
.git-repo-file-tree-item.git-repo-file-fetched > .git-repo-file-tree-item-content:hover {
    background: rgba(100, 150, 255, 0.15); /* Slightly more opaque for fetched files on hover */
    border-left: 2px solid var(--accent-primary); /* Keep the accent border */
}

.git-repo-file-tree-item.git-repo-file-fetched .git-repo-file-fetched-label {
    font-weight: 600;
    color: var(--accent-primary);
}

/* Selected file for viewing in drawer - persistent highlight */
.git-repo-file-tree-item.git-repo-file-view-selected > .git-repo-file-tree-item-content {
    background: rgba(100, 150, 255, 0.25);
    border-left: 3px solid var(--accent-primary);
    padding-left: 4px;
    margin-left: -3px;
    border-radius: 2px;
}

.git-repo-file-tree-item.git-repo-file-view-selected .git-repo-file-fetched-label {
    font-weight: 700;
    color: var(--accent-primary);
}

/* File drawer panel styles (reuse code output panel architecture) */
.git-repo-file-panel-content {
    min-height: 0;
}

.git-repo-file-panel-header {
    padding: 8px 12px;
    border-bottom: 1px solid var(--bg-secondary);
    font-size: 13px;
    margin-bottom: 8px;
}

.git-repo-file-panel-lang {
    color: var(--text-muted);
    font-weight: normal;
    font-size: 12px;
}

.git-repo-file-panel-error {
    padding: 16px;
    color: var(--text-error);
    font-style: italic;
}

.git-repo-file-panel-code {
    background: var(--color-bg-code, #1e1e1e);
    color: var(--color-text-code, #d4d4d4);
    padding: 12px;
    margin: 0;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    font-size: 13px;
    line-height: 1.5;
}

.git-repo-file-panel-code code {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
}
