/* ================================================================
   YES2BROKER — db-manager.css
   Add <link rel="stylesheet" href="db-manager.css"/> to index.html
   ================================================================ */

/* ── PASSWORD GATE ───────────────────────────────────────────── */
.db-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 20px;
}
.db-gate-card {
  background: var(--white);
  border: 1px solid var(--s200);
  border-radius: 16px;
  box-shadow: var(--sh3);
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.db-gate-icon {
  width: 60px; height: 60px;
  background: var(--blue-50);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-500);
  margin-bottom: 4px;
}
.db-gate-title {
  font-size: 18px; font-weight: 800;
  color: var(--blue-900); letter-spacing: -.3px;
}
.db-gate-sub {
  font-size: 13px; color: var(--s500); line-height: 1.5;
  max-width: 320px;
}
.db-gate-field { width: 100%; }
.db-gate-field input {
  width: 100%; height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--s200);
  border-radius: var(--rs);
  font-family: inherit; font-size: 14px;
  color: var(--s900);
  outline: none;
  transition: border-color var(--tr);
  text-align: center;
  letter-spacing: 2px;
}
.db-gate-field input:focus { border-color: var(--blue-400); }
.db-gate-error {
  margin-top: 6px;
  font-size: 12px;
  color: var(--rose);
  font-weight: 600;
  min-height: 16px;
}
.db-gate-btn {
  width: 100%; height: 44px;
  background: var(--blue-500);
  color: var(--white);
  border: none; border-radius: var(--rs);
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background var(--tr);
}
.db-gate-btn:hover:not(:disabled) { background: var(--blue-600); }
.db-gate-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ── LOCK BTN ────────────────────────────────────────────────── */
.db-lock-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--s100); border: 1.5px solid var(--s200);
  border-radius: var(--rs); font-family: inherit;
  font-size: 12px; font-weight: 600; color: var(--s600);
  cursor: pointer; transition: all var(--tr);
}
.db-lock-btn:hover { background: var(--s200); color: var(--s900); }

/* ── TABLE CARDS ─────────────────────────────────────────────── */
.db-table-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.db-table-card {
  background: var(--white);
  border: 1px solid var(--s200);
  border-radius: var(--r);
  padding: 18px 18px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  transition: box-shadow var(--tr), transform var(--tr), border-color var(--tr);
  box-shadow: var(--sh1);
  position: relative;
  overflow: hidden;
}
.db-table-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
}
.db-color-blue::before  { background: var(--blue-500); }
.db-color-green::before { background: var(--emerald); }
.db-color-amber::before { background: var(--amber); }

