/* The shop database page, laid out like the character planner's builds browser: a bar to switch between
   Items and Shops, a Find panel with the filters, and the list with its pager. */

.storeApp { color: #DBDBDB; font: 13px Verdana, Helvetica, Arial, sans-serif; }

.storeApp .browseNav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: #292929; border: 1px solid #303030; padding: 8px 10px; margin-bottom: 10px; }
.storeApp .browseTitle { font: bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #DBDBDB; margin-right: 4px; }
.storeApp .storeCounts { margin-left: auto; color: #DBDBDB; font: bold 12px Verdana, Helvetica, Arial, sans-serif; }

.storeApp .button, .storeApp button {
    padding: 4px 10px; border: 1px solid #000; border-radius: 0; cursor: pointer;
    background: rgb(102 121 118); background: linear-gradient(to bottom, rgb(102 121 118) 0%, rgb(40 49 47) 100%);
    color: #e6e9e8; text-shadow: 0 1px 1px #000; font: 12px Verdana, Helvetica, Arial, sans-serif; transition: none;
}
.storeApp .button:hover, .storeApp button:hover { color: #fff; background: linear-gradient(to bottom, rgb(122 143 139) 0%, rgb(50 61 59) 100%); border-color: #000; }
.storeApp .button.selected, .storeApp button.selected, .storeApp .bPager .current { color: #fff; border-color: #7C9899; background: linear-gradient(to bottom, rgb(122 143 139) 0%, rgb(50 61 59) 100%); }
.storeApp button:disabled { opacity: .4; cursor: default; }

.storeApp .panel { border: 2px solid #303030; background: #202020; margin-bottom: 10px; }
.storeApp .panel h3 {
    margin: 0; padding: 5px 12px; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font: bold 13px/normal "Trebuchet MS", Arial, Helvetica, sans-serif; color: #DBDBDB;
    background: linear-gradient(to bottom, #2b3638 0%, #4d6263 50%, #2b3638 100%);
}
.storeApp .bInner { padding: 12px 14px; }
.storeApp .bRow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin-bottom: 10px; }
/* The boxes are the planner's sizes: its search box, and its 12px dropdowns and small boxes */
.storeApp select, .storeApp input[type=text] {
    font: 12px/normal Verdana, Helvetica, Arial, sans-serif; color: #DBDBDB; background: #333;
    border: 1px solid #303030; border-radius: 0; padding: 5px 6px; height: auto; margin: 0; box-shadow: none;
}
.storeApp input[type=text].bQuery { flex: 1 1 300px; font: 14px/normal Verdana, Helvetica, Arial, sans-serif; padding: 6px 8px; }
.storeApp select:focus, .storeApp input[type=text]:focus { border-color: #7C9899; outline: none; }
.storeApp .bAddRow { background: #262626; border: 1px solid #303030; padding: 8px 10px; }
.storeApp .bField { display: flex; flex-direction: column; gap: 3px; flex: 1 1 150px; min-width: 140px; color: #bfbfbf; font-size: 12px; margin: 0; }
.storeApp .bField.bWide { flex: 2 1 240px; }
.storeApp .bField select, .storeApp .bField input { width: 100%; box-sizing: border-box; }

.storeApp .bFilters { border: 1px dashed #3d4a4b; background: #1f2424; padding: 8px 10px; }
.storeApp .bFiltersHead { display: flex; align-items: center; justify-content: space-between; color: #DBDBDB; font-size: 12px; margin-bottom: 6px; }
.storeApp .bFiltersHead em { color: #8f8f8f; font-style: normal; }
.storeApp .bNoFilters { color: #8f8f8f; font-size: 12px; padding: 2px 0; }
.storeApp .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.storeApp .chip { display: inline-flex; align-items: center; gap: 6px; background: #2b3638; border: 1px solid #4d6263; color: #DBDBDB; padding: 3px 4px 3px 9px; font-size: 12px; }
.storeApp .chip strong { color: #fff; }
.storeApp .chip button { height: 18px; line-height: 16px; padding: 0 5px; font-size: 12px; }

.storeApp .bSortLabel { font: normal 12px Verdana, Helvetica, Arial, sans-serif; color: #c7cccb; display: inline-flex; align-items: center; gap: 6px; margin: 0; }
/* The dropdowns in a title bar are a size down, so the bar stays slim */
.storeApp .panel h3 select { font-size: 11px; padding: 2px 4px; }
.storeApp .bTableWrap { overflow-x: auto; }
.storeApp .bResults { width: 100%; margin: 0; border-collapse: collapse; background: #202020; font-size: 12px; }
.storeApp .bResults th { text-align: left; font: bold 11px "Trebuchet MS", Arial, sans-serif; color: #c7cccb; background: #2b2b2b; padding: 6px 8px; text-transform: uppercase; white-space: nowrap; border: 0; }
.storeApp .bResults th[data-sort] { cursor: pointer; user-select: none; }
.storeApp .bResults th[data-sort]:hover, .storeApp .bResults th.sorted { color: #fff; }
.storeApp .bResults th[data-sort]::after { content: attr(data-arrow); }
.storeApp .bResults td { padding: 7px 8px; border: 0; border-top: 1px solid #303030; vertical-align: top; background: transparent; }
.storeApp .bResults tbody tr:nth-child(odd) { background: #202020; }
.storeApp .bResults tbody tr:nth-child(even) { background: #242424; }
.storeApp .bResults tbody tr:hover { background: #2b3638; }
.storeApp .bResults .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.storeApp .bResults .bName .itemName, .storeApp .bResults .bName a { font: bold 13px "Trebuchet MS", Arial, sans-serif; color: #DBDBDB; }
.storeApp .bResults a, .storeApp .bResults a:visited { color: #c4a45d; text-decoration: none; }
.storeApp .bResults a:hover { color: #fff; text-decoration: underline; }
.storeApp .bResults .bDesc { color: #8f8f8f; margin-top: 2px; }
.storeApp .bResults .itemBonuses { color: #a9b3b1; max-width: 520px; }
.storeApp .bResults .muted { color: #a9a9a9; }
.storeApp .bEmpty { color: #bfbfbf; text-align: center; padding: 22px; }
.storeApp .bPager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 10px 12px; }
.storeApp .bPager button { min-width: 28px; }
.storeApp .bPager .gap { color: #8f8f8f; padding: 0 4px; }
.storeApp .loading .bResults { opacity: .6; transition: opacity .15s; }
.storeApp [hidden] { display: none !important; }

@media (max-width: 700px) {
    .storeApp .storeCounts { margin-left: 0; width: 100%; }
}

.storeApp .bListTools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

/* Phones and narrow windows: the filters stack two to a row, and each row of a list becomes a card with
   its column names down the side. The Sort dropdown stands in for the column headers. */
@media (max-width: 760px) {
    .storeApp .browseNav { gap: 6px 8px; }
    .storeApp .storeCounts { margin-left: 0; width: 100%; font-weight: normal; }
    .storeApp .bInner { padding: 10px; }
    .storeApp .bQuery { flex-basis: 100%; }
    .storeApp .bField, .storeApp .bField.bWide { flex: 1 1 calc(50% - 10px); min-width: 0; }
    .storeApp .panel h3 { flex-wrap: wrap; }
    .storeApp .bResults thead { display: none; }
    .storeApp .bResults, .storeApp .bResults tbody, .storeApp .bResults tr, .storeApp .bResults td { display: block; width: 100%; box-sizing: border-box; }
    .storeApp .bResults tr { border-top: 1px solid #303030; padding: 8px 10px; }
    .storeApp .bResults td { border: 0; padding: 2px 0; display: flex; gap: 10px; text-align: left; }
    .storeApp .bResults td[data-label]::before { content: attr(data-label); flex: 0 0 96px; color: #8f8f8f; font: bold 10px "Trebuchet MS", Arial, sans-serif; text-transform: uppercase; padding-top: 2px; }
    .storeApp .bResults td.bName { display: block; padding-bottom: 5px; }
    .storeApp .bResults td.isEmpty { display: none; }
    .storeApp .bResults td > div, .storeApp .bResults td > a { min-width: 0; }
    .storeApp .bResults td.shopCell { flex-wrap: wrap; }
    .storeApp .bResults td.shopCell .bDesc { flex-basis: 100%; padding-left: 106px; margin-top: 0; }
    .storeApp .bResults .num { text-align: left; }
    .storeApp .bResults .bEmpty { display: block; }
    .storeApp .bPager { padding: 8px; }
}
@media (max-width: 420px) {
    .storeApp .bField, .storeApp .bField.bWide { flex-basis: 100%; }
}

/* Fixed heights for the boxes, the same as the planner's, whatever the site's older stylesheets say
   about dropdowns and text boxes */
#storeApp select, #storeApp input[type=text] {
    box-sizing: border-box !important; height: 26px !important; min-height: 0 !important;
    font: 12px/normal Verdana, Helvetica, Arial, sans-serif !important; padding: 0 6px !important;
}
#storeApp input[type=text].bQuery { height: 30px !important; font-size: 14px !important; padding: 0 8px !important; }
#storeApp .panel h3 select { height: 22px !important; font-size: 11px !important; padding: 0 4px !important; }
#storeApp .panel h3 { padding-top: 4px !important; padding-bottom: 4px !important; }

/* Appraise and the two merchant feats */
.storeApp .bPriceRow { align-items: center; }
.storeApp .bInline, .storeApp .bCheck { display: inline-flex; align-items: center; gap: 6px; color: #bfbfbf; font-size: 12px; margin: 0; }
.storeApp .bCheck input { margin: 0; accent-color: #7C9899; }
.storeApp .bEdge { margin-left: auto; color: #c4a45d; font-size: 12px; white-space: nowrap; }
#storeApp .bPriceRow { padding: 5px 10px; gap: 6px 16px; }
#storeApp .bPriceRow label { font: 12px/normal Verdana, Helvetica, Arial, sans-serif !important; font-weight: normal !important; white-space: nowrap; margin: 0 !important; }
#storeApp .bPriceRow input[type=checkbox] {
    width: 13px !important; height: 13px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
    transform: none !important; zoom: 1 !important; appearance: auto; -webkit-appearance: checkbox; vertical-align: middle;
}
#storeApp .bPriceRow input.bAppraise { width: 52px !important; text-align: center; }

/* Phones: the percentage line goes under the boxes, on the left */
@media (max-width: 760px) {
    .storeApp .bEdge { margin-left: 0; flex-basis: 100%; text-align: left; }
}

/* Nothing shifts while you search: the filters box keeps one line for the chips whether there are any or
   not, and the columns keep their widths from one list to the next */
.storeApp .chips, .storeApp .bNoFilters { min-height: 26px; display: flex; align-items: center; }
.storeApp .chips:empty { display: none; }
@media (min-width: 761px) {
    .storeApp .bResults { table-layout: fixed; }
    .storeApp [data-panel="items"] .bResults th:nth-child(1) { width: 30%; }
    .storeApp [data-panel="items"] .bResults th:nth-child(2) { width: 9%; }
    .storeApp [data-panel="items"] .bResults th:nth-child(3) { width: 11%; }
    .storeApp [data-panel="items"] .bResults th:nth-child(4) { width: 9%; }
    .storeApp [data-panel="items"] .bResults th:nth-child(5) { width: 8%; }
    .storeApp [data-panel="items"] .bResults th:nth-child(6) { width: 13%; }
    .storeApp [data-panel="items"] .bResults th:nth-child(7) { width: 20%; }
    .storeApp [data-panel="shops"] .bResults th:nth-child(1) { width: 32%; }
    .storeApp [data-panel="shops"] .bResults th:nth-child(2) { width: 44%; }
    .storeApp [data-panel="shops"] .bResults th:nth-child(3) { width: 14%; }
    .storeApp [data-panel="shops"] .bResults th:nth-child(4) { width: 10%; }
    .storeApp .bResults td { overflow-wrap: anywhere; }
}

/* Click an item to copy it; click a shop (its whole cell, or a whole row in Shops) to see what it sells */
.storeApp .bResults tr.copyRow, .storeApp .bResults tr.shopRow, .storeApp .bResults td.shopCell { cursor: pointer; }
.storeApp .bResults td.shopCell:hover a, .storeApp .bResults tr.shopRow:hover a { color: #fff; text-decoration: underline; }
.storeApp .bResults td.shopCell:hover { background: rgba(124, 152, 153, .12); }
.storeToast {
    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; z-index: 50;
    background: #2b3638; border: 1px solid #7C9899; color: #e6e9e8; font: 12px Verdana, Helvetica, Arial, sans-serif;
    padding: 8px 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); transition: opacity .18s, transform .18s; max-width: 90vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.storeToast.show { opacity: 1; transform: translate(-50%, 0); }

/* Phones: boxes big enough to tap, with 16px text so phones don't zoom the page in when one is tapped;
   Items and Shops share the bar; the filter box heading wraps instead of squeezing */
@media (max-width: 760px) {
    #storeApp select, #storeApp input[type=text] { font-size: 16px !important; height: 34px !important; }
    #storeApp input[type=text].bQuery { font-size: 16px !important; height: 36px !important; }
    #storeApp .panel h3 select { font-size: 16px !important; height: 32px !important; }
    #storeApp .bPriceRow input.bAppraise { width: 64px !important; }
    #storeApp .bPriceRow { padding: 8px 10px; gap: 10px 16px; }
    #storeApp .bPriceRow input[type=checkbox] { width: 18px !important; height: 18px !important; }
    .storeApp .browseTitle { flex-basis: 100%; }
    .storeApp .browseNav .button { flex: 1 1 0; padding: 7px 10px; }
    .storeApp .bFiltersHead { flex-wrap: wrap; gap: 6px; }
    .storeApp .bPager button { min-width: 36px; padding: 6px 10px; }
    .storeApp .panel h3 { padding: 6px 10px; }
}

/* The shopkeeper is the shop's name on the site, in gold */
.storeApp .bResults .bName a.keeper, .storeApp .bResults .bName a.keeper:visited { color: #c4a45d; }
.storeApp .bResults tr.shopRow:hover .bName a.keeper { color: #fff; }

/* Go to any page by number */
.storeApp .bGoto { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 10px; color: #8f8f8f; font-size: 12px; font-weight: normal; }
#storeApp .bGoto input { width: 56px !important; text-align: center; }
@media (max-width: 760px) {
    .storeApp .bGoto { margin: 6px 0 0; flex-basis: 100%; }
    #storeApp .bGoto input { width: 70px !important; }
}

/* The editor's Edit buttons on items and shops */
.storeApp .bResults a.editLink, .storeApp .bResults a.editLink:visited {
    display: inline-block; margin-left: 8px; padding: 0 6px; border: 1px solid #000; vertical-align: 1px;
    background: linear-gradient(to bottom, rgb(102 121 118) 0%, rgb(40 49 47) 100%); color: #e6e9e8;
    font: 11px/16px Verdana, Helvetica, Arial, sans-serif; text-decoration: none; text-shadow: 0 1px 1px #000;
}
.storeApp .bResults a.editLink:hover { color: #fff; background: linear-gradient(to bottom, rgb(122 143 139) 0%, rgb(50 61 59) 100%); }