/* ---------- settings#show: the admin control area ---------- */

.settings-admin-badge {
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* One card per group, two by two (one column on narrow screens, see the media query below).
   align-items: start keeps a one-row card short instead of stretching it to its neighbour */
.settings-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-5) var(--space-4);
}

/* Small uppercase label above each card, like the chat sidebar's section titles */
.settings-group__title {
  margin: 0 0 var(--space-2) var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
}

/* The rows, split by lines. overflow: hidden keeps the hover background inside the rounded corners */
.settings-group__list {
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;

  li + li {
    border-top: var(--border);
  }
}

/* ---------- One row: icon · title + description · arrow (or "Coming soon") ---------- */

.settings-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: inherit;
  transition: background var(--duration-fast) var(--ease-out);

  &:hover {
    background: var(--color-surface-hover);
    color: inherit;
    text-decoration: none;
  }

  /* The arrow slides a little on hover, hinting the row opens a page */
  &:hover .settings-item__arrow {
    color: var(--color-primary);
    transform: translateX(2px);
  }
}

.settings-item__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-subtle);
  color: var(--color-primary);

  svg {
    width: 1.125rem;
    height: 1.125rem;
  }
}

/* min-width: 0 lets the description shrink and get its "…" */
.settings-item__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.settings-item__title {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.settings-item__description {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.settings-item__arrow {
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--color-text-subtle);
  transition:
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.settings-item__soon {
  flex-shrink: 0;
}

/* Not built yet: muted, so the working rows stand out */
.settings-item--soon {
  .settings-item__icon {
    background: var(--color-surface-sunken);
    color: var(--color-text-subtle);
  }

  .settings-item__title {
    color: var(--color-text-muted);
  }
}

@media (max-width: 48rem) {
  .settings-groups {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- enterprises#show & edit: invoicing ---------- */

.enterprise-invoicing {
  margin-top: var(--space-4);
}

/* [s] Store invoice code · [y] Year … under the schema field */
.schema-codes {
  margin-top: var(--space-2);
}

.schema-codes__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-1) var(--space-4);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);

  > div {
    display: flex;
    gap: var(--space-2);
  }

  code {
    color: var(--color-text);
  }
}

/* ---------- stores#index: one card per store ---------- */

.stores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-4);
}

/* overflow: hidden keeps the photo inside the card's rounded corners */
.store-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.store-card__media {
  aspect-ratio: 2 / 1;
  background: var(--color-primary-subtle);
  border-bottom: var(--border);
}

.store-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-card__placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--color-primary-border);

  svg {
    width: 3rem;
    height: 3rem;
  }
}

.store-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.store-card__name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.store-card__address {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.store-card__rooms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

/* ---------- stores#show ---------- */

/* photo | details | logo. Flex rather than grid so a store without a photo just drops that column */
.store-details {
  --store-media-size: 10rem;

  display: flex;
  align-items: flex-start;
  gap: var(--space-6);

  .details {
    flex: 1;
    min-width: 0;
  }
}

.store-details__photo {
  flex-shrink: 0;
  width: var(--store-media-size);
  height: var(--store-media-size);
  border-radius: var(--radius-lg);
  object-fit: cover;
}

/* Same square as the photo, framed: logos come in any shape, so the image is contained, never cropped */
.store-details__logo {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  flex-shrink: 0;
  width: var(--store-media-size);
  height: var(--store-media-size);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);

  img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* Placeholder icon when there's no logo */
  svg {
    width: 2rem;
    height: 2rem;
  }
}

/* Phones: photo and logo side by side on top, details full width below */
@media (max-width: 40rem) {
  .store-details {
    --store-media-size: 8rem;

    flex-wrap: wrap;
    gap: var(--space-4);

    .details {
      order: 1;
      flex-basis: 100%;
    }
  }
}

/* ---------- Simple list of rooms (stores#show) or stores (enterprises#show) ---------- */

.rooms-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rooms-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.rooms-list__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  /* --swatch vars come from a color-swatch--<name> class (rooms with a colour) */
  background: var(--swatch-highlight, var(--color-primary-subtle));
  color: var(--swatch, var(--color-primary));

  svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
  }
}

