/* Mobile-first styles for the division schedule visualizer.
   Tested down to iPhone-SE width (375px). Tab bar sits at the bottom on
   phone for thumb reach; relocates above the content on wider screens. */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
               sans-serif;
  background: #f5f6f8;
  color: #1c1f23;
  font-size: 16px;
  line-height: 1.4;
  padding-bottom: 64px; /* leave room above the bottom tab bar */
  -webkit-text-size-adjust: 100%;
}

/* ----- shell ------------------------------------------------------------- */

.loading {
  padding: 2rem 1rem;
  color: #5a6470;
  text-align: center;
}

.topbar {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1rem;
  background: #fff;
  border-bottom: 1px solid #e3e7eb;
  z-index: 5;
}

.topbar .brand {
  font-weight: 600;
  font-size: 1.05rem;
}

.topbar .version {
  font-size: 0.78rem;
  color: #5a6470;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #eef2f6;
}

.topbar .version.stale {
  background: #fff1d6;
  color: #7a4d00;
}

.body {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
}

/* ----- bottom tab bar ---------------------------------------------------- */

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex;
  background: #fff;
  border-top: 1px solid #e3e7eb;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
}

.tabbar .tab {
  flex: 1;
  text-align: center;
  padding: 0.85rem 0;
  color: #5a6470;
  font-size: 0.9rem;
  text-decoration: none;
  min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}

.tabbar .tab.active {
  color: #1a73e8;
  font-weight: 600;
}

/* ----- day view ---------------------------------------------------------- */

.daynav {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem;
  gap: 0.5rem;
}

.daynav .navbtn {
  padding: 0.55rem 0.85rem;
  min-height: 44px;
  background: #fff;
  border: 1px solid #d6dbe0;
  border-radius: 8px;
  color: #1c1f23;
  text-decoration: none;
  display: inline-flex; align-items: center;
  font-size: 0.9rem;
}

.daynav .navbtn.disabled {
  color: #aab1b8;
  background: #f3f4f5;
  border-color: #e3e7eb;
}

.daynav .navcenter {
  flex: 1; text-align: center;
  font-size: 0.9rem;
}

.daynav .navlabel {
  display: inline-block;
  padding: 0.45rem 1rem;
  min-height: 44px;
  line-height: 1.3;
  background: #1a73e8;
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.25);
}

a.navlabel:hover, a.navlabel:focus {
  background: #1558b0;
}

.day-header { margin-bottom: 1.25rem; }

.day-header .weekday {
  color: #5a6470;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.day-header .date {
  font-size: 1.45rem;
  font-weight: 600;
  margin-top: 0.15rem;
}

.banner {
  display: inline-block;
  margin-top: 0.55rem;
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  font-size: 0.85rem;
}

