/* ============================================================
   CertSys design system — "modern official credential"
   Deep emerald ink + gold seal accent on warm paper.
   Brand variables (--brand-primary / --brand-accent / --brand-font)
   are injected per tenant from the layout; everything below reacts.
   ============================================================ */

:root {
  --brand-primary: #116149;
  --brand-accent: #c9a227;
  --brand-font: 'Cairo', 'Segoe UI', sans-serif;

  --cs-bg: #f7f5f0;               /* warm paper */
  --cs-surface: #ffffff;
  --cs-surface-2: #fbfaf7;
  --cs-ink: #1c2a26;
  --cs-ink-soft: #5b6b66;
  --cs-line: #e5e1d8;
  --cs-shadow: 0 1px 2px rgba(28, 42, 38, .05), 0 10px 30px -12px rgba(28, 42, 38, .18);
  --cs-radius: 14px;
}

[data-bs-theme="dark"] {
  --cs-bg: #0f1513;               /* deep green-slate night */
  --cs-surface: #161f1c;
  --cs-surface-2: #1b2622;
  --cs-ink: #e8e6de;
  --cs-ink-soft: #9aa8a2;
  --cs-line: #26332e;
  --cs-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .55);
}

/* ---------- base ---------- */

html { font-size: 15px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  font-family: var(--brand-font);
  background-color: var(--cs-bg);
  color: var(--cs-ink);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* faint paper grain */
  background-image: radial-gradient(rgba(28, 42, 38, .025) 1px, transparent 1px);
  background-size: 22px 22px;
}
[data-bs-theme="dark"] body {
  background-image: radial-gradient(rgba(232, 230, 222, .02) 1px, transparent 1px);
}

.cs-main { flex: 1; padding-block: 2rem 3rem; }

h1, h2, h3, h4, h5, .navbar-brand, .card-header, .btn {
  font-family: var(--brand-font);
}
h1, h2 { font-weight: 800; letter-spacing: -.01em; }
h1 { position: relative; margin-bottom: 1.25rem; }

a { color: var(--brand-primary); }
a:hover { color: color-mix(in srgb, var(--brand-primary) 80%, black); }
[data-bs-theme="dark"] a:hover { color: color-mix(in srgb, var(--brand-primary) 70%, white); }

/* ---------- navbar ---------- */

.cs-navbar {
  background: var(--cs-surface);
  border-bottom: 1px solid var(--cs-line);
  position: relative;
  padding-block: .65rem;
}
.cs-navbar::after {
  /* signature hairline: primary → gold seal gradient */
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary) 55%, var(--brand-accent) 100%);
}
[dir="rtl"] .cs-navbar::after {
  background: linear-gradient(-90deg, var(--brand-primary) 0%, var(--brand-primary) 55%, var(--brand-accent) 100%);
}

.cs-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--cs-ink) !important;
}
.cs-brand-mark { width: 30px; height: 30px; }
.cs-brand-logo { height: 34px; width: auto; max-width: 130px; object-fit: contain; border-radius: 6px; }

/* The bar cannot wrap (.navbar-expand-lg forbids it), so without nowrap the *label*
   wrapped instead and two-word Arabic items collapsed onto two overlapping lines.
   The selector is doubled to outweigh Bootstrap's own .navbar-expand-lg .navbar-nav
   .nav-link padding rule, which otherwise wins inside its media query. */
.cs-navbar .navbar-nav .nav-link {
  color: var(--cs-ink-soft);
  font-weight: 600;
  padding-inline: .7rem;
  border-radius: 8px;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.cs-navbar .nav-link:hover {
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
}
/* Where you are. */
.cs-navbar .nav-link.active {
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
}

.cs-navbar .dropdown-menu {
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow);
  padding: .4rem;
  min-width: 14rem;
}
.cs-navbar .dropdown-item {
  border-radius: 8px;
  padding: .45rem .7rem;
  font-weight: 600;
  color: var(--cs-ink);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.cs-navbar .dropdown-item:hover, .cs-navbar .dropdown-item:focus {
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  color: var(--brand-primary);
}
.cs-navbar .dropdown-item .fa-solid { color: var(--brand-primary); width: 1rem; text-align: center; }
/* Group titles inside a menu (the platform-administration dropdown): quiet labels,
   not items — small caps-like weight, soft ink, never highlighted. */
.cs-navbar .dropdown-header {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--cs-ink-soft);
  padding: .35rem .7rem .2rem;
}

/* A long email must not be allowed to set the width of the whole bar. */
.cs-user-link { display: flex; align-items: center; gap: .4rem; max-width: 14rem; }
.cs-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cs-icon-btn, .cs-lang-btn {
  border: 1px solid var(--cs-line);
  background: var(--cs-surface-2);
  color: var(--cs-ink);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-weight: 600;
  transition: border-color .15s ease, transform .15s ease;
}
.cs-icon-btn:hover, .cs-lang-btn:hover {
  border-color: var(--brand-accent);
  transform: translateY(-1px);
}
/* The tools keep their size; only the main nav may compress. */
.cs-nav-tools { gap: .4rem; flex-shrink: 0; }

/* ---------- buttons ---------- */

.btn { border-radius: 10px; font-weight: 700; }

.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-primary) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-primary) 85%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--brand-primary) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand-primary) 75%, black);
  /* Bootstrap paints a disabled button from its OWN set of variables, which stay
     #0d6efd unless they are overridden here too — that blue is what showed while a
     button was locked and spinning, because locking disables it. */
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
  --bs-btn-disabled-color: #fff;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--brand-primary) 70%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--brand-primary) 75%, transparent);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  /* The pressed fill and the disabled text were left on Bootstrap's blue. */
  --bs-btn-active-bg: var(--brand-primary);
  --bs-btn-active-border-color: var(--brand-primary);
  --bs-btn-disabled-color: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}

