/* Console - ACLBot v11.0 */

/* ============================================
   CONSOLE - Terminal & Logs
   ============================================ */
[class*="console-container"] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 320px;
  background: var(--bg-secondary);
}
[data-theme="dark"] [class*="console-container"] {
  background: var(--border-subtle);
}
/* Console Header */
[class*="console-header"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
[data-theme="dark"] [class*="console-header"] {
  background: var(--bg-tertiary);
  border-color: rgba(255, 255, 255, 0.06);
}
[class*="console-title"] {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
[data-theme="dark"] [class*="console-title"] {
  color: #ffffff;
}
[class*="console-title"] svg {
  color: var(--accent);
  font-size: 16px;
}
/* Console text elements - ensure theme adaptation for non-terminal elements */
[class*="console-container"] > span,
[class*="console-container"] > div:not([class*="terminal"]):not(.xterm) {
  color: var(--text-primary);
}
/* Filter Buttons */
[class*="filter-group"] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
[class*="filter-btn"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
[data-theme="dark"] [class*="filter-btn"] {
  background: var(--border-subtle);
  border-color: var(--border);
  color: rgba(255, 255, 255, 0.5);
}
[class*="filter-btn"]:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
  color: var(--text-primary);
}
[data-theme="dark"] [class*="filter-btn"]:hover {
  background: var(--bg-tertiary);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
[class*="filter-btn"][data-active="true"] {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent);
}
/* Terminal Area */
[class*="console-terminal-wrapper"] {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: var(--console-terminal-bg, #ffffff);
}
[data-theme="dark"] [class*="console-terminal-wrapper"] {
  background: var(--console-terminal-bg, #0d1117);
}
/* Terminal scrollbar styling */
[class*="console-terminal-wrapper"]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
[class*="console-terminal-wrapper"]::-webkit-scrollbar-track {
  background: transparent;
}
[class*="console-terminal-wrapper"]::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 4px;
}
[data-theme="dark"] [class*="console-terminal-wrapper"]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}
/* Command Input Area */
[class*="command-input-wrapper"] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border);
}
[data-theme="dark"] [class*="command-input-wrapper"] {
  background: var(--bg-tertiary);
  border-color: rgba(255, 255, 255, 0.06);
}
[class*="console-input"] {
  flex: 1;
  padding: 10px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  outline: none;
  transition: all 0.15s ease;
}
[data-theme="dark"] [class*="console-input"] {
  background: var(--border-subtle);
  border-color: var(--border);
  color: #ffffff;
}
[class*="console-input"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}
[class*="console-input"]::placeholder {
  color: var(--text-tertiary);
}
[data-theme="dark"] [class*="console-input"]::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
/* Send Button */
[class*="send-btn"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 90px;
}
[class*="send-btn"]:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-glow);
}
[class*="send-btn"]:active {
  transform: translateY(0);
}
/* ============================================
   XTERM TERMINAL STYLING
   ============================================ */
:root,
html[data-theme="light"] {
  --console-terminal-bg: #ffffff;
  --console-terminal-fg: #172033;
}

html[data-theme="dark"] {
  --console-terminal-bg: #0d1117;
  --console-terminal-fg: #e6edf3;
}

.xterm {
  padding: 16px !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
  background: var(--console-terminal-bg) !important;
  color: var(--console-terminal-fg) !important;
}
.xterm-viewport {
  background-color: var(--console-terminal-bg) !important;
}
.xterm-screen {
  background-color: var(--console-terminal-bg) !important;
}
.xterm-screen canvas {
  background: transparent !important;
}
.xterm .xterm-rows,
.xterm .xterm-rows span {
  color: var(--console-terminal-fg);
}
/* Selection colors */
.xterm-selection div {
  background: rgba(56, 139, 253, 0.4) !important;
}
/* Cursor */
.xterm-cursor {
  background-color: var(--text-placeholder) !important;
}
/* Links in terminal */
.xterm-overlay {
  border-radius: 4px !important;
}
/* Charts */
[class*="graphs-grid"] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
[class*="chart-card"] {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}
[data-theme="dark"] [class*="chart-card"] {
  background: var(--border-subtle);
  border-color: var(--border);
}
[class*="chart-header"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-tertiary);
}
[data-theme="dark"] [class*="chart-header"] {
  border-color: var(--border);
  background: var(--bg-tertiary);
}
[class*="chart-title"] {
  display: flex;
  align-items: center;
  gap: 12px;
}
[class*="chart-icon"] {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 16px;
}
[class*="chart-icon--cpu"] {
  background: var(--accent-muted);
  color: var(--accent);
}
[class*="chart-icon--memory"] {
  background: rgba(175, 82, 222, 0.15);
  color: var(--purple);
}
[class*="chart-icon--network"] {
  background: var(--success-muted);
  color: var(--success);
}
[class*="chart-name"] {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
[data-theme="dark"] [class*="chart-name"] {
  color: #ffffff;
}
[class*="chart-body"] {
  position: relative;
  padding: 16px;
  height: 200px;
}
[class*="chart-offline-overlay"] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-overlay);
  backdrop-filter: blur(2px);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  z-index: 10;
}
[data-theme="dark"] [class*="chart-offline-overlay"] {
  color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   CONSOLE - Terminal et contrôles
   ============================================ */

.console-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
  max-height: 100%;
  overflow: hidden;
}

.console-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  flex: 0 0 auto;
}

[data-theme="dark"] .console-header {
  background: var(--bg-tertiary);
  border-color: var(--border);
}

