html, body {
 height: 100%;
 margin: 0;
 font-family: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 overflow-x: hidden;
}

#main {
 display:flex;
 height:100vh;
}

button {
 width:100%;
 margin-bottom:8px;
 padding:8px;
 border:none;
 border-radius:6px;
 background:#007bff;
 color:white;
 font-weight:600;
 cursor:pointer;
 transition:all 0.2s;
}

button:hover {
 background:#0056d2;
 transform:scale(1.02);
}

#canvasWrap {
  flex: 1;
  display: block;
  position: relative;
  overflow: auto;
  min-height: 0;
  min-width: 0;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: visible;
}

/* Tables */
.table {
 position:absolute;
 width:260px;
 background:#ffffff;
 border-radius:10px;
 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 border:1px solid #ddd;
 overflow:hidden;
 transition:transform 0.15s ease;
}

.table:hover {
 transform:scale(1.02);
}

/* Header */
.header {
 background:linear-gradient(135deg,#007bff,#00a2ff);
 color:white;
 padding:8px;
 font-weight:bold;
 cursor:move;
}

/* Metadata */
.meta {
 font-size:10px;
 background:#f0f3ff;
 padding:4px;
 color:#444;
 transition:transform 0.15s ease;
}
 

/* Columns */
.col {
 padding:5px;
 font-size:12px;
 border-top:1px solid #eee;
 display:flex;
 justify-content:space-between;
 align-items:center;
 transition:background 0.15s;
}

.col:hover {
 background:#eaf3ff;
}


.col:active {
 background:#d0e6ff;
}


/* Column badges */
.badges {
 font-size:10px;
}

.badge-pk { color:#d9534f; }
.badge-fk { color:#5bc0de; }
.badge-key { color:#28a745; }

/* SVG lines */
#lines {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

/* Models */
.model {
  display:none;
  position:fixed;
  top:10%;
  left:50%;
  transform: translateX(-50%);
  width:650px;
  max-height: 80vh;   /* ✅ ADD */
  overflow-y: auto;   /* ✅ ADD */
  background:white;
  padding:15px;
  border-radius:10px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  z-index:9999;
  pointer-events: auto;
}


.model h3 {
 margin-top:0;
}

.model input, .model select {
 width:100%;
 padding:6px;
 margin-bottom:8px;
 border-radius:6px;
 border:1px solid #ccc;
}


.model input, .model select {
  margin-bottom: 10px;
}

.model.dragging {
  user-select: none;
  cursor: grabbing;
}

.model h3 {
  cursor: grab;
}

.modal-handle {
  cursor: grab;
}


/* Preview */
#previewModel {
 display:none;
 position:fixed;
 top:10%;
 left:10%;
 width:80%;
 height:70%;
 background:white;
 border-radius:10px;
 padding:10px;
 overflow:auto;
 box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

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

td, th {
 padding:6px;
 border:1px solid #ccc;
}

.checkbox-row {
 display:flex;
 gap:20px;
 align-items:center;
 margin-bottom:10px;
}

.checkbox-row label {
 display:flex;
 align-items:center;
 gap:6px;
 font-size:13px;
}

/* Right content area */

#right {
 flex:1;
 display:flex;
 flex-direction:column;
 min-height:0;
 min-width:0; 
}
 

#tabs {
 height:38px;
 flex-shrink:0;
 display:flex;
 align-items:center;
 padding:4px;
 background:#fff;
 border-bottom:1px solid #ccc;
 overflow-x:auto;
 overflow-y:hidden;
 scrollbar-width: thin;
 white-space:nowrap;
 max-width:100%; 
} 


.tab {
 flex: 0 0 auto;       
 max-width: 160px;       
 padding: 8px 12px;
 margin-right: 4px;
 border-top-left-radius: 6px;
 border-top-right-radius: 6px;
 background: #eee;
 cursor: pointer;
 overflow: hidden;         
 white-space: nowrap;      
 text-overflow: ellipsis;  
 position: relative;
}

.tab.active { background:#007bff; color:white;}

.tab:hover::after {
 content: attr(data-name);
 position: absolute;
 bottom: -28px;
 left: 0;
 background: #333;
 color: #fff;
 padding: 4px 8px;
 border-radius: 4px;
 font-size: 11px;
 white-space: nowrap;
 z-index: 100;
}



#viewport {
  position: relative;
  transform-origin: 0 0;
  overflow: visible;
}

/* Sidebar */
#left {
 width:220px;
 display:flex; 
 flex-direction:column;
 padding:12px;
 border-right:1px solid #ddd;
 background:#ffffff;
 box-shadow:2px 0 6px rgba(0,0,0,0.05);
 gap:10px;
}


/* Branding box container */
.branding-box {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 8px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Logo styling */
.branding-box img {
    height: 40px;
    width: auto;
    margin-right: 10px;
}

/* Brand text styling */
.branding-box .brand-name {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}


.section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


#rulesEditor input,
#rulesEditor select {
  font-size: 12px;
}

/* Wider modal for dense config editors */
.model-wide {
  width: min(980px, 95vw);
  max-width: 95vw;
}

/* Generator editor layout */
#generatorsGrid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}

.generator-card {
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fafafa;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.generator-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.generator-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

.generator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}

.generator-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #444;
}

