/* iQuestrian app pages (live/). Public pages (index, login, register) use styles/index.css. */

/* Aptos throughout. It isn't licensed for web embedding, so it shows where the device has it
   (Windows 11, Microsoft 365) and falls back to Segoe UI / the system sans elsewhere */
:root {
  --iq-font: Aptos, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-font-sans-serif: var(--iq-font);
  --bs-body-font-family: var(--iq-font);
  --iq-ease: cubic-bezier(.2, .7, .2, 1);
}

h1, h2, h3, h4,
.modal-title,
.iq-title,
.xp-card > .lead:first-child {
  font-family: var(--iq-font);
  letter-spacing: -.01em;
}

/* Every mention of the brand name is bold */
.iq-brand {
  font-weight: 700;
}

/* Account dropdown sits straight in the navbar (not in a collapse), so keep it floating at every width */
.navbar > .navbar-nav {
  flex-direction: row;
}
.navbar > .navbar-nav .dropdown-menu {
  position: absolute;
}
/* User initials in place of the account icon (scripts/navinitials.js) */
.iq-initials {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--bs-primary);
  color: var(--bs-success);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  vertical-align: middle;
  transition: background-color .2s ease;
}
.nav-link:hover .iq-initials,
.nav-link.show .iq-initials {
  background: #c1ddd5; /* primary lifted towards white */
}

/* Guilloché SVG (drawn by scripts/guilloche.js) */
[data-guilloche] svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
[data-guilloche] .g-line {
  fill: none;
  stroke: currentColor;
  stroke-width: .6;
  vector-effect: non-scaling-stroke;
  stroke-opacity: .55;
}
@keyframes iq-spin { to { transform: rotate(360deg); } }

/* Dark guilloché panel background, as used on the homepage hero */
.iq-welcome,
.iq-banner {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 50%, rgba(var(--bs-secondary-rgb), .45), transparent 60%),
    linear-gradient(115deg, rgba(42, 51, 48, .94) 0%, rgba(42, 51, 48, .8) 45%, rgba(61, 107, 96, .7) 100%),
    url("../../images/guillochie.png") center / cover;
}
.iq-welcome-seal .g-ring {
  transform-origin: 0 0;
  animation: iq-spin 240s linear infinite;
}
.iq-welcome-seal .g-ring-1,
.iq-welcome-seal .g-ring-3 {
  animation-direction: reverse;
}

/* ---------- App pages (live/): loading rosette, then content or welcome panel ---------- */
.iq-loading > :not(#pageloader) {
  display: none !important;
}
.iq-loader {
  display: flex;
  justify-content: center;
  padding: 5rem 0;
}
.iq-loader-seal {
  position: relative;
  width: 200px;
  aspect-ratio: 1;
}
.iq-loader-seal::after {
  /* Plain disc in the centre of the rosette for the key to sit on */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bs-body-bg);
  box-shadow: 0 0 0 2px rgba(var(--bs-success-rgb), .35);
  transform: translate(-50%, -50%);
}
.iq-loader-rosette {
  width: 100%;
  height: 100%;
  color: var(--bs-success);
  animation: iq-spin 8s linear infinite;
}
.iq-loader-rosette .g-line {
  stroke-opacity: .35;
}
.iq-loader-key {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 34%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  animation: iq-pulse 1.6s ease-in-out infinite;
}
.iq-loader-key img {
  /* iqkey.png is a light line drawing: shift it out of view and show its shadow in the brand green */
  display: block;
  width: 100%;
  transform: translateY(-1000px);
  filter: drop-shadow(0 1000px 0 var(--bs-success));
}
.iq-loaded > * {
  animation: iq-fade-up .6s var(--iq-ease) both;
}
.iq-welcome {
  width: calc(100% - var(--bs-gutter-x, 1.5rem));
  margin: 1rem calc(var(--bs-gutter-x, 1.5rem) * .5) 0;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: 1rem;
  color: var(--bs-light);
  box-shadow: 0 20px 50px rgba(42, 51, 48, .18);
}
.iq-welcome-seal {
  position: absolute;
  top: 50%;
  right: -8rem;
  width: 26rem;
  aspect-ratio: 1;
  transform: translateY(-50%);
  color: var(--bs-primary);
  opacity: .4;
  pointer-events: none;
}
.iq-welcome-body {
  position: relative;
  max-width: 36rem;
}
.iq-welcome-logo {
  width: 110px;
  margin-bottom: 1.25rem;
}
.iq-welcome h2 {
  font-family: var(--iq-font);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -.015em;
}
.iq-welcome p {
  color: rgba(var(--bs-light-rgb), .85);
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.65;
}
.iq-welcome .btn {
  border-radius: 999px;
  padding: .7rem 2rem;
  font-weight: 600;
  transition: transform .25s var(--iq-ease), box-shadow .25s var(--iq-ease);
}
.iq-welcome .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
}
@media (max-width: 767.98px) {
  .iq-welcome-seal {
    right: -14rem;
    opacity: .25;
  }
}

