/* ── Fonts ────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'NotoSans';
    src: url('/fonts/NotoSans-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal;
}
@font-face {
    font-family: 'NotoSans';
    src: url('/fonts/NotoSans-Bold.ttf') format('truetype');
    font-weight: 600 700; font-style: normal;
}
@font-face {
    font-family: 'NotoSans';
    src: url('/fonts/NotoSans-Italic.ttf') format('truetype');
    font-weight: 400; font-style: italic;
}
@font-face {
    font-family: 'NotoSansMono';
    src: url('/fonts/NotoSansMono-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal;
}
@font-face {
    font-family: 'NotoSansMono';
    src: url('/fonts/NotoSansMono-Bold.ttf') format('truetype');
    font-weight: 600 700; font-style: normal;
}

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
    --bg-base:        #080c14;
    --bg-surface:     #0d1220;
    --bg-card:        #121928;
    --bg-card2:       #172033;
    --bg-input:       #0a1018;
    --bg-hover:       #18243a;
    --border-dim:     #1a2d48;
    --border:         #1f3554;
    --border-bright:  #2a4870;
    --text-primary:   #cde0f5;
    --text-secondary: #6888aa;
    --text-muted:     #374f6a;
    --accent:         #00b8e0;
    --accent-dim:     rgba(0,184,224,.12);
    --accent-glow:    rgba(0,184,224,.35);
    --accent-hover:   #00d4ff;
    --gold:           #e8a020;
    --gold-dim:       rgba(232,160,32,.12);
    --green:          #00d888;
    --green-dim:      rgba(0,216,136,.12);
    --red:            #e04040;
    --red-dim:        rgba(224,64,64,.12);
    --radius:         8px;
    --radius-sm:      5px;
    --shadow:         0 4px 20px rgba(0,0,0,.5);
    --shadow-sm:      0 2px 8px rgba(0,0,0,.4);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 19px; scroll-behavior: smooth; height: 100%; }
body {
    font-family: 'NotoSans', system-ui, sans-serif;
    background: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
    height: 100%;
    overflow: hidden;
}
a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent-hover); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.navbar {
    position: sticky; top: 0; z-index: 200;
    height: 54px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-dim);
    box-shadow: 0 2px 12px rgba(0,0,0,.5);
    display: flex; align-items: center; gap: 1.5rem;
    padding: 0 2rem;
}
.nav-brand {
    display: flex; align-items: center; gap: .5rem;
    font-size: 1.05rem; font-weight: 600;
    color: var(--accent);
    letter-spacing: .03em; white-space: nowrap;
    filter: drop-shadow(0 0 8px var(--accent-glow));
}
.nav-brand svg { flex-shrink: 0; }
.nav-brand-logo { flex-shrink: 0; height: 32px; width: auto; display: block; }
.nav-links { display: flex; list-style: none; gap: .15rem; margin-left: auto; }
.nav-links a {
    display: block; padding: .35rem .9rem;
    color: var(--text-secondary); font-size: .875rem; font-weight: 500;
    border-radius: var(--radius-sm); transition: all .2s;
}
.nav-links a:hover { color: var(--text-primary); background: var(--accent-dim); }
.nav-links a.active {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    border-radius: 0;
}

/* Admin dropdown — top-level toggle styled like a nav link, submenu opens on click. */
.nav-admin { position: relative; }
.nav-admin-toggle {
    background: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: .875rem; font-weight: 500;
    color: var(--text-secondary);
    padding: .35rem .9rem; border-radius: var(--radius-sm);
    transition: all .2s;
    display: inline-flex; align-items: center; gap: .4rem;
}
.nav-admin-toggle:hover { color: var(--text-primary); background: var(--accent-dim); }
.nav-admin-toggle.active {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    border-radius: 0;
}
.nav-admin-caret { font-size: .75rem; opacity: .7; transition: transform .2s; }
.nav-admin.open .nav-admin-caret { transform: rotate(180deg); }

.nav-submenu {
    display: none;
    position: absolute; top: calc(100% + 4px); right: 0;
    min-width: 200px;
    list-style: none; margin: 0; padding: .25rem;
    background: var(--bg-card2);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
    z-index: 300;
}
.nav-admin.open .nav-submenu { display: block; }
.nav-submenu li { display: block; }
.nav-submenu a {
    display: block; padding: .5rem .75rem;
    color: var(--text-secondary); font-size: .875rem; font-weight: 500;
    border-radius: var(--radius-sm); white-space: nowrap;
    border-bottom: none !important;
}
.nav-submenu a:hover { color: var(--text-primary); background: var(--accent-dim); }
.nav-submenu a.active { color: var(--accent); background: var(--accent-dim); }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.container {
    max-width: 2000px; margin: 0 auto;
    padding: 1.5rem 2rem;
    height: calc(100vh - 54px);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem; gap: 1rem; flex-shrink: 0;
}
.page-title { font-size: 1.3rem; font-weight: 600; }
.two-col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
    flex: 1; min-height: 0; overflow: hidden;
}
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; flex: 1; min-height: 0; }

