/* 04-cars-members-tray.css is split by selector ownership. Keep this order stable. */
@import url("./cars-members-tray/01-shared-card-primitives.css");
@import url("./cars-members-tray/02-tray-shell.css");
@import url("./cars-members-tray/03-person-card.css");
@import url("./cars-members-tray/04-car-card.css");
@import url("./cars-members-tray/05-drag-drop.css");


/* Tray action button rule: fill-empty is secondary, auto-assign is the only emphasized action. */

/* =========================================================
   Active owner additions only.
   旧仕様の複数車割・名前変更UIのCSSは削除し、現在使う
   「車割/班割トグル」と未割り当てトレイだけに絞る。
========================================================= */

#fillEmptySeatsBtn.tray-action-btn,
.tray-inline-row .tray-action-btn--fill {
  background: var(--bg-card);
  border-color: var(--ui-hairline-quiet, var(--border-color));
  color: var(--text-main);
  box-shadow: none;
}

#fillEmptySeatsBtn.tray-action-btn i,
.tray-inline-row .tray-action-btn--fill i {
  color: var(--text-sub);
}

#shuffleAssignBtn.tray-action-btn,
.tray-inline-row .tray-action-btn--auto {
  background: var(--accent-color);
  border-color: transparent;
  color: #fff;
  box-shadow: none;
}

#shuffleAssignBtn.tray-action-btn i,
.tray-inline-row .tray-action-btn--auto i {
  color: inherit;
}

#fillEmptySeatsBtn.tray-action-btn:hover,
#fillEmptySeatsBtn.tray-action-btn:focus-visible,
.tray-inline-row .tray-action-btn--fill:hover,
.tray-inline-row .tray-action-btn--fill:focus-visible {
  background: var(--hover-bg);
  border-color: var(--ui-hairline-quiet, var(--border-color));
  color: var(--text-main);
}

#shuffleAssignBtn.tray-action-btn:hover,
#shuffleAssignBtn.tray-action-btn:focus-visible,
.tray-inline-row .tray-action-btn--auto:hover,
.tray-inline-row .tray-action-btn--auto:focus-visible {
  background: color-mix(in srgb, var(--accent-color) 88%, #111827);
  border-color: transparent;
  color: #fff;
}

/* Current car/team switcher. Rendered by data-state.js. */
.car-plan-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.car-plan-template-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 40px;
  padding: 2px;
  border-radius: var(--radius-main);
  background: color-mix(in srgb, var(--bg-card) 74%, var(--bg-body));
  box-shadow: inset 0 0 0 1px var(--ui-hairline-quiet, var(--border-color));
}

.car-plan-template-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  border: 0;
  border-radius: calc(var(--radius-main) - 4px);
  background: transparent;
  color: var(--text-sub);
  font-size: 0.8rem;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
}

.car-plan-template-chip.active {
  background: #050505;
  color: #fff;
}

[data-theme="dark"] .car-plan-template-tabs {
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .car-plan-template-chip:not(.active) {
  color: rgba(226, 232, 240, 0.68);
}

[data-theme="dark"] .car-plan-template-chip.active {
  background: rgba(226, 232, 240, 0.10);
  color: rgba(248, 250, 252, 0.96);
}

#top-area .row.g-3 {
  --bs-gutter-x: 0.8rem;
  --bs-gutter-y: 0.8rem;
}

#cars-container .col-12.col-md-6.col-lg-4 {
  display: flex;
}

#cars-container .col-12.col-md-6.col-lg-4 > .car-box {
  width: 100%;
}

/* Compact edit cards. */
#cars-container .car-box {
  padding: 8px;
  margin-bottom: 8px;
  border-radius: var(--radius-lg);
}

#cars-container .car-header {
  margin-bottom: 6px;
  padding-bottom: 6px;
  gap: 6px;
  font-size: 0.84rem;
}

#cars-container .car-name-label {
  font-size: 0.88rem;
  line-height: 1.2;
}

#cars-container .capacity-badge {
  min-height: 28px;
  padding: 0 8px;
  font-size: 0.8rem;
}

#cars-container .car-return-btn,
#cars-container .driver-menu-btn,
#cars-container .member-menu-btn {
  width: 28px;
  height: 28px;
}

#cars-container .car-layout-grid {
  gap: 4px;
}

#cars-container .driver-seat,
#cars-container .seat-slot,
#cars-container .member-card {
  min-height: 54px;
  padding: 6px 7px;
  border-radius: var(--radius-main);
}

#cars-container .driver-seat {
  min-height: 58px;
}

#cars-container .member-main-line,
#cars-container .driver-main-line {
  gap: 6px;
}

#cars-container .driver-name-disp,
#cars-container .member-name-text {
  font-size: 0.82rem;
  line-height: 1.2;
}

#cars-container .member-main-line .grade-badge,
#cars-container .driver-main-line .grade-badge {
  font-size: 0.62rem;
  padding: 2px 6px;
}

#cars-container .memo-popup {
  margin-top: 3px;
  font-size: 0.62rem;
  line-height: 1.2;
}

@media (max-width: 640px) {
  .car-plan-template-chip {
    min-height: 32px;
    padding-inline: 8px;
    font-size: 0.76rem;
  }

  #cars-container .car-box {
    padding: 7px;
    margin-bottom: 6px;
  }

  #cars-container .car-header {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  #cars-container .driver-name-disp,
  #cars-container .member-name-text {
    font-size: 0.8rem;
  }
}