/* Grand Exchange / Item Database
   Reuses .brown_box, .inner_brown_background, .subsectionHeader, .subheader,
   .row_a, .row_b from /css/global-38.css. */

#article.itemdb {
    color: #d8c79a;
}

.itemdb .vertically_spaced {
    margin-bottom: 8px;
}

.itemdb .brown_box .subsectionHeader {
    padding: 0 8px;
    color: #f3c334;
}

/* Stock ticker — matches the original 2011 itemdb1-10.css:
   plain dark-brown bar, monospace, 20px tall, white text, infinite scroll. */
#ticker.ticker_bar {
    background: #261C09;
    width: 100%;
    height: 20px;
    color: #ffffff;
    border: none;
    font-family: monospace;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    line-height: 20px;
}

.ticker_bar .ticker_track {
    display: inline-flex;
    width: max-content;
    animation: itemdb-ticker 90s linear infinite;
}

.ticker_bar:hover .ticker_track {
    animation-play-state: paused;
}

.ticker_bar .ticker_loop {
    display: inline-flex;
    flex: 0 0 auto;
}

.ticker_bar .ticker_item {
    color: #ffffff;
    text-decoration: none;
    padding: 0 14px;
}

.ticker_bar .ticker_item:hover {
    text-decoration: underline;
}

.ticker_bar span.rise { color: #319631; }
.ticker_bar span.drop { color: #c02020; }
.ticker_bar span.stay { color: #6060FF; }

@keyframes itemdb-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ticker_bar .ticker_track {
        animation: none;
    }
}

/* Two-column frontpage layout: Browse sidebar on the left, content on the right. */
.itemdb .frontpage_grid {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px;
    align-items: start;
}

.itemdb .browse_sidebar {
    position: sticky;
    top: 8px;
    align-self: start;
    height: auto;
}

.itemdb .browse_sidebar.brown_box {
    /* Override the global 1% height hack so the brown wrapper hugs all 27 letters. */
    height: auto;
}

.itemdb .frontpage_main > .brown_box {
    margin-bottom: 8px;
}

.itemdb .frontpage_main > .brown_box:last-child {
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .itemdb .frontpage_grid {
        grid-template-columns: 1fr;
    }
    .itemdb .browse_sidebar {
        position: static;
    }
}

/* Search row — single line, wraps gracefully if cramped. */
.itemdb #searchbox {
    padding: 6px 10px;
    text-align: left;
    height: auto;
    line-height: 1.7;
    color: #ffffff;
    background: #392c14;
}

.itemdb #searchbox form {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.itemdb #searchbox b {
    color: #f3c334;
    margin-left: 4px;
    white-space: nowrap;
}

.itemdb #searchbox label {
    color: #d8c79a;
    font-weight: normal;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
}

.itemdb #searchbox label input {
    margin-right: 2px;
    vertical-align: middle;
}

.itemdb #searchbox .textinput,
.itemdb #searchbox select {
    border: 1px solid #5a4623;
    background: #f3e8c4;
    color: #1a1208;
    padding: 2px 5px;
    font: inherit;
}

.itemdb #searchbox .textinput {
    flex: 1 1 140px;
    min-width: 0;
}

.itemdb #searchbox .buttonsmall {
    background: #5a4623;
    color: #f3c334;
    border: 1px solid #3f3320;
    padding: 3px 14px;
    cursor: pointer;
    font-weight: bold;
}

.itemdb #searchbox .buttonsmall:hover {
    background: #6b5429;
}

.itemdb #searchbox_text {
    padding: 6px 10px;
    background-color: #2e220e;
    border-top: 1px solid #3f3320;
    color: #bba36a;
    font-size: 11px;
    line-height: 1.4;
}

/* Browse sidebar — vertical column, alternating row stripes. */
.itemdb #browsebox .subsectionHeader {
    padding: 0 4px;
}

.itemdb #browsebox #browse_list {
    padding: 0;
    background: #392c14;
}

.itemdb #browse_list > div {
    padding: 0;
    margin: 0;
}

.itemdb #browse_list > div.row_b {
    background: #2e220e;
}

.itemdb #browse_list a {
    display: block;
    padding: 4px 10px;
    color: #f3c334;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    line-height: 1.4;
}

.itemdb #browse_list a:hover {
    background: #4a3818;
    color: #fff;
}

/* Top-5 panels */
.itemdb .top5_layout {
    display: flex;
    gap: 6px;
    background: #392c14;
    padding: 6px;
}

