:root {
  --color-page: #f7f7f5;
  --color-surface: #ffffff;
  --color-surface-muted: #fafafa;
  --color-text: #0b0b0b;
  --color-muted: #777777;
  --color-border: #d9d9d9;
  --color-primary: #008a00;
  --color-primary-dark: #006f10;
  --color-danger: #c93838;
  --color-danger-bg: #fff1f1;
  --color-warning-bg: #ffe2a6;
  --color-warning-text: #5c3b00;
  --color-focus: rgba(0, 138, 0, 0.16);
  --shadow-soft: none;
  --shadow-card: none;
  --radius-large: 12px;
  --radius-medium: 10px;
  --radius-small: 7px;
}

* {
  box-sizing: border-box;
}

/* The hidden attribute is how the app gates role-specific controls, but any
   class that sets `display` (.primary-button, .secondary-button, .danger-button,
   panels) overrides the browser default and leaves the element on screen. This
   keeps `hidden` authoritative everywhere. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-page);
  color: var(--color-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.app-shell {
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 52px 18px 30px;
}

[data-page="attendance"] .app-shell {
  width: min(676px, 100%);
  min-height: 100vh;
  display: grid;
  align-content: center;
  padding-top: 32px;
  padding-bottom: 32px;
}

.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
}

.page-title-row h1 {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.1;
}

.event-header {
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: var(--radius-large);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}

.logo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.logo-frame {
  display: flex;
  min-height: 74px;
  align-items: center;
}

.logo-frame-left {
  justify-content: flex-start;
}

.logo-frame-center {
  justify-content: center;
}

.logo-frame-right {
  justify-content: flex-end;
}

.logo-frame img {
  display: block;
  max-width: min(100%, 150px);
  max-height: 72px;
  object-fit: contain;
}

.event-copy {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.app-label,
.section-label {
  margin: 0 0 4px;
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.event-copy h1 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.12;
}

.event-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--color-muted);
  font-weight: 600;
}

.event-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-muted);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.event-manager {
  margin-bottom: 10px;
  overflow: hidden;
  padding: 0;
}

.current-event-panel,
.archive-dashboard {
  margin-bottom: 18px;
}

.current-event-panel {
  display: grid;
  gap: 16px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.current-event-panel[hidden] {
  display: none;
}

.current-event-card {
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-large);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-card);
}

.current-event-card .panel-heading {
  gap: 18px;
}

.form-panel,
.table-panel {
  overflow: hidden;
  padding: 0;
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
}

.event-manager .panel-heading,
.current-event-card .panel-heading,
.form-panel .panel-heading,
.table-panel .panel-heading {
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding: 14px 20px;
}

.panel-heading h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}

.panel-link {
  color: #073f85;
  font-size: 0.74rem;
  text-decoration: underline;
}

.sr-badge,
.count-badge,
.status-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid #71d47d;
  background: #c9f5cb;
  color: var(--color-primary-dark);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-badge.is-closed {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.status-badge.is-pending {
  background: #eef6ff;
  color: #145ea8;
}

form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.event-settings-form,
.form-panel form {
  padding: 18px 20px 18px;
}

.form-field {
  display: grid;
  gap: 5px;
}

.form-field[hidden],
th[hidden],
td[hidden] {
  display: none;
}

.event-option-field {
  padding: 10px 12px;
  border: 1px solid #d5ddd8;
  border-radius: 7px;
  background: #f7fbf9;
}

.event-option-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #26352f;
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
}

.event-option-toggle input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--color-primary);
}

label {
  color: #555555;
  font-size: 0.67rem;
  font-weight: 700;
}

label span,
.field-error {
  color: var(--color-danger);
}

.optional-label {
  color: var(--color-muted);
  font-weight: 500;
}

input,
select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: #ffffff;
  color: var(--color-text);
  outline: none;
  padding: 8px 11px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

input::placeholder {
  color: #767676;
  opacity: 1;
}

input:focus,
select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-focus);
}

input[readonly] {
  background: var(--color-surface-muted);
  color: var(--color-primary-dark);
  font-weight: 800;
}

.signature-field {
  gap: 8px;
}

.signature-pad {
  overflow: hidden;
  min-height: 132px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: #ffffff;
}

.signature-pad canvas {
  display: block;
  width: 100%;
  height: 132px;
  cursor: crosshair;
  touch-action: none;
}

.signature-pad.is-disabled canvas {
  cursor: not-allowed;
}

.signature-clear-button {
  justify-self: start;
  min-width: 142px;
}

.field-error {
  min-height: 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.form-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 4px;
}

.primary-button,
.secondary-button,
.danger-button,
.row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  border-radius: var(--radius-small);
  font-weight: 700;
  padding: 0 14px;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.primary-button svg,
.secondary-button svg,
.danger-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.primary-button {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: none;
}

.secondary-button {
  border: 1px solid var(--color-border);
  background: #ffffff;
  color: var(--color-text);
}

.danger-button {
  border: 1px solid var(--color-border);
  background: #ffffff;
  color: var(--color-text);
}

.event-actions .primary-button {
  border: 1px solid var(--color-border);
  background: #ffffff;
  color: var(--color-text);
}

.event-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.dashboard-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: -16px 0 18px;
  max-width: 420px;
}

.attendance-page-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.attendance-page-actions .button-link {
  min-width: 136px;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.current-event-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 16px 20px 18px;
  background: linear-gradient(180deg, #ffffff, #f8fbfa);
}

.current-event-meta-item {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  background: #ffffff;
}

.current-event-meta-item strong {
  color: #667085;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.1;
  text-transform: uppercase;
}

.current-event-meta-item span {
  color: var(--color-text);
  font-size: 1.02rem;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.dashboard-count {
  gap: 5px;
}

.archive-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.archive-card {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 22px 25px 21px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-large);
  background: var(--color-surface);
}

.archive-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.archive-card-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.archive-card h3 {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.3;
}

.archive-title-group,
.archive-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.read-only-badge {
  display: inline-flex;
  gap: 7px;
  min-height: 28px;
  align-items: center;
  padding: 5px 13px;
  border: 1px solid #d0d0d0;
  border-radius: 999px;
  background: #ffffff;
  color: #5b5b5b;
  font-size: 0.86rem;
  font-weight: 700;
}

.archive-menu {
  position: relative;
  display: inline-flex;
}

.archive-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  border: 1px solid rgba(17, 24, 39, 0.14);
  border-radius: 999px;
  background: #ffffff;
  color: #344054;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.06);
}

.archive-menu-button:hover,
.archive-menu-button:focus-visible,
.archive-menu-button[aria-expanded="true"] {
  border-color: rgba(8, 127, 91, 0.28);
  background: #f2faf5;
  color: var(--color-primary-dark);
}

.archive-menu-button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.archive-menu-button svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
}

.archive-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 210px;
  padding: 8px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 22px 48px rgba(16, 24, 40, 0.18);
}

.archive-menu-panel[hidden] {
  display: none;
}

.archive-menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  border-radius: 7px;
  background: transparent;
  color: #1f2937;
  font-size: 0.93rem;
  font-weight: 750;
  text-align: left;
}

.archive-menu-item:hover,
.archive-menu-item:focus-visible {
  background: #f2faf5;
  color: var(--color-primary-dark);
}

.archive-menu-item:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
}

.archive-menu-item.is-danger {
  color: var(--color-danger);
}

.archive-menu-item.is-danger:hover,
.archive-menu-item.is-danger:focus-visible {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.archive-menu-item svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.archive-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 48px;
  color: var(--color-muted);
  font-size: 0.92rem;
}

.archive-meta-item {
  display: grid;
  gap: 1px;
}

.archive-meta strong {
  color: #8a8580;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.archive-meta span span {
  color: #111111;
  font-size: 1rem;
}

.archive-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
}

.archive-button {
  min-height: 38px;
  padding: 0 15px;
}

.archive-button.danger-button {
  border-color: #f0b8b8;
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.archive-button,
.read-only-badge,
.dashboard-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.archive-button svg,
.read-only-badge svg,
.archive-file-icon svg,
.dashboard-count svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.archive-file-icon {
  color: var(--color-primary-dark);
  display: inline-flex;
}

.text-link-button {
  min-height: auto;
  justify-self: start;
  border: 0;
  background: transparent;
  color: #064b93;
  padding: 0;
  text-decoration: underline;
}

.printable-report {
  position: relative;
  margin-bottom: 18px;
}

.printable-report.is-print-only {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.print-toolbar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.print-close-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(17, 24, 39, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #111827;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
  cursor: pointer;
}

.print-close-button:hover,
.print-close-button:focus-visible {
  background: #ffffff;
  border-color: rgba(17, 24, 39, 0.36);
}

.print-close-button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.print-close-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.print-sheet {
  overflow-x: auto;
  padding: 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: #ffffff;
  box-shadow: var(--shadow-card);
}

.print-logo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.print-logo-strip img {
  display: block;
  max-width: min(100%, 132px);
  max-height: 62px;
  object-fit: contain;
}

.print-logo-strip img:nth-child(2) {
  justify-self: center;
}

.print-logo-strip img:nth-child(3) {
  justify-self: end;
}

.print-sheet h2 {
  margin: 0 0 16px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.35;
}

.print-table {
  min-width: 1260px;
  border: 1px solid #4b5563;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

.print-table th,
.print-table td {
  border: 1px solid #4b5563;
  padding: 7px 8px;
  background: #ffffff;
  color: #111827;
  font-size: 0.86rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

.print-table th {
  position: static;
  top: auto;
  z-index: auto;
  text-transform: none;
}

.print-table td {
  height: 38px;
}

.print-table th:nth-child(1),
.print-table td:nth-child(1) {
  width: 54px;
}

.print-table th:nth-child(2),
.print-table td:nth-child(2) {
  width: 120px;
}

.print-table th:nth-child(3),
.print-table td:nth-child(3) {
  width: 130px;
}

.print-table th:nth-child(4),
.print-table td:nth-child(4) {
  width: 88px;
}

.print-table th:nth-child(5),
.print-table td:nth-child(5) {
  width: 170px;
}

.print-table th:nth-child(6),
.print-table td:nth-child(6) {
  width: 160px;
}

.print-table th:nth-child(7),
.print-table td:nth-child(7) {
  width: 190px;
}

.print-table th:nth-child(8),
.print-table td:nth-child(8) {
  width: 128px;
}

.print-table th:nth-child(9),
.print-table td:nth-child(9) {
  width: 86px;
}

.print-table th:nth-child(10),
.print-table td:nth-child(10) {
  width: 126px;
}

.print-table th.print-col-organization,
.print-table td.print-col-organization {
  width: 170px;
}

.print-table th.print-col-designation,
.print-table td.print-col-designation,
.print-table th.print-col-address,
.print-table td.print-col-address {
  width: 160px;
}

.print-table th.print-col-uc-nc,
.print-table td.print-col-uc-nc {
  width: 140px;
}

.print-table th.print-col-email,
.print-table td.print-col-email {
  width: 190px;
}

.print-table th.print-col-mobile,
.print-table td.print-col-mobile {
  width: 128px;
}

.print-table th.print-col-consent,
.print-table td.print-col-consent {
  width: 86px;
}

.print-table th.print-col-signature,
.print-table td.print-col-signature {
  width: 126px;
}

.print-table.has-both-details {
  min-width: 1420px;
}

.print-table.has-uc-nc {
  min-width: 1400px;
}

.print-table.has-both-details.has-uc-nc {
  min-width: 1560px;
}

.signature-preview,
.print-signature {
  display: block;
  width: 118px;
  height: 34px;
  object-fit: contain;
  object-position: left center;
}

.signature-preview {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #ffffff;
}

.signature-empty {
  color: var(--color-muted);
}

button:disabled,
input:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.closed-notice {
  margin: 18px 20px 0;
  padding: 10px 13px;
  border: 1px solid #f2a000;
  border-radius: var(--radius-small);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: 0.78rem;
  font-weight: 500;
}

.primary-button:not(:disabled):hover,
.secondary-button:not(:disabled):hover,
.danger-button:not(:disabled):hover,
.row-action:not(:disabled):hover {
  transform: translateY(-1px);
}

.primary-button:not(:disabled):active,
.secondary-button:not(:disabled):active,
.danger-button:not(:disabled):active,
.row-action:not(:disabled):active {
  transform: translateY(0);
}

.table-panel {
  overflow: hidden;
}

.table-heading {
  margin-bottom: 14px;
}

.table-heading-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.sync-button {
  min-height: 32px;
  padding: 0 12px;
}

.sync-status {
  min-width: 84px;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: right;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
}

table {
  width: 100%;
  min-width: 1320px;
  border-collapse: collapse;
}

th,
td {
  padding: 15px 14px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: break-word;
}

th {
  background: #f1f5f9;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

td {
  color: #25364d;
  font-size: 0.93rem;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover td {
  background: #fbfdfc;
}

.table-name {
  color: var(--color-text);
  font-weight: 800;
}

.muted-cell {
  color: var(--color-muted);
}

.action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.row-action {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid transparent;
  font-size: 0.84rem;
}

.edit-button {
  background: #eef6ff;
  color: #145ea8;
}

.delete-button {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.empty-state {
  display: none;
  margin-top: 14px;
  padding: 24px;
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius-medium);
  background: #fbfdff;
  text-align: center;
}

.empty-state.is-visible {
  display: block;
}

.empty-state h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.empty-state p {
  margin: 0;
  color: var(--color-muted);
}

@media (min-width: 640px) {
  .app-shell {
    padding: 52px 18px 30px;
  }

  [data-page="attendance"] .app-shell {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .event-header,
  .event-manager,
  .archive-dashboard,
  .form-panel,
  .table-panel {
    padding: 0;
  }

  .event-copy h1 {
    font-size: 2rem;
  }

  form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-settings-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .event-settings-form .form-field:first-child {
    grid-column: 1 / -1;
  }

  .event-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .current-event-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .archive-list {
    grid-template-columns: 1fr;
  }

  .archive-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-actions {
    grid-template-columns: auto auto auto auto auto;
    justify-content: start;
  }

  .full-width,
  .form-actions {
    grid-column: 1 / -1;
  }

  .form-actions {
    grid-template-columns: minmax(130px, 0.35fr) 1fr;
    justify-content: end;
  }

  .secondary-button[hidden] {
    display: none;
  }

  .secondary-button {
    grid-column: 1;
  }

  .primary-button {
    grid-column: 2;
  }

  .secondary-button[hidden] + .primary-button {
    grid-column: 1 / -1;
  }
}

@media (min-width: 980px) {
  .app-shell {
    padding: 52px 18px 30px;
  }

  [data-page="attendance"] .app-shell {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .event-header {
    padding: 30px 34px 34px;
  }

  .event-copy h1 {
    font-size: 2.35rem;
  }

  .content-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .form-panel {
    position: static;
  }
}

@media (min-width: 640px) {
  .event-actions .primary-button,
  .event-actions .secondary-button,
  .event-actions .danger-button,
  .dashboard-actions .primary-button,
  .dashboard-actions .secondary-button,
  .archive-actions .primary-button,
  .archive-actions .secondary-button,
  .archive-actions .danger-button,
  .archive-actions .text-link-button {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .app-shell {
    padding: 12px;
  }

  [data-page="attendance"] .app-shell {
    align-content: start;
    padding-top: 18px;
    padding-bottom: 24px;
  }

  .event-header,
  .event-manager,
  .archive-dashboard,
  .form-panel,
  .table-panel {
    border-radius: var(--radius-large);
    padding: 16px;
  }

  .logo-strip {
    gap: 8px;
    margin-bottom: 18px;
  }

  .logo-frame {
    min-height: 56px;
  }

  .logo-frame img {
    max-height: 54px;
  }

  .event-meta {
    flex-direction: column;
    align-items: stretch;
  }

  .event-meta span {
    justify-content: center;
  }

  .panel-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .table-heading-actions {
    justify-content: flex-start;
  }

  .sr-badge,
  .count-badge {
    align-self: flex-start;
  }
}

/* Interface refresh */
:root {
  --color-page: #f3f6f4;
  --color-surface: #ffffff;
  --color-surface-muted: #f8faf9;
  --color-text: #111827;
  --color-muted: #667085;
  --color-border: #d8dfda;
  --color-primary: #087f5b;
  --color-primary-dark: #056044;
  --color-secondary: #1d4ed8;
  --color-danger: #b42318;
  --color-danger-bg: #fff4f2;
  --color-warning-bg: #fff7d6;
  --color-warning-text: #7a4f01;
  --color-focus: rgba(8, 127, 91, 0.18);
  --shadow-soft: 0 14px 34px rgba(16, 24, 40, 0.08);
  --shadow-card: 0 12px 28px rgba(16, 24, 40, 0.07);
  --radius-large: 8px;
  --radius-medium: 8px;
  --radius-small: 6px;
}

