/* Cabinet Suite v3.4.1 */
.arbs-cabinet{--bg:#0d1420;--card:#111a29;--text:#e7ecf8;--muted:#9fb0d0;--accent:#4f52ff;--good:#15c47e;--bad:#f26d6d}
.arbs-tabs{display:flex;gap:.75rem;margin:10px 0 16px}
.arbs-tabs>button{background:var(--card);color:#fff;border:2px solid #202b40;border-radius:14px;padding:10px 18px;cursor:pointer}
.arbs-tabs>button.is-active{background:var(--accent);border-color:var(--accent)}
.arbs-panel{display:none;background:var(--card);border:1px solid #20304a;border-radius:14px;padding:16px;color:var(--text)}
.arbs-panel.is-active{display:block}
.arbs-card{background:var(--card);border:1px solid #20304a;border-radius:14px;padding:12px;margin:10px 0;color:var(--text)}
.arbs-h1{font-size:20px;margin:0 0 8px}
.arbs-row{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0}
.arbs-btn{background:var(--accent);border:none;color:#fff;border-radius:12px;padding:10px 16px;cursor:pointer}
.arbs-btn.secondary{background:#38425d}
.arbs-input{background:#0b1220;border:1px solid #2a3858;color:#e7ecf8;border-radius:10px;padding:10px 12px;width:100%;max-width:580px}
.arbs-table{width:100%;border-collapse:collapse;margin-top:8px}
.arbs-table th,.arbs-table td{border-bottom:1px solid #223352;padding:8px 6px;text-align:left}
.arbs-chip{display:inline-flex;align-items:center;background:#1b2842;color:#111; /* text will be set inline to #fff/#111 in JS if needed */ border:1px solid #2a3c66;border-radius:999px;padding:6px 10px;margin:6px 6px 0 0}
.arbs-chip .x{margin-left:8px;cursor:pointer;opacity:.8}
.arbs-field{margin:10px 0}
.arbs-muted{color:#9fb0d0}
.arbs-copy{cursor:pointer;text-decoration:underline}


/* QR image box (CSP-safe, no inline style) */
.arbs-qr{display:block;width:168px;height:168px;margin-top:8px;background:#fff;border-radius:8px}

/* === UI fixes for Matrix/Signal selects === */

/* Контрастные pills (чипсы) */
.arbs-chips,
.arbs-chip {
  font-weight: 600;
}
.arbs-chip {
  /* тёмная тема → светлый шрифт на насыщенном фоне */
  background: #4f46e5;            /* indigo-600 */
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22);
}
.arbs-chip:hover { background: #6366f1; }
.arbs-chip .arbs-chip-remove,
.arbs-chip .x { color: rgba(255,255,255,.9); }

/* Поле выбора и дропдаун */
.arbs-select { position: relative; }
.arbs-dropdown {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  margin-top: 6px;
  max-height: 320px;              /* скроллим, не вываливаемся за экран */
  overflow-y: auto;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
  border-radius: 10px;
  z-index: 9999;                  /* поверх карточки */
}
body.dark .arbs-dropdown {
  background: #0b1020;            /* если есть темная тема */
  color: #e5e7eb;
}
.arbs-option { padding: 10px 12px; cursor: pointer; }
.arbs-option:hover,
.arbs-option[aria-selected="true"] {
  background: #eef2ff;
}
body.dark .arbs-option:hover,
body.dark .arbs-option[aria-selected="true"] {
  background: rgba(99,102,241,.18);
}

/* На всякий случай — не обрезать дропдаун родителем */
.arbs-card, .arbs-panel { overflow: visible; }

/* === Dropdown hardening (scrollable & pinned under the input) === */
.arbs-select { position: relative; }

.arbs-dropdown {
  position: absolute !important;
  left: 0; right: 0;
  top: calc(100% + 6px);
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
  z-index: 10000;
}

body.dark .arbs-dropdown {
  background: #0b1020;
  color: #e5e7eb;
}

.arbs-option { padding: 10px 12px; cursor: pointer; }
.arbs-option:hover,
.arbs-option[aria-selected="true"] { background: #eef2ff; }
body.dark .arbs-option:hover,
body.dark .arbs-option[aria-selected="true"] { background: rgba(99,102,241,.18); }

/* На всякий: родителю разрешаем показывать всплывающий список */
.arbs-card, .arbs-panel, .arbs-field { overflow: visible; }

/* === Fix: make the visible dropdown (.arbs-card) a proper popover === */
.arbs-field.arbs-select{ position:relative; overflow:visible; }

/* сам выпадающий список — это .arbs-card (сосед инпута) */
.arbs-field.arbs-select > .arbs-card{
  position:absolute !important;
  left:0; right:0;
  top:calc(100% + 8px);
  z-index:10000;

  /* рулём скролл независимо от инлайн-стилей */
  max-height:360px !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;

  /* фон и визуал, чтобы не «просвечивал» */
  background:#ffffff;
  border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.24);
  margin-top:0 !important; /* перекрываем inline margin-top */
  padding:6px 0;
}

/* тёмная тема */
body.dark .arbs-field.arbs-select > .arbs-card{
  background:#0b1020;
  color:#e5e7eb;
}

/* пункты списка */
.arbs-field.arbs-select > .arbs-card > div{
  padding:10px 12px !important;
  cursor:pointer;
}
.arbs-field.arbs-select > .arbs-card > div:hover{
  background:rgba(99,102,241,.18);
}