/* Scrollable panel columns inside two-col/three-col */
.panel-col {
    display: flex; flex-direction: column;
    min-height: 0; overflow-y: auto;
    gap: 1rem;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.panel-col > .card + .card { margin-top: 0; }
.two-col   > .card + .card { margin-top: 0; }
.card + .card { margin-top: 1rem; }
.card-header {
    padding: .85rem 1.25rem;
    background: rgba(255,255,255,.025);
    border-bottom: 1px solid var(--border-dim);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.card-title { font-size: .95rem; font-weight: 600; }
.card-subheader {
    padding: .55rem 1.25rem;
    background: rgba(255,255,255,.015);
    border-top: 1px solid var(--border-dim);
    border-bottom: 1px solid var(--border-dim);
}
.card-subtitle {
    font-size: .78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted);
}
.card-body { padding: 1.25rem; }
.card-header-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.btn-delete-header { margin-right: 40px; }

/* ── Scrollable card list ─────────────────────────────────────────────────── */
.card-scroll {
    display: flex; flex-direction: column;
    min-height: 0; flex: 1; overflow: hidden;
    position: relative;
}
.card-scroll .card-header { flex-shrink: 0; }
.card-scroll .card-scroll-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.card-scroll .table-wrap { overflow-y: auto; flex: 1; }

/* quick filter inside card headers */
.list-filter {
    flex: 1; max-width: 220px;
    padding: .3rem .6rem; font-size: .82rem;
}

/* ── Table ────────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th {
    padding: .55rem 1rem; text-align: left;
    background: var(--bg-card);
    color: var(--text-secondary); font-size: .75rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: .07em;
    box-shadow: inset 0 -1px 0 var(--border-dim); /* border-bottom lost under border-collapse:collapse + sticky */
    white-space: nowrap;
    position: sticky; top: 0; z-index: 2;
}
td {
    padding: .65rem 1rem;
    border-bottom: 1px solid rgba(26,45,72,.6);
    vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--bg-hover); }
.td-icon { width: 58px; }
.td-actions { width: 1%; white-space: nowrap; }

/* ── Icon display ─────────────────────────────────────────────────────────── */
.game-icon,
.item-icon {
    width: 45px; height: 45px; object-fit: contain;
    background: var(--bg-input); border: 1px solid var(--border-dim);
    border-radius: 5px; padding: 3px; display: block;
}
.icon-placeholder {
    width: 45px; height: 45px;
    background: var(--bg-input); border: 1px solid var(--border-dim);
    border-radius: 5px; display: inline-flex; align-items: center;
    justify-content: center; color: var(--text-muted); font-size: .65rem;
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-group { display: flex; flex-direction: column; gap: .3rem; }
.form-group.full { grid-column: 1 / -1; }
.form-checks { display: flex; gap: 1rem; align-items: center; padding: .45rem 0; }
.form-check { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; color: var(--text-primary); cursor: pointer; user-select: none; }
.form-check input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--accent); margin: 0; cursor: pointer; }
label { font-size: .8rem; font-weight: 500; color: var(--text-secondary); letter-spacing: .02em; }

textarea { resize: vertical; }

input[type=text], input[type=number], input[type=search], select, textarea {
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-primary);
    padding: .45rem .75rem; font-size: .875rem; font-family: inherit;
    width: 100%; transition: border-color .2s, box-shadow .2s; outline: none;
}
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
input:focus, select:focus, textarea:focus {
    border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim);
}
select {
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236888aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .7rem center;
    padding-right: 2rem;
}
select option { background: var(--bg-card2); }

/* ── Icon picker field ────────────────────────────────────────────────────── */
.icon-picker-field {
    display: flex; align-items: center; gap: .6rem;
}
.icon-picker-field .current-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    background: var(--bg-input); border: 1px solid var(--border-dim);
    border-radius: 5px; padding: 3px; object-fit: contain;
}
.icon-picker-field .current-icon.empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: .7rem;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .45rem .9rem; border-radius: var(--radius-sm);
    font-size: .85rem; font-weight: 500; font-family: inherit;
    cursor: pointer; border: 1px solid transparent;
    transition: all .2s; white-space: nowrap; text-decoration: none;
}
.btn-primary { background: var(--accent); color: #000; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #000; box-shadow: 0 0 14px var(--accent-glow); }
.btn-secondary { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-bright); }
.btn-danger { background: transparent; color: var(--red); border-color: rgba(224,64,64,.3); }
.btn-danger:hover { background: var(--red-dim); border-color: var(--red); color: var(--red); }
.btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-secondary); }
.btn-sm { padding: .25rem .55rem; font-size: .78rem; }
.btn-group { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert { padding: .7rem 1rem; border-radius: var(--radius-sm); font-size: .875rem; margin-bottom: 1rem; border: 1px solid transparent; }
.alert-success { background: var(--green-dim); border-color: rgba(0,216,136,.3); color: var(--green); }
.alert-danger  { background: var(--red-dim);   border-color: rgba(224,64,64,.3);  color: var(--red); }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center;
    padding: .15rem .45rem; border-radius: 3px;
    font-size: .72rem; font-weight: 600; letter-spacing: .03em;
}
.badge-accent { background: var(--accent-dim); color: var(--accent);  border: 1px solid rgba(0,184,224,.2); }
.badge-gold   { background: var(--gold-dim);   color: var(--gold);    border: 1px solid rgba(232,160,32,.2); }
.badge-green  { background: var(--green-dim);  color: var(--green);   border: 1px solid rgba(0,216,136,.2); }
.badge-raw    { background: rgba(100,130,160,.1); color: var(--text-secondary); border: 1px solid rgba(100,130,160,.2); }

