/* ══ PAGE: PARTS (STOCK) ══ */

.stock-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 20px;
}
.stock-header-right {
  display: flex; align-items: center; gap: 10px;
}

/* ── Car selector ── */
.stock-car-select {
  background: #141820; border: 1px solid #1f2530;
  border-radius: 8px; padding: 8px 14px; min-width: 260px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 600; color: #dce3ed;
  cursor: pointer; outline: none;
  transition: border-color 0.15s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a8a9b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.stock-car-select:hover { border-color: #2a3040; }
.stock-car-select:focus { border-color: #d4f542; }
.stock-car-select option {
  background: #141820; color: #dce3ed;
}

/* ── Empty state ── */
.stock-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 80px 20px; text-align: center;
}
.stock-empty-icon { margin-bottom: 16px; }
.stock-empty-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; font-weight: 700; color: #5a6678;
  margin-bottom: 6px;
}
.stock-empty-sub {
  font-size: 13px; color: #3a4555; line-height: 1.6;
  max-width: 360px;
}


/* ── Setup view ── */
.stock-setup {
  background: #141820; border: 1px solid #1f2530;
  border-radius: 14px; padding: 24px;
}
.stock-setup-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 20px;
}
.stock-setup-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 700; color: #dce3ed;
  letter-spacing: 0.3px;
}
.stock-setup-sub {
  font-size: 12px; color: #5a6678; margin-top: 4px;
  max-width: 500px; line-height: 1.5;
}
.stock-setup-actions {
  display: flex; align-items: center; gap: 10px;
}

