* { box-sizing: border-box; }
body {
  font-family: system-ui, sans-serif;
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
  color: #1c1c1c;
}
h1 { margin-bottom: 1.5rem; }
section {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #ddd;
}
.controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.status {
  font-size: 0.85rem;
  color: #666;
  margin: -0.3rem 0 0.6rem;
}
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0.75rem;
}
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
th, td {
  border: 1px solid #ddd;
  padding: 0.4rem;
  text-align: left;
  overflow-wrap: break-word;
}
td { padding: 0; }
input {
  width: 100%;
  height: 100%;
  min-width: 0;
  border: none;
  padding: 0.4rem;
  font-size: 0.95rem;
}
input:focus { outline: 1px solid #888; }
button {
  cursor: pointer;
  padding: 0.4rem 0.9rem;
  border: 1px solid #333;
  background: #fff;
  border-radius: 4px;
}
button:hover { background: #f0f0f0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.top-bar {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.photo-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.plus-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid #333;
  background: #fff;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0;
}
.slot-label {
  font-size: 0.8rem;
  color: #555;
}
.preview-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 160px;
}
.preview-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #ddd;
}
.date-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  align-self: center;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 0.4rem 0.9rem;
  background: #fff;
  cursor: pointer;
}
.date-trigger .date-value {
  font-size: 0.8rem;
  color: #555;
}
/* The real date input sits invisibly on top of the whole button so a tap
   lands on it directly - mobile browsers (iOS/Android) are unreliable
   about opening a native date picker via a JS-triggered click()/
   showPicker() call from a separate element, but a genuine tap on the
   input itself always works. */
.date-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
td.action-cell, td.check-cell { padding: 0; text-align: center; }
button.remove {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 2.2rem;
  border: none;
  background: transparent;
  color: #a00;
  font-weight: bold;
  font-size: 1rem;
}
button.remove:hover { background: #fee2e2; }
td.check-cell label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 2.2rem;
  padding: 0.4rem;
  cursor: pointer;
}
td.check-cell input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  cursor: pointer;
}
td.check-cell:hover { background: #f0f0f0; }
#resultTable tr.done input:not([type="checkbox"]) {
  text-decoration: line-through;
  color: #888;
}

/* leave the movie/title column's width unset so fixed table layout hands
   it whatever space the other, short fixed-format columns don't need */
#movieTable th:nth-child(2), #movieTable th:nth-child(3) { width: 12%; }
#movieTable th:nth-child(4) { width: 10%; }
#movieTable th:last-child { width: 6%; }

#resultTable th:nth-child(2), #resultTable th:nth-child(3) { width: 10%; }
#resultTable th:nth-child(4) { width: 8%; }
#resultTable th:nth-child(5) { width: 18%; }
#resultTable th:last-child { width: 8%; }

@media (max-width: 640px) {
  body { margin: 1rem auto; padding: 0 0.5rem; }
  h1 { font-size: 1.3rem; margin-bottom: 1rem; }
  h2 { font-size: 1.05rem; }
  .controls { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .controls label { display: flex; flex-direction: column; gap: 0.2rem; }
  .top-bar { gap: 1rem; }
  th, td { padding: 0.3rem 0.25rem; font-size: 0.82rem; }
  td { padding: 0; }
  input { font-size: 0.82rem; }

  /* narrow the short fixed-format columns so the long text column
     (movie/name) gets most of the width and everything fits without
     horizontal scrolling on a typical phone */
  #movieTable th:nth-child(2), #movieTable th:nth-child(3) { width: 15%; }
  #movieTable th:nth-child(4) { width: 12%; }
  #movieTable th:last-child { width: 8%; }

  #staffTable th:nth-child(2), #staffTable th:nth-child(3) { width: 20%; }
  #staffTable th:last-child { width: 10%; }

  #resultTable th:nth-child(2), #resultTable th:nth-child(3) { width: 14%; }
  #resultTable th:nth-child(4) { width: 10%; }
  #resultTable th:nth-child(5) { width: 22%; }
  #resultTable th:last-child { width: 10%; }
}