/* ==========================================================================
   CODE-HIGHLIGHTING.CSS - Coloration syntaxique pour code snippets
   ==========================================================================

   ✅ PHASE 3 - 28 décembre 2024

   Styles pour la coloration syntaxique de code dans les templates
   développeurs (portal.html, sandbox/console.html).

   Thème : VS Code Dark+ (style éditeur professionnel)

   Référence : COLORS_CENTRALIZATION_PLAN.md - Phase 3
   ========================================================================== */

/* ==========================================================================
   VARIABLES - Couleurs de coloration syntaxique
   ========================================================================== */

:root {
  /* Backgrounds */
  --syntax-bg: #1e1e1e;                    /* Background principal */
  --syntax-bg-secondary: #2d2d2d;          /* Background inputs, cartes */
  --syntax-bg-header: #323232;             /* Header terminal */

  /* Syntax highlighting colors */
  --syntax-keyword: #569cd6;               /* Bleu - keywords (POST, GET, true, false) */
  --syntax-string: #ce9178;                /* Orange - strings */
  --syntax-comment: #6a9955;               /* Vert - commentaires */
  --syntax-number: #b5cea8;                /* Vert clair - nombres */
  --syntax-property: #9cdcfe;              /* Cyan - propriétés JSON */
  --syntax-text: #d4d4d4;                  /* Gris clair - texte normal */
  --syntax-muted: #808080;                 /* Gris - texte atténué */
  --syntax-success: #198754;               /* Vert - success response */
  --syntax-url: #ce9178;                   /* Orange - URLs/endpoints */

  /* macOS traffic lights (boutons fenêtre) */
  --traffic-light-close: #ff5f56;          /* Rouge */
  --traffic-light-minimize: #ffbd2e;       /* Jaune */
  --traffic-light-maximize: #27ca40;       /* Vert */

  /* Borders */
  --syntax-border: #444;                   /* Bordures inputs, etc */
  --syntax-border-dashed: rgba(255, 255, 255, 0.3); /* Bordures pointillées */
}

/* ==========================================================================
   CODE BLOCKS - Blocs de code génériques
   ========================================================================== */

.code-block {
  background: var(--syntax-bg);
  color: var(--syntax-text);
  font-family: 'SF Mono', Monaco, Inconsolata, 'Courier New', monospace;
  padding: 1.5rem;
  border-radius: 8px;
  overflow: hidden;
}

.code-block pre {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.85rem;
}

/* ==========================================================================
   TERMINAL STYLE - Style console/terminal
   ========================================================================== */

.terminal {
  background: var(--syntax-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.terminal-header {
  background: var(--syntax-bg-header);
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.terminal-content {
  background: var(--syntax-bg);
  color: var(--syntax-text);
  padding: 1.5rem;
  font-family: monospace;
  font-size: 0.85rem;
}

/* macOS traffic lights */
.terminal-dots {
  display: flex;
  gap: 0.5rem;
}

.terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.terminal-dot-close {
  background: var(--traffic-light-close);
}

.terminal-dot-minimize {
  background: var(--traffic-light-minimize);
}

.terminal-dot-maximize {
  background: var(--traffic-light-maximize);
}

/* ==========================================================================
   SYNTAX HIGHLIGHTING - Classes pour colorer le code
   ========================================================================== */

/* Keywords */
.syntax-keyword {
  color: var(--syntax-keyword);
}

/* Strings */
.syntax-string {
  color: var(--syntax-string);
}

/* Comments */
.syntax-comment {
  color: var(--syntax-comment);
}

/* Numbers */
.syntax-number {
  color: var(--syntax-number);
}

/* Properties (JSON keys) */
.syntax-property {
  color: var(--syntax-property);
}

/* Normal text */
.syntax-text {
  color: var(--syntax-text);
}

/* Muted text */
.syntax-muted {
  color: var(--syntax-muted);
}

/* Success (true, success messages) */
.syntax-success {
  color: var(--syntax-success);
}

/* URLs/Endpoints */
.syntax-url {
  color: var(--syntax-url);
}

/* ==========================================================================
   SANDBOX CONSOLE - Styles spécifiques pour la console sandbox
   ========================================================================== */

.sandbox-console {
  background: var(--syntax-bg);
  border-radius: 8px;
  overflow: hidden;
}

.sandbox-method-select {
  width: 100px;
  background: var(--syntax-bg-secondary);
  border-color: var(--syntax-border);
  color: var(--syntax-property);
}

.sandbox-input,
.sandbox-textarea {
  background: var(--syntax-bg-secondary);
  border-color: var(--syntax-border);
  color: var(--syntax-property);
  font-size: 13px;
}

.sandbox-input::placeholder,
.sandbox-textarea::placeholder {
  color: var(--syntax-muted);
}

.sandbox-button-execute {
  background: #0e639c;
  border: none;
  color: #fff;
}

.sandbox-button-execute:hover {
  background: #0a4d7a;
}

.sandbox-label {
  color: var(--syntax-muted);
  font-family: monospace;
  font-size: 0.875rem;
}

.sandbox-response-time {
  color: var(--syntax-comment);
  font-size: 0.875rem;
}

.sandbox-response-headers {
  background: #252526;
  color: var(--syntax-muted);
  font-size: 12px;
  max-height: 120px;
  overflow-y: auto;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 0.5rem;
}

.sandbox-response-body {
  background: #1a1a1a;
  border: 1px solid #333;
  color: var(--syntax-text);
  font-size: 13px;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  border-radius: 4px;
  padding: 1rem;
}

.sandbox-empty-state {
  color: var(--syntax-muted);
  font-family: monospace;
}

.sandbox-empty-icon {
  width: 48px;
  height: 48px;
  color: #444;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .terminal-content,
  .code-block {
    font-size: 0.75rem;
    padding: 1rem;
  }

  .sandbox-input,
  .sandbox-textarea {
    font-size: 12px;
  }
}