body {
  background:
    linear-gradient(180deg, rgba(8, 127, 91, 0.06), rgba(29, 78, 216, 0.04) 34%, transparent 70%),
    var(--color-page);
}

.app-shell,
[data-page="attendance"] .app-shell {
  width: min(1180px, 100%);
  min-height: 100vh;
  display: block;
  align-content: initial;
  padding: 22px clamp(14px, 3vw, 34px) 34px;
}

[data-page="attendance"] .app-shell {
  width: min(1280px, 100%);
}

/* The registration list is the widest thing in the product. On a large screen
   the 1280px cap left a third of the display empty while the table scrolled
   sideways underneath it, so from 1400px the event page is allowed to use the
   room it has. Every other page keeps the narrower measure, which is the right
   width for reading. */
@media (min-width: 1400px) {
  [data-page="attendance"] .app-shell {
    width: min(1760px, 100%);
  }
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.1);
}

.brand-lockup {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 13px;
}

.brand-mark {
  display: inline-flex;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.08);
}

.brand-mark img {
  display: block;
  max-width: 46px;
  max-height: 46px;
  object-fit: contain;
}

.brand-lockup p,
.page-subtitle {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.brand-lockup h1 {
  margin: 0;
  color: var(--color-text);
  font-size: 1.08rem;
  line-height: 1.18;
}

.partner-logos {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 2vw, 22px);
}

