/* SQL Query Page Styles */

.sql-quick-btns {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.sql-quick-btns button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; font-size: 13px; font-weight: 600;
  border-radius: 8px; cursor: pointer; border: 1px solid #e2e5ee;
  background: #fff; color: #525a6e;
  transition: all .15s;
}
.sql-quick-btns button:hover {
  background: #f0f2f7; border-color: #cdd1dc; color: #1a1a2e;
}
.sql-quick-btns button i { font-size: 15px; }

.filters {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 12px;
}
.filters input {
  flex: 1; min-width: 300px;
  padding: 10px 14px; font-size: 13px; font-family: "Consolas", "Monaco", monospace;
  border: 1px solid #e2e5ee; border-radius: 8px;
  background: #fafbfd; outline: none;
  transition: all .15s;
}
.filters input:focus {
  border-color: #1a3a6b; background: #fff;
  box-shadow: 0 0 0 3px rgba(26,58,107,.06);
}
.filters .btn-exec {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; font-size: 13px; font-weight: 700;
  border-radius: 8px; cursor: pointer; border: none;
  background: #1a3a6b; color: #fff;
  transition: all .15s;
}
.filters .btn-exec:hover { background: #122850; }

/* SQL result cards */
#sqlResult {
  display: flex; flex-direction: column; gap: 6px;
}
.sql-card {
  background: #fff;
  border-radius: 10px; border: 1px solid #e2e5ee;
  padding: 12px 16px; cursor: pointer;
  display: flex; flex-wrap: wrap; gap: 12px;
  transition: all .15s;
}
.sql-card:hover {
  border-color: #cdd1dc;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.sql-field {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 100px;
}
.sql-key {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: #8b92a5;
}
.sql-val {
  font-size: 13px; font-weight: 600; color: #1a1a2e;
  word-break: break-all;
}

/* Detail modal table */
.sql-detail-table {
  width: 100%; border-collapse: collapse;
}
.sql-detail-table td {
  padding: 8px 12px; border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
}
.sql-detail-table .k {
  font-weight: 700; color: #8b92a5;
  width: 30%; white-space: nowrap;
}
.sql-detail-table .v {
  color: #1a1a2e; font-weight: 600;
  word-break: break-all;
}

/* Empty state */
.empty-state {
  text-align: center; padding: 60px 20px; color: #8b92a5;
}
.empty-state i { font-size: 48px; display: block; margin-bottom: 12px; }