/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.workshop-logbook-icon,
.workshop-logbook-icon > svg {
  display: block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

[data-record-modal-header] .workshop-logbook-icon,
[data-record-modal-header] .workshop-logbook-icon > svg {
  width: 1.75rem;
  height: 1.75rem;
}

.workshop-logbook-icon--inventory {
  background-color: currentColor;
  /* Match the generated silhouette to the solid SVGs' optical size. */
  mask: url("/assets/inventory-solid-86898891.png") center / 130% no-repeat;
}

[data-record-modal-header] .workshop-logbook-icon--vehicle {
  /* Match the cars' visible height to the other modal header icons. */
  width: 2.5rem;
  height: 2.5rem;
  background-color: currentColor;
  mask: url("/assets/vehicle-rounded-mask-a2971e9c.png") center / 110% no-repeat;
}

[data-record-modal-header] .workshop-logbook-icon--vehicle-edit {
  mask-image: url("/assets/vehicle-edit-mask-5008a2c9.png");
  /* Align the car despite the pencil extending its artwork bounds. */
  mask-position: 70% 75%;
}

.vehicle-turbo-icon {
  display: block;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  background-color: currentColor;
  mask: url("/assets/turbo-solid-e6b6c1e8.png") center / contain no-repeat;
}

/* Preserve the active step against the app's explicit dark-theme fallbacks. */
#vehicle_modal_form .vehicle-modal-step:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#vehicle_modal_form .vehicle-modal-step[aria-selected="true"] {
  color: var(--color-blue-700);
}

.dark #vehicle_modal_form .vehicle-modal-step[aria-selected="true"] {
  color: var(--color-blue-300);
}

#vehicle_modal_form .vehicle-modal-step[aria-selected="true"] .vehicle-modal-step-number {
  border-color: var(--color-blue-600);
  background-color: var(--color-blue-600);
  color: var(--color-white);
}

#vehicle_modal_form .vehicle-modal-step[data-complete="true"]:not([aria-selected="true"]) .vehicle-modal-step-number {
  border-color: var(--color-blue-500);
  background-color: var(--color-blue-50);
  color: var(--color-blue-700);
}

.dark #vehicle_modal_form .vehicle-modal-step[data-complete="true"]:not([aria-selected="true"]) .vehicle-modal-step-number {
  border-color: var(--color-blue-400);
  background-color: var(--color-blue-950);
  color: var(--color-blue-300);
}

#vehicle_modal_form .vehicle-modal-step[data-complete="true"] + .vehicle-modal-step-connector {
  background-color: var(--color-blue-600);
}

#vehicle_modal_form .vehicle-modal-field,
#vehicle_modal_form [data-controller~="vehicle-modal"] select {
  border-color: var(--color-gray-500);
}

.dark #vehicle_modal_form .vehicle-modal-field,
.dark #vehicle_modal_form [data-controller~="vehicle-modal"] select {
  border-color: var(--color-gray-400);
}

#vehicle_modal_form .vehicle-modal-field:has([aria-invalid="true"]),
#vehicle_modal_form select[aria-invalid="true"] {
  border-color: var(--color-red-500);
  --tw-ring-color: var(--color-red-500);
}

.dark #vehicle_modal_form .vehicle-modal-field:has([aria-invalid="true"]),
.dark #vehicle_modal_form select[aria-invalid="true"] {
  border-color: var(--color-red-400);
  --tw-ring-color: var(--color-red-400);
}