/* ---------- cards ---------- */

.card {
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow);
  overflow: hidden;
}
.card-header {
  background: var(--cs-surface-2);
  border-bottom: 1px solid var(--cs-line);
  font-weight: 700;
  padding-block: .8rem;
}
.card.border-primary { border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--cs-line)); }

/* staggered entrance for cards & tables */
@media (prefers-reduced-motion: no-preference) {
  .cs-main .card, .cs-main .table-responsive, .cs-main > .container > table {
    animation: cs-rise .45s ease both;
  }
  .cs-main .card:nth-of-type(2) { animation-delay: .07s; }
  .cs-main .card:nth-of-type(3) { animation-delay: .14s; }
}
@keyframes cs-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- tables ---------- */

.table {
  --bs-table-bg: var(--cs-surface);
  border-color: var(--cs-line);
  border-radius: var(--cs-radius);
  overflow: hidden;
}
.table thead th {
  background: var(--cs-surface-2);
  color: var(--cs-ink-soft);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--cs-line) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-striped-bg: color-mix(in srgb, var(--cs-surface-2) 60%, transparent);
}

/* ---------- Tabulator: the theme is ours, the machinery is theirs ----------
   The vendored tabulator.min.css ships a white-on-grey look with its own font stack; every
   colour below re-routes it onto the identity variables so the tables follow the brand and
   the dark mode like the rest of the page. Direction needs no CSS at all — tables.js sets
   Tabulator's textDirection from the page's dir attribute, and Tabulator lays itself out
   logically from there (which is why the old DataTables start/inline-end overrides could
   simply go). */

.cs-table.tabulator {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
}
.cs-table .tabulator-header {
  /* A filled header row: the owner asked for tables whose anatomy reads at a glance,
     and a transparent header blended into the card behind it. */
  background: color-mix(in srgb, var(--cs-surface-2) 85%, transparent);
  border-bottom: 2px solid var(--cs-line);
  color: var(--cs-ink-soft);
}
.cs-table .tabulator-header .tabulator-col {
  background: transparent;
  border-right: none;
}
.cs-table .tabulator-header .tabulator-col .tabulator-col-content { padding: .55rem .5rem; }
.cs-table .tabulator-header .tabulator-col .tabulator-col-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* The sort arrow is drawn with border triangles; recolour all three states. */
.cs-table .tabulator-col-sorter .tabulator-arrow { border-bottom-color: var(--cs-line); }
.cs-table .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-arrow { border-bottom-color: var(--brand-primary); }
.cs-table .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-arrow { border-top-color: var(--brand-primary); }
.cs-table .tabulator-tableholder,
.cs-table.tabulator .tabulator-tableholder .tabulator-table {
  background: transparent;   /* the vendored theme paints these white under the rows */
  color: var(--cs-ink);
}
.cs-table .tabulator-row {
  background: transparent;
  color: var(--cs-ink);
  border-bottom: 1px solid var(--cs-line);
  min-height: 0;
}
.cs-table .tabulator-row.tabulator-row-even {
  background: color-mix(in srgb, var(--cs-surface-2) 85%, transparent);
}
.cs-table .tabulator-row:hover {
  background: color-mix(in srgb, var(--brand-primary) 7%, transparent);
}
.cs-table .tabulator-row:last-child { border-bottom: none; }
.cs-table .tabulator-row .tabulator-cell {
  border-right: none;
  padding: .55rem .6rem;
}
.cs-table .tabulator-header .tabulator-col.tabulator-sortable:hover,
.cs-table .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
  /* the second selector mirrors the vendor's grey-hover rule exactly, or #cdcdcd wins */
  background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  color: var(--brand-primary);
}
.cs-table .tabulator-placeholder .tabulator-placeholder-contents {
  color: var(--cs-ink-soft);
  font-size: 1rem;
  font-weight: 500;
  white-space: normal;
  padding: 1.25rem;
}
.cs-table .tabulator-footer {
  background: transparent;
  border-top: 1px solid var(--cs-line);
  color: var(--cs-ink-soft);
}
.cs-table .tabulator-footer .tabulator-footer-contents { padding: .5rem .25rem; }
.cs-table .tabulator-footer .tabulator-page-counter { color: var(--cs-ink-soft); }
.cs-table .tabulator-footer .tabulator-page {
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  color: var(--cs-ink);
  border-radius: 8px;
  margin-inline: 2px;
  min-width: 2rem;
  padding: .15rem .5rem;
}
.cs-table .tabulator-footer .tabulator-page:disabled { opacity: .45; }
.cs-table .tabulator-footer .tabulator-page.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.cs-table .tabulator-footer .tabulator-page:not(:disabled):hover {
  background: color-mix(in srgb, var(--brand-primary) 12%, var(--cs-surface));
  color: var(--cs-ink);
}
.cs-table .tabulator-footer .tabulator-page.active:hover {
  background: color-mix(in srgb, var(--brand-primary) 88%, black);
  color: #fff;
}

/* Empty chart body: a quiet centred word instead of bare axes or a dash. */
.cs-chart-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--cs-ink-soft);
}
.cs-chart-empty .fa-solid { font-size: 1.6rem; opacity: .55; }
.cs-chart-empty p { margin: 0; font-size: .9rem; }

/* The injected search box above a full-mode table (tables.js): a quiet
   magnifier-and-field at the inline end, the icon layered over the field's start. */