/* Light card bodies: a white rosette peeking in from the bottom right (image made by guilloche.js) */
.card-body.bg-lightshade {
  background-image: var(--iq-rosette-light, none);
  background-repeat: no-repeat;
  background-size: 340px 340px;
  background-position: right -150px bottom -150px;
}

/* ---------- Compliance explainer (live/explainer.html) ---------- */
.explainer {
  background: var(--bs-light);
}
.xp-controls {
  background: #fff;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 10px 30px rgba(42, 51, 48, .08);
}
.xp-controls label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bs-success);
  margin-bottom: .4rem;
}
.xp-effective {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: rgba(var(--bs-info-rgb), .12);
  color: var(--bs-info);
  font-size: .9rem;
  font-weight: 600;
}
.xp-summary {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem 1.75rem;
  border-radius: 1rem;
  color: #fff;
  box-shadow: 0 16px 40px rgba(42, 51, 48, .15);
}
.xp-summary::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -110px;
  width: 280px;
  height: 280px;
  background: var(--iq-rosette-light, none) center / contain no-repeat;
  opacity: .35;
  pointer-events: none;
}
.xp-summary.xp-ok { background: var(--bs-success); }
.xp-summary.xp-wait { background: var(--bs-warning); color: var(--bs-dark); }
.xp-summary.xp-stop { background: var(--bs-danger); }
.xp-summary-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  font-size: 2rem !important;
}
.xp-summary p {
  position: relative;
  margin: 0;
}
.xp-eyebrow {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}
.xp-summary-text {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
}
.xp-card {
  margin-bottom: 1.5rem;
  padding: 1.5rem 1.75rem;
  border-radius: 1rem;
  background: #fff;
  color: var(--bs-dark);
  box-shadow: 0 10px 30px rgba(42, 51, 48, .08);
}
.xp-card > .lead:first-child {
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(var(--bs-success-rgb), .15);
  color: var(--bs-success);
  font-weight: 600;
}
.xp-card p {
  line-height: 1.65;
}
.xp-final {
  border-left: 6px solid var(--bs-success);
}
.xp-final.xp-wait { border-left-color: var(--bs-warning); }
.xp-final.xp-stop { border-left-color: var(--bs-danger); }

/* Course steps and records as a vertical timeline */
.xp-card ul {
  position: relative;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
.xp-card ul::before {
  content: "";
  position: absolute;
  top: .5rem;
  bottom: .5rem;
  left: .45rem;
  width: 2px;
  background: rgba(var(--bs-success-rgb), .15);
}
.xp-card li {
  position: relative;
  margin-bottom: 1rem;
  padding-left: 2rem;
  line-height: 1.65;
}
.xp-card li::before {
  content: "";
  position: absolute;
  top: .45rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--bs-secondary);
  box-shadow: 0 0 0 1px rgba(var(--bs-success-rgb), .25);
}
.xp-card li.is-ok::before { background: var(--bs-success); }
.xp-card li.is-bad::before { background: var(--bs-danger); }
.xp-date {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bs-success);
}
.xp-card .badge {
  font-size: .75rem;
  letter-spacing: .05em;
  vertical-align: .1em;
}