/* ── Ingredient rows ──────────────────────────────────────────────────────── */
.ingredients-table { width: 100%; }
.ing-row {
    display: grid; grid-template-columns: 1fr 120px 36px;
    gap: .5rem; align-items: center;
    padding: .4rem .5rem;
    border-bottom: 1px solid var(--border-dim);
}
.ing-row:last-child { border-bottom: none; }
.ing-row:nth-child(even) { background: rgba(255,255,255,.015); }
.ingredients-wrap {
    border: 1px solid var(--border-dim); border-radius: var(--radius-sm); overflow: hidden;
}
.ingredients-add { padding: .5rem; border-top: 1px solid var(--border-dim); background: rgba(0,184,224,.04); }
.ingredients-empty { padding: 1.5rem; text-align: center; color: var(--text-muted); font-size: .85rem; }

/* ── Save button disabled ─────────────────────────────────────────────────── */
.btn[disabled], .btn.btn-saved {
    opacity: .45; pointer-events: none; cursor: default;
}

/* ── Calculator ───────────────────────────────────────────────────────────── */
.calc-layout {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0; overflow: hidden;
}
.calc-top { flex-shrink: 0; margin-bottom: 1rem; }
.calc-scroll { flex: 1; min-height: 0; overflow-y: auto; position: relative; }
.calc-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    background: var(--bg-card); border: 1px solid var(--border-dim);
    border-radius: var(--radius); padding: 1.25rem;
    margin-bottom: 1rem;
}
/* Collapse to single column once the 50/50 split gets uncomfortably narrow. */
@media (max-width: 1300px) {
    .calc-form { grid-template-columns: 1fr; }
}

/* Targets section: list of {item, amount, per, ×} rows */
.calc-targets-section { display: flex; flex-direction: column; gap: .4rem; }
.calc-targets-head {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 110px 110px 32px;
    gap: .6rem; align-items: end;
    padding-bottom: .1rem;
}
.calc-targets-head label { margin: 0; }
.calc-targets-col-amount, .calc-targets-col-unit { text-align: left; }
.calc-targets { display: flex; flex-direction: column; gap: .4rem; }
.calc-target-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 110px 110px 32px;
    gap: .6rem; align-items: center;
}
.calc-target-cell { min-width: 0; }
.calc-target-cell input, .calc-target-cell select { width: 100%; }
.calc-target-remove { display: flex; justify-content: center; align-items: center; }
.calc-target-remove-btn {
    width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.calc-add-target { align-self: flex-start; }

/* Globals: proliferator, sprayed, spray result, prolif recipes, belt, gathering, calculate.
   Flow end-to-end with a reasonable gap; wrap to additional lines when the row is too narrow. */
.calc-globals {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: start;
}
/* Size each group to its widest child (label or input/select), no wrapping. */
.calc-globals .form-group       { flex: 0 0 auto; width: max-content; }
.calc-globals .form-group label { white-space: nowrap; }
.calc-globals .form-group select,
.calc-globals .form-group input { width: 100%; }
.calc-gp-calc                   { margin-left: auto; }

/* Custom item selector */
.item-select-wrap { position: relative; }
.item-select-btn {
    width: 100%; background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-primary);
    padding: .45rem .75rem; font-size: .875rem; font-family: inherit;
    text-align: left; cursor: pointer; display: flex; align-items: center;
    justify-content: space-between; gap: .5rem;
    transition: border-color .2s, box-shadow .2s;
}
.item-select-btn:hover, .item-select-btn.open {
    border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim);
}
.item-select-btn .placeholder { color: var(--text-muted); }
.item-dropdown {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    z-index: 300; background: var(--bg-card2); border: 1px solid var(--border-bright);
    border-radius: var(--radius-sm); box-shadow: var(--shadow);
    flex-direction: column; max-height: 420px; overflow: hidden;
}
.item-dropdown.open { display: flex; }
.item-dropdown-search {
    padding: .4rem .6rem; border-bottom: 1px solid var(--border-dim);
    flex-shrink: 0;
}
.item-dropdown-list {
    overflow-y: auto; flex: 1;
}
.item-option {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .75rem; cursor: pointer; font-size: .875rem;
    transition: background .1s;
}
.item-option:hover, .item-option.focused { background: var(--bg-hover); }
.item-option.selected { background: var(--accent-dim); color: var(--accent); }
.item-option img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.item-optgroup-label {
    padding: .3rem .75rem .15rem;
    font-size: .7rem; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .07em;
    border-top: 1px solid var(--border-dim);
}
.chain-target-row td { font-weight: 600; color: var(--accent); }
.num { font-family: 'NotoSansMono', monospace; }
.num-ceil { font-family: 'NotoSansMono', monospace; font-size: .95rem; font-weight: 600; color: var(--accent); }
.num-exact { font-family: 'NotoSansMono', monospace; font-size: .8rem; color: var(--text-secondary); display: block; }