.cs-table-search {
  width: min(240px, 60vw);
  margin-inline-start: auto;
  margin-bottom: .5rem;
  position: relative;
}
.cs-table-search .fa-solid {
  position: absolute;
  inset-inline-start: .8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cs-ink-soft);
  font-size: .8rem;
  pointer-events: none;
}
.cs-table-search input {
  width: 100%;
  padding-inline-start: 2.1rem;
  border-radius: 999px;
}
/* Inside a card the table is flush with the edges; give the search box the card's air. */
.card .cs-table-search { margin: .75rem .75rem 0; }
.card .cs-table { padding-inline: .25rem; }

/* An unbroken technical string in a cell (the error log's URL path) must not stretch
   its column across the table: clip it with an ellipsis and carry the full value in
   the title attribute. A class, not an inline style — the table adapter copies a
   cell's class onto the rebuilt cell but not its style. */
.cs-cell-clip {
  display: inline-block;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* ---------- forms ---------- */

.form-control, .form-select {
  border-radius: 10px;
  border-color: var(--cs-line);
  background-color: var(--cs-surface);
  color: var(--cs-ink);
  padding-block: .55rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-primary) 18%, transparent);
}
.form-label { font-weight: 600; color: var(--cs-ink-soft); margin-bottom: .35rem; }
.form-control[type="color"] { min-height: 2.6rem; padding: .25rem; cursor: pointer; }

/* Tom Select (every select in the app): the WRAPPER is the visible box — border, radius
   and caret — because the bootstrap5 variant styles the wrapper, and an inner .ts-control
   border loses to it, which left the control looking like bare text. The caret is our own
   Font Awesome glyph (the variant's grey SVG arrow ignores the theme), so it follows the
   ink colour in dark mode and flips open/closed. The dropdown itself is appended to
   <body> (selects.js) so a card's overflow:hidden cannot cut it off — the explicit
   z-index keeps it above the sticky navbar. */
.ts-wrapper.form-select {
  position: relative;
  padding: 0;
  border: 1px solid var(--cs-line);
  border-radius: 10px;
  background-color: var(--cs-surface);
  background-image: none;   /* the variant's grey caret; ours is the ::after below */
}
.ts-wrapper.form-select::after {
  content: "\f078";                    /* fa-chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;                    /* the free solid style only exists at 900 */
  font-size: .7rem;
  color: var(--cs-ink-soft);
  position: absolute;
  inset-inline-end: .85rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: transform .15s ease;
}
.ts-wrapper.form-select.dropdown-active::after { transform: translateY(-50%) rotate(180deg); }
.ts-wrapper.focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-primary) 18%, transparent);
}
.ts-wrapper .ts-control {
  border: none;
  background: transparent;
  color: var(--cs-ink);
  padding: .55rem .75rem;
  padding-inline-end: 2.2rem;          /* room for the caret */
  box-shadow: none;
}
.ts-wrapper .ts-control input { color: var(--cs-ink); }
.ts-dropdown {
  border-radius: 10px;
  border: 1px solid var(--cs-line);
  background: var(--cs-surface);
  color: var(--cs-ink);
  font-family: var(--brand-font);
  z-index: 1080;                       /* above the sticky navbar */
  box-shadow: 0 10px 30px rgb(0 0 0 / .12);
}
.ts-dropdown .option { padding: .45rem .75rem; }
.ts-dropdown .option.active {
  background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  color: var(--cs-ink);
}
.ts-dropdown .option.selected { color: var(--brand-primary); font-weight: 600; }
.ts-dropdown .no-results { color: var(--cs-ink-soft); padding: .45rem .75rem; }
.ts-dropdown input.dropdown-input {
  border-color: var(--cs-line);
  background: var(--cs-surface-2);
  color: var(--cs-ink);
}

/* ---------- badges ---------- */

.badge { font-weight: 700; border-radius: 999px; padding: .45em .8em; }
.badge.text-bg-success { background: color-mix(in srgb, var(--brand-primary) 88%, black) !important; }
.badge.text-bg-light {
  background: var(--cs-surface-2) !important;
  color: var(--cs-ink-soft) !important;
  border: 1px solid var(--cs-line);
}

/* ---------- hero (home) ---------- */

.cs-hero {
  position: relative;
  text-align: center;
  padding: 4rem 1.5rem 3.5rem;
  margin-block: 1rem 2.5rem;
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: 22px;
  box-shadow: var(--cs-shadow);
  overflow: hidden;
}
/* certificate frame corners */
.cs-hero::before, .cs-hero::after {
  content: "";
  position: absolute;
  width: 64px; height: 64px;
  border: 3px solid var(--brand-accent);
  opacity: .8;
}
.cs-hero::before { top: 14px; inset-inline-start: 14px; border-inline-end: none; border-bottom: none; border-start-start-radius: 12px; }
.cs-hero::after { bottom: 14px; inset-inline-end: 14px; border-inline-start: none; border-top: none; border-end-end-radius: 12px; }

.cs-hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 900; }
.cs-hero h1 .cs-underline {
  background: linear-gradient(transparent 68%, color-mix(in srgb, var(--brand-accent) 45%, transparent) 0);
  padding-inline: .15em;
}
.cs-hero .lead { color: var(--cs-ink-soft); max-width: 42rem; margin-inline: auto; }

.cs-feature {
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  padding: 1.6rem 1.4rem;
  height: 100%;
  box-shadow: var(--cs-shadow);
  transition: transform .18s ease, border-color .18s ease;
}
.cs-feature:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--cs-line)); }
.cs-feature .cs-feature-icon {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  font-size: 1.5rem;
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  margin-bottom: .8rem;
}
.cs-feature h3 { font-size: 1.1rem; font-weight: 800; }
.cs-feature p { color: var(--cs-ink-soft); margin-bottom: 0; }

/* ---------- landing page: how it works, details, trust, cta ---------- */

