/*
  Global styles for the DaCapo. progressive web application.
  The design emphasises clarity and simplicity reminiscent of
  Apple's iOS. Black typography on a white background provides
  excellent contrast for readability. A responsive layout adapts
  gracefully across devices, especially the iPhone 14 Pro.
*/

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Helvetica, sans-serif;
  background-color: #ffffff;
  color: #000000;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  text-align: center;
  padding: calc(0.75rem + env(safe-area-inset-top)) 1rem 0.75rem;
  border-bottom: 1px solid #e0e0e0;
}

h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
}

main {
  flex: 1;
  overflow-y: auto;
  /* Reserve space for the fixed tab bar plus safe area so content
     isn't hidden behind it. Adjust the 4rem value if you change
     the height of the navigation bar. */
  padding-bottom: calc(4rem + env(safe-area-inset-bottom));
}

.page {
  display: none;
  padding: 1rem;
}

.page.active {
  display: block;
}

h2 {
  font-size: 1.4rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/* Navigation bar */
/*
  The tab bar stays fixed along the bottom of the viewport so it
  never disappears when scrolling long pages. Padding on the bottom
  includes the safe‑area inset to avoid overlapping the iPhone home
  indicator. A high z‑index keeps it above other content.
*/
nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid #e0e0e0;
  background-color: #ffffff;
  padding-top: 0.25rem;
  padding-bottom: calc(0.25rem + env(safe-area-inset-bottom));
  z-index: 10;
}

nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.2rem;
  font-size: 0.75rem;
  background: none;
  border: none;
  color: #555555;
  cursor: pointer;
}

nav button.active {
  color: #000000;
}

/* Scale and align icons within nav buttons */
nav button svg {
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
  fill: currentColor;
}

nav button span {
  font-size: 0.6rem;
}

/* Forms */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.form-row input[type="text"],
.form-row input[type="date"],
.form-row input[type="time"] {
  flex: 1 1 auto;
  padding: 0.5rem;
  border: 1px solid #cccccc;
  border-radius: 6px;
  font-size: 1rem;
}

/* Style for select inputs (e.g. repertoire category) */
.form-row select {
  flex: 1 1 auto;
  padding: 0.5rem;
  border: 1px solid #cccccc;
  border-radius: 6px;
  font-size: 1rem;
  background-color: #ffffff;
  color: #000000;
}

/* Multi‑line text areas share similar styling to inputs but span
   across the full row. Used for agenda notes. */
.form-row textarea {
  flex: 1 1 100%;
  padding: 0.5rem;
  border: 1px solid #cccccc;
  border-radius: 6px;
  font-size: 1rem;
  resize: vertical;
  min-height: 3rem;
}

.form-row button {
  padding: 0.5rem 1rem;
  background-color: #000000;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
}

.form-row button:hover {
  opacity: 0.8;
}

/* Lists */
.item-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.item-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Highlight upcoming agenda items occurring within the next week. */
.item-list li.soon {
  background-color: #fffbe6;
}

/* Apply a subdued appearance to completed or purchased items. */
.item-list li.purchased span {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Styles for auxiliary information like notes and countdown in agenda */
.item-list .note {
  display: block;
  font-size: 0.8rem;
  color: #555555;
  margin-top: 0.25rem;
}
.item-list .countdown {
  display: block;
  font-size: 0.8rem;
  color: #777777;
  margin-top: 0.25rem;
}

/* Additional small text for agenda details (payment, contract) */
.item-list .details {
  display: block;
  font-size: 0.8rem;
  color: #555555;
  margin-top: 0.25rem;
}

/* Align the payment status label with the rest of the inputs */
.payment-status {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
}

/* Ensure file input does not shrink too small */
#agenda-contract {
  flex: 1 1 100%;
}

.item-list li:last-child {
  margin-bottom: 0;
}

.item-list button {
  background: none;
  border: none;
  color: #e53935;
  font-size: 0.8rem;
  cursor: pointer;
}

.item-list button:hover {
  text-decoration: underline;
}

/* Checkboxes in the materials list: ensure spacing before the label */
.item-list li input[type="checkbox"] {
  margin-right: 0.5rem;
}

/* Useful sites list */
/* Useful sites grid: arrange items in two columns on small screens */
.links-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

/* Section for violin auction sites */
.auction-section {
  margin-bottom: 1rem;
}

.auction-section h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.auction-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.auction-links a {
  display: block;
  text-align: center;
  padding: 0.6rem;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: #007aff;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.auction-links a:hover {
  background-color: #ececec;
}

/* Repertoire category grouping */
#repertoire .category-group {
  margin-bottom: 1.5rem;
}

#repertoire .category-group h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

#repertoire .category-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* History list inside materials items */
.history-list {
  margin-top: 0.25rem;
  padding-left: 1rem;
  font-size: 0.8rem;
  color: #555555;
}

.site-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  width: 100%;
}

.site-item a {
  flex-grow: 1;
  text-decoration: none;
  color: #007aff;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-item button {
  background: none;
  border: none;
  color: #e53935;
  font-size: 0.8rem;
  cursor: pointer;
}

/* Metronome & tuner */
.metronome-container,
.tuner-container {
  margin-bottom: 1.5rem;
  text-align: center;
}

#bpm {
  width: 100%;
  margin: 0.5rem 0;
}

#bpm-display {
  font-size: 1.2rem;
  display: block;
  margin-bottom: 0.5rem;
}

#metronome-visual {
  width: 50px;
  height: 50px;
  margin: 0.5rem auto;
  border-radius: 50%;
  background-color: #e0e0e0;
  transition: background-color 0.1s ease;
}

#metronome-visual.active {
  background-color: #000000;
}

button.primary {
  background-color: #000000;
  color: #ffffff;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  margin-top: 0.5rem;
  cursor: pointer;
}

button.secondary {
  background-color: #f5f5f5;
  color: #000000;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

button.primary:hover,
button.secondary:hover {
  opacity: 0.8;
}