/**
 * Manic Pixels Web OS — App Admin: Gerenciar Providers (mp-providers)
 * Estilos do app nativo de configuração de credenciais OAuth por provider.
 * Sprint 14 — Etapa 10
 */

/* ── Layout raiz ─────────────────────────────────────────────────────────── */

.mp-providers {
  display:        flex;
  height:         100%;
  overflow:       hidden;
  font-family:    var(--mp-font-ui, 'Segoe UI', system-ui, sans-serif);
  font-size:      var(--mp-font-size-base, 13px);
  background:     var(--mp-window-bg-solid, #14141e);
  color:          var(--mp-menu-fg, #e8e8f0);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.mp-providers-sidebar {
  width:          220px;
  min-width:      180px;
  flex-shrink:    0;
  border-right:   1px solid var(--mp-window-border, rgba(255,255,255,0.08));
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
}

.mp-providers-sidebar-title {
  font-size:      10.5px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          rgba(255,255,255,0.35);
  padding:        16px 14px 8px;
  flex-shrink:    0;
}

.mp-providers-sidebar-scroll {
  flex:           1;
  overflow-y:     auto;
  overflow-x:     hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
  padding:        0 6px 12px;
}

.mp-providers-sidebar-scroll::-webkit-scrollbar       { width: 4px; }
.mp-providers-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.mp-providers-sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }

/* ── Item da sidebar ─────────────────────────────────────────────────────── */

.mp-providers-item {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       8px 10px;
  border-radius: var(--mp-menu-radius, 8px);
  cursor:        pointer;
  transition:    background 0.1s;
  user-select:   none;
  border:        none;
  background:    none;
  width:         100%;
  text-align:    left;
  color:         inherit;
  font-family:   inherit;
  font-size:     inherit;
}

.mp-providers-item:hover {
  background: rgba(255,255,255,0.05);
}

.mp-providers-item.is-active {
  background: rgba(var(--mp-accent-rgb, 74,158,255), 0.14);
}

.mp-providers-item-icon {
  width:   28px;
  height:  28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mp-providers-item-icon svg {
  width:  20px;
  height: 20px;
}

.mp-providers-item-info {
  display:        flex;
  flex-direction: column;
  gap:            1px;
  flex:           1;
  min-width:      0;
}

.mp-providers-item-name {
  font-size:   12.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.mp-providers-item-status {
  font-size:   10.5px;
  font-weight: 500;
}

.mp-providers-item-status.is-ok {
  color: #55cc80;
}

.mp-providers-item-status.is-missing {
  color: rgba(255,255,255,0.30);
}

/* ── Painel de conteúdo ──────────────────────────────────────────────────── */

.mp-providers-content {
  flex:           1;
  overflow-y:     auto;
  overflow-x:     hidden;
  padding:        24px 24px 32px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}

.mp-providers-content::-webkit-scrollbar       { width: 4px; }
.mp-providers-content::-webkit-scrollbar-track { background: transparent; }
.mp-providers-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

/* ── Estado inicial (nenhum provider selecionado) ─────────────────────────── */

.mp-providers-placeholder {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  height:          100%;
  color:           rgba(255,255,255,0.25);
  font-size:       13px;
  text-align:      center;
}

.mp-providers-placeholder svg {
  opacity: 0.20;
}

/* ── Cabeçalho do painel ─────────────────────────────────────────────────── */

.mp-providers-pane-header {
  display:     flex;
  align-items: center;
  gap:         14px;
  margin-bottom: 22px;
}

.mp-providers-pane-icon {
  width:           44px;
  height:          44px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   12px;
  background:      rgba(255,255,255,0.05);
  border:          1px solid rgba(255,255,255,0.09);
  flex-shrink:     0;
}

.mp-providers-pane-icon svg { width: 26px; height: 26px; }

.mp-providers-pane-meta {}

.mp-providers-pane-title {
  font-size:   16px;
  font-weight: 600;
  margin:      0;
  line-height: 1.25;
}

.mp-providers-pane-subtitle {
  font-size:  11.5px;
  color:      rgba(255,255,255,0.38);
  margin-top: 3px;
}

/* ── Badge de status no painel ───────────────────────────────────────────── */

.mp-providers-pane-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       3px 10px;
  border-radius: 100px;
  font-size:     11px;
  font-weight:   600;
  margin-bottom: 20px;
}

.mp-providers-pane-badge.is-ok {
  background: rgba(39,174,96,0.13);
  color:      #55cc80;
  border:     1px solid rgba(39,174,96,0.22);
}

.mp-providers-pane-badge.is-missing {
  background: rgba(220,120,50,0.12);
  color:      #ffaa55;
  border:     1px solid rgba(220,120,50,0.20);
}

/* ── Blocos de instrução ─────────────────────────────────────────────────── */

.mp-providers-info-block {
  background:    rgba(255,255,255,0.03);
  border:        1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding:       14px 16px;
  margin-bottom: 22px;
  font-size:     12px;
  line-height:   1.7;
  color:         rgba(255,255,255,0.55);
}

.mp-providers-info-block a {
  color:           var(--mp-accent, #4a9eff);
  text-decoration: none;
}

.mp-providers-info-block a:hover { text-decoration: underline; }

/* ── Grupo de campos ─────────────────────────────────────────────────────── */

.mp-providers-fieldgroup {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  margin-bottom:  22px;
}

.mp-providers-field {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.mp-providers-field label {
  font-size:   11.5px;
  font-weight: 600;
  color:       rgba(255,255,255,0.60);
}

.mp-providers-field .mp-providers-hint {
  font-size:  11px;
  color:      rgba(255,255,255,0.28);
  margin-top: -2px;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */

.mp-providers-input {
  padding:       8px 11px;
  border-radius: 8px;
  border:        1px solid rgba(255,255,255,0.12);
  background:    rgba(255,255,255,0.05);
  color:         var(--mp-menu-fg, #e8e8f0);
  font-family:   inherit;
  font-size:     12.5px;
  outline:       none;
  transition:    border-color 0.12s, background 0.12s;
  width:         100%;
  box-sizing:    border-box;
}

.mp-providers-input:focus {
  border-color: var(--mp-accent, #4a9eff);
  background:   rgba(var(--mp-accent-rgb,74,158,255),0.06);
}

.mp-providers-input[readonly] {
  cursor:     default;
  opacity:    0.55;
  background: rgba(255,255,255,0.03);
}

.mp-providers-input[readonly]:focus {
  border-color: rgba(255,255,255,0.12);
  background:   rgba(255,255,255,0.03);
}

/* ── Wrapper de redirect_uri com botão de cópia ──────────────────────────── */

.mp-providers-redirect-wrap {
  display: flex;
  gap:     6px;
}

.mp-providers-redirect-wrap .mp-providers-input {
  flex: 1;
  font-size:   11.5px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  color:       rgba(255,255,255,0.50);
}

/* ── Botões ──────────────────────────────────────────────────────────────── */

.mp-providers-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       0 14px;
  height:        32px;
  border:        none;
  border-radius: var(--mp-menu-radius, 8px);
  font-family:   inherit;
  font-size:     12px;
  font-weight:   500;
  cursor:        pointer;
  transition:    background 0.12s, opacity 0.12s;
  white-space:   nowrap;
  outline:       none;
  flex-shrink:   0;
}

.mp-providers-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(var(--mp-accent-rgb,74,158,255),0.5);
}

.mp-providers-btn-primary {
  background: var(--mp-accent, #4a9eff);
  color:      #fff;
}

.mp-providers-btn-primary:hover  { filter: brightness(1.12); }
.mp-providers-btn-primary:active { opacity: 0.8; }

.mp-providers-btn-secondary {
  background: rgba(255,255,255,0.08);
  color:      rgba(255,255,255,0.75);
  border:     1px solid rgba(255,255,255,0.10);
}

.mp-providers-btn-secondary:hover  { background: rgba(255,255,255,0.13); color: #fff; }
.mp-providers-btn-secondary:active { opacity: 0.8; }

.mp-providers-btn-danger {
  background: rgba(220,50,50,0.13);
  color:      #ff7070;
  border:     1px solid rgba(220,50,50,0.22);
}

.mp-providers-btn-danger:hover  { background: rgba(220,50,50,0.22); }
.mp-providers-btn-danger:active { opacity: 0.8; }

.mp-providers-btn:disabled {
  opacity: 0.42;
  cursor:  not-allowed;
}

/* ── Linha de ações ──────────────────────────────────────────────────────── */

.mp-providers-actions {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding-top:     6px;
  border-top:      1px solid rgba(255,255,255,0.06);
  margin-top:      4px;
}

.mp-providers-actions-spacer { flex: 1; }

/* ── Mensagem de feedback ────────────────────────────────────────────────── */

.mp-providers-msg {
  font-size:     12px;
  border-radius: 7px;
  padding:       8px 12px;
  display:       none;
  margin-top:    2px;
}

.mp-providers-msg.is-ok {
  background: rgba(39,174,96,0.11);
  border:     1px solid rgba(39,174,96,0.25);
  color:      #55cc80;
}

.mp-providers-msg.is-err {
  background: rgba(220,50,50,0.10);
  border:     1px solid rgba(220,50,50,0.22);
  color:      #ff7070;
}

/* ── Loading ─────────────────────────────────────────────────────────────── */

.mp-providers-loading {
  padding:    40px;
  text-align: center;
  color:      rgba(255,255,255,0.30);
  font-size:  12.5px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Fase 3.1 — Toggle ativar/desativar na sidebar
   ══════════════════════════════════════════════════════════════════════════ */

/* Wrapper clicável separado do botão pai */
.mp-prv-toggle-wrap {
  display:         inline-flex;
  align-items:     center;
  flex-shrink:     0;
  margin-left:     auto;
  padding:         2px 0;
  cursor:          pointer;
}

/* Input real — oculto visualmente, acessível a screenreaders */
.mp-prv-toggle-input {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0,0,0,0);
  white-space: nowrap;
  border:      0;
}

/* Trilha do toggle */
.mp-prv-toggle-track {
  display:       block;
  width:         30px;
  height:        16px;
  background:    rgba(255,255,255,0.12);
  border-radius: 8px;
  position:      relative;
  transition:    background 0.18s ease;
  flex-shrink:   0;
}

.mp-prv-toggle-track::after {
  content:       '';
  position:      absolute;
  left:          2px;
  top:           2px;
  width:         12px;
  height:        12px;
  background:    rgba(255,255,255,0.55);
  border-radius: 50%;
  transition:    left 0.18s ease, background 0.18s ease;
  box-shadow:    0 1px 2px rgba(0,0,0,0.35);
}

/* Estado checado (provider ativo) */
.mp-prv-toggle-input:checked + .mp-prv-toggle-track {
  background: var(--mp-accent, #4a9eff);
}

.mp-prv-toggle-input:checked + .mp-prv-toggle-track::after {
  left:       16px;
  background: #fff;
}

/* Estado desabilitado durante requisição */
.mp-prv-toggle-input:disabled + .mp-prv-toggle-track {
  opacity: 0.45;
}

/* Foco acessível */
.mp-prv-toggle-input:focus-visible + .mp-prv-toggle-track {
  box-shadow: 0 0 0 2px rgba(var(--mp-accent-rgb, 74,158,255), 0.50);
}

/* Spinner inline para o botão de teste */
@keyframes mp-prv-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.mp-prv-spin {
  animation:     mp-prv-spin 0.8s linear infinite;
  transform-origin: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   Fase 3.1 — Linha de resultado do teste de conexão (ok / error)
   ══════════════════════════════════════════════════════════════════════════ */

.mp-prv-test-result {
  font-size:     12px;
  border-radius: 7px;
  padding:       7px 12px;
  margin-top:    0;
  margin-bottom: 2px;
  line-height:   1.45;
}

.mp-prv-test-result.is-ok {
  background: rgba(39,174,96,0.10);
  border:     1px solid rgba(39,174,96,0.22);
  color:      #55cc80;
}

.mp-prv-test-result.is-err {
  background: rgba(220,50,50,0.09);
  border:     1px solid rgba(220,50,50,0.20);
  color:      #ff7070;
}