/* autosortv4.css - extends existing style.css while keeping the existing page style */
.autosort-controls { gap: 8px; align-items: center; }
.autosort-controls label { display: inline-flex; align-items: center; gap: 5px; }
.autosort-linebreak { flex-basis: 100%; height: 0; }
.setup-label { color: #fff; margin-left: 10px; }
.wide-input { width: 360px; max-width: 45vw; }
.gid-input { width: 120px; }
.count-input { width: 60px; }
.autosort-legend { margin: 8px 0 10px 0; color: #fff; }
.legend-chip { display: inline-block; padding: 2px 7px; margin: 0 4px 0 10px; border-radius: 5px; border: 1px solid #333; color: #000; }
.selected-chip { background: #cce5ff; }
.best-chip { background: #7cff7c; }
.warn-chip { background: #ffd47c; }
.bad-chip { background: #ff8b8b; }
.autosort-table-wrap { overflow-x: visible; }
.autosort-summary-table { width: 100%; min-width: 0; table-layout: auto; }
.autosort-summary-table th, .autosort-summary-table td { width: auto; }
.autosort-summary-table th:nth-child(1), .autosort-summary-table td:nth-child(1),
.autosort-summary-table th:nth-child(2), .autosort-summary-table td:nth-child(2),
.autosort-summary-table th:nth-child(3), .autosort-summary-table td:nth-child(3) { white-space: nowrap; }
.autosort-summary-table th:nth-child(4), .autosort-summary-table td:nth-child(4) { width: 100%; }
.summary-table td { background: #000; color: #fff; white-space: normal; }
.summary-table tr.selected > td { background: #cce5ff; color: #000; }
.summary-table tr.hidden-row { display: none; }
.clean-class { display: block; color: #fff; margin-bottom: 4px; font-weight: 700; }
.role-pill { display: inline-block; padding: 4px 9px; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.role-tank { background: #419ae8; }
.role-healer { background: #197516; }
.role-dps { background: #e84165; }
.assignment-table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: auto; font-size: 12px; }
.assignment-table th { width: 58px; text-align: left; color: #e0a325; background: linear-gradient(#0a0a0a, #1c1c1c); padding: 4px 6px; position: static; z-index: auto; white-space: nowrap; }
.assignment-table td { text-align: left; padding: 3px 5px; background: #050505; white-space: normal; }
.assignment-table tr { border-bottom: 1px solid #222; }
.item-slot { display: inline-block; position: relative; margin: 2px; padding: 1px; border-radius: 6px; border: 2px solid transparent; vertical-align: middle; cursor: pointer; line-height: 0; }
.item-slot img { width: 40px; height: auto; object-fit: contain; display: block; }
.item-slot.manual-selected { border-color: #2dd4bf; box-shadow: 0 0 8px #2dd4bf; }
.item-slot.autosort-best { border-color: #00ff00; box-shadow: 0 0 10px #00ff00; }
.item-slot.autosort-warn { border-color: #ffa500; box-shadow: 0 0 10px #ffa500; }
.item-slot.autosort-bad { border-color: #ff3333; box-shadow: 0 0 10px #ff3333; }
.item-slot.autosort-muted { filter: grayscale(100%); opacity: .28; }
.item-slot.ignored { opacity: .22; filter: grayscale(100%); }
.empty-slot { display: inline-block; min-width: 34px; min-height: 24px; border: 1px dashed #555; border-radius: 5px; color: #999; font-size: 10px; padding: 5px 6px; line-height: 1.2; }
.output-sheet { background: #000; color: #fff; padding: 0; }
.output-sheet table { width: 100%; border-collapse: collapse; }
.output-sheet td, .output-sheet th { border: 1px solid #222; padding: 6px 8px; vertical-align: middle; }
.output-sheet .assignment-table th { font-size: 16px; letter-spacing: 1px; }
.output-sheet .item-slot img { width: 40px; height: auto; }
@media (max-width: 900px) {
  .wide-input { width: 100%; max-width: 100%; }
  .autosort-controls label { width: 100%; }
  .autosort-controls button { margin-top: 4px; }
  .autosort-summary-table, .autosort-summary-table thead, .autosort-summary-table tbody, .autosort-summary-table th, .autosort-summary-table td, .autosort-summary-table tr { display: block; width: 100% !important; }
  .autosort-summary-table thead { display: none; }
  .autosort-summary-table tr { margin-bottom: 8px; border: 1px solid #222; }
  .autosort-summary-table td { display: block; text-align: left; }
}