.db-table-card:hover {
  box-shadow: var(--sh2);
  transform: translateY(-2px);
}
.db-tc-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.db-color-blue  .db-tc-icon { background: var(--blue-50);  color: var(--blue-500); }
.db-color-green .db-tc-icon { background: #d1fae5; color: var(--emerald); }
.db-color-amber .db-tc-icon { background: #fef3c7; color: var(--amber); }

.db-tc-body { flex: 1; min-width: 0; }
.db-tc-label { font-size: 14px; font-weight: 700; color: var(--blue-900); margin-bottom: 2px; }
.db-tc-key   { font-size: 11px; color: var(--s400); margin-bottom: 3px; }
.db-tc-key code { font-family: 'JetBrains Mono', monospace; background: var(--s100); padding: 1px 5px; border-radius: 4px; }
.db-tc-cols  { font-size: 11px; color: var(--s400); }

.db-tc-count {
  display: flex; flex-direction: column; align-items: flex-end;
  flex-shrink: 0; min-width: 60px; text-align: right;
}
.db-count-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px; font-weight: 700; color: var(--blue-900);
  line-height: 1;
}
.db-count-lbl { font-size: 10px; color: var(--s400); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.db-count-err { font-size: 18px; color: var(--s300); font-family: 'JetBrains Mono', monospace; }
.db-count-spinner {
  width: 16px; height: 16px; border: 2px solid var(--s200);
  border-top-color: var(--blue-400); border-radius: 50%;
  display: inline-block;
  animation: spin .7s linear infinite;
}

.db-tc-arrow { color: var(--s300); flex-shrink: 0; }

/* ── WORKSPACE ───────────────────────────────────────────────── */
.db-workspace {
  background: var(--white);
  border: 1px solid var(--s200);
  border-radius: var(--r);
  box-shadow: var(--sh2);
  overflow: hidden;
}
.db-ws-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--s100);
  background: var(--sf);
  gap: 12px;
}
.db-ws-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.db-icon-blue  { background: var(--blue-50);  color: var(--blue-500); }
.db-icon-green { background: #d1fae5; color: var(--emerald); }
.db-icon-amber { background: #fef3c7; color: var(--amber); }

.db-ws-title { font-size: 15px; font-weight: 700; color: var(--blue-900); }
.db-ws-sub   { font-size: 11px; color: var(--s400); margin-top: 2px; }
.db-ws-close {
  width: 32px; height: 32px;
  background: var(--s100); border: none; border-radius: 7px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--s500); transition: all var(--tr); flex-shrink: 0;
}
.db-ws-close:hover { background: var(--s200); color: var(--s900); }

.db-steps {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  border-top: none;
}
@media (max-width: 768px) {
  .db-steps { grid-template-columns: 1fr; }
}

.db-action-card {
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
  border-right: 1px solid var(--s100);
}
.db-action-card:last-child { border-right: none; }
.db-action-card.danger { background: #fff8f8; }

.db-ac-head {
  display: flex; align-items: flex-start; gap: 12px;
}
.db-ac-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.db-ac-icon.red  { background: #fee2e2; color: var(--rose); }
.db-ac-icon.blue { background: var(--blue-50); color: var(--blue-500); }

.db-ac-title { font-size: 13.5px; font-weight: 700; color: var(--blue-900); margin-bottom: 2px; }
.db-ac-sub   { font-size: 11.5px; color: var(--s400); line-height: 1.4; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.db-btn-danger {
  padding: 9px 18px;
  background: var(--rose); color: var(--white);
  border: none; border-radius: var(--rs);
  font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background var(--tr);
  align-self: flex-start;
}
.db-btn-danger:hover:not(:disabled) { background: #b91c1c; }
.db-btn-danger:disabled { opacity: .5; cursor: not-allowed; }

.db-btn-sample {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; align-self: flex-start;
  background: var(--sf); border: 1.5px solid var(--s200);
  border-radius: var(--rs); font-family: inherit;
  font-size: 12px; font-weight: 600; color: var(--blue-600);
  cursor: pointer; transition: all var(--tr);
}
.db-btn-sample:hover { background: var(--blue-50); border-color: var(--blue-300); }

.db-btn-ghost {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: var(--s100); border: 1.5px solid var(--s200);
  border-radius: var(--rs); font-family: inherit;
  font-size: 11.5px; font-weight: 600; color: var(--s500);
  cursor: pointer; transition: all var(--tr);
}
.db-btn-ghost:hover { background: var(--s200); }

.db-btn-insert {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 20px;
  background: var(--emerald); color: var(--white);
  border: none; border-radius: var(--rs);
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer; transition: background var(--tr);
}
.db-btn-insert:hover:not(:disabled) { background: #047857; }
.db-btn-insert:disabled { opacity: .5; cursor: not-allowed; }

/* ── DROP ZONE ───────────────────────────────────────────────── */
.db-drop-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  border: 2px dashed var(--s300);
  border-radius: var(--rs);
  padding: 28px 20px;
  cursor: pointer;
  transition: all var(--tr);
  text-align: center;
}
.db-drop-zone:hover, .db-drop-zone.drag-over {
  border-color: var(--blue-400);
  background: var(--blue-50);
}
#dbDropLabel {
  font-size: 13px; font-weight: 600; color: var(--s600);
}

/* ── PREVIEW ─────────────────────────────────────────────────── */
.db-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
#dbPreviewInfo {
  font-size: 12.5px; color: var(--s500);
}
#dbPreviewInfo strong {
  color: var(--blue-900);
}

/* ── VALIDATION ERRORS ───────────────────────────────────────── */
.db-error-box {
  background: #fff5f5;
  border: 1.5px solid #fecaca;
  border-radius: var(--rs);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.db-error-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: #991b1b;
  margin-bottom: 8px;
}
.db-error-box ul {
  padding-left: 18px;
  display: flex; flex-direction: column; gap: 3px;
}
.db-error-box li {
  font-size: 11.5px; color: #b91c1c; line-height: 1.4;
}

/* ── PROGRESS BAR ────────────────────────────────────────────── */
.db-progress-wrap {
  padding: 16px 22px;
  border-top: 1px solid var(--s100);
  background: var(--sf);
}
.db-progress-label {
  font-size: 12px; font-weight: 600; color: var(--s600);
  margin-bottom: 8px;
}
.db-progress-bar {
  height: 6px; background: var(--s200); border-radius: 3px; overflow: hidden;
}
.db-progress-fill {
  height: 100%; background: var(--emerald);
  border-radius: 3px;
  transition: width .3s ease;
  width: 0%;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .db-gate-card { padding: 28px 20px; }
  .db-table-cards { grid-template-columns: 1fr; }
  .db-ws-header { padding: 12px 14px; }
  .db-action-card { padding: 16px 14px; }
  .db-tc-count { display: none; }
}

/* ================================================================
   DB MANAGER v2 ADDITIONS
   ================================================================ */

/* ── IN-APP CONFIRM MODAL ────────────────────────────────────── */
.db-confirm-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(6,14,31,.65);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.db-confirm-overlay.open { display: flex; animation: modalIn .2s ease both; }

.db-confirm-card {
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  padding: 32px 28px 24px;
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 12px;
}
.db-confirm-icon {
  width: 52px; height: 52px;
  background: #fef3c7; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #d97706; margin-bottom: 4px;
}
.db-confirm-title {
  font-size: 17px; font-weight: 800;
  color: var(--blue-900); letter-spacing: -.3px;
}
.db-confirm-msg {
  font-size: 13px; color: var(--s500);
  line-height: 1.55; max-width: 340px;
}
.db-confirm-actions {
  display: flex; gap: 10px; margin-top: 6px; width: 100%;
}
.db-confirm-cancel {
  flex: 1; padding: 10px;
  background: var(--s100); border: 1.5px solid var(--s200);
  border-radius: var(--rs); font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--s600);
  cursor: pointer; transition: all var(--tr);
}
.db-confirm-cancel:hover { background: var(--s200); }
.db-confirm-ok {
  flex: 1; padding: 10px;
  background: var(--rose); border: none;
  border-radius: var(--rs); font-family: inherit;
  font-size: 13px; font-weight: 700; color: var(--white);
  cursor: pointer; transition: background var(--tr);
}
.db-confirm-ok:hover { background: #b91c1c; }

/* ── DANGER NOTICE ───────────────────────────────────────────── */
.db-danger-notice {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: #fff1f1; border: 1px solid #fecaca;
  border-radius: var(--rs);
  font-size: 11.5px; font-weight: 600; color: #991b1b;
}

/* ── FILE FORMAT BADGES ──────────────────────────────────────── */
.db-drop-formats {
  display: flex; gap: 6px; margin-top: 2px;
}
.db-fmt-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  padding: 2px 8px; border-radius: 4px;
  text-transform: uppercase;
}
.db-fmt-badge.csv  { background: #d1fae5; color: #065f46; }
.db-fmt-badge.xlsx { background: #dbeafe; color: #1e40af; }
.db-fmt-badge.xls  { background: #ede9fe; color: #5b21b6; }

/* ── PREVIEW INFO ────────────────────────────────────────────── */
.db-preview-info {
  font-size: 12.5px; color: var(--s500);
}
.db-preview-info strong { color: var(--blue-900); font-weight: 700; }

/* ── PREVIEW TABLE WRAP — fixes broken layout ────────────────── */
.db-preview-table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 220px;
  border: 1px solid var(--s200);
  border-radius: var(--rs);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--s300) transparent;
}
.db-preview-table-wrap::-webkit-scrollbar { height: 4px; width: 4px; }
.db-preview-table-wrap::-webkit-scrollbar-thumb { background: var(--s300); border-radius: 2px; }

/* Make sure table inside preview renders correctly */
.db-preview-table-wrap table {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.db-preview-table-wrap thead th {
  padding: 7px 12px;
  background: var(--blue-900);
  color: rgba(255,255,255,.85);
  font-size: 11px; font-weight: 700;
  white-space: nowrap;
  text-align: left;
  position: sticky; top: 0; z-index: 1;
}
.db-preview-table-wrap tbody tr { border-bottom: 1px solid var(--s100); }
.db-preview-table-wrap tbody tr:last-child { border-bottom: none; }
.db-preview-table-wrap tbody td {
  padding: 7px 12px;
  color: var(--s700);
  white-space: nowrap;
  font-size: 12px;
  vertical-align: middle;
}
.db-preview-table-wrap tbody tr:hover { background: var(--blue-50); }

/* ================================================================
   DB MANAGER v3 ADDITIONS
   ================================================================ */

/* ── REQUIRED BAR ────────────────────────────────────────────── */
.db-required-bar {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 20px;
  background: var(--blue-50);
  border-bottom: 1px solid var(--blue-100);
  flex-wrap: wrap;
}
.db-req-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  color: var(--blue-600); white-space: nowrap;
  text-transform: uppercase; letter-spacing: .4px;
  flex-shrink: 0; padding-top: 2px;
}
.db-req-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.db-req-tag {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 4px;
  background: var(--white);
  border: 1px solid var(--blue-200);
  color: var(--blue-700);
}

/* ── TABLE HEADER STATES ─────────────────────────────────────── */
.db-preview-table-wrap thead th.th-required {
  background: #1e3a6e;
}
.db-preview-table-wrap thead th.th-unknown {
  background: #7c3aed;
}
.th-req-dot {
  color: #f87171; margin-left: 2px; font-size: 13px; line-height: 1;
}
.th-unk-badge {
  display: inline-block; background: rgba(255,255,255,.25);
  border-radius: 3px; font-size: 9px; font-weight: 700;
  padding: 0 4px; margin-left: 4px; vertical-align: middle;
}

/* ── EMPTY REQUIRED CELL ─────────────────────────────────────── */
.db-preview-table-wrap tbody td.td-empty-req {
  background: #fff5f5;
  color: var(--rose);
  font-weight: 600;
}

/* ── WARNING BOX ─────────────────────────────────────────────── */
.db-warning-box {
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: var(--rs);
  padding: 10px 14px;
  margin-bottom: 10px;
}
.db-warning-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: #92400e;
  margin-bottom: 6px;
}
.db-warning-box ul {
  padding-left: 18px; display: flex; flex-direction: column; gap: 3px;
}
.db-warning-box li { font-size: 11.5px; color: #b45309; line-height: 1.4; }

/* ── SUCCESS BOX ─────────────────────────────────────────────── */
.db-success-box {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin-bottom: 10px;
  background: #f0fdf4; border: 1.5px solid #bbf7d0;
  border-radius: var(--rs);
  font-size: 12.5px; font-weight: 600; color: #166534;
}

/* ── BUTTON SPINNER ──────────────────────────────────────────── */
.db-btn-spinner {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
}

/* ================================================================
   UI ENHANCEMENTS v2 — premium polish
   ================================================================ */

/* Animated gradient ring on gate icon */
.db-gate-card { position: relative; overflow: hidden; }
.db-gate-card::before {
  content: '';
  position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(37,99,235,.06) 0%, transparent 60%);
  animation: dbGlow 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes dbGlow { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.2);opacity:1} }
