/* Stage 1.7: preparations, time, timer and navigation. */

/* Navigation: eight sections fit on a narrow computer screen, scrolling if they must. */
.app-brand { white-space: nowrap; flex-shrink: 0; }
@media (min-width: 768px) {
  .app-nav-desktop { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .app-nav-desktop .app-nav-link { white-space: nowrap; }
  .app-top .dropdown { flex-shrink: 0; }
}
@media (max-width: 991.98px) {
  .app-nav-desktop .app-nav-wide { display: none; }
  .app-nav-desktop .app-nav-link--in-more { background: var(--app-accent-soft); color: var(--app-accent); font-weight: 600; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .app-top nav { gap: 0.5rem !important; }
  .app-nav-desktop { gap: 0; }
  .app-nav-desktop .app-nav-link { padding: 0.4rem 0.45rem; font-size: 0.9rem; }
  .app-user-workshop { max-width: 8rem; }
}

/* Running timer: in the header on a computer, above the bottom bar on a phone. */
.app-timer-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem 0.35rem 0.75rem;
  border: 1.5px solid var(--app-gold);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--app-gold) 14%, var(--app-surface));
  white-space: nowrap;
}
.app-timer-bar form { margin: 0; }
.app-timer-bar .btn { min-height: 2.25rem; }
.app-timer-bar-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex: 1 1 auto;
  color: var(--bs-body-color);
  text-decoration: none;
  font-weight: 600;
}
.app-timer-bar-link:hover { color: var(--app-accent); }
.app-timer-bar-work { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.app-timer-bar-clock,
.app-timer-clock { font-variant-numeric: tabular-nums; }

@media (max-width: 767.98px) {
  .app-timer-bar {
    position: fixed;
    left: 0.5rem;
    right: 0.5rem;
    bottom: calc(var(--app-nav-h) + env(safe-area-inset-bottom, 0px) + 0.4rem);
    z-index: 1021;
    min-height: 3rem;
    box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 0.15);
  }
  /* Keep the end of the page clear of the timer bar. */
  .app-has-timer .app-main {
    padding-bottom: calc(var(--app-nav-h) + 4.5rem + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 768px) {
  .app-timer-bar { flex: 0 1 auto; max-width: 20rem; }
  /* The user menu sits right after the timer, not in the middle of the free space. */
  .app-timer-bar + .dropdown { margin-left: 0 !important; }
}
/* On a computer the header is busy: the work type shows only on wide screens (it is in the title). */
@media (min-width: 768px) and (max-width: 1399.98px) {
  .app-timer-bar-work,
  .app-timer-bar-sep { display: none; }
  .app-timer-bar { padding-left: 0.5rem; }
}

/* Time page: the timer card */
.app-timer-now {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem 1rem;
}
.app-timer-now form { grid-column: 1 / -1; margin: 0; }
.app-timer-what { overflow-wrap: anywhere; }
.app-timer-clock { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--app-accent); }
.app-timer-stop { width: 100%; min-height: 3rem; }
@media (min-width: 768px) {
  .app-timer-now { grid-template-columns: 1fr auto auto; }
  .app-timer-now form { grid-column: auto; }
  .app-timer-stop { width: auto; min-width: 8rem; }
}
.app-timer-card .form-select { min-height: 2.75rem; }
.app-form-grid--3 { display: grid; gap: 1rem; }
@media (min-width: 768px) {
  .app-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.app-time-list .app-op-actions,
.app-op-row .app-op-actions { gap: 0.5rem; flex-wrap: wrap; }
.app-op-row.is-archived .app-row-title { color: var(--bs-secondary-color); }

/* Preparation form: rows of inputs and outputs */
.app-prep-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--app-line);
}
.app-prep-row .form-control,
.app-prep-row .form-select { min-height: 2.75rem; }
.app-prep-material,
.app-prep-qty,
.app-prep-errors { grid-column: 1 / -1; }
.app-prep-qty .input-group > .form-control { flex: 1 1 5rem; min-width: 4rem; }
.app-prep-qty .input-group > .form-select { flex: 0 1 9rem; min-width: 5rem; }
.app-prep-remove { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.app-prep-more summary { cursor: pointer; color: var(--bs-link-color); min-height: 2.75rem; display: flex; align-items: center; }
.app-prep-row--out .app-prep-more { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .app-prep-row { grid-template-columns: 2.4fr 2fr 1.5fr 1fr 1.3fr auto; }
  .app-prep-material,
  .app-prep-qty,
  .app-prep-remove { grid-column: auto; }
  .app-prep-remove { padding-top: 1.9rem; }
  .app-prep-row--out { grid-template-columns: 2.4fr 2fr 2fr auto; }
  .app-prep-row--out .app-prep-more { grid-column: auto; }
  /* Hidden mode fields keep their column so the row does not shift. */
  .app-prep-row > [hidden] { display: block; visibility: hidden; }
}

.app-prep-lines li + li { margin-top: 0.35rem; }

/* "Ещё": large tiles */
.app-more-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.app-more-tiles .app-action { min-height: 88px; font-size: 1.05rem; }