/* ==========================================================================
   Modal / pop-up oynalar — umumiy dizayn (deploy paneli uslubida).
   Faqat umumiy chrome + standart input/tugmalar qayta bo'yaladi; maxsus
   vidjetlar (seed grid, OTP, to'lov switch, wallet kartalari) tegilmaydi.
   base.html da global ulanadi, fragment-theme.css dan keyin.
   ========================================================================== */

body.dev-console {
  /* b.pixy palitra */
  --m-bg: #111111;
  --m-bg-2: #171717;
  --m-border: #222222;
  --m-border-soft: #2a2a2a;
  --m-text: #e2e2e2;
  --m-soft: #c8c8c8;
  --m-muted: #999999;
  --m-faint: #777777;
  --m-ton: #2563eb;
  --m-ton-2: #2563eb;
  --m-line: #222222;
}

/* ---- Backdrop ---- */
body.dev-console .modal-backdrop {
  background: rgba(6, 10, 16, 0.72) !important;
  backdrop-filter: blur(10px) !important;
}

/* ---- Dialog ---- */
body.dev-console .modal-dialog {
  background: var(--m-bg) !important;
  border: 1px solid var(--m-border-soft) !important;
  border-radius: 10px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important;
}
/* b.pixy uslubida tepa accent chizig'i yo'q. */
body.dev-console .modal-dialog::before { display: none; }

