/* Wolfstorm-like Dark Theme Inventory */

/* Container */
.inventory-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #222;
    color: #e0e0e0;
    font-family: 'Segoe UI', sans-serif;
    font-size: 11px;
}

/* Header */
.inventory-header {
    display: flex;
    align-items: center;
    padding: 6px;
    background-color: #333;
    border-bottom: 1px solid #444;
    gap: 4px;
}

.inventory-search {
    flex: 1;
    background-color: #111;
    border: 1px solid #444;
    color: #ccc;
    padding: 4px;
    border-radius: 2px;
}

.inventory-search::placeholder {
    color: #666;
}

.inventory-btn-icon {
    background: transparent;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-btn-icon:hover {
    color: #fff;
    background-color: #444;
    border-radius: 3px;
}

.inventory-btn-icon .material-icons {
    font-size: 18px;
}

/* Tabs */
.inventory-tabs {
    display: flex;
    background-color: #2b2b2b;
    border-bottom: 1px solid #444;
}

.inventory-tab {
    padding: 6px 12px;
    cursor: pointer;
    color: #888;
    border-right: 1px solid #333;
    transition: background-color 0.2s;
}

.inventory-tab:hover {
    background-color: #3a3a3a;
    color: #ccc;
}

.inventory-tab.active {
    background-color: #444;
    color: #fff;
    border-bottom: 2px solid #f39c12; /* Wolfstorm Orange */
    font-weight: bold;
}

/* Content Area */
.inventory-tree-container {
    flex: 1;
    overflow-y: auto;
    background-color: #1e1e1e;
    padding: 4px;
}

/* Footer */
.inventory-footer {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: #333;
    border-top: 1px solid #444;
    gap: 8px;
}

.inventory-status-text {
    flex: 1;
    text-align: right;
    color: #777;
    font-size: 10px;
}

/* Tree Styling */
.ll-tree-view {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ll-tree-item {
    margin: 1px 0;
}

.ll-tree-item > div {
    display: flex;
    align-items: center;
    padding: 2px 4px;
    cursor: pointer;
    border-radius: 2px;
    transition: background-color 0.1s;
}

.ll-tree-item > div:hover {
    background-color: #2d2d2d;
}

.ll-tree-children {
    list-style: none;
    padding-left: 16px; /* Indentation */
    margin: 0;
    border-left: 1px solid #333;
}

/* Recent/Worn Lists */
.inventory-list-item {
    padding: 4px 8px;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    /* These rows are drag sources (see floater_inventory._makeItemDraggable). Without
       this, a press-and-drag on the label starts a TEXT SELECTION instead of the drag
       in some browsers — which is exactly what "dragging it to the ground just selects
       the text" was. The tree rows already set this inline. */
    user-select: none;
    -webkit-user-select: none;
}

.inventory-list-item:hover {
    background-color: #2d2d2d;
}

.inventory-list-item .time-ago {
    margin-left: auto;
    color: #666;
    font-size: 9px;
}