.cs-step {
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  padding: 1.3rem 1.1rem;
  box-shadow: var(--cs-shadow);
}
.cs-step-num {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-weight: 800;
  margin-bottom: .6rem;
}
.cs-step h3 { font-size: 1rem; font-weight: 800; margin-bottom: .35rem; }
.cs-step p { color: var(--cs-ink-soft); font-size: .93rem; margin-bottom: 0; }

.cs-detail {
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  padding: 1.5rem 1.4rem;
  box-shadow: var(--cs-shadow);
}
.cs-detail-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.cs-detail-head .fa-solid { font-size: 1.4rem; color: var(--brand-primary); }
.cs-detail-head h3 { font-size: 1.1rem; font-weight: 800; margin: 0; }

.cs-checklist { list-style: none; padding: 0; margin: 0; }
.cs-checklist li {
  position: relative;
  padding-inline-start: 1.6rem;
  margin-bottom: .55rem;
  color: var(--cs-ink-soft);
}
.cs-checklist li::before {
  content: "\f00c";                     /* fa-check */
  font-family: "Font Awesome 6 Free";
  position: absolute;
  inset-inline-start: 0;
  color: var(--brand-primary);
  font-weight: 900;                      /* the free solid style only exists at 900 */
}

.cs-trust {
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: 22px;
  padding: 2rem 1.6rem;
  box-shadow: var(--cs-shadow);
}
/* ---------- the interactive "what does signed mean" panel ----------
   A working miniature of /verify/{code}: two buttons flip #trust-demo between
   data-state="valid" and "revoked", and every state-dependent bit of the card is a
   .cs-trust-when-* span that this stylesheet shows or hides. Keeping the switch in
   CSS (rather than rebuilding the card in JS) means the markup is complete and
   readable with scripting off — the valid state is what renders by default. */

.cs-trust-demo-tabs {
  display: flex;
  gap: .35rem;
  padding: .3rem;
  margin-bottom: .8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
}
.cs-trust-tab {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 0;
  border-radius: 999px;
  padding: .4rem .6rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--cs-ink-soft);
  background: transparent;
  transition: background-color .2s ease, color .2s ease;
}
.cs-trust-tab.is-on { background: var(--cs-surface); color: var(--brand-primary); box-shadow: 0 1px 4px rgba(15, 40, 32, .12); }
.cs-trust-tab[data-trust-state="revoked"].is-on { color: var(--bs-danger, #b02a37); }

.cs-trust-card {
  position: relative;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--brand-accent) 60%, var(--cs-line));
  border-radius: var(--cs-radius);
  background: var(--cs-surface-2);
  padding: 1.6rem 1.2rem 1.2rem;
  text-align: center;
  transition: border-color .25s ease, background-color .25s ease;
}
.cs-trust-seal {
  position: relative;
  display: grid; place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto .6rem;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: 1.7rem;
  transition: background-color .25s ease;
}
/* Both icons sit in the same grid cell so the swap has no layout step; the hidden
   one is display:none like every other .cs-trust-when-* pair. */
.cs-trust-seal .fa-solid { grid-area: 1 / 1; }
#trust-demo[data-state="revoked"] .cs-trust-seal .cs-trust-when-revoked { display: block; }

.cs-trust-lead { color: var(--cs-ink-soft); min-height: 3.2em; }
.cs-trust-status { font-size: 1.05rem; }

/* Only one side of every pair is shown; the hidden one is out of the accessibility
   tree too, so a screen reader never reads the revoked text on a valid card. */
.cs-trust-when-revoked { display: none; }
#trust-demo[data-state="revoked"] .cs-trust-when-valid { display: none; }
#trust-demo[data-state="revoked"] .cs-trust-when-revoked { display: inline; }

#trust-demo[data-state="revoked"] .cs-trust-card {
  border-color: color-mix(in srgb, var(--bs-danger, #dc3545) 45%, var(--cs-line));
  background: color-mix(in srgb, var(--bs-danger, #dc3545) 5%, var(--cs-surface-2));
}
#trust-demo[data-state="revoked"] .cs-trust-seal { background: var(--bs-danger, #dc3545); }
#trust-demo[data-state="revoked"] .cs-trust-status { color: var(--bs-danger, #b02a37); }

.cs-trust-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem .8rem;
  margin: .9rem 0 .8rem;
  text-align: start;
  font-size: .88rem;
}
.cs-trust-facts dt { color: var(--cs-ink-soft); font-weight: 600; white-space: nowrap; }
.cs-trust-facts dd { margin: 0; font-weight: 600; }
/* A revoked certificate's facts are still the facts — they are dimmed, not deleted,
   because the verification page keeps showing them next to the revocation notice. */
#trust-demo[data-state="revoked"] .cs-trust-facts { opacity: .55; }

.cs-trust-sig {
  display: flex; align-items: center; gap: .5rem;
  text-align: start;
  padding: .6rem .75rem;
  border-radius: 12px;
  font-size: .85rem;
  background: color-mix(in srgb, var(--brand-primary) 9%, transparent);
  color: var(--brand-primary);
  transition: background-color .25s ease, color .25s ease;
}
.cs-trust-sig strong { display: block; }
.cs-trust-sig .fa-solid { font-size: 1.2rem; }
#trust-demo[data-state="revoked"] .cs-trust-sig {
  background: color-mix(in srgb, var(--bs-danger, #dc3545) 10%, transparent);
  color: var(--bs-danger, #b02a37);
}

/* A verification sweep runs once whenever the state changes: the card is "re-checked"
   in front of the visitor rather than silently swapping colours. */
.cs-trust-scan {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -40%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-accent) 30%, transparent), transparent);
  opacity: 0;
}
#trust-demo.is-checking .cs-trust-scan { animation: cs-trust-sweep .7s ease-out; }
#trust-demo.is-checking .cs-trust-seal { animation: cs-trust-pop .45s ease-out; }
@keyframes cs-trust-sweep {
  0%   { opacity: 1; inset-inline-start: -40%; }
  100% { opacity: 0; inset-inline-start: 100%; }
}
@keyframes cs-trust-pop {
  0%   { transform: scale(.7) rotate(-12deg); }
  60%  { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  #trust-demo.is-checking .cs-trust-scan,
  #trust-demo.is-checking .cs-trust-seal { animation: none; }
}
.cs-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  color: var(--brand-primary);
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .88rem;
  font-weight: 600;
}

.cs-cta {
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--cs-surface));
  border: 1px solid color-mix(in srgb, var(--brand-primary) 25%, var(--cs-line));
  border-radius: 22px;
  padding: 2.4rem 1.5rem;
}

