/* J-panel Trade tab — 3-column layout: category sidebar | rows | map widget.
   Tokens from shared/design-system.css (all `--w-*`). */

.td-root {
    display: grid;
    grid-template-columns: 180px 1fr 300px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "sidebar controls map"
        "sidebar list    map"
        "sidebar hint    map";
    gap: 8px;
    height: 100%;
    min-height: 0;
    padding: 8px;
    box-sizing: border-box;
    color: var(--w-text-primary);
}

/* ---------- Category sidebar ---------- */
.td-sidebar {
    grid-area: sidebar;
    background: var(--w-bg-input);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-sm);
    padding: 4px 0;
    overflow-y: auto;
    min-height: 0;
}

.td-sidebar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--w-text-secondary);
    font-size: 13px;
    border-left: 2px solid transparent;
    transition: background var(--w-transition-fast), color var(--w-transition-fast);
}

.td-sidebar-row:hover {
    background: var(--w-bg-card-hover);
    color: var(--w-text-primary);
}

.td-sidebar-row.active {
    background: var(--w-accent-dim);
    color: var(--w-text-primary);
    border-left-color: var(--w-accent);
}

.td-sidebar-row.focused {
    outline: 1px solid var(--w-accent);
    outline-offset: -1px;
    box-shadow: inset 0 0 6px rgba(230, 193, 112, 0.25);
}

.td-sidebar-count {
    color: var(--w-text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.td-sidebar-row.active .td-sidebar-count {
    color: var(--w-accent);
}

/* ---------- Controls ---------- */
.td-controls {
    grid-area: controls;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.td-search {
    flex: 1 1 200px;
    min-width: 160px;
    background: var(--w-bg-input);
    color: var(--w-text-primary);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-sm);
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
}

.td-search:focus {
    border-color: var(--w-accent);
}

.td-sort-chips {
    display: flex;
    gap: 4px;
}

.td-sort-chip {
    background: var(--w-bg-card);
    color: var(--w-text-secondary);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-sm);
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all var(--w-transition-fast);
}

.td-sort-chip:hover {
    color: var(--w-text-primary);
    border-color: var(--w-accent-dim);
}

.td-sort-chip.td-sort-active {
    background: var(--w-accent);
    color: var(--w-bg-primary);
    border-color: var(--w-accent);
}

.td-stock-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--w-text-secondary);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}

.td-stock-toggle input {
    cursor: pointer;
    accent-color: var(--w-accent);
}

/* ---------- Row list ---------- */
.td-list {
    grid-area: list;
    overflow-y: auto;
    min-height: 0;
    background: var(--w-bg-secondary);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-sm);
    padding: 4px;
}

.td-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--w-radius-sm);
    cursor: pointer;
    transition: background var(--w-transition-fast);
    border: 1px solid transparent;
}

.td-row:hover {
    background: var(--w-bg-card-hover);
}

.td-row.td-row-selected {
    background: var(--w-accent-dim);
    border-color: var(--w-accent);
}

.td-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.td-item-sprite {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.td-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.td-item-name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-item-rate {
    font-size: 11px;
    color: var(--w-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-row-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    font-size: 11px;
}

.td-post-name {
    color: var(--w-text-secondary);
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-distance {
    color: var(--w-text-muted);
    font-variant-numeric: tabular-nums;
}

.td-row.td-row-selected .td-post-name,
.td-row.td-row-selected .td-distance {
    color: var(--w-text-primary);
}

.td-empty {
    padding: 24px;
    text-align: center;
    color: var(--w-text-muted);
    font-size: 13px;
}

/* ---------- Hint ---------- */
.td-hint {
    grid-area: hint;
    font-size: 11px;
    color: var(--w-text-muted);
    text-align: center;
    padding: 4px;
}

/* ---------- Map widget ---------- */
.td-map-panel {
    grid-area: map;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--w-bg-secondary);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-sm);
    padding: 8px;
}

.td-map-canvas {
    width: 280px;
    height: 280px;
    image-rendering: pixelated;
    display: block;
    margin: 0 auto;
    background: var(--w-bg-primary);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-sm);
}

.td-map-label {
    font-size: 11px;
    color: var(--w-text-secondary);
    text-align: center;
    min-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-map-label.has-selection {
    color: var(--w-accent);
}

/* ---------- Narrow-screen fallback ---------- */
@media (max-width: 900px) {
    .td-root {
        grid-template-columns: 140px 1fr;
        grid-template-areas:
            "sidebar controls"
            "sidebar list"
            "sidebar hint";
    }
    .td-map-panel { display: none; }
}