/* Buildings-ceil column: ceil count + fa-industry; when max_stacking>1,
   a second muted line shows floor(ceil/stack) + fa-layer-group (planet footprint). */
.bld-ceil-icon  { color: #566069; margin-left: .35rem; font-size: .85rem; }
.bld-ceil-line  { display: inline-flex; align-items: center; white-space: nowrap; }
.bld-ceil-stack { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; white-space: nowrap; }
.bld-ceil-stacked {
    font-family: 'NotoSansMono', monospace; font-size: .8rem;
    color: var(--text-secondary);
}
.comp-cell { display: flex; align-items: center; gap: .6rem; }
.building-cell { display: flex; align-items: center; gap: .5rem; color: var(--gold); font-size: .85rem; }
.building-cell img { width: 22px; height: 22px; object-fit: contain; }
.raw-tag { font-size: .7rem; color: var(--text-muted); letter-spacing: .05em; text-transform: uppercase; }

/* ── Icon picker modal ────────────────────────────────────────────────────── */
.picker-overlay {
    display: none; position: fixed; inset: 0; z-index: 900;
    background: rgba(4,8,16,.85); backdrop-filter: blur(4px);
    align-items: center; justify-content: center;
}
.picker-overlay.open { display: flex; }
.picker-modal {
    background: var(--bg-card2);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius);
    box-shadow: 0 12px 48px rgba(0,0,0,.8);
    width: min(680px, 95vw);
    max-height: 80vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.picker-header {
    padding: 1rem 1.25rem .75rem;
    border-bottom: 1px solid var(--border-dim);
    display: flex; align-items: center; gap: .75rem;
}
.picker-header h3 { font-size: .95rem; font-weight: 600; margin-right: auto; }
.picker-search {
    flex: 1; max-width: 260px;
    padding: .35rem .7rem; font-size: .85rem;
}
.picker-close {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 1.2rem; line-height: 1;
    padding: .2rem .4rem; border-radius: 3px; transition: color .2s;
}
.picker-close:hover { color: var(--text-primary); }
.picker-grid {
    overflow-y: auto; padding: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: .5rem;
    flex: 1;
}
.picker-item {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    padding: .5rem .25rem; border-radius: 6px;
    border: 1px solid var(--border-dim); background: var(--bg-input);
    cursor: pointer; transition: all .15s;
}
.picker-item:hover { border-color: var(--accent); background: var(--accent-dim); }
.picker-item.selected { border-color: var(--accent); background: var(--accent-dim); box-shadow: 0 0 0 1px var(--accent); }
.picker-item img { width: 44px; height: 44px; object-fit: contain; }
.picker-item span { font-size: .6rem; color: var(--text-muted); text-align: center; word-break: break-all; line-height: 1.2; }
.picker-none { padding: 2rem; text-align: center; color: var(--text-muted); grid-column: 1/-1; }

/* ── Misc ─────────────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state-icon { font-size: 2rem; opacity: .3; margin-bottom: .5rem; }
.divider { border: none; border-top: 1px solid var(--border-dim); margin: 1.5rem 0; }
.mono { font-family: 'NotoSansMono', monospace; }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-gold { color: var(--gold); }
.text-right { text-align: right; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }

.section-label { margin-bottom:.5rem;font-size:.75rem;font-weight:600;color:var(--text-secondary);letter-spacing:.06em;text-transform:uppercase; }
.td-recipe-arrow { width:1px;white-space:nowrap;text-align:center;vertical-align:middle;padding:0 .25rem; }

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast { padding:.6rem 1rem;border-radius:var(--radius-sm);font-size:.875rem;box-shadow:var(--shadow);max-width:320px;animation:fadeIn .2s; }
.toast-success { background:var(--green-dim);border:1px solid rgba(0,216,136,.4);color:var(--green); }
.toast-error { background:var(--red-dim);border:1px solid rgba(224,64,64,.4);color:var(--red); }

/* ── Type checkbox list ───────────────────────────────────────────────────── */
.type-checkbox-list { display:flex;flex-wrap:wrap;gap:.4rem; }
.type-checkbox-label { display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;padding:.25rem .6rem;border-radius:var(--radius-sm);background:var(--bg-input);border:1px solid var(--border);font-size:.82rem; }

/* ── Item picker extras ───────────────────────────────────────────────────── */
.picker-chevron { font-size:.75rem;color:var(--text-muted);flex-shrink:0; }
.item-option-icon-placeholder { width:22px;height:22px;flex-shrink:0;display:inline-block; }
.item-no-match { padding:.75rem;color:var(--text-muted);font-size:.85rem; }
.item-select-icon { width:18px;height:18px;object-fit:contain;margin-right:.35rem;vertical-align:middle; }

/* ── Item chips ───────────────────────────────────────────────────────────── */
.item-chip { display:flex;align-items:center;gap:.3rem;max-width:100%;overflow:hidden;padding:.1rem 0; }
.item-chip-icon { width:45px;height:45px;object-fit:contain;flex-shrink:0;border-radius:4px;background:var(--bg-input);border:1px solid var(--border-dim); }
.item-chip-name { color:var(--text-primary);text-decoration:none;font-size:.82rem;white-space:nowrap;flex:0 1 auto; }
.item-chip-name:hover { color:var(--accent-hover); }
.item-chip-bold { font-weight:700; }
.item-chip-amount { font-size:.78rem;font-weight:700;font-family:'NotoSansMono',monospace;color:var(--text-primary);background:rgba(255,255,255,.12);padding:.05rem .3rem;border-radius:3px;flex-shrink:0; }
.item-chip-empty { color:var(--text-muted);font-size:.8rem; }

/* ── Detail recipe list scroll ────────────────────────────────────────────── */
.detail-recipe-scroll { max-height: min(420px, 40vh); overflow-y: auto; position: relative; }

/* overflow-x: clip avoids creating a scroll container, so position:sticky on th
   is constrained by the real scroll parent (.calc-scroll / .detail-recipe-scroll) */
#calc-results .table-wrap,
.detail-recipe-scroll .table-wrap { overflow-x: clip; }

/* ── Scroll fade indicators ───────────────────────────────────────────────── */
.scroll-fade-wrap {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
}
.scroll-fade {
    position: absolute; left: 0; right: 0; height: 40px;
    pointer-events: none; opacity: 0; transition: opacity .18s ease;
    display: flex; align-items: center; justify-content: center; z-index: 4;
}
.scroll-fade i { font-size: 11px; color: var(--text-primary); }
.scroll-fade-top { top: 0; background: linear-gradient(to bottom, var(--bg-card), transparent); }
.scroll-fade-bot { bottom: 0; background: linear-gradient(to top, var(--bg-card), transparent); }
.fade-top .scroll-fade-top { opacity: 1; }
.fade-bot .scroll-fade-bot { opacity: 1; }

/* ── Scrollable edit card (fills detail panel, body scrolls) ─────────────── */
#comp-detail, #bld-detail, #recipe-detail { overflow: hidden; }
.card-edit {
    display: flex; flex-direction: column;
    flex: 1; min-height: 150px; overflow: hidden;
    position: relative;
}
.card-edit > .card-header { flex-shrink: 0; }
.card-edit .card-body { overflow-y: auto; flex: 1; min-height: 0; position: relative; }

/* ── Production Chain: sticky card-header + thead ────────────────────────── */
/* overflow:clip clips visually (keeps border-radius) but unlike overflow:hidden
   does NOT create a scroll container, so sticky children are constrained by
   the real scroll parent (.calc-scroll) instead of the card itself */
.card-chain { overflow: clip; }
.card-chain .card-header {
    position: sticky; top: 0; z-index: 3;
    background: var(--bg-card2);
}
#calc-results .card-chain th { top: 3.1rem; }
.card-chain tbody tr { cursor: pointer; }
.card-chain tbody td { vertical-align: middle; }
.chain-row-selected td { background: rgba(0,184,224,.1) !important; }
.chain-row-selected:hover td { background: rgba(0,184,224,.15) !important; }
.chain-row-placed { opacity: .5; filter: grayscale(1); }

/* Multi-output sub-rows (icons / names / rates aligned across columns) */
.chain-output-col { display: flex; flex-direction: column; gap: 6px; }
.chain-output-line { min-height: 45px; display: flex; align-items: center; }
td.td-num .chain-output-col { align-items: flex-end; }
td.td-num .chain-output-line { justify-content: flex-end; }

/* Per-recipe proliferator override column — single 45×45 icon, cycles 4 tier states */
th.td-prolif, td.td-prolif { width: 58px; padding: .35rem; vertical-align: middle; text-align: center; }
img.prolif-mark {
    width: 45px; height: 45px; object-fit: contain; display: block;
    background: var(--bg-input); border: 1px solid var(--border-dim);
    border-radius: 5px; padding: 3px; cursor: pointer;
    margin: 0 auto;
    transition: filter .15s, border-color .15s, box-shadow .15s;
}
img.prolif-mark.inactive { filter: grayscale(1) brightness(.55); }
img.prolif-mark:not(.disabled):hover { border-color: var(--accent-hover); box-shadow: 0 0 0 1px var(--accent-glow); filter: none; }
img.prolif-mark.overridden { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim); }
img.prolif-mark.overridden:not(.disabled):hover { border-color: var(--accent-hover); box-shadow: 0 0 0 1px var(--accent-glow); }
img.prolif-mark.disabled { cursor: not-allowed; filter: grayscale(1) brightness(.35); opacity: .55; }