/* ---------- template editor: field cards ---------- */

/* Twelve controls on one row read as a wall. Group them and let the row breathe. */
.tpl-field-card { border: 1px solid var(--cs-line); background: var(--cs-surface-2); }
.tpl-field-card:hover { border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--cs-line)); }
.tpl-field-card .form-label { color: var(--cs-ink-soft); font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; }
.tpl-field-card .form-control-sm, .tpl-field-card .form-select-sm { font-size: .85rem; }
.tpl-field-card .f-color { padding: .1rem; min-height: 2rem; }

/* ---------- public check-in ---------- */

.cs-checkin { max-width: 760px; margin-inline: auto; }
.cs-checkin-head { text-align: center; padding-block: 1.5rem .25rem; }
.cs-checkin-logo { max-height: 76px; max-width: 220px; object-fit: contain; margin-bottom: .75rem; }
.cs-checkin-head h1 { font-size: clamp(1.4rem, 3.5vw, 2rem); margin-bottom: .25rem; }
.cs-checkin-head h1::after { display: none; }
.cs-checkin-org { color: var(--cs-ink-soft); font-weight: 600; margin-bottom: .6rem; }
.cs-checkin-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem .9rem;
  color: var(--cs-ink-soft);
  font-size: .9rem;
}
.cs-checkin-meta .fa-solid { color: var(--brand-primary); }
.cs-checkin-card { box-shadow: var(--cs-shadow); }
.cs-checkin-card .card-body { padding: 1.6rem; }
.cs-checkin-note { color: var(--cs-ink-soft); font-size: .85rem; text-align: center; margin: .8rem 0 0; }
/* The dial code is a fixed-width companion to the number, not a competitor for space. */
.cs-dial-select { max-width: 11rem; flex: 0 0 auto; }
/* ---------- validation ----------
   The tag helpers stamp .input-validation-error on the field and .field-validation-error
   on its message — both server-side and again from jQuery unobtrusive. Styling those two
   classes here gives every form in the app the same clear, on-brand treatment without
   touching a single view, and matches what _AttendeeField.cshtml renders by hand. */

.input-validation-error,
.input-validation-error:focus {
  border-color: var(--bs-form-invalid-border-color, #dc3545);
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .18);
}
/* Flex, not an inline ::before: the icon glyph lives in a private-use code point, which
   bidi treats as a strong left-to-right character. Inline, it therefore decided the whole
   line was English and threw the Arabic message's icon to the far left. As its own flex
   item it is simply placed at the start of the reading direction. */
.field-validation-error {
  display: flex;
  align-items: flex-start;
  gap: .3rem;
  margin-top: .3rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--bs-form-invalid-color, #dc3545);
}
.field-validation-error::before {
  content: "\f06a";                 /* fa-circle-exclamation */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;                  /* the free solid style only exists at 900 */
  flex: none;
  line-height: 1.5;
}

