/* SQL columns, indexes and connections. */
#sql-export-preview{width:100%;min-height:260px;max-height:50dvh;resize:vertical;padding:12px;background:var(--field);color:var(--ink);border:1px solid var(--border);border-radius:6px;font:12px/1.6 "Google Sans Code",monospace;white-space:pre;}
#sql-export-error{color:var(--accent);font-size:13px;line-height:1.5;}
.sql-columns{padding: 7px 0px;}
.sql-column{position: relative; min-height: 30px; padding: 0px 14px; gap: 6px; font-family: "Google Sans", sans-serif; font-size: 14px;}
.sql-column .member-type{font-family: "Google Sans", sans-serif; font-size: 12px;}
.sql-key{width: 44px; gap: 4px; flex-shrink: 0; color: var(--class-color); font-size: 20px;}
.sql-key-label{font: 700 10px "Google Sans Code",monospace;}
.sql-column-name{display: flex; align-items: center; gap: 4px; min-width: 0;}
.sql-column-name input{min-width: 0; width: 100%;}
.sql-foreign-key{color: var(--accent); flex-shrink: 0;}
.sql-port{position: absolute; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--surface-raised); background: var(--accent); padding: 0px; opacity: 0; pointer-events: none; cursor: crosshair; z-index: 4;}
.sql-port.left{left: -7px;}
.sql-port.right{right: -7px;}
.sql-node.selected .sql-port,.sql-connecting .sql-port{opacity: 1; pointer-events: auto;}
.sql-column.linked,.sql-column.drop-column{background: var(--accent-soft); color: var(--class-dark);}
.sql-primary{font-size: 22px; color: var(--subtle); padding: 0px;}
.sql-primary.on{color: var(--accent);}
.sql-preview{stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5, 4; fill: none; pointer-events: none;}
.sql-relation.active .relation-line{stroke: var(--accent); stroke-width: 2;}
.sql-relation.active .relation-line:not(.sql-cardinality){stroke-dasharray: 7, 4;}
.sql-relation:focus .relation-line{stroke: var(--accent);}
#sql-connection-menu{position: fixed; width: 300px; max-width: calc(-16px + 100vw); background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; box-shadow: rgba(38, 45, 59, 0.145) 0px 8px 30px; z-index: 50; overflow: hidden;}
.sql-endpoints{display: flex; align-items: center; gap: 12px; padding: 14px; color: var(--muted);}
.sql-endpoint{flex: 1 1 0%; min-width: 0px; background: var(--surface); padding: 8px 10px; border-radius: 5px; font: 12px "Google Sans Code", monospace;}
.sql-endpoint span,.sql-endpoint strong{display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.sql-endpoint strong{color: var(--accent); margin-top: 5px; font-weight: 500;}
.sql-endpoint i{display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px;}
.sql-connection-actions{display: flex; gap: 7px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--border); background: var(--surface);}
.sql-connection-actions > button{padding: 5px 10px; border-radius: 5px; font-size: 13px; color: var(--muted);}
.sql-connection-actions > button[aria-pressed="true"]{background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-border);}
.sql-connection-actions .sql-delete-connection{margin-left: auto; padding: 5px;}
.sql-mode .member-row{grid-template-columns: minmax(0px, 1.4fr) minmax(0px, 1fr) 24px 24px 24px;}
.sql-key .icon,.sql-primary .icon{width: 17px; height: 17px; vertical-align: middle;}
.sql-primary{display: flex; align-items: center; justify-content: center; background: transparent;}
.sql-key{display: flex; align-items: center;}
#sql-index-menu{position: fixed; z-index: 60; width: 228px; padding: 8px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 9px; box-shadow: rgba(38, 45, 59, 0.15) 0px 8px 28px; color: var(--ink);}
.sql-index-heading{padding: 5px 10px 8px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;}
#sql-index-menu button{display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border-radius: 5px; font-size: 15px; text-align: left;}
#sql-index-menu button > span:nth-child(2){flex: 1 1 0%;}
#sql-index-menu button > .icon{width: 20px; height: 20px; color: var(--muted);}
#sql-index-menu button[aria-checked="true"]{background: var(--accent-soft); color: var(--accent); font-weight: 650;}
#sql-index-menu button[aria-checked="true"] > .icon{color: var(--accent);}
#sql-index-menu button:hover,#sql-index-menu button:focus-visible{background: var(--surface); outline: 1px solid var(--accent-border);}
.sql-index-check{width: 16px; display: flex;}
.sql-index-check .icon{width: 16px; height: 16px;}
.sql-cardinality{stroke-linejoin: round; stroke-linecap: round;}