/* database-clean-final.css
   Final cleanup for database blocks.
   Goal: one clean card, no ghost selection rectangle, no toolbar escaping right,
   no database being treated like a resizable widget.
*/

/* Outer editor block: transparent carrier only. The real card is .db-shell. */
.editor-blocks .block.block-database,
#editor-blocks .block.block-database,
html[data-visual="liquid-glass"] .editor-blocks .block.block-database,
html[data-visual="liquid-glass"] #editor-blocks .block.block-database {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  --block-width: 100% !important;
  padding: 0 !important;
  margin: 10px 0 18px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* The row/content may not clip the toolbar/table. */
.editor-blocks .block.block-database > .block-row,
#editor-blocks .block.block-database > .block-row {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  align-items: flex-start !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.editor-blocks .block.block-database > .block-row > .block-content,
#editor-blocks .block.block-database > .block-row > .block-content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

/* Kill old selection/resize pseudo layers only for databases. */
.editor-blocks .block.block-database::before,
.editor-blocks .block.block-database::after,
.editor-blocks .block.block-database > .block-row::before,
.editor-blocks .block.block-database > .block-row::after,
.editor-blocks .block.block-database > .block-row > .block-content::before,
.editor-blocks .block.block-database > .block-row > .block-content::after,
#editor-blocks .block.block-database::before,
#editor-blocks .block.block-database::after,
#editor-blocks .block.block-database > .block-row::before,
#editor-blocks .block.block-database > .block-row::after,
#editor-blocks .block.block-database > .block-row > .block-content::before,
#editor-blocks .block.block-database > .block-row > .block-content::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
}

/* Databases are not resizable widgets. */
.editor-blocks .block.block-database .block-resize-handle,
.editor-blocks .block.block-database .block-resize-handle-v,
.editor-blocks .block.block-database .block-resize-handle-c,
#editor-blocks .block.block-database .block-resize-handle,
#editor-blocks .block.block-database .block-resize-handle-v,
#editor-blocks .block.block-database .block-resize-handle-c {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Container inside the editor block. */
.editor-blocks .block.block-database .db-wrap,
#editor-blocks .block.block-database .db-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Single source of truth: this is the database card. 
   Fallback selector covers old builds where database.js still renders .block-database inside .db-wrap. */
.editor-blocks .block.block-database .db-shell,
.editor-blocks .block.block-database .db-wrap > .block-database,
#editor-blocks .block.block-database .db-shell,
#editor-blocks .block.block-database .db-wrap > .block-database {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;

  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-2) 96%, transparent),
      color-mix(in srgb, var(--bg) 92%, transparent)) !important;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
    0 16px 40px rgba(0,0,0,0.18) !important;
  outline: none !important;
}

/* Selected state: one clean subtle ring, not a giant resize square. */
.editor-blocks .block.block-database.selected .db-shell,
.editor-blocks .block.block-database.selected .db-wrap > .block-database,
#editor-blocks .block.block-database.selected .db-shell,
#editor-blocks .block.block-database.selected .db-wrap > .block-database {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent),
    0 0 0 1px color-mix(in srgb, var(--primary) 38%, transparent),
    0 18px 48px rgba(0,0,0,0.20) !important;
}

/* Header */
.editor-blocks .block.block-database .db-header,
#editor-blocks .block.block-database .db-header {
  padding: 16px 18px 8px !important;
  margin: 0 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.editor-blocks .block.block-database .db-name,
#editor-blocks .block.block-database .db-name {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 22px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Toolbar: must stay inside the card. */
.editor-blocks .block.block-database .db-toolbar,
#editor-blocks .block.block-database .db-toolbar {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-2) 92%, transparent),
      color-mix(in srgb, var(--bg) 82%, transparent)) !important;
  border-radius: 0 !important;
}

.editor-blocks .block.block-database .db-toolbar .db-spacer,
#editor-blocks .block.block-database .db-toolbar .db-spacer {
  display: none !important;
  flex: 0 0 0 !important;
}

