/* TUICommander — Global layout styles.
   Only cross-component layout rules, JS-applied classes, and library overrides.
   Component-specific styles live in *.module.css next to each component. */

/* Sidebar hidden state (cross-component: App.tsx controls sidebar visibility) */
#app.sidebar-hidden #sidebar {
  width: 0;
  min-width: 0;
  border-right: none;
  opacity: 0;
  pointer-events: none;
}

/* Focus mode (Cmd+Alt+Enter): maximize active tab content.
 * Hides sidebar, tab bar, and all side panels. Toolbar and StatusBar stay
 * visible so Boss can still see repo/branch/session state and exit the mode. */
#app.focus-mode #sidebar,
#app.focus-mode #tab-bar,
#app.focus-mode #ai-chat-panel,
#app.focus-mode #git-panel,
#app.focus-mode #markdown-panel,
#app.focus-mode #notes-panel,
#app.focus-mode #file-browser-panel,
#app.focus-mode #outline-panel,
#app.focus-mode #references-panel {
  display: none !important;
}

/* Panel mode: full-viewport single panel (detached AI Chat window) */
#app.panel-mode {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#app.panel-mode > * {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  border-left: none !important;
}

/* Main Content */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-primary);
}

/* Tab Bar wrapper (used by App.tsx) */
#tab-bar {
  height: var(--tab-bar-height);
  min-height: var(--tab-bar-height);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  padding: 0;
}

/* Terminal Container */
#terminal-container {
  flex: 1;
  display: flex;
  overflow: hidden;
  background: var(--bg-primary);
  position: relative;
}

/* Highlight applied (via JS) to the folder row under a Tauri drag-drop cursor.
   Matches elements with data-drop-target="folder" during a drag session. */
.drop-target-hover[data-drop-target="folder"] {
  background: rgba(80, 160, 255, 0.18) !important;
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.ptr-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-tertiary, #333);
  color: var(--fg-primary, #eee);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0.9;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

#terminal-panes {
  flex: 1;
  min-width: 200px;
  position: relative;
  background: var(--bg-secondary);
}

.terminal-pane {
  position: absolute;
  inset: 0;
  padding: 5px;
  display: none;
  background: var(--bg-secondary);
}

.terminal-pane.active {
  display: block;
  z-index: 20;
}

/* xterm scrollbar overrides — keep native viewport scrollable.
   xterm v6 reads scrollTop from this element to compute viewportY.
   overflow-y:hidden breaks viewportY (always returns 0).
   Selector uses [data-terminal-id] so it works in both flat and split modes. */
[data-terminal-id] .xterm-viewport {
  overflow-y: auto;
}

[data-terminal-id] .xterm-viewport::-webkit-scrollbar {
  width: 8px;
}

[data-terminal-id] .xterm-viewport::-webkit-scrollbar-track {
  background: transparent;
}

[data-terminal-id] .xterm-viewport::-webkit-scrollbar-thumb {
  background: var(--bg-highlight);
  border-radius: var(--radius-md);
}

[data-terminal-id] .xterm-viewport::-webkit-scrollbar-thumb:hover {
  background: var(--fg-muted);
}

/* Hide xterm v6 scroll shadow */
[data-terminal-id] .xterm .xterm-scrollable-element > .shadow {
  display: none !important;
}

/* Match xterm custom scrollbar widget to app-wide thin style */
[data-terminal-id] .xterm .xterm-scrollable-element > .scrollbar.vertical {
  width: 8px !important;
}

[data-terminal-id] .xterm .xterm-scrollable-element > .scrollbar.vertical .slider {
  border-radius: var(--radius-md);
}

/* Diff viewer overrides */
#diff-content {
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: var(--font-md);
  line-height: 1.5;
}

/* @git-diff-view theme overrides — match TUICommander palette */
.diff-tailwindcss-wrapper[data-theme="dark"] .diff-style-root {
  --diff-border--: var(--border);
  --diff-plain-content--: var(--bg-primary);
  --diff-expand-content--: var(--bg-secondary);
  --diff-empty-content--: var(--bg-secondary);
  --diff-add-content--: rgba(158, 206, 106, 0.1);
  --diff-del-content--: rgba(247, 118, 142, 0.1);
  --diff-add-content-highlight--: rgba(158, 206, 106, 0.25);
  --diff-del-content-highlight--: rgba(247, 118, 142, 0.25);
  --diff-hunk-content--: var(--bg-highlight);
  --diff-hunk-content-color--: var(--fg-muted);
}

/* Compact line number columns */
.diff-tailwindcss-wrapper .diff-line-old-num,
.diff-tailwindcss-wrapper .diff-line-new-num,
.diff-tailwindcss-wrapper .diff-line-num {
  min-width: 28px !important;
  padding-left: 4px !important;
  padding-right: 6px !important;
}

/* Tab content pane backgrounds */
.terminal-pane.diff-pane {
  background: var(--bg-primary);
}

.terminal-pane.edit-pane {
  background: var(--bg-primary);
}

.terminal-pane.md-pane {
  background: var(--bg-primary);
}