.partner-logos img {
  display: block;
  max-width: 118px;
  max-height: 46px;
  object-fit: contain;
}

.page-title-row {
  align-items: flex-end;
  margin-bottom: 20px;
}

.attendance-title-row {
  margin-bottom: 18px;
}

.page-title-row h1 {
  margin-bottom: 7px;
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  letter-spacing: 0;
}

.page-title-actions {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.icon-button {
  width: 52px;
  min-width: 52px;
  height: 52px;
  min-height: 52px;
  padding: 0;
}

.icon-button svg {
  width: 24px;
  height: 24px;
}

.compact-action {
  min-height: 42px;
}

.section-label {
  color: var(--color-primary-dark);
  letter-spacing: 0.08em;
}

.panel {
  border-color: rgba(17, 24, 39, 0.12);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-card);
}

.event-manager,
.form-panel,
.table-panel {
  border-top: 3px solid var(--color-primary);
}

.event-manager {
  margin-bottom: 18px;
}

.panel-heading h2 {
  font-size: 1.05rem;
}

.event-manager .panel-heading,
.current-event-card .panel-heading,
.form-panel .panel-heading,
.table-panel .panel-heading {
  padding: 18px 22px;
  background: linear-gradient(180deg, #ffffff, #fbfcfb);
}

.status-badge,
.sr-badge,
.count-badge,
.read-only-badge {
  min-height: 34px;
  border-color: rgba(8, 127, 91, 0.24);
  background: #e8f7ef;
  color: var(--color-primary-dark);
}

.status-badge.is-pending {
  border-color: rgba(29, 78, 216, 0.22);
  background: #eff6ff;
  color: var(--color-secondary);
}

.status-badge.is-closed {
  border-color: rgba(180, 83, 9, 0.25);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.event-settings-form,
.form-panel form {
  padding: 22px;
}

label {
  color: #394150;
  font-size: 0.76rem;
  letter-spacing: 0.01em;
}

.form-field {
  gap: 7px;
}

input,
select {
  min-height: 46px;
  border-color: #d5ddd8;
  border-radius: 7px;
  background: #ffffff;
  color: var(--color-text);
  padding: 10px 13px;
}

input::placeholder {
  color: #9aa3af;
}

input[readonly] {
  background: #edf7f1;
  color: var(--color-primary-dark);
}

select {
  cursor: pointer;
}

.signature-pad {
  min-height: 150px;
  border-color: #cfd8d2;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 29px, rgba(17, 24, 39, 0.055) 30px),
    #ffffff;
}

.signature-pad canvas {
  height: 150px;
}

.primary-button,
.secondary-button,
.danger-button,
.row-action {
  min-height: 42px;
  border-radius: 7px;
  font-weight: 800;
  padding: 0 16px;
}

.primary-button {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(8, 127, 91, 0.18);
}

.primary-button:not(:disabled):hover {
  background: var(--color-primary-dark);
  box-shadow: 0 12px 22px rgba(8, 127, 91, 0.24);
}

.secondary-button {
  border-color: #cfd8d2;
  background: #ffffff;
  color: #1f2937;
}

.secondary-button:not(:disabled):hover {
  border-color: #9fb0a8;
  background: #f8faf9;
}

.danger-button {
  border-color: #f2b8b5;
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.danger-button:not(:disabled):hover {
  background: #ffe7e3;
}

.event-actions .primary-button {
  border-color: rgba(8, 127, 91, 0.28);
  background: #e8f7ef;
  color: var(--color-primary-dark);
  box-shadow: none;
}

.event-actions .primary-button:not(:disabled):hover {
  background: #d8f0e3;
  box-shadow: none;
}

.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: none;
  margin: 0 0 20px;
}

.dashboard-actions .primary-button,
.dashboard-actions .secondary-button {
  min-width: 190px;
}

.add-event-button {
  border: 0;
  box-shadow: 0 12px 22px rgba(8, 127, 91, 0.22);
}

.attendance-page-actions {
  margin: 0;
}

.attendance-page-actions .button-link {
  min-width: 142px;
}

.content-grid {
  gap: 18px;
}

.registration-launch-panel {
  display: flex;
  margin-bottom: 18px;
}

.registration-launch-panel[hidden] {
  display: none;
}

.registration-launch-panel .primary-button {
  min-width: 220px;
}

.table-panel {
  min-width: 0;
}

.table-heading {
  margin-bottom: 0;
}

.table-heading-actions {
  gap: 9px;
}

.sync-status {
  min-width: 92px;
  color: var(--color-muted);
}

.table-wrap {
  border-width: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
}

table {
  min-width: 1060px;
}

th,
td {
  padding: 13px 14px;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef3f0;
  color: #344054;
  font-size: 0.74rem;
}

td {
  color: #344054;
}

tbody tr:nth-child(even) td {
  background: #fcfdfc;
}

tbody tr:hover td {
  background: #f2faf5;
}

.row-action {
  min-height: 34px;
  padding: 7px 10px;
}

.edit-button {
  background: #eff6ff;
  color: var(--color-secondary);
}

.delete-button {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.archive-dashboard {
  margin-bottom: 22px;
}

.archive-list {
  gap: 16px;
}

.archive-card {
  gap: 16px;
  padding: 22px;
  border-color: rgba(17, 24, 39, 0.12);
  border-left-width: 5px;
  box-shadow: var(--shadow-card);
}

.archive-card h3 {
  font-size: 1.22rem;
}

.archive-file-icon {
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #e8f7ef;
}

.archive-meta {
  gap: 12px;
  padding: 2px 0;
}

.archive-meta-item {
  min-width: 0;
  padding: 10px 0;
}

.archive-meta strong {
  color: #667085;
}

.archive-meta span span {
  color: var(--color-text);
  font-weight: 600;
}

.archive-actions {
  gap: 9px;
}

.archive-button {
  min-height: 38px;
}

.empty-state {
  border-color: #b9c7c0;
  background: rgba(255, 255, 255, 0.72);
}

.closed-notice {
  margin: 18px 22px 0;
}

.toast-region {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 28px));
  pointer-events: none;
}

.is-printing .toast-region {
  display: none !important;
}

.toast-message {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(8, 127, 91, 0.2);
  border-radius: 8px;
  background: #ffffff;
  color: var(--color-text);
  box-shadow: 0 18px 42px rgba(16, 24, 40, 0.18);
  font-size: 0.92rem;
  font-weight: 750;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast-message.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-message svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.toast-success {
  color: var(--color-primary-dark);
}

.toast-error {
  border-color: rgba(180, 35, 24, 0.24);
  color: var(--color-danger);
}

.portal-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(17, 24, 39, 0.42);
}

.portal-modal {
  width: min(420px, 100%);
  padding: 22px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.22);
}

