/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --bg:       #0d0f14;
  --bg2:      #13161e;
  --bg3:      #1a1e2a;
  --bg4:      #1f2433;
  --bd:       rgba(100,120,160,.18);
  --bd2:      rgba(100,120,160,.30);
  --text:     #d4dae8;
  --text2:    #8892a8;
  --text3:    #4e5870;
  --gold:     #c8a84b;
  --blue:     #4a9eff;
  --green:    #4caf72;
  --amber:    #e8a030;
  --red:      #e05050;
}

/* ── Base ──────────────────────────────────────────────────── */
html { font-size: 14px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: var(--text); font-weight: 600; }

/* ── Header ────────────────────────────────────────────────── */
.site-header {
  background: var(--bg2);
  border-bottom: 1px solid var(--bd);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.header-brand   { display: flex; align-items: center; gap: .75rem; }
.header-icon    { font-size: 28px; color: var(--gold); line-height: 1; }
.header-title   { font-size: 17px; font-weight: 600; letter-spacing: .02em; }
.header-sub     { font-size: 12px; color: var(--text2); }
.header-user    { display: flex; align-items: center; gap: .75rem; }
.char-pill {
  font-size: 13px;
  color: var(--gold);
  background: rgba(200,168,75,.1);
  border: 1px solid rgba(200,168,75,.25);
  border-radius: 20px;
  padding: 3px 12px;
}
.btn-sm {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--bd2);
  border-radius: 4px;
  color: var(--text2);
  background: transparent;
  cursor: pointer;
  transition: .15s;
  text-decoration: none;
}
.btn-sm:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }

/* ── Container ─────────────────────────────────────────────── */
.container { max-width: 1440px; margin: 0 auto; padding: 1.5rem; }

/* ── Login ─────────────────────────────────────────────────── */
.login-wrap  { display: flex; justify-content: center; align-items: center; min-height: 70vh; }
.login-card  {
  background: var(--bg2);
  border: 1px solid var(--bd2);
  border-radius: 14px;
  padding: 2.5rem 2.25rem;
  max-width: 460px;
  width: 100%;
  text-align: center;
}
.login-corp-icon { font-size: 52px; color: var(--gold); margin-bottom: 1rem; line-height: 1; }
.login-title     { font-size: 22px; font-weight: 600; margin-bottom: .75rem; }
.login-desc      { font-size: 14px; color: var(--text2); line-height: 1.7; margin-bottom: 1.75rem; }
.btn-login {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #162d54;
  border: 1px solid #2a5aa0;
  border-radius: 7px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 11px 24px;
  cursor: pointer;
  transition: .15s;
  text-decoration: none;
}
.btn-login:hover { background: #1e3f7a; border-color: var(--blue); text-decoration: none; }
.login-scopes {
  margin-top: 1.25rem;
  font-size: 12px;
  color: var(--text3);
  background: var(--bg3);
  border-radius: 6px;
  padding: 10px 14px;
  text-align: left;
  line-height: 1.8;
}
.login-scopes strong { color: var(--text2); }
.login-note   { margin-top: 1rem; font-size: 12px; color: var(--text3); line-height: 1.6; }

/* ── Stats bar ─────────────────────────────────────────────── */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 1.25rem;
}
.stat-card   { background: var(--bg2); border: 1px solid var(--bd); border-radius: 8px; padding: .75rem 1rem; }
.stat-label  { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.stat-value  { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Controls ──────────────────────────────────────────────── */
.controls-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
}
.search-input {
  background: var(--bg2);
  border: 1px solid var(--bd2);
  border-radius: 5px;
  color: var(--text);
  font-size: 13px;
  padding: 6px 10px;
  width: 220px;
  outline: none;
  transition: border-color .15s;
}
.search-input:focus { border-color: var(--blue); }
.select-ctrl {
  background: var(--bg2);
  border: 1px solid var(--bd2);
  border-radius: 5px;
  color: var(--text);
  font-size: 13px;
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
}
.select-ctrl:focus { border-color: var(--blue); }
.shown-badge {
  font-size: 12px;
  color: var(--text2);
  background: var(--bg3);
  border: 1px solid var(--bd);
  border-radius: 4px;
  padding: 4px 10px;
}
.btn-refresh {
  background: var(--bg3);
  border: 1px solid var(--bd2);
  border-radius: 5px;
  color: var(--text2);
  font-size: 13px;
  padding: 6px 12px;
  cursor: pointer;
  transition: .15s;
  margin-left: auto;
}
.btn-refresh:hover    { border-color: var(--blue); color: var(--blue); }
.btn-refresh:disabled { opacity: .45; cursor: default; }

/* ── Table ─────────────────────────────────────────────────── */
.table-wrap { border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; overflow-x: auto; }
.contracts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 920px;
}
.contracts-table th {
  background: var(--bg3);
  color: var(--text2);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--bd);
  white-space: nowrap;
}
.contracts-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--bd);
  vertical-align: middle;
}
.contracts-table tr:last-child td { border-bottom: none; }
.contracts-table tbody tr:hover td { background: var(--bg3); }

