/*
 * axel_acc_switcher — modal styles
 * Matches elastic-dark skin design language
 */

/* ── CSS variables (mirrors elastic-dark palette) ─────────────────────────── */
:root {
  --as-purple-1:    #9900ff;
  --as-purple-2:    #9229a4;
  --as-purple-glow: rgba(142, 5, 154, 0.25);
  --as-white-1:     #e9e9e9;
  --as-white-2:     #9e9e9e;
  --as-black-2:     #191919;
  --as-black-3:     #1f1f1f;
  --as-black-4:     #303030;
  --as-black-5:     #262626;
  --as-red-1:       #d92027;
}

/* ── Modal shell ───────────────────────────────────────────────────────────── */
#manageAccountsModal .modal-content,
#addAccountModal    .modal-content {
  background-color: var(--as-black-3);
  color:            var(--as-white-1);
  border:           1px solid var(--as-black-4);
  border-radius:    6px;
}

/* ── Modal header ──────────────────────────────────────────────────────────── */
#manageAccountsModal .modal-header,
#addAccountModal    .modal-header {
  background-color: var(--as-black-2);
  border-bottom:    1px solid var(--as-black-4);
  color:            var(--as-white-1);
}

#manageAccountsModal .modal-title,
#addAccountModal    .modal-title {
  color:       var(--as-white-1);
  font-weight: 600;
}

#manageAccountsModal .modal-header .fas,
#addAccountModal    .modal-header .fas {
  color:        var(--as-purple-1);
  margin-right: 6px;
}

/* Close (×) button */
#manageAccountsModal .modal-header .close,
#addAccountModal    .modal-header .close {
  color:       var(--as-white-2);
  opacity:     1;
  text-shadow: none;
}
#manageAccountsModal .modal-header .close:hover,
#addAccountModal    .modal-header .close:hover {
  color: var(--as-white-1);
}

/* ── Modal body ────────────────────────────────────────────────────────────── */
#manageAccountsModal .modal-body,
#addAccountModal    .modal-body {
  background-color: var(--as-black-3);
}

/* ── Modal footer ──────────────────────────────────────────────────────────── */
#manageAccountsModal .modal-footer,
#addAccountModal    .modal-footer {
  background-color: var(--as-black-2);
  border-top:       1px solid var(--as-black-4);
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
#manageAccountsModal .btn-primary,
#addAccountModal    .btn-primary {
  background-color: var(--as-purple-1);
  border-color:     var(--as-purple-1);
  color:            var(--as-white-1);
}
#manageAccountsModal .btn-primary:hover,
#addAccountModal    .btn-primary:hover {
  background-color: var(--as-purple-2);
  border-color:     var(--as-purple-2);
  color:            var(--as-white-1);
}
#manageAccountsModal .btn-primary:focus,
#addAccountModal    .btn-primary:focus {
  box-shadow: 0 0 0 .2rem var(--as-purple-glow);
}

#manageAccountsModal .btn-secondary,
#addAccountModal    .btn-secondary {
  background-color: var(--as-black-5);
  border-color:     var(--as-black-4);
  color:            var(--as-white-1);
}
#manageAccountsModal .btn-secondary:hover,
#addAccountModal    .btn-secondary:hover {
  background-color: var(--as-black-4);
  border-color:     var(--as-black-4);
  color:            var(--as-white-1);
}

/* ── Form inputs (Add Account modal) ──────────────────────────────────────── */
#addAccountModal .form-group label {
  color:         var(--as-white-2);
  font-size:     .85rem;
  margin-bottom: 4px;
}

#addAccountModal .form-control {
  background-color: var(--as-black-5);
  border:           1px solid var(--as-black-4);
  color:            var(--as-white-1);
  border-radius:    4px;
}
#addAccountModal .form-control::placeholder {
  color: var(--as-white-2);
}
#addAccountModal .form-control:focus {
  background-color: var(--as-black-3);
  border-color:     var(--as-purple-1);
  color:            var(--as-white-1);
  box-shadow:       0 0 .2rem .1rem var(--as-purple-glow);
}

/* ── Account rows (Manage Accounts list) ──────────────────────────────────── */
.account-row {
  background-color: var(--as-black-5);
  border:           1px solid var(--as-black-4);
  border-radius:    4px;
  padding:          10px 15px;
  margin-bottom:    8px;
  display:          flex;
  align-items:      center;
  gap:              10px;
  transition:       background-color 0.2s ease, border-color 0.2s ease;
}

.account-row:hover {
  background-color: var(--as-black-4);
  border-color:     var(--as-purple-2);
}

.account-row .account-name {
  color:       var(--as-white-1);
  font-weight: 500;
  flex:        1;
}

/* Delete / action icons inside a row */
.account-row .btn-danger,
.account-row [class*="delete"],
.account-row [class*="remove"] {
  background-color: transparent;
  border-color:     transparent;
  color:            var(--as-white-2);
  padding:          2px 6px;
}
.account-row .btn-danger:hover,
.account-row [class*="delete"]:hover,
.account-row [class*="remove"]:hover {
  color:            var(--as-red-1);
  background-color: transparent;
}