@media (max-width: 639px) {
  #shared-modal-dialog [data-modal-target="panel"]:has([data-controller~="vehicle-modal"]) { width: 100%; }
}
.vehicle-photo-field { container: vehicle-photo / inline-size; }
#vehicle_modal_form .vehicle-photo-dropzone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 8.625rem;
  padding: 1.25rem;
  border: 1px dashed var(--color-gray-500);
  border-radius: 0.5rem;
  background: var(--color-gray-50);
}
#vehicle_modal_form .vehicle-photo-picker { border-color: var(--color-gray-500); }
.vehicle-photo-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  color: var(--color-gray-500);
}
.vehicle-photo-preview { display: none; overflow: hidden; border-radius: 0.375rem; background: var(--color-gray-100); }
.vehicle-photo-metadata { display: none; }
#vehicle_modal_form .vehicle-photo-dropzone[data-selected="true"] {
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.625rem 1rem;
  min-height: 7.75rem;
  padding: 0.875rem;
  border-style: solid;
  background: var(--color-white);
}
[data-selected="true"] > .vehicle-photo-empty-icon,
[data-selected="true"] .vehicle-photo-empty-title { display: none; }
[data-selected="true"] > .vehicle-photo-preview { display: block; grid-row: 1 / 3; width: 9rem; height: 6rem; }
[data-selected="true"] .vehicle-photo-metadata { display: block; }
[data-selected="true"] > .vehicle-photo-details { align-self: end; }
[data-selected="true"] > .vehicle-photo-actions { grid-column: 2; align-self: start; }
.dark #vehicle_modal_form .vehicle-photo-dropzone,
.dark #vehicle_modal_form .vehicle-photo-picker { border-color: var(--color-gray-400); }
.dark #vehicle_modal_form .vehicle-photo-dropzone { background: var(--color-gray-900); }
.dark #vehicle_modal_form .vehicle-photo-dropzone[data-selected="true"] { background: var(--color-gray-800); }
.dark .vehicle-photo-preview { background: var(--color-gray-700); }
.dark .vehicle-photo-empty-icon { color: var(--color-gray-300); }
#vehicle_modal_form .vehicle-photo-dropzone[data-dragging="true"] { border-color: var(--color-gray-600); background: var(--color-gray-100); }
#vehicle_modal_form [data-dragging="true"] .vehicle-photo-drop-hint { color: var(--color-gray-900); }
.dark #vehicle_modal_form .vehicle-photo-dropzone[data-dragging="true"] { border-color: var(--color-gray-300); background: var(--color-gray-700); }
.dark #vehicle_modal_form [data-dragging="true"] .vehicle-photo-drop-hint { color: var(--color-gray-100); }
@container vehicle-photo (max-width: 480px) {
  #vehicle_modal_form .vehicle-photo-dropzone { grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; padding: 1rem; }
  .vehicle-photo-actions { grid-column: 2; }
  .vehicle-photo-empty-icon { align-self: start; }
  #vehicle_modal_form .vehicle-photo-dropzone[data-selected="true"] { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.75rem; }
  [data-selected="true"] > .vehicle-photo-preview { grid-row: 1; width: 5.5rem; height: 4.75rem; }
  [data-selected="true"] > .vehicle-photo-details { align-self: center; }
  [data-selected="true"] > .vehicle-photo-actions { grid-column: 1 / -1; }
  #vehicle_modal_form .vehicle-photo-picker { gap: 0.375rem; padding: 0.625rem 0.25rem; font-size: 0.8125rem; }
  .vehicle-photo-actions { column-gap: 0.25rem; }
  .vehicle-photo-actions > button { padding-inline: 0; font-size: 0.8125rem; }
}

@media (max-width: 359px) {
  #vehicle-panel-photo-notes > :has(> .vehicle-photo-field) { padding-inline: 0.5rem; }
  #vehicle_modal_form .vehicle-photo-dropzone[data-selected="true"] { padding-inline: 0.25rem; }
}

/* Keep page navigation and saving in the New Vehicle card's fixed action tray. */
.vehicle-modal-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.vehicle-modal-actions > [hidden] {
  display: none;
}

.vehicle-modal-next,
.vehicle-modal-save[data-primary="true"] {
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .vehicle-modal-actions {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .vehicle-modal-actions > button:first-child,
  .vehicle-modal-actions > [data-vehicle-modal-target="back"] {
    justify-self: start;
  }

  .vehicle-modal-next,
  .vehicle-modal-save[data-primary="true"] {
    grid-column: 2;
    grid-row: 1;
  }
}

.delete-icon {
  display: block;
  flex-shrink: 0;
  background-color: currentColor;
  /* Fit the artwork's opaque content while retaining its detached squares. */
  mask: url("/assets/delete-subtracting-tile-37b018ae.png") 63% 54% / 140% no-repeat;
}

.delete-icon[hidden] {
  display: none;
}

@media (forced-colors: active) {
  .workshop-logbook-icon--inventory,
  [data-record-modal-header] .workshop-logbook-icon--vehicle,
  .vehicle-turbo-icon,
  .delete-icon {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}