/* Application layout and light-mode theme variables. */
#events-app {
  --surface: rgba(255, 255, 255, 0.76);
  --ink: #172338;
  --muted: #5b6c80;
  --line: rgba(67, 92, 121, 0.18);
  --accent: #1769c2;
  --grid: #fff;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 0 0, #e5edf8, transparent 62%),
    linear-gradient(120deg, #f7f9fc, #eaf0f5);
  color: var(--ink);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
}
/* Dark-mode theme variables and background. */
#events-app[data-theme="dark"] {
  --surface: rgba(30, 42, 59, 0.82);
  --ink: #edf3fc;
  --muted: #a6b7cc;
  --line: rgba(177, 201, 230, 0.2);
  --accent: #79b5ff;
  --grid: #172336;
  background:
    radial-gradient(ellipse at 0 0, #243550, transparent 65%), #0e1726;
  color-scheme: dark;
}
#events-app * {
  box-sizing: border-box;
}
#events-app .glass {
  background: var(--surface);
  border: 1px solid var(--line);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
}
/* Header, navigation, content area and footer layout. */
#events-app header {
  padding: 16px 24px;
  border-width: 0 0 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
#events-app h1 {
  font-size: 24px;
  font-weight: 650;
  margin: 0;
  letter-spacing: -0.6px;
}
#events-app .brand-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
#events-app nav {
  padding: 7px 18px;
  border-width: 0 0 1px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