.db-gate-icon {
  position: relative; z-index: 1;
  box-shadow: 0 8px 24px rgba(37,99,235,.18);
}

/* Table cards: lift + shadow on hover */
.db-table-card {
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s, border-color .18s;
}
.db-table-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(10,22,40,.12);
}

/* Count value emphasis */
.db-count-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 700; color: var(--blue-900);
  display: block; line-height: 1;
}
.db-count-lbl { font-size: 10px; color: var(--s400); text-transform: uppercase; letter-spacing: .5px; }

/* Drop zone hover/drag states */
.db-drop-zone { transition: all .18s; }
.db-drop-zone:hover { border-color: var(--blue-400); background: var(--blue-50); }
.db-drop-zone.drag-over {
  border-color: var(--blue-500); background: var(--blue-50);
  transform: scale(1.01);
}

/* Insert button gradient */
.db-btn-insert {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-600)) !important;
  transition: filter .18s, transform .1s !important;
}
.db-btn-insert:hover:not(:disabled) { filter: brightness(1.08); }
.db-btn-insert:active:not(:disabled) { transform: scale(.99); }

/* Progress fill gradient + shimmer */
.db-progress-fill {
  background: linear-gradient(90deg, var(--blue-500), var(--blue-400)) !important;
  position: relative; overflow: hidden;
}
.db-progress-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: dbShimmer 1.2s linear infinite;
}
@keyframes dbShimmer { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* Backup tip banner */
.db-backup-tip {
  display:flex; align-items:center; gap:8px;
  background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af;
  padding:10px 14px; border-radius:10px; font-size:12.5px; font-weight:500;
  margin-bottom:16px;
}