/* Mode overlay (fa-plus = Extra Products, fa-angles-right = Speedup) */
.prolif-wrap { position: relative; display: inline-block; line-height: 0; }
.prolif-mode-overlay {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px; color: #fff;
    text-shadow: 0 0 3px rgba(0,0,0,.95), 0 0 5px rgba(0,0,0,.7);
    pointer-events: none;
}

/* Buildings group header — spans icon + exact + ceil columns */
th.td-buildings-grp { text-align: left; padding: .35rem; }

/* Belt columns — group header (colspan=2) covering: icon, combined in/out cell.
   Click the icon td to override the row's belt tier; hover the in/out td for detail tooltip. */
th.td-belts-grp { text-align: left; padding: .35rem; }
th.td-belt-icon, td.td-belt-icon { width: 60px; padding: .35rem .25rem; vertical-align: middle; text-align: center; white-space: nowrap; }
th.td-belt-io,   td.td-belt-io {
    padding: .35rem 1rem; vertical-align: middle; text-align: left; white-space: nowrap;
    width: 1px;
}
.belt-wrap {
    position: relative; display: inline-flex; align-items: center; gap: .4rem;
    line-height: 1;
}
.belt-line {
    display: flex; align-items: center; gap: .25rem; line-height: 1.3;
    justify-content: flex-end;
}
.belt-dir {
    color: #566069; margin-right: .25rem; width: 1em; text-align: center;
}
.belt-count-side {
    font-family: var(--font-mono, monospace);
    color: var(--text-primary); min-width: 3ch;
    display: inline-block; text-align: right;
}
.belt-count-side.inactive { color: var(--text-muted); }
.belt-bld-icon {
    color: #566069; margin-left: .5rem; margin-right: .25rem;
}
/* Trailing industry icon sits flush against /b. */
.belt-bld-icon-tail              { margin-right: 0; }
.belt-bld-icon-tail + .belt-bld-unit { margin-left: 0; }
.belt-bld-num {
    font-family: var(--font-mono, monospace);
    color: var(--text-primary); min-width: 3ch;
    display: inline-block; text-align: right;
}
.belt-empty { visibility: hidden; }
.belt-empty-dash {
    color: #566069;
    font-family: var(--font-mono, monospace);
    min-width: 3ch;
    display: inline-block;
    text-align: right;
}
.belt-bld-unit {
    color: #566069;
    font-family: var(--font-mono, monospace);
    margin-left: .1rem;
}
img.belt-mark {
    width: 45px; height: 45px; object-fit: contain; display: block;
    background: var(--bg-input); border: 1px solid var(--border-dim);
    border-radius: 5px; padding: 3px; cursor: pointer;
    transition: filter .15s, border-color .15s, box-shadow .15s;
}
img.belt-mark.inactive { filter: grayscale(1) brightness(.55); }
img.belt-mark:hover { border-color: var(--accent-hover); box-shadow: 0 0 0 1px var(--accent-glow); filter: none; }
img.belt-mark.overridden { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim); }
img.belt-mark.overridden:hover { border-color: var(--accent-hover); box-shadow: 0 0 0 1px var(--accent-glow); }
.belt-stack-badge {
    position: absolute; right: -4px; bottom: -4px;
    font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700;
    background: var(--accent); color: #000;
    padding: 1px 4px; border-radius: 3px; line-height: 1;
    pointer-events: none;
}

