:root {
  --phage-ink: #202020;
  --phage-muted: #555;
  --phage-paper: #fff6dc;
  --phage-paper-strong: #ffefbd;
  --phage-border: #d8bd78;

  --phage-green: #b9fa9d;
  --phage-green-border: #80d86b;

  --phage-gold: #e7b313;
  --phage-gold-dark: #c99809;

  --phage-red: #ff8f95;
  --phage-red-dark: #e06469;

  --phage-taken: #d8d0b8;

  --phage-radius: 14px;
  --phage-gap: 8px;
}

#phage_status {
  max-width: 1050px;
  color: var(--phage-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Shared panels ---------- */

.phageStatus,
.followupGood,
.followupBad,
.followupDisabled {
  width: auto;
  max-width: 720px;
  box-sizing: border-box;

  border-radius: var(--phage-radius);
  border: 1px solid var(--phage-border);
  padding: 12px 16px;
  margin: 10px 0;

  font-family: inherit;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}

.phageStatus {
  background: #ffffc9;
  color: red;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.0;
}

.phageStatus h5 {
  margin: 4px 0 0;
  font-size: 0.95rem;
  line-height: 1.2;
}

.followupGood {
  background: var(--phage-green);
  border-color: var(--phage-green-border);
}

.followupBad {
  background: var(--phage-red);
  border-color: var(--phage-red-dark);
}

.followupDisabled {
  background: #d0d0d0;
  border-color: #aaa;
}

.baseAreaHeading,
.basicAreaHeading,
.followupHeading {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 500;
}

.basicAreaText,
.followupText {
  margin: 0 10px 10px 10px;
  line-height: 1.35;
}

.basicAreaHighlightedText {
  margin: 8px 0 0;
  font-weight: 800;
  text-align: center;
}

/* ---------- Job table ---------- */
.phage_jobs_panel {
  box-sizing: border-box;
  width: 100%;
  overflow: visible;
}

.job_table {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;

  scrollbar-width: auto;
}

#daily_job_table_div .followupGood {
  width: auto;
  max-width: none;
  display: inline-block;
  min-width: max-content;

  padding: 0.85rem;
  background: var(--phage-green);
  border: 1px solid var(--phage-green-dark);
  border-radius: 1rem;
}


#daily_job_table_div .baseAreaHeading {
  margin: 0 0 0.65rem 0.15rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 500;
}

#daily_job_table_div::after {
  content: "Scroll sideways to see all days →";
  display: block;
  margin: 0.45rem 0.25rem 0;
  color: #276b23;
  font-size: 0.9rem;
  font-style: italic;
}

#daily_job_table {
  width: auto;
  min-width: 0;

  border: 0;
  border-collapse: separate;
  border-spacing: 0.45rem;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--phage-ink);
}

#daily_job_table th,
#daily_job_table td {
  box-sizing: border-box;
  border: 1px solid rgb(0 0 0 / 0.14);
  border-radius: 0.7rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  color: var(--phage-ink);
}

#daily_job_table th {
  min-width: 6.4rem;

  padding: 0.65rem 0.8rem;
  background: var(--phage-paper);
  border-color: var(--phage-border);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

#daily_job_table th:first-child {
  min-width: 15rem;
}

#daily_job_table td {
  min-width: 6.4rem;
  height: 4.6rem;

  padding: 0.55rem 0.65rem;
  text-align: center;
  vertical-align: middle;
}

.phage_job_row_title {
  min-width: 15rem;
  max-width: 15rem;

  background: var(--phage-paper);
  border-color: var(--phage-border) !important;

  color: var(--phage-ink);
  font-weight: 700;
  line-height: 1.25;
  text-align: left !important;
  white-space: normal;
}

.phage_job_cell_free {
  background: var(--phage-green);
  border-color: var(--phage-green-dark) !important;
  text-align: center;
}

.phage_job_cell_taken {
  background: #d7d1ba;
  border-color: #b9ae8d !important;
  text-align: center;
  font-weight: 700;
}

.phage_job_cell_user {
  background: var(--phage-gold);
  border-color: #bf8f00 !important;
  text-align: center;
  font-weight: 700;
}