.portal-modal h2 {
  margin: 0 0 8px;
  font-size: 1.12rem;
  line-height: 1.25;
}

.portal-modal p {
  margin: 0;
  color: var(--color-muted);
}

.portal-modal-form {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.portal-modal-form label {
  color: var(--color-text);
  font-size: 0.86rem;
  font-weight: 750;
}

.portal-modal-form .portal-modal-actions {
  margin-top: 12px;
}

.portal-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.consent-field {
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid #d6a33c;
  border-left: 4px solid #a86400;
  border-radius: 7px;
  background: #fff7d6;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #3d2a00;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.55;
}

.checkbox-label input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--color-primary);
  flex: 0 0 auto;
}

.consent-content {
  display: grid;
  gap: 5px;
}

.consent-title {
  color: #7a4300;
  font-size: 0.92rem;
  font-weight: 800;
}

@media (min-width: 760px) {
  .event-settings-form {
    grid-template-columns: minmax(240px, 1.4fr) minmax(180px, 0.8fr) minmax(220px, 1fr);
  }

  .event-settings-form .form-field:first-child {
    grid-column: auto;
  }

  .event-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .current-event-meta {
    grid-template-columns: minmax(180px, 1.2fr) minmax(140px, 1fr) minmax(120px, 0.8fr);
  }

  .archive-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .content-grid.is-form-visible {
    grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
    align-items: start;
  }

  .form-panel {
    position: sticky;
    top: 18px;
  }

  .table-wrap {
    max-height: calc(100vh - 260px);
    overflow: auto;
  }
}

@media (max-width: 760px) {
  .app-shell,
  [data-page="attendance"] .app-shell {
    padding: 16px 12px 26px;
  }

  .app-topbar,
  .page-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-title-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .partner-logos {
    width: 100%;
    justify-content: space-between;
  }

  .partner-logos img {
    max-width: 31%;
  }

  .page-title-row h1 {
    font-size: 1.72rem;
  }

.panel-heading,
  .event-manager .panel-heading,
  .current-event-card .panel-heading,
  .form-panel .panel-heading,
  .table-panel .panel-heading {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }

  .event-settings-form,
  .form-panel form {
    padding: 16px;
  }

  .dashboard-actions,
  .event-actions,
  .form-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .portal-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .dashboard-actions .primary-button,
  .dashboard-actions .secondary-button,
  .attendance-page-actions .button-link {
    width: 100%;
    min-width: 0;
  }

  .compact-action {
    flex: 1 1 170px;
  }

  .toast-region {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }

  .archive-card {
    padding: 18px;
  }

  .archive-card-header {
    flex-direction: column;
  }

  .archive-card-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .archive-menu-panel {
    right: 0;
    min-width: min(230px, calc(100vw - 72px));
  }

  .archive-actions {
    grid-template-columns: 1fr;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.logo-only-topbar {
  justify-content: flex-end;
}

.logo-only-topbar .partner-logos {
  width: 100%;
  justify-content: flex-end;
}

.event-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  margin-bottom: 18px;
  border-top: 3px solid var(--color-primary);
}

.event-summary[hidden] {
  display: none;
}

.event-summary-body {
  min-width: 0;
}

.event-summary-body .section-label {
  margin-bottom: 2px;
}

.event-summary-body h2 {
  margin: 0 0 4px;
  font-size: 1.18rem;
  line-height: 1.25;
}

.event-summary-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: var(--color-muted);
  font-size: 0.86rem;
}

