/* Novicia Online - bag without the inside detail panel + #bag-item-detail window (js/ui-windows.js, 2026-09-29)
   Loaded after inventory-sky.css / ui-fit.css. */

/* ---- bag: the grid takes the whole width, the search box sits on top of it */
html body #hud section#inventory-window.nv-detail-out .bag-main {
  grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "side" "layout" !important;
}
html body #hud section#inventory-window.nv-detail-out .bag-detail { display: none !important; }
html body #hud section#inventory-window.nv-detail-out .bag-layout > .bag-search {
  flex: none; margin: calc(var(--u) * 10) calc(var(--u) * 10) 0 !important;
}


/* ---- item detail window: same look as the equipment item detail (#gear-item-detail) */
#hud #bag-item-detail {
  position: absolute; display: block; width: 310px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 32px);
  padding: 0; background: #fff; border: 1px solid #9caaa9; overflow: auto; overscroll-behavior: contain; touch-action: pan-y;
  box-shadow: 0 8px 24px rgba(10, 30, 60, .35); color: #222;
}
#hud #bag-item-detail[hidden] { display: none; }
#hud #bag-item-detail > .titlebar {
  height: 21px; font-size: 10px; background: repeating-linear-gradient(#fff, #fff 1px, #eef0f0 2px); border-bottom: 1px solid #c0c5c5;
  display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 8px; cursor: grab; position: sticky; top: 0; z-index: 1;
}
#hud #bag-item-detail .item-detail-close {
  width: 17px; height: 17px; padding: 0; border: 1px solid #aeb4b2; border-radius: 50%; background: #fff; color: #5b6360; font-size: 12px; line-height: 1; cursor: pointer;
}
#hud #bag-item-detail .item-detail-body { min-height: 0; padding-bottom: 8px; }
#hud #bag-item-detail .item-portrait img { image-rendering: pixelated; }
#hud #bag-item-detail .bid-type { margin: 4px 0 0; color: #7a7e7d; font-size: 11px; }
#hud #bag-item-detail .item-bonuses:empty, #hud #bag-item-detail [hidden] { display: none !important; }
#hud #bag-item-detail #bag-detail-extra:empty { display: none; }
#hud #bag-item-detail .gear-tip-compare { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 6px 0; font-size: 11px; color: #5b6360; }
#hud #bag-item-detail .gear-tip-compare small { flex-basis: 100%; }
#hud #bag-item-detail .compare-gain { color: #1f8a4c; }
#hud #bag-item-detail .compare-loss { color: #c0392b; }
/* the rows of the bag card (จำนวนที่มี / ราคาขาย / ใช้ได้โดย) as item properties */
#hud #bag-item-detail #bag-detail-rows { display: grid; grid-template-columns: auto 1fr; gap: 1px 6px; margin: 6px 0; font-size: 12px; }
#hud #bag-item-detail #bag-detail-rows dt { color: #303333; }
#hud #bag-item-detail #bag-detail-rows dt::after { content: ":"; }
#hud #bag-item-detail #bag-detail-rows dd { margin: 0; color: #7a7e7d; }
/* secondary actions under the text, main action in the footer */
#hud #bag-item-detail .bid-tools .bag-actions { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 2px; }
#hud #bag-item-detail .bid-tools button {
  display: inline-flex; align-items: center; gap: 3px; min-height: 24px; padding: 2px 8px; border: 1px solid #aeb4b2; border-radius: 4px;
  background: linear-gradient(#fff, #eef0f0); color: #303333; font-size: 11px; cursor: pointer;
}
#hud #bag-item-detail .bid-tools button svg { width: 12px; height: 12px; }
#hud #bag-item-detail .bid-tools button[aria-pressed="true"] { background: #fff3cc; border-color: #d5a72c; }
#hud #bag-item-detail .bid-tools button:disabled { opacity: .5; cursor: default; }
#hud #bag-item-detail #bag-split-row { display: flex; align-items: center; gap: 4px; margin: 4px 0; }
#hud #bag-item-detail #bag-split-row[hidden] { display: none; }
#hud #bag-item-detail #potion-state { font-size: 11px; color: #365e86; }
#hud #bag-item-detail .item-detail-footer { position: sticky; bottom: 0; gap: 8px; }
#hud #bag-item-detail #bag-use {
  min-width: 92px; min-height: 26px; padding: 3px 14px; border: 1px solid #1d4f9a; border-radius: 4px;
  background: linear-gradient(#4f93f2, #1f5fd0); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
}
#hud #bag-item-detail #bag-use:disabled { opacity: .5; cursor: default; }

/* ---- option stone lines (OPT-RUNE-V1): red, below the normal bonuses */
#hud .item-bonuses .nv-opt, .gear-tip .nv-opt, .gear-tip .gear-tip-stats .nv-opt { color: #d3202a !important; font-weight: 700 !important; }

/* ---- phones (BAG-FIT-V2): a short item detail - small picture beside the name, the text scrolls, the main button stays */
@media (pointer: coarse), (max-width: 640px), (max-height: 520px) {
  #hud #bag-item-detail { width: min(300px, calc(100vw - 16px)); max-height: min(42dvh, 300px) !important; display: flex; flex-direction: column; overflow: hidden; }
  #hud #bag-item-detail[hidden] { display: none; }
  #hud #bag-item-detail > .titlebar { flex: none; }
  #hud #bag-item-detail .item-detail-body {
    flex: 1 1 auto; min-height: 0 !important; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
    grid-template-columns: 46px minmax(0, 1fr); gap: 4px 8px; padding: 6px 8px 8px;
  }
  #hud #bag-item-detail .item-portrait { padding: 2px; border: 1px solid #d5dcdb; border-radius: 6px; background: #f7fafc; }
  #hud #bag-item-detail .item-portrait img { width: 40px; height: 40px; display: block; margin: 0 auto; }
  #hud #bag-item-detail .item-detail-name { font-size: 13px; font-weight: 700; }
  #hud #bag-item-detail .item-description { font-size: 12px; line-height: 1.35; }
  #hud #bag-item-detail .item-description > *, #hud #bag-item-detail .item-description p { margin-top: 2px !important; margin-bottom: 2px !important; padding-top: 2px !important; padding-bottom: 2px !important; }
  #hud #bag-item-detail #bag-detail-rows { margin: 3px 0; font-size: 12px; }
  #hud #bag-item-detail .bid-tools .bag-actions { margin: 4px 0 0; }
  #hud #bag-item-detail .bid-tools button { min-height: 26px; padding: 2px 8px; font-size: 12px; }
  #hud #bag-item-detail .item-detail-footer { flex: none; position: static; }
  #hud #bag-item-detail #bag-use { min-height: 32px; }
}

/* phones: holding a bag item (0.4 s = drag, js/ui-windows.js) must not open the system text / image menu */
#hud #inventory-window .bag-grid .bag-slot { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#hud #inventory-window .bag-grid .bag-slot img { -webkit-user-drag: none; }