/* ---------- Event page (live/event.html): users list and registered horses feed ---------- */
.eu-item,
.eh-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin-bottom: .6rem;
  padding: .85rem 1rem;
  border-radius: .75rem;
  background: #fff;
  color: var(--bs-dark);
  box-shadow: 0 4px 14px rgba(42, 51, 48, .06);
}
.eu-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(var(--bs-secondary-rgb), .15);
  color: var(--bs-secondary);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.eu-who {
  flex: 1 1 12rem;
  min-width: 0;
}
.eu-name {
  font-weight: 600;
  color: var(--bs-success);
}
.eu-email {
  font-size: .875rem;
  color: rgba(var(--bs-dark-rgb), .65);
  overflow-wrap: anywhere;
}
.eu-rolecol {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}
.eu-role {
  padding: .3rem .75rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
}
.eu-role-1 { background: var(--bs-success); color: #fff; }
.eu-role-2 { background: var(--bs-secondary); color: #fff; }
.eu-role-3 { background: rgba(var(--bs-info-rgb), .15); color: var(--bs-info); }
.eu-changebtn {
  border: 1px solid rgba(var(--bs-danger-rgb), .4);
  border-radius: 999px;
  color: var(--bs-danger);
  font-weight: 600;
}
.eu-changebtn:hover {
  background: var(--bs-danger);
  color: #fff;
}
.eu-panel {
  flex-basis: 100%;
  padding-top: .75rem;
  border-top: 1px solid rgba(var(--bs-success-rgb), .12);
}
.eu-controls {
  display: flex;
  gap: .5rem;
}
.eu-controls .form-select {
  flex: 1 1 auto;
  max-width: 16rem;
}
.eu-item .btn-danger {
  color: #fff;
}
.eu-warning {
  margin-top: .75rem;
  padding: .75rem 1rem;
  border-radius: .5rem;
  background: rgba(var(--bs-danger-rgb), .08);
  color: var(--bs-danger);
}
.eu-addform .form-control {
  min-width: 0;
}
@media (max-width: 575.98px) {
  /* On phones the role badge sits under the name, lined up with it */
  .eu-rolecol {
    margin-left: 3.5rem;
  }
}

.eh-item {
  border-left: 5px solid rgba(var(--bs-success-rgb), .15);
  transition: border-color .3s ease, background-color .3s ease;
}
.eh-main {
  flex: 1 1 16rem;
  min-width: 0;
}
.eh-name {
  font-weight: 700;
  color: var(--bs-success);
}
.eh-stable {
  font-weight: 400;
  color: rgba(var(--bs-dark-rgb), .6);
}
.eh-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  font-size: .875rem;
  color: rgba(var(--bs-dark-rgb), .7);
}
.eh-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .75rem;
  flex: 0 1 auto;
  max-width: 100%;
}
.eh-status:empty {
  display: none;
}
.eh-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .8rem;
  border-radius: .75rem;
  background: rgba(var(--bs-dark-rgb), .06);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
}
.eh-pill .material-symbols-outlined {
  font-size: 1.2rem;
}
.eh-manual {
  margin: 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--bs-danger);
}
.eh-manual:empty {
  display: none;
}
.eh-manual .material-symbols-outlined {
  font-size: 1.1rem !important;
}
.eh-more {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--bs-info);
  text-decoration: none;
}
.eh-more:hover {
  text-decoration: underline;
}
.eh-more .material-symbols-outlined {
  font-size: 1.1rem;
}
.eh-checking .eh-pill {
  color: rgba(var(--bs-dark-rgb), .6);
  animation: iq-pulse-fade 1.2s ease-in-out infinite;
}
/* Checked rows take the full status colour so the result reads at a glance */
.eh-ok { border-left-color: rgba(42, 51, 48, .3); background: var(--bs-success); color: #fff; }
.eh-wait { border-left-color: rgba(42, 51, 48, .3); background: var(--bs-warning); color: var(--bs-dark); }
.eh-stop { border-left-color: rgba(42, 51, 48, .3); background: var(--bs-danger); color: #fff; }
.eh-ok .eh-pill,
.eh-stop .eh-pill { background: rgba(255, 255, 255, .2); color: #fff; }
.eh-wait .eh-pill { background: rgba(255, 255, 255, .45); color: var(--bs-dark); }
.eh-ok .eh-name, .eh-ok .eh-stable, .eh-ok .eh-meta, .eh-ok .eh-more,
.eh-stop .eh-name, .eh-stop .eh-stable, .eh-stop .eh-meta, .eh-stop .eh-more,
.eh-stop .eh-manual { color: #fff; }
.eh-wait .eh-name, .eh-wait .eh-stable, .eh-wait .eh-meta, .eh-wait .eh-more { color: var(--bs-dark); }
.eh-ok .eh-stable, .eh-ok .eh-meta,
.eh-stop .eh-stable, .eh-stop .eh-meta { opacity: .85; }
.eh-wait .eh-manual { color: var(--bs-dark); }
#feedscandatenotice {
  margin-bottom: .75rem;
}

/* ---------- Event cards on event.html and eventplanner.html (#eventheader{id}) ---------- */
.card-header[id^="eventheader"] {
  padding: .8rem 1rem;
  background-image: var(--iq-rosette-light, none);
  background-repeat: no-repeat;
  background-size: 170px 170px;
  background-position: left -55px center;
  background-blend-mode: soft-light;
}
.evh {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.evh-name {
  flex: 1;
  min-width: 0;
  font-family: var(--iq-font);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.evh-badge {
  flex: none;
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.evh-mine {
  background: rgba(255, 255, 255, .2);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.evh-shared {
  background: var(--bs-warning);
  color: var(--bs-dark);
}

/* ---------- Event page: scan call-to-action in the event card footer ---------- */
.scan-footer {
  padding: .75rem;
}
.scan-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  background:
    var(--iq-rosette-light, none) right -60px center / 220px no-repeat,
    linear-gradient(110deg, var(--bs-success) 0%, var(--bs-secondary) 100%);
  background-blend-mode: soft-light, normal;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(42, 51, 48, .22);
  transition: transform .25s var(--iq-ease), box-shadow .25s var(--iq-ease);
}
/* Soft sheen that sweeps across on hover */
.scan-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .18) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform .7s var(--iq-ease);
}
.scan-cta:hover,
.scan-cta:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(42, 51, 48, .28);
}
.scan-cta:hover::after {
  transform: translateX(100%);
}
.scan-cta-icon {
  position: relative;
  overflow: hidden;
  flex: none;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: .9rem;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.scan-cta-icon .material-symbols-outlined {
  font-size: 2.6rem;
}
/* Scanner beam sweeping over the QR icon */
.scan-cta-beam {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 15%;
  height: 2px;
  border-radius: 2px;
  background: var(--bs-primary);
  box-shadow: 0 0 8px 2px rgba(var(--bs-primary-rgb), .8);
  animation: scan-beam 2.2s ease-in-out infinite;
}
.scan-cta-label {
  flex: 1;
  font-family: var(--iq-font);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.scan-cta-go {
  font-size: 2rem;
  opacity: .8;
  transition: transform .2s var(--iq-ease), opacity .2s ease;
}
.scan-cta:hover .scan-cta-go {
  opacity: 1;
  transform: translateX(4px);
}
@media (max-width: 575.98px) {
  .scan-cta {
    gap: 1rem;
    padding: .9rem 1.1rem;
  }
  .scan-cta-icon {
    width: 3.25rem;
    height: 3.25rem;
  }
  .scan-cta-icon .material-symbols-outlined {
    font-size: 2.1rem;
  }
  .scan-cta-label {
    font-size: 1.3rem;
  }
}
@keyframes scan-beam {
  0%, 100% { top: 15%; }
  50% { top: calc(85% - 2px); }
}
@media (prefers-reduced-motion: reduce) {
  .scan-cta-beam {
    animation: none;
    top: 50%;
  }
}

/* ---------- Profiles page (live/profiles.html) ---------- */
.pf-page h1 {
  font-family: var(--iq-font);
  font-weight: 600;
  letter-spacing: -.015em;
}
.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}
.pf-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.25rem;
  border: 0;
  border-radius: 1rem;
  background: var(--iq-rosette-light, none) right -70px center / 170px no-repeat, var(--bs-success);
  background-blend-mode: soft-light;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(42, 51, 48, .12);
  transition: transform .25s var(--iq-ease), box-shadow .25s var(--iq-ease);
}
.pf-tile:hover,
.pf-tile:focus-visible {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(42, 51, 48, .18);
}
.pf-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  font-size: 1.7rem;
}
.pf-label {
  flex: 1;
}
.pf-go {
  opacity: .7;
  transition: transform .2s var(--iq-ease), opacity .2s ease;
}
.pf-tile:hover .pf-go {
  opacity: 1;
  transform: translateX(3px);
}
/* Profile the user already has (on the add-a-profile screen) */
.pf-tile.disabled {
  background: rgba(var(--bs-dark-rgb), .08);
  color: rgba(var(--bs-dark-rgb), .45);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.pf-tile.disabled .pf-go {
  display: none;
}

/* ---------- Stable page: horse card headers (#horseheader{id}) ----------
   Targeted by id because checkcompliance() rewrites the header's class attribute */
.card-header[id^="horseheader"] {
  position: relative;
  padding: .75rem 1rem;
  background-image: var(--iq-rosette-light, none);
  background-repeat: no-repeat;
  background-size: 170px 170px;
  background-position: right -55px center;
  background-blend-mode: soft-light;
  transition: filter .2s ease;
}
.card-header[id^="horseheader"][style*="pointer"]:hover {
  filter: brightness(1.06);
}
.hh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
}
.hh-name {
  flex: 1 1 10rem;
  min-width: 0;
  font-family: var(--iq-font);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.hh-stable {
  display: inline;
  margin: 0 0 0 .3rem;
  font-family: var(--bs-font-sans-serif);
  font-size: .85rem;
  font-weight: 400;
  opacity: .75;
  white-space: nowrap;
}
.hh-stable.d-none {
  display: none;
}
.hh-status {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  max-width: 100%;
  padding: .3rem .75rem;
  border-radius: .75rem;
  background: rgba(var(--bs-dark-rgb), .06);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.3;
}
.hh-status:has(> .hh-icon:empty + .hh-text:empty) {
  display: none;
}
.hh-icon:empty {
  display: none;
}
.hh-icon .material-symbols-outlined {
  font-size: 1.2rem;
}
.card-header.bg-success .hh-status,
.card-header.bg-danger .hh-status {
  background: rgba(255, 255, 255, .18);
}
.card-header.bg-warning .hh-status {
  background: rgba(255, 255, 255, .45);
}
/* Plain header = compliance being (re)checked */
.card-header[id^="horseheader"]:not(.bg-success):not(.bg-warning):not(.bg-danger) .hh-status {
  animation: iq-pulse-fade 1.2s ease-in-out infinite;
}
/* Chevron pinned to the right edge once the header links somewhere */
.hh-go {
  display: none;
  position: absolute;
  top: 50%;
  right: .5rem;
  font-size: 1.5rem;
  opacity: .7;
  transform: translateY(-50%);
  transition: transform .2s var(--iq-ease), opacity .2s ease;
}
.card-header.bg-success,
.card-header.bg-warning,
.card-header.bg-danger {
  padding-right: 2.25rem;
}
.card-header.bg-success .hh-go,
.card-header.bg-warning .hh-go,
.card-header.bg-danger .hh-go {
  display: block;
}
.card-header[id^="horseheader"]:hover .hh-go {
  opacity: 1;
  transform: translate(3px, -50%);
}

/* ---------- Pop-ups (every live page) ----------
   Restyles the existing dark markup (bg-dark / bg-darksoft / text-light) without changing it */
.modal-content {
  border: 0 !important;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.modal-header,
.modal-header.bg-dark {
  padding: 1rem 1.25rem;
  border-bottom: 0;
  background: var(--iq-rosette-light, none) right -60px center / 170px no-repeat, var(--bs-success) !important;
  background-blend-mode: soft-light;
  color: #fff !important;
}
.modal-header .modal-title {
  font-weight: 600;
}
.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: .8;
}
.modal-body,
.modal-body.bg-darksoft {
  background: #fff !important;
  color: var(--bs-dark) !important;
}
/* Dark form fields and text inside pop-ups become light (error-highlighted fields keep their colours) */
.modal .bg-darksoft:not(.bg-danger-subtle) {
  background-color: #fff !important;
  color: var(--bs-dark) !important;
}
.modal .text-light:not([class*="bg-"]):not(.btn):not(.btn *) {
  color: var(--bs-dark) !important;
}
.modal .link-lightshade {
  color: var(--bs-secondary) !important;
}
.modal-footer,
.modal-footer.bg-dark,
.modal-footer.bg-darksoft {
  border-top: 1px solid rgba(var(--bs-success-rgb), .1);
  background: var(--bs-light) !important;
}
.modal-footer .btn {
  border-radius: 999px;
  padding-inline: 1.25rem;
  font-weight: 600;
}

/* ---------- Message toast (#messagelog, every live page) ---------- */
#messagelog {
  top: 1rem !important;
  width: auto !important;
  min-width: min(20rem, calc(100vw - 2rem));
  max-width: min(34rem, calc(100vw - 2rem));
  padding: .85rem 1.25rem .85rem 3.4rem !important;
  border-radius: 1rem !important;
  text-align: left !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
  animation: iq-toast-in .35s var(--iq-ease);
}
#messagelog::before {
  content: "\2713";
  position: absolute;
  top: 50%;
  left: 1rem;
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-top: -.825rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-weight: 700;
}
#messagelog.bg-danger::before {
  content: "!";
}
#messagelog p {
  margin: 0;
}
@keyframes iq-toast-in {
  from { opacity: 0; margin-top: -.75rem; }
  to { opacity: 1; margin-top: 0; }
}

