body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
}

/* Draggable Buttons Panel Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
}

/* Draggable Buttons Panel Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
}

/* Draggable Buttons Panel Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#tutorial-content {
    height: calc(100vh - 80px);
    overflow-y: auto;
}

.editor-container, .output-container {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#sql-editor {
    font-family: "Courier New", Courier, monospace;
    background-color: #fff;
    border: 1px solid #ced4da;
}

#output {
    min-height: 100px;
    background-color: #fff;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output table {
    width: 100%;
    border-collapse: collapse;
}

#output th, #output td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
}

#output th {
    background-color: #e9ecef;
}

.accordion-body ul {
    padding-left: 1.2rem;
}

.fill-sql {
    margin-top: 10px;
}

/* --- Custom Focus Ring --- */
/* Remove default outline and replace with a box-shadow for a cleaner look */
.btn:focus, .btn:focus-visible,
.accordion-button:focus,
.CodeMirror-focused {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- CodeMirror Theme Override --- */
.cm-s-eclipse.CodeMirror {
  background-color: #ffffff !important;
  width: 100%;
  height: 100%;
}

/* Draggable Buttons Panel Styles */
#draggable-buttons {
    /* Remove absolute positioning for better mobile flow */
    position: static; /* Change to static or relative */
    top: auto;
    right: auto;
    transform: none;
    background-color: #f8f9fa; /* Light background */
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1060; /* Ensure it's above other content */
    padding: 10px; /* Padding around the buttons */
    cursor: grab; /* Indicate it's draggable */
    display: flex; /* Use flexbox for internal alignment */
    justify-content: center; /* Center buttons horizontally */
    align-items: center; /* Center buttons vertically */
    width: auto; /* Allow width to be fluid */
    margin-top: 15px; /* Add some top margin */
    margin-bottom: 15px; /* Add some bottom margin */
}

/* Media queries for responsiveness */
@media (max-width: 767.98px) { /* For small devices (phones) */
    #tutorial-content {
        height: auto; /* Allow height to be natural */
        margin-bottom: 20px; /* Add space below tutorial content */
    }

    .editor-container {
        padding: 1rem; /* Reduce padding on smaller screens */
    }

    #sql-editor {
        min-height: 150px; /* Ensure editor is tall enough */
    }

    #output {
        overflow-x: auto; /* Enable horizontal scrolling for tables */
    }

    #draggable-buttons {
        width: 100%; /* Full width on small screens */
        flex-wrap: wrap; /* Allow buttons to wrap */
        justify-content: space-around; /* Distribute buttons */
    }

    .btn-group {
        width: 100%; /* Make button groups take full width */
        display: flex;
        flex-wrap: wrap;
    }

    .btn-group .btn {
        flex: 1 1 auto; /* Make buttons expand to fill space */
        margin: 5px; /* Add some margin between buttons */
    }
}

.copy-sql{
    height: 31px;
    margin-top: 10px;
}