/* ---- Sarlavha / kicker / matn ---- */
body.dev-console .modal-dialog h2 {
  color: var(--m-text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
body.dev-console .modal-dialog > .card-label,
body.dev-console .modal-shell:is([data-modal="project-create"], [data-modal="project-rename"]) .card-label {
  display: inline-block;
  margin-bottom: 10px !important;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: #8fc6ff !important;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.28);
}
body.dev-console .modal-dialog .modal-copy,
body.dev-console .modal-dialog .wallet-modal-lead,
body.dev-console .modal-dialog .recovery-modal-copy p {
  color: var(--m-muted) !important;
}
body.dev-console .modal-dialog .wallet-modal-step,
body.dev-console .modal-dialog .wallet-modal-kicker .wallet-modal-step {
  color: #8fc6ff !important;
  background: rgba(37, 99, 235, 0.12) !important;
  border: 1px solid rgba(37, 99, 235, 0.28) !important;
}

/* ---- Yopish tugmasi ---- */
body.dev-console .modal-close,
body.dev-console .modal-back {
  border: 1px solid var(--m-border) !important;
  border-radius: 8px !important;
  background: var(--m-bg-2) !important;
  color: var(--m-soft) !important;
}
body.dev-console .modal-close:hover,
body.dev-console .modal-back:hover {
  border-color: var(--m-ton) !important;
  background: rgba(37, 99, 235, 0.12) !important;
  color: #fff !important;
}

/* ---- Yorliqlar (label sarlavhalari) ---- */
body.dev-console .modal-dialog .account-form > label > span,
body.dev-console .modal-dialog .project-name-field > span,
body.dev-console .modal-dialog .project-payment-label {
  color: var(--m-soft) !important;
  font-weight: 600 !important;
}

/* ---- Standart matn inputlari (maxsus inputlar bundan mustasno) ---- */
body.dev-console .modal-dialog input[type="text"]:not(.wallet-create-otp-slot):not([data-wallet-seed-word]) {
  min-height: 48px !important;
  border-radius: 8px !important;
  background: var(--m-bg-2) !important;
  border: 1px solid var(--m-border) !important;
  color: var(--m-text) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
body.dev-console .modal-dialog input[type="text"]:not(.wallet-create-otp-slot):not([data-wallet-seed-word]):focus {
  outline: none !important;
  border-color: var(--m-ton) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

/* ---- Asosiy tugma (gradient) ---- */
body.dev-console .modal-dialog .submit-button {
  background: var(--m-ton) !important;
  color: #ffffff !important;
  border: 1px solid var(--m-ton) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background 0.15s ease, transform 0.12s ease !important;
}
body.dev-console .modal-dialog .submit-button:hover {
  background: var(--m-ton-dim, #1d4ed8) !important;
  filter: none !important;
  box-shadow: none !important;
}
body.dev-console .modal-dialog .submit-button:active { transform: translateY(1px) !important; }
body.dev-console .modal-dialog .submit-button:disabled {
  filter: grayscale(0.4) brightness(0.8) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* ---- Ikkilamchi tugma (ghost) ---- */
body.dev-console .modal-dialog .secondary-action,
body.dev-console .modal-dialog .wallet-create-link,
body.dev-console .modal-dialog .recovery-paste-button {
  background: var(--m-bg-2) !important;
  border: 1px solid var(--m-border) !important;
  color: var(--m-soft) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}
body.dev-console .modal-dialog .secondary-action:hover,
body.dev-console .modal-dialog .wallet-create-link:hover,
body.dev-console .modal-dialog .recovery-paste-button:hover {
  border-color: var(--m-ton) !important;
  color: #fff !important;
  background: rgba(37, 99, 235, 0.1) !important;
}

/* ---- Tasdiqlash modali (api-key-rotate va h.k.) ---- */
body.dev-console .modal-confirm-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 4px !important;
}
body.dev-console .modal-confirm-actions .secondary-action,
body.dev-console .modal-confirm-actions .submit-button {
  flex: 1 !important;
  min-height: 46px !important;
}

/* ---- O'chirish havolasi (danger) ---- */
body.dev-console .modal-delete-link {
  color: #f87171 !important;
  border-radius: 10px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
body.dev-console .modal-delete-link:hover {
  color: #ff7b78 !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

/* ---- Wallet modal accent chizig'ini bizning gradient bilan moslash ---- */
body.dev-console .modal-dialog .wallet-modal-accent {
  background: var(--m-ton) !important;
}

/* ==========================================================================
   LOYIHA MODALLARI — noldan qurilgan dizayn (`pm-` namespace).
   JS hook'lar saqlangan: .modal-shell, .modal-dialog, data-modal-close,
   data-payment-switch, .project-payment-choice + input[name=payment_asset].
   ========================================================================== */
body.dev-console .modal-dialog.pm-dialog {
  width: min(470px, calc(100vw - 32px)) !important;
  padding: 0 !important;
  max-height: calc(100dvh - 32px) !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden !important;
}
/* Baland modal (wallet paneli ochilganda): sarlavha tepada, forma ichida
   scroll, danger zona pastda mahkam — quti tashqarisiga oshib ketmaydi. */
body.dev-console .pm-header { flex: 0 0 auto; }
body.dev-console .pm-form { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
body.dev-console .pm-danger { flex: 0 0 auto; }
body.dev-console .pm-confirm-body,
body.dev-console .pm-confirm-actions { flex: 0 0 auto; }

/* Yopish */
body.dev-console .pm-close {
  position: absolute; top: 15px; right: 15px; z-index: 3;
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--m-border); background: rgba(25, 27, 30, 0.55); color: var(--m-muted);
  cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
body.dev-console .pm-close:hover { color: #fff; border-color: var(--m-border-soft); background: var(--m-bg-2); }

/* Sarlavha (ikonka yetakchi) */
body.dev-console .pm-header {
  display: flex; align-items: center; gap: 13px;
  padding: 22px 22px 16px; padding-right: 58px;
}
body.dev-console .pm-icon {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #2563eb;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.25);
}
body.dev-console .pm-icon--warn {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.25);
}
body.dev-console .pm-icon--danger {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
}
body.dev-console .pm-head-text { display: grid; gap: 3px; min-width: 0; }
body.dev-console .pm-head-text h2 { margin: 0 !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--m-text) !important; }
body.dev-console .pm-head-text p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--m-muted); }

/* Forma */
body.dev-console .pm-form { display: flex; flex-direction: column; gap: 16px; padding: 6px 22px 22px; }
body.dev-console .pm-field { display: grid; gap: 8px; }
body.dev-console .pm-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--m-faint); }
body.dev-console .pm-input {
  width: 100%; min-height: 48px; padding: 0 15px; border-radius: 8px;
  background: var(--m-bg-2) !important; border: 1px solid var(--m-border) !important; color: var(--m-text) !important;
  font-size: 14px; font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.dev-console .pm-input::placeholder { color: #6a7482; }
body.dev-console .pm-input:focus { outline: none; border-color: var(--m-ton) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important; }

/* Segment (to'lov usuli) — iOS uslubidagi toza switch */
body.dev-console .pm-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  padding: 4px; border-radius: 8px; background: var(--m-bg-2); border: 1px solid var(--m-border);
}
body.dev-console .pm-seg .project-payment-choice {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--m-muted); letter-spacing: 0.02em;
  transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
body.dev-console .pm-seg .project-payment-choice input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
body.dev-console .pm-seg .project-payment-choice:hover { color: var(--m-soft); }
body.dev-console .pm-seg .project-payment-choice.active {
  color: #fff;
  background: var(--m-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(37, 99, 235, 0.5);
}

/* Asosiy tugma */
body.dev-console .pm-submit {
  width: 100%; min-height: 46px; border: 1px solid var(--m-ton); border-radius: 6px; cursor: pointer;
  font-size: 14px; font-weight: 600; font-family: inherit; color: #ffffff;
  background: var(--m-ton);
  box-shadow: none;
  transition: background 0.15s ease, transform 0.12s ease;
}
body.dev-console .pm-submit:hover { background: #1d4ed8; filter: none; box-shadow: none; }
body.dev-console .pm-submit:active { transform: translateY(1px); }

/* Ikkilamchi (ghost) tugma */
body.dev-console .pm-btn-ghost {
  min-height: 46px; padding: 0 18px; border-radius: 6px; cursor: pointer;
  font-size: 14px; font-weight: 600; font-family: inherit;
  color: var(--m-soft); background: var(--m-bg-2); border: 1px solid var(--m-border);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
body.dev-console .pm-btn-ghost:hover { color: #fff; border-color: var(--m-border-soft); background: #1e1e1e; }

/* Tasdiqlash modali */
body.dev-console .pm-confirm-body { padding: 0 22px; }
body.dev-console .pm-confirm-body p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--m-soft); }
body.dev-console .pm-confirm-actions { display: flex; gap: 10px; padding: 18px 22px 22px; }
body.dev-console .pm-confirm-actions > * { flex: 1; }

/* Xavfli zona (loyihani o'chirish) */
body.dev-console .pm-danger {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 22px 20px; border-top: 1px solid var(--m-line, #2e3137);
}
body.dev-console .pm-danger-text { display: grid; gap: 2px; min-width: 0; }
body.dev-console .pm-danger-text strong { font-size: 13px; font-weight: 600; color: var(--m-soft); }
body.dev-console .pm-danger-text span { font-size: 12px; color: var(--m-faint); }
body.dev-console .pm-danger form { margin: 0; }
body.dev-console .pm-danger-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 10px; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
  color: #f87171; background: transparent; border: 1px solid rgba(239, 68, 68, 0.35);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
body.dev-console .pm-danger-btn:hover { color: #ff7b78; background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.6); }

/* Wallet versiya paneli forma ichida — ozgina moslash */
body.dev-console .pm-form .project-wallet-version-panel { margin: 0 !important; }