.rooms-list__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rooms-list__name {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

/* ---------- employees#index ---------- */

/* Deactivated accounts stay listed, but faded so active staff stand out
   (not the actions cell: "Reactivate" should look as clickable as anything else) */
.employees-table__row--inactive td:not(.table__actions) {
  opacity: 0.6;
}

/* Edit · Deactivate at the end of each row, right-aligned and never wrapping */
.table__actions {
  width: 1%;
  white-space: nowrap;
}

.employees-table__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ---------- profiles#show: preferences (language, default store), then "Sign out" below ---------- */

.profile-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.profile-preferences {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Small uppercase heading, like the sections of the chat sidebar */
.profile-preferences__title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
}

/* ---------- access#show: the company ID, a bit larger so it's easy to read out to the team ---------- */

.access-code {
  font-size: var(--text-md);
}

/* ---------- calendar_settings#edit + opening_hours form: time and minutes inputs ---------- */

/* A time needs about 8 characters, not the whole row */
.calendar-settings__time {
  width: 9rem;
}

/* The number box with "minutes" next to it */
.calendar-settings__minutes {
  display: flex;
  align-items: center;
  gap: var(--space-2);

  .input {
    width: 6rem;
  }
}

/* ---------- stores#show: weekly opening hours ---------- */

.opening-hours {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One row per day: name on the left, its periods on the right */
.opening-hours__day {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);

  & + & {
    border-top: var(--border);
  }
}

.opening-hours__name {
  font-weight: var(--weight-medium);
}

.opening-hours__periods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Each period is a pill that opens its edit page */
.opening-hours__period {
  padding: var(--space-0-5) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary-subtle);
  color: var(--color-primary-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  transition: background var(--duration-fast) var(--ease-out);

  &:hover {
    background: var(--color-primary-subtle-hover);
    color: var(--color-primary-text);
    text-decoration: none;
  }
}

.opening-hours__closed {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

/* ---------- opening_hours#edit: delete, below the form ---------- */

.opening-hour-delete {
  margin-top: var(--space-4);
}

@media (max-width: 40rem) {
  .opening-hours__day {
    grid-template-columns: 6rem minmax(0, 1fr);
    padding-inline: var(--space-4);
  }
}

/* ---------- data_exports#show: what's in the ZIP | download (password + button) ---------- */

/* Contents on the left, the download card on the right; stacked on narrow screens */
.data-export {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
}

.data-export__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.data-export__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.data-export__group-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* The file names as small chips */
.data-export__files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;

  code {
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    font-size: var(--text-xs);
  }
}

/* Format and "not included" notes, under a line */
.data-export__notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: var(--border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Stays in view while scrolling the contents on wide screens */
.data-export__download {
  position: sticky;
  top: var(--space-4);
}

.data-export__submit {
  width: 100%;
}

@media (max-width: 56rem) {
  .data-export {
    grid-template-columns: minmax(0, 1fr);
  }

  .data-export__download {
    position: static;
  }
}

@media (max-width: 40rem) {
  .data-export__groups {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- imports: history (index), upload (new), preview and result (show) ---------- */

/* The three promises on the history page, numbered, side by side */
.import-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding-left: var(--space-8);

  li {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  li::marker {
    color: var(--color-primary);
    font-weight: var(--weight-semibold);
  }
}

.import-steps__title {
  font-weight: var(--weight-medium);
}

/* Cancel · Submit, or Discard · Import, on the right */
.import-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* new: one block per type, explaining its columns, split by lines */
.import-formats {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.import-format {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: var(--border);
}

.import-format__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

/* show: three big numbers (new · already there · errors) */
.import-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.import-count {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: var(--space-4) var(--space-5);
}

.import-count__number {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.import-count__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.import-count--success .import-count__number {
  color: var(--color-success-text);
}

.import-count--danger .import-count__number {
  color: var(--color-danger-text);
}

/* The spreadsheet row number, narrow and in digits that line up */
.import-table__line {
  width: 1%;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.import-table__problems {
  color: var(--color-danger-text);
}

/* Errors table inside its card: no second border */
.import-table {
  border: 0;
  border-top: var(--border);
  border-radius: 0;
}

/* New and repeated rows, folded: the card header is the clickable summary */
.import-rows__summary {
  border-bottom: 0;
  cursor: pointer;
  list-style: none;

  &::-webkit-details-marker {
    display: none;
  }

  /* A chevron that turns when open */
  &::after {
    content: "";
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: auto;
    border-right: 2px solid var(--color-text-subtle);
    border-bottom: 2px solid var(--color-text-subtle);
    transform: rotate(45deg);
    transition: transform var(--duration-fast) var(--ease-out);
  }
}

.import-rows[open] .import-rows__summary {
  border-bottom: var(--border);

  &::after {
    transform: rotate(-135deg);
  }
}

.import-rows__list {
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;

  li {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-1-5) var(--space-5);
  }
}

.import-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

@media (max-width: 40rem) {
  .import-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .import-summary {
    gap: var(--space-2);
  }

  .import-count {
    padding: var(--space-3);
  }

  .import-count__number {
    font-size: var(--text-xl);
  }
}