/* Car-ID toggle pill */
.stock-carid-toggle {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: #3a4555;
  background: transparent; border: 1px solid #2a3040;
  border-radius: 20px; padding: 4px 12px 4px 8px;
  cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.stock-carid-toggle:hover { border-color: #4a5565; color: #7a8a9b; }
.stock-carid-toggle.active {
  color: #d4f542; border-color: rgba(212,245,66,0.35);
  background: rgba(212,245,66,0.07);
}
.stock-carid-toggle-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2a3040; transition: background 0.15s;
  flex-shrink: 0;
}
.stock-carid-toggle.active .stock-carid-toggle-dot { background: #d4f542; }
.stock-setup-count {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; color: #5a6678;
  letter-spacing: 0.5px; text-transform: uppercase;
}

/* ── Category groups ── */
.stock-setup-list {
  display: flex; flex-direction: column; gap: 6px;
}
.stock-setup-group {
  border: 1px solid #1f2530; border-radius: 10px;
  overflow: hidden; transition: border-color 0.15s;
}
.stock-setup-group:hover { border-color: #2a3040; }

.stock-setup-cat {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; cursor: pointer;
  background: #0f1318; transition: background 0.1s;
  user-select: none;
}
.stock-setup-cat:hover { background: #13181e; }
.stock-setup-cat-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 700; color: #dce3ed;
  letter-spacing: 0.3px; text-transform: uppercase; flex: 1;
}
.stock-setup-cat-count {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; color: #3a4555;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.stock-setup-cat-arrow {
  font-size: 16px; color: #3a4555; font-weight: 700;
  transition: transform 0.2s;
}

/* ── Part rows ── */
.stock-setup-parts {
  border-top: 1px solid #1a1f28;
}
.stock-setup-part {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 42px;
  border-bottom: 1px solid #13181e;
  transition: background 0.1s;
}
.stock-setup-part:last-child { border-bottom: none; }
.stock-setup-part:hover { background: rgba(255,255,255,0.015); }
.stock-setup-part.selected { background: rgba(212,245,66,0.03); }

.stock-setup-part-info { flex: 1; }
.stock-setup-part-name {
  font-family: 'Barlow', sans-serif;
  font-size: 13px; font-weight: 500; color: #dce3ed;
}

.stock-setup-part-auto {
  display: flex; align-items: center; gap: 6px;
}
.stock-setup-auto-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #3a4555;
}
.stock-setup-auto-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700; color: #d4f542;
  letter-spacing: 0.5px;
  background: rgba(212,245,66,0.08);
  border: 1px solid rgba(212,245,66,0.15);
  border-radius: 5px; padding: 2px 8px;
}
.stock-setup-auto-input {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700; color: #d4f542;
  letter-spacing: 0.5px;
  background: rgba(212,245,66,0.08);
  border: 1px solid rgba(212,245,66,0.15);
  border-radius: 5px; padding: 2px 8px;
  outline: none; width: 140px;
  transition: border-color 0.15s, background 0.15s;
  cursor: text;
}
.stock-setup-auto-input:hover {
  border-color: rgba(212,245,66,0.3);
}
.stock-setup-auto-input:focus {
  border-color: rgba(212,245,66,0.55);
  background: rgba(212,245,66,0.13);
}

/* ── Custom parts section ── */
.stock-custom-section {
  border: 1px dashed #1f2530; border-radius: 10px;
  padding: 14px 16px; margin-top: 6px;
}
.stock-custom-section-header {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
}
.stock-custom-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700; color: #5a6678;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.stock-custom-section-sub {
  font-size: 11px; color: #3a4555;
}
.stock-custom-parts-list {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px;
}
.stock-custom-part-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 7px;
  background: rgba(255,255,255,0.02); border: 1px solid #1a1f28;
}
.stock-custom-cat-badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: #5a6678;
  background: #0f1318; border: 1px solid #1f2530;
  border-radius: 4px; padding: 1px 6px; flex-shrink: 0;
}
.stock-custom-part-name {
  font-family: 'Barlow', sans-serif;
  font-size: 13px; color: #dce3ed; flex: 1;
}
.stock-custom-remove-btn {
  background: none; border: none; color: #3a4555;
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px;
  transition: color 0.15s; flex-shrink: 0;
}
.stock-custom-remove-btn:hover { color: #e05050; }

.stock-add-custom-btn {
  background: none; border: 1px dashed #2a3040;
  border-radius: 7px; padding: 7px 14px; width: 100%;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: #3a4555;
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.stock-add-custom-btn:hover { border-color: #5a6678; color: #7a8a9b; }

.stock-custom-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 6px; padding: 10px; border-radius: 8px;
  background: #0f1318; border: 1px solid #1f2530;
}
.stock-custom-input {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 600; color: #dce3ed;
  background: #141820; border: 1px solid #2a3040;
  border-radius: 6px; padding: 5px 10px; outline: none;
  transition: border-color 0.15s;
}
.stock-custom-input:focus { border-color: #4a5565; }
.stock-custom-name-input { flex: 1; min-width: 140px; }
.stock-custom-add-btn { padding: 5px 16px; font-size: 12px; }
.stock-custom-cancel-btn {
  background: none; border: 1px solid #2a3040;
  border-radius: 6px; padding: 5px 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 600; color: #5a6678;
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.stock-custom-cancel-btn:hover { border-color: #4a5565; color: #7a8a9b; }

/* ── Checkbox ── */
.stock-checkbox-wrap {
  display: flex; align-items: center; justify-content: center;
  position: relative; cursor: pointer;
  width: 18px; height: 18px; flex-shrink: 0;
}
.stock-checkbox-wrap input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.stock-checkmark {
  width: 16px; height: 16px;
  border: 2px solid #2a3040; border-radius: 4px;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.stock-checkbox-wrap input:checked + .stock-checkmark {
  background: #d4f542; border-color: #d4f542;
}
.stock-checkbox-wrap input:checked + .stock-checkmark::after {
  content: '';
  width: 5px; height: 9px;
  border: solid #000; border-width: 0 2px 2px 0;
  transform: rotate(45deg); margin-top: -2px;
}
.stock-checkbox-wrap input:indeterminate + .stock-checkmark {
  background: rgba(212,245,66,0.3); border-color: #d4f542;
}
.stock-checkbox-wrap input:indeterminate + .stock-checkmark::after {
  content: '';
  width: 8px; height: 2px;
  background: #000; border-radius: 1px;
}
.stock-checkbox-wrap:hover .stock-checkmark {
  border-color: #5a6678;
}

/* ── Parts hierarchy (after setup) ── */
.stock-cat-block {
  margin-bottom: 6px;
  border: 1px solid #1f2530; border-radius: 10px;
  overflow: hidden;
}
.stock-cat-block-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: #0f1318;
}
.stock-cat-block-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: #5a6678; flex: 1;
}
.stock-cat-block-count {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; color: #2a3040;
  letter-spacing: 0.5px;
}

/* Component row */
.stock-comp-row {
  border-top: 1px solid #141820;
}
.stock-comp-main {
  display: flex; align-items: center;
  padding: 9px 16px 9px 24px; gap: 10px;
}
.stock-comp-label { flex: 1; display: flex; align-items: baseline; gap: 10px; }
.stock-comp-name {
  font-family: 'Barlow', sans-serif;
  font-size: 13px; font-weight: 500; color: #dce3ed;
}
.stock-comp-tpl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; color: #3a4555;
  letter-spacing: 0.4px;
}
.stock-comp-add-btn {
  background: none; border: 1px solid #2a3040;
  border-radius: 6px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #3a4555; flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.stock-comp-add-btn .material-symbols-outlined { font-size: 16px; }
.stock-comp-add-btn:hover {
  border-color: #d4f542; color: #d4f542;
  background: rgba(212,245,66,0.07);
}

/* Instance rows */
.stock-inst-list {
  display: flex; flex-direction: column;
}
.stock-inst-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 40px;
  border-top: 1px solid #0f1318;
  transition: background 0.1s;
}
.stock-inst-item:hover { background: rgba(255,255,255,0.015); }
.stock-inst-item:hover .stock-inst-remove { opacity: 1; }
.stock-inst-id {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; color: #d4f542;
  letter-spacing: 0.5px;
  background: rgba(212,245,66,0.08);
  border: 1px solid rgba(212,245,66,0.15);
  border-radius: 4px; padding: 1px 7px; flex-shrink: 0;
}
.stock-inst-date {
  font-size: 11px; color: #3a4555; flex: 1;
  font-family: 'Barlow Condensed', sans-serif;
}
.stock-inst-remove {
  background: none; border: none; color: #3a4555;
  font-size: 14px; line-height: 1; cursor: pointer;
  opacity: 0; padding: 0 2px;
  transition: color 0.15s, opacity 0.15s;
}
.stock-inst-remove:hover { color: #e05050; }

/* ── Light mode ── */
body.light-mode .stock-car-select { background: #ffffff; border-color: #dde2ec; color: #1a2030; }
body.light-mode .stock-car-select:hover { border-color: #b0b8c4; }
body.light-mode .stock-car-select:focus { border-color: #5a7a00; }
body.light-mode .stock-car-select option { background: #ffffff; color: #1a2030; }

body.light-mode .stock-empty-title { color: #8899aa; }
body.light-mode .stock-empty-sub { color: #b0b8c4; }

body.light-mode .stock-setup { background: #ffffff; border-color: #dde2ec; }
body.light-mode .stock-setup-title { color: #1a2030; }
body.light-mode .stock-setup-sub { color: #8899aa; }
body.light-mode .stock-setup-count { color: #8899aa; }
body.light-mode .stock-carid-toggle { color: #b0b8c4; border-color: #dde2ec; }
body.light-mode .stock-carid-toggle:hover { border-color: #b0b8c4; color: #8899aa; }
body.light-mode .stock-carid-toggle.active { color: #5a7a00; border-color: rgba(90,122,0,0.35); background: rgba(90,122,0,0.07); }
body.light-mode .stock-carid-toggle-dot { background: #dde2ec; }
body.light-mode .stock-carid-toggle.active .stock-carid-toggle-dot { background: #5a7a00; }
body.light-mode .stock-setup-group { border-color: #dde2ec; }
body.light-mode .stock-setup-group:hover { border-color: #b0b8c4; }
body.light-mode .stock-setup-cat { background: #f8f9fc; }
body.light-mode .stock-setup-cat:hover { background: #f0f3f8; }
body.light-mode .stock-setup-cat-name { color: #1a2030; }
body.light-mode .stock-setup-cat-count { color: #b0b8c4; }
body.light-mode .stock-setup-cat-arrow { color: #b0b8c4; }
body.light-mode .stock-setup-parts { border-top-color: #eef0f5; }
body.light-mode .stock-setup-part { border-bottom-color: #f0f3f8; }
body.light-mode .stock-setup-part:hover { background: rgba(0,0,0,0.015); }
body.light-mode .stock-setup-part.selected { background: rgba(90,122,0,0.04); }
body.light-mode .stock-setup-part-name { color: #1a2030; }
body.light-mode .stock-setup-auto-label { color: #b0b8c4; }
body.light-mode .stock-setup-auto-name { color: #5a7a00; background: rgba(90,122,0,0.08); border-color: rgba(90,122,0,0.2); }
body.light-mode .stock-setup-auto-input { color: #5a7a00; background: rgba(90,122,0,0.08); border-color: rgba(90,122,0,0.2); }
body.light-mode .stock-setup-auto-input:hover { border-color: rgba(90,122,0,0.4); }
body.light-mode .stock-setup-auto-input:focus { border-color: rgba(90,122,0,0.6); background: rgba(90,122,0,0.12); }
body.light-mode .stock-custom-section { border-color: #dde2ec; }
body.light-mode .stock-custom-section-title { color: #8899aa; }
body.light-mode .stock-custom-section-sub { color: #b0b8c4; }
body.light-mode .stock-custom-part-row { background: rgba(0,0,0,0.02); border-color: #eef0f5; }
body.light-mode .stock-custom-cat-badge { color: #8899aa; background: #f8f9fc; border-color: #dde2ec; }
body.light-mode .stock-custom-part-name { color: #1a2030; }
body.light-mode .stock-add-custom-btn { border-color: #dde2ec; color: #b0b8c4; }
body.light-mode .stock-add-custom-btn:hover { border-color: #8899aa; color: #5a6678; }
body.light-mode .stock-custom-form { background: #f8f9fc; border-color: #dde2ec; }
body.light-mode .stock-custom-input { color: #1a2030; background: #ffffff; border-color: #dde2ec; }
body.light-mode .stock-custom-input:focus { border-color: #8899aa; }
body.light-mode .stock-custom-cancel-btn { border-color: #dde2ec; color: #8899aa; }
body.light-mode .stock-checkmark { border-color: #d0d5e0; }
body.light-mode .stock-checkbox-wrap input:checked + .stock-checkmark { background: #5a7a00; border-color: #5a7a00; }
body.light-mode .stock-checkbox-wrap input:checked + .stock-checkmark::after { border-color: #fff; }
body.light-mode .stock-checkbox-wrap input:indeterminate + .stock-checkmark { background: rgba(90,122,0,0.3); border-color: #5a7a00; }
body.light-mode .stock-checkbox-wrap input:indeterminate + .stock-checkmark::after { background: #fff; }
body.light-mode .stock-checkbox-wrap:hover .stock-checkmark { border-color: #8899aa; }

body.light-mode .stock-cat-block { border-color: #dde2ec; }
body.light-mode .stock-cat-block-header { background: #f8f9fc; }
body.light-mode .stock-cat-block-name { color: #8899aa; }
body.light-mode .stock-cat-block-count { color: #b0b8c4; }
body.light-mode .stock-comp-row { border-top-color: #eef0f5; }
body.light-mode .stock-comp-name { color: #1a2030; }
body.light-mode .stock-comp-tpl { color: #b0b8c4; }
body.light-mode .stock-comp-add-btn { border-color: #dde2ec; color: #b0b8c4; }
body.light-mode .stock-comp-add-btn:hover { border-color: #5a7a00; color: #5a7a00; background: rgba(90,122,0,0.07); }
body.light-mode .stock-inst-item { border-top-color: #f8f9fc; }
body.light-mode .stock-inst-item:hover { background: rgba(0,0,0,0.015); }
body.light-mode .stock-inst-id { color: #5a7a00; background: rgba(90,122,0,0.08); border-color: rgba(90,122,0,0.2); }
body.light-mode .stock-inst-date { color: #b0b8c4; }