.itemdb .top5_panel {
    flex: 1 1 50%;
    background: #261c09;
    border: 1px solid #3f3320;
    padding: 4px;
}

.itemdb .top5_panel .subheader {
    position: relative;
    text-align: center;
    color: #f3c334;
    font-weight: bold;
}

.itemdb .top5_panel .subheader .more {
    position: absolute;
    right: 6px;
    top: 0;
    color: #d8c79a;
    font-weight: normal;
    font-size: 11px;
}

.itemdb .top5_table,
.itemdb .results_table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
}

.itemdb .top5_table th,
.itemdb .top5_table td,
.itemdb .results_table th,
.itemdb .results_table td {
    padding: 3px 6px;
    border-bottom: 1px solid #3f3320;
    color: #d8c79a;
    text-align: left;
    vertical-align: middle;
}

.itemdb .top5_table th,
.itemdb .results_table th {
    background: #5a4623;
    color: #f3c334;
}

.itemdb .top5_table tr.row_b td,
.itemdb .results_table tr.row_b td {
    background: #2e220e;
}

.itemdb .top5_table a,
.itemdb .results_table a {
    color: #f3c334;
    text-decoration: none;
}

.itemdb .top5_table a:hover,
.itemdb .results_table a:hover {
    text-decoration: underline;
}

.itemdb .empty {
    text-align: center;
    color: #bba36a;
    font-style: italic;
    padding: 12px !important;
}

.itemdb .item_sprite {
    width: 36px;
    height: 32px;
    image-rendering: pixelated;
    object-fit: contain;
    background: transparent;
}

.itemdb .member_cell {
    text-align: center;
    width: 24px;
    padding: 0 !important;
}

.itemdb .member_cell img {
    image-rendering: pixelated;
    vertical-align: middle;
}

.itemdb .item_sprite_big {
    width: 96px;
    height: 96px;
}

/* Rise / drop indicators */
.itemdb span.rise {
    color: #6dd16b;
    font-weight: bold;
}

.itemdb span.drop {
    color: #ec5b5b;
    font-weight: bold;
}

.itemdb span.flat {
    color: #bba36a;
}

/* Item detail */
.itemdb .item_detail {
    overflow: hidden;
}

.itemdb .item_sprite_wrap {
    float: left;
    width: 110px;
    text-align: center;
}

.itemdb .item_facts {
    margin-left: 120px;
}

.itemdb .item_examine {
    color: #bba36a;
    font-style: italic;
    margin: 0 0 6px;
}

.itemdb .item_meta {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    color: #d8c79a;
}

.itemdb .item_meta li {
    margin: 2px 0;
}

.itemdb .item_price .price {
    color: #f3c334;
    font-weight: bold;
    font-size: 1.1em;
}

.itemdb .item_changes span {
    margin-right: 12px;
}

/* Chart */
.itemdb .item_chart {
    padding: 8px;
}

.itemdb .chart_tabs {
    margin-bottom: 6px;
}

.itemdb .chart_tab {
    background: #5a4623;
    border: 1px solid #3f3320;
    color: #d8c79a;
    padding: 2px 12px;
    cursor: pointer;
    margin-right: 2px;
}

.itemdb .chart_tab.active {
    background: #f3c334;
    color: #1a1208;
    font-weight: bold;
}

.itemdb .price_chart {
    width: 100%;
    height: 240px;
    background: #1a1208;
    border: 1px solid #3f3320;
    display: block;
}

.itemdb .chart_legend {
    margin-top: 4px;
    font-size: 11px;
    color: #bba36a;
}

.itemdb .chart_legend span {
    margin-right: 14px;
}

.itemdb .chart_legend em {
    color: #f3c334;
    font-style: normal;
}

/* Item-of-the-Week */
.itemdb .iotw {
    overflow: hidden;
}

.itemdb .iotw_image {
    float: left;
    margin-right: 12px;
}

.itemdb .iotw_title {
    color: #f3c334;
    font-weight: bold;
    font-size: 1.15em;
    text-decoration: none;
}

.itemdb .iotw_examine {
    color: #bba36a;
    font-style: italic;
}

/* Top100 + results scale picker */
.itemdb .scale_picker {
    padding: 4px 10px;
    text-align: left;
}

.itemdb .scale_picker form {
    margin: 0;
}

.itemdb .scale_picker select {
    margin: 0 8px 0 4px;
    background: #f3e8c4;
    color: #1a1208;
    border: 1px solid #5a4623;
}

.itemdb .pagination_box {
    padding: 8px;
    color: #d8c79a;
}