/* Loot Generator page styles -- loaded alongside ../shop/shop-common.css,
   which already provides the generic look (modals, .itemName, .catTag,
   .sortBar, .iconBtn, .toast, etc.). Everything here is page-layout
   specific, adapted from the Shop Generator's own inline <style> block
   (those classes live in shop's index.html, not shop-common.css, so they
   aren't reusable by reference -- redefined here instead, generically). */

.tabBar{ display:flex; gap:8px; }
.tabBar button{
  padding: 9px 14px; border-radius: 8px; border:1px solid var(--border); background: var(--bg);
  color: var(--ink-soft); font-size:13.5px; font-weight:600; cursor:pointer;
}
.tabBar button:hover{ border-color: var(--accent); color: var(--accent); }
.tabBar button.active{ background: var(--accent); border-color: var(--accent); color:#fff; }

.lootCard{ background: var(--panel); border:1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }
.lootCard h2{ margin: 0 0 2px 0; font-size: 20px; }
.lootCard .lootMeta{ font-size: 12.8px; color: var(--ink-soft); margin: 4px 0 10px 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lootCard .lootFlavor{ font-size: 13.6px; line-height:1.5; margin:6px 0 0 0; }
.lootCard .lootFlavor.rumor{ color: var(--accent); font-style:italic; }
.fieldRow{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.miniReroll{ border:none; background:none; cursor:pointer; font-size: 13px; opacity:.55; padding:2px 4px; line-height:1; }
.miniReroll:hover{ opacity:1; }

.coinLine{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin: 10px 0 2px 0; }
.coinLine .coinAmount{ font-size: 22px; font-weight:700; font-variant-numeric: tabular-nums; }
.coinLine small{ font-size:12.5px; font-weight:600; color: var(--ink-soft); margin-left:8px; }
.coinLine .btn{ padding:4px 10px; font-size:12px; flex-shrink:0; }

.sectionLabel{ font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color: var(--ink-soft); margin: 18px 0 6px 0; font-weight:700; }
.sectionLabel:first-child{ margin-top:4px; }
.sectionLabelRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin: 18px 0 6px 0; }
.sectionLabelRow:first-child{ margin-top:4px; }

.chipList{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ font-size:12px; padding:4px 10px; border-radius:999px; background: var(--bg); border:1px solid var(--border); color: var(--ink-soft); }
button.chip{ font: inherit; font-size:12px; cursor:pointer; }
button.chip:hover{ border-color: var(--accent); color: var(--accent); }
.chip.gem{ background:#eef6ff; border-color:#bcdcff; color:#1c6fd0; }
.chip.art{ background:#fff6e8; border-color:#f0d9a6; color:#b3760a; }

.itemList{ background: var(--panel); border:1px solid var(--border); border-radius: 14px; overflow:hidden; }
.itemRow{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.itemList .itemRow:last-child{ border-bottom:none; }
.itemRow.locked{ background: #fbfaf3; }
.itemRow.cursedRow{ background: #fdf2f2; }
.itemMain{ flex: 1 1 220px; min-width:0; }
.itemMeta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px; color: var(--ink-soft); flex: 0 1 auto; }
.itemMeta b{ color: var(--ink); font-variant-numeric: tabular-nums; }
.rowActions{ display:flex; gap:6px; flex-shrink:0; }
.totalBar{ display:flex; justify-content:space-between; padding: 12px 16px; font-weight:700; font-size:13.8px; background: var(--bg); border-top: 1px solid var(--border); }

.curseTag{
  display:inline-block; font-size:10.5px; padding:2px 8px; border-radius:999px; margin-left:6px;
  background:#fceaea; color:#a5312a; border:1px solid #f0c6c3; font-weight:700; letter-spacing:.02em;
}
.curseNote{ font-size:12px; color:#a5312a; margin-top:4px; line-height:1.5; }
.curseNote b{ color:#8c2820; }

.settingsGrid{ display:grid; gap:4px; }
.rarityDot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px; }

.checkboxRow{ display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:6px; }
.checkboxRow input[type=checkbox]{ width:15px; height:15px; accent-color: var(--accent); flex-shrink:0; }
.checkGroup{ display:flex; flex-wrap:wrap; gap:10px 16px; margin: 4px 0 12px 0; }

/* In-card live toggle+slider pairs (Gems/Art, Junk & Trinkets on the Single
   Haul card) -- same checkboxRow/sliderRow look as the sidebar, just scoped
   for use inside a .lootCard, plus a disabled state for the slider when its
   checkbox is off rather than hiding it outright. */
.lootCard .checkboxRow{ margin: 10px 0 0 0; }
.lootCard .sliderRow{ margin: 6px 0 0 0; }
.lootCard .sliderRow label{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px; }
.lootCard .sliderRow input[type=range]{ width:100%; accent-color: var(--accent); }
.lootCard .sliderRow input[type=range]:disabled{ opacity:.4; cursor:not-allowed; accent-color: var(--ink-soft); }

/* Click-to-edit haul title */
.haulTitleInput{ font: inherit; font-size:20px; font-weight:700; width:100%; max-width:440px; padding:2px 6px; border:1px solid var(--border); border-radius:6px; }
#haulTitleDisplay{ cursor: text; }
#haulTitleDisplay:hover{ text-decoration: underline dotted; text-underline-offset:4px; }

/* Click-to-edit feature names (Loot the Room) -- reuses the ambient font
   size/weight of whatever it's swapped into (a small chip vs. a larger
   featureGroup heading), unlike .haulTitleInput above which is sized for
   one specific spot. */
.featureNameInput{ font: inherit; padding:1px 5px; border:1px solid var(--border); border-radius:5px; }
[data-feature-name]{ cursor:pointer; }
[data-feature-name]:hover{ text-decoration: underline dotted; text-underline-offset:3px; }

/* Gems & Art Objects rows (qty-stepper, like the Shop Generator's inventory
   rows -- that pattern lives inline in shop/index.html's own <style> block
   rather than shop-common.css, so it isn't reusable by reference and is
   redefined generically here). */
.qtyStepper{ display:flex; align-items:center; gap:6px; }
.qtyStepper button{
  width:22px; height:22px; border-radius:6px; border:1px solid var(--border); background: var(--bg);
  cursor:pointer; font-size:13px; line-height:1; padding:0;
}
.qtyStepper button:hover{ background: var(--accent-soft); border-color: var(--accent); }
.qtyStepper button:disabled{ opacity:.4; cursor:not-allowed; }

.genLayout{ display:flex; align-items:flex-start; gap:22px; max-width:1120px; margin:0 auto; padding:20px 20px 70px 20px; }
.genLayout > main{ flex:1 1 auto; min-width:0; max-width:none; margin:0; padding:0; }
.genSidebar{
  flex:0 0 270px; background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:16px; position:sticky; top:76px; align-self:flex-start; max-height: calc(100vh - 96px); overflow-y:auto;
}
.genSidebar h3{ margin:0 0 10px 0; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); }
.genSidebar .sliderRow{ margin-bottom:14px; }
.genSidebar .sliderRow label{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px; }
.genSidebar .sliderRow input[type=range]{ width:100%; accent-color: var(--accent); }
.genSidebar .sliderRow input[type=range]:disabled{ opacity:.4; cursor:not-allowed; accent-color: var(--ink-soft); }
/* A rarity slider that can't affect anything at the current CR/Level band
   (see renderRaritySlidersInto) -- dimmed further than the input's own
   :disabled styling so the whole row visually reads as "not applicable,"
   not just "temporarily off." */
.sliderRowDisabled{ opacity:.55; }
.sliderRowDisabled label{ color: var(--ink-soft); }
.genSidebar select, .genSidebar input[type=text], .genSidebar input[type=number]{ width:100%; margin-bottom:10px; }
.genSidebar label.fieldLabel{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:4px; }
.themeDesc{ font-size:12px; color: var(--ink-soft); line-height:1.4; margin: -4px 0 12px 0; }
.sidebarHint{ font-size:12px; color:var(--ink-soft); margin:10px 0 8px 0; line-height:1.4; }
.genBtn{ width:100%; padding:11px; font-size:14px; margin-bottom:14px; }

/* Hover tooltips replacing the old always-visible explainer paragraphs
   under "Use average", "Enable cursed items", and "Override CR/Level band
   rarity limits" -- see wireHoverTooltip() in index.html. The help cursor
   is the only always-visible affordance; the bubble itself only appears
   after a deliberate 2s hover, and is suppressed entirely (including the
   cursor) when Settings' "Hide tooltips" is on, via the tooltipsHidden
   class on <body>. */
.tipLabel{ cursor:help; border-bottom:1px dotted var(--ink-soft); }
body.tooltipsHidden .tipLabel{ cursor:inherit; border-bottom:none; }
.hoverTooltip{
  position:fixed; z-index:500; max-width:280px; padding:10px 12px; border-radius:8px;
  background: var(--ink, #23262b); color:#fff; font-size:12px; line-height:1.5;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); pointer-events:none;
}

/* --- Loot the Room --- */
.featureBar{ display:flex; gap:8px; margin-bottom:14px; }
.featureBar input[type=text]{ flex:1 1 auto; }
.featureGroup{ margin-bottom:16px; }
.featureGroup h4{ margin:0 0 8px 0; font-size:13.5px; display:flex; align-items:center; gap:8px; }
.featureGroup h4 .featCount{ font-weight:400; color:var(--ink-soft); font-size:12px; }
.poolRow{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:10px 14px; border-bottom:1px solid var(--border);
}
.itemList .poolRow:last-child{ border-bottom:none; }
.poolRow.locked{ background: #fbfaf3; }
.poolRow .info{ min-width:0; flex:1 1 220px; }
.poolRow select{ flex-shrink:0; font-size:12.5px; padding:6px 8px; }
.emptyFeatureHint{ font-size:12.5px; color:var(--ink-soft); padding:14px 16px; }

/* Field labels/inputs inside plain modals (Save Loot) -- .fieldLabel's
   other definition above is scoped to .genSidebar, so this modal-scoped
   copy exists separately rather than widening that one's selector. */
.modal label.fieldLabel{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin: 12px 0 4px 0; }
.modal label.fieldLabel:first-of-type{ margin-top:0; }
.modal select, .modal input[type=text]{ width:100%; }

@media (max-width: 860px){
  .genLayout{ flex-direction:column; padding:16px 14px 60px 14px; }
  .genSidebar{ position:static; width:100%; flex:none; max-height:none; }
}