/* Item page: industry panel */

.ind-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    min-width: 0;
}
.ind-card + .ind-card, .ind-grid + .ind-card, .ind-card + .ind-grid { margin-top: 1rem; }
.ind-card .data-table th { background: var(--surface-2); }
.ind-card .data-table tbody tr:hover td { background: var(--surface-3); }
.ind-card .table-wrap { margin: 0 -1.1rem; padding: 0 1.1rem; }

.ind-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}
.ind-head h3 { font-size: .95rem; font-weight: 600; margin: 0; }
.ind-head .panel-sub { margin-top: .2rem; }

.ind-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .ind-grid { grid-template-columns: minmax(0, 1fr); } }

.ind-facts { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; }

.bp-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--text);
    font-weight: 500;
}
.bp-link img { width: 32px; height: 32px; border-radius: 6px; background: var(--surface-3); }
.bp-link:hover { color: var(--accent); }

.ind-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.ind-controls .field { width: auto; }
.ind-controls .field-input { padding-block: .35rem; width: 110px; }
.ind-controls #IndFacility, .ind-controls #IndRig { width: auto; max-width: 100%; }

.ind-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    gap: .75rem;
    margin-top: 1rem;
}
.ind-summary div {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .7rem .85rem;
}
.ind-summary span { display: block; font-size: .78rem; color: var(--muted); }
.ind-summary strong { font-size: 1.15rem; font-weight: 650; }

.ind-note { color: var(--muted); font-size: .78rem; margin: .75rem 0 0; }

.skill-chip { gap: .35rem; }
.skill-chip b { color: var(--text); font-weight: 600; }

.ind-uses { max-height: 420px; overflow-y: auto; }

/* the signed-in user's own orders in the market order list */
#OrdersTable tr.my-order td { background: color-mix(in srgb, var(--isk) 12%, transparent); }
#OrdersTable tr.my-order td:first-child { box-shadow: inset 3px 0 0 var(--isk); }
#OrdersTable tr.my-order:hover td { background: color-mix(in srgb, var(--isk) 18%, transparent); }
.my-order-badge { display: inline-block; margin-bottom: 0.2rem; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; color: var(--isk); background: color-mix(in srgb, var(--isk) 18%, transparent); }
#OrdersTable tr.my-order-divider td { padding: 0.5rem 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--surface-2); }
.mine-count { margin-left: 0.4rem; padding: 0 0.4rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; color: var(--isk); background: color-mix(in srgb, var(--isk) 18%, transparent); }

/* Market and Industry tabs */
.item-tabs button { padding: .45rem 1.15rem; font-size: .92rem; }

/* Attributes tab: categories side by side, each a list of name and value */
.attr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 1rem 1.5rem; }
.attr-group-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 .4rem; padding-bottom: .3rem; border-bottom: 1px solid var(--border); }
.attr-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; margin: 0; font-size: .87rem; }
.attr-list dt { color: var(--text-2); font-weight: 400; }
.attr-list dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Skills tab: the requirement tree */
.skill-tree { list-style: none; margin: 0; padding: 0; }
.skill-tree .skill-tree { margin-left: 1.1rem; padding-left: .9rem; border-left: 1px solid var(--border); }
.skill-row { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; }
.skill-row img { border-radius: 5px; background: var(--surface-3); }
.skill-row a { color: var(--text); font-weight: 600; }
.skill-row a:hover { color: var(--accent); }
.skill-level { padding: .05rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }

/* Item page: description, collapsed to a few lines until opened */
.item-about-body { max-height: 8.5rem; overflow: hidden; position: relative; }
.item-about-body.open { max-height: none; }
.item-about-body.clipped::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3rem;
    background: linear-gradient(to bottom, transparent, var(--surface));
    pointer-events: none;
}
.item-about-toggle { margin-top: .5rem; }

/* Industry: an item's link with its view market in game icon, and adding materials to the manifest */
.ind-item { display: inline-flex; align-items: center; gap: .15rem; }
.ind-manifest { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .85rem; }

/* the item name, with icons to copy it and view its market in game */
.item-title { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .5rem; }
.item-title-icons { display: inline-flex; align-items: center; gap: .15rem; }
.item-title-icons .game-icon { padding: .25rem; border-radius: 6px; }
.item-title-icons .game-icon:hover { background: var(--surface-2); }

/* your assets of an item (popup from the industry tab) */
.asset-modal { width: min(560px, calc(100vw - 32px)); }
.asset-locations { display: grid; gap: 0.6rem; margin-top: 0.75rem; }
.asset-location { border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.75rem 0.35rem; background: var(--surface-2); }
.asset-location-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.25rem; }
.asset-stacks { font-size: 0.82rem; }
.asset-stacks td { padding-block: 0.3rem; }
.asset-stacks tr:last-child td { border-bottom: 0; }
.asset-bpc { padding: 0.05rem 0.4rem; border-radius: 6px; font-size: 0.7rem; color: var(--text-2); background: var(--surface-3); }

