/* =====================================================
   DATABASE PICKER DIALOG
   BizMetry Design System
   ===================================================== */

/* ─── CSS Variables ──────────────────────────────────── */
.database-picker-dialog {
  --biz-navy-dark:    #1a1f3c;
  --biz-navy:         #2d3a6b;
  --biz-indigo:       #667eea;
  --biz-indigo-dark:  #5a67d8;
  --biz-indigo-bg:    #e8eaf6;
  --biz-indigo-soft:  #f0f2fa;
  --biz-green:        #43a047;
  --biz-green-bg:     #e8f5e9;
  --biz-green-border: #a5d6a7;
  --biz-amber:        #f57c00;
  --biz-amber-bg:     #fff3e0;
  --biz-orange-bg:    #fff8f0;
  --biz-sensitive:    #d84315;
  --border:           #e8ecf4;
  --border-light:     #f0f2f8;
  --text-primary:     #2d3748;
  --text-secondary:   #718096;
  --text-muted:       #a0aec0;
  --bg-page:          #f8f9fc;
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:        0 2px 8px rgba(0,0,0,0.08);
}

/* ─── Base Dialog ────────────────────────────────────── */
body .database-picker-dialog,
body md-dialog.database-picker-dialog {
  width:          1300px  !important;
  min-width:      900px   !important;
  max-width:      1400px  !important;
  height:         88vh    !important;
  max-height:     88vh    !important;
  border-radius:  12px    !important;
  overflow:       hidden  !important;
  display:        flex    !important;
  flex-direction: column  !important;
}

.database-picker-dialog md-dialog-content,
.database-picker-dialog .database-picker-content {
  flex:           1       !important;
  display:        flex    !important;
  flex-direction: column  !important;
  padding:        0       !important;
  overflow:       hidden  !important;
  min-height:     0       !important;
  background:     var(--bg-page) !important;
}