.editor-blocks .block.block-database .db-tab,
.editor-blocks .block.block-database .db-tool-btn,
#editor-blocks .block.block-database .db-tab,
#editor-blocks .block.block-database .db-tool-btn {
  flex: 0 1 auto !important;
  max-width: 150px !important;
  min-width: 0 !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 6px 10px !important;
  border-radius: 9px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--text-2) !important;
}

.editor-blocks .block.block-database .db-tab:hover,
.editor-blocks .block.block-database .db-tool-btn:hover,
#editor-blocks .block.block-database .db-tab:hover,
#editor-blocks .block.block-database .db-tool-btn:hover {
  background: var(--hover) !important;
  color: var(--text) !important;
}

.editor-blocks .block.block-database .db-tab.active,
#editor-blocks .block.block-database .db-tab.active {
  background: color-mix(in srgb, var(--text) 10%, transparent) !important;
  color: var(--text) !important;
  border-color: color-mix(in srgb, var(--border) 80%, transparent) !important;
}

.editor-blocks .block.block-database .db-tool-btn.primary,
#editor-blocks .block.block-database .db-tool-btn.primary {
  margin-left: auto !important;
  color: var(--text) !important;
  font-weight: 650 !important;
}

/* Table scrolls INSIDE the card, not outside the page. */
.editor-blocks .block.block-database .db-table-wrap,
#editor-blocks .block.block-database .db-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 0 14px 14px !important;
  scrollbar-width: thin !important;
}

.editor-blocks .block.block-database .db-table,
#editor-blocks .block.block-database .db-table {
  width: 100% !important;
  min-width: 720px !important;
  max-width: none !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  margin: 0 !important;
  font-size: 14px !important;
  background: transparent !important;
}

.editor-blocks .block.block-database .db-table th,
.editor-blocks .block.block-database .db-table td,
#editor-blocks .block.block-database .db-table th,
#editor-blocks .block.block-database .db-table td {
  min-width: 112px !important;
  max-width: 190px !important;
  padding: 8px 10px !important;
  border-color: color-mix(in srgb, var(--border) 78%, transparent) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
}

.editor-blocks .block.block-database .db-table th:first-child,
.editor-blocks .block.block-database .db-table td:first-child,
#editor-blocks .block.block-database .db-table th:first-child,
#editor-blocks .block.block-database .db-table td:first-child {
  min-width: 160px !important;
  max-width: 220px !important;
}

.editor-blocks .block.block-database .db-table th[data-col-type="date"],
.editor-blocks .block.block-database .db-table td[data-col-type="date"],
#editor-blocks .block.block-database .db-table th[data-col-type="date"],
#editor-blocks .block.block-database .db-table td[data-col-type="date"] {
  min-width: 130px !important;
}

.editor-blocks .block.block-database .cell-input,
#editor-blocks .block.block-database .cell-input {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  color: var(--text) !important;
  border: 0 !important;
  outline: none !important;
}

.editor-blocks .block.block-database .db-add-row,
#editor-blocks .block.block-database .db-add-row {
  width: 100% !important;
  min-width: 720px !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
  box-sizing: border-box !important;
}

.editor-blocks .block.block-database .db-calc-bar,
#editor-blocks .block.block-database .db-calc-bar {
  min-width: 720px !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(112px, 1fr) !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
  background: color-mix(in srgb, var(--bg-2) 60%, transparent) !important;
}

/* Tags/status stay compact and do not break the table layout. */
.editor-blocks .block.block-database .db-tag,
.editor-blocks .block.block-database .db-status,
#editor-blocks .block.block-database .db-tag,
#editor-blocks .block.block-database .db-status {
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* On narrow page widths, toolbar can scroll instead of escaping. */
@media (max-width: 900px) {
  .editor-blocks .block.block-database .db-toolbar,
  #editor-blocks .block.block-database .db-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .editor-blocks .block.block-database .db-tool-btn.primary,
  #editor-blocks .block.block-database .db-tool-btn.primary {
    margin-left: 0 !important;
  }
}