/* The summary carries only errors that belong to no single field. */
.validation-summary-errors {
  border-radius: var(--cs-radius);
  padding: .75rem 1rem;
  background: rgba(220, 53, 69, .08);
  border: 1px solid rgba(220, 53, 69, .35);
  color: var(--bs-form-invalid-color, #dc3545);
  font-weight: 600;
}
.validation-summary-errors ul { margin: 0; padding-inline-start: 1.1rem; }
/* A message may quote a latin value (an address, a slug); isolating each entry keeps its
   punctuation at the right end instead of letting the latin run steer the whole line. */
.validation-summary-errors li { unicode-bidi: isolate; }
/* The tag helper always emits its container; with nothing wrong it carries
   .validation-summary-valid and would otherwise sit there as an empty red block. */
.validation-summary-valid { display: none; }

/* ---------- check-in field configuration ---------- */

.cs-fieldconfig-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .6rem 0;
  border-bottom: 1px solid var(--cs-line);
}
.cs-fieldconfig-row:last-child { border-bottom: 0; }
.cs-fieldconfig-name { font-weight: 600; }
.cs-fieldconfig-name .fa-solid { color: var(--cs-ink-soft); font-size: .85em; margin-inline-start: .3rem; }
.cs-fieldconfig-locked { opacity: .75; }
.cs-fieldconfig .btn-check:checked + .btn {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

/* ---------- public verify page: seal ---------- */

.cs-verify-card { max-width: 620px; margin-inline: auto; padding-top: 42px; }
.cs-verify-card .card { overflow: visible; }
.cs-seal {
  display: grid; place-items: center;
  width: 84px; height: 84px;
  margin: -42px auto .5rem;
  border-radius: 50%;
  font-size: 2rem;
  color: #fff;
  border: 4px solid var(--cs-surface);
  box-shadow: var(--cs-shadow);
}
.cs-seal.valid { background: var(--brand-primary); }
.cs-seal.revoked { background: #b45309; }
.cs-seal.notfound { background: #b91c1c; }

/* ---------- pricing ---------- */

.cs-plan .display-6 { font-weight: 900; color: var(--brand-primary); }
.cs-plan .card-footer { background: var(--cs-surface-2); border-top: 1px solid var(--cs-line); }
/* The "most chosen" marker lives INSIDE the header. It used to be a ::before circle
   hanging above the card, which .card { overflow: hidden } cropped in half — the star
   was never fully visible. Inside the header it survives both directions, dark mode
   and any card radius. */
.cs-plan-featured { border-color: var(--brand-accent) !important; border-width: 2px !important; }
.cs-plan-featured > .card-header {
  background: color-mix(in srgb, var(--brand-accent) 14%, var(--cs-surface-2));
  border-bottom-color: color-mix(in srgb, var(--brand-accent) 40%, var(--cs-line));
}
.cs-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--brand-accent);
  color: #fff;
  border-radius: 999px;
  padding: .15rem .7rem;
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: .35rem;
}
.cs-plan-badge .fa-solid { vertical-align: 0; }

/* ---------- footer ---------- */

.cs-footer {
  border-top: 1px solid var(--cs-line);
  background: var(--cs-surface);
  color: var(--cs-ink-soft);
  padding-block: 1rem;
  font-size: .9rem;
}
.cs-footer-tag { color: color-mix(in srgb, var(--brand-accent) 80%, var(--cs-ink-soft)); font-weight: 600; }

/* ---------- template visual editor ---------- */

.tpl-canvas {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--cs-shadow);
  touch-action: none;   /* pointer-drag on touch screens */
}
.tpl-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}
.tpl-chip {
  position: absolute;
  white-space: nowrap;
  line-height: 1.15;
  cursor: grab;
  user-select: none;
  /* No padding and an OUTLINE rather than a border: both would sit inside the
     chip's box and push the glyphs away from X, while the PDF puts the text
     itself at X. Outline draws outside the box and costs no layout, so what the
     canvas shows is what the certificate prints. */
  padding: 0;
  border: 0;
  outline: 1px dashed color-mix(in srgb, var(--brand-primary) 55%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
  background: color-mix(in srgb, #ffffff 65%, transparent);
}
.tpl-chip:hover { outline-color: var(--brand-primary); }
.tpl-chip:active { cursor: grabbing; border-style: solid; }
.tpl-qr {
  position: absolute;
  display: grid;
  place-items: center;
  cursor: grab;
  user-select: none;
  color: #fff;
  font-weight: 700;
  font-size: .75rem;
  background: repeating-conic-gradient(#222 0% 25%, #555 0% 50%);
  border: 2px solid var(--brand-accent);
  border-radius: 6px;
}
.tpl-qr:active { cursor: grabbing; }

/* ---------- plans (admin) & billing period ---------- */

.cs-plan-admin .list-unstyled li { margin-bottom: .2rem; }
.cs-plan-off {
  opacity: .72;
  border-style: dashed !important;
}
.cs-plan-off .card-header { background: color-mix(in srgb, var(--cs-ink-soft) 8%, var(--cs-surface-2)); }

.cs-period {
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  padding: .85rem 1rem;
  background: var(--cs-surface-2);
}
.cs-period .progress { background: color-mix(in srgb, var(--cs-ink-soft) 18%, transparent); }
.cs-period .progress-bar { background: var(--brand-primary); }

/* ---------- guide ---------- */

/* Numbered steps with a sticky table of contents. The number and the icon are two
   separate marks in the header: sticking an icon onto the number made both hard to
   read and the step number hard to scan. */

.cs-guide-toc {
  position: sticky;
  top: 1rem;
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  padding: 1rem .85rem;
  box-shadow: var(--cs-shadow);
}
.cs-guide-progress {
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cs-ink-soft) 18%, transparent);
  overflow: hidden;
  margin-bottom: .9rem;
}
.cs-guide-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand-accent);
  transition: width .12s linear;
}
.cs-guide-toc .nav-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--cs-ink-soft);
  font-size: .93rem;
  padding: .4rem .55rem;
  border-radius: 10px;
}
.cs-guide-toc .nav-link:hover { color: var(--brand-primary); }
.cs-guide-toc .nav-link.active { background: var(--brand-primary); color: #fff; }
.cs-toc-num {
  display: inline-grid; place-items: center;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 800;
  background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  color: var(--brand-primary);
}
.cs-guide-toc .nav-link.active .cs-toc-num { background: rgba(255, 255, 255, .25); color: #fff; }

.cs-guide-step {
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.1rem;
  scroll-margin-top: 1.5rem;
}
.cs-guide-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-bottom: .8rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--cs-line);
}
.cs-guide-head h2 { font-size: 1.15rem; font-weight: 800; margin: 0; }
/* The feature callouts inside a section: a tinted strip with the leading icon in brand
   colour, so the "what's new" reads at a glance between the numbered steps. */
.cs-guide-lead {
  background: color-mix(in srgb, var(--brand-primary) 6%, transparent);
  border-inline-start: 3px solid var(--brand-primary);
  border-radius: 8px;
  padding: .7rem .9rem;
  margin: .75rem 0 0;
}
.cs-guide-lead .fa-solid { color: var(--brand-primary); margin-inline-end: .35rem; }
.cs-guide-num {
  display: inline-grid; place-items: center;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-weight: 900;
  font-size: 1.05rem;
}
.cs-guide-icon {
  display: inline-grid; place-items: center;
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 11px;
  font-size: 1.15rem;
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}
.cs-guide-icon .fa-solid { vertical-align: 0; }

.cs-steps { padding-inline-start: 1.2rem; margin-bottom: 0; }
.cs-steps li { margin-bottom: .55rem; line-height: 1.7; }
.cs-steps li::marker { color: var(--brand-accent); font-weight: 800; }