.event-summary-meta .meta-label {
  color: #667085;
  font-weight: 700;
  font-size: 0.76rem;
}

.event-summary-meta .meta-separator {
  color: #cbd5e1;
  margin: 0 2px;
}

.event-summary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.event-summary-actions .compact-action {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 0.86rem;
}

.event-summary-actions .compact-action svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 760px) {
  .event-summary {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }

  .event-summary-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

.landing-add-event {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.landing-add-event .add-event-button {
  min-width: 172px;
}

.actions-only {
  justify-content: flex-end;
}

.current-event-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.event-manager-heading[hidden] {
  display: none;
}

.event-manager .event-settings-form {
  border-top: 0;
}

.event-actions {
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .event-settings-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1100px) {
  .event-settings-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .logo-only-topbar {
    align-items: flex-end;
  }

  .logo-only-topbar .partner-logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 10px;
  }

  .logo-only-topbar .partner-logos img {
    width: 100%;
    max-width: 100%;
    max-height: 46px;
    justify-self: center;
  }

  .landing-add-event .add-event-button {
    width: 100%;
  }
}

/* Event QR and public self-registration */
.qr-modal {
  width: min(520px, 100%);
}

.qr-modal-heading {
  text-align: center;
}

.qr-modal-heading h2 {
  margin-bottom: 5px;
}

.qr-modal-heading p {
  line-height: 1.45;
}

.qr-image-frame {
  display: grid;
  width: min(320px, 100%);
  aspect-ratio: 1;
  place-items: center;
  margin: 18px auto;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #ffffff;
}

.qr-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qr-image-frame.has-error {
  padding: 24px;
  color: var(--color-danger);
  text-align: center;
  font-weight: 700;
}

.qr-link-label {
  display: grid;
  gap: 7px;
  color: #394150;
}

.qr-link-label input {
  font-size: 0.78rem;
  font-weight: 600;
}

.qr-modal-actions {
  flex-wrap: wrap;
}

[data-page="public-registration"] .public-registration-shell {
  width: min(820px, 100%);
  padding-top: 22px;
  padding-bottom: 42px;
}

.public-event-summary {
  margin-bottom: 18px;
  padding: 22px;
  border-top: 3px solid var(--color-primary);
}

.public-event-summary h1 {
  margin: 3px 0 16px;
  color: var(--color-text);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.18;
  letter-spacing: 0;
}

.public-event-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.public-event-meta > span {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.public-event-meta strong {
  color: var(--color-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.public-event-meta strong + span {
  overflow-wrap: anywhere;
  color: var(--color-text);
  font-weight: 700;
}

.public-page-message {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-card);
}

.public-page-message[hidden] {
  display: none;
}

.public-page-message-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e8f7ef;
  color: var(--color-primary-dark);
}

.public-page-message-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.public-page-message h2 {
  margin: 0 0 3px;
  font-size: 1.05rem;
}

.public-page-message p {
  margin: 0;
  color: var(--color-muted);
}

.public-page-message.is-error,
.public-page-message.is-closed {
  border-color: rgba(180, 35, 24, 0.25);
}

.public-page-message.is-success {
  border-color: rgba(8, 127, 91, 0.35);
  background: #f5fcf8;
}

.public-page-message.is-error .public-page-message-icon,
.public-page-message.is-closed .public-page-message-icon {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.public-form-panel {
  overflow: hidden;
  border-top: 3px solid var(--color-primary);
}

.public-form-panel[hidden] {
  display: none;
}

.public-form-panel .panel-heading {
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border);
}

.public-form-panel form {
  padding: 22px;
}

.public-form-actions {
  grid-template-columns: 1fr;
}

.public-form-actions .primary-button {
  width: 100%;
  grid-column: 1 / -1;
}

.checkbox-label span {
  color: inherit;
}

@media (max-width: 600px) {
  [data-page="public-registration"] .public-registration-shell {
    padding: 14px 12px 28px;
  }

  [data-page="public-registration"] .app-topbar {
    min-height: 58px;
    margin-bottom: 18px;
  }

  .public-event-summary,
  .public-form-panel .panel-heading,
  .public-form-panel form {
    padding: 16px;
  }

  .public-event-meta {
    grid-template-columns: 1fr;
  }

  .public-event-meta > span {
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: baseline;
  }

  .qr-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .qr-modal-actions button {
    width: 100%;
  }
}

@media print {
  @page {
    size: A4 landscape;
    margin: 12mm;
  }

  body {
    background: #ffffff;
  }

  .app-shell {
    width: 100%;
    padding: 0;
  }

  .app-shell > :not(.printable-report),
  .print-toolbar,
  .toast-region,
  .toast-message,
  .portal-modal-backdrop {
    display: none !important;
  }

  .printable-report {
    display: block !important;
    margin: 0;
  }

  .printable-report.is-print-only {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .print-sheet {
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .print-logo-strip {
    margin-bottom: 14px;
  }

  .print-logo-strip img {
    max-width: 120px;
    max-height: 58px;
  }

  .print-sheet h2 {
    margin-bottom: 14px;
    font-size: 14px;
  }

  .print-table {
    width: 100%;
    min-width: 0;
    border: 1.2px solid #111827 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    table-layout: fixed;
  }

  .print-table thead {
    display: table-header-group;
  }

  .print-table tbody {
    display: table-row-group;
  }

  .print-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .print-table th,
  .print-table td {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    border: 1.2px solid #111827 !important;
    padding: 5px 7px;
    background: #ffffff !important;
    color: #111827;
    font-size: 11px;
    line-height: 1.2;
    overflow-wrap: anywhere;
    vertical-align: middle;
  }

  .print-table td {
    height: 31px;
  }

  .print-table th:nth-child(1),
  .print-table td:nth-child(1) {
    width: 5%;
  }

  .print-table th:nth-child(2),
  .print-table td:nth-child(2) {
    width: 10%;
  }

  .print-table th:nth-child(3),
  .print-table td:nth-child(3) {
    width: 11%;
  }

  .print-table th:nth-child(4),
  .print-table td:nth-child(4) {
    width: 7%;
  }

  .print-table th:nth-child(5),
  .print-table td:nth-child(5) {
    width: 14%;
  }

  .print-table th:nth-child(6),
  .print-table td:nth-child(6) {
    width: 13%;
  }

  .print-table th:nth-child(7),
  .print-table td:nth-child(7) {
    width: 17%;
  }

  .print-table th:nth-child(8),
  .print-table td:nth-child(8) {
    width: 10%;
  }

  .print-table th:nth-child(9),
  .print-table td:nth-child(9) {
    width: 6%;
  }

  .print-table th:nth-child(10),
  .print-table td:nth-child(10) {
    width: 7%;
  }

  .print-table th.print-col-organization,
  .print-table td.print-col-organization {
    width: 14%;
  }

  .print-table th.print-col-designation,
  .print-table td.print-col-designation,
  .print-table th.print-col-address,
  .print-table td.print-col-address {
    width: 13%;
  }

  .print-table th.print-col-email,
  .print-table td.print-col-email {
    width: 17%;
  }

  .print-table th.print-col-mobile,
  .print-table td.print-col-mobile {
    width: 10%;
  }

  .print-table th.print-col-consent,
  .print-table td.print-col-consent {
    width: 6%;
  }

  .print-table th.print-col-signature,
  .print-table td.print-col-signature {
    width: 7%;
  }

  .print-table.has-both-details th:nth-child(1),
  .print-table.has-both-details td:nth-child(1) {
    width: 4%;
  }

  .print-table.has-both-details th:nth-child(2),
  .print-table.has-both-details td:nth-child(2) {
    width: 8%;
  }

  .print-table.has-both-details th:nth-child(3),
  .print-table.has-both-details td:nth-child(3) {
    width: 9%;
  }

  .print-table.has-both-details th:nth-child(4),
  .print-table.has-both-details td:nth-child(4) {
    width: 6%;
  }

  .print-table.has-both-details th.print-col-organization,
  .print-table.has-both-details td.print-col-organization,
  .print-table.has-both-details th.print-col-designation,
  .print-table.has-both-details td.print-col-designation {
    width: 11%;
  }

  .print-table.has-both-details th.print-col-address,
  .print-table.has-both-details td.print-col-address {
    width: 13%;
  }

  .print-table.has-both-details th.print-col-email,
  .print-table.has-both-details td.print-col-email {
    width: 16%;
  }

  .print-table.has-both-details th.print-col-mobile,
  .print-table.has-both-details td.print-col-mobile {
    width: 9%;
  }

  .print-table.has-uc-nc:not(.has-both-details) th:nth-child(1),
  .print-table.has-uc-nc:not(.has-both-details) td:nth-child(1) {
    width: 4%;
  }

  .print-table.has-uc-nc:not(.has-both-details) th:nth-child(2),
  .print-table.has-uc-nc:not(.has-both-details) td:nth-child(2) {
    width: 9%;
  }

  .print-table.has-uc-nc:not(.has-both-details) th:nth-child(3),
  .print-table.has-uc-nc:not(.has-both-details) td:nth-child(3) {
    width: 10%;
  }

  .print-table.has-uc-nc:not(.has-both-details) th:nth-child(4),
  .print-table.has-uc-nc:not(.has-both-details) td:nth-child(4) {
    width: 6%;
  }

  .print-table.has-uc-nc:not(.has-both-details) th.print-col-organization,
  .print-table.has-uc-nc:not(.has-both-details) td.print-col-organization,
  .print-table.has-uc-nc:not(.has-both-details) th.print-col-designation,
  .print-table.has-uc-nc:not(.has-both-details) td.print-col-designation,
  .print-table.has-uc-nc:not(.has-both-details) th.print-col-address,
  .print-table.has-uc-nc:not(.has-both-details) td.print-col-address {
    width: 12%;
  }

  .print-table.has-uc-nc:not(.has-both-details) th.print-col-uc-nc,
  .print-table.has-uc-nc:not(.has-both-details) td.print-col-uc-nc {
    width: 11%;
  }

  .print-table.has-uc-nc:not(.has-both-details) th.print-col-email,
  .print-table.has-uc-nc:not(.has-both-details) td.print-col-email {
    width: 15%;
  }

  .print-table.has-uc-nc:not(.has-both-details) th.print-col-mobile,
  .print-table.has-uc-nc:not(.has-both-details) td.print-col-mobile {
    width: 9%;
  }

  .print-table.has-uc-nc:not(.has-both-details) th.print-col-consent,
  .print-table.has-uc-nc:not(.has-both-details) td.print-col-consent {
    width: 5%;
  }

  .print-table.has-both-details.has-uc-nc th:nth-child(1),
  .print-table.has-both-details.has-uc-nc td:nth-child(1) {
    width: 4%;
  }

  .print-table.has-both-details.has-uc-nc th:nth-child(2),
  .print-table.has-both-details.has-uc-nc td:nth-child(2) {
    width: 7%;
  }

  .print-table.has-both-details.has-uc-nc th:nth-child(3),
  .print-table.has-both-details.has-uc-nc td:nth-child(3) {
    width: 8%;
  }

  .print-table.has-both-details.has-uc-nc th:nth-child(4),
  .print-table.has-both-details.has-uc-nc td:nth-child(4) {
    width: 5%;
  }

  .print-table.has-both-details.has-uc-nc th.print-col-organization,
  .print-table.has-both-details.has-uc-nc td.print-col-organization,
  .print-table.has-both-details.has-uc-nc th.print-col-designation,
  .print-table.has-both-details.has-uc-nc td.print-col-designation,
  .print-table.has-both-details.has-uc-nc th.print-col-uc-nc,
  .print-table.has-both-details.has-uc-nc td.print-col-uc-nc {
    width: 10%;
  }

  .print-table.has-both-details.has-uc-nc th.print-col-address,
  .print-table.has-both-details.has-uc-nc td.print-col-address {
    width: 11%;
  }

  .print-table.has-both-details.has-uc-nc th.print-col-email,
  .print-table.has-both-details.has-uc-nc td.print-col-email {
    width: 14%;
  }

  .print-table.has-both-details.has-uc-nc th.print-col-mobile,
  .print-table.has-both-details.has-uc-nc td.print-col-mobile,
  .print-table.has-both-details.has-uc-nc th.print-col-signature,
  .print-table.has-both-details.has-uc-nc td.print-col-signature {
    width: 8%;
  }

  .print-table.has-both-details.has-uc-nc th.print-col-consent,
  .print-table.has-both-details.has-uc-nc td.print-col-consent {
    width: 5%;
  }

  .print-signature {
    width: 106px;
    height: 27px;
  }

}

/* Secure portal access */
.session-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -14px 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.1);
}

.session-toolbar[hidden] {
  display: none;
}

.session-identity,
.session-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

#session-user-name {
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 750;
}

.session-role-badge,
.account-role-badge,
.account-status-badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid rgba(29, 78, 216, 0.2);
  border-radius: 999px;
  background: #eff6ff;
  color: var(--color-secondary);
  font-size: 0.72rem;
  font-weight: 800;
}