/* variations tab: the item's family by meta level */
.var-item { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.var-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); font-weight: 600; }
a.var-link:hover { color: var(--accent); }
.var-link img { border-radius: 6px; background: var(--surface-3); flex: none; }
.var-table tr.var-current td { background: var(--accent-wash); }
.var-this { padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.var-group { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; background: var(--surface-3); color: var(--text-2); }
/* Tech II, faction, storyline, officer and deadspace get their own colours */
.var-group-2, .var-group-53 { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.var-group-3 { background: color-mix(in srgb, var(--up) 16%, transparent); color: var(--up); }
.var-group-4, .var-group-52 { background: color-mix(in srgb, var(--isk) 18%, transparent); color: var(--isk); }
.var-group-5, .var-group-6 { background: color-mix(in srgb, var(--down) 16%, transparent); color: var(--down); }

/* fitting tab: a ship's slots as pips, then its fitting stats in cards */
.fit-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.fit-slot { padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); --slot: var(--accent); }
.fit-slot-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8rem; color: var(--text-2); }
.fit-slot-head strong { font-size: 1.15rem; color: var(--text); }
.fit-pips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0.4rem 0 0.3rem; }
.fit-pips span { width: 14px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--slot) 55%, transparent); border: 1px solid var(--slot); }
.fit-slot-high { --slot: var(--down); }
.fit-slot-medium { --slot: var(--isk); }
.fit-slot-low { --slot: var(--up); }
.fit-slot-rig, .fit-slot-subsystem { --slot: var(--muted); }
.fit-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0.6rem; }
.fit-group { padding: 0.65rem 0.8rem; border-radius: 10px; background: var(--surface-2); }
.fit-group h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 0.4rem; }
.fit-group dl { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; margin: 0; font-size: 0.85rem; }
.fit-group dt { color: var(--text-2); font-weight: 400; }
.fit-group dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* the chosen character's level in each required skill (Skills tab) */
.skill-character { width: auto; }
.skill-character .field-input { width: auto; min-width: 180px; }
.skill-summary { margin: 0 0 0.75rem; }
.skill-have { padding: .05rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.skill-have.skill-ok, .skill-summary .skill-ok { color: var(--up); }
.skill-have.skill-ok { background: color-mix(in srgb, var(--up) 16%, transparent); }
.skill-have.skill-partial { color: var(--isk); background: color-mix(in srgb, var(--isk) 18%, transparent); }
.skill-have.skill-missing { color: var(--down); background: color-mix(in srgb, var(--down) 16%, transparent); }

/* your total of each manufacturing material (from your assets); opens where they are */
.ind-owned { font-variant-numeric: tabular-nums; font-weight: 600; }
.ind-owned.ind-short { color: var(--isk); }

/* build tree (popup from the industry tab): the item, what makes it, and so on down */
.tree-modal { width: min(820px, calc(100vw - 32px)); }
.ind-tree-btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.tree-controls { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.4rem 0 0.75rem; }
.tree-controls label { font-size: 0.8rem; color: var(--text-2); }
.tree-controls .field-input { width: 130px; padding-block: 0.3rem; }
.tree-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 0.5rem; margin-bottom: 0.6rem; }
.tree-summary > div { display: flex; flex-direction: column; padding: 0.5rem 0.7rem; border-radius: 10px; background: var(--surface-2); }
.tree-summary span { font-size: 0.75rem; color: var(--muted); }
.tree-summary strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.tree-tools { margin-bottom: 0.4rem; color: var(--muted); }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { margin-left: 0.85rem; padding-left: 0.75rem; border-left: 1px solid var(--border); display: none; }
.tree li.open > ul { display: block; }
.tree-row { display: flex; align-items: center; gap: 0.45rem; padding: 0.28rem 0.25rem; border-radius: 6px; }
.tree-row:hover { background: var(--surface-2); }
.tree-row img { border-radius: 5px; background: var(--surface-3); flex: none; }
.tree-toggle { width: 1.2rem; flex: none; border: 0; background: none; color: var(--muted); cursor: pointer; transition: transform 0.15s; padding: 0; font-size: 1rem; line-height: 1; }
.tree li.open > .tree-row .tree-toggle { transform: rotate(90deg); color: var(--accent); }
.tree-leaf { width: 1.2rem; flex: none; text-align: center; color: var(--muted); }
.tree-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.2rem 0.45rem; flex-wrap: wrap; }
.tree-name a { color: var(--text); font-weight: 600; }
.tree-name a:hover { color: var(--accent); }
.tree-qty { font-variant-numeric: tabular-nums; color: var(--text-2); }
.tree-price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.tree-have { font-size: 0.75rem; white-space: nowrap; min-width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.tree-have.ind-short { color: var(--isk); }
.tree-raw td.ind-short { color: var(--isk); }
.tree-subhead { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 1.1rem 0 0.2rem; }

/* the item's bonuses (traits) under its description, as the game lists them */
.item-bonuses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0.6rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.item-bonus-group { padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--surface-2); }
.item-bonus-group h3 { font-size: 0.8rem; font-weight: 600; color: var(--text-2); margin: 0 0 0.35rem; }
.item-bonus-group h3 a { color: var(--accent); }
.item-bonus-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.86rem; color: var(--text-2); }
.item-bonus-group li strong { color: var(--up); font-variant-numeric: tabular-nums; }
.item-bonus-group li a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.item-bonus-group li a:hover { color: var(--accent); }
.order-loc-icons { display: inline-flex; align-items: center; gap: 0.1rem; margin-left: 0.3rem; vertical-align: -2px; white-space: nowrap; }

/* "From system" beside the region filter: a system to count jumps to each order from */
.orders-from { width: 11rem; }
.orders-from .field-input { padding-block: .35rem; }
@media (max-width: 575.98px) { .orders-from { width: 100%; } }