/* driver.js popovers follow the identity instead of its own blue default.
   driver.css hard-codes its own stack twice — once as `.driver-popover *
   { font-family: Helvetica Neue… }` and again inside the `font:` shorthands on the
   title and the description, which reset the family whatever the element inherits.
   The theme therefore restates the family on the popover, on every descendant and on
   the two shorthand carriers; a single rule on the popover would be overwritten. */
.driver-popover.driverjs-theme,
.driver-popover.driverjs-theme * {
  font-family: var(--brand-font);
}
.driver-popover.driverjs-theme {
  background: var(--cs-surface);
  color: var(--cs-ink);
  border-radius: var(--cs-radius);
  box-shadow: 0 12px 32px rgba(15, 40, 32, .18);
  padding: 1.1rem 1.15rem;
}
.driver-popover.driverjs-theme .driver-popover-title {
  color: var(--brand-primary);
  font-weight: 800;
  font-size: 1.05rem;
  /* Room for the close button, which sits at the inline end in both directions. */
  padding-inline-end: 1.9rem;
}
.driver-popover.driverjs-theme .driver-popover-description {
  color: var(--cs-ink-soft);
  font-size: .95rem;
  line-height: 1.85;
}
.driver-popover.driverjs-theme .driver-popover-progress-text {
  color: var(--cs-ink-soft);
  font-weight: 600;
}
/* The close button is pinned to `right: 0` by driver.css, so in Arabic it landed on
   the far side of the box and sat on top of the title. Logical inset puts it at the
   end of the reading direction — left in Arabic, right in English — and it is
   declared after the physical resets so it wins inside the same block. */
.driver-popover.driverjs-theme .driver-popover-close-btn {
  right: auto;
  left: auto;
  inset-inline-end: .5rem;
  top: .5rem;
  /* The generic tour-button rule below also matches this button, and its padding
     inflated the circle around the small glyph (driver.js focuses the close button on
     open, so the swollen circle showed in the solid focus colour). A closed size:
     no padding, fixed box, glyph centred and scaled to it. */
  box-sizing: border-box;
  padding: 0;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  font-size: .8rem;
  line-height: 1;
  border-radius: 50%;
  color: var(--cs-ink-soft);
  background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
}
.driver-popover.driverjs-theme .driver-popover-close-btn:hover,
.driver-popover.driverjs-theme .driver-popover-close-btn:focus {
  color: #fff;
  background: var(--brand-primary);
}
.driver-popover.driverjs-theme button {
  background: var(--brand-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .3rem .8rem;
  font-weight: 600;
  text-shadow: none;
  font-family: var(--brand-font);
}
.driver-popover.driverjs-theme button:hover { background: color-mix(in srgb, var(--brand-primary) 85%, black); }
/* driver.css spaces the navigation buttons with a physical margin-left, which piles
   them together on the wrong side in Arabic. */
.driver-popover.driverjs-theme .driver-popover-navigation-btns button + button {
  margin-left: 0;
  margin-inline-start: .35rem;
}
.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: var(--cs-surface); }
.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: var(--cs-surface); }
.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: var(--cs-surface); }
.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: var(--cs-surface); }

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

.alert { border-radius: var(--cs-radius); }
code { color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 8%, transparent); padding: .15em .45em; border-radius: 6px; }

::selection { background: color-mix(in srgb, var(--brand-accent) 35%, transparent); }

/* ---------- focus: on-brand, never Bootstrap blue ----------
   Bootstrap paints its focus ring from --bs-focus-ring-color / the per-button
   --bs-btn-focus-box-shadow, both of which default to #0d6efd. A mouse click sets
   :focus (not just :focus-visible), so overriding :focus-visible alone left a blue
   halo flashing on every button the moment it was pressed — including while the
   NProgress spinner was running. Redirect the variables themselves, so anything
   Bootstrap focuses picks up the identity colour. */

:root, [data-bs-theme="dark"] {
  --bs-focus-ring-color: color-mix(in srgb, var(--brand-primary) 25%, transparent);
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: color-mix(in srgb, var(--brand-primary) 80%, black);
  /* .text-primary / .bg-primary / .border-primary and every component that reads the
     theme colour follow the identity too, instead of staying Bootstrap blue. */
  --bs-primary: var(--brand-primary);
  --bs-primary-text-emphasis: var(--brand-primary);
  --bs-primary-border-subtle: color-mix(in srgb, var(--brand-primary) 35%, transparent);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.btn:focus, .btn:active:focus, .btn.active:focus,
.btn-check:focus + .btn, .btn-check:checked + .btn,
.form-control:focus, .form-select:focus, .form-check-input:focus,
.page-link:focus, .accordion-button:focus, .dropdown-item:focus,
.nav-link:focus, .navbar-toggler:focus {
  /* Bootstrap's own blue box-shadow variable never reaches the element. */
  --bs-btn-focus-box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--brand-primary) 25%, transparent);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--brand-primary) 25%, transparent);
  border-color: color-mix(in srgb, var(--brand-primary) 55%, transparent);
  outline: 0;
}

/* keep keyboard focus visible and on-brand */
.btn:focus-visible, .form-control:focus-visible, .nav-link:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* The busy spinner takes the button's own text colour, so a brand button spins in
   white and an outline button in the brand colour — no stray blue either way. */
.cs-busy .spinner-border { color: currentColor; }

/* ---------- brand-coloured selection states ----------
   Bootstrap paints every "active"/"checked" state its own blue, which reads as a
   foreign colour next to the tenant identity. Everything selectable follows the
   brand instead. */