/* Belt tooltip — shown on hover of a belt cell in a recipe chain row */
.belt-tt { min-width: 340px; font-size: .85rem; }
.belt-tt-header {
    font-weight: 600; padding-bottom: .5rem; margin-bottom: .5rem;
    border-bottom: 1px solid var(--border-dim); color: var(--text-primary);
}
.belt-tt-section + .belt-tt-section {
    margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border-dim);
}
.belt-tt-section-label {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted); margin-bottom: .35rem;
}
.belt-tt-row {
    display: grid; grid-template-columns: 24px 1fr auto 1em auto auto auto;
    gap: .5rem; align-items: center; padding: 2px 0;
}
.belt-tt-icon { width: 24px; height: 24px; object-fit: contain; }
.belt-tt-name  { color: var(--text-primary); }
.belt-tt-rate  { font-family: var(--font-mono, monospace); color: var(--text-secondary); }
.belt-tt-arrow { color: var(--text-muted); text-align: center; }
.belt-tt-belts { font-family: var(--font-mono, monospace); color: var(--accent); white-space: nowrap; }
.belt-tt-bld   { font-family: var(--font-mono, monospace); color: var(--text-muted); white-space: nowrap; }

/* Belt popup option icon (uses prolif-popup shell + extras for stack badge) */
.belt-popup-icon {
    position: relative; display: inline-block; line-height: 0;
    width: 24px; height: 24px; flex-shrink: 0;
}
.belt-popup-icon img {
    width: 24px; height: 24px; object-fit: contain; display: block;
    background: var(--bg-input); border: 1px solid var(--border-dim);
    border-radius: 3px; padding: 1px;
}
.belt-popup-icon img.inactive { filter: grayscale(1) brightness(.55); }
.belt-popup-stack-badge {
    position: absolute; right: -4px; bottom: -4px;
    font-family: var(--font-mono, monospace); font-size: 9px; font-weight: 700;
    background: var(--accent); color: #000;
    padding: 0 3px; border-radius: 3px; line-height: 1.2;
    pointer-events: none;
}