/* ---------- Page toolbars and main action buttons ---------- */
.iq-toolbar {
  padding: 1rem 1.25rem 1.25rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(42, 51, 48, .08);
}
.iq-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bs-success);
}
.iq-action {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 1rem .55rem .6rem;
  border-radius: 999px;
  background: linear-gradient(110deg, var(--bs-info) 0%, #4a7597 100%);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(42, 51, 48, .18);
  transition: transform .25s var(--iq-ease), box-shadow .25s var(--iq-ease);
}
.iq-action:hover,
.iq-action:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(42, 51, 48, .24);
}
.iq-action-icon {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  font-size: 1.4rem;
}
.iq-filterbtn {
  border: 1px solid rgba(var(--bs-success-rgb), .3);
  border-radius: 999px;
  color: var(--bs-success);
  font-weight: 600;
}
.iq-filterbtn:hover,
.iq-filterbtn.show {
  background: var(--bs-success);
  color: #fff;
}

/* ---------- Scan result (event.html #qrscanmodal) and check.html ---------- */
.sr {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.sr-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  border-radius: 1rem;
  background: var(--iq-rosette-light, none) right -80px center / 260px no-repeat, var(--bs-success);
  background-blend-mode: soft-light;
  color: #fff;
  box-shadow: 0 16px 40px rgba(42, 51, 48, .18);
}
.sr-banner.sr-wait {
  background-color: var(--bs-warning);
  color: var(--bs-dark);
}
.sr-banner.sr-stop {
  background-color: var(--bs-danger);
}
.sr-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  font-size: 2.8rem !important;
}
.sr-status {
  position: relative;
  min-width: 0;
}
.sr-text {
  margin: 0;
  font-family: var(--iq-font);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.15;
}
.sr-date {
  margin: .4rem 0 0;
  font-size: .9rem;
  font-weight: 600;
  opacity: .85;
}
.sr-banner .eh-manual {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .6rem;
  padding: .3rem .85rem;
  border-radius: 999px;
  background: #fff;
  color: var(--bs-danger);
  font-size: .95rem;
}
.sr-banner .eh-manual:empty {
  display: none;
}
.sr-body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 1.5rem;
  align-items: center;
}
.sr-photo img {
  display: block;
  width: 100%;
  border-radius: .9rem;
  box-shadow: 0 10px 28px rgba(42, 51, 48, .15);
}
.sr-name {
  margin-bottom: .75rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--bs-success);
}
.sr-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .45rem 1.25rem;
  margin: 0;
}
.sr-facts dt {
  align-self: center;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(var(--bs-dark-rgb), .55);
}
.sr-facts dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.sr-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.sr-more,
.sr-next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1rem;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: transform .25s var(--iq-ease), box-shadow .25s var(--iq-ease), background-color .2s ease, color .2s ease;
}
.sr-more {
  border: 2px solid var(--bs-secondary);
  color: var(--bs-secondary);
}
.sr-more:hover {
  background: var(--bs-secondary);
  color: #fff;
}
.sr-next {
  background: linear-gradient(110deg, var(--bs-success) 0%, var(--bs-secondary) 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(42, 51, 48, .2);
}
.sr-next:hover {
  color: #fff;
  transform: translateY(-2px);
}
/* check.html: larger standalone versions */
.sr-banner-lg {
  padding: clamp(1.75rem, 5vw, 3rem);
}
.sr-banner-lg .sr-text {
  font-size: clamp(2.2rem, 7vw, 4rem);
  letter-spacing: .02em;
}
.sr-lead {
  margin: .5rem 0 0;
  font-size: 1.2rem;
}
.sr-horse {
  margin: 1rem 0 0;
  font-size: .95rem;
  opacity: .85;
}
.sr-next-lg {
  padding: 1.1rem 1.5rem;
  font-family: var(--iq-font);
  font-size: 1.5rem;
}
@media (max-width: 767.98px) {
  .sr-banner {
    gap: 1rem;
    padding: 1.25rem;
  }
  .sr-icon {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 2.2rem !important;
  }
  .sr-body,
  .sr-actions {
    grid-template-columns: 1fr;
  }
  /* At the gate, the next scan is the main action */
  .sr .sr-next {
    order: -1;
  }
}

/* ---------- Simple shared page elements (account.html, admin.php) ---------- */
.iq-title {
  font-family: var(--iq-font);
  font-weight: 600;
  letter-spacing: -.015em;
}
.iq-banner {
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  color: var(--bs-light);
}
.iq-banner .container {
  position: relative;
}
.iq-banner p {
  max-width: 40rem;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 300;
  color: rgba(var(--bs-light-rgb), .85);
}
.iq-panel {
  margin-top: 1rem;
  padding: 1.5rem 1.75rem;
  border-radius: 1rem;
  background: #fff;
  color: var(--bs-dark);
  box-shadow: 0 10px 30px rgba(42, 51, 48, .08);
}
.iq-panel h3 {
  font-family: var(--iq-font);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--bs-success);
}
.iq-panel-danger {
  border-left: 6px solid var(--bs-danger);
}
.iq-accordion .accordion-item {
  margin-bottom: .75rem;
  border: 0;
  border-radius: 1rem !important;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(42, 51, 48, .08);
}
.iq-accordion .accordion-button {
  font-weight: 600;
  color: var(--bs-success);
}
.iq-accordion .accordion-button:not(.collapsed) {
  background: rgba(var(--bs-primary-rgb), .3);
  color: var(--bs-success);
  box-shadow: none;
}

