body[data-database-module] {
  --db-brand: #2f67d8;
  --db-brand-soft: #eef4ff;
  --db-ink: #1f2937;
  --db-muted: #667085;
  --db-line: #dfe4ec;
  --db-panel: #ffffff;
  --db-soft: #f7f9fc;
  --db-success: #168654;
  --db-danger: #d14343;
  background-color: var(--app-page-bg-color);
  background-image: var(--app-page-bg-image);
}

body[data-database-module] [hidden] { display: none !important; }
body[data-database-module].database-modal-open { overflow: hidden; }

body[data-database-module] .database-workspace {
  min-width: 0;
  min-height: calc(100vh - var(--topbar-height));
  padding: 16px 18px 32px;
}

body[data-database-module] .database-list-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 14px;
}

body[data-database-module] .database-list-search {
  position: relative;
  width: min(340px, 100%);
}

body[data-database-module] .database-list-search i {
  position: absolute;
  top: 50%;
  left: 11px;
  color: #8a94a6;
  font-size: 13px;
  transform: translateY(-50%);
}

body[data-database-module] .database-list-search input,
body[data-database-module] .database-list-filter select {
  height: 34px;
  border: 1px solid var(--db-line);
  border-radius: 5px;
  background: #fff;
  color: #344054;
  font-size: 12px;
  outline: none;
}

body[data-database-module] .database-list-search input {
  width: 100%;
  font-weight: normal !important;
}

body[data-database-module] .database-list-filter select { min-width: 132px; padding: 0 28px 0 10px; }
body[data-database-module] .database-list-search input:focus,
body[data-database-module] .database-list-filter select:focus { border-color: #8baded; box-shadow: 0 0 0 3px rgba(47, 103, 216, 0.1); }
body[data-database-module] .database-list-count { margin-left: auto; color: #8a94a6; font-size: 12px; }

body[data-database-module] .database-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(286px, 336px));
  gap: 18px;
  padding: 0;
}

body[data-database-module] .database-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 178px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(151, 170, 199, 0.4);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(28, 44, 74, 0.055);
  color: var(--db-ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body[data-database-module] .database-card:hover,
body[data-database-module] .database-card:focus-visible {
  border-color: rgba(47, 103, 216, 0.42);
  box-shadow: 0 14px 32px rgba(28, 44, 74, 0.11);
  outline: none;
  transform: translateY(-2px);
}

body[data-database-module] .database-card-main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 30px;
  align-items: flex-start;
  gap: 0 13px;
  min-width: 0;
}

body[data-database-module] .database-card-icon {
  display: grid;
  grid-column: 1;
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #cfddf8;
  border-radius: 8px;
  background: #edf4ff;
  color: var(--db-brand);
  font-size: 18px;
}

body[data-database-module] .database-card-icon.remote { border-color: #cde5dd; background: #edf8f4; color: #168654; }
body[data-database-module] .database-card-copy { display: contents; min-width: 0; }

body[data-database-module] .database-card-copy h1 {
  grid-column: 2;
  grid-row: 1;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: #172033;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-database-module] .database-card-copy > span {
  grid-column: 2;
  grid-row: 2;
  overflow: hidden;
  color: #8792a5;
  font-size: 11px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-database-module] .database-card-copy p {
  display: -webkit-box;
  grid-column: 1 / 4;
  grid-row: 3;
  min-height: 38px;
  margin: 13px 0 0;
  overflow: hidden;
  color: #5f6b7c;
  font-size: 12px;
  line-height: 19px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-database-module] .database-card-setting.btn {
  display: grid;
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: start;
  justify-self: end;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid #e0e5ed;
  border-radius: 5px;
  background: #fff;
  color: #667085;
}

body[data-database-module] .database-card-setting.btn:hover { border-color: #b8caec; background: var(--db-brand-soft); color: var(--db-brand); }

body[data-database-module] .database-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}

body[data-database-module] .database-card.is-plan-restricted {
  border-color: #f1c56b;
  background: #fffbef;
}

body[data-database-module] .database-status[data-status="PLAN_RESTRICTED"] {
  color: #9a6700;
  background: #fff3cd;
}

body[data-database-module] .database-status[data-status="PLAN_RESTRICTED"] i {
  background: #d99a00;
}

body[data-database-module] .database-plan-restricted {
  max-width: 680px;
  margin: 48px auto;
  align-items: stretch;
  text-align: left;
}

body[data-database-module] .database-plan-restricted > strong,
body[data-database-module] .database-plan-restricted > span,
body[data-database-module] .database-plan-restricted > i {
  text-align: center;
}

body[data-database-module] .database-plan-restricted dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0;
}

body[data-database-module] .database-plan-restricted dl div {
  padding: 12px;
  border: 1px solid #dfe6ef;
  border-radius: 6px;
  background: #fff;
}

body[data-database-module] .database-plan-restricted dl div:last-child {
  grid-column: 1 / -1;
}

body[data-database-module] .database-plan-restricted dt {
  color: #667085;
  font-size: 12px;
  font-weight: 500;
}

body[data-database-module] .database-plan-restricted dd {
  margin: 4px 0 0;
  color: #172033;
  font-weight: 600;
  overflow-wrap: anywhere;
}

body[data-database-module] .database-plan-restricted > div:last-child {
  display: flex;
  justify-content: center;
  gap: 10px;
}

body[data-database-module] .database-card-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid #d4def2;
  border-radius: 999px;
  background: #f4f7fd;
  color: #46628f;
  font-size: 11px;
  font-weight: 600;
}