.session-role-badge.is-admin,
.account-role-badge.is-admin,
.account-status-badge {
  border-color: rgba(8, 127, 91, 0.24);
  background: #e8f7ef;
  color: var(--color-primary-dark);
}

[data-page="login"] .login-shell,
[data-page="setup"] .login-shell {
  width: min(720px, 100%);
}

.login-panel {
  width: min(460px, 100%);
  margin: 48px auto 0;
  overflow: hidden;
  border-top: 3px solid var(--color-primary);
}

.login-panel-heading {
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--color-border);
}

.login-panel-heading h1 {
  margin: 0;
  font-size: 1.65rem;
  letter-spacing: 0;
}

.login-panel-heading > p:last-child {
  margin: 5px 0 0;
  color: var(--color-muted);
}

.login-panel form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 24px;
}

.login-message {
  min-height: 22px;
  color: var(--color-muted);
  font-size: 0.84rem;
  font-weight: 650;
}

.login-message.is-error {
  color: var(--color-danger);
}

.login-message.is-success {
  color: var(--color-primary-dark);
}

.login-submit-button {
  width: 100%;
  grid-column: 1 / -1;
}

[data-page="users"] .users-shell {
  width: min(1180px, 100%);
}

.account-form-panel,
.accounts-list-panel {
  overflow: hidden;
  border-top: 3px solid var(--color-primary);
}

