/* rw-grid.css — overlay styles for rw-grid.js only.
   Everything else (panels/slots/grids/encbar/buttons) comes from
   assets/rw-inventory.css's .rwinv-root rules, reused as-is — see the
   comment in rw-grid.js's mount(). These two ids are the only pieces
   rw-inventory.css doesn't already cover under a name rw-grid.js uses. */
/* z-index 10000+ here (not the 9xxx the mock prototype originally used)
   deliberately matches the app's existing "modal-on-a-modal" tier (see
   #modal-compost/.bp-detail-backdrop in assets/rw-core.css) — this grid
   is mounted INSIDE #modal-inventory (z-index 9999), so any overlay it
   opens on top (tooltip, item detail, modify picker) has to clear that,
   or it renders fully hidden underneath the modal it's actually in.
   Same bug class as rw-v431's item-detail-sheet fix, just never applied
   here when the grid got mounted into the real pages. */
#rwgrid-tooltip{position:fixed;z-index:10002;background:#221c2c;border:1px solid #ffd700;border-radius:8px;padding:10px 12px;max-width:280px;pointer-events:none;display:none;box-shadow:0 4px 18px rgba(0,0,0,.6);font-family:'Public Sans','Segoe UI',system-ui,sans-serif;color:#e8e8f0}
#rwgrid-tooltip .tname{font-family:'Cinzel',serif;color:#ffd700;font-size:13px}
#rwgrid-tooltip .ttype{font-style:italic;color:#9898b0;font-size:12px;text-transform:capitalize}
#rwgrid-tooltip .tbase{font-size:11px;color:#9898b0;margin-top:1px}
#rwgrid-tooltip .tdesc{font-size:13px;margin-top:4px}
#rwgrid-tooltip .tstats{font-family:'JetBrains Mono',monospace;font-size:10px;color:#9898b0;margin-top:6px}
.rwgrid-toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:10002;display:flex;flex-direction:column;gap:6px;align-items:center}
.rwgrid-toast{background:#221c2c;border:1px solid #e05555;border-radius:8px;padding:8px 16px;font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.5);max-width:90vw;text-align:center;color:#e8e8f0;font-family:'Public Sans','Segoe UI',system-ui,sans-serif;animation:rwgrid-toastin .2s ease}
.rwgrid-toast.good{border-color:#4caf50}
@keyframes rwgrid-toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Bag-driven Pack grid: equipped-bag chips + one colored sub-grid per bag. */
.rwg-bagchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px}
.rwg-bagchip{display:flex;align-items:center;gap:6px;background:#221c2c;border:1px solid;border-radius:20px;padding:4px 6px 4px 10px;font-size:12px;color:#e8e8f0;cursor:pointer;transition:background .15s,box-shadow .15s}
.rwg-bagchip:hover{filter:brightness(1.15)}
.rwg-bagchip.active{font-weight:700}
.rwg-bagchip-swatch{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.rwg-bagchip-w{font-family:'JetBrains Mono',monospace;font-size:10px;color:#9898b0}
.rwg-bagchip-x{background:transparent;border:0;color:#9898b0;cursor:pointer;font-size:11px;padding:2px 4px;border-radius:50%;line-height:1}
.rwg-bagchip-x:hover{color:#e05555;background:rgba(224,85,85,.15)}
.rwg-bagchip-pencil{background:transparent;border:0;color:#9898b0;cursor:pointer;font-size:11px;padding:2px 4px;border-radius:50%;line-height:1}
.rwg-bagchip-pencil:hover{color:#ffd700;background:rgba(255,215,0,.15)}
.rwg-bagchip-base{font-weight:400;color:#9898b0;font-size:11px}
.rwg-bagadd-select{background:#1a1322;border:1px solid #2b2434;color:#e8e8f0;border-radius:20px;padding:5px 10px;font-size:12px;font-family:inherit;cursor:pointer}
.rwg-bagsegment{border:1px solid;border-radius:10px;padding:10px;margin-bottom:12px;background:rgba(255,255,255,.02);transition:box-shadow .2s,background .2s}
.rwg-bagsegment.active{box-shadow:0 0 0 2px #ffd700,0 0 16px rgba(255,215,0,.4);background:rgba(255,255,255,.05)}
.rwg-bagsegment-label{font-family:'Cinzel',serif;font-size:12px;font-weight:700;margin-bottom:8px;letter-spacing:.02em}
.rwg-bagsegment-base{font-family:'Public Sans','Segoe UI',system-ui,sans-serif;font-weight:400;opacity:.7;font-size:11px}
.rwg-bagsegment .pack-grid{margin:0}

/* Modify-item picker — global overlay, opened via RWGrid.openModifyPicker(). */
.rwgrid-modify-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:10000;display:flex;align-items:center;justify-content:center;padding:1rem}
.rwgrid-modify-panel{background:#1a1322;border:1px solid #2b2434;border-radius:12px;max-width:640px;width:100%;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.rwgrid-modify-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #2b2434;flex-shrink:0}
.rwgrid-modify-title{font-family:'Cinzel',serif;color:#ffd700;font-size:15px;font-weight:700}
.rwgrid-modify-desc{font-size:12px;color:#9898b0;margin-top:3px}
.rwgrid-modify-close{background:transparent;border:1px solid #2b2434;color:#9898b0;border-radius:6px;width:28px;height:28px;cursor:pointer;flex-shrink:0}
.rwgrid-modify-close:hover{color:#e8e8f0;border-color:#9898b0}
.rwgrid-modify-body{padding:14px 16px;overflow-y:auto}
/* Ineligible slots in the picker: dimmed, not the normal .slot:hover gold
   border — the visual language for "you can look but this isn't valid,"
   distinct from a merely-empty slot. */
.rwgrid-modify-body .slot.ineligible{opacity:.35;cursor:not-allowed}
.rwgrid-modify-body .slot.ineligible:hover{border-color:#e05555}
.rwgrid-modify-body .slot.legal-target{cursor:pointer}

/* Item detail panel — reuses .rwgrid-modify-* backdrop/panel/head/close,
   these are just the body-content pieces specific to it. */
.rwgrid-detail-base{font-size:12px;color:#9898b0;margin-top:2px;font-weight:400}
.rwgrid-detail-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px dashed #2b2434;font-size:13px;color:#e8e8f0}
.rwgrid-detail-row span:first-child{color:#9898b0}
.rwgrid-detail-desc{font-size:13px;color:#e8e8f0;line-height:1.5;margin:10px 0}
.rwgrid-detail-fp{color:#ffd700;font-family:'JetBrains Mono',monospace}
.rwgrid-detail-ok{color:#4caf50}
.rwgrid-detail-bad{color:#e05555}
.rwgrid-detail-ench-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#9b59b6;margin:14px 0 6px}
.rwgrid-detail-ench{border:1px solid #2b2434;border-left:3px solid #9b59b6;border-radius:6px;padding:8px 10px;margin-bottom:6px;background:rgba(155,89,182,.06)}
.rwgrid-detail-ench b{color:#9b59b6;font-family:'Cinzel',serif;font-size:12px}
.rwgrid-detail-ench div{font-size:12px;color:#9898b0;margin-top:2px}
.rwgrid-detail-actions{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px;border-top:1px solid #2b2434}
.rwgrid-detail-consume{border-color:#4caf50!important;color:#4caf50!important}
.rwgrid-detail-consume:hover{background:rgba(76,175,80,.1)}