.generator-field input,
.generator-field select {
  width: 100%;
  box-sizing: border-box;
}

.generator-row-full {
  grid-column: 1 / -1;
}

.generator-inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 22px;
  font-size: 13px;
}

.generator-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.generator-delete-btn {
  width: auto;
  background: #dc3545;
  padding: 6px 10px;
}

.generator-delete-btn:hover {
  background: #bb2d3b;
}

@media (max-width: 720px) {
  .generator-grid {
    grid-template-columns: 1fr;
  }

  .generator-inline-check {
    padding-top: 0;
  }
}


#generatorsEditor .generator-actions {
  position: sticky;
  bottom: 0;
  background: white;
  padding-top: 10px;
  border-top: 1px solid #eee;
}


.ai-builder-section textarea {
  width: 100%;
  min-height: 120px;
  padding: 8px;
  resize: vertical;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-family: inherit;
  font-size: 12px;
}

.ai-status {
  font-size: 12px;
  margin: 6px 0;
  color: #444;
}

#aiModelJsonPreview {
  max-height: 260px;
  overflow: auto;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px;
  font-size: 11px;
  white-space: pre-wrap;
}



/* ERD Pro pass 22 - left panel owns its vertical scroll.

Goal:
- Browser/body should not scroll.
- Left panel scrolls independently when its controls exceed viewport height.
- Right side should have one meaningful scroll area: the canvas (#canvasWrap).
- Tabs stay fixed above the canvas.

Add this near the end of styles.css so it overrides earlier layout rules.
*/

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#main {
  height: 100vh;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

#left {
  width: 220px;
  flex: 0 0 220px;
  height: 100vh;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  overscroll-behavior: contain;
}

#right {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#tabs {
  flex: 0 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
}

#canvasWrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  position: relative;
  overscroll-behavior: contain;
}

#viewport {
  flex: none;
  position: relative;
  transform-origin: 0 0;
  overflow: visible;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: visible;
}

#lines {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

/* Optional: make the left scroll feel consistent with the rest of the UI. */
#left::-webkit-scrollbar,
#canvasWrap::-webkit-scrollbar,
#tabs::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#left::-webkit-scrollbar-thumb,
#canvasWrap::-webkit-scrollbar-thumb,
#tabs::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 8px;
  border: 2px solid #f8fafc;
}

#left::-webkit-scrollbar-track,
#canvasWrap::-webkit-scrollbar-track,
#tabs::-webkit-scrollbar-track {
  background: #f8fafc;
}

/* add to mactch landing */

:root {
  --app-bg: #f7fbff;
  --app-surface: #ffffff;
  --app-surface-2: #eef6ff;
  --app-ink: #102033;
  --app-muted: #5d6b7c;
  --app-primary: #0078d4;
  --app-primary-2: #00a2ff;
  --app-border: #d8e5f2;
  --app-shadow: 0 14px 34px rgba(15, 39, 80, 0.14);
  --app-shadow-soft: 0 8px 22px rgba(15, 39, 80, 0.09);
  --app-radius: 14px;
  --app-radius-lg: 20px;
}

html,
body {
  background: radial-gradient(circle at top left, #e0f3ff, transparent 34%), var(--app-bg);
  color: var(--app-ink);
  font-family: "Segoe UI", Inter, Roboto, Arial, sans-serif;
}

#main {
  background: transparent;
}

/* Left control panel */
#left {
  background: rgba(255, 255, 255, 0.88);
  border-right: 1px solid rgba(216, 229, 242, 0.95);
  box-shadow: 8px 0 28px rgba(15, 39, 80, 0.08);
  backdrop-filter: blur(14px);
}

