/* Painel de automação, aberto pelo botão do menu. Segue a mesma linguagem
   visual do analisador de caçada: moldura estreita, fundo escuro e tipografia
   Georgia nos títulos. */
.auto-settings-panel {
    position: fixed;
    z-index: 90;
    width: 286px;
    padding: 0 0 10px;
    border: 1px solid #607879;
    background: linear-gradient(145deg, rgba(20, 36, 38, .97), rgba(4, 9, 10, .97));
    box-shadow: inset 0 0 22px #000, 0 10px 24px rgba(0, 0, 0, .65);
    color: #e4efed;
    font: 12px Arial, sans-serif;
}

.auto-settings-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid #395254;
    background: linear-gradient(90deg, #17282a, #0a1112);
}
.auto-settings-panel > header strong {
    color: #f0d98c;
    font: 700 12px Georgia, serif;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.auto-settings-close {
    padding: 0 4px;
    border: 0;
    background: none;
    color: #8cb4af;
    font: 700 16px/1 Arial, sans-serif;
    cursor: pointer;
}
.auto-settings-close:hover { color: #f0d98c; }

.auto-settings-group { padding: 9px 10px 4px; border-top: 1px solid #253a3b; }
.auto-settings-group > small {
    display: block;
    margin-bottom: 6px;
    color: #b3dbd5;
    font: 700 11px Arial, sans-serif;
    letter-spacing: .5px;
}
.auto-settings-group > em {
    display: block;
    margin-top: 7px;
    color: #9ab5b1;
    font: italic 11px Arial, sans-serif;
    line-height: 1.45;
}

.auto-settings-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}
.auto-settings-row > span { color: #c5d6d2; }
.auto-settings-row > b {
    color: #f0d98c;
    font: 700 11px Consolas, monospace;
    text-align: right;
}
.auto-settings-row input[type="range"] {
    width: 100%;
    height: 4px;
    margin: 0;
    border-radius: 0;
    background: #253a3b;
    accent-color: #7ce5be;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.auto-settings-row input[type="range"]::-webkit-slider-thumb {
    width: 11px;
    height: 14px;
    border: 1px solid #060909;
    background: linear-gradient(180deg, #f0d98c, #a8913f);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.auto-settings-row input[type="range"]::-moz-range-thumb {
    width: 11px;
    height: 14px;
    border: 1px solid #060909;
    border-radius: 0;
    background: linear-gradient(180deg, #f0d98c, #a8913f);
    cursor: pointer;
}

.auto-settings-check {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 0;
    color: #d6e6e2;
    cursor: pointer;
}
.auto-settings-check input { accent-color: #7ce5be; cursor: pointer; }
.auto-settings-check:hover { color: #eef6f4; }
.auto-settings-master {
    padding: 8px 10px;
    border-bottom: 1px solid #253a3b;
    color: #e8ddad;
    font-weight: 700;
}

/* Com o auto-potion desligado os limiares continuam visíveis, mas apagados:
   o jogador vê o que está configurado sem achar que perdeu o ajuste. */
.auto-settings-panel.is-disabled .auto-settings-group:first-of-type { opacity: .45; }

/* Marca no botão do menu quando há algum filtro de coleta ativo. */
#mu-auto-farm-button.has-filter::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border: 1px solid #060909;
    background: #7ce5be;
}

@media (max-width: 600px) {
    .auto-settings-panel { width: min(286px, calc(100vw - 16px)); }
}


/* ---- Barra de raridade da coleta ---- */
/* Os pips repetem a régua da barra: acesos são as raridades que o herói ainda
   recolhe, apagados são as que ficam no chão. */
.auto-rarity-ladder { display:flex; gap:3px; margin:3px 0 2px; padding:0 2px; }
.auto-rarity-ladder i { flex:1 1 0; height:5px; border:1px solid #2f3f40; border-radius:1px; background:#0d1414; }
.auto-rarity-ladder i.is-on { border-color:var(--rarity); background:var(--rarity); box-shadow:0 0 5px color-mix(in srgb,var(--rarity),transparent 45%); }
.auto-rarity-summary { display:block; margin:3px 0 0; color:#a7bfbb; font:italic 11px/1.4 Arial,sans-serif; }
/* A coluna do rotulo cresce junto: um min-width maior que a coluna do grid
   empurrava "Excelente" para fora da borda direita do painel. */
.auto-rarity-row { grid-template-columns: 44px minmax(0,1fr) 60px; }
.auto-rarity-row > b { font:700 11px 'Segoe UI',sans-serif; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Grade classe x tipo da coleta ---- */
/* Sete colunas: o rotulo da classe e os seis tipos. Celula acesa recolhe,
   apagada deixa no chao. Clicar no cabecalho vira a linha ou a coluna. */
.pickup-matrix-head { display:flex; align-items:center; gap:5px; margin:8px 0 4px; }
.pickup-matrix-head small { flex:1 1 auto; color:#b3dbd5; font:700 11px Arial,sans-serif; letter-spacing:.5px; }
/* Separa as caixas soltas da grade acima: sem o título elas pareciam parte da
   matriz classe × tipo e o sentido do "marcado" ficava ainda mais ambíguo. */
.pickup-extra-head { margin:9px 0 3px; padding-top:7px; border-top:1px solid #2c3a38; }
.pickup-extra-head small { color:#b3dbd5; font:700 11px Arial,sans-serif; letter-spacing:.5px; }
.pickup-shortcut { padding:2px 8px; border:1px solid #3c5457; border-radius:8px; background:rgba(12,20,21,.8); color:#c2d6d7; font:700 10px Georgia,serif; cursor:pointer; }
.pickup-shortcut:hover { border-color:#79b7c2; color:#eafcff; }
/* Uma coluna larga para o nome da peca e uma por classe. */
.pickup-matrix { display:grid; grid-template-columns:70px repeat(3,minmax(0,1fr)); gap:3px; align-items:center; }
/* Combinacao que nao existe (escudo de Elfa, por exemplo) fica so como um
   traco: some do caminho sem abrir buraco na grade. */
.pickup-cell.is-void { border-color:transparent; background:transparent; color:#4a5658; cursor:default; }
.pickup-head { padding:2px 0; border:0; background:transparent; color:#bcd2d3; font:700 10px Georgia,serif; text-align:center; cursor:pointer; }
.pickup-head:hover { color:#eafcff; }
/* Vem DEPOIS de .pickup-head de proposito: o rotulo da linha carrega as duas
   classes, e com a mesma especificidade quem vence e a ultima do arquivo. */
.pickup-head-row { text-align:left; padding-left:2px; color:#cfe0dd; font:700 11px 'Segoe UI',sans-serif; letter-spacing:.2px; }
.pickup-cell { display:grid; place-items:center; height:20px; padding:0; border:1px solid #33474a; border-radius:2px; background:rgba(9,15,16,.85); color:transparent; font:700 10px Arial,sans-serif; cursor:pointer; }
.pickup-cell:hover { border-color:#79b7c2; }
.pickup-cell.is-on { border-color:#4f9c7a; background:linear-gradient(#1b3b2c,#0c1d16); color:#8fe6b4; }