.phage_job_person {
  margin-bottom: 0.35rem;
  font-weight: 700;
}

.phage_job_current_user {
  color: #111;
}

#daily_job_table button {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.3rem 0.8rem;

  border-radius: 0.55rem;
  border: 1px solid rgb(0 0 0 / 0.25);

  background: #f8f8f8;
  color: #222;
  cursor: pointer;

  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
}

#daily_job_table button:hover {
  background: white;
  transform: translateY(-1px);
}

#daily_job_table button:active {
  transform: translateY(0);
}

#daily_job_table_div .basicTextArea {
  margin: 0.75rem 0.25rem 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--phage-ink);
}

/* Make it obvious on narrow layouts that the jobs section scrolls sideways. */
#daily_job_table_div::after {
  content: "Scroll sideways to see all days →";
  display: block;
  margin: 0.45rem 0.25rem 0;
  color: #276b23;
  font-size: 0.9rem;
  font-style: italic;
}

@media (min-width: 1050px) {
  #daily_job_table_div::after {
    display: none;
  }
}


/* ---------- Buttons / inputs ---------- */

button,
#daily_job_table button,
#phageTaxes_Next1 {
  font: inherit;
  font-size: 0.95rem;

  padding: 5px 13px;
  border-radius: 8px;
  border: 1px solid rgb(0 0 0 / 0.28);

  background: #f8f8f8;
  color: #222;
  cursor: pointer;

  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
}

button:hover,
#daily_job_table button:hover,
#phageTaxes_Next1:hover {
  background: white;
  transform: translateY(-1px);
}

button:active,
#daily_job_table button:active,
#phageTaxes_Next1:active {
  transform: translateY(0);
}

#taxAmount,
.phageTax_input {
  box-sizing: border-box;
  border: 1px solid rgb(0 0 0 / 0.25);
  border-radius: 8px;
  padding: 5px 8px;
  background: white;
  font: inherit;
}

/* ---------- Tax section ---------- */

#phage_tax {
  max-width: 720px;
}

#phageTaxes_taxFrame {
  padding: 14px;
}

#phageTaxes_taxFrame > div {
  gap: 14px;
}

#phageTax_ColumnTwo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#phageTax_ColumnOne {
  flex: 1;
}

.justABox {
  width: 170px;
  box-sizing: border-box;

  border-radius: var(--phage-radius);
  border: 1px solid var(--phage-gold-dark);
  padding: 10px;

  background: var(--phage-gold);
  color: var(--phage-ink);

  font-family: inherit;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}

.justABox h3 {
  margin-top: 0;
}

.justABox:hover {
  outline: 3px solid rgb(255 255 255 / 0.65);
}

/* ---------- Older job block layout, if still used elsewhere ---------- */

.phage_job_list {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  gap: 15px;
}

.phage_job_block {
  position: relative;
  width: 400px;
  box-sizing: border-box;

  border-radius: var(--phage-radius);
  border: 1px solid var(--phage-border);
  padding: 12px;

  background: var(--phage-paper);
  font-family: inherit;
}

.phage_job_block_title {
  font-size: 1.35rem;
  font-weight: 800;
}

.phage_job_block_description {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--phage-muted);
}

.phage_job_block_heading {
  font-size: 1.1rem;
  font-weight: 800;
}

.phage_job_block_buttons {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  gap: 8px;
}

.phage_job_block_listitem::before {
  content: "\27A3";
  margin-left: 10px;
  margin-right: 5px;
}

/* ---------- Small screens ---------- */

@media (max-width: 800px) {
  .phageStatus,
  .followupGood,
  .followupBad,
  .followupDisabled,
  #phage_tax {
    max-width: 100%;
  }

  #daily_job_table {
    min-width: 820px;
  }

  #daily_job_table th:first-child,
  #daily_job_table .phage_job_row_title {
    width: 240px;
  }

  #daily_job_table th,
  #daily_job_table td {
    padding: 8px 6px;
  }

  #phageTaxes_taxFrame > div {
    flex-direction: column;
  }

  #phageTax_ColumnTwo {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .justABox {
    width: 100%;
  }

  #phageTax_ColumnOne {
    width: 100% !important;
    margin-left: 0 !important;  }
}