/* Proliferator override popup */
.prolif-popup {
    position: fixed; z-index: 9995;
    background: var(--bg-card2); border: 1px solid var(--border-bright);
    border-radius: var(--radius-sm); box-shadow: var(--shadow);
    padding: .25rem 0; min-width: 240px;
    max-height: 350px; overflow-y: auto;
    font-size: .85rem;
}

/* Toolbar anchor wrapping the prolif/belt mark image as a clickable picker */
.picker-anchor {
    display: inline-flex; align-items: center;
    cursor: pointer;
}
.picker-anchor .prolif-mark,
.picker-anchor .belt-mark {
    cursor: pointer;
}
.prolif-mark-placeholder,
.belt-mark-placeholder {
    width: 45px; height: 45px; display: inline-block;
    background: var(--bg-input); border: 1px dashed var(--border-dim);
    border-radius: 5px;
}
.prolif-popup-option {
    display: flex; align-items: center; gap: .6rem;
    padding: .4rem .75rem; cursor: pointer;
    transition: background .1s;
    color: var(--text-primary);
}
.prolif-popup-option:hover { background: var(--bg-hover); }
.prolif-popup-option.selected { background: var(--accent-dim); color: var(--accent); }
.prolif-popup-option img {
    width: 24px; height: 24px; object-fit: contain;
    background: var(--bg-input); border: 1px solid var(--border-dim);
    border-radius: 3px; padding: 1px; flex-shrink: 0;
}
.prolif-popup-option img.inactive { filter: grayscale(1) brightness(.55); }
.prolif-popup-option i { width: 24px; text-align: center; color: var(--text-muted); }
.prolif-popup-sep { height: 1px; background: var(--border-dim); margin: .25rem 0; }
.prolif-popup-reset { color: var(--text-secondary); font-style: italic; }

/* ── Right-aligned number columns ─────────────────────────────────────────── */
th.td-num, td.td-num { text-align: right; white-space: nowrap; width: 1px; }

/* ── Item name tooltip anchor ─────────────────────────────────────────────── */
.item-tt-name { cursor: default; }
.item-tt-name:hover { color: var(--accent); }

/* ── Item Tooltip ─────────────────────────────────────────────────────────── */
.item-tooltip {
    position: fixed; z-index: 9990;
    background: var(--bg-card2);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .75rem 1rem;
    min-width: 240px; max-width: 700px;
    font-size: .82rem;
    pointer-events: none;
}
.tt-header { display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem; }
.tt-icon { width:45px;height:45px;object-fit:contain;background:var(--bg-input);border-radius:5px;padding:3px;border:1px solid var(--border-dim);flex-shrink:0; }
.tt-name { font-weight:600;font-size:.9rem;color:var(--text-primary); }
.tt-type { font-size:.75rem;color:var(--text-secondary);margin-top:.1rem; }
.tt-desc { color:var(--text-secondary);margin-bottom:.4rem;font-style:italic;font-size:.8rem; }
.tt-section { margin-top:.55rem;border-top:1px solid var(--border-dim);padding-top:.4rem; }
.tt-section-label { font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-bottom:.3rem; }
.tt-recipe { padding:.25rem 0; }
.tt-recipe + .tt-recipe { border-top:1px solid rgba(26,45,72,.5); }
.tt-raw { color:var(--text-muted);font-style:italic;margin-top:.4rem;font-size:.8rem; }

/* ── Recipe visual (icon-based, shared between tooltip and recipe picker) ─── */
.recipe-vis { display:flex;align-items:center;gap:.4rem;flex-wrap:wrap; }
.recipe-vis-group { display:flex;flex-wrap:wrap;gap:4px;align-items:center; }
.recipe-vis-item { position:relative;width:45px;height:45px;flex-shrink:0; }
.recipe-vis-item img { width:45px;height:45px;object-fit:contain;border-radius:4px;background:var(--bg-input);display:block;border:1px solid var(--border-dim); }
.recipe-vis-noicon { width:45px;height:45px;border-radius:4px;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--text-muted);border:1px solid var(--border-dim); }
.recipe-vis-amount { position:absolute;bottom:0;right:0;background:rgba(4,8,16,.85);color:var(--text-primary);font-size:.6rem;line-height:1;padding:1px 4px;border-radius:2px;font-family:'NotoSansMono',monospace;font-weight:600;pointer-events:none; }
.recipe-vis-sep { width:1px;height:34px;background:var(--border-dim);margin:0 .25rem;align-self:center;flex-shrink:0; }
/* right-align facility icons inside tooltip recipe rows */
.tt-recipe .recipe-vis .recipe-vis-sep { margin-left:auto; }

