/* SQL-Labor-spezifische Ergänzungen zur Werkstatt-Familie. */
.toolbar { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.template-picker { display: grid; gap: 2px; margin: 0; color: #53627e; font-size: .76rem; font-weight: 700; }
.template-picker select { min-width: 230px; padding: 6px 8px; border: 1px solid #aeb8ce; border-radius: 6px; background: #fbfcff; color: var(--ink); font: 400 .9rem/1.25 system-ui, -apple-system, "Segoe UI", sans-serif; }
.template-picker select:disabled { color: #65728c; cursor: wait; }
.main-grid { display: grid; grid-template-columns: minmax(440px, 2fr) minmax(340px, 1fr); gap: 14px; min-height: 520px; }
.bottom-grid { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); gap: 14px; margin-top: 14px; }
.sql-panel { display: flex; flex-direction: column; min-width: 0; }
.message { min-height: 0; }
.message:not(:empty) { margin: 8px 0; padding: 8px 10px; border-radius: 6px; background: #e4f6eb; color: var(--success); }
.message.error { background: #ffeaed; color: var(--danger); }
.tool-link { display: inline-block; }
.save-state { margin-left: auto; color: #53627e; font-size: .8rem; }

.topic-chip { display: inline-block; padding: 3px 7px; border: 1px solid #aeb8ce; border-radius: 5px; background: var(--card); color: #51627d; white-space: nowrap; font-size: .75rem; font-weight: 700; }

.schema-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; color: #52627d; font-size: .78rem; }
.legend-pk, .legend-fk { display: inline-block; }
.legend-pk { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.legend-fk { text-decoration-line: overline; text-decoration-style: dashed; text-decoration-thickness: 1px; }
.schema-model { position: relative; min-height: 240px; overflow: auto; background-color: var(--paper); background-image: radial-gradient(#d9d5c8 1px, transparent 1px); background-size: 14px 14px; border: 1px solid var(--line); border-radius: 6px; }
.schema-empty { margin: 0; padding: 18px; color: #65728c; }
.schema-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--schema-columns), minmax(180px, 1fr)); grid-template-rows: repeat(var(--schema-rows), auto); gap: 28px; align-items: start; min-width: var(--schema-width); padding: 14px; }
.schema-links { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.relationship { fill: none; stroke: #4d669c; stroke-width: 1.5; }
.schema-class { align-self: start; overflow: hidden; background: var(--card); border: 1px solid #141414; border-radius: 0; box-shadow: 0 1px 3px #1d316e22; }
.schema-class.is-centered { align-self: center; }
.schema-class header { padding: 5px 9px; border-bottom: 1px solid #141414; background: #f0dcc4; color: #111; text-align: center; font-weight: 800; }
.schema-class > p { margin: 0; padding: 6px 8px; border-bottom: 1px solid var(--line); color: #56647b; font-size: .76rem; line-height: 1.32; }
.schema-class ul { margin: 0; padding: 3px 7px; list-style: none; }
.class-attribute { display: flex; gap: 4px; align-items: baseline; min-height: 1.65em; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.class-attribute strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.class-attribute small { color: #65728c; font: inherit; }
.class-attribute.key-pk strong { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.class-attribute.key-fk strong { text-decoration-line: overline; text-decoration-style: dashed; text-decoration-thickness: 1px; }

.sql-source { min-height: 255px; resize: vertical; font: 14px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4; }
.project-introduction { margin: 10px 0 14px; color: #40506d; line-height: 1.5; white-space: pre-line; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 12px; }
.save-title { flex: 1 1 180px; margin: 0; }
.syntax-status { min-height: 1.35em; margin: 7px 0 0; color: var(--success); font-size: .88rem; }
.result-panel { min-width: 0; }
.result-empty { color: #65728c; }
.result-table { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { background: #edf0f6; color: #253a5c; }
.saved-panel { margin-top: 14px; }
.saved { display: grid; gap: 8px; }
.saved-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.saved-item > div:first-child { min-width: 0; }
.saved-item strong { display: block; }
.saved-item span { display: block; color: #65728c; font-size: .8rem; }
.saved-item code { display: inline-block; max-width: 100%; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-item > div:last-child { display: flex; flex: 0 0 auto; gap: 6px; }
.danger-button { color: #962b41 !important; border-color: #d8aab3 !important; }

.diagram-toggle, .diagram-scrim { display: none; }
@media (max-width: 800px) {
  .main-grid, .bottom-grid { grid-template-columns: 1fr; }
  .main-grid { min-height: 0; }
  .diagram-panel { position: fixed; z-index: 45; top: 10px; bottom: 10px; left: 0; width: min(84vw, 360px); max-height: none; margin: 0; padding: 0; overflow: visible; background: transparent; border: 0; box-shadow: none; transform: translateX(calc(-100% + 32px)); transition: transform .22s ease; }
  .diagram-panel.is-open { transform: translateX(0); }
  .diagram-drawer-content { height: 100%; overflow: auto; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 0 8px 8px 0; box-shadow: 0 10px 30px #17234244; }
  .diagram-toggle { display: block; position: absolute; z-index: 2; top: 50%; right: -40px; width: 40px; height: 104px; padding: 8px 9px; border-radius: 0 6px 6px 0; background: var(--accent); box-shadow: 2px 3px 8px #17234233; writing-mode: vertical-rl; text-orientation: mixed; transform: translateY(-50%); }
  .diagram-scrim { display: block; position: fixed; z-index: 40; inset: 0; pointer-events: none; background: #17234255; opacity: 0; transition: opacity .22s ease; }
  body.diagram-drawer-open .diagram-scrim { opacity: 1; pointer-events: auto; }
  .toolbar { flex-wrap: wrap; }
  .template-picker { flex: 1 1 220px; }
  .template-picker select { width: 100%; }
  .save-state { width: 100%; margin-left: 0; order: 2; }
}
@media (max-width: 520px) {
  .actions { align-items: stretch; flex-direction: column; }
  .saved-item { align-items: flex-start; flex-direction: column; }
}