/* ─── Toolbar ────────────────────────────────────────── */
.database-picker-dialog md-toolbar {
  background:  linear-gradient(135deg, #2d3a6b 0%, #1a1f3c 100%) !important;
  min-height:  64px !important;
  max-height:  64px !important;
  flex-shrink: 0    !important;
}

.database-picker-dialog .md-toolbar-tools {
  padding:     0 16px 0 20px !important;
  min-height:  64px           !important;
  display:     flex           !important;
  align-items: center         !important;
  gap:         10px           !important;
}

.database-picker-dialog .toolbar-icon-wrap {
  display:         flex    !important;
  align-items:     center  !important;
  justify-content: center  !important;
  width:           36px    !important;
  height:          36px    !important;
  border-radius:   8px     !important;
  background:      rgba(255,255,255,0.12) !important;
  flex-shrink:     0       !important;
}

.database-picker-dialog .toolbar-icon-wrap md-icon {
  color:     rgba(255,255,255,0.85) !important;
  font-size: 20px !important;
  width:     20px !important;
  height:    20px !important;
  margin:    0    !important;
}

.database-picker-dialog .toolbar-title-block {
  display:        flex   !important;
  flex-direction: column !important;
  gap:            1px    !important;
}

.database-picker-dialog .toolbar-title {
  font-size:   15px  !important;
  font-weight: 700   !important;
  color:       white !important;
  line-height: 1.2   !important;
}

.database-picker-dialog .toolbar-subtitle {
  font-size:   11px  !important;
  color:       rgba(255,255,255,0.5) !important;
  font-family: 'Roboto Mono', monospace !important;
  line-height: 1.2   !important;
}

.database-picker-dialog .toolbar-counter {
  display:       flex     !important;
  align-items:   center   !important;
  gap:           5px      !important;
  padding:       4px 12px !important;
  background:    rgba(255,255,255,0.15) !important;
  border:        1px solid rgba(255,255,255,0.25) !important;
  border-radius: 14px     !important;
  font-size:     12px     !important;
  font-weight:   700      !important;
  color:         white    !important;
  flex-shrink:   0        !important;
}

.database-picker-dialog .toolbar-counter md-icon {
  font-size: 14px    !important;
  width:     14px    !important;
  height:    14px    !important;
  color:     #a5d6a7 !important;
  margin:    0       !important;
}

.database-picker-dialog .toolbar-btn {
  display:        inline-flex !important;
  align-items:    center      !important;
  gap:            5px         !important;
  height:         32px        !important;
  min-height:     32px        !important;
  padding:        0 14px      !important;
  border-radius:  16px        !important;
  font-size:      12px        !important;
  font-weight:    700         !important;
  text-transform: none        !important;
  margin:         0           !important;
  flex-shrink:    0           !important;
  transition:     all 0.2s ease !important;
}

.database-picker-dialog .toolbar-btn md-icon,
.database-picker-dialog .toolbar-btn md-progress-circular {
  font-size: 15px !important;
  width:     15px !important;
  height:    15px !important;
  margin:    0    !important;
}

.database-picker-dialog .toolbar-btn--green                       { background: rgba(67,160,71,0.9) !important; color: white !important; }
.database-picker-dialog .toolbar-btn--green:not([disabled]):hover { background: #43a047 !important; box-shadow: 0 2px 8px rgba(67,160,71,0.4) !important; }
.database-picker-dialog .toolbar-btn--green[disabled]             { opacity: 0.5 !important; }

.database-picker-dialog .toolbar-btn--gray       { background: rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.85) !important; border: 1px solid rgba(255,255,255,0.2) !important; }
.database-picker-dialog .toolbar-btn--gray:hover { background: rgba(255,255,255,0.22) !important; }

.database-picker-dialog .close-btn {
  color:         rgba(255,255,255,0.7) !important;
  margin:        0    !important;
  width:         36px !important;
  height:        36px !important;
  min-width:     36px !important;
  border-radius: 50%  !important;
}
.database-picker-dialog .close-btn:hover { background: rgba(255,255,255,0.12) !important; color: white !important; }

/* ─── Connection Banner ──────────────────────────────── */
.database-picker-dialog .connection-banner {
  display:       flex    !important;
  align-items:   center  !important;
  padding:       12px 20px !important;
  background:    white   !important;
  border-bottom: 1px solid var(--border) !important;
  flex-shrink:   0       !important;
}

.database-picker-dialog .conn-item {
  display:     flex   !important;
  align-items: center !important;
  gap:         8px    !important;
  padding:     0 16px !important;
  flex-shrink: 0      !important;
}
.database-picker-dialog .conn-item:first-child { padding-left: 0 !important; }

.database-picker-dialog .conn-item-icon {
  display:         flex    !important;
  align-items:     center  !important;
  justify-content: center  !important;
  width:           28px    !important;
  height:          28px    !important;
  min-width:       28px    !important;
  min-height:      28px    !important;
  border-radius:   7px     !important;
  background:      var(--biz-indigo-soft) !important;
  flex-shrink:     0       !important;
}

.database-picker-dialog .conn-item-icon md-icon {
  font-size:       15px   !important;
  width:           15px   !important;
  height:          15px   !important;
  color:           var(--biz-indigo) !important;
  margin:          0      !important;
  padding:         0      !important;
  line-height:     15px   !important;
  display:         flex   !important;
  align-items:     center !important;
  justify-content: center !important;
}

.database-picker-dialog .conn-item-icon--online         { background: var(--biz-green-bg) !important; }
.database-picker-dialog .conn-item-icon--online md-icon { color: var(--biz-green) !important; }

.database-picker-dialog .conn-item-body {
  display:        flex   !important;
  flex-direction: column !important;
  gap:            1px    !important;
}

.database-picker-dialog .conn-item-label {
  font-size:      10px  !important;
  font-weight:    700   !important;
  color:          var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  line-height:    1     !important;
}

.database-picker-dialog .conn-item-value {
  font-size:   13px  !important;
  font-weight: 600   !important;
  color:       var(--text-primary) !important;
  line-height: 1.2   !important;
  display:     flex  !important;
  align-items: center !important;
}

.database-picker-dialog .conn-item-value--mono {
  font-family: 'Roboto Mono', monospace !important;
  font-size:   12px    !important;
  color:       #3949ab !important;
}

.database-picker-dialog .conn-separator {
  width:       1px           !important;
  height:      30px          !important;
  background:  var(--border) !important;
  flex-shrink: 0             !important;
}

.database-picker-dialog .conn-limit-notice {
  margin-left:   auto    !important;
  display:       flex    !important;
  align-items:   center  !important;
  gap:           5px     !important;
  font-size:     11px    !important;
  font-weight:   600     !important;
  color:         var(--biz-amber) !important;
  background:    var(--biz-amber-bg) !important;
  padding:       4px 10px !important;
  border-radius: 10px    !important;
  border:        1px solid #ffcc80 !important;
  flex-shrink:   0       !important;
}
.database-picker-dialog .conn-limit-notice md-icon { font-size: 14px !important; width: 14px !important; height: 14px !important; color: var(--biz-amber) !important; margin: 0 !important; }

/* ─── Search ─────────────────────────────────────────── */
.database-picker-dialog .search-wrap {
  padding:     12px 20px 8px !important;
  flex-shrink: 0              !important;
  background:  var(--bg-page) !important;
}

.database-picker-dialog .search-input-wrap {
  display:       flex    !important;
  align-items:   center  !important;
  gap:           8px     !important;
  background:    white   !important;
  border:        1.5px solid var(--border) !important;
  border-radius: 8px     !important;
  padding:       6px 12px !important;
  transition:    border-color 0.2s ease !important;
}
.database-picker-dialog .search-input-wrap:focus-within { border-color: var(--biz-indigo) !important; box-shadow: 0 0 0 3px rgba(102,126,234,0.1) !important; }

.database-picker-dialog .search-icon { font-size: 18px !important; width: 18px !important; height: 18px !important; color: var(--text-muted) !important; flex-shrink: 0 !important; margin: 0 !important; }

.database-picker-dialog .search-input {
  flex:       1           !important;
  border:     none        !important;
  outline:    none        !important;
  font-size:  13px        !important;
  color:      var(--text-primary) !important;
  background: transparent !important;
  padding:    0           !important;
}
.database-picker-dialog .search-input::placeholder { color: var(--text-muted); }

.database-picker-dialog .search-clear-btn { margin: 0 !important; padding: 0 !important; min-width: 24px !important; width: 24px !important; height: 24px !important; min-height: 24px !important; border-radius: 50% !important; flex-shrink: 0 !important; }
.database-picker-dialog .search-clear-btn md-icon { font-size: 16px !important; width: 16px !important; height: 16px !important; color: var(--text-muted) !important; margin: 0 !important; }

/* ─── States ─────────────────────────────────────────── */
.database-picker-dialog .state-container {
  flex:            1       !important;
  display:         flex    !important;
  flex-direction:  column  !important;
  align-items:     center  !important;
  justify-content: center  !important;
  margin:          8px 20px !important;
  background:      white   !important;
  border:          1px solid var(--border) !important;
  border-radius:   10px    !important;
  gap:             8px     !important;
  padding:         40px    !important;
}

.database-picker-dialog .state-icon-wrap {
  display:         flex   !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           56px   !important;
  height:          56px   !important;
  border-radius:   50%    !important;
  background:      var(--biz-indigo-soft) !important;
  margin-bottom:   8px    !important;
}
.database-picker-dialog .state-icon-wrap md-icon { font-size: 28px !important; width: 28px !important; height: 28px !important; color: var(--text-muted) !important; }

.database-picker-dialog .state-title   { font-size: 15px !important; font-weight: 700 !important; color: var(--text-primary) !important; margin: 0 !important; }
.database-picker-dialog .state-subtitle { font-size: 13px !important; color: var(--text-secondary) !important; margin: 0 !important; }

/* ─── Table Section ──────────────────────────────────── */
.database-picker-dialog .table-section {
  position:       relative  !important; /* required for loading overlay */
  flex:           1         !important;
  display:        flex      !important;
  flex-direction: column    !important;
  margin:         0 20px 8px !important;
  background:     white     !important;
  border:         1px solid var(--border) !important;
  border-radius:  10px      !important;
  overflow:       hidden    !important;
  min-height:     0         !important;
  box-shadow:     var(--shadow-sm) !important;
}

/* Overlay during page navigation — keeps table in DOM, no flicker */
.database-picker-dialog .table-loading-overlay {
  position:        absolute !important;
  inset:           0        !important;
  background:      rgba(255,255,255,0.75) !important;
  display:         flex     !important;
  align-items:     center   !important;
  justify-content: center   !important;
  z-index:         20       !important;
  border-radius:   10px     !important;
  backdrop-filter: blur(1px) !important;
}

.database-picker-dialog .table-container {
  flex:       1    !important;
  overflow:   auto !important;
  min-height: 0    !important;
}

.database-picker-dialog .table-container--loading {
  opacity:        0.4  !important;
  pointer-events: none !important;
  transition:     opacity 0.15s ease !important;
}

/* ─── Table ──────────────────────────────────────────── */
.database-picker-dialog .picker-table {
  width:           100%     !important;
  border-collapse: separate !important;
  border-spacing:  0        !important;
}

/* ─── TH ─────────────────────────────────────────────── */
.database-picker-dialog .picker-table thead {
  position: sticky !important;
  top:      0      !important;
  z-index:  10     !important;
}

.database-picker-dialog .picker-table thead th {
  padding:        10px 14px !important;
  text-align:     left      !important;
  font-size:      11px      !important;
  font-weight:    700       !important;
  color:          var(--text-secondary) !important;
  border-bottom:  2px solid var(--border) !important;
  background:     #fafbfd   !important;
  white-space:    nowrap    !important;
  vertical-align: middle    !important;
}

/* Checkbox column: identical for th and td to guarantee alignment */
.database-picker-dialog .th-select,
.database-picker-dialog .td-select {
  width:          52px   !important;
  min-width:      52px   !important;
  max-width:      52px   !important;
  padding:        0      !important;
  text-align:     center !important;
  vertical-align: middle !important;
}

.database-picker-dialog .th-select .picker-checkbox,
.database-picker-dialog .td-select .picker-checkbox {
  display:         flex   !important;
  align-items:     center !important;
  justify-content: center !important;
  margin:          0 auto !important;
  width:           20px   !important;
  height:          20px   !important;
}

/* Override Angular Material's absolute positioning on inner container */
.database-picker-dialog .th-select .picker-checkbox .md-container,
.database-picker-dialog .td-select .picker-checkbox .md-container {
  position: relative !important;
  top:      auto     !important;
  left:     auto     !important;
  margin:   0 auto   !important;
}

.database-picker-dialog .th-pk { border-left: 3px solid #f59e0b !important; background: #fffbeb !important; }
.database-picker-dialog .th-rn { border-left: 3px solid var(--biz-green) !important; background: #f0fdf4 !important; }
.database-picker-dialog .th-rd { border-left: 3px solid #3b82f6 !important; background: #eff6ff !important; }

.database-picker-dialog .th-special-content { display: flex !important; align-items: center !important; gap: 6px !important; }
.database-picker-dialog .th-special-content md-icon { font-size: 15px !important; width: 15px !important; height: 15px !important; flex-shrink: 0 !important; margin: 0 !important; }

.database-picker-dialog .th-pk .th-special-content md-icon { color: #d97706 !important; }
.database-picker-dialog .th-rn .th-special-content md-icon { color: var(--biz-green) !important; }
.database-picker-dialog .th-rd .th-special-content md-icon { color: #2563eb !important; }

.database-picker-dialog .th-name  { font-size: 12px !important; font-weight: 700 !important; color: var(--text-primary) !important; line-height: 1.2 !important; }
.database-picker-dialog .th-badge { font-size: 9px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; line-height: 1 !important; margin-top: 1px !important; }
.database-picker-dialog .th-badge--pk { color: #d97706 !important; }
.database-picker-dialog .th-badge--rn { color: var(--biz-green) !important; }
.database-picker-dialog .th-badge--rd { color: #2563eb !important; }

.database-picker-dialog .th-regular-name { font-family: 'Roboto Mono', monospace !important; font-size: 11px !important; color: var(--text-secondary) !important; }

/* ─── TR ─────────────────────────────────────────────── */
.database-picker-dialog .picker-row { cursor: pointer !important; transition: background 0.1s ease !important; }

.database-picker-dialog .picker-row:hover           { background: #fafbfd !important; }
.database-picker-dialog .picker-row--selected       { background: #f3f4ff !important; box-shadow: inset 3px 0 0 var(--biz-indigo) !important; }
.database-picker-dialog .picker-row--selected:hover { background: #eef0ff !important; }
.database-picker-dialog .picker-row--imported       { cursor: not-allowed !important; opacity: 0.7 !important; background: #fafafa !important; }
.database-picker-dialog .picker-row--imported:hover { background: #f3f3f3 !important; }
.database-picker-dialog .picker-row--imported td    { color: #999 !important; }

/* ─── TD ─────────────────────────────────────────────── */
.database-picker-dialog .picker-table tbody td {
  padding:        9px 14px !important;
  font-size:      12px     !important;
  color:          var(--text-primary) !important;
  border-bottom:  1px solid var(--border-light) !important;
  white-space:    nowrap   !important;
  overflow:       hidden   !important;
  text-overflow:  ellipsis !important;
  max-width:      280px    !important;
  vertical-align: middle   !important;
}

/* PK */
.database-picker-dialog .td-pk                       { background: #fffcf0 !important; border-left: 3px solid #fbbf24 !important; }
.database-picker-dialog .picker-row--selected .td-pk { background: #fef9e7 !important; }

.database-picker-dialog .pk-chip { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-family: 'Roboto Mono', monospace !important; font-size: 11px !important; font-weight: 700 !important; color: #92400e !important; }
.database-picker-dialog .pk-chip md-icon { font-size: 13px !important; width: 13px !important; height: 13px !important; color: #d97706 !important; margin: 0 !important; flex-shrink: 0 !important; }

/* Resource Name */
.database-picker-dialog .td-rn                       { background: #f0fdf4 !important; border-left: 3px solid #86efac !important; }
.database-picker-dialog .picker-row--selected .td-rn { background: #dcfce7 !important; }

.database-picker-dialog .rn-chip { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 12px !important; font-weight: 600 !important; color: #166534 !important; }
.database-picker-dialog .rn-chip md-icon { font-size: 13px !important; width: 13px !important; height: 13px !important; color: var(--biz-green) !important; margin: 0 !important; flex-shrink: 0 !important; }

/* Resource Description */
.database-picker-dialog .td-rd                       { background: #eff6ff !important; border-left: 3px solid #93c5fd !important; }
.database-picker-dialog .picker-row--selected .td-rd { background: #dbeafe !important; }

/* Description is free text: wrap it instead of the table-wide single-line ellipsis */
.database-picker-dialog .picker-table tbody td.td-rd {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  min-width: 220px !important;
  max-width: 420px !important;
  overflow-wrap: anywhere !important;
}
.database-picker-dialog .rd-chip { display: inline-flex !important; align-items: flex-start !important; gap: 5px !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.45 !important; color: #1e40af !important; }
.database-picker-dialog .rd-chip md-icon { font-size: 13px !important; width: 13px !important; height: 13px !important; min-height: 13px !important; color: #2563eb !important; margin: 2px 0 0 0 !important; flex-shrink: 0 !important; }

/* Regular */
.database-picker-dialog .td-regular                       { background: white   !important; }
.database-picker-dialog .picker-row:hover .td-regular     { background: #fafbfd !important; }
.database-picker-dialog .picker-row--selected .td-regular { background: #f8f9ff !important; }
.database-picker-dialog .regular-value { font-family: 'Roboto Mono', monospace !important; font-size: 11px !important; color: #475569 !important; }

/* JSON */
.database-picker-dialog .td-json { background: var(--biz-orange-bg) !important; text-align: center !important; padding: 4px 10px !important; }

.database-picker-dialog .btn-view-json {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  margin: 0 !important; padding: 3px 10px !important; min-height: 26px !important; height: 26px !important;
  border-radius: 13px !important; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  color: white !important; font-size: 11px !important; font-weight: 700 !important; text-transform: none !important;
  box-shadow: 0 1px 3px rgba(249,115,22,0.3) !important; transition: all 0.2s ease !important;
}
.database-picker-dialog .btn-view-json:hover   { box-shadow: 0 2px 6px rgba(249,115,22,0.5) !important; transform: translateY(-1px) !important; }
.database-picker-dialog .btn-view-json md-icon { font-size: 13px !important; width: 13px !important; height: 13px !important; color: white !important; margin: 0 !important; }

/* Sensitive */
.database-picker-dialog .td-sensitive { background: #fff8f5 !important; padding: 4px 10px !important; }
.database-picker-dialog .sensitive-wrap { display: flex !important; align-items: center !important; gap: 6px !important; }
.database-picker-dialog .sensitive-text { font-family: 'Roboto Mono', monospace !important; font-size: 11px !important; font-weight: 600 !important; color: var(--biz-sensitive) !important; flex: 1 !important; }
.database-picker-dialog .sensitive-text--hidden { letter-spacing: 3px !important; color: #bdbdbd !important; font-weight: 700 !important; }

.database-picker-dialog .btn-sensitive-toggle { margin: 0 !important; padding: 0 !important; min-width: 24px !important; width: 24px !important; height: 24px !important; min-height: 24px !important; border-radius: 50% !important; flex-shrink: 0 !important; transition: background 0.15s ease !important; }
.database-picker-dialog .btn-sensitive-toggle:hover   { background: rgba(216,67,21,0.1) !important; }
.database-picker-dialog .btn-sensitive-toggle md-icon { font-size: 16px !important; width: 16px !important; height: 16px !important; color: var(--biz-sensitive) !important; margin: 0 !important; }

/* Already imported badge */
.database-picker-dialog .td-imported-badge { padding: 4px 10px !important; white-space: nowrap !important; }
.database-picker-dialog .imported-badge { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 10px !important; font-weight: 700 !important; color: #4caf50 !important; background: #e8f5e9 !important; padding: 2px 8px !important; border-radius: 8px !important; border: 1px solid #a5d6a7 !important; }
.database-picker-dialog .imported-badge md-icon { font-size: 12px !important; width: 12px !important; height: 12px !important; color: #4caf50 !important; margin: 0 !important; }

/* ─── Checkboxes ─────────────────────────────────────── */
.database-picker-dialog .picker-checkbox { margin: 0 !important; }
.database-picker-dialog .picker-checkbox .md-container { border-color: #d1d5db !important; }
.database-picker-dialog .picker-row:hover .picker-checkbox:not([disabled]) .md-container { border-color: var(--biz-indigo) !important; }
.database-picker-dialog .picker-checkbox.md-checked .md-container,
.database-picker-dialog .picker-checkbox.md-checked .md-icon { background: var(--biz-indigo) !important; border-color: var(--biz-indigo) !important; }
.database-picker-dialog .picker-checkbox[disabled] .md-container { opacity: 0.4 !important; cursor: not-allowed !important; }

.database-picker-dialog .picker-checkbox--header .md-container { background: #f3f4f6 !important; border: 1.5px solid #d1d5db !important; border-radius: 4px !important; }
.database-picker-dialog .picker-checkbox--header.md-checked .md-container { background: var(--biz-indigo) !important; border-color: var(--biz-indigo) !important; }

/* ─── Legend ─────────────────────────────────────────── */
.database-picker-dialog .table-legend { display: flex !important; align-items: center !important; gap: 16px !important; padding: 8px 16px !important; background: #fafbfd !important; border-top: 1px solid var(--border) !important; flex-shrink: 0 !important; }
.database-picker-dialog .legend-item  { display: flex !important; align-items: center !important; gap: 5px !important; font-size: 11px !important; font-weight: 500 !important; color: var(--text-secondary) !important; white-space: nowrap !important; }
.database-picker-dialog .legend-dot   { display: inline-block !important; width: 8px !important; height: 8px !important; border-radius: 2px !important; flex-shrink: 0 !important; }

.database-picker-dialog .legend-dot--pk        { background: #fbbf24; }
.database-picker-dialog .legend-dot--rn        { background: #4ade80; }
.database-picker-dialog .legend-dot--rd        { background: #60a5fa; }
.database-picker-dialog .legend-dot--imported  { background: #a5d6a7; }
.database-picker-dialog .legend-dot--sensitive { background: var(--biz-sensitive); }

/* ─── Pagination Bar ─────────────────────────────────── */
.database-picker-dialog .pagination-bar {
  display:         flex          !important;
  align-items:     center        !important;
  justify-content: space-between !important;
  gap:             12px          !important;
  padding:         8px 20px      !important;
  background:      white         !important;
  border-top:      1px solid var(--border) !important;
  flex-shrink:     0             !important;
  min-height:      52px          !important;
}

.database-picker-dialog .pagination-info { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; color: var(--text-secondary) !important; flex-shrink: 0 !important; white-space: nowrap !important; }
.database-picker-dialog .pagination-info md-icon { font-size: 15px !important; width: 15px !important; height: 15px !important; color: var(--biz-indigo) !important; margin: 0 !important; }
.database-picker-dialog .pagination-info strong  { color: var(--text-primary); font-weight: 700; }
.database-picker-dialog .pagination-info--loading { font-style: italic; opacity: 0.75; }

.database-picker-dialog .pagination-nav { display: flex !important; align-items: center !important; gap: 2px !important; flex: 1 !important; justify-content: center !important; }

.database-picker-dialog .pag-btn { margin: 0 !important; width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 50% !important; padding: 0 !important; transition: all 0.15s ease !important; }
.database-picker-dialog .pag-btn:not([disabled]):hover { background: var(--biz-indigo-soft) !important; }
.database-picker-dialog .pag-btn[disabled]             { opacity: 0.3 !important; }
.database-picker-dialog .pag-btn md-icon               { font-size: 18px !important; width: 18px !important; height: 18px !important; color: var(--biz-indigo) !important; }
.database-picker-dialog .pag-btn[disabled] md-icon     { color: var(--text-muted) !important; }

.database-picker-dialog .page-numbers { display: flex !important; align-items: center !important; gap: 2px !important; margin: 0 4px !important; }

.database-picker-dialog .pag-page-btn {
  margin: 0 !important; min-width: 32px !important; width: 32px !important; height: 32px !important;
  border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important;
  color: var(--text-secondary) !important; background: transparent !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  transition: all 0.15s ease !important;
}
.database-picker-dialog .pag-page-btn:hover   { background: var(--biz-indigo-soft) !important; color: var(--biz-indigo) !important; }
.database-picker-dialog .pag-page-btn--active { background: var(--biz-indigo) !important; color: white !important; box-shadow: 0 2px 6px rgba(102,126,234,0.3) !important; }
.database-picker-dialog .pag-ellipsis         { color: var(--text-muted) !important; font-size: 14px !important; padding: 0 4px !important; }

.database-picker-dialog .pagination-size { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; color: var(--text-secondary) !important; flex-shrink: 0 !important; white-space: nowrap !important; }
.database-picker-dialog .pag-size-select { margin: 0 !important; min-width: 60px !important; }
.database-picker-dialog .pag-size-select .md-select-value { border: 1.5px solid var(--border) !important; border-radius: 6px !important; padding: 3px 8px !important; min-height: 28px !important; font-size: 12px !important; font-weight: 600 !important; background: white !important; }

/* ─── Dialog Actions ─────────────────────────────────── */
.database-picker-dialog md-dialog-actions,
.database-picker-dialog .dialog-actions {
  display:         flex     !important;
  justify-content: flex-end !important;
  gap:             10px     !important;
  padding:         12px 20px !important;
  background:      white    !important;
  border-top:      1px solid var(--border) !important;
  flex-shrink:     0        !important;
  min-height:      60px     !important;
}

.database-picker-dialog .btn-cancel {
  display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 0 20px !important;
  height: 38px !important; border-radius: 19px !important; font-size: 13px !important; font-weight: 600 !important;
  text-transform: none !important; margin: 0 !important; background: #f3f4f8 !important;
  color: var(--text-secondary) !important; border: 1px solid var(--border) !important; transition: background 0.2s ease !important;
}
.database-picker-dialog .btn-cancel:hover { background: #e8ecf4 !important; }

.database-picker-dialog .btn-confirm {
  display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 0 22px !important;
  height: 38px !important; border-radius: 19px !important; font-size: 13px !important; font-weight: 700 !important;
  text-transform: none !important; margin: 0 !important; border: none !important;
  background: linear-gradient(135deg, var(--biz-indigo) 0%, var(--biz-indigo-dark) 100%) !important;
  color: white !important; box-shadow: 0 2px 8px rgba(102,126,234,0.3) !important; transition: all 0.2s ease !important;
}
.database-picker-dialog .btn-confirm:not([disabled]):hover { box-shadow: 0 4px 16px rgba(102,126,234,0.45) !important; transform: translateY(-1px) !important; }
.database-picker-dialog .btn-confirm[disabled]             { opacity: 0.45 !important; cursor: not-allowed !important; transform: none !important; }
.database-picker-dialog .btn-confirm md-icon               { font-size: 18px !important; width: 18px !important; height: 18px !important; margin: 0 !important; }

/* ─── JSON Overlay ───────────────────────────────────── */
.database-picker-dialog .json-overlay {
  position: fixed !important; inset: 0 !important;
  background: rgba(15,20,40,0.55) !important; z-index: 9999 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  animation: overlayFadeIn 0.2s ease !important;
}
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }

.database-picker-dialog .json-panel {
  background: white !important; border-radius: 10px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important;
  width: min(800px, 90vw) !important; max-height: 80vh !important;
  display: flex !important; flex-direction: column !important;
  overflow: hidden !important; animation: panelSlideUp 0.2s ease !important;
}
@keyframes panelSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.database-picker-dialog .json-panel-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 14px 16px !important; flex-shrink: 0 !important;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
}

.database-picker-dialog .json-panel-title { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 14px !important; font-weight: 700 !important; color: white !important; }
.database-picker-dialog .json-panel-title md-icon { font-size: 18px !important; width: 18px !important; height: 18px !important; color: white !important; margin: 0 !important; }

.database-picker-dialog .json-close-btn { color: rgba(255,255,255,0.8) !important; margin: 0 !important; width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 50% !important; }
.database-picker-dialog .json-close-btn:hover   { background: rgba(255,255,255,0.15) !important; }
.database-picker-dialog .json-close-btn md-icon { font-size: 18px !important; width: 18px !important; height: 18px !important; margin: 0 !important; }

.database-picker-dialog .json-panel-body { flex: 1 !important; overflow: auto !important; padding: 16px !important; background: #fafafa !important; }
.database-picker-dialog .json-panel-body pre {
  margin: 0 !important; padding: 14px !important; background: white !important;
  border: 1px solid var(--border) !important; border-radius: 8px !important;
  font-family: 'Roboto Mono', 'Courier New', monospace !important;
  font-size: 12px !important; line-height: 1.65 !important; color: #334155 !important;
  white-space: pre-wrap !important; word-wrap: break-word !important;
}

.database-picker-dialog .json-panel-footer { display: flex !important; justify-content: flex-end !important; gap: 10px !important; padding: 12px 16px !important; background: #f9fafb !important; border-top: 1px solid var(--border) !important; flex-shrink: 0 !important; }

.database-picker-dialog .btn-copy-json {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  padding: 0 18px !important; height: 34px !important; border-radius: 17px !important;
  font-size: 12px !important; font-weight: 700 !important; text-transform: none !important; margin: 0 !important;
  background: linear-gradient(135deg, var(--biz-indigo) 0%, var(--biz-indigo-dark) 100%) !important;
  color: white !important; box-shadow: 0 2px 6px rgba(102,126,234,0.3) !important; transition: all 0.2s ease !important;
}
.database-picker-dialog .btn-copy-json:hover   { box-shadow: 0 3px 10px rgba(102,126,234,0.45) !important; transform: translateY(-1px) !important; }
.database-picker-dialog .btn-copy-json md-icon { font-size: 15px !important; width: 15px !important; height: 15px !important; margin: 0 !important; }

.database-picker-dialog .btn-close-json {
  display: inline-flex !important; align-items: center !important;
  padding: 0 18px !important; height: 34px !important; border-radius: 17px !important;
  font-size: 12px !important; font-weight: 600 !important; text-transform: none !important; margin: 0 !important;
  background: #f3f4f8 !important; color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important; transition: background 0.15s ease !important;
}
.database-picker-dialog .btn-close-json:hover { background: #e8ecf4 !important; }

/* ─── Scrollbars ─────────────────────────────────────── */
.database-picker-dialog .table-container::-webkit-scrollbar,
.database-picker-dialog .json-panel-body::-webkit-scrollbar  { width: 8px; height: 8px; }

.database-picker-dialog .table-container::-webkit-scrollbar-track,
.database-picker-dialog .json-panel-body::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 4px; }

.database-picker-dialog .table-container::-webkit-scrollbar-thumb,
.database-picker-dialog .json-panel-body::-webkit-scrollbar-thumb { background: #d0d5e0; border-radius: 4px; }

.database-picker-dialog .table-container::-webkit-scrollbar-thumb:hover,
.database-picker-dialog .json-panel-body::-webkit-scrollbar-thumb:hover { background: #b0b8cc; }

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  body .database-picker-dialog               { min-width: 95vw !important; }
  .database-picker-dialog .pagination-bar    { flex-wrap: wrap; }
  .database-picker-dialog .conn-item-value--mono { font-size: 11px !important; }
}