.banner.holiday { background: #ffe9bf; color: #7a4d00; }
.banner.weekend { background: #e6efff; color: #1a4ca3; }

/* ----- site sections ----------------------------------------------------- */

.site {
  background: #fff;
  border: 1px solid #e3e7eb;
  border-radius: 10px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.site h2 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0;
  padding: 0.6rem 0.9rem;
  color: #5a6470;
  background: #fafbfc;
  border-bottom: 1px solid #eef0f3;
}

/* Per-site heading colors. Pastel backgrounds with darker tinted text so
   each section is distinguishable at a glance. */
.site-calls    h2 { background: #ffe2df; color: #9a2a0d; }
.site-toh      h2 { background: #dde9ff; color: #1a3f8a; }
.site-tohcc    h2 { background: #d4f0e7; color: #0d6b5a; }
.site-igfcc    h2 { background: #dff3d8; color: #1d6b15; }
.site-svh      h2 { background: #eadcfa; color: #5a2e8a; }
.site-rpct     h2 { background: #ffe6c8; color: #8a4a0c; }
.site-montfort h2 { background: #ffdde9; color: #8a1f4d; }
.site-qch      h2 { background: #fff0c2; color: #7a5300; }
.site-flex     h2 { background: #dde3eb; color: #3a4a5e; }

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

table.rolelist td {
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid #f1f3f5;
  font-size: 1rem;
  vertical-align: top;
}

table.rolelist tr:last-child td { border-bottom: none; }

table.rolelist td.role {
  color: #5a6470;
  width: 50%;
}

table.rolelist td.person {
  font-weight: 500;
}

/* ----- week view --------------------------------------------------------- */

.day-header .weekrange {
  color: #5a6470;
  font-size: 0.95rem;
  margin-top: 0.2rem;
}

.callgrid-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.callgrid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

table.callgrid th,
table.callgrid td {
  padding: 0.45rem 0.25rem;
  text-align: center;
  font-size: 0.88rem;
  border-bottom: 1px solid #f1f3f5;
  border-left: 1px solid #f5f6f8;
}

table.callgrid th { background: transparent; }

table.callgrid th .dayname {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5a6470;
  font-weight: 600;
}

table.callgrid th .daynum {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1c1f23;
  margin-top: 0.1rem;
}

table.callgrid td.role {
  text-align: left;
  font-weight: 600;
  color: #5a6470;
  font-size: 0.78rem;
  padding-left: 0.7rem;
  background: #fafbfc;
  border-left: none;
}

table.callgrid th.rolecol { border-left: none; background: #fafbfc; }

table.callgrid th.today,
table.callgrid td.today {
  background: #fffbe0;
}

table.callgrid td .muted { color: #b0b6bd; }

table.callgrid tr:last-child td { border-bottom: none; }

/* On phones the grid would crush names together; give it a min-width so
   the wrap scrolls horizontally instead. */
@media (max-width: 720px) {
  table.callgrid { min-width: 560px; }
}

@media (max-width: 420px) {
  table.callgrid th,
  table.callgrid td { padding: 0.4rem 0.2rem; font-size: 0.82rem; }
  table.callgrid td.role { font-size: 0.72rem; padding-left: 0.5rem; }
}

/* ----- month view (date-picker calendar) -------------------------------- */

.cal {
  background: #fff;
  border: 1px solid #e3e7eb;
  border-radius: 10px;
  overflow: hidden;
}

.cal-dayheads,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-dayheads {
  background: #fafbfc;
  border-bottom: 1px solid #eef0f3;
}

.cal-dayhead {
  padding: 0.5rem 0;
  text-align: center;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5a6470;
  font-weight: 600;
}

.cal-cell {
  position: relative;
  min-height: 64px;
  padding: 0.4rem 0.4rem 0.3rem;
  border-top: 1px solid #f1f3f5;
  border-left: 1px solid #f1f3f5;
  color: #1c1f23;
  text-decoration: none;
  display: flex; flex-direction: column;
}

.cal-cell:nth-child(7n+1) { border-left: none; }
.cal-grid > .cal-cell:nth-child(-n+7) { border-top: none; }

a.cal-cell { cursor: pointer; }
a.cal-cell:hover, a.cal-cell:focus { background: #f0f6ff; }

.cal-blank { background: #fafbfc; }
.cal-num { font-weight: 600; font-size: 0.95rem; }

.cal-cell.weekend { background: #f1f6ff; }
.cal-cell.holiday { background: #fff4dd; }
.cal-cell.today {
  outline: 2px solid #1a73e8;
  outline-offset: -2px;
  background: #fffbe0;
}
.cal-cell.out-of-range { color: #c6cbd1; background: #fcfcfd; }
.cal-cell.out-of-range .cal-num { font-weight: 400; }

.cal-holiday {
  margin-top: 0.15rem;
  font-size: 0.65rem;
  line-height: 1.2;
  color: #7a4d00;
  font-weight: 500;
  /* Truncate to 2 lines on tight phones */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cal-hint {
  text-align: center;
  color: #5a6470;
  font-size: 0.85rem;
  margin: 0.85rem 0 0;
}

@media (max-width: 420px) {
  .cal-cell { min-height: 56px; padding: 0.3rem 0.3rem 0.25rem; }
  .cal-holiday { font-size: 0.6rem; }
}

/* ----- person view ------------------------------------------------------- */

.person-picker { margin-top: 1rem; }

.person-search {
  width: 100%;
  font-size: 1rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid #d6dbe0;
  border-radius: 8px;
  background: #fff;
  outline: none;
  margin-bottom: 0.85rem;
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
}

.person-search:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}

.person-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.person-chip {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  background: #fff;
  border: 1px solid #d6dbe0;
  border-radius: 999px;
  color: #1c1f23;
  text-decoration: none;
  font-size: 0.9rem;
  min-height: 36px;
  line-height: 1.4;
}

.person-chip:hover,
.person-chip:focus { background: #f0f6ff; border-color: #1a73e8; }

.person-chip.selected {
  background: #1a73e8;
  color: #fff;
  border-color: #1a73e8;
}

.person-detail-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.person-detail-header h1 {
  margin: 0;
  font-size: 1.7rem;
}

.change-person {
  color: #1a73e8;
  text-decoration: none;
  font-size: 0.9rem;
}

.change-person:hover { text-decoration: underline; }

.currently-on {
  background: #eaf5ec;
  color: #1e5f2c;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.currently-on.muted {
  background: #f3f4f5;
  color: #5a6470;
  font-style: italic;
}

.person-actions { margin-bottom: 1rem; }

.print-btn {
  background: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

.print-btn:hover, .print-btn:focus { background: #1558b0; }

.person-section-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5a6470;
  margin: 1.5rem 0 0.5rem;
}

.week-block {
  background: #fff;
  border: 1px solid #e3e7eb;
  border-radius: 10px;
  margin-bottom: 0.7rem;
  overflow: hidden;
}

.week-block h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0.55rem 0.9rem;
  background: #fafbfc;
  border-bottom: 1px solid #eef0f3;
}

.week-block h3 a {
  color: #5a6470;
  text-decoration: none;
}

.week-block h3 a:hover { color: #1a73e8; }

/* ----- print stylesheet -------------------------------------------------- */

@media print {
  body {
    background: #fff;
    padding-bottom: 0;
    font-size: 12pt;
  }
  .topbar, .tabbar, .daynav, .no-print, .change-person { display: none !important; }
  .body { padding: 0; max-width: none; }
  .person-detail-header { margin-bottom: 0.5rem; }
  .currently-on { background: transparent; padding: 0 0 0.5rem 0; color: #000; }
  .week-block { break-inside: avoid; box-shadow: none; border: 1px solid #999; }
  .week-block h3 { background: transparent; }
  a { color: inherit; text-decoration: none; }
}

/* ----- misc -------------------------------------------------------------- */

.error {
  margin: 1rem;
  padding: 1rem;
  background: #fff5f5;
  border: 1px solid #f3c4c4;
  color: #8b0000;
  border-radius: 8px;
}

.empty {
  color: #5a6470;
  font-style: italic;
  padding: 0.75rem 0.9rem;
}

.stub {
  padding: 2.5rem 1rem;
  text-align: center;
  color: #5a6470;
}

.stub h1 { margin: 0 0 0.5rem; font-size: 1.3rem; }

/* ----- wider screens ----------------------------------------------------- */

@media (min-width: 720px) {
  body { padding-bottom: 0; }
  .tabbar {
    position: sticky;
    top: 49px; /* sits below the topbar */
    bottom: auto;
    border-top: none;
    border-bottom: 1px solid #e3e7eb;
    padding-bottom: 0;
  }
}