/* ---------- Vet code: entry box on the vet page, and the code shown to owners on the stable page ---------- */
.vet-code,
.vet-code-display {
  padding-left: calc(1rem + .45em);
  border: 2px solid rgba(var(--bs-success-rgb), .25);
  border-radius: .9rem;
  color: var(--bs-success);
  font-family: var(--bs-font-sans-serif);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: .45em;
  text-align: center;
}
.vet-code-display {
  margin: 1rem auto 0;
  max-width: 18rem;
  padding-block: .5rem;
  background: #fff;
}
.vet-code-display:empty {
  display: none;
}
.vet-code::placeholder {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  color: rgba(var(--bs-dark-rgb), .4);
}
.vet-code:focus {
  border-color: var(--bs-secondary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-secondary-rgb), .2);
}

/* ---------- Stable page: horse search (shown when there are more than 3 horses) ---------- */
.iq-search {
  position: relative;
}
.iq-search .material-symbols-outlined {
  position: absolute;
  top: 50%;
  left: .9rem;
  font-size: 1.3rem;
  color: var(--bs-secondary);
  transform: translateY(-50%);
  pointer-events: none;
}
.iq-search .form-control {
  padding-left: 2.75rem;
  border-radius: 999px;
}
.iq-searchhide {
  display: none !important;
}

