* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; padding: 1rem; background: #FFAC00; color: #000; }
a { color: #000; }
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-box { background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.2); max-width: 320px; width: 100%; color: #000; }
.login-box h1 { margin: 0 0 1rem; font-size: 1.25rem; }
.login-box label { display: block; margin-bottom: .25rem; font-size: .9rem; }
.login-box input { width: 100%; padding: .5rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 4px; }
.login-box button { width: 100%; padding: .6rem; background: #0055FF; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }
.login-box .error { color: #c00; margin-bottom: .5rem; font-size: .9rem; }
.success { color: #080; }
.form-section { margin-bottom: 1.5rem; }
.form-section h2 { font-size: 1rem; margin: 0 0 .5rem; }
.form-section label {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0.5rem 1rem;
  align-items: center;
  margin-bottom: .5rem;
}
.form-section label:has(button) { grid-template-columns: 200px 1fr auto; }
.form-section input[type="text"], .form-section input[type="number"], .form-section input[type="date"], .form-section input[type="time"], .form-section select, .form-section textarea { width: 100%; min-width: 0; max-width: 100%; padding: .4rem; margin: 0; }
.form-section textarea { min-height: 60px; }
nav { margin-bottom: 1rem; }
nav a { margin-right: 1rem; }
table { width: 100%; border-collapse: collapse; background: #fff; color: #000; }
th, td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid #ddd; }
.list-table th, .list-table td { white-space: nowrap; }
.list-table a { text-decoration: none; color: inherit; }
.csv-raw { background: #fff; padding: .75rem; border: 1px solid #ddd; border-radius: 4px; max-height: 20rem; overflow: auto; white-space: pre-wrap; word-break: break-all; font-size: .85rem; margin-bottom: 1.5rem; }
th { background: rgba(0,0,0,.08); font-weight: 600; }
.btn { display: inline-block; padding: .4rem .8rem; background: #0055FF; color: #fff; text-decoration: none; border-radius: 4px; font-size: .9rem; border: none; cursor: pointer; }
.btn.secondary { background: #0055FF; color: #fff; }
.btn-del { background: #0055FF; color: #fff; }
.btn-inline { display: inline-block; margin-left: .5rem; vertical-align: middle; }
.btn-inline button { margin: 0; }
.container { max-width: 1600px; margin-left: 5rem; margin-right: auto; padding: 0 1rem; }
.form-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; margin-bottom: 1rem; }
.form-two-cols .form-col { min-width: 0; }

/* Edit page two-row layout */
.edit-row-1 { margin-bottom: 1.5rem; }
.edit-row-1-top { margin-bottom: 1.5rem; }
.edit-top-rows { display: flex; flex-direction: column; gap: 0.75rem; }
.edit-top-row { display: grid; gap: 0.75rem 1rem; align-items: end; }
.edit-top-row-1 { grid-template-columns: 1fr 1fr 1fr 0.25fr; }
.edit-top-row-2 { grid-template-columns: repeat(3, 1fr); }
.edit-duration-cell .edit-duration-input { width: 100%; max-width: 5em; }
.edit-top-row-3 { grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto; }
.edit-top-row label { display: block; margin: 0; min-width: 0; }
.edit-top-row .form-label-top { display: block; margin-bottom: 0.25rem; }
.edit-top-row label input { display: block; width: 100%; min-width: 0; box-sizing: border-box; margin-top: 0; }
.edit-weather-btn-wrap { display: flex; align-items: flex-end; padding-bottom: 2px; }
.edit-weather-btn-wrap .btn { min-height: 44px; }
.edit-weather-ro { background: #f5f5f5; color: #333; }
.edit-top-input { min-height: 44px; height: 44px; padding: 0.6rem; font-size: 1rem; box-sizing: border-box; }
.edit-duration-input { background: #eee; width: 5em; min-width: 5em; }
@media (max-width: 900px) {
  .edit-top-row-1 { grid-template-columns: 1fr 1fr 1fr 0.25fr; }
  .edit-top-row-2 { grid-template-columns: 1fr 1fr 1fr; }
  .edit-top-row-3 { grid-template-columns: 1fr 1fr 1fr; }
  .edit-weather-btn-wrap { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .edit-top-row-1 { grid-template-columns: 1fr 1fr 1fr 0.25fr; }
  .edit-top-row-2 { grid-template-columns: 1fr 1fr; }
  .edit-top-row-3 { grid-template-columns: 1fr 1fr; }
}
.edit-row-1-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.edit-row-1-bottom .form-col { min-width: 0; }
.edit-row-1-bottom .form-section label { grid-template-columns: 270px 1fr; }
.edit-row-1-bottom .form-section label:has(button) { grid-template-columns: 270px 1fr auto; }
.edit-row-1-bottom .form-section input[type="text"], .edit-row-1-bottom .form-section input[type="number"], .edit-row-1-bottom .form-section input[type="date"], .edit-row-1-bottom .form-section input[type="time"], .edit-row-1-bottom .form-section select, .edit-row-1-bottom .form-section textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.edit-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; margin-bottom: 1rem; }
.edit-row-2 .form-col { min-width: 0; }
.edit-row-2 .form-col h2 { font-size: 1rem; margin: 0 0 .5rem; font-weight: 700; }
.edit-row-2 .form-section label { grid-template-columns: 270px 1fr; }
.edit-row-2 .form-section label:has(button) { grid-template-columns: 270px 1fr auto; }
.edit-row-2 .form-section input[type="text"], .edit-row-2 .form-section input[type="number"], .edit-row-2 .form-section input[type="date"], .edit-row-2 .form-section input[type="time"], .edit-row-2 .form-section select, .edit-row-2 .form-section textarea { width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 1024px) { .edit-row-1-top, .edit-row-1-bottom, .edit-row-2 { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .edit-row-2 .form-section label { grid-template-columns: 200px 1fr; } }

.form-four-cols { display: grid; grid-template-columns: minmax(540px, 1fr) minmax(540px, 1fr) minmax(540px, 1fr) minmax(630px, 1fr); gap: 1.5rem; align-items: start; margin-bottom: 1rem; }
.form-four-cols .form-col { min-width: 0; }
.form-four-cols .form-col:first-child { position: static; left: auto; }
.form-four-cols .form-col:nth-child(2),
.form-four-cols .form-col:nth-child(3),
.form-four-cols .form-col:nth-child(4) { position: relative; left: -3rem; }
.form-four-cols .form-col h2 { font-size: 1rem; margin: 0 0 .5rem; font-weight: 700; }
.form-section-no-labels .form-label-above { display: block; font-size: 1rem; margin: 0 0 0.25rem; font-weight: 500; grid-column: 1; }
.form-four-cols .form-section label { grid-template-columns: 270px 1fr; }
.form-four-cols .form-section label:has(button) { grid-template-columns: 270px 1fr auto; }
.form-four-cols .form-section.form-section-no-labels label { grid-template-columns: 1fr; }
.form-four-cols .form-section.form-section-no-labels label input { width: 33%; max-width: 33%; min-width: 0; }
.form-four-cols .form-section input[type="text"], .form-four-cols .form-section input[type="number"], .form-four-cols .form-section input[type="date"], .form-four-cols .form-section input[type="time"], .form-four-cols .form-section select, .form-four-cols .form-section textarea { width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 1400px) { .form-four-cols { grid-template-columns: minmax(540px, 1fr) minmax(540px, 1fr); } }
@media (max-width: 768px) { .form-two-cols { grid-template-columns: 1fr; } .form-four-cols { grid-template-columns: 1fr; } .form-four-cols .form-section label { grid-template-columns: 200px 1fr; } .form-row-location-weather label:first-child { grid-template-columns: 200px 1fr; } }
.form-row-inline { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; align-items: start; margin-bottom: 0.75rem; }
.form-row-inline label { margin: 0; display: block; grid-template-columns: none; }
.form-row-inline label input { width: 100%; min-width: 0; box-sizing: border-box; display: block; margin-top: 0.25rem; }
.form-four-cols .form-section .form-row-inline label { grid-template-columns: unset; }
.form-row-inline.form-row-location-weather { grid-template-columns: 1fr 1fr 1fr 2fr; align-items: start; }
.form-row-location-weather label { display: block; margin: 0; }
.form-row-location-weather .form-label-top { display: block; margin-bottom: 0.25rem; }
.form-row-location-weather label input { display: block; width: 100%; min-width: 0; box-sizing: border-box; margin-top: 0; }
.form-row-location-weather .weather-input-wrap { display: flex; gap: 0.5rem; align-items: center; min-width: 0; margin-top: 0.25rem; }
.form-row-location-weather .weather-input-wrap input { flex: 1; min-width: 0; margin: 0; }
.form-row-location-weather .weather-input-wrap .btn { flex-shrink: 0; }
.form-hint { font-size: .85rem; color: #666; margin: 0 0 .5rem; }
.repeatable-row { display: grid; gap: 0.5rem; align-items: center; margin-bottom: .5rem; }
.repeatable-row.pain-row { grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) auto; }
.repeatable-row.med-row { grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
.repeatable-row label { grid-template-columns: 1fr; display: block; margin: 0; min-width: 0; }
.repeatable-row label input, .repeatable-row label select { width: 100%; min-width: 0; box-sizing: border-box; }
.repeatable-row.pain-row label:nth-child(5) input { white-space: nowrap; }
.btn-remove-row { background: #ccc; border: none; width: 2rem; height: 2rem; border-radius: 4px; cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0; flex-shrink: 0; }
.btn-remove-row:hover { background: #999; color: #fff; }
@media (max-width: 600px) { .repeatable-row.pain-row { grid-template-columns: 1fr 1fr 1fr auto; } .repeatable-row.med-row { grid-template-columns: 1fr 1fr auto; } }