/* ══════════════════════════════════════════
   DB EDITOR — стили
══════════════════════════════════════════ */

/* ── Password gate ── */
.dbe-gate {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 40px 20px; max-width: 380px; margin: 40px auto;
}
.dbe-gate-loading { color: var(--teal); font-size: 18px; }
.dbe-gate-icon    { font-size: 48px; }
.dbe-gate-title   { font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 2px; color: var(--gold); }
.dbe-gate-sub     { font-size: 12px; color: var(--txt-lo, #7a8fa8); text-align: center; }
.dbe-gate-input   {
  width: 100%; box-sizing: border-box;
  background: rgba(42,53,69,.6); border: 1px solid #3d4f63;
  color: var(--txt); font-size: 14px; padding: 10px 14px; outline: none;
  clip-path: polygon(6px 0%,100% 0%,100% calc(100% - 6px),calc(100% - 6px) 100%,0% 100%,0% 6px);
}
.dbe-gate-input:focus { border-color: rgba(200,162,39,.6); }
.dbe-gate-btn {
  width: 100%; padding: 11px; background: rgba(200,162,39,.15);
  border: 1px solid var(--gold); color: var(--gold-hi, #f0c040);
  font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 1px; cursor: pointer;
  clip-path: polygon(6px 0%,100% 0%,100% calc(100% - 6px),calc(100% - 6px) 100%,0% 100%,0% 6px);
}
.dbe-gate-btn:hover { background: rgba(200,162,39,.25); }
.dbe-gate-err { color: #e04040; font-size: 12px; }
.dbe-gate-ok  { color: #2fd67a; font-size: 12px; }

/* ── Main ── */
.dbe-main       { padding: 16px; }
.dbe-main-hdr   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.dbe-main-title { font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 2px; color: var(--gold); }
.dbe-chgpwd-btn { background: rgba(42,53,69,.6); border: 1px solid #3d4f63; color: var(--txt-lo,#7a8fa8); font-size: 12px; padding: 5px 10px; cursor: pointer; }
.dbe-chgpwd-btn:hover { border-color: var(--gold); color: var(--gold); }

.dbe-chgpwd-form { display: flex; flex-direction: column; gap: 8px; max-width: 340px; margin-bottom: 20px; padding: 14px; background: rgba(42,53,69,.3); border: 1px solid #3d4f63; }

/* ── Table cards ── */
.dbe-tables-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.dbe-table-card  {
  background: rgba(42,53,69,.4); border: 1px solid #3d4f63;
  padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s;
  clip-path: polygon(8px 0%,100% 0%,100% calc(100% - 8px),calc(100% - 8px) 100%,0% 100%,0% 8px);
}
.dbe-table-card:hover { border-color: var(--teal); background: rgba(42,154,176,.1); }
.dbe-table-card-name  { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; color: var(--teal); letter-spacing: 1px; }
.dbe-table-card-count { font-size: 11px; color: var(--txt-lo,#7a8fa8); margin-top: 4px; }

/* ── Table view ── */
.dbe-tableview  { display: flex; flex-direction: column; height: 100%; }
.dbe-tv-hdr     { display: flex; align-items: center; gap: 12px; padding: 10px 0 14px; border-bottom: 1px solid #2a3545; margin-bottom: 12px; }
.dbe-back-btn   { background: none; border: 1px solid #3d4f63; color: var(--txt-lo,#7a8fa8); padding: 4px 10px; font-size: 12px; cursor: pointer; }
.dbe-back-btn:hover { border-color: var(--teal); color: var(--teal); }
.dbe-tv-title   { font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700; color: var(--gold); letter-spacing: 1px; }
.dbe-tv-count   { font-size: 11px; color: var(--txt-lo,#7a8fa8); margin-left: auto; }

.dbe-tv-toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.dbe-search     { flex: 1; background: rgba(42,53,69,.5); border: 1px solid #3d4f63; color: var(--txt); padding: 7px 10px; font-size: 13px; outline: none; }
.dbe-search:focus { border-color: var(--teal); }
.dbe-search-btn { background: rgba(42,154,176,.15); border: 1px solid var(--teal); color: var(--teal); padding: 7px 14px; font-size: 12px; cursor: pointer; }
.dbe-clear-btn  { background: none; border: 1px solid #3d4f63; color: var(--txt-lo,#7a8fa8); padding: 7px 10px; cursor: pointer; }

.dbe-loading { color: var(--teal); padding: 20px; text-align: center; }
.dbe-err     { color: #e04040; font-size: 12px; padding: 8px; background: rgba(224,64,64,.1); border: 1px solid rgba(224,64,64,.3); margin-bottom: 8px; }

/* ── Data table ── */
.dbe-table-wrap { overflow-x: auto; flex: 1; }
.dbe-table      { width: 100%; border-collapse: collapse; font-size: 12px; }
.dbe-table th   { background: rgba(42,53,69,.8); color: var(--teal); font-family: 'Rajdhani', sans-serif; font-size: 11px; letter-spacing: 1px; padding: 7px 8px; text-align: left; border-bottom: 1px solid #3d4f63; white-space: nowrap; }
.dbe-table td   { padding: 6px 8px; border-bottom: 1px solid rgba(42,53,69,.5); color: var(--txt); vertical-align: middle; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbe-row:hover td { background: rgba(42,53,69,.3); }
.dbe-null       { color: #4a5f75; font-style: italic; }
.dbe-bool-t     { color: #2fd67a; font-weight: 700; }
.dbe-bool-f     { color: #e04040; }
.dbe-th-actions, .dbe-td-actions { width: 70px; text-align: center; }
.dbe-btn-edit   { background: rgba(42,154,176,.15); border: 1px solid var(--teal); color: var(--teal); padding: 3px 7px; font-size: 11px; cursor: pointer; margin-right: 4px; }
.dbe-btn-del    { background: rgba(224,64,64,.1); border: 1px solid rgba(224,64,64,.4); color: #e04040; padding: 3px 7px; font-size: 11px; cursor: pointer; }

/* ── Pagination ── */
.dbe-pagination { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 12px 0; }
.dbe-pagination button { background: rgba(42,53,69,.5); border: 1px solid #3d4f63; color: var(--txt); padding: 4px 12px; cursor: pointer; font-size: 14px; }
.dbe-pagination button:disabled { opacity: .3; cursor: default; }
.dbe-pagination span { font-size: 12px; color: var(--txt-lo,#7a8fa8); }

/* ── Edit modal ── */
.dbe-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.dbe-modal   { background: #141e2e; border: 1px solid #3d4f63; width: 580px; max-width: 96vw; max-height: 85vh; display: flex; flex-direction: column; }
.dbe-modal-hdr  { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #2a3545; }
.dbe-modal-hdr span { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; color: var(--gold); }
.dbe-modal-close { background: none; border: none; color: var(--txt-lo,#7a8fa8); font-size: 20px; cursor: pointer; padding: 0 4px; }
.dbe-modal-body { overflow-y: auto; padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.dbe-modal-field  { display: flex; flex-direction: column; gap: 4px; }
.dbe-modal-label  { font-size: 11px; color: var(--teal); font-family: 'Rajdhani', sans-serif; letter-spacing: 1px; }
.dbe-modal-type   { color: #4a5f75; font-style: italic; }
.dbe-modal-readonly { font-size: 12px; color: #4a5f75; padding: 4px 0; word-break: break-all; }
.dbe-modal-input  { background: rgba(42,53,69,.6); border: 1px solid #3d4f63; color: var(--txt); padding: 6px 8px; font-size: 12px; outline: none; resize: vertical; font-family: 'Share Tech Mono', monospace; }
.dbe-modal-input:focus { border-color: var(--teal); }
.dbe-modal-textarea { min-height: 32px; }
.dbe-modal-err    { color: #e04040; font-size: 12px; padding: 8px 16px; }
.dbe-modal-footer { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid #2a3545; }
.dbe-modal-btn    { padding: 8px 20px; font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; letter-spacing: 1px; }
.dbe-modal-btn.cancel { background: none; border: 1px solid #3d4f63; color: var(--txt-lo,#7a8fa8); }
.dbe-modal-btn.save   { background: rgba(200,162,39,.15); border: 1px solid var(--gold); color: var(--gold-hi,#f0c040); }
.dbe-modal-btn.delete { background: rgba(224,64,64,.15); border: 1px solid #e04040; color: #e04040; }

/* ── Confirm dialog ── */
.dbe-confirm       { background: #141e2e; border: 1px solid #e04040; padding: 24px; text-align: center; max-width: 360px; width: 100%; }
.dbe-confirm-title { font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700; color: #e04040; margin-bottom: 8px; }
.dbe-confirm-id    { font-size: 11px; color: #4a5f75; margin-bottom: 20px; word-break: break-all; }
.dbe-confirm-btns  { display: flex; gap: 10px; justify-content: center; }