/* ---------- Stable page: horse card footer actions ---------- */
.card-footer.hf {
  padding: .75rem;
}
.hf-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-bottom: .5rem;
}
.hf-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem .5rem;
  border: 0;
  border-radius: .75rem;
  background: var(--bs-info);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .2s ease, transform .2s var(--iq-ease);
}
.hf-primary .material-symbols-outlined {
  font-size: 1.5rem;
}
.hf-primary:hover {
  background: #4a7597;
  transform: translateY(-1px);
}
/* "Add" actions in green, so they read differently from "view" actions */
.hf-primary.hf-add {
  background: var(--bs-success);
}
.hf-primary.hf-add:hover {
  background: #325a50;
}

/* Vaccination record status (Vet verified / Owner created / Original scan / removed) as a pill */
.rec-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
  margin-bottom: .75rem;
  padding: .3rem .8rem .3rem .55rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
}
.rec-status .material-symbols-outlined {
  font-size: 1.15rem;
}
.rec-ok { background: var(--bs-success); color: #fff; }
.rec-warn { background: var(--bs-warning); color: var(--bs-dark); }
.rec-stop { background: var(--bs-danger); color: #fff; }
.rec-info {
  display: inline-grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  margin-left: .2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  color: var(--bs-dark);
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
}
.rec-info:hover {
  background: #fff;
  color: var(--bs-dark);
}
.hf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.hf-grid-2 {
  grid-template-columns: 1fr 1fr;
}
.hf-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  padding: .55rem .35rem;
  border: 0;
  border-radius: .75rem;
  background: rgba(255, 255, 255, .75);
  color: var(--bs-success);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: background-color .2s ease, color .2s ease;
}
.hf-tile .material-symbols-outlined {
  font-size: 1.5rem;
  color: var(--bs-secondary);
  transition: color .2s ease;
}
.hf-tile:hover,
.hf-tile:focus-visible {
  background: var(--bs-secondary);
  color: #fff;
}
.hf-tile:hover .material-symbols-outlined,
.hf-tile:focus-visible .material-symbols-outlined {
  color: #fff;
}
.hf-tile-danger,
.hf-tile-danger .material-symbols-outlined {
  color: var(--bs-danger);
}
.hf-tile-danger:hover,
.hf-tile-danger:focus-visible {
  background: var(--bs-danger);
}

/* ---------- Stable page (live/stable.html): events as tickets ---------- */
.ev-ticket {
  --ev-stub: 6rem;
  position: relative;
  display: flex;
  height: 100%;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 28px rgba(42, 51, 48, .1);
  transition: transform .25s var(--iq-ease), box-shadow .25s var(--iq-ease);
}
.ev-ticket:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(42, 51, 48, .14);
}
.ev-ticket.is-filtering {
  box-shadow: 0 0 0 3px var(--bs-secondary), 0 14px 34px rgba(42, 51, 48, .14);
}
.ev-stub {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  width: var(--ev-stub);
  padding: .6rem .4rem;
  border-radius: 1rem 0 0 1rem;
  background: var(--iq-rosette-light, none) right -70px bottom -70px / 190px no-repeat, var(--bs-success);
  background-blend-mode: soft-light;
  color: #fff;
  text-align: center;
  line-height: 1.1;
}
.ev-day {
  font-family: var(--iq-font);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
}
.ev-day sup {
  font-size: .45em;
  top: -.9em;
  margin-left: .05em;
}
.ev-month {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ev-main {
  flex: 1;
  min-width: 0;
  padding: .7rem 1rem;
  color: var(--bs-dark);
}
/* Countdown chip, sitting in the stub under the date */
.ev-when {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .3rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--bs-success);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ev-when.is-live {
  color: var(--bs-danger);
}
/* Same chip at the top of event cards on the event planner */
.ev-when-card {
  margin: 0;
  padding: .2rem .65rem;
  font-size: .72rem;
  box-shadow: 0 2px 6px rgba(42, 51, 48, .08);
}
.ev-when-card + [id^="eventdetails"] {
  margin-top: .6rem !important;
}
.ev-when.is-live::before {
  content: "";
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--bs-danger);
  animation: ev-live 1.6s ease-out infinite;
}
.ev-name {
  margin: 0;
  font-family: var(--iq-font);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bs-success);
  overflow-wrap: anywhere;
}
.ev-until {
  color: rgba(var(--bs-dark-rgb), .65);
}
.ev-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1rem;
  margin: .3rem 0 .45rem;
  font-size: .85rem;
}
.ev-meta .material-symbols-outlined {
  font-size: 1.1rem;
  vertical-align: -.2em;
  margin-right: .2rem;
}
.ev-place {
  color: var(--bs-info);
  font-weight: 600;
  text-decoration: none;
}
.ev-place:hover {
  text-decoration: underline;
}
.ev-protocol {
  color: rgba(var(--bs-dark-rgb), .75);
}
.ev-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .35rem 1rem;
  padding-top: .45rem;
  border-top: 1px solid rgba(var(--bs-success-rgb), .1);
  font-size: .85rem;
}
.ev-actions .form-check {
  margin: 0;
}
.ev-actions .form-check-input:checked {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}
/* Vet verified toggle (vet.html): green when on, matching the Vet verified pill */
#vetverifiedgroup .form-check-input:checked {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}
.ev-apply {
  padding: .15rem .75rem;
  border: 1px solid var(--bs-secondary);
  border-radius: 999px;
  color: var(--bs-secondary);
  font-weight: 600;
}
.ev-apply:hover {
  background: var(--bs-secondary);
  color: #fff;
}
.pastevent .ev-ticket {
  opacity: .7;
}
.pastevent .ev-stub {
  background-color: #7d8783;
}
.ev-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.ev-togglebtn {
  border: 1px solid rgba(var(--bs-success-rgb), .3);
  border-radius: 999px;
  color: var(--bs-success);
  font-weight: 600;
}
.ev-togglebtn:hover {
  background: var(--bs-success);
  color: #fff;
}
@media (max-width: 575.98px) {
  .ev-ticket {
    --ev-stub: 5.25rem;
  }
  .ev-day {
    font-size: 1.7rem;
  }
}
@keyframes ev-live {
  0% { box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), .5); }
  100% { box-shadow: 0 0 0 .5rem rgba(var(--bs-danger-rgb), 0); }
}

@keyframes iq-pulse-fade {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@keyframes iq-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(.92); }
  50% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes iq-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .iq-loaded > *,
  .iq-welcome *,
  .ev-ticket,
  .pf-tile,
  .scan-cta,
  .scan-cta::after {
    animation: none !important;
    transition: none !important;
  }
}