/* Treino (2.66, web/training.js): the Auto Farm pieces (fm-strip, fm-board-wrap, fm-chips, fm-actions, the window in
   steps, ba-outcome for the report) plus what only the training has: the team slots, the Laboratório and the
   choices in segments. Only the colours of docs/DESIGN.md. */
.tn-screen .fm-head{gap:6px}
.tn-admin{display:inline-flex;align-items:center;flex:0 0 auto;padding:0 5px;font-size:10px;line-height:16px;color:#7cf08a;background:#262626;border:1px solid #111;box-shadow:1px 1px #6a6a6a;white-space:nowrap}
.tn-admin-row{background:#262626}
.tn-admin-row span{color:#7cf08a}
.fm-vip{vertical-align:middle;white-space:nowrap}
.fm-vip img{width:12px!important;height:12px!important;flex:0 0 auto}
.fm-mode b .fm-vip,.fm-mode b .fm-tag{margin-left:4px}
.tn-crown{width:10px;height:10px;margin-left:2px;vertical-align:-1px;image-rendering:pixelated}
.tn-tag{left:5px;top:5px;color:#fff}
.fm-filters button.active,.tn-seg button.active,.fm-mode.active,.tn-slot.active,.tn-lab-c.active,.tn-spell.active,.fm-speed button.active{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}

/* Team: five slots on item.png with the level, and the tools on the right. */
.tn-team{display:flex;align-items:center;gap:6px;padding:4px 6px;flex-wrap:wrap}
.tn-slots{display:flex;gap:3px}
.tn-slot{position:relative;display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;background:url('/assets/ui/classic/item.png') center/40px 40px;border:0;box-shadow:none}
.tn-slot.active{box-shadow:inset 0 0 0 1px #c5b47c}
.tn-slot-ic{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.tn-slot b{position:absolute;right:2px;bottom:0;font:bold 10px 'Tibia Pixel',Verdana,sans-serif;color:#fff;text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000}
.tn-slot.is-empty span{color:#a9a9a9;font-size:14px}
.tn-team-tools{display:flex;align-items:center;gap:4px;flex:1;justify-content:flex-end;min-width:0}
.tn-team-tools small{color:#a9a9a9;margin-right:auto;padding-left:2px}
.tn-team-tools button{min-height:24px;padding:0 8px;font-size:10px}

/* Laboratório */
.tn-lab{display:grid;gap:5px;padding:5px 6px}
.tn-lab-row{display:flex;gap:3px;overflow-x:auto;padding-bottom:1px}
.tn-lab-c{display:grid;justify-items:center;gap:0;min-width:62px;padding:2px 3px;font-size:9px;line-height:11px}
.tn-lab-c span{max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-lab-ic{width:36px;height:36px;object-fit:contain;image-rendering:pixelated}
.tn-plus{display:grid;place-items:center;width:36px;height:36px;color:#a9a9a9;font-size:16px}
.tn-spells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.tn-spell{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:4px;padding:3px 4px;text-align:left;font-size:10px;line-height:11px;white-space:normal}
.tn-spell span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tn-spell small{display:block;color:#a9a9a9;font-size:9px}
.tn-spell-ic{width:22px;height:22px;image-rendering:pixelated}
.tn-layouts{align-items:center}
.tn-layouts select{min-height:22px;font-size:10px;margin-left:auto;max-width:150px}
.tn-tip{display:flex;align-items:flex-start;gap:6px;padding:5px 6px;color:#c0c0c0}
.tn-tip b{color:#fff;font-weight:normal}

/* Choices in a row (dummy, difficulty, strength) */
.tn-seg{display:grid;gap:3px}
.tn-seg.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tn-seg.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tn-seg button{display:grid;justify-items:center;align-content:center;gap:1px;min-height:42px;padding:3px 2px;font-size:10px;line-height:11px;white-space:normal}
.tn-seg button small{color:#a9a9a9;font-size:9px}
.tn-seg button.active small{color:#e4ca78}
.tn-seg button img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.tn-seg button .fm-ico{width:16px;height:16px}
.tn-force{display:grid;gap:4px;padding:6px}
.tn-force input[type=range]{width:100%;accent-color:#f4d35e}
.tn-val{display:flex;justify-content:space-between;align-items:center;gap:6px;color:#a9a9a9}
.tn-val b{color:#f4d35e;font-weight:normal;font-size:13px}
.fm-pick.is-locked{color:#a9a9a9}
.tn-unseen{filter:brightness(0) opacity(.55)}
.tn-cat{position:absolute;left:2px;top:2px;width:12px;height:12px;image-rendering:pixelated}
.tn-mini{width:20px;height:20px;object-fit:contain;image-rendering:pixelated}
.tn-team-mini{display:flex;gap:1px;margin-top:2px}

/* Report (ba-outcome) */
.tn-outcome .ba-outcome-window{width:min(380px,100%)}
.tn-record{display:inline-flex;align-items:center;gap:4px;color:#7cf08a!important}
.tn-pad{margin-left:6px;margin-right:6px}
.tn-rows{display:grid;gap:1px;margin:0 6px}
.tn-mrow{display:grid;grid-template-columns:32px minmax(0,1fr) 58px;align-items:center;gap:6px;padding:3px 5px;background:#1c1c1c}
.tn-mrow:nth-child(even){background:#262626}
.tn-mrow>span{display:grid;gap:2px;min-width:0}
.tn-mrow b{color:#fff;font-weight:normal}
.tn-mrow small{color:#a9a9a9;font-size:10px}
.tn-m-ic{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.tn-num{text-align:right}
.tn-num b{color:#f4d35e}
.tn-num small{display:block;color:#4b98da}
.fm-bar-p.tn-heal i{background:#4b98da}
.tn-tips{display:grid;gap:4px;margin-top:6px;margin-bottom:2px}
.tn-modal{width:min(560px,96vw)}
#training-dialog-body{display:flex;flex-direction:column;gap:6px}
#training-dialog-footer{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px;padding:6px 8px;border-top:1px solid #111;box-shadow:inset 0 1px #6a6a6a}
#training-dialog-footer:empty{display:none}
#training-dialog-footer .danger{margin-right:auto}
#training-dialog-title{display:flex;align-items:center;gap:8px}
@media(max-width:520px){
 .tn-seg.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tn-slot{width:36px;height:36px;min-height:36px;background-size:36px 36px}
 .tn-slot-ic{width:30px;height:30px}
 .tn-spells{grid-template-columns:minmax(0,1fr)}
}