/**
 * MBIT Editor - SQL Addon Styles
 * Styles for SQL-specific Editor.js blocks
 *
 * Version: 1.0.0
 * Last Updated: 2026-02-19
 *
 * Requires: mbit-editor.css (core styles)
 * NO @import statements - load after core CSS
 */

/* =============================================================================
   DATA SOURCE TABLE
   ============================================================================= */

.data-source-table {
  border-radius: var(--radius-lg, 12px);
  padding: 1.25rem;
  border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.25));
  background: var(--surface-base);
}

.data-source-table__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--text-primary);
}

.data-source-table__label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 0.35rem;
}

.data-source-table__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0.4rem;
  margin-top: 1rem;
}

.data-source-table__cell textarea {
  min-height: 2.5rem;
}

.data-source-table__controls {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.data-source-table__instructions {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0.35rem 0 0;
}

/* =============================================================================
   SQL QUERY EDITOR
   ============================================================================= */

.sql-query-editor {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 0.75rem);
  background: var(--surface-base);
  border-radius: var(--radius-lg, 12px);
  padding: 1.25rem;
  border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.25));
}

.sql-query-editor__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm, 0.5rem);
}

.sql-query-editor__help {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: var(--spacing-2xs, 0.25rem);
}

.sql-query-editor__dataset {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.sql-query-editor__textarea {
  font-family: var(--font-family-mono);
  font-size: 0.875rem;
  line-height: 1.5;
  min-height: 120px;
  resize: vertical;
}

/* =============================================================================
   QUERY RESULT VIEWER
   ============================================================================= */

.query-result-viewer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 0.75rem);
}

.query-result-viewer__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  overflow-x: auto;
}

.query-result-viewer__table th,
.query-result-viewer__table td {
  border: 1px solid var(--border-muted);
  padding: 0.45rem 0.55rem;
  text-align: left;
}

.query-result-viewer__table th {
  background: var(--surface-muted);
  font-weight: 600;
}

.query-result-viewer__table tr:nth-child(even) {
  background: var(--surface-subtle);
}

.query-result-viewer__hint,
.query-result-viewer__stats {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.query-result-viewer__error {
  padding: 0.75rem;
  background: var(--accent-danger-soft, #fee4e2);
  border: 1px solid var(--accent-danger, #dc2626);
  border-radius: var(--radius-md);
  color: var(--accent-danger);
  font-family: var(--font-family-mono);
  font-size: 0.875rem;
}

/* =============================================================================
   COMMAND LINE RECORDER
   ============================================================================= */

.command-line-recorder {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 0.75rem);
}

.command-line-recorder__entries {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 0.75rem);
}

.command-line-recorder__entry {
  border: 1px solid var(--border-default);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  padding: var(--spacing-md, 0.75rem);
  background: var(--surface-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 0.5rem);
}

/* Entry status colors */
.command-line-recorder__entry[data-status='success'],
.command-line-recorder__readonly-entry[data-status='success'] {
  border-left-color: var(--accent-primary, #144acc);
}

.command-line-recorder__entry[data-status='failed'],
.command-line-recorder__readonly-entry[data-status='failed'] {
  border-left-color: var(--accent-danger, #dc2626);
}

.command-line-recorder__entry[data-status='running'],
.command-line-recorder__readonly-entry[data-status='running'] {
  border-left-color: #f59e0b;
}

.command-line-recorder__entry[data-status='pending'],
.command-line-recorder__readonly-entry[data-status='pending'] {
  border-left-color: var(--border-muted);
}

.command-line-recorder__entry-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 0.375rem);
}

.command-line-recorder__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full, 9999px);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.875rem;
  border: 1px solid var(--border-muted);
}

.command-line-recorder__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm, 0.5rem);
}

.command-line-recorder__hint {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.command-line-recorder__readonly-entry {
  border-left: 4px solid var(--border-muted);
  padding-left: var(--spacing-md, 0.75rem);
}

.command-line-recorder__readonly-heading {
  font-size: 1rem;
  font-weight: 600;
}

.command-line-recorder__readonly-status {
  font-weight: 600;
  color: var(--text-secondary);
}

.command-line-recorder__readonly-meta,
.command-line-recorder__readonly-timestamp,
.command-line-recorder__readonly-notes {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* =============================================================================
   MERMAID VERBALIZER
   ============================================================================= */

.mermaid-verbalizer {
  border-radius: var(--radius-lg, 12px);
  padding: 1.25rem;
  border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.25));
  background: var(--surface-base);
}

.mermaid-verbalizer__steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.mermaid-verbalizer__step {
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  background: var(--surface-subtle);
}

.mermaid-verbalizer__step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--accent-primary);
  color: var(--text-on-accent);
  font-size: 0.75rem;
  font-weight: 600;
  margin-right: 0.5rem;
}

/* =============================================================================
   UML TERMINOLOGY COACH
   ============================================================================= */

.uml-terminology-coach {
  border-radius: var(--radius-lg, 12px);
  padding: 1.25rem;
  border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.25));
  background: var(--surface-base);
}

.uml-terminology-coach__entries {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.uml-terminology-coach__entry {
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  background: var(--surface-subtle);
}

.uml-terminology-coach__term {
  font-weight: 600;
  color: var(--accent-primary);
}

.uml-terminology-coach__definition {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

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

@media (max-width: 768px) {
  .data-source-table,
  .sql-query-editor,
  .mermaid-verbalizer,
  .uml-terminology-coach {
    padding: 1rem;
  }

  .sql-query-editor__controls {
    flex-direction: column;
    align-items: stretch;
  }

  .query-result-viewer__table {
    display: block;
    overflow-x: auto;
  }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
  .sql-query-editor__controls,
  .command-line-recorder__actions,
  .data-source-table__controls {
    display: none;
  }

  .data-source-table,
  .sql-query-editor,
  .mermaid-verbalizer,
  .uml-terminology-coach {
    border: 1px solid #000;
    background: #fff;
  }
}