:root {
  --navy: #123d63;
  --navy-2: #1d527a;
  --line: #afc1d2;
  --pale: #f4f8fb;
  --pale-2: #dde8f2;
  --text: #082a46;
  --bad: #b42318;
  --bad-bg: #fce8e6;
  --good: #0f6b3f;
  --good-bg: #e8f5ed;
  --warn: #996500;
  --warn-bg: #fff4d6;
  font-family:
    "Aptos",
    "Segoe UI",
    Arial,
    sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  background: #edf3f8;
}

button,
input,
select {
  font: inherit;
}

button,
.file-button {
  border: 1px solid var(--navy);
  border-radius: 6px;
  background: var(--navy);
  color: white;
  cursor: pointer;
  font-weight: 700;
  padding: 0.55rem 0.8rem;
}

button.secondary {
  background: white;
  color: var(--navy);
}

.file-button.secondary-file {
  background: white;
  color: var(--navy);
}

button.danger {
  border-color: var(--bad);
  background: white;
  color: var(--bad);
}

button:hover,
.file-button:hover {
  filter: brightness(1.06);
}

input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  background: white;
  padding: 0.4rem 0.45rem;
}

.rule-value {
  min-height: 2.2rem;
  border: 1px solid #c7d6e3;
  border-radius: 5px;
  background: #eef4f8;
  color: #23445f;
  font-weight: 700;
  padding: 0.4rem 0.45rem;
}

input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}

.app-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  background: var(--navy);
  color: white;
}

.eyebrow,
h1,
h2,
p {
  margin: 0;
}