#events-app main {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 24px;
}
#events-app footer {
  padding: 10px 24px;
  border-width: 1px 0 0;
  min-height: 48px;
  flex-shrink: 0;
  display: flex;
  gap: 16px;
  align-items: center;
}
#events-status {
  flex: 1;
  white-space: pre-wrap;
}
#events-app .progress {
  width: 160px;
  height: 7px;
}
/* Keyboard focus and shared Bootstrap button styling. */
#events-app button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
#events-app .btn-link {
  color: var(--ink);
  text-decoration: none;
}
#events-app .btn-outline-primary {
  color: var(--accent);
  border-color: var(--accent);
}
#events-app .btn-outline-secondary {
  color: var(--ink);
  border-color: var(--line);
}
/* Event cards and the empty-state view. */
#events-app .cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
#events-app .event-card {
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 8px 24px rgba(17, 34, 60, 0.06);
}
#events-app h2 {
  font-size: 20px;
  margin: 0 0 12px;
  font-weight: 600;
}
#events-app .subtle {
  color: var(--muted);
}
#events-app .card-actions {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}
#events-app .empty {
  max-width: 540px;
  margin: 10vh auto;
  text-align: center;
  padding: 34px;
  border-radius: 24px;
}
/* Program heading and full-height grid host. */
#events-app .program-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 300px;
}
#events-app .program-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-bottom: 16px;
}
#events-grid-host {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
/* Settings, confirmation and contact dialogs. */
#events-app dialog {
  width: min(580px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  border-radius: 22px;
  padding: 28px;
  color: var(--ink);
  box-shadow: 0 22px 70px #0005;
}
#events-app dialog::backdrop {
  background: rgba(10, 22, 40, 0.4);
  backdrop-filter: blur(6px);
}
#events-app label {
  display: block;
  margin-bottom: 6px;
}
#events-app .field {
  margin-bottom: 16px;
}
#events-app .form-control {
  background: var(--grid);
  color: var(--ink);
  border-color: var(--line);
}
#events-app .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}
#events-dialog-error {
  color: #df5353;
  margin-top: 10px;
}
#events-app .contact-row {
  margin: 12px 0;
  overflow-wrap: anywhere;
}
#events-app a {
  color: var(--accent);
}
/* Theme integration and current-item highlighting for jqxGrid. */
#events-app .jqx-widget,
#events-app .jqx-widget-content {
  font-family: inherit;
  color: var(--ink);
  background: var(--grid);
  border-color: var(--line);
}
#events-app .jqx-widget-header,
#events-app .jqx-grid-column-header,
#events-app .jqx-grid-groups-header {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
#events-app .jqx-grid-cell {
  color: var(--ink);
  background: var(--grid);
  border-color: var(--line);
}
#events-app .jqx-fill-state-hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--grid));
  color: var(--ink);
}
#events-app .jqx-grid-cell-selected {
  background: color-mix(in srgb, var(--accent) 18%, var(--grid));
  color: var(--ink);
}
#events-app .events-current {
  background: color-mix(in srgb, #28a778 20%, var(--grid)) !important;
  color: var(--ink) !important;
  font-weight: 600;
  box-shadow: inset 0 -2px #28a778;
}
#events-app .jqx-grid-cell-pinned {
  background: var(--grid);
}
/* Compact layout for smaller screens. */
@media (max-width: 650px) {
  #events-app header {
    padding: 12px 16px;
  }
  #events-app main {
    padding: 16px;
  }
  #events-app footer {
    padding: 10px 16px;
  }
  #events-app .program-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  #events-app .brand-note {
    display: none;
  }
}
/* Respect the device preference for reduced animation. */
@media (prefers-reduced-motion: reduce) {
  #events-app * {
    transition: none !important;
  }
}
/* Grouped rows use group-cell classes rather than jqx-grid-cell. */
#events-app .jqx-grid-group-cell,
#events-app [role="gridcell"] {
  background: var(--grid);
  color: var(--ink);
  border-color: var(--line);
}
#events-app .jqx-grid-group-cell.events-current,
#events-app [role="gridcell"].events-current {
  background: color-mix(in srgb, #28a778 20%, var(--grid)) !important;
  color: var(--ink) !important;
  font-weight: 600;
  box-shadow: inset 0 -2px #28a778;
}
/* Business navy chrome, consistent in both appearance modes. */
#events-app header.glass {
  background: linear-gradient(
    115deg,
    rgba(18, 48, 79, 0.97),
    rgba(35, 73, 111, 0.96)
  );
  color: #f7fbff;
  border-color: #476583;
  box-shadow: 0 3px 14px #102b451a;
}
#events-app header .brand-note {
  color: #bfd1e4;
}
#events-app header .btn-outline-secondary {
  color: #f1f7ff;
  border-color: #7c99b6;
  background: #ffffff0c;
}
#events-app header .btn-outline-secondary:hover {
  background: #ffffff20;
}
#events-app nav.glass {
  background: rgba(24, 56, 88, 0.97);
  border-color: #476583;
}
#events-app nav .btn-link {
  color: #edf5ff;
}
#events-app nav .btn-link:hover {
  background: #ffffff15;
}
#events-app footer.glass {
  background: linear-gradient(110deg, #173550, #214563);
  color: #edf5fc;
  border-color: #486b8a;
}
#events-app[data-theme="dark"] header.glass {
  background: linear-gradient(115deg, #10263d, #193a59);
}
#events-app[data-theme="dark"] nav.glass {
  background: #122d46;
}
#events-app[data-theme="dark"] footer.glass {
  background: linear-gradient(110deg, #10283e, #173751);
}
/* Stopwatch toolbar, elapsed time and filter controls. */
#events-app .timing-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
#events-app .timing-item {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#events-app .timing-caption {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
  color: var(--muted);
}
#events-timing-item {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#events-stopwatch {
  font-size: 25px;
  line-height: 1.2;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  min-width: 86px;
  text-align: center;
}
#events-app .timing-actions {
  display: flex;
  gap: 7px;
}
#events-app .grid-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  flex-shrink: 0;
  font-size: 12px;
}
#events-app .events-day-label {
  padding: 8px 6px;
  font-weight: 650;
  color: var(--ink);
}
/* Native jqxGrid toggles. CSS chevrons remain visible without image/font dependencies. */
#events-app .jqx-grid-group-expand,
#events-app .jqx-grid-group-collapse {
  position: relative;
  background-image: none !important;
  cursor: pointer;
}
#events-app .jqx-grid-group-expand::after,
#events-app .jqx-grid-group-collapse::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  pointer-events: none;
}
#events-app .jqx-grid-group-expand::after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--ink);
}
#events-app .jqx-grid-group-collapse::after {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid var(--ink);
}
#events-app .jqx-input,
#events-app .jqx-dropdownlist-content,
#events-app .jqx-grid-cell-filter {
  color: var(--ink);
  background-color: var(--grid);
  border-color: var(--line);
}
@media (max-width: 700px) {
  #events-app .timing-bar {
    flex-wrap: wrap;
    gap: 10px;
  }
  #events-app .timing-item {
    flex-basis: 100%;
  }
  #events-app .grid-tools {
    align-items: flex-start;
  }
}

/* Inline vectors inherit the menu colour in both themes. */
#events-app nav .btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#events-app .events-menu-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  display: block;
}

#events-app .events-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
#events-app .events-brand-icon {
  width: 42px;
  height: 42px;
  display: block;
  flex-shrink: 0;
  border-radius: 10px;
}
/* Unassigned rows have no applicable check-in controls; preserve the cell layout. */
#events-app .events-not-applicable .jqx-checkbox {
  visibility: hidden;
  pointer-events: none;
}

/* Two-line headings for the independent check-in columns. */
#events-app .events-check-header {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 17px;
  padding: 5px 3px;
  font-size: 12px;
  text-align: center;
}