:root {
  --ink: #1f2430;
  --muted: #6b7280;
  --border: #d8dce3;
  --bg: #f5f6f8;
  --card: #ffffff;
  --red: #c62828;
  --red-bg: #ffe3e3;
  --accent: #2f5fb3;
  --accent-bg: #eaf0fc;
  --yellow: #fff8dc;
  --green: #2e7d32;
}
* { box-sizing: border-box; }
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  margin: 0;
  padding: 0;
}
header.topbar {
  background: #24304a;
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
header.topbar h1 {
  font-size: 18px;
  margin: 0;
  font-weight: 600;
}
header.topbar nav a {
  color: #cdd7ee;
  text-decoration: none;
  margin-left: 18px;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 6px;
}
header.topbar nav a:hover, header.topbar nav a.active {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.admin-badge {
  display: inline-block;
  background: #c62828;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 6px;
}
header.topbar nav a.member-link, header.topbar nav a.admin-link {
  margin-left: 24px;
  border-left: 1px solid rgba(255,255,255,0.25);
  padding-left: 18px;
  opacity: 0.85;
}
main {
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 20px 60px;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}
h2 { margin-top: 0; }
.parish-header { text-align: center; margin-bottom: 20px; }
.parish-header .logo-wrap { display: flex; align-items: center; justify-content: center; gap: 12px; }
.parish-header .logo { width: 56px; height: 56px; flex-shrink: 0; }
.parish-header .diocese { font-size: 13px; color: var(--muted); }
.parish-header .name { font-size: 26px; font-weight: 700; margin: 4px 0; }
.parish-header .contact { font-size: 12px; color: var(--muted); }
.parish-header .schedule-title { color: var(--red); font-weight: 700; font-size: 18px; margin-top: 10px; }
.parish-header .sub-note { color: var(--red); font-weight: 600; font-size: 13px; }

.summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin-top: 16px; }

.summary-card {
  position: relative;
  border-radius: 16px;
  padding: 18px 18px 16px;
  background: linear-gradient(160deg, #ffffff 0%, #f6f8ff 100%);
  box-shadow: 0 1px 3px rgba(31,36,48,0.06), 0 8px 20px -8px rgba(31,36,48,0.15);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.summary-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(31,36,48,0.08), 0 16px 28px -10px rgba(31,36,48,0.22);
}
.summary-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 7px;
  background: linear-gradient(90deg, #6b7280, #9ca3af);
}
.summary-card.day-saturday::before { background: linear-gradient(90deg, #f59e0b, #fb923c); }
.summary-card.day-sunday::before { background: linear-gradient(90deg, #3b82f6, #6366f1); }
.summary-card.area-schedule { background: linear-gradient(160deg, #ffffff 0%, #ecfdf5 100%); }
.summary-card.area-schedule::before { background: linear-gradient(90deg, #0d9488, #14b8a6); }

.summary-card-date { font-weight: 800; font-size: 15.5px; color: var(--ink); margin-top: 6px; letter-spacing: -0.2px; }

.summary-card-role {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; margin: 9px 0 14px;
  color: #fff; box-shadow: 0 2px 6px -2px rgba(0,0,0,0.35);
}
.summary-card-role .role-word { text-transform: none; letter-spacing: 0; opacity: 0.92; font-weight: 600; }
.role-badge-comm { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.role-badge-l1 { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.role-badge-psalm { background: linear-gradient(135deg, #10b981, #047857); }
.role-badge-l2 { background: linear-gradient(135deg, #f59e0b, #d97706); }

.summary-team-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 7px 2px; border-top: 1px dashed rgba(31,36,48,0.12);
}
.summary-team-row:first-child { border-top: none; }
.summary-team-role { display: flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 600; }
.role-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.role-dot-comm { background: #7c3aed; }
.role-dot-l1 { background: #2563eb; }
.role-dot-psalm { background: #059669; }
.role-dot-l2 { background: #d97706; }
.summary-team-name { font-weight: 600; text-align: right; }
.summary-team-row.is-you {
  background: linear-gradient(90deg, rgba(124,58,237,0.06), rgba(37,99,235,0.06));
  margin: 0 -8px; padding: 7px 8px; border-radius: 8px; border-top-color: transparent;
}
.summary-team-row.is-you .summary-team-name { color: var(--accent); font-weight: 800; }
.summary-team-row.is-unassigned .summary-team-name { color: var(--muted); font-weight: 400; font-style: italic; }

.area-daytime-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.area-daytime-row label { font-size: 12px; color: var(--muted); font-weight: 600; }
.area-daytime-row input[type=date], .area-daytime-row input[type=time] {
  display: block; margin-top: 4px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px;
}
.area-day-label { font-size: 12px; font-weight: 700; color: var(--accent); padding-bottom: 7px; }
.area-role-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.area-role-label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 90px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; color: #fff; box-shadow: 0 2px 6px -2px rgba(0,0,0,0.35); flex-shrink: 0;
}
.area-person-select { flex: 1; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }

table.sched {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.sched th, table.sched td {
  border: 1px solid var(--border);
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
}
table.sched th { background: #e9ecf3; font-weight: 600; }
table.sched td.datecell { font-weight: 700; white-space: nowrap; background: #fafbfc; }
table.sched td.sticky-col { position: sticky; left: 0; z-index: 1; }
table.sched td.na-cell { background: #fafafa; color: #999; }
table.sched tbody tr.saturday-row td { background: #fdf1de; }
table.sched tbody tr.saturday-row td.na-cell { background: #fdf1de; }
table.sched tbody tr.saturday-row td.datecell { background: #f8ddb0; }
table.sched tbody tr.sunday-row td { background: #eaf3ff; }
table.sched tbody tr.sunday-row td.na-cell { background: #eaf3ff; }
table.sched tbody tr.sunday-row td.datecell { background: #cfe3fb; }
table.sched td.name-match {
  background: #fff176 !important;
  box-shadow: inset 0 0 0 2px #f9a825;
}
select.assign-select {
  width: 82%;
  vertical-align: middle;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px;
  font-size: 12px;
  background: #fff;
}
td.role-cell { min-width: 150px; }
table.sched td.role-cell.unassigned-cell { background: #e3e3e3 !important; }
.role-block-comm { border-left: 3px solid #7c9fe0; }

select.assign-select.flag-invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.25);
  animation: flagPulse 0.35s ease-in-out 3;
}
@keyframes flagPulse {
  0%, 100% { background-color: #fff; }
  50% { background-color: var(--red-bg); }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.badge.ok { background: #e2f4e2; color: var(--green); }
.badge.warn { background: var(--red-bg); color: var(--red); }

.roster-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.roster-table th, .roster-table td { border: 1px solid var(--border); padding: 6px 8px; }
.roster-table th { background: #e9ecf3; text-align: left; }
.roster-table input[type=text], .roster-table input[type=number] {
  width: 100%; padding: 4px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px;
}
.roster-table input[type=checkbox] { transform: scale(1.2); }
.roster-table tr.dirty td { background: var(--yellow); }
.notes-col { min-width: 220px; }

.roster-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.roster-toolbar input, .roster-toolbar select {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px;
}
.roster-toolbar input { min-width: 220px; }

table.roster-editor {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
table.roster-editor th, table.roster-editor td {
  border: 1px solid var(--border);
  padding: 5px 6px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
table.roster-editor th {
  background: #e9ecf3;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: normal;
  max-width: 56px;
  line-height: 1.25;
  text-align: center;
  vertical-align: bottom;
}
table.roster-editor th.sticky-col-left { text-align: left; max-width: none; }
table.roster-editor td.notes-col, table.roster-editor th.notes-col { white-space: normal; text-align: center; min-width: 0; width: 40px; }
table.roster-editor td.notes-col { position: relative; }
.notes-icon {
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 5px;
  opacity: 0.35;
  filter: grayscale(1);
}
.notes-icon:hover { background: #eef1f6; opacity: 0.7; }
.notes-icon.has-note { opacity: 1; filter: none; }
.notes-popover {
  display: none;
  position: fixed;
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  padding: 8px;
  width: 240px;
  white-space: normal;
  text-align: left;
}
.notes-popover.open { display: block; }
.notes-popover textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px;
  font-size: 12.5px;
  font-family: inherit;
  resize: vertical;
}
.notes-popover-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
.exception-icon.has-note { filter: none; opacity: 1; }
.exception-icon.has-note { color: var(--red); }
.exceptions-popover { width: 260px; }
.exceptions-list { max-height: 160px; overflow-y: auto; margin-bottom: 6px; }
.exceptions-empty { color: var(--muted); font-size: 12px; margin: 0 0 6px; }
.exception-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.exception-item:last-child { border-bottom: none; }
.exception-item form { margin: 0; }
.exception-delete {
  border: none;
  background: none;
  color: var(--red);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
}
.exception-add-form { border-top: 1px solid var(--border); padding-top: 6px; }
.exception-add-header { font-weight: 700; font-size: 12px; margin-bottom: 6px; color: var(--ink); }
.exception-time-select {
  width: 100%;
  font-size: 11px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 6px;
}
.exception-add-dates { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.exception-add-dates input[type=date] { flex: 1; font-size: 11px; padding: 3px; border: 1px solid var(--border); border-radius: 4px; }
.exception-add-dates span { font-size: 11px; color: var(--muted); }
.exception-add-form input[type=text] { width: 100%; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; margin-bottom: 6px; }
table.roster-editor td.sticky-col-left, table.roster-editor th.sticky-col-left {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  min-width: 110px;
}
table.roster-editor th.sticky-col-left { z-index: 3; background: #e9ecf3; }
table.roster-editor td.chk-col { text-align: center; }
table.roster-editor input[type=checkbox] { transform: scale(1.15); }
table.roster-editor input[type=text], table.roster-editor input[type=number], table.roster-editor select {
  padding: 3px 5px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px;
}
table.roster-editor tbody tr:nth-child(even) td.sticky-col-left { background: #fafbfc; }
table.roster-editor tbody tr:nth-child(even) { background: #fafbfc; }
table.roster-editor tbody tr.on-leave-row { opacity: 0.6; }
table.roster-editor tbody tr.on-leave-row td.sticky-col-left { background: #fff4e0; }

@keyframes rowSaveFlash {
  0% { background-color: #b7ecb2; }
  100% { background-color: transparent; }
}
table.roster-editor tbody tr.just-saved td { animation: rowSaveFlash 1.8s ease-out; }

.roster-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #1f2430;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  z-index: 2000;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.roster-toast.show { opacity: 1; transform: translateY(0); }
.roster-toast.error { background: var(--red); }

/* column-group coloring: weekday (gray) / Saturday (amber) / Sunday (blue), matching the Schedule page
   (indices shifted +1 from the original 4-14 range by the Area column added after Cat.) */
table.roster-editor th:nth-child(5), table.roster-editor td:nth-child(5),
table.roster-editor th:nth-child(6), table.roster-editor td:nth-child(6),
table.roster-editor th:nth-child(7), table.roster-editor td:nth-child(7),
table.roster-editor th:nth-child(8), table.roster-editor td:nth-child(8),
table.roster-editor th:nth-child(9), table.roster-editor td:nth-child(9),
table.roster-editor th:nth-child(10), table.roster-editor td:nth-child(10) {
  background: #eef0f3;
}
table.roster-editor th:nth-child(11), table.roster-editor td:nth-child(11) {
  background: #fdf1de;
}
table.roster-editor td:nth-child(12),
table.roster-editor td:nth-child(13),
table.roster-editor td:nth-child(14),
table.roster-editor td:nth-child(15) {
  background: #cfe3fb;
}
table.roster-editor th:nth-child(12),
table.roster-editor th:nth-child(13),
table.roster-editor th:nth-child(14),
table.roster-editor th:nth-child(15) {
  background: #9fc5f0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16,24,40,0.06);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.btn:hover { background: #24488f; box-shadow: 0 2px 5px rgba(16,24,40,0.14); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: #6b7280; }
.btn.secondary:hover { background: #565d68; }
.btn.danger { background: #b3261e; }
.btn.danger:hover { background: #8f1e18; }
.btn.small { padding: 4px 10px; font-size: 12px; }

/* Lower-emphasis destructive action: looks like a plain outlined button
   until hovered, so it doesn't visually compete with (or get misclicked
   alongside) everyday actions next to it. Full red only shows up as
   confirmation once the pointer is already over it. */
.btn.danger.quiet {
  background: transparent;
  color: #b3261e;
  border: 1px solid rgba(179,38,30,0.35);
  box-shadow: none;
}
.btn.danger.quiet:hover { background: #b3261e; color: #fff; border-color: #b3261e; }

/* Icon-only destructive action for dense repeated contexts (one per table
   row) — stays a muted gray at rest and only reads as "delete" on hover. */
.btn-icon-danger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; font-size: 15px; line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-icon-danger:hover { background: #b3261e; color: #fff; border-color: #b3261e; }

.btn.working {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  background: linear-gradient(270deg, #2f5fb3, #7aa4ec, #2f5fb3);
  background-size: 200% 100%;
  animation: btnShimmer 1.4s ease-in-out infinite;
}
.btn.working::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
}
@keyframes btnShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

.toolbar {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.toolbar select, .toolbar input[type=date] {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px;
}
.toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-divider { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; }
.toolbar-find {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
}
.toolbar-find label { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.toolbar-find select {
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 4px;
  font-size: 13px;
  border-radius: 5px;
}
.toolbar-find select:focus { outline: none; border-color: var(--border); background: #fff; }

.save-status { font-size: 13px; color: var(--muted); margin-left: 8px; }
.conflict-marker { color: var(--red); font-weight: 800; font-size: 14px; margin-left: 2px; cursor: help; vertical-align: middle; }
.conflict-footnote { font-size: 12px; color: var(--red); font-weight: 600; margin-top: 10px; }

.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  border-left: 4px solid transparent;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.flash-icon { font-size: 15px; line-height: 1.4; flex-shrink: 0; }
.flash-body { flex: 1; }
.flash-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  opacity: 0.5;
  padding: 2px 4px;
  color: inherit;
  flex-shrink: 0;
}
.flash-close:hover { opacity: 1; }
.flash.success { background: #e2f4e2; color: var(--green); border-left-color: var(--green); }
.flash.error { background: var(--red-bg); color: var(--red); border-left-color: var(--red); }

.adj-table { border-collapse: collapse; font-size: 12px; width: 100%; }
.adj-table th, .adj-table td { border: 1px solid var(--border); padding: 5px 7px; text-align: center; }
.adj-table th { background: #e9ecf3; white-space: pre-line; font-size: 11px; }
.adj-table td.viol { background: var(--red-bg); color: var(--red); font-weight: 700; }
.adj-table td.name-col { text-align: left; font-weight: 600; }

.legend-body p { line-height: 1.6; }
.legend-body h3 { margin-top: 24px; }