.eyebrow {
  color: #cfe0ef;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

h1 {
  margin-top: 0.2rem;
  font-size: clamp(1.6rem, 2.2vw, 2.3rem);
}

h2 {
  font-size: 1.15rem;
}

h3 {
  margin: 0;
  font-size: 1rem;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.save-status {
  align-self: center;
  color: #d8e9f8;
  font-size: 0.9rem;
  font-weight: 700;
}

.save-status[data-level="good"] {
  color: #d9f7e5;
}

.save-status[data-level="bad"] {
  color: #ffe1dd;
}

.save-status[data-level="warn"] {
  color: #fff4d6;
}

.file-button input {
  display: none;
}

.app-shell {
  max-width: 1500px;
  margin: 0 auto;
  padding: 1rem;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.tab {
  background: white;
  color: var(--navy);
}

.tab.active {
  background: var(--navy);
  color: white;
}

.panel {
  display: none;
}

.panel.active {
  display: block;
}

.grid {
  display: grid;
  gap: 1rem;
}

.grid.two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.block,
.match-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 1rem;
  margin-bottom: 1rem;
}

.section-title-row {
  display: flex;
  gap: 1rem;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.section-title-row p,
.block > p {
  color: #4f6880;
  font-size: 0.92rem;
  margin-top: 0.2rem;
}

.block ol {
  margin: 0.75rem 0 0;
  padding-left: 1.35rem;
}

.block li {
  margin: 0.45rem 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.form-row label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.roster-actions,
.fixture-file-row,
.team-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: end;
  justify-content: flex-end;
}

.team-profile-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.fixture-file-row {
  justify-content: space-between;
}

.fixture-file-row p {
  color: #4f6880;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

.table-scroll {
  overflow: auto;
}

.table-scroll.tall {
  max-height: 680px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

#rosterTable {
  width: max-content;
  min-width: 100%;
}

th,
td {
  border: 1px solid var(--line);
  padding: 0.35rem;
  vertical-align: middle;
}

th {
  background: var(--navy);
  color: white;
  font-size: 0.86rem;
  text-align: left;
}

tbody tr:nth-child(even) {
  background: var(--pale);
}

td.number,
th.number {
  text-align: center;
  width: 4.5rem;
}

th.availability-heading,
td.availability-cell {
  min-width: 3.2rem;
  width: 3.2rem;
}

#rosterTable th.roster-name-heading,
#rosterTable td.roster-name-cell {
  min-width: 13rem;
  width: 13rem;
}

.roster-name-input {
  min-width: 12rem;
}

.roster-order-controls {
  min-width: 7.5rem;
  text-align: center;
}

.roster-order-controls button {
  margin: 0.1rem;
  padding: 0.28rem 0.42rem;
  font-size: 0.78rem;
}

.roster-order-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.duplicate-entry,
.duplicate-entry select,
select.duplicate-select {
  background: var(--bad-bg);
  color: var(--bad);
  font-weight: 700;
}

.locked-round {
  background: var(--good-bg);
}

.lock-toggle {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 700;
}

.season-lock-row th,
.season-lock-row td {
  background: var(--pale-2);
}

.non-rotation-row,
.non-rotation-row select,
.non-rotation-row input {
  background: #f7f7f7;
  color: #495867;
}

.status-pill {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: #495867;
  font-weight: 700;
  padding: 0.35rem 0.65rem;
}

.round-status-note {
  display: block;
  margin-top: 0.2rem;
  color: #dce7f0;
  font-size: 0.74rem;
  font-weight: 700;
}

.player-count-note {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.74rem;
  font-weight: 800;
}

.player-count-note.good {
  color: #cdeedc;
}

.player-count-note.warn {
  color: #ffe08a;
}

.player-count-note.bad {
  color: #ffb3aa;
}

.checks {
  display: grid;
  gap: 0.5rem;
}

.checks.compact {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.check {
  border-radius: 6px;
  padding: 0.55rem 0.65rem;
  font-weight: 700;
}

.check.good {
  color: var(--good);
  background: var(--good-bg);
}

.check.warn {
  color: var(--warn);
  background: var(--warn-bg);
}

.check.bad {
  color: var(--bad);
  background: var(--bad-bg);
}

.player-count-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.player-count-pill,
.player-count-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  font-size: 0.82rem;
  font-weight: 800;
}

.player-count-pill.good,
.player-count-summary.good {
  color: var(--good);
  background: var(--good-bg);
}

.player-count-pill.warn,
.player-count-summary.warn {
  color: var(--warn);
  background: var(--warn-bg);
}

.player-count-pill.bad,
.player-count-summary.bad {
  color: var(--bad);
  background: var(--bad-bg);
}

.player-count-summary {
  border-radius: 6px;
  flex-wrap: wrap;
}

.player-count-summary span {
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.82;
}

.subtle {
  color: #617a91;
  font-size: 0.85rem;
}

.season-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: end;
  justify-content: flex-end;
}

.season-actions label {
  display: grid;
  gap: 0.25rem;
  min-width: 14rem;
  color: #4f6880;
  font-size: 0.82rem;
  font-weight: 700;
}

.season-scroll {
  max-height: 720px;
}

.season-table {
  min-width: 1500px;
}

.counts-table {
  min-width: 820px;
  table-layout: fixed;
}

.fixture-table {
  min-width: 1100px;
}

.playhq-panel {
  display: grid;
  gap: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--pale);
  padding: 0.8rem;
  margin-bottom: 0.9rem;
}

.playhq-panel p {
  color: #4f6880;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

.playhq-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: end;
}

.playhq-grid {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(14rem, 1fr) auto;
  gap: 0.65rem;
  align-items: end;
}

.playhq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.playhq-actions button {
  white-space: nowrap;
}

.playhq-status {
  border-radius: 6px;
  background: white;
  color: #4f6880;
  font-weight: 700;
  padding: 0.55rem 0.65rem;
}

.playhq-status.empty {
  font-weight: 400;
}

.season-table th:first-child,
.season-table td:first-child,
.counts-table th:first-child,
.counts-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

.season-table th:first-child,
.counts-table th:first-child {
  z-index: 2;
}

.season-table td:first-child,
.counts-table td:first-child {
  background: white;
}

.counts-table th:first-child,
.counts-table td:first-child {
  width: 9rem;
  min-width: 9rem;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.counts-table th.number,
.counts-table td.number {
  width: 3rem;
}

.counts-table th:last-child,
.counts-table td:last-child {
  width: 5.5rem;
}

.season-cell {
  display: grid;
  gap: 0.25rem;
  min-width: 8.5rem;
}

.over-pill {
  min-height: 1.2rem;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 700;
}

.season-overs-input {
  max-width: 5rem;
  padding: 0.25rem 0.35rem;
  text-align: center;
}

.shirt-number-input {
  max-width: 5rem;
  text-align: center;
}

.total-cell,
tfoot th,
tfoot td {
  background: var(--pale-2);
  font-weight: 700;
}

.summary-round-picker {
  display: grid;
  gap: 0.25rem;
  min-width: 9rem;
  color: #4f6880;
  font-size: 0.82rem;
  font-weight: 700;
}

.summary-export-inline {
  align-self: center;
  min-width: 15rem;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
}

.summary-grid div {
  border: 1px solid var(--line);
  padding: 0.45rem;
}

.summary-label {
  background: var(--pale-2);
  font-weight: 700;
}

.summary-move-hint {
  margin: 0.25rem 0 0.5rem;
}

.summary-bowler-select {
  min-width: 8rem;
}

.summary-bowler-print {
  display: none;
}

.print-grid > section {
  min-width: 0;
}

.summary-move-controls {
  text-align: center;
  width: 7.5rem;
}

.summary-move-controls button {
  margin: 0.1rem;
  padding: 0.28rem 0.42rem;
  font-size: 0.78rem;
}

.summary-move-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.print-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 1rem;
  margin-top: 1rem;
}

.review-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
  margin: 0.8rem 0;
}