.list-group-item.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.list-group-item-action:hover:not(.active),
.list-group-item-action:focus:not(.active) {
  background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  color: var(--brand-primary);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--brand-primary);
  color: #fff;
}
.nav-tabs .nav-link.active {
  color: var(--brand-primary);
  border-bottom-color: var(--cs-surface);
}
.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.form-check-input:focus {
  border-color: color-mix(in srgb, var(--brand-primary) 55%, transparent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-primary) 22%, transparent);
}
.page-link { color: var(--brand-primary); }
.page-item.active .page-link {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.accordion-button:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-primary) 20%, transparent); }
a { color: var(--brand-primary); }
a:hover { color: color-mix(in srgb, var(--brand-primary) 80%, black); }

/* ---------- icons (Font Awesome Free, bundled locally) ---------- */

.fa-solid { vertical-align: -.125em; }
.cs-seal .fa-solid, .cs-feature-icon .fa-solid { vertical-align: 0; }

/* ---------- dashboard stat cards ---------- */

.cs-stat { color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.cs-stat:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.cs-stat .cs-stat-icon {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  font-size: 1.15rem; margin-bottom: .5rem;
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
.cs-stat .cs-stat-value { font-size: 1.9rem; font-weight: 900; line-height: 1; color: var(--brand-primary); }
.cs-stat .cs-stat-label { font-weight: 700; margin-top: .25rem; }
.cs-stat .cs-stat-sub { font-size: .85rem; color: var(--cs-ink-soft); }
.cs-stat-danger .cs-stat-value, .cs-stat-danger .cs-stat-icon { color: #b91c1c; }
.cs-stat-danger .cs-stat-icon { background: rgba(185,28,28,.12); }
.cs-stat-accent .cs-stat-value, .cs-stat-accent .cs-stat-icon { color: #b45309; }
.cs-stat-accent .cs-stat-icon { background: rgba(180,83,9,.12); }

/* ---------- attendee-facing public pages ---------- */

.cs-public-header {
  background: var(--cs-surface);
  border-bottom: 3px solid var(--brand-primary);
}
.cs-public-name { font-weight: 800; font-size: 1.15rem; color: var(--brand-primary); }

/* ---------- pending state (NProgress + locked controls) ---------- */

#nprogress .bar { background: var(--brand-accent); height: 3px; }
#nprogress .peg { box-shadow: 0 0 10px var(--brand-accent), 0 0 5px var(--brand-accent); }
/* Waiting is not the same as being switched off. `pending.js` disables the button so a
   second click cannot fire, but visually it should stay the button it was — Bootstrap's
   .btn:disabled would otherwise repaint it in the disabled palette. Same weight as
   .btn:disabled and declared later, so it wins, and one rule covers every button
   variant instead of patching each. */
.btn.cs-busy {
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
  opacity: .9;
}
.btn-outline-primary.cs-busy,
.btn-outline-secondary.cs-busy,
.btn-outline-danger.cs-busy,
.btn-outline-warning.cs-busy,
.btn-outline-success.cs-busy { background-color: transparent; }

.cs-busy { pointer-events: none; opacity: .85; }
a.cs-busy { position: relative; }

/* ---------- billing documents ----------
   An invoice is the artifact, so printing it drops the product chrome around it and
   anything the reader cannot act on on paper. */
.cs-invoice-totals { min-width: 18rem; }
.cs-invoice-totals dd { margin-bottom: .25rem; }

@media print {
  .no-print, .cs-navbar, footer, .toast-container, #nprogress { display: none !important; }
  .cs-invoice { border: 0; box-shadow: none; }
  .cs-main { padding: 0 !important; }
  a[href]::after { content: none !important; }
}

/* ---------- support impersonation banner ---------- */

/*
  Sticky and outside the navbar: a support session must never be mistaken for the
  customer's own, and a banner that scrolls away is one glance from that mistake.
  Colours are fixed rather than brand-driven — this bar belongs to the platform, and
  painting it in the customer's identity is exactly the wrong signal.
*/
.cs-impersonation {
  position: sticky;
  top: 0;
  z-index: 1035;
  background: #7a3d00;
  color: #fff;
  padding: .45rem 0;
  font-size: .9rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}
.cs-impersonation .fa-solid { margin-inline-end: .35rem; }
.cs-impersonation-detail { margin-inline-start: .5rem; opacity: .9; }
.cs-impersonation .btn { --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .35); }

/* ---------- flatpickr (vendored) ----------
   The DataTables precedent: restate the vendor's physical rules logically, follow the
   identity, and cover the dark theme. The popup is appended to <body>, which still sits
   inside [dir] on <html>, so the RTL selector works. */
[dir="rtl"] .flatpickr-calendar { direction: rtl; }
[dir="rtl"] .flatpickr-months .flatpickr-prev-month,
[dir="rtl"] .flatpickr-months .flatpickr-next-month { transform: scaleX(-1); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}
.flatpickr-day.today { border-color: var(--brand-accent); }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months { font-family: inherit; }

[data-bs-theme="dark"] .flatpickr-calendar {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    box-shadow: 0 3px 13px rgba(0, 0, 0, .45);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .flatpickr-months .flatpickr-month,
[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme="dark"] .flatpickr-weekday,
[data-bs-theme="dark"] .flatpickr-day,
[data-bs-theme="dark"] .flatpickr-time input,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-time-separator,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-am-pm,
[data-bs-theme="dark"] .flatpickr-months .flatpickr-prev-month,
[data-bs-theme="dark"] .flatpickr-months .flatpickr-next-month {
    color: var(--bs-body-color);
    fill: var(--bs-body-color);
}
[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .flatpickr-day:hover:not(.selected) {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-tertiary-bg);
}
[data-bs-theme="dark"] .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--bs-body-bg); }
[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom::after { border-top-color: var(--bs-body-bg); }
[data-bs-theme="dark"] .flatpickr-time { border-top-color: var(--bs-border-color); }