:root {
  --sidebar-bg: #1f2a3c;
  --sidebar-hover: #2a3850;
  --sidebar-active: #34476a;
  --sidebar-text: #c9d3e3;
  --accent: #2f6fed;
  --accent-dark: #2459c4;
  --bg: #f4f6f9;
  --card: #ffffff;
  --text: #1c2330;
  --muted: #6b7587;
  --border: #e1e5ec;
  --danger: #c93030;
  --radius: 8px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
a { color: var(--accent); }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 0 0 12px; }

/* Shell */
.shell { display: flex; height: 100vh; }
.sidebar {
  width: 248px; flex: none; background: var(--sidebar-bg); color: var(--sidebar-text);
  display: flex; flex-direction: column; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; color: #fff; text-decoration: none; font-weight: 600; font-size: 16px; }
.brand-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }
#nav { padding: 4px 8px 16px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; margin: 1px 0;
  border: 0; border-radius: 6px; background: none; color: var(--sidebar-text); font: inherit; text-align: left;
  text-decoration: none; cursor: pointer;
}
.nav-item:hover, .nav-sub:hover { background: var(--sidebar-hover); color: #fff; }
.nav-item.active, .nav-sub.active { background: var(--sidebar-active); color: #fff; }
.nav-item span:nth-child(2) { flex: 1; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chev { transition: transform .15s; font-size: 16px; line-height: 1; }
.nav-group.open .chev { transform: rotate(90deg); }
.nav-children { display: none; padding: 2px 0 6px; }
.nav-group.open .nav-children { display: block; }
.nav-sub { display: block; padding: 7px 10px 7px 38px; border-radius: 6px; color: var(--sidebar-text); text-decoration: none; margin: 1px 0; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 52px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 20px;
  background: var(--card); border-bottom: 1px solid var(--border);
}
.menu-toggle { display: none; border: 0; background: none; font-size: 20px; cursor: pointer; }
.crumbs { flex: 1; display: flex; gap: 6px; color: var(--muted); min-width: 0; overflow: hidden; white-space: nowrap; }
.crumb + .crumb::before { content: "/"; margin-right: 6px; color: var(--border); }
.crumb.current { color: var(--text); font-weight: 600; }
.user { display: flex; align-items: center; gap: 10px; }
.user-name { font-weight: 500; }
.page { flex: 1; overflow: auto; padding: 24px; }

/* Common */
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.page-actions { display: flex; gap: 8px; align-items: center; }
.muted { color: var(--muted); margin: 0; }
.small { font-size: 12px; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.mono { font-family: Consolas, ui-monospace, monospace; font-size: 13px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.empty { text-align: center; padding: 48px 16px; }
.status { margin: 12px 0; }
.error { color: var(--danger); min-height: 1em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px;
  border-radius: 6px; border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-dark); }
.btn-ghost { background: none; border-color: var(--border); color: var(--text); }
.btn-ghost:hover:not(:disabled) { background: var(--bg); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; }
.danger { color: var(--danger); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-read { background: #fff4d6; color: #8a6100; }
.badge-edit { background: #ddf3e4; color: #1d7a3f; }
.badge-admin { background: #e3ebfd; color: var(--accent-dark); }

.input {
  height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: #fff;
  font: inherit; color: var(--text); min-width: 0;
}
.input:focus { outline: 2px solid #b9cdf8; border-color: var(--accent); }
.input-sm { height: 30px; padding: 0 6px; font-size: 13px; }

/* Filters + tables */
.filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.results.stale { opacity: .5; }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.table-wrap.card { padding: 0; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.table th { background: #f8f9fb; font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.table tfoot td { font-weight: 700; border-bottom: 0; }
.table .num { text-align: right; white-space: nowrap; }
.row-actions { white-space: nowrap; display: flex; gap: 6px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.tile:hover { border-color: var(--accent); }
.tile-group { font-size: 12px; color: var(--muted); }
.tile-title { font-weight: 600; font-size: 15px; }

.invite { margin-bottom: 16px; }
.invite-row, .perm-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.invite-row .field:first-child { flex: 1; min-width: 240px; max-width: 360px; }
.invite-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }

/* Shipping cost adjustment */
.sca-toolbar { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; flex-wrap: wrap; }
.sca-dates { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sca-input { display: inline-flex; gap: 6px; align-items: center; }
.sca-notes { margin: -8px 0 10px; }

/* Item photos */
.ph-upload { display: grid; gap: 10px; margin: 12px 0; max-width: 640px; }
.ph-drop { border: 2px dashed var(--border); border-radius: var(--radius); padding: 22px; text-align: center; color: var(--muted); }
.ph-drop.over { border-color: var(--accent); background: #eef3fe; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.ph-card { margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ph-card img { display: block; width: 100%; height: 180px; object-fit: cover; background: #f3f4f6; }
.ph-card figcaption { padding: 8px 10px; display: grid; gap: 4px; font-size: 13px; }
.sca-toolbar input[type=search] { width: 300px; height: 30px; }
.sca-active { border-color: var(--accent); color: var(--accent); background: #eef3fe; }
.sca-panel { margin-top: 10px; display: grid; gap: 8px; }
.sca-panel-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sca-panel-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.sca-frow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sca-frow select.input-sm { min-width: 140px; }
.sca-where { width: 44px; font-size: 12px; }
.sca-between { display: inline-flex; gap: 6px; align-items: center; }
.sca-pickwrap { position: relative; display: inline-block; }
.sca-pick { width: 260px; }
.sca-check { width: 14px; color: var(--accent); visibility: hidden; }
.sca-pickitem.picked .sca-check { visibility: visible; }
.sca-pickitem.picked span:nth-child(2) { font-weight: 600; }
.sca-picklist { position: absolute; z-index: 20; top: 34px; left: 0; width: 300px; max-height: 300px; overflow: auto; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; }
.sca-pickitem { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 4px; cursor: pointer; }
.sca-pickitem:hover { background: var(--bg); }
.sca-pickitem span:nth-child(2) { flex: 1; }
.sca-colgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px; margin-top: 6px; }
.sca-summary { display: flex; gap: 22px; flex-wrap: wrap; margin: 14px 0 10px; font-size: 14px; }
.sca-up { color: #b42318; } .sca-down { color: #127a3e; }
.sca-box { max-height: calc(100vh - 330px); overflow: auto; }
.sca-box.stale { opacity: .5; }
.sca-table th { position: sticky; top: 0; z-index: 1; padding: 0; }
.sca-table td { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.sca-th { white-space: nowrap; }
.sca-sort { border: 0; background: none; font: inherit; font-weight: 600; color: inherit; padding: 9px 4px 9px 12px; cursor: pointer; }
.sca-colfilter { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 9px 8px 9px 0; font-size: 11px; opacity: .6; }
.sca-colfilter:hover { opacity: 1; color: var(--accent); }
.sca-views { max-width: 560px; }
.sca-view { display: flex; gap: 6px; align-items: center; border-bottom: 1px solid var(--border); padding: 4px 0; }
.sca-view-name { flex: 1; text-align: left; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; padding: 6px 4px; }
.sca-view-name:hover { text-decoration: underline; }
.sca-pager { display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 10px; }

/* Item number generator */
.hidden { display: none !important; }
.ig { padding-bottom: 0; }
.ig .page-header { margin-bottom: 10px; }
.ig-notes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ig-notes:empty { display: none; }
.ig-banner { padding: 5px 10px; border-radius: 6px; background: #fef3c7; color: #78350f; font-weight: 600; font-size: 13px; }
.ig-err { background: #fee2e2; color: #b42318; }
.ig-box { overflow: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); max-height: calc(100vh - 250px); }
.ig-table { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 13px; }
.ig-table th { position: sticky; top: 0; z-index: 2; background: #1f2937; color: #fff; font-weight: 600; text-align: left; padding: 7px 6px; white-space: nowrap; font-size: 12px; }
.ig-table td { border-bottom: 1px solid #eef0f3; padding: 3px; vertical-align: top; background: #fff; }
.ig-table tr.done td { background: #f8fafc; }
.ig-table td input, .ig-table td select { width: 100%; padding: 6px 7px; border: 1px solid var(--border); border-radius: 5px; font: inherit; background: #fff; }
.ig-table td input:focus { outline: 2px solid #b9cdf8; border-color: var(--accent); }
.ig-table td input:disabled { background: #f3f4f6; color: #475467; border-color: #e4e7ec; }
.ig .w-type { min-width: 100px; } .ig .w-buyer { min-width: 150px; } .ig .w-brand { min-width: 180px; } .ig .w-mpn { min-width: 140px; }
.ig .w-upc { min-width: 130px; } .ig .w-com { min-width: 160px; } .ig .w-sm { min-width: 100px; } .ig .w-cat { min-width: 170px; }
.ig .w-num { min-width: 80px; } .ig .w-comp { min-width: 300px; }
.ig .cline { display: flex; gap: 4px; margin-bottom: 4px; }
.ig .cline .ci { flex: 1; } .ig .cline .cq { width: 64px; flex: none; }
.ig tr.std .comps { display: none; } .ig tr:not(.std) .std-note { display: none; }
/* Status (with the row buttons), Item Number and Short Description stay in place while the rest scrolls sideways. */
.ig-table th:nth-child(1), .ig-table td:nth-child(1) { position: sticky; left: 0; width: 200px; min-width: 200px; max-width: 200px; z-index: 1; }
.ig-table th:nth-child(2), .ig-table td:nth-child(2) { position: sticky; left: 200px; width: 240px; min-width: 240px; max-width: 240px; z-index: 1; }
.ig-table th:nth-child(3), .ig-table td:nth-child(3) { position: sticky; left: 440px; width: 270px; min-width: 270px; max-width: 270px; z-index: 1; box-shadow: 2px 0 0 #e4e7ec; }
.ig-table th:nth-child(1), .ig-table th:nth-child(2), .ig-table th:nth-child(3) { z-index: 3; }
.ig .status { padding: 6px 7px; border-radius: 5px; font-weight: 600; font-size: 12px; white-space: normal; }
.ig .s-ready { background: #dcfce7; color: #127a3e; }
.ig .s-fix { background: #fee2e2; color: #b42318; }
.ig .s-done { background: #dbeafe; color: #1d4ed8; }
.ig .s-wait { background: #fef3c7; color: #b45309; }
.ig .s-empty { color: var(--muted); }
.ig .item { font: 600 12.5px Consolas, ui-monospace, monospace; padding: 6px 4px; word-break: break-all; }
.ig .len { display: block; font: 11px Consolas, ui-monospace, monospace; color: var(--muted); }
.ig .len.near { color: #b45309; } .ig .len.over { color: #b42318; }
.ig .desc { padding: 6px 4px; color: #344054; }
.ig .hint { font-size: 11px; color: var(--muted); padding: 1px 2px 0; }
.ig .hint.bad { color: #b42318; }
.ig .act { display: flex; gap: 4px; margin-top: 4px; }
.ig .mini { border: 1px solid var(--border); background: #fff; padding: 4px 8px; border-radius: 6px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.ig .mini:hover { border-color: var(--accent); color: var(--accent); }
.ig .del { color: var(--muted); }
.ig-footer { position: sticky; bottom: -24px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 0; margin-top: 8px; background: var(--bg); border-top: 1px solid var(--border); }
.ig-group { display: flex; gap: 6px; align-items: center; }
.ig-group .input { width: 180px; }
.ig-group select.input { width: auto; max-width: 240px; }
.ig-chk { display: flex; gap: 5px; align-items: center; white-space: nowrap; }
.msg-ok { color: #127a3e; font-weight: 600; } .msg-bad { color: #b42318; font-weight: 600; }
.ig-settings { margin-top: 16px; }
.ig-settings summary { cursor: pointer; font-weight: 600; }
.ig-settings-form { display: grid; gap: 12px; margin-top: 12px; max-width: 520px; }

/* Login */
.login-body { display: grid; place-items: center; min-height: 100vh; background: var(--sidebar-bg); }
.login-card { width: min(380px, calc(100vw - 32px)); background: var(--card); border-radius: 12px; padding: 32px; text-align: center; }
.login-brand { justify-content: center; color: var(--text); padding: 0 0 8px; }
.login-card .muted { margin-bottom: 24px; }
.btn-google { width: 100%; height: 44px; background: #fff; border-color: var(--border); color: var(--text); }
.btn-google:hover { background: var(--bg); }
#dev { display: flex; flex-direction: column; gap: 10px; }
#dev[hidden] { display: none; }
.dev-note { margin: 0; font-size: 12px; color: #8a6100; background: #fff4d6; padding: 6px; border-radius: 6px; }

@media (max-width: 800px) {
  .menu-toggle { display: block; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.mobile-open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .page { padding: 16px; }
  .user-name { display: none; }
}

/* FBA transfers */
.fba-card { margin-bottom: 16px; }
.fba-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fba-mb { margin-bottom: 12px; }
.fba-chip-row { margin: -8px 0 14px; }
.fba-chip { display: inline-block; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--muted); font-size: 12px; }
.fba-chip b { color: var(--text); font-weight: 600; }
.fba-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.fba-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fba-wide { grid-column: 1 / -1; }
.fba-grid2 .input, .fba-grid3 .input, .fba-modal .input { width: 100%; }
.fba-textarea { height: auto; padding: 8px 10px; resize: vertical; width: 100%; }
.fba-field-error { color: var(--danger); font-size: 12px; }
.fba-field-error:empty { display: none; }
.fba-radios { display: flex; flex-wrap: wrap; gap: 16px; min-height: 36px; align-items: center; }
.fba-radio, .fba-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.fba-check { color: var(--muted); white-space: nowrap; }
.fba-full { width: 100%; }
.fba-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.fba-end { justify-content: flex-end; }
.fba-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.fba-offscreen { position: fixed; left: -9999px; top: 0; }

/* Status pills */
.fba-pill { display: inline-block; white-space: nowrap; padding: 2px 10px; border-radius: 999px; border: 1px solid; font-size: 12px; font-weight: 600; }
.fba-pill-picking { background: #e6f0ff; color: #1d5fd1; border-color: #bcd3fb; }
.fba-pill-pack { background: #f1e9fe; color: #6d3fc0; border-color: #d9c6fb; }
.fba-pill-ship { background: #e0f5f2; color: #0f7a6c; border-color: #b1e3db; }
.fba-pill-awaiting { background: #fff4d6; color: #8a6100; border-color: #f4d98a; }
.fba-pill-done { background: #ddf3e4; color: #1d7a3f; border-color: #b3e0c2; }
.fba-pill-hold { background: #f0f2f5; color: var(--muted); border-color: var(--border); }
.fba-pill-cancelled { background: #fde8e8; color: #b42318; border-color: #f6c2c2; }

/* Stats, tabs, badges, filters */
.fba-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.fba-stat { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.fba-stat-dot { width: 36px; height: 36px; border-radius: 8px; flex: none; }
.fba-tone-blue { background: #e3ebfd; } .fba-tone-teal { background: #e0f5f2; } .fba-tone-amber { background: #fff4d6; } .fba-tone-green { background: #ddf3e4; }
.fba-stat-value { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.1; }
.fba-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #eef1f5; border-radius: 8px; margin: 10px 0 12px; width: fit-content; max-width: 100%; }
.fba-tab { border: 0; background: none; font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 6px; color: var(--muted); cursor: pointer; }
.fba-tab:hover { color: var(--text); }
.fba-tab.active { background: var(--card); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.fba-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fba-badges:empty { display: none; }
.fba-badge { padding: 2px 10px; border-radius: 999px; background: #eef1f5; font-size: 12px; }
.fba-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.fba-search { flex: 1 1 260px; max-width: 380px; }
.fba-selbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 8px 12px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: #f3f6fd; }

/* Tables */
.fba-table-wrap { max-height: calc(100vh - 260px); overflow: auto; }
.fba-table td { font-size: 13px; vertical-align: middle; }
.fba-table th { position: sticky; top: 0; z-index: 1; }
.fba-trunc { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fba-note { max-width: 170px; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.fba-col-check { width: 36px; }
/* Transfers & shipments: Details / Update pinned to the right edge of the table */
.fba-table .fba-sticky-actions { position: sticky; right: 0; z-index: 1; background: var(--card); box-shadow: -6px 0 8px -6px rgba(15, 23, 42, .18); }
.fba-table th.fba-sticky-actions { z-index: 2; background: #f8f9fb; }
.fba-row-actions { display: flex; gap: 6px; }
.fba-table tbody tr:nth-child(even) td.fba-sticky-actions { background: #eef2f8; }
.fba-table tbody tr:hover td.fba-sticky-actions { background: #e2e9f4; }
.fba-table tbody tr.fba-selected td.fba-sticky-actions { background: #e3ebfd; }
/* Alternating row colors (dashboard and transfers & shipments); selected rows stay highlighted. */
.fba-table tbody tr:nth-child(even) td { background: #eef2f8; }
.fba-table tbody tr:hover td { background: #e2e9f4; }
.fba-load-row:nth-of-type(odd) { background: #f3f6fa; }
.fba-selected td, .fba-table tbody tr.fba-selected:nth-child(even) td { background: #e3ebfd; }
.fba-details-btn { border-color: #9fbcf6; white-space: nowrap; }

/* Combined loads */
.fba-loads { display: grid; gap: 12px; }
.fba-load { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.fba-load-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 14px; background: #f8f9fb; border-bottom: 1px solid var(--border); }
.fba-load-total { margin-left: auto; font-weight: 700; color: var(--accent); }
.fba-load-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--border); }
.fba-load-row:first-of-type { border-top: 0; }
.fba-load-price { margin-left: auto; }
.fba-load-updated { width: 100%; }

/* Dialogs */
.fba-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, .45); display: grid; place-items: center; padding: 16px; }
.fba-modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--card); border-radius: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.fba-modal-wide { width: min(860px, 100%); }
.fba-modal-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; background: var(--card); border-bottom: 1px solid var(--border); }
.fba-modal-head h2 { margin: 0 0 2px; }
.fba-modal-body { padding: 16px 18px 18px; display: grid; gap: 16px; }
.fba-form-section { display: grid; gap: 12px; }
.fba-form-section + .fba-form-section { padding-top: 14px; border-top: 1px solid var(--border); }
.fba-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.fba-step-done { background: #e3ebfd; color: var(--accent-dark); }
.fba-btn-danger { background: var(--danger); color: #fff; }
.fba-btn-danger:hover:not(:disabled) { background: #a92626; }
.fba-btn-plain { background: none; color: var(--muted); }
.fba-btn-plain:hover { background: var(--bg); color: var(--danger); }
.fba-subbox { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.fba-subbox .strong { margin: 0; }
.fba-history { display: grid; gap: 8px; }
.fba-history-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fba-history-row .small { width: 100%; }
.fba-detail-box { border: 1px solid var(--border); border-radius: var(--radius); background: #fafbfc; padding: 2px 14px; }
.fba-detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 0; border-top: 1px solid var(--border); }
.fba-detail-row:first-child { border-top: 0; }
.fba-detail-row .strong { text-align: right; overflow-wrap: anywhere; }
.fba-preview { display: grid; gap: 4px; max-height: 200px; overflow: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: #fafbfc; }
.fba-preview-row { display: flex; justify-content: space-between; gap: 12px; }

/* Type-to-search picker */
.fba-pickwrap { position: relative; }
.fba-picklist { position: absolute; z-index: 20; top: 40px; left: 0; right: 0; max-height: 260px; overflow: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; }
.fba-pickitem { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; padding: 7px 10px; border-radius: 5px; cursor: pointer; }
.fba-pickitem:hover, .fba-pickitem.picked { background: #eef3fe; }
.fba-pick-empty { padding: 7px 10px; }

/* Toasts */
.fba-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; gap: 8px; }
.fba-toast { padding: 10px 14px; border-radius: 8px; background: #1f2a3c; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.2); font-weight: 500; max-width: 360px; }
.fba-toast-error { background: var(--danger); }

/* Dropdown lists (admin) */
.fba-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.fba-add-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fba-add-row .input { flex: 1 1 160px; height: 30px; }
.fba-bulk { display: grid; gap: 4px; margin-top: 10px; }
.fba-list { margin-top: 10px; max-height: 420px; overflow: auto; }
.fba-list-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-top: 1px solid var(--border); }
.fba-list-label { flex: 1; }

/* Admin users: FBA transfers extras */
.fba-perm-toggles { display: grid; gap: 4px; min-width: 210px; }
.fba-perm-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.fba-perm-field { margin-bottom: 12px; }

/* Pickup sheet (printable) */
.fba-sheet { display: grid; gap: 18px; color: #000; }
.fba-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 10px; border-bottom: 2px solid #000; }
.fba-sheet-head p { margin: 2px 0; }
.fba-sheet-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.fba-sheet-meta { text-align: right; }
.fba-sheet-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fba-sheet-table th, .fba-sheet-table td { border: 1px solid #8a8f98; padding: 6px 8px; text-align: left; }
.fba-sheet-table th { background: #eef0f3; }
.fba-sheet-box { border: 2px solid #000; border-radius: 6px; padding: 14px 16px; }
.fba-center { text-align: center; }
.fba-eyebrow-dark { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #555; }
.fba-sheet-dest { margin: 4px 0; font-size: 34px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.fba-sheet-big { margin: 6px 0 0; font-size: 22px; font-weight: 700; }
.fba-sheet-refs { margin-top: 12px; padding: 12px; border: 1px solid #555; border-radius: 6px; }
.fba-sheet-refs .strong { margin: 0 0 8px; letter-spacing: .05em; }
.fba-sheet-ref { margin: 4px 0 0; font-size: 17px; font-weight: 600; }

/* FBA transfers: GoFlow lookup and sync */
.fba-lookup-row { display: flex; gap: 8px; }
.fba-lookup-row .input { flex: 1; max-width: 360px; }
.fba-gf { grid-column: 1 / -1; }
.fba-gf p { margin: 0; }
.fba-gf-found { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid #b3e0c2; border-radius: var(--radius); background: #f1faf4; }
.fba-gf-found > .strong { color: #1d7a3f; }
.fba-gf-miss { padding: 10px 12px; border: 1px solid #f4d98a; border-radius: var(--radius); background: #fffaeb; color: #8a6100; }
.fba-gf-note { color: #8a6100; }
.fba-gf-tag { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #ddf3e4; color: #1d7a3f; font-size: 10px; font-weight: 700; letter-spacing: .03em; vertical-align: 1px; }
.fba-gf-items summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.fba-gf-items .table-wrap, .fba-gf-items table { margin-top: 6px; }
.fba-gf-table td, .fba-gf-table th { font-size: 12px; padding: 5px 8px; }
.fba-gf-items { max-height: 280px; overflow: auto; }
.fba-gf-status { margin-top: 3px; font-size: 11px; color: var(--muted); text-transform: capitalize; }

@media (max-width: 800px) {
  .fba-grid2, .fba-grid3 { grid-template-columns: 1fr; }
  .fba-table-wrap { max-height: none; }
}

/* FBA transfers: Ship selected — per-transfer pallets and the pickup email */
.fba-shipcards { display: grid; gap: 12px; }
.fba-shipcard { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: #fafbfc; }
.fba-shipcard-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.fba-shipcard .fba-grid2 { max-width: 640px; }
.fba-plines { display: grid; gap: 6px; }
.fba-pline { display: grid; grid-template-columns: 70px repeat(3, 70px) 100px minmax(120px, 1fr) 36px; gap: 6px; align-items: center; }
.fba-pline .input { width: 100%; }
.fba-pline-head span { font-weight: 600; }
.fba-add-pline { justify-self: start; }
.fba-load-pending { border-color: #f4d98a; }
.fba-load-pending .fba-load-head { background: #fffaeb; }
.fba-tracking { font-family: Consolas, ui-monospace, monospace; font-size: 12px; overflow-wrap: anywhere; min-width: 140px; }
.fba-cap { text-transform: capitalize; }
.fba-modal .fba-splits td, .fba-modal .fba-splits th { vertical-align: top; }
.fba-email-body { font-family: Consolas, ui-monospace, monospace; font-size: 13px; }
@media (max-width: 800px) {
  .fba-pline { grid-template-columns: repeat(3, 1fr); }
  .fba-pline-head { display: none; }
}

@media print {
  body:has(.fba-print-modal) .shell { display: none; }
  body:has(.fba-print-modal) .fba-toasts { display: none; }
  .fba-backdrop { position: static; display: block; padding: 0; background: none; }
  .fba-modal { width: auto; max-height: none; overflow: visible; box-shadow: none; border-radius: 0; }
  .fba-modal-body { padding: 0; }
  .fba-no-print { display: none !important; }
  .fba-sheet-table th { background: #eef0f3 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Loading indicator */
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.sca-box.loading { opacity: .45; pointer-events: none; }
.sca-avg b { font-weight: 700; }

/* Weight & dimensions */
.ps-controls { display: grid; gap: 10px; margin-bottom: 12px; }
.ps-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ps-row .input { width: 220px; }
.ps-grid { display: grid; grid-template-columns: 120px 140px 140px; gap: 6px 12px; align-items: center; margin: 8px 0; }

/* Resizable columns + sales trend */
.sca-table { table-layout: fixed; }
.sca-table th, .sca-table td { overflow: hidden; text-overflow: ellipsis; max-width: none; }
.sca-th { position: relative; }
.sca-resize { position: absolute; top: 0; right: -2px; width: 10px; height: 100%; cursor: col-resize; z-index: 2; touch-action: none; }
.sca-resize:hover, body.sca-resizing .sca-resize { background: rgba(47,111,237,.25); }
body.sca-resizing { cursor: col-resize; user-select: none; }
.sca-trend-up { color: #127a3e; font-weight: 600; }
.sca-trend-down { color: #b42318; font-weight: 600; }

/* Chat */
.nav-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #e5484d; color: #fff; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
.chat { display: grid; grid-template-columns: 280px 1fr; gap: 0; height: calc(100vh - 150px); min-height: 420px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.chat-people { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.chat-people .input { margin: 10px; width: calc(100% - 20px); }
.chat-list { overflow-y: auto; flex: 1; }
.chat-person { display: flex; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid #f0f2f5; background: none; text-align: left; font: inherit; cursor: pointer; }
.chat-person:hover { background: var(--bg); }
.chat-person.active { background: #eef3fe; }
.chat-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; text-transform: uppercase; }
.chat-person-main { flex: 1; min-width: 0; }
.chat-person-name { font-weight: 600; }
.chat-person-last { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-thread { display: flex; flex-direction: column; min-height: 0; }
.chat-head { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: #f7f8fa; }
.chat-msg { max-width: 70%; padding: 8px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--border); white-space: pre-wrap; word-wrap: break-word; align-self: flex-start; }
.chat-msg.mine { align-self: flex-end; background: var(--accent); color: #fff; border-color: var(--accent); }
.chat-time { font-size: 11px; color: var(--muted); margin: 0 4px 6px; align-self: flex-start; }
.chat-time.mine { align-self: flex-end; }
.chat-day { align-self: center; font-size: 12px; color: var(--muted); margin: 8px 0; }
.chat-compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.chat-compose textarea { flex: 1; resize: none; height: 44px; max-height: 140px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.chat-empty { margin: auto; color: var(--muted); }
@media (max-width: 800px) { .chat { grid-template-columns: 1fr; } .chat.has-thread .chat-people { display: none; } .chat:not(.has-thread) .chat-thread { display: none; } }
.chat-back { display: none; }
@media (max-width: 800px) { .chat-back { display: inline-flex; } }

/* Chat pop-up (floats bottom-left, next to the menu) */
.chatp { position: fixed; left: 260px; bottom: 16px; width: 360px; height: min(560px, calc(100vh - 90px)); z-index: 50;
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(16, 24, 40, .22); overflow: hidden; }
.chatp-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--sidebar-bg); color: #fff; }
.chatp-title { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatp-icon { border: 0; background: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 6px; }
.chatp-people { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chatp-search { margin: 8px; }
.chatp .chat-thread { flex: 1; min-height: 0; }
.chatp .chat-msg { max-width: 82%; }
.chatp .chat-compose { align-items: flex-end; }
.chatp .chat-compose textarea { height: 40px; }
.chatp-mic { border: 1px solid var(--border); background: #fff; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; font-size: 16px; flex: none; }
.chatp-mic.recording { background: #e5484d; color: #fff; border-color: #e5484d; }
.chatp-trash { color: #b42318; }
.chatp-trash:hover { background: #fdecec; border-color: #e5484d; }
.chatp-rec { flex: 1; color: #b42318; font-size: 13px; padding: 10px 4px; }
.chat-voice audio { height: 34px; max-width: 230px; }
.chatp-head { cursor: move; user-select: none; touch-action: none; }
.chatp.dragging { opacity: .92; }
.chatp-icon.active { opacity: 1; background: rgba(255,255,255,.15); border-radius: 6px; }
.chatp-gear { font-size: 16px; }
.chatp-settings { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.chatp-option { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.chatp-option input { margin-top: 3px; }
.chatp-settings .btn { align-self: flex-start; }
.chat-row { display: flex; align-items: center; gap: 4px; }
.chat-row.mine { flex-direction: row-reverse; }
.chatp .chat-row .chat-msg { max-width: 82%; }
.chat-reply-btn { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 2px 4px; border-radius: 6px; opacity: .35; }
.chat-row:hover .chat-reply-btn { opacity: 1; }
.chat-actions { display: flex; flex-direction: column; }
.chat-del-btn { font-size: 13px; }
.chat-reply-btn:hover { background: #e9edf3; color: var(--text, #111); }
.chat-row.flash .chat-msg { box-shadow: 0 0 0 3px #f5c542; transition: box-shadow .2s; }
.chat-quote { display: block; width: 100%; text-align: left; font: inherit; font-size: 12px; border: 0; border-left: 3px solid var(--accent); background: rgba(0,0,0,.05); border-radius: 6px; padding: 4px 8px; margin-bottom: 6px; cursor: pointer; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-quote div { overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.chat-msg.mine .chat-quote { background: rgba(255,255,255,.18); border-left-color: #fff; }
.chatp-replybar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--border); background: #f3f6fb; font-size: 12px; }
.chatp-replybar-main { flex: 1; min-width: 0; border-left: 3px solid var(--accent); padding-left: 8px; }
.chatp-replybar-main div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.chatp-replybar .chatp-icon { color: var(--muted); }
.chat-attach { padding: 4px; }
.chat-img { display: block; max-width: 220px; max-height: 220px; border-radius: 10px; cursor: zoom-in; min-width: 60px; min-height: 40px; background: #eef1f5; }
.chat-file { display: flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 4px 8px; text-align: left; max-width: 240px; }
.chat-file-icon { font-size: 22px; }
.chat-file-main { min-width: 0; }
.chat-file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread.dropping { outline: 3px dashed var(--accent); outline-offset: -6px; }
@media (max-width: 800px) { .chatp { left: 8px; right: 8px; width: auto; bottom: 8px; } }
.copy-btn { border: 0; background: none; padding: 0 3px; margin-left: 2px; font-size: 12px; line-height: 1; color: var(--muted); opacity: .45; cursor: pointer; vertical-align: baseline; border-radius: 4px; }
td:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: #e9edf3; color: var(--accent); }
.copy-btn.copied { color: #12805c; opacity: 1; }
.chatp { max-width: calc(100vw - 8px); max-height: calc(100vh - 8px); }
.chatp-grip { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none; z-index: 2;
  background: linear-gradient(135deg, transparent 0 55%, #9aa4b2 55% 62%, transparent 62% 72%, #9aa4b2 72% 79%, transparent 79%); }
@media (max-width: 800px) { .chatp-grip { display: none; } }

/* FBA transfers: shipped loads */
.fba-shipped-tag { display: inline-flex; align-items: center; gap: 6px; }