/* ── Recipe picker cards (calculator recipe preferences) ──────────────────── */
.rp-body { display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.25rem; }
.rp-item { }
.rp-item-label { font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary);margin-bottom:.35rem; }
.rp-list { display:flex;flex-direction:column;gap:.3rem; }
.rp-card { padding:.45rem .6rem;border:1px solid var(--border-dim);border-radius:var(--radius);cursor:pointer;background:var(--bg-input);transition:border-color .15s,background .15s; }
.rp-card:hover { border-color:var(--border-bright);background:var(--bg-hover); }
.rp-card.rp-selected { border-color:var(--accent) !important;background:var(--accent-dim) !important; }
.rp-label { font-size:.68rem;color:var(--text-muted);margin-top:.2rem;font-style:italic; }

/* ── Building preference cards ────────────────────────────────────────────── */
.bp-list { display:flex;flex-direction:column;gap:.3rem; }
.bp-card { padding:.4rem .6rem;border:1px solid var(--border-dim);border-radius:var(--radius);cursor:pointer;background:var(--bg-input);transition:border-color .15s,background .15s;display:flex;align-items:center;gap:.55rem; }
.bp-card:hover { border-color:var(--border-bright);background:var(--bg-hover); }
.bp-card.rp-selected { border-color:var(--accent) !important;background:var(--accent-dim) !important; }
.bp-card-icon { width:36px;height:36px;object-fit:contain;flex-shrink:0;border-radius:4px;background:var(--bg-card);border:1px solid var(--border-dim); }
.bp-card-icon-empty { width:36px;height:36px;flex-shrink:0;display:inline-block; }
.bp-card-info { display:flex;flex-direction:column;min-width:0; }
.bp-card-name { font-size:.85rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.bp-card-speed { font-size:.72rem;color:var(--text-secondary);font-family:'NotoSansMono',monospace; }

/* ── Recipe arrow cell ────────────────────────────────────────────────────── */
.recipe-arrow-cell { display:flex;flex-direction:column;align-items:center;gap:.125rem;padding:1rem .5rem 0; }
.recipe-arrow-time { font-size:.78rem;font-weight:600;font-family:'NotoSansMono',monospace;color:#ffd28e;white-space:nowrap; }
.recipe-arrow-img { width:30px;height:auto; }

/* ── Layout / page helpers ────────────────────────────────────────────────── */
.page-title-icon { margin-right:.5rem;color:var(--accent); }
.clickable-row { cursor:pointer; }
td.td-types { font-size:.8rem;color:var(--text-secondary); }
#recipe-list-wrap td { vertical-align: top; }
.td-made-in { display:flex;gap:.3rem;flex-wrap:wrap;align-items:center; }
.td-made-in img { width:32px;height:32px;object-fit:contain;border-radius:4px;background:var(--bg-input);border:1px solid var(--border-dim); }
td.td-empty { text-align:center;color:var(--text-muted);padding:2rem; }
.no-recipes-msg { padding:1rem;color:var(--text-muted);font-size:.875rem; }
.loading-p { color:var(--text-muted); }
.text-sm { font-size:.82rem; }
.form-actions { margin-top:1rem;display:flex;gap:.5rem; }
.flex-gap { display:flex;gap:.5rem;flex-wrap:wrap; }
.card-mb { margin-bottom:1.5rem; }
.card-body-prefs { display:flex;flex-wrap:wrap;gap:1rem; }
.card-header-meta { font-size:.82rem;color:var(--text-muted); }
.form-group-min { min-width:180px; }
.form-group-end { align-self:end; }
.form-group-mb { margin-bottom:1rem; }
.form-grid-mb { margin-bottom:1.25rem; }
.ing-section-mb { margin-bottom:1.25rem; }
.label-optional { color:var(--text-muted);font-weight:400; }
.checkbox-label { display:flex;align-items:center;gap:.4rem;cursor:pointer; }
.badge-ml { margin-left:.4rem; }
.ing-amount-input { width:70px;font-family:'NotoSansMono',monospace; }
.hidden { display:none !important; }

/* ── Read-only mode (non-admin clients) ──
   Hides every editing affordance. The backend rejects writes regardless,
   so this is a UX layer — buttons whose action the server would 403 are removed. */
body.read-only [id^="btn-new-"],
body.read-only [id$="-save"],
body.read-only [id$="-save-btn"],
body.read-only [id$="-new-recipe-btn"],
body.read-only .btn-delete-header {
    display: none !important;
}
/* The entire Admin dropdown (Item Types, Saved Calculations, …) is admin-only. */
body.read-only .nav-admin { display: none; }
/* No detail panel on public — rows aren't clickable. */
body.read-only .clickable-row { cursor: default; }
/* List views collapse to a single full-width column when no detail panel can open. */
body.read-only .two-col:has(> .panel-col) {
    grid-template-columns: 1fr;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
    .two-col, .three-col { grid-template-columns: 1fr; overflow-y: auto; }
    .container { padding: 1rem; }
}
@media (max-width: 540px) {
    .calc-globals .form-group { flex: 1 1 100%; width: auto; max-width: none; }
    .calc-gp-calc { margin-left: 0; }
    .calc-targets-head, .calc-target-row {
        grid-template-columns: 1fr 90px 90px 32px;
    }
    .navbar { padding: 0 1rem; }
}