/* ===== Підвкладка "Відправки" (усередині "Процес") =====
 * Групи авто для спільної відправки в Україну + два блоки авто без групи
 * ("готові до відправки" / "продані"). Кольори груп — фіксована палітра з
 * 10 відтінків, застосовується через [data-color-index] (див.
 * public/shipments.js — color_index обчислюється на бекенді як
 * (id-1) % 10, ротація по черзі при створенні групи, без ручного вибору
 * кольору користувачем).
 */

.ship-groups-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin: 14px 0;
}

.ship-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel, transparent);
  overflow: hidden;
}

.ship-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.ship-group-name {
  cursor: text;
  border-bottom: 1px dashed transparent;
}
.ship-group-name:hover { border-bottom-color: currentColor; }

.ship-group-name-input {
  font-weight: 600;
  padding: 2px 6px;
  max-width: 200px;
}

.ship-group-count {
  font-weight: 400;
  font-size: 0.85em;
  opacity: 0.75;
  white-space: nowrap;
}

.ship-group-cars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}

.ship-unassigned-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 22px;
}
/* Коли блок "Продані автомобілі" порожній, він ховається повністю
   (display:none на #shipSoldBlock) — ця модифікація віддає всю ширину
   лівій колонці замість порожнього другого стовпця. */
.ship-unassigned-blocks.ship-unassigned-blocks--no-sold {
  grid-template-columns: 1fr;
}
@media (max-width: 860px) {
  .ship-unassigned-blocks { grid-template-columns: 1fr; }
}

/* Ліва колонка: "Готові до відправки" і, під ним, "Не готові до відправки". */
.ship-unassigned-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ship-block-title {
  margin: 0 0 8px;
  font-size: 1em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.ship-car-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ship-car-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--text) 3%, transparent);
  flex-wrap: wrap;
}

.ship-car-title { font-weight: 600; }
.ship-car-sub { font-size: 0.85em; opacity: 0.8; }
.ship-car-meta { font-size: 0.82em; opacity: 0.7; margin-top: 2px; }
.ship-car-parties { font-size: 0.82em; opacity: 0.7; margin-top: 2px; }

.ship-fav-btn {
  font-size: 1em;
  line-height: 1;
  filter: grayscale(1);
  opacity: 0.6;
}
.ship-fav-btn:hover { opacity: 1; }
.ship-fav-btn.active {
  filter: none;
  opacity: 1;
}
.ship-group-favorite { order: -1; }

.ship-car-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ship-car-group-select { max-width: 160px; }

.ship-btn-ship {
  white-space: nowrap;
  border-color: #3E9B5C !important;
  color: #3E9B5C !important;
}
.ship-btn-ship:hover { background: rgba(62, 155, 92, 0.12); }

.ship-empty {
  opacity: 0.65;
  font-size: 0.9em;
  padding: 6px 4px;
}

/* ---------- Палітра кольорів груп (10, ротація по id) ---------- */
.ship-group[data-color-index="0"] { border-left: 4px solid #E05B5B; } .ship-group[data-color-index="0"] .ship-group-head { background: rgba(224, 91, 91, 0.12); }
.ship-group[data-color-index="1"] { border-left: 4px solid #E0925B; } .ship-group[data-color-index="1"] .ship-group-head { background: rgba(224, 146, 91, 0.12); }
.ship-group[data-color-index="2"] { border-left: 4px solid #D9C24A; } .ship-group[data-color-index="2"] .ship-group-head { background: rgba(217, 194, 74, 0.14); }
.ship-group[data-color-index="3"] { border-left: 4px solid #9AC24A; } .ship-group[data-color-index="3"] .ship-group-head { background: rgba(154, 194, 74, 0.14); }
.ship-group[data-color-index="4"] { border-left: 4px solid #4FBF7B; } .ship-group[data-color-index="4"] .ship-group-head { background: rgba(79, 191, 123, 0.13); }
.ship-group[data-color-index="5"] { border-left: 4px solid #4AC0C0; } .ship-group[data-color-index="5"] .ship-group-head { background: rgba(74, 192, 192, 0.13); }
.ship-group[data-color-index="6"] { border-left: 4px solid #4A90D9; } .ship-group[data-color-index="6"] .ship-group-head { background: rgba(74, 144, 217, 0.13); }
.ship-group[data-color-index="7"] { border-left: 4px solid #7A6AD9; } .ship-group[data-color-index="7"] .ship-group-head { background: rgba(122, 106, 217, 0.13); }
.ship-group[data-color-index="8"] { border-left: 4px solid #B25BD9; } .ship-group[data-color-index="8"] .ship-group-head { background: rgba(178, 91, 217, 0.13); }
.ship-group[data-color-index="9"] { border-left: 4px solid #D95BA0; } .ship-group[data-color-index="9"] .ship-group-head { background: rgba(217, 91, 160, 0.13); }