/*
 * 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.
 */

/* Row lists — the `All` item list plus the drag-sortable dimension/priority
   lists. Cards stacked vertically; each row lays its label and actions in a row. */
ul.rows {
  list-style: none;
  padding: 0;
}

ul.rows > li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  touch-action: manipulation;
}

/* Only the draggable lists get a grab cursor. */
ul.rows[data-controller="sortable"] > li {
  cursor: grab;
  user-select: none;
}

ul.rows[data-controller="sortable"] > li:active {
  cursor: grabbing;
}

/* The inline Turbo Frame that holds a row's label + actions fills the row. */
ul.rows > li turbo-frame {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

/* Push the pencil/✖️ actions to the right edge of the row. */
ul.rows > li .item-name,
ul.rows > li .dimension-name {
  margin-right: auto;
}

.row-action {
  text-decoration: none;
}

/* Tab bar shared by the All tab and each dimension tab. Pico gives each nav <li>
   1rem of vertical padding, which doubles into a big gap between rows once the
   tabs wrap. Trim it to a moderate value so wrapped rows keep some breathing room
   without the original oversized gap. */
nav.tabs ul {
  flex-wrap: wrap;
}

nav.tabs li {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Dimension heading row: name group on the left, Done button on the right, clear
   of the tab bar above and the rankings list below. Wraps so the edit form can
   grow to full width and push Done onto its own line. */
.dimension-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.dimension-heading button[type="submit"],
.dimension-heading input[type="submit"] {
  width: auto;
  margin-bottom: 0;
}

/* The dimension tab's title row: name + rename/delete actions. */
.dimension-heading turbo-frame {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: bold;
}

/* Inline dimension edit form (rename + Save/Cancel). A single horizontal row
   overflows narrow viewports, so lay it out as a full-width block: the name field
   fills the first line and Save/Cancel split the line below. Works at every width. */
ul.rows > li turbo-frame form,
.dimension-heading turbo-frame form {
  flex: 1;
}

/* While editing, grow the frame to full width so the form reaches the edges and
   the Done button wraps beneath it. */
.dimension-heading turbo-frame:has(.dimension-edit-form) {
  flex: 1 1 100%;
}

fieldset.dimension-edit-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 0;
}

fieldset.dimension-edit-form > * {
  margin-bottom: 0;
}

/* Name field fills the first line. */
fieldset.dimension-edit-form .name-field {
  flex: 1 1 12rem;
}

/* Save + Cancel share their own line, each growing to an equal half. */
fieldset.dimension-edit-form .form-actions {
  display: flex;
  gap: 0.5rem;
  flex: 1 1 100%;
}

/* Reset Pico's default submit-button margin so Save (an <input type=submit>)
   matches Cancel (an <a role=button>) in height and alignment. */
fieldset.dimension-edit-form .form-actions > * {
  flex: 1 1 0;
  margin-bottom: 0;
}

/* SortableJS applies these to the dragged / placeholder elements. */
.sortable-ghost {
  opacity: 0.4;
}

.sortable-chosen {
  border-color: var(--pico-primary);
}