body[data-database-module] .database-status { display: inline-flex; align-items: center; gap: 5px; color: #6c7788; font-size: 11px; }
body[data-database-module] .database-status i { width: 6px; height: 6px; border-radius: 50%; background: #9ba5b4; }
body[data-database-module] .database-status[data-status="UNTESTED"] { color: #778294; }
body[data-database-module] .database-status[data-status="UNTESTED"] i { background: #9ba5b4; }
body[data-database-module] .database-status[data-status="TESTING"] { color: var(--db-brand); }
body[data-database-module] .database-status[data-status="TESTING"] i { background: var(--db-brand); }
body[data-database-module] .database-status[data-status="CONNECTED"] { color: #24734a; }
body[data-database-module] .database-status[data-status="CONNECTED"] i { background: var(--db-success); }
body[data-database-module] .database-status[data-status="FAILED"] { color: var(--db-danger); }
body[data-database-module] .database-status[data-status="FAILED"] i { background: var(--db-danger); }

body[data-database-module] .database-create-entry {
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  border-style: dashed;
  background: #fbfcfe;
  text-align: left;
}

body[data-database-module] .database-create-entry strong { font-size: 15px; font-weight: 700; }
body[data-database-module] .database-create-entry small { color: #a15f11; font-size: 11px; line-height: 1.5; }
body[data-database-module] .database-create-entry:hover .create-plus { border-color: var(--db-brand); background: var(--db-brand); color: #fff; }

body[data-database-module] .database-filter-empty,
body[data-database-module] .database-list-state {
  display: grid;
  min-height: 178px;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 1px dashed var(--db-line);
  border-radius: 8px;
  background: #fbfcfe;
  color: #8792a5;
  text-align: center;
}

body[data-database-module] .database-filter-empty i,
body[data-database-module] .database-list-state > i { color: #8fa6cd; font-size: 25px; }
body[data-database-module] .database-filter-empty strong,
body[data-database-module] .database-list-state h2 { margin: 0; color: #465267; font-size: 13px; font-weight: 650; }
body[data-database-module] .database-filter-empty span,
body[data-database-module] .database-list-state p { margin: 0; color: #8a94a6; font-size: 11px; line-height: 1.5; }
body[data-database-module] .database-list-empty { max-width: 690px; margin-top: 18px; }
body[data-database-module] .database-list-error { max-width: 690px; border-color: #efc9c5; background: #fff8f7; }

body[data-database-module] .database-list-loading {
  grid-template-columns: repeat(2, minmax(286px, 336px));
  justify-content: start;
  border: 0;
  background: transparent;
}

body[data-database-module] .database-loading-card {
  width: 100%;
  height: 178px;
  border: 1px solid #e4e8ef;
  border-radius: 8px;
  background: linear-gradient(100deg, #f5f7fa 20%, #edf1f6 38%, #f5f7fa 58%);
  background-size: 220% 100%;
  animation: database-loading 1.2s linear infinite;
}

@keyframes database-loading { to { background-position-x: -220%; } }

body[data-database-module] .database-modal { position: fixed; inset: 0; z-index: 80; }
body[data-database-module] .database-modal .modal-backdrop-soft { position: absolute; inset: 0; background: var(--app-overlay-mask, rgba(15, 23, 42, 0.5)); }

body[data-database-module] .database-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(720px, calc(100vw - 36px));
  max-width: none;
  max-height: min(760px, calc(100vh - 40px));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e1e6ed;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.26);
  transform: translate(-50%, -50%);
}

body[data-database-module] .database-dialog-head {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 78px;
  padding: 15px 18px 12px 20px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--db-line);
}

body[data-database-module] .database-dialog-head > div:first-child { min-width: 0; }
body[data-database-module] .database-dialog-head h1 { margin: 0; color: var(--db-ink); font-size: 16px; font-weight: 700; }

body[data-database-module] .database-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  color: #98a2b3;
  font-size: 11px;
  list-style: none;
}

body[data-database-module] .database-stepper li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
body[data-database-module] .database-stepper li + li::before { width: 24px; height: 1px; margin-right: 5px; background: #dce2ea; content: ""; }
body[data-database-module] .database-stepper span { display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid #cbd2dc; border-radius: 50%; font-size: 10px; }
body[data-database-module] .database-stepper .active { color: var(--db-brand); font-weight: 650; }
body[data-database-module] .database-stepper .active span { border-color: var(--db-brand); background: var(--db-brand); color: #fff; }
body[data-database-module] .database-stepper .complete { color: var(--db-success); }
body[data-database-module] .database-stepper .complete span { border-color: #72bc99; color: var(--db-success); }

body[data-database-module] .database-form {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  padding: 16px 20px 0;
  overflow-y: auto;
  box-sizing: border-box;
}

body[data-database-module] .database-form > [data-db-step] { display: grid; gap: 12px; }
body[data-database-module] .database-type-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

body[data-database-module] .database-type-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  width: 100%;
  height: auto;
  align-items: center;
  justify-items: stretch;
  gap: 11px;
  min-height: 74px;
  padding: 11px 12px;
  border: 1px solid var(--db-line);
  border-radius: 6px;
  background: #fff;
  color: var(--db-ink);
  text-align: left;
  box-shadow: none;
}

body[data-database-module] .database-type-card:hover { border-color: #a9bde2; box-shadow: none; transform: none; }
body[data-database-module] .database-type-card.is-plan-locked {
  opacity: 0.62;
  cursor: not-allowed;
}
body[data-database-module] .database-type-card.is-plan-locked:hover {
  border-color: var(--db-border);
}
body[data-database-module] .database-type-card.active { border-color: #82a5e8; background: #f5f8ff; box-shadow: inset 0 0 0 1px rgba(47, 103, 216, 0.06); }
body[data-database-module] .database-type-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 6px; background: #edf3ff; color: var(--db-brand); font-size: 18px; }
body[data-database-module] .database-type-copy { display: grid; gap: 4px; min-width: 0; }
body[data-database-module] .database-type-copy strong { font-size: 13px; font-weight: 650; }
body[data-database-module] .database-type-copy small { color: #7b8595; font-size: 11px; line-height: 1.45; }
body[data-database-module] .database-type-check { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #c8d0dc; border-radius: 50%; color: transparent; font-size: 12px; }
body[data-database-module] .database-type-card.active .database-type-check { border-color: var(--db-brand); background: var(--db-brand); color: #fff; }

body[data-database-module] .database-remote-hint,
body[data-database-module] .database-step-intro {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid #d3e0f6;
  border-radius: 5px;
  background: #f5f8fd;
  color: #536680;
  font-size: 11px;
  line-height: 1.55;
}

body[data-database-module] .database-remote-hint i { margin-right: 5px; color: var(--db-brand); }

body[data-database-module] .database-remote-hint strong { margin-right: 4px; color: #1f5f49; }

body[data-database-module] .database-readonly-notice,
body[data-database-module] .database-settings-readonly-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 30px;
  padding: 30px;
  border-radius: none;
  color: #333;
}

body[data-database-module] .database-readonly-notice > i,
body[data-database-module] .database-settings-readonly-note > i {
  flex: 0 0 auto;
  color: #168654;
  font-size: 16px;
}

body[data-database-module] .database-readonly-notice > div,
body[data-database-module] .database-settings-readonly-note {
  min-width: 0;
}

body[data-database-module] .database-readonly-notice strong,
body[data-database-module] .database-readonly-notice span,
body[data-database-module] .database-settings-readonly-note strong,
body[data-database-module] .database-settings-readonly-note span { display: block; }

body[data-database-module] .database-readonly-notice strong,
body[data-database-module] .database-settings-readonly-note strong { color: #333; font-size: 20px; }

body[data-database-module] .database-readonly-notice span,
body[data-database-module] .database-settings-readonly-note span { margin-top: 2px; color: #999; font-size: 16px; line-height: 1.55; }

body[data-database-module] .database-schema-readonly-notice { grid-column: 1 / -1; margin: 0; }
body[data-database-module] .database-schema-readonly-notice > div { flex: 1 1 auto; }
body[data-database-module] .database-schema-permission-notice {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #d8dee8;
  border-radius: 5px;
  background: #f8fafc;
  color: #475467;
}
body[data-database-module] .database-schema-permission-notice[hidden] { display: none; }
body[data-database-module] .database-schema-permission-notice > i { flex: 0 0 auto; color: #667085; font-size: 16px; }
body[data-database-module] .database-schema-permission-notice > div { flex: 1 1 auto; min-width: 0; }
body[data-database-module] .database-schema-permission-notice strong,
body[data-database-module] .database-schema-permission-notice span { display: block; }
body[data-database-module] .database-schema-permission-notice strong { color: #333; font-size: 16px; }
body[data-database-module] .database-schema-permission-notice span { margin-top: 2px; color: #666; font-size: 14px; line-height: 1.55; }
body[data-database-module] .database-schema-permission-notice > .btn { flex: 0 0 auto; min-height: 30px; white-space: nowrap; }
body[data-database-module] .database-settings-readonly-note { align-items: flex-start; flex-wrap: wrap; }
body[data-database-module] .database-settings-readonly-note > span { flex-basis: 100%; margin-left: 26px; }
body[data-database-module] .database-step-intro strong { color: #344054; }

body[data-database-module] .database-form-section {
  padding: 14px 16px;
  border: 1px solid var(--db-line);
  border-radius: 6px;
  background: #fff;
}

body[data-database-module] .database-form-section h2 { margin: 0 0 12px; color: #344054; font-size: 13px; font-weight: 650; }

body[data-database-module] .database-field {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 11px;
}

body[data-database-module] .database-field:last-child { margin-bottom: 0; }
body[data-database-module] .database-field.align-start { align-items: start; }
body[data-database-module] .database-field > span:first-child { padding-top: 1px; color: #4f5c6f; font-size: 12px; font-weight: 550; }
body[data-database-module] .database-field b { color: var(--db-danger); }
body[data-database-module] .database-field .bi-info-circle { color: #98a2b3; font-size: 11px; }

body[data-database-module] .database-field .form-control,
body[data-database-module] .database-field .form-select {
  height: 34px;
  border-color: #d6dde7;
  border-radius: 5px;
  background-color: #fff;
  color: #273244;
  font-size: 12px;
}

body[data-database-module] .database-field textarea.form-control { min-height: 72px; resize: vertical; }
body[data-database-module] .database-field .form-control:focus,
body[data-database-module] .database-field .form-select:focus { border-color: #86a8e8; box-shadow: 0 0 0 3px rgba(47, 103, 216, 0.1); }

body[data-database-module] .database-permissions { display: flex; flex-wrap: wrap; gap: 42px; }
body[data-database-module] .database-permissions label { display: inline-flex; min-height: 30px; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid #d9dfe8; border-radius: 5px; color: #596579; font-size: 12px; cursor: pointer; }
body[data-database-module] .database-permissions label:has(input:checked) { border-color: #abc1eb; background: #f1f5fd; color: var(--db-brand); }
body[data-database-module] .database-permissions input { width: 14px; height: 14px; margin: 0; }

body[data-database-module] .database-connection-check { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body[data-database-module] .database-connection-status { display: flex; min-width: 0; align-items: center; gap: 7px; color: #778294; font-size: 12px; }
body[data-database-module] .database-connection-status small { overflow: hidden; color: var(--db-danger); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
body[data-database-module] .database-connection-status[data-status="UNTESTED"] { color: #778294; }
body[data-database-module] .database-connection-status[data-status="TESTING"] { color: var(--db-brand); }
body[data-database-module] .database-connection-status[data-status="TESTING"] i { animation: database-spin 0.8s linear infinite; }
body[data-database-module] .database-connection-status[data-status="CONNECTED"] { color: var(--db-success); }
body[data-database-module] .database-connection-status[data-status="FAILED"] { color: var(--db-danger); }
@keyframes database-spin { to { transform: rotate(360deg); } }

body[data-database-module] .icon-database {
  background: linear-gradient(135deg, #ff5d5d, #fb7185);
}

body[data-database-module] .database-table-select-section { padding: 0; overflow: hidden; }
body[data-database-module] .database-table-select-head { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 13px; border-bottom: 1px solid var(--db-line); }
body[data-database-module] .database-table-select-head h2 { margin: 0 0 3px; }
body[data-database-module] .database-table-select-head > div { display: flex; align-items: center; gap: 9px; }
body[data-database-module] .database-table-select-head > div:first-child { display: block; }
body[data-database-module] .database-table-select-head span { color: #8a94a6; font-size: 10px; }
body[data-database-module] .database-select-all { display: inline-flex; align-items: center; gap: 5px; color: #596579; font-size: 11px; cursor: pointer; }
body[data-database-module] .database-select-all input { width: 14px; height: 14px; margin: 0; }

body[data-database-module] .database-table-list { display: grid; max-height: 290px; overflow-y: auto; }
body[data-database-module] .database-table-option { display: grid; grid-template-columns: 18px 24px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 56px; padding: 8px 14px; border-bottom: 1px solid #edf0f4; cursor: pointer; }
body[data-database-module] .database-table-option:last-child { border-bottom: 0; }
body[data-database-module] .database-table-option:hover { background: #fafbfd; }
body[data-database-module] .database-table-option > i { color: #6d8bc2; font-size: 16px; }
body[data-database-module] .database-table-option strong,
body[data-database-module] .database-table-option small { display: block; }
body[data-database-module] .database-table-option strong { color: #344054; font-size: 12px; font-weight: 600; }
body[data-database-module] .database-table-option small { margin-top: 3px; color: #8a94a6; font-size: 10px; }
body[data-database-module] .database-table-empty { display: grid; min-height: 180px; place-items: center; align-content: center; gap: 7px; color: #8a94a6; font-size: 11px; }
body[data-database-module] .database-table-empty i { color: #91a5c8; font-size: 24px; }

body[data-database-module] .database-form-error { margin: 12px 0 0; padding: 9px 11px; border: 1px solid #f1c8c4; border-radius: 5px; background: #fff6f5; color: var(--db-danger); font-size: 16px; }

body[data-database-module] .database-dialog-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  min-height: 58px;
  margin: 14px -20px 0;
  padding: 12px 20px;
  border-top: 1px solid var(--db-line);
  background: #fff;
}

body[data-database-module] .database-dialog-actions .btn { min-width: 72px; height: 32px; border-radius: 5px; font-size: 12px; }

body[data-database-module] .database-toast { display: grid; width: min(340px, calc(100vw - 30px)); gap: 3px; margin-bottom: 8px; padding: 10px 12px; border: 1px solid #cee3d6; border-radius: 5px; background: #f2fbf5; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12); color: #286242; font-size: 11px; }
body[data-database-module] .database-toast strong { font-size: 12px; }

@media (max-width: 1100px) {
  body[data-database-module] .database-card-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
  body[data-database-module] .database-list-loading { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}

@media (max-width: 760px) {
  body[data-database-module] .database-workspace { padding: 12px; }
  body[data-database-module] .database-list-toolbar { align-items: stretch; flex-direction: column; }
  body[data-database-module] .database-list-search { width: 100%; }
  body[data-database-module] .database-list-filter select { width: 100%; }
  body[data-database-module] .database-list-count { margin-left: 0; }
  body[data-database-module] .database-card-grid,
  body[data-database-module] .database-list-loading { grid-template-columns: 1fr; }
  body[data-database-module] .database-dialog { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }
  body[data-database-module] .database-dialog-head { padding: 13px 14px 11px; }
  body[data-database-module] .database-stepper { gap: 6px; }
  body[data-database-module] .database-stepper li { font-size: 0; }
  body[data-database-module] .database-stepper li + li::before { width: 14px; }
  body[data-database-module] .database-stepper span { font-size: 10px; }
  body[data-database-module] .database-form { padding: 14px 14px 0; }
  body[data-database-module] .database-type-switch { grid-template-columns: 1fr; }
  body[data-database-module] .database-field { grid-template-columns: 1fr; gap: 6px; }
  body[data-database-module] .database-table-select-head { align-items: flex-start; flex-direction: column; }
  body[data-database-module] .database-connection-check { align-items: flex-start; flex-direction: column; }
  body[data-database-module] .database-connection-status small { white-space: normal; }
  body[data-database-module] .database-dialog-actions { margin: 14px -14px 0; padding: 11px 14px; }
}

/* Database detail pages */
.database-detail-workspace {
  min-height: calc(100vh - var(--topbar-height));
  padding: 12px 16px 14px;
  background-color: var(--app-page-bg-color);
  background-image: var(--app-page-bg-image);
}

.database-detail-workspace .breadcrumb-line {
  height: 24px;
  margin-bottom: 8px;
}

.database-detail-layout {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: calc(100vh - var(--topbar-height) - 58px);
  border-top: 1px solid rgba(151, 170, 199, 0.18);
  /* background: #fff; */
}

.database-detail-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 8px 0 0;
  /* border-right: 1px solid rgba(151, 170, 199, 0.24); */
}

.database-detail-nav a {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 4px;
  color: #132033;
  font-size: 12px;
  font-weight: 700;
}

.database-detail-nav a.active,
.database-detail-nav a:hover {
  background: #f1f5fb;
  color: #1f65f2;
}

.database-settings-panel {
  padding: 24px 0 0 112px;
}

.database-settings-panel h1,
.database-permission-section h2,
.database-section-head h1 {
  margin: 0;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

.database-info-list {
  display: grid;
  gap: 20px;
  width: min(720px, 100%);
  margin: 26px 0 44px;
}

.database-info-list div,
.database-permission-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  color: #132033;
  font-size: 12px;
}

.database-info-list .align-start {
  align-items: start;
}

.database-info-list dt,
.database-permission-row > span:first-child {
  color: #475569;
  font-weight: 700;
  text-align: right;
}

.database-info-list dd {
  max-width: 520px;
  margin: 0;
  line-height: 2;
}

.database-permission-section {
  display: grid;
  gap: 18px;
}

.database-permission-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.database-permission-row > span:first-child {
  min-width: 82px;
}

.database-permission-row b {
  color: #ef4444;
}

.database-permission-row label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: #8a97a8;
  font-size: 12px;
}

.database-permission-row .form-check-input {
  width: 13px;
  height: 13px;
  margin: 0;
}

.database-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 82px;
}

.database-detail-actions .btn {
  height: 28px;
  min-width: 46px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
}

.database-settings-empty {
  display: grid;
  justify-items: start;
  gap: 10px;
  width: min(520px, 100%);
  padding: 48px 0 0 82px;
}

.database-settings-empty i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f1f5fb;
  color: #8090a6;
  font-size: 20px;
}

.database-settings-empty h1 {
  margin: 6px 0 0;
}

.database-settings-empty p {
  margin: 0 0 6px;
  color: #667085;
  font-size: 12px;
}

.database-table-config-panel {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  min-width: 0;
}

.database-table-list {
  padding: 0;
  border-right: 1px solid rgba(151, 170, 199, 0.24);
}

.database-table-list header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 28px;
  margin-bottom: 6px;
}

.database-table-list strong {
  color: #132033;
  font-size: 13px;
  font-weight: 800;
}

.database-text-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: #1f65f2;
  font-size: 12px;
  font-weight: 700;
}

.database-table-list > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #132033;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.database-table-list > button.active {
  background: #edf4ff;
  color: #1f65f2;
}

.database-field-config {
  min-width: 0;
  padding: 14px 8px 0 16px;
}

.database-section-head,
.database-overview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  margin-bottom: 8px;
}

.database-section-head > div,
.database-overview-toolbar > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.database-section-head .btn,
.database-overview-toolbar .btn {
  height: 28px;
  padding: 0 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
}

.database-table-wrap,
.database-overview-table-wrap {
  min-width: 0;
  overflow: auto;
}

.database-schema-table {
  min-width: 980px;
  border-top: 1px solid rgba(151, 170, 199, 0.24);
}

.database-schema-table th,
.database-schema-table td,
.database-overview-table th,
.database-overview-table td {
  height: 36px;
  padding: 0 12px;
  border-color: rgba(151, 170, 199, 0.22);
  color: #132033;
  font-size: 12px;
  white-space: nowrap;
}

.database-schema-table th,
.database-overview-table th {
  background: #fbfdff;
  color: #26364d;
  font-weight: 750;
}

.database-schema-table th:nth-child(1),
.database-schema-table td:nth-child(1) {
  width: 32%;
}

.database-schema-table th:nth-child(2),
.database-schema-table td:nth-child(2) {
  width: 30%;
}

.database-schema-table th:nth-child(4),
.database-schema-table td:nth-child(4) {
  width: 80px;
  text-align: center;
}

.database-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.database-row-actions button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1f65f2;
  font-size: 12px;
}

.database-row-actions button.danger {
  color: #ff6b6b;
}

.database-row-actions button.success {
  color: #12a150;
}

.database-row-actions button.muted {
  color: #98a2b3;
}

.database-schema-edit-row .form-control,
.database-schema-edit-row .form-select {
  height: 26px;
  border-color: #d6e0f0;
  border-radius: 3px;
  color: #132033;
  font-size: 12px;
}

.database-schema-edit-row td {
  background: #fbfdff;
}

.database-field-edit-actions {
  gap: 6px;
}

.database-schema-empty-row td {
  height: 72px;
  color: #8090a6;
  text-align: center;
}

.database-overview-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 0 0 16px;
}

.database-overview-toolbar {
  padding-right: 8px;
}

.database-overview-toolbar .form-select {
  width: 184px;
  height: 28px;
  border-color: #d6e0f0;
  font-size: 12px;
}

.database-overview-table {
  min-width: 2300px;
}

.database-overview-table th,
.database-overview-table td {
  height: 30px;
  padding-inline: 10px;
  font-size: 11px;
}

.database-overview-table td {
  color: #334155;
}

.database-overview-table th:last-child,
.database-overview-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  width: 86px;
  min-width: 86px;
  text-align: center;
  background: #fff;
  box-shadow: -10px 0 18px rgba(15, 23, 42, 0.045);
}

.database-overview-table th:last-child {
  z-index: 3;
  background: #fbfdff;
}

.database-overview-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: auto;
  padding: 14px 0 6px;
  color: #667085;
  font-size: 12px;
}

.database-overview-footer .form-select {
  width: 84px;
  height: 26px;
  font-size: 12px;
}

.database-overview-footer .page-link {
  min-width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 4px;
  text-align: center;
  line-height: 22px;
}

.database-settings-edit-modal[hidden],
.database-settings-delete-modal[hidden],
.database-table-create-modal[hidden],
.database-table-delete-modal[hidden] {
  display: none;
}

.database-settings-edit-modal.modal:not([hidden]),
.database-settings-delete-modal.modal:not([hidden]),
.database-table-create-modal.modal:not([hidden]),
.database-table-delete-modal.modal:not([hidden]) {
  display: block;
}

.database-settings-edit-modal,
.database-settings-delete-modal,
.database-table-create-modal,
.database-table-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
}

.database-settings-edit-dialog,
.database-settings-delete-dialog,
.database-table-create-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: min(1092px, calc(100vw - 28px));
  min-height: 520px;
  max-height: calc(100vh - 44px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(151, 170, 199, 0.34);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.18);
  transform: translate(-50%, -50%);
}

.database-settings-edit-dialog {
  width: min(640px, calc(100vw - 28px));
  min-height: auto;
}

.database-settings-delete-dialog,
.database-table-delete-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 28px));
  max-height: calc(100vh - 44px);
  overflow: hidden;
  border: 1px solid rgba(151, 170, 199, 0.34);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.18);
  transform: translate(-50%, -50%);
}

.database-settings-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px 0px 0;
}

.database-settings-edit-form label {
  display: grid;
  gap: 7px;
  margin: 0;
}

.database-settings-edit-form span,
.database-settings-edit-permissions legend {
  margin: 0;
  color: #333;
  font-size: 14px;
  font-weight: normal;
}

.database-settings-edit-form b,
.database-settings-edit-permissions b {
  color: #ef4444;
}

.database-settings-edit-form .form-control,
.database-settings-edit-form .form-select {
  min-height: 30px;
  border-color: #d6e0f0;
  border-radius: 4px;
  color: #132033;
  font-size: 12px;
}

.database-settings-edit-form textarea.form-control {
  min-height: 92px;
  padding-top: 8px;
  line-height: 1.6;
}

.database-settings-edit-wide,
.database-settings-edit-permissions,
.database-settings-edit-form .database-row-dialog-actions {
  grid-column: 1 / -1;
}

.database-settings-edit-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0;
  padding: 0;
  border: 0;
}

.database-settings-edit-permissions legend {
  flex-basis: 100%;
}

.database-settings-edit-permissions label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #667085;
  font-size: 12px;
}

.database-settings-edit-permissions .form-check-input {
  width: 13px;
  height: 13px;
  margin: 0;
}

.database-settings-edit-form .database-row-dialog-actions {
  margin-inline: -18px;
}

.database-table-create-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 12px 14px 8px;
}

.database-table-create-head h1 {
  margin: 0;
  color: #132033;
  font-size: 14px;
  font-weight: 750;
}

.database-table-create-head .btn {
  height: 26px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
}

.database-table-create-form {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 0 24px 0;
}

.database-table-create-field {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}

.database-table-create-field > span,
.database-table-create-subtitle {
  color: #344054;
  font-size: 12px;
  font-weight: 750;
}

.database-table-create-field b,
.database-table-create-subtitle b {
  color: #ef4444;
}

.database-table-create-field i,
.database-table-create-subtitle i,
.database-table-create-grid-head i {
  color: #667085;
  font-size: 11px;
}

.database-table-create-field .form-control {
  min-height: 26px;
  border-color: #d6e0f0;
  border-radius: 2px;
  font-size: 12px;
}

.database-table-create-field textarea.form-control {
  min-height: 38px;
  padding-top: 8px;
}

.database-table-create-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: 2px;
}

.database-table-create-subtitle {
  margin-bottom: 10px;
}

.database-table-create-grid {
  display: grid;
  min-width: 820px;
  border-bottom: 1px solid rgba(151, 170, 199, 0.22);
}

.database-table-create-grid-head,
.database-table-create-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 160px minmax(260px, 0.95fr) 54px;
  align-items: center;
  gap: 18px;
  min-height: 37px;
  border-bottom: 1px solid rgba(151, 170, 199, 0.22);
}

.database-table-create-grid-head {
  min-height: 28px;
  color: #26364d;
  font-size: 12px;
  font-weight: 750;
}

.database-table-create-row {
  border-bottom: 0;
}

.database-table-create-row + .database-table-create-row {
  border-top: 1px solid rgba(151, 170, 199, 0.22);
}

.database-table-create-row .form-control,
.database-table-create-row .form-select {
  height: 24px;
  border-color: #d6e0f0;
  border-radius: 2px;
  color: #132033;
  font-size: 12px;
}

.database-table-create-row .form-control:disabled,
.database-table-create-row .form-select:disabled {
  background: #f1f4f8;
  color: #98a2b3;
  opacity: 1;
}

.database-table-create-delete {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: #ff6b6b;
  font-size: 13px;
}

.database-table-create-add {
  align-self: flex-end;
  width: 44px;
  height: 26px;
  margin-top: 8px;
  padding: 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
}

.database-table-create-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: auto -24px 0;
  padding: 16px 14px;
  background: #fff;
}

.database-table-create-actions .btn {
  min-width: 44px;
  height: 28px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
}

.database-row-modal[hidden],
.database-row-view-modal[hidden],
.database-row-delete-modal[hidden],
.database-import-modal[hidden],
.database-import-preview-modal[hidden],
.database-schema-editor-modal[hidden],
.database-schema-impact-modal[hidden] {
  display: none;
}

.database-row-modal.modal:not([hidden]),
.database-row-view-modal.modal:not([hidden]),
.database-row-delete-modal.modal:not([hidden]),
.database-import-modal.modal:not([hidden]),
.database-import-preview-modal.modal:not([hidden]),
.database-schema-editor-modal.modal:not([hidden]),
.database-schema-impact-modal.modal:not([hidden]) {
  display: block;
}

.database-row-modal,
.database-row-view-modal,
.database-row-delete-modal,
.database-import-modal,
.database-import-preview-modal,
.database-schema-editor-modal,
.database-schema-impact-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
}

.database-row-dialog,
.database-row-view-dialog,
.database-row-delete-dialog,
.database-import-dialog,
.database-import-preview-dialog,
.database-schema-editor-dialog,
.database-schema-impact-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 44px);
  overflow: hidden;
  border: 1px solid rgba(151, 170, 199, 0.34);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.18);
  transform: translate(-50%, -50%);
}

.database-import-dialog {
  width: min(520px, calc(100vw - 28px));
}

.database-import-preview-dialog {
  width: min(820px, calc(100vw - 28px));
}

.database-row-view-dialog {
  width: min(660px, calc(100vw - 28px));
}

.database-row-delete-dialog {
  width: min(420px, calc(100vw - 28px));
}

.database-schema-editor-dialog,
.database-schema-impact-dialog {
  width: min(620px, calc(100vw - 28px));
}

.database-row-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 14px 16px 10px 18px;
  border-bottom: 1px solid rgba(151, 170, 199, 0.2);
}

.database-row-dialog-head h1 {
  margin: 0;
  color: #132033;
  font-size: 15px;
  font-weight: 800;
}

.database-row-dialog-head .modal-close {
  position: static;
  width: 28px;
  height: 28px;
  border: 0;
  background: #f8fafc;
  color: #667085;
}

.database-row-form,
.database-import-form {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 0;
}

.database-row-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 14px;
}

.database-row-form-grid label,
.database-import-option {
  display: grid;
  gap: 7px;
  margin: 0;
}

.database-row-form-grid span,
.database-import-option span {
  color: #475569;
  font-size: 12px;
  font-weight: 720;
}

.database-row-form-grid b {
  color: #ef4444;
}

.database-row-form-grid .form-control,
.database-row-form-grid .form-select,
.database-import-option .form-select {
  height: 30px;
  border-color: #d6e0f0;
  border-radius: 4px;
  color: #132033;
  font-size: 12px;
}

.database-import-drop {
  position: relative;
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 142px;
  margin: 0 0 14px;
  padding: 20px;
  border: 1px dashed rgba(47, 109, 246, 0.34);
  border-radius: 8px;
  background: #fbfdff;
  color: #667085;
  text-align: center;
  cursor: pointer;
}

.database-import-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.database-import-drop span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(31, 101, 242, 0.09);
  color: #1f65f2;
  font-size: 20px;
}

.database-import-drop strong {
  color: #132033;
  font-size: 13px;
  font-weight: 800;
}

.database-import-drop em,
.database-import-tip {
  color: #8090a6;
  font-size: 12px;
  font-style: normal;
  line-height: 1.6;
}

.database-import-tip {
  margin: 12px 0 0;
}

.database-row-view-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 0;
}

.database-row-view-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.database-row-view-list div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(151, 170, 199, 0.22);
  border-radius: 5px;
  background: #fbfdff;
}

.database-row-view-list span {
  display: block;
  margin-bottom: 4px;
  color: #8090a6;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.database-row-view-list strong {
  display: block;
  overflow: hidden;
  color: #132033;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-row-delete-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 4px;
}

.database-row-delete-body > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  font-size: 16px;
}

.database-row-delete-body strong {
  display: block;
  margin-bottom: 5px;
  color: #132033;
  font-size: 14px;
  font-weight: 800;
}

.database-row-delete-body p {
  margin: 0 0 8px;
  color: #333;
  font-size: 18px;
  line-height: 1.55;
}

.database-row-delete-body em {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 8px;
  overflow: hidden;
  border-radius: 4px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-row-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: auto -18px 0;
  border-top: 1px solid rgba(151, 170, 199, 0.18);
}

.database-row-dialog-actions .btn {
  min-width: 52px;
  height: 30px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .database-settings-panel {
    padding-left: 34px;
  }

  .database-table-config-panel {
    grid-template-columns: 132px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .database-detail-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
  }

  .database-detail-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 0 0 8px;
    border-right: 0;
    border-bottom: 1px solid rgba(151, 170, 199, 0.24);
  }

  .database-detail-nav a {
    flex: 0 0 auto;
  }

  .database-settings-panel {
    padding: 18px 0 0;
  }

  .database-table-config-panel {
    grid-template-columns: 1fr;
  }

  .database-table-list {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(151, 170, 199, 0.24);
  }

  .database-table-list header,
  .database-table-list > button {
    flex: 0 0 auto;
    width: auto;
  }

  .database-field-config,
  .database-overview-panel {
    padding-left: 0;
  }

  .database-section-head,
  .database-overview-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .database-table-create-form {
    overflow-x: auto;
    padding-inline: 16px;
  }

  .database-table-create-actions {
    margin-inline: -16px;
  }

  .database-row-form-grid {
    grid-template-columns: 1fr;
  }

  .database-settings-edit-form,
  .database-row-view-list {
    grid-template-columns: 1fr;
  }
}

/* Store-driven database detail surfaces */
body[data-database-module] .database-detail-content {
  min-width: 0;
}

body[data-database-module] .database-detail-state {
  display: grid;
  min-height: 280px;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 32px;
  color: #667085;
  font-size: 12px;
  text-align: center;
}

body[data-database-module] .database-detail-state > i {
  color: #7d8da6;
  font-size: 28px;
}

body[data-database-module] .database-detail-state strong {
  color: #172033;
  font-size: 15px;
}

body[data-database-module] .database-state-error > i { color: #d94a45; }
body[data-database-module] .database-state-warning > i { color: #ca8500; }

body[data-database-module] .database-overview-controls,
body[data-database-module] .database-overview-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

body[data-database-module] .database-overview-controls { flex: 1 1 auto; }
body[data-database-module] .database-overview-actions { flex: 0 0 auto; }

body[data-database-module] .database-search {
  position: relative;
  display: block;
  width: min(260px, 34vw);
  margin: 0;
}

body[data-database-module] .database-search i {
  position: absolute;
  top: 50%;
  left: 10px;
  z-index: 1;
  color: #7b8798;
  transform: translateY(-50%);
}

body[data-database-module] .database-search .form-control {
  height: 28px;
  padding-left: 30px;
  border-color: #d6e0f0;
  font-size: 12px;
}

body[data-database-module] .database-selection-count {
  color: #426284;
  font-size: 11px;
  white-space: nowrap;
}

body[data-database-module] .database-import-result {
  margin: 0 8px 8px 0;
  padding: 8px 10px;
  border: 1px solid #bde5ca;
  border-radius: 4px;
  background: #f2fbf5;
  color: #237a40;
  font-size: 11px;
}

body[data-database-module] .database-no-tables {
  display: grid;
  min-height: 360px;
  place-content: center;
  justify-items: center;
  gap: 9px;
  color: #667085;
  text-align: center;
}

body[data-database-module] .database-no-tables[hidden] { display: none; }
body[data-database-module] .database-no-tables > i { color: #7d8da6; font-size: 34px; }
body[data-database-module] .database-no-tables > strong { color: #172033; font-size: 15px; }
body[data-database-module] .database-no-tables > span { max-width: 360px; font-size: 14px; }
body[data-database-module] .database-no-tables > .btn { margin-top: 6px; }
body[data-database-module] .database-no-tables-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }

body[data-database-module] .database-import-preview-body {
  display: grid;
  gap: 16px;
  min-height: 0;
  padding: 16px 18px 0;
  overflow-y: auto;
}

body[data-database-module] .database-import-preview-body section { display: grid; gap: 8px; }
body[data-database-module] .database-import-preview-body h2 { margin: 0; color: #26364d; font-size: 12px; font-weight: 800; }
body[data-database-module] .database-row-dialog-head small { display: block; margin-top: 3px; color: #7b8798; font-size: 10px; }
body[data-database-module] .database-import-mapping { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
body[data-database-module] .database-import-mapping label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 1fr); align-items: center; gap: 10px; margin: 0; color: #344054; font-size: 11px; }
body[data-database-module] .database-import-mapping small { display: block; color: #98a2b3; }
body[data-database-module] .database-import-validation { padding: 9px 11px; border: 1px solid #bde5ca; border-radius: 4px; background: #f2fbf5; color: #237a40; font-size: 11px; }
body[data-database-module] .database-import-preview-table { max-width: 100%; overflow: auto; border: 1px solid #e2e8f0; border-radius: 4px; }
body[data-database-module] .database-import-preview-table th,
body[data-database-module] .database-import-preview-table td { min-width: 110px; padding: 7px 9px; color: #344054; font-size: 16px; white-space: nowrap; }
body[data-database-module] .database-import-preview-dialog .database-form-error { margin: 0; }

body[data-database-module] .database-settings-connection-form > p { margin: 7px 0 0; color: #7b8798; font-size: 10px; }
body[data-database-module] .database-settings-connection-form b { color: #d94a45; }
body[data-database-module] .database-schema-editor-form [data-db-enum-values-field] small { color: #7b8798; font-size: 10px; font-weight: 400; }

body[data-database-module] .modal button:focus-visible,
body[data-database-module] .modal input:focus-visible,
body[data-database-module] .modal select:focus-visible,
body[data-database-module] .modal textarea:focus-visible {
  /* outline: 2px solid #356bd8;
  outline-offset: 2px; */
}

body[data-database-module] .database-overview-table {
  width: max-content;
  min-width: 100%;
}

body[data-database-module] .database-overview-table th,
body[data-database-module] .database-overview-table td {
  min-width: 56px;
}

body[data-database-module] .database-overview-table .database-select-column,
body[data-database-module] .database-overview-table td:first-child {
  width: 38px;
  min-width: 38px;
  text-align: center;
}

body[data-database-module] .database-overview-table .form-check-input {
  width: 12px;
  height: 12px;
  margin: 0;
}

body[data-database-module] .database-pagination {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body[data-database-module] .database-pagination span {
  min-width: 18px;
  text-align: center;
}

body[data-database-module] .database-table-list-panel {
  min-width: 0;
  padding: 14px 10px 0 14px;
  border-right: 1px solid rgba(151, 170, 199, 0.24);
}

body[data-database-module] .database-table-list-panel > header,
body[data-database-module] .database-field-config-head,
body[data-database-module] .database-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-database-module] .database-table-list-panel > header {
  min-height: 30px;
  margin-bottom: 9px;
  gap: 6px;
}

body[data-database-module] .database-table-list-panel > header strong {
  color: #132033;
  font-size: 13px;
  white-space: nowrap;
}

body[data-database-module] .database-table-list-panel > header .btn {
  flex: 0 0 auto;
  padding-inline: 8px;
  white-space: nowrap;
}

body[data-database-module] .database-table-list-panel .database-table-list {
  display: grid;
  gap: 4px;
  padding: 0;
  border: 0;
}

body[data-database-module] .database-table-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
}

body[data-database-module] .database-table-item:hover,
body[data-database-module] .database-table-item.active {
  border-color: #d8e4f7;
  background: #f1f5fb;
}

body[data-database-module] .database-table-item > button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 42px;
  padding: 0 7px;
  border: 0;
  background: transparent;
  color: #26364d;
  text-align: left;
}

body[data-database-module] .database-table-item > button span {
  display: grid;
  min-width: 0;
}

body[data-database-module] .database-table-item > button strong,
body[data-database-module] .database-table-item > button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-database-module] .database-table-item > button strong { font-size: 12px; }
body[data-database-module] .database-table-item > button small { color: #7b8798; font-size: 10px; }

body[data-database-module] .database-table-item-actions {
  display: inline-flex;
  gap: 3px;
  padding-right: 4px;
}

body[data-database-module] .database-table-item-actions button {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: #fff;
  color: #356bd8;
  font-size: 11px;
}

body[data-database-module] .database-table-item-actions button:last-child { color: #d94a45; }

body[data-database-module] .database-field-config-head {
  min-height: 44px;
  margin-bottom: 4px;
  border-top: 1px solid transparent !important;
}

body[data-database-module] .database-field-config-head > div:first-child { min-width: 0; }

body[data-database-module] .database-field-config-head h2,
body[data-database-module] .database-settings-section h2,
body[data-database-module] .database-settings-connection-form h2 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

body[data-database-module] .database-field-config-head span {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-database-module] .database-field-config-head > div:last-child {
  display: flex;
  flex: 0 0 auto;
  gap: 20px;
}

body[data-database-module] .database-schema-table {
  width: 100%;
  min-width: 820px;
}

body[data-database-module] .database-schema-table th:nth-child(1),
body[data-database-module] .database-schema-table td:nth-child(1) { width: 24%; }
body[data-database-module] .database-schema-table th:nth-child(2),
body[data-database-module] .database-schema-table td:nth-child(2) { width: 16%; }
body[data-database-module] .database-schema-table th:nth-child(4),
body[data-database-module] .database-schema-table td:nth-child(4) { width: 22%; text-align: left; }
body[data-database-module] .database-schema-table th:last-child,
body[data-database-module] .database-schema-table td:last-child { width: 70px; text-align: center; }

body[data-database-module] .database-schema-table.database-schema-readonly th:last-child,
body[data-database-module] .database-schema-table.database-schema-readonly td:last-child {
  width: 18%;
  text-align: left;
  white-space: normal;
}

body[data-database-module] .database-schema-table.database-schema-readonly { min-width: 980px; }
body[data-database-module] .database-schema-table.database-schema-readonly th,
body[data-database-module] .database-schema-table.database-schema-readonly td { text-align: left; }
body[data-database-module] .database-schema-table.database-schema-readonly th:nth-child(1),
body[data-database-module] .database-schema-table.database-schema-readonly td:nth-child(1) { width: 24%; }
body[data-database-module] .database-schema-table.database-schema-readonly th:nth-child(2),
body[data-database-module] .database-schema-table.database-schema-readonly td:nth-child(2) { width: 16%; }
body[data-database-module] .database-schema-table.database-schema-readonly th:nth-child(3),
body[data-database-module] .database-schema-table.database-schema-readonly td:nth-child(3) { width: 20%; }
body[data-database-module] .database-schema-table.database-schema-readonly th:nth-child(4),
body[data-database-module] .database-schema-table.database-schema-readonly td:nth-child(4) { width: 22%; }
body[data-database-module] .database-schema-table.database-schema-readonly th:nth-child(5),
body[data-database-module] .database-schema-table.database-schema-readonly td:nth-child(5) { width: 18%; text-align: left; }

body[data-database-module] .database-field-badge {
  margin-left: 4px;
  padding: 1px 4px;
  border-radius: 4px;
  background: #F0F4FE;
  color: #155CFA;
  font-size: 14px;
  font-weight: normal;
}

body[data-database-module] .database-schema-readonly td:last-child .database-field-badge:first-child { margin-left: 0; }
body[data-database-module] .database-field-constraint-empty { color: #98a2b3; font-size: 10px; }
body[data-database-module] .database-field-nullable-default { color: #344054; font-size: 12px; }
body[data-database-module] .database-field-constraints { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
body[data-database-module] .database-field-constraints .database-field-badge { margin-left: 0; }

body[data-database-module] .database-settings-panel {
  width: 100%;
  padding: 22px 0 0;
}

body[data-database-module] .database-settings-head {
  position: relative;
  min-height: 48px;
  padding-bottom: 30px;
}

body[data-database-module] .database-settings-head::after {
  content: "";
  position: absolute;
  left: 52px;
  right: 0;
  bottom: 0;
  width: auto;
  height: 1px;
  background: rgba(151, 170, 199, 0.24);
  pointer-events: none;
}

body[data-database-module] .database-settings-head h1 {
  margin: 0;
  color: #172033;
  font-size: 20px;
  font-weight: 500;
}

body[data-database-module] .database-settings-head span { color: #999; font-size: 14px; }
body[data-database-module] .database-settings-head .database-detail-actions { padding-left: 0; }

body[data-database-module] .database-settings-section {
  padding: 25px 0 0 0;
}
body[data-database-module] .database-settings-section:last-child{
  border-bottom: none;
}

body[data-database-module] .database-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  margin: 16px 0 0;
}

body[data-database-module] .database-settings-grid div,
body[data-database-module] .database-settings-grid label {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
}

body[data-database-module] .database-settings-wide { grid-column: 1 / -1; }
body[data-database-module] .database-settings-grid dt,
body[data-database-module] .database-settings-grid label > span { color: #667085; font-size: 11px; font-weight: 700; }
body[data-database-module] .database-settings-grid dd { margin: 0; color: #172033; font-size: 12px; line-height: 1.7; }

body[data-database-module] .database-settings-grid .database-connection-health {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(140px, 1fr) minmax(190px, 1.25fr);
  gap: 0;
  margin-top: 2px;
  border: 1px solid #e1e7ef;
  border-radius: 6px;
  background: #f8fafc;
}

body[data-database-module] .database-settings-grid .database-connection-health-item {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px 16px;
}

body[data-database-module] .database-settings-grid .database-connection-health-item + .database-connection-health-item {
  border-left: 1px solid #e1e7ef;
}

body[data-database-module] .database-connection-health-value {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 22px;
  color: #344054;
  white-space: nowrap;
}

body[data-database-module] .database-connection-health-value i {
  flex: 0 0 auto;
  color: #7b8798;
  font-size: 12px;
}

body[data-database-module] .database-connection-health-value[data-tone="success"],
body[data-database-module] .database-connection-health-value[data-tone="success"] i { color: #16845b; }
body[data-database-module] .database-connection-health-value[data-tone="danger"],
body[data-database-module] .database-connection-health-value[data-tone="danger"] i { color: #d92d20; }
body[data-database-module] .database-connection-health-value[data-tone="pending"],
body[data-database-module] .database-connection-health-value[data-tone="pending"] i { color: #2563eb; }
body[data-database-module] .database-connection-health-value[data-tone="muted"],
body[data-database-module] .database-connection-health-value[data-tone="muted"] i { color: #7b8798; }

body[data-database-module] .database-connection-health-value[data-tone="pending"] i {
  animation: database-spin 0.8s linear infinite;
}

body[data-database-module] .database-permission-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

body[data-database-module] .database-permission-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #dfe5ee;
  border-radius: 4px;
  color: #7b8798;
  font-size: 11px;
}

body[data-database-module] .database-permission-chip[data-enabled="true"] {
  border-color: #b9d9c4;
  background: #f3faf5;
  color: #287744;
}



body[data-database-module] .database-settings-connection-form .database-settings-grid { margin-top: 12px; }

body[data-database-module] .database-schema-editor-form {
  display: grid;
  gap: 14px;
  padding: 16px 18px 0;
  overflow-y: auto;
}

body[data-database-module] .database-schema-editor-form [data-db-table-fields],
body[data-database-module] .database-schema-editor-form [data-db-field-fields] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body[data-database-module] .database-schema-editor-form label {
  display: grid;
  align-content: start;
  gap: 6px;
  margin: 0;
  color: #4f5c6f;
  font-size: 11px;
  font-weight: 700;
}

body[data-database-module] .database-schema-editor-form label b { color: #d94a45; }
body[data-database-module] .database-schema-wide { grid-column: 1 / -1; }
body[data-database-module] .database-checkbox-field { display: flex !important; align-items: center; align-self: end; min-height: 30px; }

body[data-database-module] .database-schema-impact { padding: 16px 18px 0; }
body[data-database-module] .database-schema-impact dl { display: grid; gap: 0; margin: 0; border: 1px solid #e2e8f0; border-radius: 4px; }
body[data-database-module] .database-schema-impact dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); min-height: 38px; align-items: center; border-bottom: 1px solid #edf1f6; }
body[data-database-module] .database-schema-impact dl div:last-child { border-bottom: 0; }
body[data-database-module] .database-schema-impact dt { align-self: stretch; display: flex; align-items: center; padding: 0 12px; background: #f8fafc; color: #667085; font-size: 11px; }
body[data-database-module] .database-schema-impact dd { margin: 0; padding: 0 12px; color: #172033; font-size: 12px; }
body[data-database-module] .database-schema-impact > p { margin: 12px 0 0; color: #7b8798; font-size: 11px; }
body[data-database-module] .database-risk { color: #287744; font-weight: 700; }
body[data-database-module] .database-risk.danger { color: #d94a45; }

@media (max-width: 1100px) {
  body[data-database-module] .database-settings-panel { width: 100%; padding-left: 0; }
  body[data-database-module] .database-overview-toolbar { align-items: stretch; flex-direction: column; }
  body[data-database-module] .database-overview-actions { justify-content: flex-end; }
  body[data-database-module] .database-search { width: min(300px, 45vw); }
  body[data-database-module] .database-table-item-actions { display: none; }
}

@media (max-width: 900px) {
  body[data-database-module] .database-table-list-panel { padding: 10px 0; border-right: 0; border-bottom: 1px solid rgba(151, 170, 199, 0.24); }
  body[data-database-module] .database-table-list-panel .database-table-list { display: flex; overflow-x: auto; }
  body[data-database-module] .database-table-item { flex: 0 0 190px; }
  body[data-database-module] .database-settings-panel { width: 100%; padding-left: 0; }
}

@media (max-width: 620px) {
  body[data-database-module] .database-overview-controls,
  body[data-database-module] .database-overview-actions,
  body[data-database-module] .database-field-config-head,
  body[data-database-module] .database-settings-head { align-items: stretch; flex-direction: column; }
  body[data-database-module] .database-search { width: 100%; }
  body[data-database-module] .database-overview-toolbar .form-select { width: 100%; }
  body[data-database-module] .database-overview-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
  body[data-database-module] .database-settings-grid,
  body[data-database-module] .database-schema-editor-form [data-db-table-fields],
  body[data-database-module] .database-schema-editor-form [data-db-field-fields] { grid-template-columns: 1fr; }
  body[data-database-module] .database-schema-wide,
  body[data-database-module] .database-settings-wide { grid-column: 1; }
  body[data-database-module] .database-settings-grid .database-connection-health { grid-template-columns: 1fr; }
  body[data-database-module] .database-settings-grid .database-connection-health-item + .database-connection-health-item { border-top: 1px solid #e1e7ef; border-left: 0; }
  body[data-database-module] .database-import-mapping { grid-template-columns: 1fr; }
  body[data-database-module] .database-schema-permission-notice { align-items: stretch; flex-direction: column; }
  body[data-database-module] .database-schema-permission-notice > .btn { align-self: flex-start; }
}

/* Database list and create dialog parity */
body[data-database-module] main.workspace {
  background-color: var(--app-page-bg-color);
  background-image: var(--app-page-bg-image);
}

body[data-database-module] .database-workspace {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 14px 20px 32px;
  background: transparent;
}

body[data-database-module] .database-page-background {
  min-height: calc(100vh - var(--topbar-height) - 46px);
  background: none;
  background-image: none;
}

body[data-database-module] .database-page-background .database-breadcrumb {
  height: 26px;
  margin: 0 0 17px;
  color: #667085;
  font-size: 12px;
}

body[data-database-module] .database-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(360px, 398px));
  justify-content: start;
  gap: 18px;
}

body[data-database-module] .database-card {
  box-sizing: border-box;
  width: 100%;
  min-height: 166px;
  padding: 18px 20px 16px;
  border-color: #e2e5ea;
  border-radius: 6px;
  box-shadow: none;
}

body[data-database-module] .database-card:hover,
body[data-database-module] .database-card:focus-visible {
  border-color: #c9d4e7;
  box-shadow: 0 7px 20px rgba(31, 41, 55, 0.08);
  transform: none;
}

body[data-database-module] .database-card-main {
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  gap: 0 14px;
}

body[data-database-module] .database-card-icon {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 6px;
  background: #eaf2ff;
  font-size: 20px;
}

body[data-database-module] .database-card-copy h1 {
  font-size: 15px;
  line-height: 21px;
}

body[data-database-module] .database-card-copy p {
  min-height: 34px;
  margin-top: 14px;
  line-height: 17px;
}

body[data-database-module] .database-card-meta {
  justify-content: flex-start;
  margin-top: auto;
  padding-top: 13px;
  border-top: 0;
}

body[data-database-module] .database-card-tag {
  min-height: 22px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: #f1f3f6;
  color: #667085;
  font-size: 11px;
  font-weight: 500;
}

body[data-database-module] .database-create-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-style: solid;
  background: #fff;
  color: #344054;
  text-align: center;
}

body[data-database-module] .database-create-entry .database-card-icon {
  grid-row: auto;
  width: 34px;
  height: 34px;
  border: 1px solid #b8cbf1;
  border-radius: 50%;
  background: #f2f6ff;
  color: var(--db-brand);
  font-size: 15px;
}

body[data-database-module] .database-create-entry strong {
  color: #344054;
  font-size: 14px;
  font-weight: 600;
}

body[data-database-module] .database-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--app-overlay-mask, rgba(15, 23, 42, 0.5));
  backdrop-filter: blur(2px);
}

body[data-database-module] .database-dialog {
  width: min(764px, calc(100vw - 36px));
  height: min(720px, calc(100vh - 40px));
  max-height: calc(100vh - 40px);
  border-radius: 6px;
}

body[data-database-module] .database-dialog-head {
  flex: 0 0 auto;
  align-items: center;
  min-height: 54px;
  padding: 11px 16px 11px 20px;
}

body[data-database-module] .database-dialog-head h1 {
  font-size: 16px;
  font-weight: 650;
}

body[data-database-module] .database-form {
  gap: 0;
  padding: 16px 20px 0;
}

body[data-database-module] .database-create-fields {
  display: grid;
  gap: 12px;
}

body[data-database-module] .database-type-switch {
  grid-template-columns: 1fr;
  gap: 8px;
}

body[data-database-module] .database-type-card {
  grid-template-columns: 32px minmax(0, 1fr) 20px;
  min-height: 48px;
  padding: 7px 10px;
  border-radius: 5px;
}

body[data-database-module] .database-type-icon {
  width: 32px;
  height: 32px;
  font-size: 15px;
}

body[data-database-module] .database-type-help {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #98a2b3;
  font-size: 13px;
}

body[data-database-module] .database-plan-hint {
  margin: -2px 0 0 44px;
  color: #8a650f;
  font-size: 11px;
}

body[data-database-module] .database-plan-hint a {
  margin-left: 3px;
  color: var(--db-brand);
}

body[data-database-module] .database-form-section {
  padding: 13px 16px;
  border-radius: 5px;
}

body[data-database-module] .database-form-section h2 {
  margin-bottom: 0;
  font-size: 16px;
}

body[data-database-module] .database-field {
  grid-template-columns: 100px minmax(0, 1fr);
  margin-bottom: 10px;
}

body[data-database-module] .database-field > span:first-child {
  font-weight: 500;
}

body[data-database-module] .database-permissions label {
  min-height: 28px;
  padding-inline: 9px;
}

body[data-database-module] .database-connection-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

body[data-database-module] .database-connection-fields .database-field {
  grid-template-columns: 78px minmax(0, 1fr);
}

body[data-database-module] .database-readonly-tip {
  margin: 2px 0 0 94px;
  color: #7a8492;
  font-size: 11px;
}

body[data-database-module] .database-readonly-tip i {
  margin-right: 4px;
  color: #7c91b4;
}

body[data-database-module] .database-form-status {
  margin: 10px 0 0;
  color: #596579;
  font-size: 11px;
}

body[data-database-module] .database-dialog-actions {
  flex: 0 0 auto;
  margin-top: auto;
}

body[data-database-module] .database-table-picker > header p {
  margin: 3px 0 0;
  color: #8a94a6;
  font-size: 11px;
}

@media (max-width: 900px) {
  body[data-database-module] .database-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-database-module] .database-workspace { padding: 12px; }
  body[data-database-module] .database-card-grid { grid-template-columns: 1fr; }
  body[data-database-module] .database-dialog { height: calc(100dvh - 18px); }
  body[data-database-module] .database-connection-fields { grid-template-columns: 1fr; }
  body[data-database-module] .database-connection-fields .database-field,
  body[data-database-module] .database-field { grid-template-columns: 1fr; }
  body[data-database-module] .database-plan-hint,
  body[data-database-module] .database-readonly-tip { margin-left: 0; }
}

/* Data table configuration */
body[data-database-module] .database-table-config-panel { display: block; }

body[data-database-module] .database-structure-layout {
  grid-template-columns: 220px minmax(0, 1fr);
  background: #FAFBFC;
}

body[data-database-module] .database-table-list-panel {
  padding: 20px 14px;
  border-right-color: #edf0f4;
}

body[data-database-module] .database-table-list-panel > header {
  min-height: 32px;
  margin-bottom: 12px;
}

body[data-database-module] .database-table-list-panel > header strong {
  color: #1f2329;
  font-size: 15px;
}

body[data-database-module] .database-table-list-panel .database-table-list {
  align-content: start;
}

body[data-database-module] .database-table-item {
  grid-template-columns: minmax(0, 1fr) 28px;
  min-height: 40px;
  border: 0;
}

body[data-database-module] .database-table-item:hover,
body[data-database-module] .database-table-item.active {
  background: #eef4ff;
}

body[data-database-module] .database-table-item > button {
  display: block;
  height: 40px;
  overflow: hidden;
  padding: 0 8px 0 12px;
  color: #1f2329;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-database-module] .database-table-item > button strong {
  font-size: 13px;
  font-weight: 500;
}

body[data-database-module] .database-table-item.active > button strong { color: #3370ff; }
body[data-database-module] .database-table-item-actions { padding-right: 5px; }
body[data-database-module] .database-table-item-actions button {
  width: 24px;
  height: 24px;
  background: transparent;
  color: #646a73;
}

body[data-database-module] .database-table-item-actions button:hover {
  background: #dfe9fb;
  color: #3370ff;
}


body[data-database-module] .database-field-config-head { min-height: 32px; margin-bottom: 30px; border-top: 1px solid #DDE2ED;padding-top: 30px; }
body[data-database-module] .database-field-config-head h2 { color: #1f2329; font-size: 20px !important; }
body[data-database-module] .database-schema-table { min-width: 640px; }
body[data-database-module] .database-schema-table th:nth-child(1),
body[data-database-module] .database-schema-table td:nth-child(1) { width: 24%; }
body[data-database-module] .database-schema-table th:nth-child(2),
body[data-database-module] .database-schema-table td:nth-child(2) { width: 20%; }
body[data-database-module] .database-schema-table th:nth-child(3),
body[data-database-module] .database-schema-table td:nth-child(3) { width: auto; }
body[data-database-module] .database-schema-table th:last-child,
body[data-database-module] .database-schema-table td:last-child { width: 104px; text-align: center; }

@media (max-width: 900px) {
  body[data-database-module] .database-structure-layout { grid-template-columns: 1fr; }
}