.account-form-panel {
  margin-bottom: 18px;
}

.account-form-panel form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 22px;
}

.account-form-actions {
  grid-column: 1 / -1;
}

.users-table {
  min-width: 760px;
}

.users-table td,
.users-table th {
  white-space: normal;
}

@media (max-width: 760px) {
  .session-toolbar {
    align-items: flex-start;
    flex-direction: column;
    margin-top: -10px;
  }

  .session-actions {
    width: 100%;
  }

  .session-actions .compact-action {
    flex: 1 1 140px;
  }

  .login-panel {
    margin-top: 24px;
  }

  .account-form-panel form {
    grid-template-columns: 1fr;
    padding: 16px;
  }
}

/* Registration list column sizing.
   Keeps short columns on one line and gives names, contact and action columns a
   usable minimum so cells cannot collapse to one character per line. */
.table-wrap .col-sr {
  width: 62px;
  min-width: 62px;
  white-space: nowrap;
}

.table-wrap .col-first-name,
.table-wrap .col-last-name {
  min-width: 118px;
}

.table-wrap .col-gender {
  min-width: 86px;
  white-space: nowrap;
}

.table-wrap .col-organization,
.table-wrap .col-designation {
  min-width: 150px;
  max-width: 260px;
}

.table-wrap .col-address {
  min-width: 180px;
  max-width: 300px;
}

.table-wrap .col-email {
  max-width: 240px;
}

/* Long single tokens (pasted URLs, unspaced text) break inside the column
   instead of stretching it across the page. Email is the exception: it has no
   break opportunities at all, so wrapping it cut the address in half
   mid-domain. It is clipped with an ellipsis instead — the cell carries the
   whole address as a tooltip, and the export carries it in full. */
.table-wrap .col-organization,
.table-wrap .col-designation,
.table-wrap .col-address,
.table-wrap .col-first-name,
.table-wrap .col-last-name {
  overflow-wrap: anywhere;
}