.item-sub  { font-size: 11px; color: var(--text3); margin-top: 2px; }
.loc-cell  { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 145px; }
.price-cell{ text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--gold); }
.vol-cell  { text-align: right; font-size: 12px; color: var(--text2); }
.date-cell { font-size: 12px; color: var(--text2); }
.muted     { color: var(--text3); }

/* ── Audience badges ───────────────────────────────────────── */
.aud-badge      { display:inline-block; font-size:11px; font-weight:500; padding:2px 8px; border-radius:4px; }
.aud-corp       { background:rgba(74,158,255,.13); color:#6abaff; border:1px solid rgba(74,158,255,.28); }
.aud-alliance   { background:rgba(76,175,114,.13); color:#5fd68a; border:1px solid rgba(76,175,114,.28); }

/* ── Type badges ───────────────────────────────────────────── */
.type-badge          { display:inline-block; font-size:11px; padding:2px 7px; border-radius:4px; font-weight:500; }
.type-item_exchange  { background:rgba(74,158,255,.12); color:#6abaff; border:1px solid rgba(74,158,255,.22); }
.type-auction        { background:rgba(232,160,48,.12);  color:var(--amber); border:1px solid rgba(232,160,48,.22); }
.type-courier        { background:rgba(76,175,114,.12);  color:var(--green); border:1px solid rgba(76,175,114,.22); }
.type-loan           { background:rgba(224,80,80,.12);   color:var(--red);   border:1px solid rgba(224,80,80,.22); }
.type-unknown        { background:var(--bg4); color:var(--text3); border:1px solid var(--bd); }

/* ── Status labels ─────────────────────────────────────────── */
.status-lbl                  { font-size:12px; }
.status-outstanding          { color:var(--blue); }
.status-in_progress          { color:var(--amber); font-weight:600; }
.status-finished,
.status-finished_issuer,
.status-finished_contractor  { color:var(--green); }
.status-deleted,
.status-failed,
.status-reversed             { color:var(--red); }

/* ── Expiry labels ─────────────────────────────────────────── */
.exp-lbl    { font-size:12px; }
.exp-ok     { color:var(--text2); }
.exp-soon   { color:var(--amber); font-weight:500; }
.exp-urgent { color:var(--red);   font-weight:600; }
.exp-expired{ color:var(--text3); }

/* ── Table messages ────────────────────────────────────────── */
.msg-cell    { text-align:center; padding:3rem; font-size:14px; color:var(--text2); }
.loading-msg .spinner { display:inline-block; animation:spin 1s linear infinite; font-size:20px; margin-right:8px; }
@keyframes spin { to { transform:rotate(360deg); } }
.error-msg   { color:var(--red); }
.empty-msg   { color:var(--text3); }

/* ── Table footer ──────────────────────────────────────────── */
.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: .5rem;
  font-size: 11px;
  color: var(--text3);
}
.table-footer a { color: var(--text3); }
.table-footer a:hover { color: var(--blue); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 680px) {
  .container      { padding: 1rem; }
  .header-inner   { padding: .75rem 1rem; }
  .search-input   { width: 100%; }
  .stats-bar      { grid-template-columns: repeat(3, 1fr); }
  .btn-refresh    { margin-left: 0; }
}

/* ── Table expand column ───────────────────────────────────── */
.table-hint {
  font-size: 12px;
  color: var(--text3);
  margin-bottom: .5rem;
  padding-left: 2px;
}
.expand-cell  { width: 26px; padding: 8px 4px 8px 8px !important; }
.expand-btn   { cursor: pointer; color: var(--text3); font-size: 13px; transition: color .15s; user-select: none; }
.expand-btn.expanded { color: var(--blue); }
.expand-na    { display: inline-block; width: 13px; }
.expandable   { cursor: pointer; }
.expandable:hover td { background: var(--bg3) !important; }
.row-expanded td { background: var(--bg3) !important; border-bottom: none !important; }

/* ── Items panel ───────────────────────────────────────────── */
.items-row td  { padding: 0 !important; border-bottom: 1px solid var(--bd) !important; }
.items-panel   {
  background: var(--bg4);
  border-top: 1px solid var(--bd2);
  padding: 1rem 1.25rem 1.25rem;
}
.items-panel.loading-items {
  color: var(--text2);
  font-size: 13px;
  padding: 1rem 1.5rem;
}
.items-empty { font-size: 13px; color: var(--text3); }

.items-columns {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.items-section { flex: 1 1 300px; min-width: 260px; }
.items-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .6rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--bd2);
}
.label-offering   { color: var(--green); border-color: rgba(76,175,114,.35); }
.label-requesting { color: var(--amber); border-color: rgba(232,160,48,.35); }

.items-subsection-label {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: .6rem 0 .35rem;
}

/* ── Item grids ────────────────────────────────────────────── */
.items-grid  { display: flex; flex-direction: column; gap: 5px; }

.item-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 6px;
  padding: 7px 10px;
  transition: border-color .15s;
}
.item-card:hover { border-color: var(--bd2); }
.ship-card  { border-color: rgba(74,158,255,.20); }
.ship-card:hover { border-color: rgba(74,158,255,.40); }