.console-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.console-title svg {
  color: var(--accent);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.filter-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-right: var(--space-1);
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.filter-btn[data-active="true"] {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent);
}

.error-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--error);
  color: white;
  font-size: 10px;
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  margin-left: 2px;
}

/* Terminal - follows theme via xterm.js theme option */
.console-terminal-wrapper {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  background: var(--console-terminal-bg, #ffffff);
}

.console-terminal {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--console-terminal-bg, #ffffff);
}

.console-terminal .xterm {
  width: 100%;
  height: 100%;
  padding: 12px !important;
  box-sizing: border-box;
  background: var(--console-terminal-bg) !important;
  color: var(--console-terminal-fg) !important;
}

.console-terminal .xterm-viewport {
  overscroll-behavior: contain;
  background-color: var(--console-terminal-bg) !important;
}

.console-terminal .xterm-screen {
  max-width: 100%;
  background-color: var(--console-terminal-bg) !important;
}

.console-terminal .xterm-screen canvas {
  background: transparent !important;
}

/* Command Input */
.command-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}

[data-theme="dark"] .command-input-wrapper {
  background: var(--bg-tertiary);
  border-color: var(--border);
}

.input-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: var(--text-sm);
}

.console-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  outline: none;
  transition: all var(--transition-fast);
}

.console-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.console-input::placeholder {
  color: var(--text-quaternary);
}

.console-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-theme="dark"] .console-input {
  background: var(--border-subtle);
  border-color: var(--border);
}

.send-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  color: white;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.send-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}

.send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .console-container {
    min-height: 300px !important;
    max-height: none !important;
    width: 100% !important;
  }

  .console-header {
    padding: 10px 12px !important;
    gap: 8px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .console-title {
    font-size: 13px !important;
  }

  .filter-group {
    gap: 4px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  .filter-label {
    display: none !important;
  }

  .filter-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .command-input-wrapper {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .send-btn {
    padding: 8px 12px !important;
    min-width: auto !important;
    font-size: 12px !important;
    gap: 0 !important;
  }

  /* Hide "Envoyer" text on mobile, keep icon only */
  .send-btn {
    padding: 8px 10px !important;
  }

  .console-input {
    padding: 8px 12px !important;
    font-size: 13px !important;
    min-width: 0 !important;
  }

  .input-icon {
    display: none !important;
  }

  .graphs-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  [class*="chart-body"] {
    height: 160px;
  }

  .xterm {
    padding: 8px !important;
    font-size: 11px !important;
  }

  /* Console terminal wrapper - ensure full width */
  .console-terminal-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .console-terminal {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
}

@media (max-width: 480px) {
  .console-container {
    min-height: 250px !important;
    max-height: none !important;
  }

  .filter-btn {
    padding: 5px 8px !important;
    font-size: 10px !important;
  }

  .xterm {
    font-size: 10px !important;
  }
}


/* FIX #459 : barre de saisie qui recouvre les dernieres lignes (flex robuste) */
[class*="command-input-wrapper"] { flex-shrink: 0; position: relative; z-index: 2; }
[class*="console-terminal-wrapper"] { min-height: 0; }
.xterm-viewport, .xterm-screen { padding-bottom: 6px; }

/* Hotfix ACLClouds: floating "go to latest log" button injected by XtermScrollDownHelperAddon. */
.console-terminal .xterm-scroll-bottom-helper,
.console-terminal .xterm > div[style*="background-color: rgb(37, 37, 41)"],
.console-terminal .xterm > div[style*="background-color:#252529"] {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  right: 14px !important;
  bottom: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(0, 113, 227, 0.18) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--accent, #0071e3) !important;
  box-shadow: 0 12px 30px rgba(15, 27, 61, 0.16) !important;
  backdrop-filter: blur(10px) saturate(140%);
  cursor: pointer !important;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.console-terminal .xterm-scroll-bottom-helper:hover,
.console-terminal .xterm > div[style*="background-color: rgb(37, 37, 41)"]:hover,
.console-terminal .xterm > div[style*="background-color:#252529"]:hover {
  transform: translateY(-1px);
  border-color: var(--accent, #0071e3) !important;
  background: var(--accent, #0071e3) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(0, 113, 227, 0.28) !important;
}

.console-terminal .xterm-scroll-bottom-helper svg,
.console-terminal .xterm > div[style*="background-color: rgb(37, 37, 41)"] svg,
.console-terminal .xterm > div[style*="background-color:#252529"] svg {
  width: 15px !important;
  height: 15px !important;
  color: currentColor !important;
}

[data-theme="dark"] .console-terminal .xterm-scroll-bottom-helper,
[data-theme="dark"] .console-terminal .xterm > div[style*="background-color: rgb(37, 37, 41)"],
[data-theme="dark"] .console-terminal .xterm > div[style*="background-color:#252529"] {
  border-color: rgba(125, 184, 255, 0.22) !important;
  background: rgba(15, 23, 42, 0.92) !important;
  color: #8ec5ff !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34) !important;
}

[data-theme="dark"] .console-terminal .xterm-scroll-bottom-helper:hover,
[data-theme="dark"] .console-terminal .xterm > div[style*="background-color: rgb(37, 37, 41)"]:hover,
[data-theme="dark"] .console-terminal .xterm > div[style*="background-color:#252529"]:hover {
  background: var(--accent, #0a84ff) !important;
  color: #ffffff !important;
  border-color: var(--accent, #0a84ff) !important;
}