.review-controls label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 700;
  min-width: 160px;
  max-width: 100%;
}

.review-team-control {
  flex: 1;
}

#review .block {
  min-width: 0;
}

#review .grid > section {
  min-width: 0;
}

#review h3 {
  margin-bottom: 0.5rem;
}

.review-counts {
  min-width: 940px;
}

.review-counts th:first-child {
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  overflow-wrap: anywhere;
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
}

.review-counts td {
  min-width: 42px;
}

.review-counts thead th:not(:first-child) {
  text-align: center;
}

.review-counts tfoot th {
  color: var(--text);
}

.review-counts .review-flag {
  background: #fff1a8;
  color: #482e00;
  font-weight: 700;
}

.review-empty {
  padding: 1rem 0;
  color: #526b80;
}

.review-sources {
  padding-left: 1.3rem;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .app-header,
  .section-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .grid.two,
  .print-grid,
  .form-grid,
  .playhq-link-row,
  .playhq-grid {
    grid-template-columns: 1fr;
  }

  .playhq-actions {
    justify-content: flex-start;
  }

  .review-controls > label,
  .review-controls > button {
    flex: 1 1 100%;
    min-width: 0;
  }
}

@media print {
  body {
    background: white;
  }

  .app-header,
  .tabs,
  #setup,
  #season,
  #review,
  #guide {
    display: none !important;
  }

  .app-shell {
    max-width: none;
    padding: 0;
  }

  #summary {
    display: block !important;
  }

  .match-card {
    border: 0;
    padding: 0;
  }

  button,
  select,
  input {
    border: 0;
  }

  .summary-move-controls,
  .summary-move-hint,
  .summary-bowler-select {
    display: none !important;
  }

  .summary-bowler-print {
    display: inline;
  }

  .match-card .table-scroll {
    overflow: visible;
  }

  .match-card,
  .match-card * {
    background: white !important;
    color: black !important;
  }

  .match-card th,
  .match-card td,
  .summary-grid,
  .summary-grid div {
    border-color: black !important;
  }
}