.branding-box,
.section {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-soft);
}

.section {
  padding: 10px;
}

.section label,
#left label {
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 700;
}

/* Buttons */
button {
  border-radius: 999px;
  background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2));
  box-shadow: 0 8px 18px rgba(0, 120, 212, 0.20);
  font-weight: 700;
  letter-spacing: -0.01em;
}

button:hover {
  background: linear-gradient(135deg, #006cbe, #008ee6);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 120, 212, 0.27);
}

button:active {
  transform: translateY(0);
}

button[style*="background:#dc3545"],
button[style*="background: #dc3545"] {
  background: #dc3545 !important;
  box-shadow: 0 8px 18px rgba(220, 53, 69, 0.20);
}

/* Inputs */
input,
select,
textarea,
.model input,
.model select,
.model textarea {
  border: 1px solid #cbddec;
  border-radius: 10px;
  background: #ffffff;
  color: var(--app-ink);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

input:focus,
select:focus,
textarea:focus,
.model input:focus,
.model select:focus,
.model textarea:focus {
  border-color: var(--app-primary-2);
  box-shadow: 0 0 0 3px rgba(0, 162, 255, 0.16);
}

/* Right side */
#right {
  background: transparent;
}

#tabs {
  background: rgba(255,255,255,0.74);
  border-bottom: 1px solid var(--app-border);
  backdrop-filter: blur(12px);
  padding-top: 8px;
}

.tab {
  background: #ffffff;
  border: 1px solid var(--app-border);
  border-bottom: none;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  color: var(--app-muted);
  font-weight: 800;
}

.tab.active {
  background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2));
  color: #ffffff;
  border-color: transparent;
}

#canvasWrap {
  background:
    radial-gradient(circle at top left, rgba(0,162,255,.10), transparent 30%),
    linear-gradient(90deg, rgba(180, 211, 236, .28) 1px, transparent 1px),
    linear-gradient(rgba(180, 211, 236, .28) 1px, transparent 1px),
    var(--app-bg);
  background-size: auto, 24px 24px, 24px 24px, auto;
}

/* Table cards */
.table {
  width: 270px;
  background: var(--app-surface);
  border: 1px solid #cfe1f1;
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow);
  overflow: hidden;
}

.table:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 20px 48px rgba(15, 39, 80, 0.18);
}

.header {
  background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2));
  padding: 10px 12px;
  font-size: 13px;
  letter-spacing: .01em;
}

.meta {
  background: #eef6ff;
  color: #4d6580;
  border-bottom: 1px solid var(--app-border);
}

.col {
  min-height: 30px;
  border-top: 1px solid #edf4fb;
  color: #1f3347;
}

.col:hover {
  background: #e8f5ff;
}

.badge-pk { color: #d64545; font-weight: 800; }
.badge-fk { color: #0078d4; font-weight: 800; }
.badge-key { color: #17803d; }

/* SVG FK lines */
#lines path {
  stroke: #5d7f9f;
  stroke-width: 1.9;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.8));
}

/* Modals */
.model,
.erd-dialog {
  border: 1px solid var(--app-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(15, 39, 80, 0.28) !important;
}

.model h3 {
  color: var(--app-ink);
}

.erd-dialog-header {
  background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2)) !important;
}

.erd-dialog-secondary {
  background: #eef2f6 !important;
  color: #243042 !important;
  box-shadow: none !important;
}

/* Preview/import table */
#previewTable,
#previewTable table {
  border-color: var(--app-border);
}

#previewTable th {
  background: #eef6ff;
  color: var(--app-ink);
}

/* Scrollbars */
#left::-webkit-scrollbar,
#canvasWrap::-webkit-scrollbar,
#tabs::-webkit-scrollbar,
.model::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#left::-webkit-scrollbar-thumb,
#canvasWrap::-webkit-scrollbar-thumb,
#tabs::-webkit-scrollbar-thumb,
.model::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 8px;
  border: 2px solid #f8fafc;
}

#left::-webkit-scrollbar-track,
#canvasWrap::-webkit-scrollbar-track,
#tabs::-webkit-scrollbar-track,
.model::-webkit-scrollbar-track {
  background: #f8fafc;
}

/* Small polish for version badge / status text if present */
#versionBadge,
#fileName {
  color: var(--app-muted);
  font-size: 12px;
}