.item-icon   { font-size: 18px; line-height: 1; flex-shrink: 0; }
.ship-icon   { font-size: 22px; }

.item-info   { flex: 1; min-width: 0; }
.item-name   {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ship-card .item-name { color: #6abaff; }

.item-meta   { font-size: 11px; color: var(--text3); margin-top: 2px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.item-cat    { color: var(--text3); }

.item-qty    { font-size: 14px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 2rem; text-align: right; }

/* ── Item tags ─────────────────────────────────────────────── */
.item-tag       { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; letter-spacing: .04em; }
.tag-fitted     { background: rgba(74,158,255,.15); color: #6abaff;     border: 1px solid rgba(74,158,255,.30); }
.tag-repackaged { background: rgba(76,175,114,.15); color: var(--green); border: 1px solid rgba(76,175,114,.30); }
.tag-bpc        { background: rgba(200,168,75,.15);  color: var(--gold);  border: 1px solid rgba(200,168,75,.30); }
.tag-bpo        { background: rgba(232,160,48,.15);  color: var(--amber); border: 1px solid rgba(232,160,48,.30); }

/* ── Advanced filter panel ─────────────────────────────────── */
.adv-panel {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.adv-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .6rem 1rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.adv-header:hover { background: var(--bg3); }
.adv-title  { font-size: 13px; font-weight: 500; color: var(--text2); }
.adv-active-badge {
  font-size: 11px;
  background: rgba(74,158,255,.15);
  color: var(--blue);
  border: 1px solid rgba(74,158,255,.30);
  border-radius: 10px;
  padding: 1px 8px;
}
.adv-body   { padding: .75rem 1rem 1rem; border-top: 1px solid var(--bd); }

.adv-section { margin-bottom: 1rem; }
.adv-section:last-of-type { margin-bottom: 0; }
.adv-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .6rem;
}
.adv-row  { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.adv-field { display: flex; flex-direction: column; gap: 4px; }
.adv-field-sm   { min-width: 150px; }
.adv-field-auto { flex: 0 0 auto; }
.adv-label {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.adv-input {
  background: var(--bg3);
  border: 1px solid var(--bd2);
  border-radius: 5px;
  color: var(--text);
  font-size: 13px;
  padding: 6px 10px;
  outline: none;
  transition: border-color .15s;
  min-width: 200px;
}
.adv-input:focus { border-color: var(--blue); }
.adv-input-num  { min-width: 80px; width: 80px; }
.adv-select-wide { min-width: 200px; }
.adv-resolving  { font-size: 12px; color: var(--text3); }

.adv-toggle-btn {
  background: var(--bg3);
  border: 1px solid var(--bd2);
  border-radius: 5px;
  color: var(--text2);
  font-size: 13px;
  padding: 6px 12px;
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
}
.adv-toggle-btn:hover        { border-color: var(--blue); color: var(--blue); }
.adv-toggle-btn.adv-toggle-active {
  background: rgba(74,158,255,.15);
  border-color: rgba(74,158,255,.50);
  color: var(--blue);
  font-weight: 500;
}

.adv-footer { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--bd); }
.adv-clear-btn {
  background: transparent;
  border: 1px solid var(--bd2);
  border-radius: 5px;
  color: var(--text3);
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  transition: .15s;
}
.adv-clear-btn:hover { border-color: var(--red); color: var(--red); }

/* ── Scan progress bar ─────────────────────────────────────── */
.scan-progress {
  margin-top: .75rem;
  background: var(--bg3);
  border: 1px solid var(--bd);
  border-radius: 6px;
  padding: .6rem .75rem;
}
.scan-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.scan-label { font-size: 12px; color: var(--text2); }
.scan-count { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
.scan-bar-bg {
  height: 5px;
  background: var(--bg4);
  border-radius: 3px;
  overflow: hidden;
}
.scan-bar {
  height: 5px;
  background: var(--blue);
  border-radius: 3px;
  transition: width .3s ease;
}
.scan-note { font-size: 11px; color: var(--text3); margin-top: 5px; }

/* ── Ship summary pills in table rows ──────────────────────── */
.ship-summary { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.ship-pill {
  font-size: 11px;
  background: rgba(74,158,255,.12);
  color: #6abaff;
  border: 1px solid rgba(74,158,255,.25);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
.ship-pill-more {
  background: var(--bg4);
  color: var(--text3);
  border-color: var(--bd);
}