.table-wrap td.col-email {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-wrap .col-uc-nc {
  min-width: 112px;
}

.table-wrap .col-email {
  min-width: 170px;
}

.table-wrap .col-mobile {
  min-width: 126px;
  white-space: nowrap;
}

.table-wrap .col-consent {
  min-width: 92px;
  white-space: nowrap;
}

.table-wrap .col-signature {
  min-width: 116px;
}

.typed-signature-toggle {
  margin-top: 10px;
  color: var(--color-muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.typed-signature-toggle input {
  width: 16px;
  height: 16px;
  min-height: 0;
  accent-color: var(--color-primary);
}

/* A typed name is shown at the same size as a drawn signature, so the caption
   is what tells them apart at a glance in a long list. */
.signature-typed-note {
  display: block;
  margin-top: 2px;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Signed sheet scans
   --------------------------------------------------------------------------- */

.attachments-panel {
  margin-bottom: 18px;
  border-top: 3px solid var(--color-primary);
}

.attachments-panel[hidden] {
  display: none;
}

.attachments-heading-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.attachments-status {
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 650;
}

.attachments-note {
  margin: 0;
  padding: 0 20px 14px;
  color: var(--color-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.attachments-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 0 20px 16px;
}

/* The native file input is unstylable and says "No file chosen" forever, so a
   label stands in for it and the input itself stays hidden. */
.attachments-pick {
  cursor: pointer;
}

.attachments-hint {
  color: var(--color-muted);
  font-size: 0.82rem;
}

.attachments-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.attachments-empty {
  padding: 18px 20px;
  color: var(--color-muted);
  font-size: 0.88rem;
}

.attachments-item {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  border-bottom: 1px solid var(--color-border);
}

.attachments-item:last-child {
  border-bottom: 0;
}

.attachments-details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.attachments-name {
  overflow-wrap: anywhere;
  font-weight: 700;
}

.attachments-meta {
  color: var(--color-muted);
  font-size: 0.8rem;
}

.attachments-item-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

/* ---------------------------------------------------------------------------
   Bulk entry grid
   --------------------------------------------------------------------------- */

.bulk-entry-panel {
  margin-bottom: 18px;
  padding-bottom: 4px;
  border-top: 3px solid var(--color-primary);
}

.bulk-entry-panel[hidden] {
  display: none;
}

.bulk-entry-heading-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bulk-entry-status {
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 650;
}

.bulk-entry-note {
  margin: 0;
  padding: 0 20px 14px;
  color: var(--color-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.bulk-entry-wrap {
  border-top: 1px solid var(--color-border);
}

.bulk-entry-table {
  min-width: 1080px;
}

.bulk-entry-table th,
.bulk-entry-table td {
  padding: 6px 8px;
  vertical-align: middle;
}

.bulk-entry-table th {
  font-size: 0.72rem;
}

.bulk-entry-table input[type="text"],
.bulk-entry-table input[type="email"],
.bulk-entry-table select {
  width: 100%;
  min-width: 104px;
  /* The form inputs are sized for a thumb; a grid row has to stay compact or
     twenty of them will not fit a screen. */
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.86rem;
}

.bulk-entry-table input:focus,
.bulk-entry-table select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(8, 127, 91, 0.16);
}

.bulk-entry-table input[type="checkbox"] {
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0;
  accent-color: var(--color-primary);
}

/* Pinned at every width, unlike the records table. The grid is far wider than
   any screen — on a phone only three of its ten fields fit — so without this
   the serial scrolls away and you lose track of which row you are filling. It
   is one narrow column, so it costs little even on a 375px screen. */
.bulk-entry-table .bulk-col-sr {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 58px;
  min-width: 58px;
  background: var(--color-surface);
  box-shadow: 1px 0 0 var(--color-border);
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.bulk-entry-table th.bulk-col-sr {
  z-index: 3;
  background: #eef3f0;
}

.bulk-row.is-saved .bulk-col-sr {
  background: #f3fbf6;
}

.bulk-row.is-failed .bulk-col-sr {
  background: #fdf4f3;
}

.bulk-entry-table .bulk-col-status {
  min-width: 190px;
  max-width: 260px;
  font-size: 0.8rem;
  line-height: 1.35;
}

.bulk-row.is-saved td {
  background: #f3fbf6;
  color: var(--color-muted);
}

.bulk-row.is-saved .bulk-col-status {
  color: var(--color-primary-dark);
  font-weight: 700;
}

.bulk-row.is-failed td {
  background: #fdf4f3;
}

.bulk-row.is-failed .bulk-col-status {
  color: var(--color-danger);
  font-weight: 700;
}

.bulk-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px 18px;
  border-top: 1px solid var(--color-border);
}

.bulk-entry-actions .primary-button {
  margin-left: auto;
}

@media (max-width: 760px) {
  .bulk-entry-actions .primary-button {
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------------------
   Column chooser
   ---------------------------------------------------------------------------
   One rule per optional column, driven by a class on the scroll container, so
   hiding a column costs nothing at render time — the rows are not rebuilt. */

.table-wrap.hide-col-gender .col-gender,
.table-wrap.hide-col-organization .col-organization,
.table-wrap.hide-col-designation .col-designation,
.table-wrap.hide-col-address .col-address,
.table-wrap.hide-col-uc-nc .col-uc-nc,
.table-wrap.hide-col-email .col-email,
.table-wrap.hide-col-mobile .col-mobile,
.table-wrap.hide-col-consent .col-consent,
.table-wrap.hide-col-signature .col-signature,
.table-wrap.hide-col-entered-by .col-entered-by {
  display: none;
}

.columns-menu-button {
  gap: 7px;
}

.columns-hidden-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.columns-menu-panel {
  min-width: 230px;
  max-height: min(70vh, 520px);
  padding: 12px;
  overflow-y: auto;
}

.columns-menu-title {
  margin: 0 0 8px;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.columns-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 7px;
  color: #1f2937;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
}

.columns-menu-item:hover {
  background: #f2faf5;
}

.columns-menu-item input {
  width: 16px;
  height: 16px;
  /* The form inputs carry a touch-friendly `min-height`, which a checkbox in a
     menu row must not inherit — it made every row 60px tall. */
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.columns-menu-reset {
  width: 100%;
  margin-top: 8px;
  padding: 9px 10px;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 7px 7px;
  background: transparent;
  color: var(--color-primary-dark);
  font-size: 0.86rem;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.columns-menu-reset:hover {
  background: #f2faf5;
}

/* ---------------------------------------------------------------------------
   Registration list search
   --------------------------------------------------------------------------- */

.table-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 260px;
  min-width: 170px;
}

.table-search-icon {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--color-muted);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.table-search input {
  width: 100%;
  min-height: 40px;
  padding: 8px 34px 8px 34px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9rem;
}

.table-search input::placeholder {
  color: var(--color-muted);
}

.table-search input:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(8, 127, 91, 0.16);
}

/* The browser's own clear cross sits in the wrong place and does not tell the
   page it was pressed, so the button below replaces it. */
.table-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.table-search-clear {
  position: absolute;
  right: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}

.table-search-clear:hover {
  background: rgba(17, 24, 39, 0.07);
  color: var(--color-text);
}

.table-search-clear svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* Three stacked lines at most — who, when, and an edit note if there is one —
   so the column stays narrow while carrying the whole trail. */
.table-wrap .col-entered-by {
  min-width: 150px;
  max-width: 190px;
}

.table-wrap td.col-entered-by {
  display: table-cell;
}

.entered-by-name {
  display: block;
  font-weight: 600;
}

.entered-by-time,
.entered-by-edit {
  display: block;
  margin-top: 2px;
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.entered-by-edit {
  font-style: italic;
}

/* Wide enough to keep Edit and Delete on one line; wrapping them doubled every
   row's height. */
.table-wrap .col-actions {
  min-width: 168px;
  white-space: nowrap;
}

.table-wrap .col-actions .action-group {
  flex-wrap: nowrap;
}

.table-wrap table:not(.users-table) {
  min-width: 100%;
}

/* ---------------------------------------------------------------------------
   Pinned first and last columns
   ---------------------------------------------------------------------------
   With every optional column switched on the table needs about 1800px, so on
   any ordinary screen it scrolls sideways — and what scrolled away first were
   the two things staff need constantly: the serial number they are reading off
   a printed sheet, and the Edit / Delete buttons. Both are pinned to the edges
   instead, so the middle of the table can scroll underneath them.

   Only from 900px up. On a phone, 62px of serial plus 168px of actions would
   eat most of the screen and leave nothing to scroll. */

@media (min-width: 900px) {
  .table-wrap .col-sr {
    position: sticky;
    left: 0;
    z-index: 2;
  }

  .table-wrap .col-actions {
    position: sticky;
    right: 0;
    z-index: 2;
  }

  /* The header cells are already pinned to the top; at the corners they have to
     outrank the body cells sliding beneath them. */
  .table-wrap th.col-sr,
  .table-wrap th.col-actions {
    z-index: 3;
  }

  /* A pinned cell needs an opaque background of its own, and it has to follow
     the zebra striping and hover state or the row visibly breaks in two. */
  .table-wrap td.col-sr,
  .table-wrap td.col-actions {
    background: var(--color-surface);
  }

  .table-wrap tbody tr:nth-child(even) td.col-sr,
  .table-wrap tbody tr:nth-child(even) td.col-actions {
    background: #fcfdfc;
  }

  .table-wrap tbody tr:hover td.col-sr,
  .table-wrap tbody tr:hover td.col-actions {
    background: #f2faf5;
  }

  /* A shadow rather than a border: with border-collapse the pinned cell's own
     border is the one the browser drops when it starts overlapping. */
  .table-wrap .col-sr {
    box-shadow: 1px 0 0 var(--color-border);
  }

  .table-wrap .col-actions {
    box-shadow: -1px 0 0 var(--color-border);
  }

  /* Once the table is actually scrolled, the pinned edges are lifted off the
     rows passing underneath. */
  .table-wrap.is-scrolled-x .col-sr {
    box-shadow: 1px 0 0 var(--color-border), 6px 0 10px -6px rgba(17, 24, 39, 0.28);
  }

  .table-wrap.is-scrolled-end .col-actions {
    box-shadow: -1px 0 0 var(--color-border), -6px 0 10px -6px rgba(17, 24, 39, 0.28);
  }
}