/* input(20053,1): run-time error CSS1019: Unexpected token, found '@'
input(33287,1): run-time error CSS1019: Unexpected token, found '}' */
@charset "UTF-8";
/*!
 * CoreUI - HTML, CSS, and JavaScript UI Components Library
 * @version v4.0.0-rc.0
 * @link https://coreui.io/
 * Copyright (c) 2021 creativeLabs Łukasz Holeczek
 * License MIT  (https://coreui.io/license/)
 */
:root {
  --cui-blue: #0d6efd;
  --cui-indigo: #6610f2;
  --cui-purple: #6f42c1;
  --cui-pink: #d63384;
  --cui-red: #dc3545;
  --cui-orange: #fd7e14;
  --cui-yellow: #ffc107;
  --cui-green: #198754;
  --cui-teal: #20c997;
  --cui-cyan: #0dcaf0;
  --cui-white: #fff;
  --cui-gray: #8a93a2;
  --cui-gray-dark: #636f83;
  --cui-primary: #321fdb;
  --cui-secondary: #9da5b1;
  --cui-success: #2eb85c;
  --cui-info: #39f;
  --cui-warning: #f9b115;
  --cui-danger: #e55353;
  --cui-light: #ebedef;
  --cui-dark: #4f5d73;
  --cui-breakpoint-xs: 0;
  --cui-breakpoint-sm: 576px;
  --cui-breakpoint-md: 768px;
  --cui-breakpoint-lg: 992px;
  --cui-breakpoint-xl: 1200px;
  --cui-breakpoint-xxl: 1400px;
  --cui-mobile-breakpoint: md;
  --cui-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --cui-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --cui-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --cui-body-color: rgba(44, 56, 74, 0.95);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--cui-font-sans-serif);
  font-size: var(--cui-font-size-base, 1rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cui-body-color, rgba(44, 56, 74, 0.95));
  background-color: var(--cui-body-bg, #fff);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 21, 0);
}

hr {
  margin: 1rem 0;
  color: var(--cui-hr-color, inherit);
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}

hr:not([size]) {
  height: 1px;
}

.vr {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 1px;
  flex: 0 0 1px;
  width: 1px;
  padding: 0 !important;
  margin: 0;
  color: var(--cui-vr-color, inherit);
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--cui-headings-color, unset);
}

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-coreui-original-title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  font-style: normal;
  line-height: inherit;
}

address,ol,
ul,
dl {
  margin-bottom: 1rem;
}

ol,
ul,
dl {
  margin-top: 0;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
}
html:not([dir=rtl]) dd {
  margin-left: 0;
}
*[dir=rtl] dd {
  margin-right: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small, .small {
  font-size: 0.875em;
}

mark, .mark {
  padding: 0.2em;
  background-color: var(--cui-mark-bg, #fcf8e3);
}

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: var(--cui-link-color, #321fdb);
  text-decoration: underline;
}
a:hover {
  color: var(--cui-link-hover-color, #2819af);
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
  font-family: var(--cui-font-monospace);
  font-size: 1em;
  direction: ltr /* rtl:ignore */;
  unicode-bidi: bidi-override;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
  color: var(--cui-pre-color, unset);
}
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

code {
  font-size: 0.875em;
  color: var(--cui-code-color, #d63384);
  word-wrap: break-word;
}
a > code {
  color: inherit;
}

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 0.875em;
  color: var(--cui-kbd-color, rgba(255, 255, 255, 0.87));
  background-color: var(--cui-kbd-bg, #4f5d73);
  border-radius: 0.2rem;
}
kbd kbd {
  padding: 0;
  font-size: 1em;
  font-weight: 700;
}

figure {
  margin: 0 0 1rem;
}

img,
svg {
  vertical-align: middle;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--cui-table-caption-color, rgba(44, 56, 74, 0.38));
  text-align: left;
}

th {
  font-weight: 600;
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

label {
  display: inline-block;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}

[list]::-webkit-calendar-picker-indicator {
  display: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit;
}
html:not([dir=rtl]) legend {
  float: left;
}
*[dir=rtl] legend {
  float: right;
}
@media (min-width: 1200px) {
  legend {
    font-size: 1.5rem;
  }
}
legend + * {
  clear: left;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: textfield;
}

/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::file-selector-button {
  font: inherit;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

iframe {
  border: 0;
}

summary {
  display: list-item;
  cursor: pointer;
}

progress {
  vertical-align: baseline;
}

[hidden] {
  display: none !important;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.display-1 {
  font-size: calc(1.625rem + 4.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-1 {
    font-size: 5rem;
  }
}

.display-2 {
  font-size: calc(1.575rem + 3.9vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-2 {
    font-size: 4.5rem;
  }
}

.display-3 {
  font-size: calc(1.525rem + 3.3vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-3 {
    font-size: 4rem;
  }
}

.display-4 {
  font-size: calc(1.475rem + 2.7vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-4 {
    font-size: 3.5rem;
  }
}

.display-5 {
  font-size: calc(1.425rem + 2.1vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-5 {
    font-size: 3rem;
  }
}

.display-6 {
  font-size: calc(1.375rem + 1.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-6 {
    font-size: 2.5rem;
  }
}

.list-unstyled {
  list-style: none;
}
html:not([dir=rtl]) .list-unstyled {
  padding-left: 0;
}
*[dir=rtl] .list-unstyled {
  padding-right: 0;
}

.list-inline {
  list-style: none;
}
html:not([dir=rtl]) .list-inline {
  padding-left: 0;
}
*[dir=rtl] .list-inline {
  padding-right: 0;
}

.list-inline-item {
  display: inline-block;
}
html:not([dir=rtl]) .list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}
*[dir=rtl] .list-inline-item:not(:last-child) {
  margin-left: 0.5rem;
}

.initialism {
  font-size: 0.875em;
  text-transform: uppercase;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}
.blockquote > :last-child {
  margin-bottom: 0;
}

.blockquote-footer {
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 0.875em;
  color: #8a93a2;
}
.blockquote-footer::before {
  content: "— ";
}

.img-fluid,.img-thumbnail {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: var(--cui-thumbnail-bg, #fff);
  border: 1px solid var(--cui-thumbnail-border-color, #c4c9d0);
  border-radius: 0.25rem;
}

.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.figure-caption {
  font-size: 0.875em;
  color: var(--cui-figure-caption-color, #8a93a2);
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding-right: var(--cui-gutter-x, 0.75rem);
  padding-left: var(--cui-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm, .container {
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}
.row {
  --cui-gutter-x: 1.5rem;
  --cui-gutter-y: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: calc(var(--cui-gutter-y) * -1);
  margin-right: calc(var(--cui-gutter-x) / -2);
  margin-left: calc(var(--cui-gutter-x) / -2);
}
.row > * {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--cui-gutter-x) / 2);
  padding-left: calc(var(--cui-gutter-x) / 2);
  margin-top: var(--cui-gutter-y);
}

.col {
  -ms-flex: 1 0 0%;
  flex: 1 0 0%;
}

.row-cols-auto > * {
  width: auto;
}

.row-cols-auto > *,.row-cols-1 > * {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.row-cols-1 > * {
  width: 100%;
}

.row-cols-2 > * {
  width: 50%;
}

.row-cols-2 > *,.row-cols-3 > * {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.row-cols-3 > * {
  width: 33.3333333333%;
}

.row-cols-4 > * {
  width: 25%;
}

.row-cols-4 > *,.row-cols-5 > * {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.row-cols-5 > * {
  width: 20%;
}

.row-cols-6 > * {
  width: 16.6666666667%;
}

.row-cols-6 > *,.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.col-auto {
  width: auto;
}

.col-1 {
  width: 8.3333333333%;
}

.col-1,.col-2 {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.col-2 {
  width: 16.6666666667%;
}

.col-3 {
  width: 25%;
}

.col-3,.col-4 {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.col-4 {
  width: 33.3333333333%;
}

.col-5 {
  width: 41.6666666667%;
}

.col-5,.col-6 {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.3333333333%;
}

.col-7,.col-8 {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.col-8 {
  width: 66.6666666667%;
}

.col-9 {
  width: 75%;
}

.col-9,.col-10 {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.col-10 {
  width: 83.3333333333%;
}

.col-11 {
  width: 91.6666666667%;
}

.col-11,.col-12 {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.col-12 {
  width: 100%;
}

.offset-1 {
  margin-left: 8.3333333333%;
}

.offset-2 {
  margin-left: 16.6666666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.3333333333%;
}

.offset-5 {
  margin-left: 41.6666666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.3333333333%;
}

.offset-8 {
  margin-left: 66.6666666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.3333333333%;
}

.offset-11 {
  margin-left: 91.6666666667%;
}

.g-0,
.gx-0 {
  --cui-gutter-x: 0;
}

.g-0,
.gy-0 {
  --cui-gutter-y: 0;
}

.g-1,
.gx-1 {
  --cui-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
  --cui-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
  --cui-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
  --cui-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
  --cui-gutter-x: 1rem;
}

.g-3,
.gy-3 {
  --cui-gutter-y: 1rem;
}

.g-4,
.gx-4 {
  --cui-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
  --cui-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
  --cui-gutter-x: 3rem;
}

.g-5,
.gy-5 {
  --cui-gutter-y: 3rem;
}

@media (min-width: 576px) {
  .col-sm {
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
  }

  .row-cols-sm-auto > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-sm-1 > * {
    width: 100%;
  }

  .row-cols-sm-1 > *,.row-cols-sm-2 > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .row-cols-sm-2 > * {
    width: 50%;
  }

  .row-cols-sm-3 > * {
    width: 33.3333333333%;
  }

  .row-cols-sm-3 > *,.row-cols-sm-4 > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .row-cols-sm-4 > * {
    width: 25%;
  }

  .row-cols-sm-5 > * {
    width: 20%;
  }

  .row-cols-sm-5 > *,.row-cols-sm-6 > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .row-cols-sm-6 > * {
    width: 16.6666666667%;
  }

  .col-sm-auto {
    width: auto;
  }

  .col-sm-auto,.col-sm-1 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-sm-1 {
    width: 8.3333333333%;
  }

  .col-sm-2 {
    width: 16.6666666667%;
  }

  .col-sm-2,.col-sm-3 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-sm-3 {
    width: 25%;
  }

  .col-sm-4 {
    width: 33.3333333333%;
  }

  .col-sm-4,.col-sm-5 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-sm-5 {
    width: 41.6666666667%;
  }

  .col-sm-6 {
    width: 50%;
  }

  .col-sm-6,.col-sm-7 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-sm-7 {
    width: 58.3333333333%;
  }

  .col-sm-8 {
    width: 66.6666666667%;
  }

  .col-sm-8,.col-sm-9 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-sm-9 {
    width: 75%;
  }

  .col-sm-10 {
    width: 83.3333333333%;
  }

  .col-sm-10,.col-sm-11 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-sm-11 {
    width: 91.6666666667%;
  }

  .col-sm-12 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-sm-0 {
    margin-left: 0;
  }

  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }

  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }

  .offset-sm-3 {
    margin-left: 25%;
  }

  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }

  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }

  .offset-sm-6 {
    margin-left: 50%;
  }

  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }

  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }

  .offset-sm-9 {
    margin-left: 75%;
  }

  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }

  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }

  .g-sm-0,
.gx-sm-0 {
    --cui-gutter-x: 0;
  }

  .g-sm-0,
.gy-sm-0 {
    --cui-gutter-y: 0;
  }

  .g-sm-1,
.gx-sm-1 {
    --cui-gutter-x: 0.25rem;
  }

  .g-sm-1,
.gy-sm-1 {
    --cui-gutter-y: 0.25rem;
  }

  .g-sm-2,
.gx-sm-2 {
    --cui-gutter-x: 0.5rem;
  }

  .g-sm-2,
.gy-sm-2 {
    --cui-gutter-y: 0.5rem;
  }

  .g-sm-3,
.gx-sm-3 {
    --cui-gutter-x: 1rem;
  }

  .g-sm-3,
.gy-sm-3 {
    --cui-gutter-y: 1rem;
  }

  .g-sm-4,
.gx-sm-4 {
    --cui-gutter-x: 1.5rem;
  }

  .g-sm-4,
.gy-sm-4 {
    --cui-gutter-y: 1.5rem;
  }

  .g-sm-5,
.gx-sm-5 {
    --cui-gutter-x: 3rem;
  }

  .g-sm-5,
.gy-sm-5 {
    --cui-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
  }

  .row-cols-md-auto > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-md-1 > * {
    width: 100%;
  }

  .row-cols-md-1 > *,.row-cols-md-2 > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .row-cols-md-2 > * {
    width: 50%;
  }

  .row-cols-md-3 > * {
    width: 33.3333333333%;
  }

  .row-cols-md-3 > *,.row-cols-md-4 > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .row-cols-md-4 > * {
    width: 25%;
  }

  .row-cols-md-5 > * {
    width: 20%;
  }

  .row-cols-md-5 > *,.row-cols-md-6 > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .row-cols-md-6 > * {
    width: 16.6666666667%;
  }

  .col-md-auto {
    width: auto;
  }

  .col-md-auto,.col-md-1 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-md-1 {
    width: 8.3333333333%;
  }

  .col-md-2 {
    width: 16.6666666667%;
  }

  .col-md-2,.col-md-3 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-md-3 {
    width: 25%;
  }

  .col-md-4 {
    width: 33.3333333333%;
  }

  .col-md-4,.col-md-5 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-md-5 {
    width: 41.6666666667%;
  }

  .col-md-6 {
    width: 50%;
  }

  .col-md-6,.col-md-7 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-md-7 {
    width: 58.3333333333%;
  }

  .col-md-8 {
    width: 66.6666666667%;
  }

  .col-md-8,.col-md-9 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-md-9 {
    width: 75%;
  }

  .col-md-10 {
    width: 83.3333333333%;
  }

  .col-md-10,.col-md-11 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-md-11 {
    width: 91.6666666667%;
  }

  .col-md-12 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-md-0 {
    margin-left: 0;
  }

  .offset-md-1 {
    margin-left: 8.3333333333%;
  }

  .offset-md-2 {
    margin-left: 16.6666666667%;
  }

  .offset-md-3 {
    margin-left: 25%;
  }

  .offset-md-4 {
    margin-left: 33.3333333333%;
  }

  .offset-md-5 {
    margin-left: 41.6666666667%;
  }

  .offset-md-6 {
    margin-left: 50%;
  }

  .offset-md-7 {
    margin-left: 58.3333333333%;
  }

  .offset-md-8 {
    margin-left: 66.6666666667%;
  }

  .offset-md-9 {
    margin-left: 75%;
  }

  .offset-md-10 {
    margin-left: 83.3333333333%;
  }

  .offset-md-11 {
    margin-left: 91.6666666667%;
  }

  .g-md-0,
.gx-md-0 {
    --cui-gutter-x: 0;
  }

  .g-md-0,
.gy-md-0 {
    --cui-gutter-y: 0;
  }

  .g-md-1,
.gx-md-1 {
    --cui-gutter-x: 0.25rem;
  }

  .g-md-1,
.gy-md-1 {
    --cui-gutter-y: 0.25rem;
  }

  .g-md-2,
.gx-md-2 {
    --cui-gutter-x: 0.5rem;
  }

  .g-md-2,
.gy-md-2 {
    --cui-gutter-y: 0.5rem;
  }

  .g-md-3,
.gx-md-3 {
    --cui-gutter-x: 1rem;
  }

  .g-md-3,
.gy-md-3 {
    --cui-gutter-y: 1rem;
  }

  .g-md-4,
.gx-md-4 {
    --cui-gutter-x: 1.5rem;
  }

  .g-md-4,
.gy-md-4 {
    --cui-gutter-y: 1.5rem;
  }

  .g-md-5,
.gx-md-5 {
    --cui-gutter-x: 3rem;
  }

  .g-md-5,
.gy-md-5 {
    --cui-gutter-y: 3rem;
  }
}
@media (min-width: 992px) {
  .col-lg {
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
  }

  .row-cols-lg-auto > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-lg-1 > * {
    width: 100%;
  }

  .row-cols-lg-1 > *,.row-cols-lg-2 > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .row-cols-lg-2 > * {
    width: 50%;
  }

  .row-cols-lg-3 > * {
    width: 33.3333333333%;
  }

  .row-cols-lg-3 > *,.row-cols-lg-4 > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .row-cols-lg-4 > * {
    width: 25%;
  }

  .row-cols-lg-5 > * {
    width: 20%;
  }

  .row-cols-lg-5 > *,.row-cols-lg-6 > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .row-cols-lg-6 > * {
    width: 16.6666666667%;
  }

  .col-lg-auto {
    width: auto;
  }

  .col-lg-auto,.col-lg-1 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-lg-1 {
    width: 8.3333333333%;
  }

  .col-lg-2 {
    width: 16.6666666667%;
  }

  .col-lg-2,.col-lg-3 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-lg-3 {
    width: 25%;
  }

  .col-lg-4 {
    width: 33.3333333333%;
  }

  .col-lg-4,.col-lg-5 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-lg-5 {
    width: 41.6666666667%;
  }

  .col-lg-6 {
    width: 50%;
  }

  .col-lg-6,.col-lg-7 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-lg-7 {
    width: 58.3333333333%;
  }

  .col-lg-8 {
    width: 66.6666666667%;
  }

  .col-lg-8,.col-lg-9 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-lg-9 {
    width: 75%;
  }

  .col-lg-10 {
    width: 83.3333333333%;
  }

  .col-lg-10,.col-lg-11 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-lg-11 {
    width: 91.6666666667%;
  }

  .col-lg-12 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-lg-0 {
    margin-left: 0;
  }

  .offset-lg-1 {
    margin-left: 8.3333333333%;
  }

  .offset-lg-2 {
    margin-left: 16.6666666667%;
  }

  .offset-lg-3 {
    margin-left: 25%;
  }

  .offset-lg-4 {
    margin-left: 33.3333333333%;
  }

  .offset-lg-5 {
    margin-left: 41.6666666667%;
  }

  .offset-lg-6 {
    margin-left: 50%;
  }

  .offset-lg-7 {
    margin-left: 58.3333333333%;
  }

  .offset-lg-8 {
    margin-left: 66.6666666667%;
  }

  .offset-lg-9 {
    margin-left: 75%;
  }

  .offset-lg-10 {
    margin-left: 83.3333333333%;
  }

  .offset-lg-11 {
    margin-left: 91.6666666667%;
  }

  .g-lg-0,
.gx-lg-0 {
    --cui-gutter-x: 0;
  }

  .g-lg-0,
.gy-lg-0 {
    --cui-gutter-y: 0;
  }

  .g-lg-1,
.gx-lg-1 {
    --cui-gutter-x: 0.25rem;
  }

  .g-lg-1,
.gy-lg-1 {
    --cui-gutter-y: 0.25rem;
  }

  .g-lg-2,
.gx-lg-2 {
    --cui-gutter-x: 0.5rem;
  }

  .g-lg-2,
.gy-lg-2 {
    --cui-gutter-y: 0.5rem;
  }

  .g-lg-3,
.gx-lg-3 {
    --cui-gutter-x: 1rem;
  }

  .g-lg-3,
.gy-lg-3 {
    --cui-gutter-y: 1rem;
  }

  .g-lg-4,
.gx-lg-4 {
    --cui-gutter-x: 1.5rem;
  }

  .g-lg-4,
.gy-lg-4 {
    --cui-gutter-y: 1.5rem;
  }

  .g-lg-5,
.gx-lg-5 {
    --cui-gutter-x: 3rem;
  }

  .g-lg-5,
.gy-lg-5 {
    --cui-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
  }

  .row-cols-xl-auto > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-xl-1 > * {
    width: 100%;
  }

  .row-cols-xl-1 > *,.row-cols-xl-2 > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .row-cols-xl-2 > * {
    width: 50%;
  }

  .row-cols-xl-3 > * {
    width: 33.3333333333%;
  }

  .row-cols-xl-3 > *,.row-cols-xl-4 > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .row-cols-xl-4 > * {
    width: 25%;
  }

  .row-cols-xl-5 > * {
    width: 20%;
  }

  .row-cols-xl-5 > *,.row-cols-xl-6 > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .row-cols-xl-6 > * {
    width: 16.6666666667%;
  }

  .col-xl-auto {
    width: auto;
  }

  .col-xl-auto,.col-xl-1 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-xl-1 {
    width: 8.3333333333%;
  }

  .col-xl-2 {
    width: 16.6666666667%;
  }

  .col-xl-2,.col-xl-3 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-xl-3 {
    width: 25%;
  }

  .col-xl-4 {
    width: 33.3333333333%;
  }

  .col-xl-4,.col-xl-5 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-xl-5 {
    width: 41.6666666667%;
  }

  .col-xl-6 {
    width: 50%;
  }

  .col-xl-6,.col-xl-7 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-xl-7 {
    width: 58.3333333333%;
  }

  .col-xl-8 {
    width: 66.6666666667%;
  }

  .col-xl-8,.col-xl-9 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-xl-9 {
    width: 75%;
  }

  .col-xl-10 {
    width: 83.3333333333%;
  }

  .col-xl-10,.col-xl-11 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-xl-11 {
    width: 91.6666666667%;
  }

  .col-xl-12 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-xl-0 {
    margin-left: 0;
  }

  .offset-xl-1 {
    margin-left: 8.3333333333%;
  }

  .offset-xl-2 {
    margin-left: 16.6666666667%;
  }

  .offset-xl-3 {
    margin-left: 25%;
  }

  .offset-xl-4 {
    margin-left: 33.3333333333%;
  }

  .offset-xl-5 {
    margin-left: 41.6666666667%;
  }

  .offset-xl-6 {
    margin-left: 50%;
  }

  .offset-xl-7 {
    margin-left: 58.3333333333%;
  }

  .offset-xl-8 {
    margin-left: 66.6666666667%;
  }

  .offset-xl-9 {
    margin-left: 75%;
  }

  .offset-xl-10 {
    margin-left: 83.3333333333%;
  }

  .offset-xl-11 {
    margin-left: 91.6666666667%;
  }

  .g-xl-0,
.gx-xl-0 {
    --cui-gutter-x: 0;
  }

  .g-xl-0,
.gy-xl-0 {
    --cui-gutter-y: 0;
  }

  .g-xl-1,
.gx-xl-1 {
    --cui-gutter-x: 0.25rem;
  }

  .g-xl-1,
.gy-xl-1 {
    --cui-gutter-y: 0.25rem;
  }

  .g-xl-2,
.gx-xl-2 {
    --cui-gutter-x: 0.5rem;
  }

  .g-xl-2,
.gy-xl-2 {
    --cui-gutter-y: 0.5rem;
  }

  .g-xl-3,
.gx-xl-3 {
    --cui-gutter-x: 1rem;
  }

  .g-xl-3,
.gy-xl-3 {
    --cui-gutter-y: 1rem;
  }

  .g-xl-4,
.gx-xl-4 {
    --cui-gutter-x: 1.5rem;
  }

  .g-xl-4,
.gy-xl-4 {
    --cui-gutter-y: 1.5rem;
  }

  .g-xl-5,
.gx-xl-5 {
    --cui-gutter-x: 3rem;
  }

  .g-xl-5,
.gy-xl-5 {
    --cui-gutter-y: 3rem;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
  }

  .row-cols-xxl-auto > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-xxl-1 > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-xxl-2 > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-xxl-3 > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-xxl-4 > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-xxl-5 > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-xxl-6 > * {
    width: 16.6666666667%;
  }

  .row-cols-xxl-6 > *,.col-xxl-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-xxl-auto {
    width: auto;
  }

  .col-xxl-1 {
    width: 8.3333333333%;
  }

  .col-xxl-1,.col-xxl-2 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-xxl-2 {
    width: 16.6666666667%;
  }

  .col-xxl-3 {
    width: 25%;
  }

  .col-xxl-3,.col-xxl-4 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-xxl-4 {
    width: 33.3333333333%;
  }

  .col-xxl-5 {
    width: 41.6666666667%;
  }

  .col-xxl-5,.col-xxl-6 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-xxl-6 {
    width: 50%;
  }

  .col-xxl-7 {
    width: 58.3333333333%;
  }

  .col-xxl-7,.col-xxl-8 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-xxl-8 {
    width: 66.6666666667%;
  }

  .col-xxl-9 {
    width: 75%;
  }

  .col-xxl-9,.col-xxl-10 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-xxl-10 {
    width: 83.3333333333%;
  }

  .col-xxl-11 {
    width: 91.6666666667%;
  }

  .col-xxl-11,.col-xxl-12 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .col-xxl-12 {
    width: 100%;
  }

  .offset-xxl-0 {
    margin-left: 0;
  }

  .offset-xxl-1 {
    margin-left: 8.3333333333%;
  }

  .offset-xxl-2 {
    margin-left: 16.6666666667%;
  }

  .offset-xxl-3 {
    margin-left: 25%;
  }

  .offset-xxl-4 {
    margin-left: 33.3333333333%;
  }

  .offset-xxl-5 {
    margin-left: 41.6666666667%;
  }

  .offset-xxl-6 {
    margin-left: 50%;
  }

  .offset-xxl-7 {
    margin-left: 58.3333333333%;
  }

  .offset-xxl-8 {
    margin-left: 66.6666666667%;
  }

  .offset-xxl-9 {
    margin-left: 75%;
  }

  .offset-xxl-10 {
    margin-left: 83.3333333333%;
  }

  .offset-xxl-11 {
    margin-left: 91.6666666667%;
  }

  .g-xxl-0,
.gx-xxl-0 {
    --cui-gutter-x: 0;
  }

  .g-xxl-0,
.gy-xxl-0 {
    --cui-gutter-y: 0;
  }

  .g-xxl-1,
.gx-xxl-1 {
    --cui-gutter-x: 0.25rem;
  }

  .g-xxl-1,
.gy-xxl-1 {
    --cui-gutter-y: 0.25rem;
  }

  .g-xxl-2,
.gx-xxl-2 {
    --cui-gutter-x: 0.5rem;
  }

  .g-xxl-2,
.gy-xxl-2 {
    --cui-gutter-y: 0.5rem;
  }

  .g-xxl-3,
.gx-xxl-3 {
    --cui-gutter-x: 1rem;
  }

  .g-xxl-3,
.gy-xxl-3 {
    --cui-gutter-y: 1rem;
  }

  .g-xxl-4,
.gx-xxl-4 {
    --cui-gutter-x: 1.5rem;
  }

  .g-xxl-4,
.gy-xxl-4 {
    --cui-gutter-y: 1.5rem;
  }

  .g-xxl-5,
.gx-xxl-5 {
    --cui-gutter-x: 3rem;
  }

  .g-xxl-5,
.gy-xxl-5 {
    --cui-gutter-y: 3rem;
  }
}
.table {
  --cui-table-color: rgba(44, 56, 74, 0.95);
  --cui-table-bg: transparent;
  --cui-table-border-color: #d8dbe0;
  --cui-table-striped-color: rgba(44, 56, 74, 0.95);
  --cui-table-striped-bg: rgba(0, 0, 21, 0.05);
  --cui-table-active-color: rgba(44, 56, 74, 0.95);
  --cui-table-active-bg: rgba(0, 0, 21, 0.1);
  --cui-table-hover-color: rgba(44, 56, 74, 0.95);
  --cui-table-hover-bg: rgba(0, 0, 21, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  color: var(--cui-table-color);
  vertical-align: top;
  border-color: var(--cui-table-border-color);
}
.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  color: var(--cui-table-color);
  background-color: var(--cui-table-bg);
  border-bottom-color: var(--cui-table-border-color);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--cui-table-accent-bg);
}
.table > tbody {
  vertical-align: inherit;
}
.table > thead {
  vertical-align: bottom;
}
.caption-top {
  caption-side: top;
}

.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.25rem;
}

.table-bordered > :not(caption) > * {
  border-width: 1px 0;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
}

.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  --cui-table-accent-bg: var(--cui-table-striped-bg);
  color: var(--cui-table-striped-color);
}

.table-active {
  --cui-table-accent-bg: var(--cui-table-active-bg);
  color: var(--cui-table-active-color);
}

.table-hover > tbody > tr:hover {
  --cui-table-accent-bg: var(--cui-table-hover-bg);
  color: var(--cui-table-hover-color);
}

.table-primary {
  --cui-table-bg: #d6d2f8;
  --cui-table-color: rgba(44, 56, 74, 0.95);
  --cui-table-border-color: rgba(198, 196, 232, 0.995);
  --cui-table-striped-bg: rgba(206, 203, 240, 0.9975);
  --cui-table-striped-color: rgba(44, 56, 74, 0.95);
  --cui-table-active-bg: rgba(198, 196, 232, 0.995);
  --cui-table-active-color: rgba(44, 56, 74, 0.95);
  --cui-table-hover-bg: rgba(202, 199, 236, 0.99625);
  --cui-table-hover-color: rgba(44, 56, 74, 0.95);
}

.table-primary,.table-secondary {
  color: var(--cui-table-color);
  border-color: var(--cui-table-border-color);
}

.table-secondary {
  --cui-table-bg: #ebedef;
  --cui-table-color: rgba(44, 56, 74, 0.95);
  --cui-table-border-color: rgba(218, 220, 224, 0.995);
  --cui-table-striped-bg: rgba(226, 229, 232, 0.9975);
  --cui-table-striped-color: rgba(44, 56, 74, 0.95);
  --cui-table-active-bg: rgba(218, 220, 224, 0.995);
  --cui-table-active-color: rgba(44, 56, 74, 0.95);
  --cui-table-hover-bg: rgba(222, 225, 228, 0.99625);
  --cui-table-hover-color: rgba(44, 56, 74, 0.95);
}

.table-success {
  --cui-table-bg: #d5f1de;
  --cui-table-color: rgba(44, 56, 74, 0.95);
  --cui-table-border-color: rgba(198, 224, 208, 0.995);
  --cui-table-striped-bg: rgba(205, 233, 215, 0.9975);
  --cui-table-striped-color: rgba(44, 56, 74, 0.95);
  --cui-table-active-bg: rgba(198, 224, 208, 0.995);
  --cui-table-active-color: rgba(44, 56, 74, 0.95);
  --cui-table-hover-bg: rgba(201, 228, 212, 0.99625);
  --cui-table-hover-color: rgba(44, 56, 74, 0.95);
}

.table-success,.table-danger {
  color: var(--cui-table-color);
  border-color: var(--cui-table-border-color);
}

.table-danger {
  --cui-table-bg: #fadddd;
  --cui-table-color: rgba(44, 56, 74, 0.95);
  --cui-table-border-color: rgba(231, 206, 208, 0.995);
  --cui-table-striped-bg: rgba(241, 214, 214, 0.9975);
  --cui-table-striped-color: rgba(44, 56, 74, 0.95);
  --cui-table-active-bg: rgba(231, 206, 208, 0.995);
  --cui-table-active-color: rgba(44, 56, 74, 0.95);
  --cui-table-hover-bg: rgba(236, 210, 211, 0.99625);
  --cui-table-hover-color: rgba(44, 56, 74, 0.95);
}

.table-warning {
  --cui-table-bg: #feefd0;
  --cui-table-color: rgba(44, 56, 74, 0.95);
  --cui-table-border-color: rgba(235, 222, 196, 0.995);
  --cui-table-striped-bg: rgba(244, 231, 202, 0.9975);
  --cui-table-striped-color: rgba(44, 56, 74, 0.95);
  --cui-table-active-bg: rgba(235, 222, 196, 0.995);
  --cui-table-active-color: rgba(44, 56, 74, 0.95);
  --cui-table-hover-bg: rgba(240, 226, 199, 0.99625);
  --cui-table-hover-color: rgba(44, 56, 74, 0.95);
}

.table-warning,.table-info {
  color: var(--cui-table-color);
  border-color: var(--cui-table-border-color);
}

.table-info {
  --cui-table-bg: #d6ebff;
  --cui-table-color: rgba(44, 56, 74, 0.95);
  --cui-table-border-color: rgba(198, 219, 238, 0.995);
  --cui-table-striped-bg: rgba(206, 227, 247, 0.9975);
  --cui-table-striped-color: rgba(44, 56, 74, 0.95);
  --cui-table-active-bg: rgba(198, 219, 238, 0.995);
  --cui-table-active-color: rgba(44, 56, 74, 0.95);
  --cui-table-hover-bg: rgba(202, 223, 243, 0.99625);
  --cui-table-hover-color: rgba(44, 56, 74, 0.95);
}

.table-light {
  --cui-table-bg: #fbfbfc;
  --cui-table-color: rgba(44, 56, 74, 0.95);
  --cui-table-border-color: rgba(232, 233, 236, 0.995);
  --cui-table-striped-bg: rgba(242, 242, 244, 0.9975);
  --cui-table-striped-color: rgba(44, 56, 74, 0.95);
  --cui-table-active-bg: rgba(232, 233, 236, 0.995);
  --cui-table-active-color: rgba(44, 56, 74, 0.95);
  --cui-table-hover-bg: rgba(237, 238, 240, 0.99625);
  --cui-table-hover-color: rgba(44, 56, 74, 0.95);
}

.table-light,.table-dark {
  color: var(--cui-table-color);
  border-color: var(--cui-table-border-color);
}

.table-dark {
  --cui-table-bg: #dcdfe3;
  --cui-table-color: rgba(44, 56, 74, 0.95);
  --cui-table-border-color: rgba(204, 208, 213, 0.995);
  --cui-table-striped-bg: rgba(212, 215, 220, 0.9975);
  --cui-table-striped-color: rgba(44, 56, 74, 0.95);
  --cui-table-active-bg: rgba(204, 208, 213, 0.995);
  --cui-table-active-color: rgba(44, 56, 74, 0.95);
  --cui-table-hover-bg: rgba(208, 212, 217, 0.99625);
  --cui-table-hover-color: rgba(44, 56, 74, 0.95);
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 767.98px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 991.98px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1399.98px) {
  .table-responsive-xxl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.form-label {
  margin-bottom: 0.5rem;
}

.form-label,.col-form-label {
  color: var(--cui-form-label-color, );
}

.col-form-label {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
}

.col-form-label-lg {
  padding-top: calc(0.5rem + 1px);
  padding-bottom: calc(0.5rem + 1px);
  font-size: 1.25rem;
}

.col-form-label-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: 0.875rem;
}

.form-text {
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--cui-form-text-color, rgba(44, 56, 74, 0.38));
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cui-input-color, rgba(44, 56, 74, 0.95));
  background-color: var(--cui-input-bg, #fff);
  background-clip: padding-box;
  border: 1px solid var(--cui-input-border-color, #b1b7c1);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}
.form-control[type=file] {
  overflow: hidden;
}
.form-control[type=file]:not(:disabled):not(:-moz-read-only) {
  cursor: pointer;
}
.form-control[type=file]:not(:disabled):not(:read-only) {
  cursor: pointer;
}
.form-control:focus {
  color: var(--cui-input-focus-color, rgba(44, 56, 74, 0.95));
  background-color: var(--cui-input-focus-bg, #fff);
  border-color: var(--cui-input-focus-border-color, #998fed);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(50, 31, 219, 0.25);
}
.form-control::-webkit-date-and-time-value {
  height: 1.5em;
}
.form-control::-webkit-input-placeholder {
  color: var(--cui-input-placeholder-color, #8a93a2);
  opacity: 1;
}
.form-control::-moz-placeholder {
  color: var(--cui-input-placeholder-color, #8a93a2);
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: var(--cui-input-placeholder-color, #8a93a2);
  opacity: 1;
}
.form-control::-ms-input-placeholder {
  color: var(--cui-input-placeholder-color, #8a93a2);
  opacity: 1;
}
.form-control::placeholder {
  color: var(--cui-input-placeholder-color, #8a93a2);
  opacity: 1;
}
.form-control:-moz-read-only {
  background-color: var(--cui-input-disabled-bg, #d8dbe0);
  border-color: var(--cui-input-disabled-border-color, #b1b7c1);
  opacity: 1;
}
.form-control:disabled, .form-control:read-only {
  background-color: var(--cui-input-disabled-bg, #d8dbe0);
  border-color: var(--cui-input-disabled-border-color, #b1b7c1);
  opacity: 1;
}
.form-control::file-selector-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  -webkit-margin-end: 0.75rem;
  -moz-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  color: var(--cui-form-file-button-color, rgba(44, 56, 74, 0.95));
  background-color: var(--cui-form-file-button-bg, #d8dbe0);
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-control::file-selector-button {
    transition: none;
  }
}
.form-control:hover:not(:disabled):not(:-moz-read-only)::file-selector-button {
  background-color: var(--cui-form-file-button-hover-bg, #cdd0d5);
}
.form-control:hover:not(:disabled):not(:read-only)::file-selector-button {
  background-color: var(--cui-form-file-button-hover-bg, #cdd0d5);
}
.form-control::-webkit-file-upload-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  -webkit-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  color: var(--cui-form-file-button-color, rgba(44, 56, 74, 0.95));
  background-color: var(--cui-form-file-button-bg, #d8dbe0);
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-control::-webkit-file-upload-button {
    -webkit-transition: none;
    transition: none;
  }
}
.form-control:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button {
  background-color: var(--cui-form-file-button-hover-bg, #cdd0d5);
}

.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  line-height: 1.5;
  color: var(--cui-input-plaintext-color, rgba(44, 56, 74, 0.95));
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}
.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}

.form-control-sm {
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}
.form-control-sm::file-selector-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  -webkit-margin-end: 0.5rem;
  -moz-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}
.form-control-sm::-webkit-file-upload-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}

.form-control-lg {
  min-height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}
.form-control-lg::file-selector-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  -webkit-margin-end: 1rem;
  -moz-margin-end: 1rem;
  margin-inline-end: 1rem;
}
.form-control-lg::-webkit-file-upload-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
}

textarea.form-control {
  min-height: calc(1.5em + 0.75rem + 2px);
}
textarea.form-control-sm {
  min-height: calc(1.5em + 0.5rem + 2px);
}
textarea.form-control-lg {
  min-height: calc(1.5em + 1rem + 2px);
}

.form-control-color {
  max-width: 3rem;
  height: auto;
  padding: 0.375rem;
}
.form-control-color:not(:disabled):not(:-moz-read-only) {
  cursor: pointer;
}
.form-control-color:not(:disabled):not(:read-only) {
  cursor: pointer;
}
.form-control-color::-moz-color-swatch {
  height: 1.5em;
  border-radius: 0.25rem;
}
.form-control-color::-webkit-color-swatch {
  height: 1.5em;
  border-radius: 0.25rem;
}

.form-select {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cui-form-select-color, rgba(44, 56, 74, 0.95));
  background-color: var(--cui-form-select-bg, #fff);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23636f83' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid var(--cui-form-select-border-color, #b1b7c1);
  border-radius: 0.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form-select:focus {
  border-color: var(--cui-form-select-focus-border-color, #998fed);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(50, 31, 219, 0.25);
}
.form-select[multiple], .form-select[size]:not([size="1"]) {
  background-image: none;
}
html:not([dir=rtl]) .form-select[multiple], html:not([dir=rtl]) .form-select[size]:not([size="1"]) {
  padding-right: 0.75rem;
}
*[dir=rtl] .form-select[multiple], *[dir=rtl] .form-select[size]:not([size="1"]) {
  padding-left: 0.75rem;
}
.form-select:disabled {
  color: var(--cui-form-select-disabled-color, );
  background-color: var(--cui-form-select-disabled-bg, #d8dbe0);
  border-color: var(--cui-form-select-disabled-border-color, #b1b7c1);
}
.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--cui-form-select-color, rgba(44, 56, 74, 0.95));
}

.form-select-sm {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
}
html:not([dir=rtl]) .form-select-sm {
  padding-left: 0.5rem;
}
*[dir=rtl] .form-select-sm {
  padding-right: 0.5rem;
}

.form-select-lg {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1.25rem;
}
html:not([dir=rtl]) .form-select-lg {
  padding-left: 1rem;
}
*[dir=rtl] .form-select-lg {
  padding-right: 1rem;
}

.form-check {
  display: block;
  min-height: 1.5rem;
  margin-bottom: 0.125rem;
}
html:not([dir=rtl]) .form-check {
  padding-left: 1.5em;
}
*[dir=rtl] .form-check {
  padding-right: 1.5em;
}
html:not([dir=rtl]) .form-check .form-check-input {
  float: left;
  margin-left: -1.5em;
}
*[dir=rtl] .form-check .form-check-input {
  float: right;
  margin-right: -1.5em;
}

.form-check-input {
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  background-color: var(--cui-form-check-input-bg, #fff);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 21, 0.25);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}
.form-check-input[type=checkbox] {
  border-radius: 0.25em;
}
.form-check-input[type=radio] {
  border-radius: 50%;
}
.form-check-input:active {
  -webkit-filter: brightness(90%);
  filter: brightness(90%);
}
.form-check-input:focus {
  border-color: #998fed;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(50, 31, 219, 0.25);
}
.form-check-input:checked {
  background-color: var(--cui-form-check-input-checked-bg-color, #321fdb);
  border-color: var(--cui-form-check-input-checked-border-color, #321fdb);
}
.form-check-input:checked[type=checkbox] {
  background-image: var(--cui-form-check-input-checked-bg-image, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='rgba%28255, 255, 255, 0.87%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"));
}
.form-check-input:checked[type=radio] {
  background-image: var(--cui-form-check-radio-checked-bg-image, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='rgba%28255, 255, 255, 0.87%29'/%3e%3c/svg%3e"));
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: #321fdb;
  border-color: #321fdb;
  background-image: var(--cui-form-check-input-indeterminate-bg-image, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='rgba%28255, 255, 255, 0.87%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"));
}
.form-check-input:disabled {
  pointer-events: none;
  -webkit-filter: none;
  filter: none;
  opacity: 0.5;
}
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
  opacity: 0.5;
}

.form-check-label {
  color: var(--cui-form-check-label-color, unset);
}

html:not([dir=rtl]) .form-switch {
  padding-left: 2em;
}
*[dir=rtl] .form-switch {
  padding-right: 2em;
}
.form-switch .form-check-input {
  width: 1.5em;
  background-image: var(--cui-form-switch-bg-image, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"));
  background-position: left center;
  border-radius: 1.5em;
  transition: background-position 0.15s ease-in-out;
}
html:not([dir=rtl]) .form-switch .form-check-input {
  margin-left: -2em;
}
*[dir=rtl] .form-switch .form-check-input {
  margin-right: -2em;
}
@media (prefers-reduced-motion: reduce) {
  .form-switch .form-check-input {
    transition: none;
  }
}
.form-switch .form-check-input:focus {
  background-image: var(--cui-form-switch-focus-bg-image, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23998fed'/%3e%3c/svg%3e"));
}
.form-switch .form-check-input:checked {
  background-position: right center;
  background-image: var(--cui-form-switch-checked-bg-image, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.87%29'/%3e%3c/svg%3e"));
}

.form-switch-lg {
  min-height: 1.25em;
}
html:not([dir=rtl]) .form-switch-lg {
  padding-left: 2.25em;
}
*[dir=rtl] .form-switch-lg {
  padding-right: 2.25em;
}
.form-switch-lg .form-check-input {
  width: 1.75em;
  height: 1.25em;
}
html:not([dir=rtl]) .form-switch-lg .form-check-input {
  margin-left: -2.25em;
}
*[dir=rtl] .form-switch-lg .form-check-input {
  margin-right: -2.25em;
}
.form-switch-lg .form-check-label {
  padding-top: calc((1.25em - 1rem) / 2);
}

.form-switch-xl {
  min-height: 1.5em;
}
html:not([dir=rtl]) .form-switch-xl {
  padding-left: 2.5em;
}
*[dir=rtl] .form-switch-xl {
  padding-right: 2.5em;
}
.form-switch-xl .form-check-input {
  width: 2em;
  height: 1.5em;
}
html:not([dir=rtl]) .form-switch-xl .form-check-input {
  margin-left: -2.5em;
}
*[dir=rtl] .form-switch-xl .form-check-input {
  margin-right: -2.5em;
}
.form-switch-xl .form-check-label {
  padding-top: calc((1.5em - 1rem) / 2);
}

.form-check-inline {
  display: inline-block;
}
html:not([dir=rtl]) .form-check-inline {
  margin-right: 1rem;
}
*[dir=rtl] .form-check-inline {
  margin-left: 1rem;
}

.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
.btn-check[disabled] + .btn, .btn-check:disabled + .btn {
  pointer-events: none;
  -webkit-filter: none;
  filter: none;
  opacity: 0.65;
}

.form-check-primary {
  --cui-form-check-input-checked-bg-color: #321fdb;
  --cui-form-check-input-checked-border-color: #321fdb;
  --cui-form-check-input-indeterminate-bg-color: #321fdb;
  --cui-form-check-input-indeterminate-border-color: #321fdb;
}

.form-check-secondary {
  --cui-form-check-input-checked-bg-color: #9da5b1;
  --cui-form-check-input-checked-border-color: #9da5b1;
  --cui-form-check-input-indeterminate-bg-color: #9da5b1;
  --cui-form-check-input-indeterminate-border-color: #9da5b1;
}

.form-check-success {
  --cui-form-check-input-checked-bg-color: #2eb85c;
  --cui-form-check-input-checked-border-color: #2eb85c;
  --cui-form-check-input-indeterminate-bg-color: #2eb85c;
  --cui-form-check-input-indeterminate-border-color: #2eb85c;
}

.form-check-info {
  --cui-form-check-input-checked-bg-color: #39f;
  --cui-form-check-input-checked-border-color: #39f;
  --cui-form-check-input-indeterminate-bg-color: #39f;
  --cui-form-check-input-indeterminate-border-color: #39f;
}

.form-check-warning {
  --cui-form-check-input-checked-bg-color: #f9b115;
  --cui-form-check-input-checked-border-color: #f9b115;
  --cui-form-check-input-indeterminate-bg-color: #f9b115;
  --cui-form-check-input-indeterminate-border-color: #f9b115;
}

.form-check-danger {
  --cui-form-check-input-checked-bg-color: #e55353;
  --cui-form-check-input-checked-border-color: #e55353;
  --cui-form-check-input-indeterminate-bg-color: #e55353;
  --cui-form-check-input-indeterminate-border-color: #e55353;
}

.form-check-light {
  --cui-form-check-input-checked-bg-color: #ebedef;
  --cui-form-check-input-checked-border-color: #ebedef;
  --cui-form-check-input-indeterminate-bg-color: #ebedef;
  --cui-form-check-input-indeterminate-border-color: #ebedef;
}

.form-check-dark {
  --cui-form-check-input-checked-bg-color: #4f5d73;
  --cui-form-check-input-checked-border-color: #4f5d73;
  --cui-form-check-input-indeterminate-bg-color: #4f5d73;
  --cui-form-check-input-indeterminate-border-color: #4f5d73;
}

.form-range {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form-range:focus {
  outline: 0;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(50, 31, 219, 0.25);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(50, 31, 219, 0.25);
}
.form-range::-moz-focus-outer {
  border: 0;
}
.form-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: var(--cui-form-range-thumb-bg, #321fdb);
  border: 0;
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none;
  }
}
.form-range::-webkit-slider-thumb:active {
  background-color: var(--cui-form-range-thumb-active-bg, #c2bcf4);
}
.form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: var(--cui-form-range-track-bg, #c4c9d0);
  border-color: transparent;
  border-radius: 1rem;
}
.form-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: var(--cui-form-range-thumb-bg, #321fdb);
  border: 0;
  border-radius: 1rem;
  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -moz-appearance: none;
  appearance: none;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-moz-range-thumb {
    -moz-transition: none;
    transition: none;
  }
}
.form-range::-moz-range-thumb:active {
  background-color: var(--cui-form-range-thumb-active-bg, #c2bcf4);
}
.form-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: var(--cui-form-range-track-bg, #c4c9d0);
  border-color: transparent;
  border-radius: 1rem;
}
.form-range:disabled {
  pointer-events: none;
}
.form-range:disabled::-webkit-slider-thumb {
  background-color: var(--cui-form-range-thumb-disabled-bg, #9da5b1);
}
.form-range:disabled::-moz-range-thumb {
  background-color: var(--cui-form-range-thumb-disabled-bg, #9da5b1);
}

.form-floating {
  position: relative;
}
.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.5rem + 2px);
  padding: 1rem 0.75rem;
}
.form-floating > label {
  position: absolute;
  top: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
}
html:not([dir=rtl]) .form-floating > label {
  left: 0;
}
*[dir=rtl] .form-floating > label {
  right: 0;
}
@media (prefers-reduced-motion: reduce) {
  .form-floating > label {
    transition: none;
  }
}
.form-floating > .form-control::-webkit-input-placeholder {
  color: transparent;
}
.form-floating > .form-control::-moz-placeholder {
  color: transparent;
}
.form-floating > .form-control:-ms-input-placeholder {
  color: transparent;
}
.form-floating > .form-control::-ms-input-placeholder {
  color: transparent;
}
.form-floating > .form-control::placeholder {
  color: transparent;
}
.form-floating > .form-control:not(:-moz-placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:not(:-ms-input-placeholder) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:-webkit-autofill {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-select {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:not(:-ms-input-placeholder) ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  opacity: 0.65;
  -webkit-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:-webkit-autofill ~ label {
  opacity: 0.65;
  -webkit-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.input-group {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .form-control:focus,
.input-group > .form-select:focus {
  z-index: 3;
}
.input-group .btn {
  position: relative;
  z-index: 2;
}
.input-group .btn:focus {
  z-index: 3;
}

.input-group-text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cui-input-group-addon-color, rgba(44, 56, 74, 0.95));
  text-align: center;
  white-space: nowrap;
  background-color: var(--cui-input-group-addon-bg, #d8dbe0);
  border: 1px solid var(--cui-input-group-addon-border-color, #b1b7c1);
  border-radius: 0.25rem;
}

.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}

html:not([dir=rtl]) .input-group-lg > .form-select,
html:not([dir=rtl]) .input-group-sm > .form-select {
  padding-right: 3rem;
}
*[dir=rtl] .input-group-lg > .form-select,
*[dir=rtl] .input-group-sm > .form-select {
  padding-left: 3rem;
}

html:not([dir=rtl]) .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
html:not([dir=rtl]) .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
*[dir=rtl] .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
*[dir=rtl] .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
html:not([dir=rtl]) .input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu),
html:not([dir=rtl]) .input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
*[dir=rtl] .input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu),
*[dir=rtl] .input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
html:not([dir=rtl]) .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
*[dir=rtl] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-right: -1px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #2eb85c;
}

.valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #000015;
  background-color: rgba(46, 184, 92, 0.9);
  border-radius: 0.25rem;
}

.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip {
  display: block;
}

.was-validated .form-control:valid, .form-control.is-valid {
  border-color: #2eb85c;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%232eb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
html:not([dir=rtl]) .was-validated .form-control:valid, html:not([dir=rtl]) .form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem);
}
*[dir=rtl] .was-validated .form-control:valid, *[dir=rtl] .form-control.is-valid {
  padding-left: calc(1.5em + 0.75rem);
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
  border-color: #2eb85c;
  box-shadow: 0 0 0 0.25rem rgba(46, 184, 92, 0.25);
}

.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}
html:not([dir=rtl]) .was-validated textarea.form-control:valid, html:not([dir=rtl]) textarea.form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem);
}
*[dir=rtl] .was-validated textarea.form-control:valid, *[dir=rtl] textarea.form-control.is-valid {
  padding-left: calc(1.5em + 0.75rem);
}

.was-validated .form-select:valid, .form-select.is-valid {
  border-color: #2eb85c;
}
.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23636f83' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%232eb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
html:not([dir=rtl]) .was-validated .form-select:valid:not([multiple]):not([size]), html:not([dir=rtl]) .was-validated .form-select:valid:not([multiple])[size="1"], html:not([dir=rtl]) .form-select.is-valid:not([multiple]):not([size]), html:not([dir=rtl]) .form-select.is-valid:not([multiple])[size="1"] {
  padding-right: 4.125rem;
}
*[dir=rtl] .was-validated .form-select:valid:not([multiple]):not([size]), *[dir=rtl] .was-validated .form-select:valid:not([multiple])[size="1"], *[dir=rtl] .form-select.is-valid:not([multiple]):not([size]), *[dir=rtl] .form-select.is-valid:not([multiple])[size="1"] {
  padding-left: 4.125rem;
}
.was-validated .form-select:valid:focus, .form-select.is-valid:focus {
  border-color: #2eb85c;
  box-shadow: 0 0 0 0.25rem rgba(46, 184, 92, 0.25);
}

.was-validated .form-check-input:valid, .form-check-input.is-valid {
  border-color: #2eb85c;
}
.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
  background-color: #2eb85c;
}
.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {
  box-shadow: 0 0 0 0.25rem rgba(46, 184, 92, 0.25);
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: #2eb85c;
}

html:not([dir=rtl]) .form-check-inline .form-check-input ~ .valid-feedback {
  margin-left: 0.5em;
}
*[dir=rtl] .form-check-inline .form-check-input ~ .valid-feedback {
  margin-right: 0.5em;
}

.was-validated .input-group .form-control:valid, .input-group .form-control.is-valid,
.was-validated .input-group .form-select:valid,
.input-group .form-select.is-valid {
  z-index: 3;
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #e55353;
}

.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #000015;
  background-color: rgba(229, 83, 83, 0.9);
  border-radius: 0.25rem;
}

.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: #e55353;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23e55353'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e55353' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
html:not([dir=rtl]) .was-validated .form-control:invalid, html:not([dir=rtl]) .form-control.is-invalid {
  padding-right: calc(1.5em + 0.75rem);
}
*[dir=rtl] .was-validated .form-control:invalid, *[dir=rtl] .form-control.is-invalid {
  padding-left: calc(1.5em + 0.75rem);
}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  border-color: #e55353;
  box-shadow: 0 0 0 0.25rem rgba(229, 83, 83, 0.25);
}

.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}
html:not([dir=rtl]) .was-validated textarea.form-control:invalid, html:not([dir=rtl]) textarea.form-control.is-invalid {
  padding-right: calc(1.5em + 0.75rem);
}
*[dir=rtl] .was-validated textarea.form-control:invalid, *[dir=rtl] textarea.form-control.is-invalid {
  padding-left: calc(1.5em + 0.75rem);
}

.was-validated .form-select:invalid, .form-select.is-invalid {
  border-color: #e55353;
}
.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23636f83' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23e55353'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e55353' stroke='none'/%3e%3c/svg%3e");
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
html:not([dir=rtl]) .was-validated .form-select:invalid:not([multiple]):not([size]), html:not([dir=rtl]) .was-validated .form-select:invalid:not([multiple])[size="1"], html:not([dir=rtl]) .form-select.is-invalid:not([multiple]):not([size]), html:not([dir=rtl]) .form-select.is-invalid:not([multiple])[size="1"] {
  padding-right: 4.125rem;
}
*[dir=rtl] .was-validated .form-select:invalid:not([multiple]):not([size]), *[dir=rtl] .was-validated .form-select:invalid:not([multiple])[size="1"], *[dir=rtl] .form-select.is-invalid:not([multiple]):not([size]), *[dir=rtl] .form-select.is-invalid:not([multiple])[size="1"] {
  padding-left: 4.125rem;
}
.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
  border-color: #e55353;
  box-shadow: 0 0 0 0.25rem rgba(229, 83, 83, 0.25);
}

.was-validated .form-check-input:invalid, .form-check-input.is-invalid {
  border-color: #e55353;
}
.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
  background-color: #e55353;
}
.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(229, 83, 83, 0.25);
}
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
  color: #e55353;
}

html:not([dir=rtl]) .form-check-inline .form-check-input ~ .invalid-feedback {
  margin-left: 0.5em;
}
*[dir=rtl] .form-check-inline .form-check-input ~ .invalid-feedback {
  margin-right: 0.5em;
}

.was-validated .input-group .form-control:invalid, .input-group .form-control.is-invalid,
.was-validated .input-group .form-select:invalid,
.input-group .form-select.is-invalid {
  z-index: 3;
}

.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cui-btn-color, rgba(44, 56, 74, 0.95));
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: var(--cui-btn-bg, transparent);
  border: 1px solid var(--cui-btn-border-color, transparent);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
.btn:hover {
  color: var(--cui-btn-hover-color, rgba(44, 56, 74, 0.95));
}
.btn:hover,.btn-check:focus + .btn, .btn:focus {
  background-color: var(--cui-btn-hover-bg);
  border-color: var(--cui-btn-hover-border-color, transparent);
}
.btn-check:focus + .btn, .btn:focus {
  color: var(--cui-btn-hover-color);
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--cui-btn-shadow);
}
.btn-check:checked + .btn, .btn-check:active + .btn, .btn:active, .btn.active, .show > .btn.dropdown-toggle {
  color: var(--cui-btn-active-color);
  background-color: var(--cui-btn-active-bg);
  border-color: var(--cui-btn-active-border-color, transparent);
}
.btn-check:checked + .btn:focus, .btn-check:active + .btn:focus, .btn:active:focus, .btn.active:focus, .show > .btn.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem var(--cui-btn-shadow);
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  color: var(--cui-btn-disabled-color);
  pointer-events: none;
  background-color: var(--cui-btn-disabled-bg);
  border-color: var(--cui-btn-disabled-border-color, transparent);
  opacity: 0.65;
}

.btn-primary {
  --cui-btn-bg: #321fdb;
  --cui-btn-border-color: #321fdb;
  --cui-btn-color: rgba(255, 255, 255, 0.87);
  --cui-btn-hover-bg: #5141e0;
  --cui-btn-hover-border-color: #4735df;
  --cui-btn-hover-color: rgba(255, 255, 255, 0.87);
  --cui-btn-active-bg: #5b4ce2;
  --cui-btn-active-border-color: #4735df;
  --cui-btn-active-color: rgba(255, 255, 255, 0.87);
  --cui-btn-disabled-bg: #321fdb;
  --cui-btn-disabled-border-color: #321fdb;
  --cui-btn-disabled-color: rgba(255, 255, 255, 0.87);
  --cui-btn-shadow: rgba(50, 31, 219, 0.5);
}

.btn-secondary {
  --cui-btn-bg: #9da5b1;
  --cui-btn-border-color: #9da5b1;
  --cui-btn-color: #000015;
  --cui-btn-hover-bg: #acb3bd;
  --cui-btn-hover-border-color: #a7aeb9;
  --cui-btn-hover-color: rgba(44, 56, 74, 0.95);
  --cui-btn-active-bg: #b1b7c1;
  --cui-btn-active-border-color: #a7aeb9;
  --cui-btn-active-color: rgba(44, 56, 74, 0.95);
  --cui-btn-disabled-bg: #9da5b1;
  --cui-btn-disabled-border-color: #9da5b1;
  --cui-btn-disabled-color: #000015;
  --cui-btn-shadow: rgba(157, 165, 177, 0.5);
}

.btn-success {
  --cui-btn-bg: #2eb85c;
  --cui-btn-border-color: #2eb85c;
  --cui-btn-color: #000015;
  --cui-btn-hover-bg: #4dc374;
  --cui-btn-hover-border-color: #43bf6c;
  --cui-btn-hover-color: rgba(44, 56, 74, 0.95);
  --cui-btn-active-bg: #58c67d;
  --cui-btn-active-border-color: #43bf6c;
  --cui-btn-active-color: rgba(44, 56, 74, 0.95);
  --cui-btn-disabled-bg: #2eb85c;
  --cui-btn-disabled-border-color: #2eb85c;
  --cui-btn-disabled-color: #000015;
  --cui-btn-shadow: rgba(46, 184, 92, 0.5);
}

.btn-danger {
  --cui-btn-bg: #e55353;
  --cui-btn-border-color: #e55353;
  --cui-btn-color: #000015;
  --cui-btn-hover-bg: #e96d6d;
  --cui-btn-hover-border-color: #e86464;
  --cui-btn-hover-color: #000015;
  --cui-btn-active-bg: #ea7575;
  --cui-btn-active-border-color: #e86464;
  --cui-btn-active-color: #000015;
  --cui-btn-disabled-bg: #e55353;
  --cui-btn-disabled-border-color: #e55353;
  --cui-btn-disabled-color: #000015;
  --cui-btn-shadow: rgba(229, 83, 83, 0.5);
}

.btn-warning {
  --cui-btn-bg: #f9b115;
  --cui-btn-border-color: #f9b115;
  --cui-btn-color: rgba(44, 56, 74, 0.95);
  --cui-btn-hover-bg: #d49612;
  --cui-btn-hover-border-color: #c78e11;
  --cui-btn-hover-color: #000015;
  --cui-btn-active-bg: #c78e11;
  --cui-btn-active-border-color: #bb8510;
  --cui-btn-active-color: #000015;
  --cui-btn-disabled-bg: #f9b115;
  --cui-btn-disabled-border-color: #f9b115;
  --cui-btn-disabled-color: rgba(44, 56, 74, 0.95);
  --cui-btn-shadow: rgba(249, 177, 21, 0.5);
}

.btn-info {
  --cui-btn-bg: #39f;
  --cui-btn-border-color: #39f;
  --cui-btn-color: #000015;
  --cui-btn-hover-bg: #52a8ff;
  --cui-btn-hover-border-color: #47a3ff;
  --cui-btn-hover-color: #000015;
  --cui-btn-active-bg: #5cadff;
  --cui-btn-active-border-color: #47a3ff;
  --cui-btn-active-color: #000015;
  --cui-btn-disabled-bg: #39f;
  --cui-btn-disabled-border-color: #39f;
  --cui-btn-disabled-color: #000015;
  --cui-btn-shadow: rgba(51, 153, 255, 0.5);
}

.btn-light {
  --cui-btn-bg: #ebedef;
  --cui-btn-border-color: #ebedef;
  --cui-btn-color: rgba(44, 56, 74, 0.95);
  --cui-btn-hover-bg: #c8c9cb;
  --cui-btn-hover-border-color: #bcbebf;
  --cui-btn-hover-color: rgba(44, 56, 74, 0.95);
  --cui-btn-active-bg: #bcbebf;
  --cui-btn-active-border-color: #b0b2b3;
  --cui-btn-active-color: rgba(44, 56, 74, 0.95);
  --cui-btn-disabled-bg: #ebedef;
  --cui-btn-disabled-border-color: #ebedef;
  --cui-btn-disabled-color: rgba(44, 56, 74, 0.95);
  --cui-btn-shadow: rgba(235, 237, 239, 0.5);
}

.btn-dark {
  --cui-btn-bg: #4f5d73;
  --cui-btn-border-color: #4f5d73;
  --cui-btn-color: rgba(255, 255, 255, 0.87);
  --cui-btn-hover-bg: #697588;
  --cui-btn-hover-border-color: #616d81;
  --cui-btn-hover-color: #fff;
  --cui-btn-active-bg: #727d8f;
  --cui-btn-active-border-color: #616d81;
  --cui-btn-active-color: #fff;
  --cui-btn-disabled-bg: #4f5d73;
  --cui-btn-disabled-border-color: #4f5d73;
  --cui-btn-disabled-color: rgba(255, 255, 255, 0.87);
  --cui-btn-shadow: rgba(79, 93, 115, 0.5);
}

.btn-outline-primary {
  --cui-btn-border-color: #321fdb;
  --cui-btn-color: #321fdb;
  --cui-btn-hover-bg: #5141e0;
  --cui-btn-hover-border-color: #4735df;
  --cui-btn-hover-color: rgba(255, 255, 255, 0.87);
  --cui-btn-active-bg: #5b4ce2;
  --cui-btn-active-border-color: #4735df;
  --cui-btn-active-color: rgba(255, 255, 255, 0.87);
  --cui-btn-disabled-color: #321fdb;
  --cui-btn-shadow: rgba(50, 31, 219, 0.5);
}

.btn-outline-secondary {
  --cui-btn-border-color: #9da5b1;
  --cui-btn-color: #9da5b1;
  --cui-btn-hover-bg: #acb3bd;
  --cui-btn-hover-border-color: #a7aeb9;
  --cui-btn-hover-color: rgba(44, 56, 74, 0.95);
  --cui-btn-active-bg: #b1b7c1;
  --cui-btn-active-border-color: #a7aeb9;
  --cui-btn-active-color: rgba(44, 56, 74, 0.95);
  --cui-btn-disabled-color: #9da5b1;
  --cui-btn-shadow: rgba(157, 165, 177, 0.5);
}

.btn-outline-success {
  --cui-btn-border-color: #2eb85c;
  --cui-btn-color: #2eb85c;
  --cui-btn-hover-bg: #4dc374;
  --cui-btn-hover-border-color: #43bf6c;
  --cui-btn-hover-color: rgba(44, 56, 74, 0.95);
  --cui-btn-active-bg: #58c67d;
  --cui-btn-active-border-color: #43bf6c;
  --cui-btn-active-color: rgba(44, 56, 74, 0.95);
  --cui-btn-disabled-color: #2eb85c;
  --cui-btn-shadow: rgba(46, 184, 92, 0.5);
}

.btn-outline-danger {
  --cui-btn-border-color: #e55353;
  --cui-btn-color: #e55353;
  --cui-btn-hover-bg: #e96d6d;
  --cui-btn-hover-border-color: #e86464;
  --cui-btn-hover-color: #000015;
  --cui-btn-active-bg: #ea7575;
  --cui-btn-active-border-color: #e86464;
  --cui-btn-active-color: #000015;
  --cui-btn-disabled-color: #e55353;
  --cui-btn-shadow: rgba(229, 83, 83, 0.5);
}

.btn-outline-warning {
  --cui-btn-border-color: #f9b115;
  --cui-btn-color: #f9b115;
  --cui-btn-hover-bg: #d49612;
  --cui-btn-hover-border-color: #c78e11;
  --cui-btn-hover-color: #000015;
  --cui-btn-active-bg: #c78e11;
  --cui-btn-active-border-color: #bb8510;
  --cui-btn-active-color: #000015;
  --cui-btn-disabled-color: #f9b115;
  --cui-btn-shadow: rgba(249, 177, 21, 0.5);
}

.btn-outline-info {
  --cui-btn-border-color: #39f;
  --cui-btn-color: #39f;
  --cui-btn-hover-bg: #52a8ff;
  --cui-btn-hover-border-color: #47a3ff;
  --cui-btn-hover-color: #000015;
  --cui-btn-active-bg: #5cadff;
  --cui-btn-active-border-color: #47a3ff;
  --cui-btn-active-color: #000015;
  --cui-btn-disabled-color: #39f;
  --cui-btn-shadow: rgba(51, 153, 255, 0.5);
}

.btn-outline-light {
  --cui-btn-border-color: #ebedef;
  --cui-btn-color: #ebedef;
  --cui-btn-hover-bg: #c8c9cb;
  --cui-btn-hover-border-color: #bcbebf;
  --cui-btn-hover-color: rgba(44, 56, 74, 0.95);
  --cui-btn-active-bg: #bcbebf;
  --cui-btn-active-border-color: #b0b2b3;
  --cui-btn-active-color: rgba(44, 56, 74, 0.95);
  --cui-btn-disabled-color: #ebedef;
  --cui-btn-shadow: rgba(235, 237, 239, 0.5);
}

.btn-outline-dark {
  --cui-btn-border-color: #4f5d73;
  --cui-btn-color: #4f5d73;
  --cui-btn-hover-bg: #697588;
  --cui-btn-hover-border-color: #616d81;
  --cui-btn-hover-color: #fff;
  --cui-btn-active-bg: #727d8f;
  --cui-btn-active-border-color: #616d81;
  --cui-btn-active-color: #fff;
  --cui-btn-disabled-color: #4f5d73;
  --cui-btn-shadow: rgba(79, 93, 115, 0.5);
}

.btn-ghost-primary {
  --cui-btn-color: #321fdb;
  --cui-btn-hover-bg: #5141e0;
  --cui-btn-hover-border-color: #4735df;
  --cui-btn-hover-color: rgba(255, 255, 255, 0.87);
  --cui-btn-active-bg: #5b4ce2;
  --cui-btn-active-border-color: #4735df;
  --cui-btn-active-color: rgba(255, 255, 255, 0.87);
  --cui-btn-disabled-color: #321fdb;
  --cui-btn-shadow: rgba(50, 31, 219, 0.5);
}

.btn-ghost-secondary {
  --cui-btn-color: #9da5b1;
  --cui-btn-hover-bg: #acb3bd;
  --cui-btn-hover-border-color: #a7aeb9;
  --cui-btn-hover-color: rgba(44, 56, 74, 0.95);
  --cui-btn-active-bg: #b1b7c1;
  --cui-btn-active-border-color: #a7aeb9;
  --cui-btn-active-color: rgba(44, 56, 74, 0.95);
  --cui-btn-disabled-color: #9da5b1;
  --cui-btn-shadow: rgba(157, 165, 177, 0.5);
}

.btn-ghost-success {
  --cui-btn-color: #2eb85c;
  --cui-btn-hover-bg: #4dc374;
  --cui-btn-hover-border-color: #43bf6c;
  --cui-btn-hover-color: rgba(44, 56, 74, 0.95);
  --cui-btn-active-bg: #58c67d;
  --cui-btn-active-border-color: #43bf6c;
  --cui-btn-active-color: rgba(44, 56, 74, 0.95);
  --cui-btn-disabled-color: #2eb85c;
  --cui-btn-shadow: rgba(46, 184, 92, 0.5);
}

.btn-ghost-danger {
  --cui-btn-color: #e55353;
  --cui-btn-hover-bg: #e96d6d;
  --cui-btn-hover-border-color: #e86464;
  --cui-btn-hover-color: #000015;
  --cui-btn-active-bg: #ea7575;
  --cui-btn-active-border-color: #e86464;
  --cui-btn-active-color: #000015;
  --cui-btn-disabled-color: #e55353;
  --cui-btn-shadow: rgba(229, 83, 83, 0.5);
}

.btn-ghost-warning {
  --cui-btn-color: #f9b115;
  --cui-btn-hover-bg: #d49612;
  --cui-btn-hover-border-color: #c78e11;
  --cui-btn-hover-color: #000015;
  --cui-btn-active-bg: #c78e11;
  --cui-btn-active-border-color: #bb8510;
  --cui-btn-active-color: #000015;
  --cui-btn-disabled-color: #f9b115;
  --cui-btn-shadow: rgba(249, 177, 21, 0.5);
}

.btn-ghost-info {
  --cui-btn-color: #39f;
  --cui-btn-hover-bg: #52a8ff;
  --cui-btn-hover-border-color: #47a3ff;
  --cui-btn-hover-color: #000015;
  --cui-btn-active-bg: #5cadff;
  --cui-btn-active-border-color: #47a3ff;
  --cui-btn-active-color: #000015;
  --cui-btn-disabled-color: #39f;
  --cui-btn-shadow: rgba(51, 153, 255, 0.5);
}

.btn-ghost-light {
  --cui-btn-color: #ebedef;
  --cui-btn-hover-bg: #c8c9cb;
  --cui-btn-hover-border-color: #bcbebf;
  --cui-btn-hover-color: rgba(44, 56, 74, 0.95);
  --cui-btn-active-bg: #bcbebf;
  --cui-btn-active-border-color: #b0b2b3;
  --cui-btn-active-color: rgba(44, 56, 74, 0.95);
  --cui-btn-disabled-color: #ebedef;
  --cui-btn-shadow: rgba(235, 237, 239, 0.5);
}

.btn-ghost-dark {
  --cui-btn-color: #4f5d73;
  --cui-btn-hover-bg: #697588;
  --cui-btn-hover-border-color: #616d81;
  --cui-btn-hover-color: #fff;
  --cui-btn-active-bg: #727d8f;
  --cui-btn-active-border-color: #616d81;
  --cui-btn-active-color: #fff;
  --cui-btn-disabled-color: #4f5d73;
  --cui-btn-shadow: rgba(79, 93, 115, 0.5);
}

.btn-link {
  font-weight: 400;
  color: var(--cui-btn-link-color, #321fdb);
  text-decoration: underline;
}
.btn-link:hover {
  color: var(--cui-btn-link-hover-color, #2819af);
}
.btn-link:disabled, .btn-link.disabled {
  color: var(--cui-btn-link-disabled-color, #8a93a2);
}

.btn-lg, .btn-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}

.btn-sm, .btn-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}

.fade {
  transition: opacity 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}
.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}

.dropup,
.dropend,
.dropdown,
.dropstart {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}
.dropdown-toggle::after {
  display: inline-block;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
html:not([dir=rtl]) .dropdown-toggle::after {
  margin-left: 0.255em;
}
*[dir=rtl] .dropdown-toggle::after {
  margin-right: 0.255em;
}
html:not([dir=rtl]) .dropdown-toggle:empty::after {
  margin-left: 0;
}
*[dir=rtl] .dropdown-toggle:empty::after {
  margin-right: 0;
}

.dropdown-menu {
  position: absolute;
  z-index: 1000;
  display: none;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0;
  font-size: 1rem;
  color: var(--cui-dropdown-color, rgba(44, 56, 74, 0.95));
  text-align: left;
  list-style: none;
  background-color: var(--cui-dropdown-bg, #fff);
  background-clip: padding-box;
  border: 1px solid var(--cui-dropdown-border-color, rgba(0, 0, 21, 0.15));
  border-radius: 0.25rem;
}
.dropdown-menu[data-coreui-popper] {
  top: 100%;
  margin-top: 0.125rem;
}
html:not([dir=rtl]) .dropdown-menu[data-coreui-popper] {
  left: 0;
}
*[dir=rtl] .dropdown-menu[data-coreui-popper] {
  right: 0;
}

.dropdown-menu-start {
  --cui-position: start;
}
.dropdown-menu-start[data-coreui-popper] {
  right: auto /* rtl:ignore */;
  left: 0 /* rtl:ignore */;
}

.dropdown-menu-end {
  --cui-position: end;
}
.dropdown-menu-end[data-coreui-popper] {
  right: 0 /* rtl:ignore */;
  left: auto /* rtl:ignore */;
}

@media (min-width: 576px) {
  .dropdown-menu-sm-start {
    --cui-position: start;
  }
  .dropdown-menu-sm-start[data-coreui-popper] {
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }

  .dropdown-menu-sm-end {
    --cui-position: end;
  }
  .dropdown-menu-sm-end[data-coreui-popper] {
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
@media (min-width: 768px) {
  .dropdown-menu-md-start {
    --cui-position: start;
  }
  .dropdown-menu-md-start[data-coreui-popper] {
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }

  .dropdown-menu-md-end {
    --cui-position: end;
  }
  .dropdown-menu-md-end[data-coreui-popper] {
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
@media (min-width: 992px) {
  .dropdown-menu-lg-start {
    --cui-position: start;
  }
  .dropdown-menu-lg-start[data-coreui-popper] {
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }

  .dropdown-menu-lg-end {
    --cui-position: end;
  }
  .dropdown-menu-lg-end[data-coreui-popper] {
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
@media (min-width: 1200px) {
  .dropdown-menu-xl-start {
    --cui-position: start;
  }
  .dropdown-menu-xl-start[data-coreui-popper] {
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }

  .dropdown-menu-xl-end {
    --cui-position: end;
  }
  .dropdown-menu-xl-end[data-coreui-popper] {
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
@media (min-width: 1400px) {
  .dropdown-menu-xxl-start {
    --cui-position: start;
  }
  .dropdown-menu-xxl-start[data-coreui-popper] {
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }

  .dropdown-menu-xxl-end {
    --cui-position: end;
  }
  .dropdown-menu-xxl-end[data-coreui-popper] {
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
.dropup .dropdown-menu[data-coreui-popper] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
}
.dropup .dropdown-toggle::after {
  display: inline-block;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}
html:not([dir=rtl]) .dropup .dropdown-toggle::after {
  margin-left: 0.255em;
}
*[dir=rtl] .dropup .dropdown-toggle::after {
  margin-right: 0.255em;
}
html:not([dir=rtl]) .dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}
*[dir=rtl] .dropup .dropdown-toggle:empty::after {
  margin-right: 0;
}

.dropend .dropdown-menu[data-coreui-popper] {
  top: 0;
  margin-top: 0;
}
html:not([dir=rtl]) .dropend .dropdown-menu[data-coreui-popper] {
  right: auto;
  left: 100%;
  margin-left: 0.125rem;
}
*[dir=rtl] .dropend .dropdown-menu[data-coreui-popper] {
  left: auto;
  right: 100%;
  margin-right: 0.125rem;
}
.dropend .dropdown-toggle::after {
  display: inline-block;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
  vertical-align: 0;
}
html:not([dir=rtl]) .dropend .dropdown-toggle::after {
  margin-left: 0.255em;
}
*[dir=rtl] .dropend .dropdown-toggle::after {
  margin-right: 0.255em;
}
html:not([dir=rtl]) .dropend .dropdown-toggle:empty::after {
  margin-left: 0;
}
*[dir=rtl] .dropend .dropdown-toggle:empty::after {
  margin-right: 0;
}

.dropstart .dropdown-menu[data-coreui-popper] {
  top: 0;
  margin-top: 0;
}
html:not([dir=rtl]) .dropstart .dropdown-menu[data-coreui-popper] {
  right: 100%;
  left: auto;
  margin-right: 0.125rem;
}
*[dir=rtl] .dropstart .dropdown-menu[data-coreui-popper] {
  left: 100%;
  right: auto;
  margin-left: 0.125rem;
}
.dropstart .dropdown-toggle::after {
  display: inline-block;
  vertical-align: 0.255em;
  content: "";
  display: none;
}
html:not([dir=rtl]) .dropstart .dropdown-toggle::after {
  margin-left: 0.255em;
}
*[dir=rtl] .dropstart .dropdown-toggle::after {
  margin-right: 0.255em;
}
.dropstart .dropdown-toggle::before {
  display: inline-block;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
  vertical-align: 0;
}
html:not([dir=rtl]) .dropstart .dropdown-toggle::before {
  margin-right: 0.255em;
}
*[dir=rtl] .dropstart .dropdown-toggle::before {
  margin-left: 0.255em;
}
html:not([dir=rtl]) .dropstart .dropdown-toggle:empty::after {
  margin-left: 0;
}
*[dir=rtl] .dropstart .dropdown-toggle:empty::after {
  margin-right: 0;
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid var(--cui-dropdown-divider-bg, rgba(0, 0, 21, 0.15));
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1rem;
  clear: both;
  font-weight: 400;
  color: var(--cui-dropdown-link-color, #4f5d73);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
.dropdown-item:hover, .dropdown-item:focus {
  color: var(--cui-dropdown-link-hover-color, #475468);
  background-color: var(--cui-dropdown-link-hover-bg, #d8dbe0);
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--cui-dropdown-link-active-color, rgba(255, 255, 255, 0.87));
  text-decoration: none;
  background-color: var(--cui-dropdown-link-active-bg, #321fdb);
}
.dropdown-item.disabled, .dropdown-item:disabled {
  color: var(--cui-dropdown-link-disabled-color, #9da5b1);
  pointer-events: none;
  background-color: transparent;
}

.dropdown-menu.show,.dropdown-header {
  display: block;
}

.dropdown-header {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--cui-dropdown-header-color, #8a93a2);
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: 0.25rem 1rem;
  color: var(--cui-dropdown-link-color, #4f5d73);
}

.dropdown-menu-dark {
  --cui-dropdown-color: #c4c9d0;
  --cui-dropdown-bg: #636f83;
  --cui-dropdown-border-color: rgba(0, 0, 21, 0.15);
  --cui-dropdown-link-color: #c4c9d0;
  --cui-dropdown-link-hover-color: rgba(255, 255, 255, 0.87);
  --cui-dropdown-link-active-color: rgba(255, 255, 255, 0.87);
  --cui-dropdown-link-disabled-color: #9da5b1;
  --cui-dropdown-divider-bg: rgba(0, 0, 21, 0.15);
  --cui-dropdown-header-color: #9da5b1;
}
.dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus {
  background-color: var(--cui-dropdown-dark-link-hover-bg, rgba(255, 255, 255, 0.15));
}
.dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active {
  background-color: var(--cui-dropdown-dark-link-active-bg, #321fdb);
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}
.btn-group > .btn-check:checked + .btn,
.btn-group > .btn-check:focus + .btn,
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn-check:checked + .btn,
.btn-group-vertical > .btn-check:focus + .btn,
.btn-group-vertical > .btn:hover,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
  z-index: 1;
}

.btn-toolbar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.btn-toolbar .input-group {
  width: auto;
}

html:not([dir=rtl]) .btn-group > .btn:not(:first-child),
html:not([dir=rtl]) .btn-group > .btn-group:not(:first-child) {
  margin-left: -1px;
}
*[dir=rtl] .btn-group > .btn:not(:first-child),
*[dir=rtl] .btn-group > .btn-group:not(:first-child) {
  margin-right: -1px;
}
html:not([dir=rtl]) .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
html:not([dir=rtl]) .btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
*[dir=rtl] .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
*[dir=rtl] .btn-group > .btn-group:not(:last-child) > .btn,html:not([dir=rtl]) .btn-group > .btn:nth-child(n+3),
html:not([dir=rtl]) .btn-group > :not(.btn-check) + .btn,
html:not([dir=rtl]) .btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
*[dir=rtl] .btn-group > .btn:nth-child(n+3),
*[dir=rtl] .btn-group > :not(.btn-check) + .btn,
*[dir=rtl] .btn-group > .btn-group:not(:first-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.dropdown-toggle-split {
  padding-right: 0.5625rem;
  padding-left: 0.5625rem;
}
html:not([dir=rtl]) .dropdown-toggle-split::after, html:not([dir=rtl]) .dropup .dropdown-toggle-split::after, html:not([dir=rtl]) .dropend .dropdown-toggle-split::after {
  margin-left: 0;
}
*[dir=rtl] .dropdown-toggle-split::after, *[dir=rtl] .dropup .dropdown-toggle-split::after, *[dir=rtl] .dropend .dropdown-toggle-split::after,html:not([dir=rtl]) .dropstart .dropdown-toggle-split::before {
  margin-right: 0;
}
*[dir=rtl] .dropstart .dropdown-toggle-split::before {
  margin-left: 0;
}

.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}

.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.btn-group-vertical {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: center;
  justify-content: center;
}
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
  width: 100%;
}
.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) {
  margin-top: -1px;
}
.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn ~ .btn,
.btn-group-vertical > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 0;
  list-style: none;
}
html:not([dir=rtl]) .nav {
  padding-left: 0;
}
*[dir=rtl] .nav {
  padding-right: 0;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--cui-nav-link-color, #321fdb);
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition: none;
  }
}
.nav-link:hover, .nav-link:focus {
  color: var(--cui-nav-link-hover-color, #2819af);
}
.nav-link.disabled {
  color: var(--cui-nav-link-disabled-color, #8a93a2);
  pointer-events: none;
  cursor: default;
}

.nav-tabs {
  border-bottom: 1px solid var(--cui-nav-tabs-border-color, #c4c9d0);
}
.nav-tabs .nav-link {
  margin-bottom: -1px;
  background: none;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  border-color: var(--cui-nav-tabs-link-hover-border-color, #d8dbe0 #d8dbe0 #c4c9d0);
  isolation: isolate;
}
.nav-tabs .nav-link.disabled {
  color: var(--cui-nav-link-disabled-color, #8a93a2);
  background-color: transparent;
  border-color: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--cui-nav-tabs-link-active-color, #768192);
  background-color: var(--cui-nav-tabs-link-active-bg, #fff);
  border-color: var(--cui-nav-tabs-link-active-border-color, #c4c9d0 #c4c9d0 #fff);
}
.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-pills .nav-link {
  background: none;
  border: 0;
  border-radius: 0.25rem;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--cui-nav-pills-link-active-color, rgba(255, 255, 255, 0.87));
  background-color: var(--cui-nav-pills-link-active-bg, #321fdb);
}

.nav-fill > .nav-link,
.nav-fill .nav-item {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified > .nav-link,
.nav-justified .nav-item {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}

.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
  width: 100%;
}

.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}

.navbar {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.navbar .header > .container,
.navbar .header > .container-fluid,
.navbar .header > .container-sm,
.navbar .header > .container-md,
.navbar .header > .container-lg,
.navbar .header > .container-xl,
.navbar .header > .container-xxl, .navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: inherit;
  flex-wrap: inherit;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.navbar-brand {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  color: var(--cui-navbar-brand-color);
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}
html:not([dir=rtl]) .navbar-brand {
  margin-right: 1rem;
}
*[dir=rtl] .navbar-brand {
  margin-left: 1rem;
}
.navbar-brand:hover, .navbar-brand:focus {
  color: var(--cui-navbar-brand-hover-color);
}

.navbar-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: 0;
  list-style: none;
}
html:not([dir=rtl]) .navbar-nav {
  padding-left: 0;
}
*[dir=rtl] .navbar-nav {
  padding-right: 0;
}
.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
  color: var(--cui-navbar-color);
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
  color: var(--cui-navbar-hover-color);
}
.navbar-nav .nav-link.disabled {
  color: var(--cui-navbar-disabled-color);
}
.navbar-nav .dropdown-menu {
  position: static;
}
.navbar-nav .show > .nav-link,
.navbar-nav .nav-link.active {
  color: var(--cui-navbar-active-color);
}

.navbar-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--cui-navbar-color);
}
.navbar-text a,
.navbar-text a:hover,
.navbar-text a:focus {
  color: var(--cui-navbar-active-color);
}

.navbar-collapse {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-align: center;
  align-items: center;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--cui-navbar-color);
  background-color: transparent;
  border: 1px solid var(--cui-navbar-toggler-border-color, transparent);
  border-radius: 0.25rem;
  transition: box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .navbar-toggler {
    transition: none;
  }
}
.navbar-toggler:hover,.navbar-toggler:focus {
  text-decoration: none;
}
.navbar-toggler:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-image: var(--cui-navbar-toggler-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.navbar-nav-scroll {
  max-height: var(--cui-scroll-height, 75vh);
  overflow-y: auto;
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-sm .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-sm .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}
@media (min-width: 768px) {
  .navbar-expand-md {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-md .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-md .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}
@media (min-width: 992px) {
  .navbar-expand-lg {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-lg .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}
@media (min-width: 1200px) {
  .navbar-expand-xl {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-xl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xl .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
}
@media (min-width: 1400px) {
  .navbar-expand-xxl {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-xxl .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-xxl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xxl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-xxl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xxl .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-xxl .navbar-toggler {
    display: none;
  }
}
.navbar-expand {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.navbar-expand .navbar-nav {
  -ms-flex-direction: row;
  flex-direction: row;
}
.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}
.navbar-expand .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
.navbar-expand .navbar-nav-scroll {
  overflow: visible;
}
.navbar-expand .navbar-collapse {
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}
.navbar-expand .navbar-toggler {
  display: none;
}

.navbar-light {
  --cui-navbar-brand-color: rgba(44, 56, 74, 0.95);
  --cui-navbar-brand-hover-color: rgba(44, 56, 74, 0.95);
  --cui-navbar-color: rgba(44, 56, 74, 0.681);
  --cui-navbar-hover-color: rgba(44, 56, 74, 0.95);
  --cui-navbar-active-color: rgba(44, 56, 74, 0.95);
  --cui-navbar-disabled-color: rgba(44, 56, 74, 0.38);
  --cui-navbar-toggler-border-color: rgba(0, 0, 21, 0.1);
  --cui-navbar-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2844, 56, 74, 0.681%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-dark {
  --cui-navbar-brand-color: rgba(255, 255, 255, 0.87);
  --cui-navbar-brand-hover-color: rgba(255, 255, 255, 0.87);
  --cui-navbar-color: rgba(255, 255, 255, 0.6);
  --cui-navbar-hover-color: rgba(255, 255, 255, 0.87);
  --cui-navbar-active-color: rgba(255, 255, 255, 0.87);
  --cui-navbar-disabled-color: rgba(255, 255, 255, 0.38);
  --cui-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
  --cui-navbar-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.6%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--cui-card-bg, #fff);
  background-clip: border-box;
  border: 1px solid var(--cui-card-border-color, rgba(0, 0, 21, 0.125));
  border-radius: 0.25rem;
}
.card > hr {
  margin-right: 0;
  margin-left: 0;
}
.card > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}
.card > .list-group:first-child {
  border-top-width: 0;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}
.card > .card-header + .list-group,
.card > .list-group + .card-footer {
  border-top: 0;
}

.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem 1rem;
  color: var(--cui-card-color, unset);
}
.card-title {
  margin-bottom: 0.5rem;
}

.card-subtitle {
  margin-top: -0.25rem;
}

.card-subtitle,.card-text:last-child {
  margin-bottom: 0;
}

.card-link:hover {
  text-decoration: none;
}
html:not([dir=rtl]) .card-link + .card-link {
  margin-left: 1rem;
}
*[dir=rtl] .card-link + .card-link {
  margin-right: 1rem;
}

.card-header {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  color: var(--cui-card-cap-color, unset);
  background-color: var(--cui-card-cap-bg, rgba(0, 0, 21, 0.03));
  border-bottom: 1px solid var(--cui-card-border-color, rgba(0, 0, 21, 0.125));
}
.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.card-footer {
  padding: 0.5rem 1rem;
  color: var(--cui-card-cap-color, unset);
  background-color: var(--cui-card-cap-bg, rgba(0, 0, 21, 0.03));
  border-top: 1px solid var(--cui-card-border-color, rgba(0, 0, 21, 0.125));
}
.card-footer:last-child {
  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}

.card-header-tabs {
  margin-bottom: -0.5rem;
  border-bottom: 0;
}

.card-header-tabs,.card-header-pills {
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  border-radius: calc(0.25rem - 1px);
}

.card-img,
.card-img-top,
.card-img-bottom {
  width: 100%;
}

.card-img,
.card-img-top {
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card-img,
.card-img-bottom {
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

.card-group > .card {
  margin-bottom: 0.75rem;
}
@media (min-width: 576px) {
  .card-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  .card-group > .card {
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    margin-bottom: 0;
  }
  html:not([dir=rtl]) .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  *[dir=rtl] .card-group > .card + .card {
    margin-right: 0;
    border-right: 0;
  }
  html:not([dir=rtl]) .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  *[dir=rtl] .card-group > .card:not(:last-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-top,
.card-group > .card:not(:last-child) .card-header {
    border-top-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-bottom,
.card-group > .card:not(:last-child) .card-footer {
    border-bottom-right-radius: 0;
  }
  html:not([dir=rtl]) .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  *[dir=rtl] .card-group > .card:not(:first-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-top,
.card-group > .card:not(:first-child) .card-header {
    border-top-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-bottom,
.card-group > .card:not(:first-child) .card-footer {
    border-bottom-left-radius: 0;
  }
}

.accordion-button {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  color: var(--cui-accordion-button-color, rgba(44, 56, 74, 0.95));
  text-align: left;
  background-color: var(--cui-accordion-button-bg, #fff);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button {
    transition: none;
  }
}
.accordion-button:not(.collapsed) {
  color: var(--cui-accordion-button-active-color, #2d1cc5);
  background-color: var(--cui-accordion-button-active-bg, #ebe9fb);
  box-shadow: inset 0 -1px 0 var(--cui-accordion-border-color, rgba(0, 0, 21, 0.125));
}
.accordion-button:not(.collapsed)::after {
  background-image: var(--cui-accordion-button-active-icon, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232d1cc5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"));
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
.accordion-button::after {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  content: "";
  background-image: var(--cui-accordion-button-icon, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba%2844, 56, 74, 0.95%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"));
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}
html:not([dir=rtl]) .accordion-button::after {
  margin-left: auto;
}
*[dir=rtl] .accordion-button::after {
  margin-right: auto;
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button::after {
    transition: none;
  }
}
.accordion-button:hover {
  z-index: 2;
}
.accordion-button:focus {
  z-index: 3;
  border-color: var(--cui-accordion-button-focus-border-color, #998fed);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(50, 31, 219, 0.25);
}

.accordion-header {
  margin-bottom: 0;
}

.accordion-item {
  background-color: var(--cui-accordion-bg, #fff);
  border: 1px solid var(--cui-accordion-border-color, rgba(0, 0, 21, 0.125));
}
.accordion-item:first-of-type {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
.accordion-item:not(:first-of-type) {
  border-top: 0;
}
.accordion-item:last-of-type {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}
.accordion-item:last-of-type .accordion-collapse {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.accordion-body {
  padding: 1rem 1.25rem;
}

.accordion-flush .accordion-collapse {
  border-width: 0;
}
.accordion-flush .accordion-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
.accordion-flush .accordion-item:first-child {
  border-top: 0;
}
.accordion-flush .accordion-item:last-child {
  border-bottom: 0;
}
.accordion-flush .accordion-item .accordion-button {
  border-radius: 0;
}

.breadcrumb {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0 0;
  margin-bottom: 1rem;
  list-style: none;
  background-color: var(--cui-breadcrumb-bg, unset);
}

html:not([dir=rtl]) .breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}
*[dir=rtl] .breadcrumb-item + .breadcrumb-item {
  padding-right: 0.5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--cui-breadcrumb-divider-color, #8a93a2);
}
html:not([dir=rtl]) .breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: 0.5rem;
  content: var(--cui-breadcrumb-divider, "/");
}
*[dir=rtl] .breadcrumb-item + .breadcrumb-item::before {
  float: right;
  padding-left: 0.5rem;
  content: var(--cui-breadcrumb-divider-flipped, "/");
}
.breadcrumb-item.active {
  color: var(--cui-breadcrumb-active-color, #8a93a2);
}

.pagination {
  display: -ms-flexbox;
  display: flex;
  list-style: none;
}
html:not([dir=rtl]) .pagination {
  padding-left: 0;
}
*[dir=rtl] .pagination {
  padding-right: 0;
}

.page-link {
  position: relative;
  display: block;
  color: var(--cui-pagination-color, #321fdb);
  text-decoration: none;
  background-color: var(--cui-pagination-bg, #fff);
  border: 1px solid var(--cui-pagination-border-color, #c4c9d0);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  padding: 0.375rem 0.75rem;
}
@media (prefers-reduced-motion: reduce) {
  .page-link {
    transition: none;
  }
}
.page-link:hover {
  z-index: 2;
  color: var(--cui-pagination-hover-color, #2819af);
  background-color: var(--cui-pagination-hover-bg, #d8dbe0);
  border-color: var(--cui-pagination-hover-border-color, #c4c9d0);
}
.page-link:focus {
  z-index: 3;
  color: var(--cui-pagination-focus-color, #2819af);
  background-color: var(--cui-pagination-focus-bg, #d8dbe0);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(50, 31, 219, 0.25);
}

html:not([dir=rtl]) .page-item:not(:first-child) .page-link {
  margin-left: -1px;
}
*[dir=rtl] .page-item:not(:first-child) .page-link {
  margin-right: -1px;
}
.page-item.active .page-link {
  z-index: 3;
  color: var(--cui-pagination-active-color, rgba(255, 255, 255, 0.87));
  background-color: var(--cui-pagination-active-bg, #321fdb);
  border-color: var(--cui-pagination-active-border-color, #321fdb);
}
.page-item.disabled .page-link {
  color: var(--cui-pagination-disabled-color, #8a93a2);
  pointer-events: none;
  background-color: var(--cui-pagination-disabled-bg, #fff);
  border-color: var(--cui-pagination-disabled-border-color, #c4c9d0);
}

html:not([dir=rtl]) .page-item:first-child .page-link {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
*[dir=rtl] .page-item:first-child .page-link,html:not([dir=rtl]) .page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
*[dir=rtl] .page-item:last-child .page-link {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
}
html:not([dir=rtl]) .pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}
*[dir=rtl] .pagination-lg .page-item:first-child .page-link,html:not([dir=rtl]) .pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
*[dir=rtl] .pagination-lg .page-item:last-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}
html:not([dir=rtl]) .pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}
*[dir=rtl] .pagination-sm .page-item:first-child .page-link,html:not([dir=rtl]) .pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}
*[dir=rtl] .pagination-sm .page-item:last-child .page-link {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}

.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: var(--cui-badge-color, rgba(255, 255, 255, 0.87));
  text-align: center;
  white-space: nowrap;
  vertical-align: text-bottom;
  border-radius: 0.25rem;
}
.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.badge-sm {
  padding: 0.3em 0.5em;
  font-size: 0.65em;
}

.alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  color: var(--cui-alert-color);
  background-color: var(--cui-alert-bg);
  border: 1px solid var(--cui-alert-border-color, transparent);
  border-radius: 0.25rem;
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
  color: var(--cui-alert-link-color);
}

html:not([dir=rtl]) .alert-dismissible {
  padding-right: 3rem;
}
*[dir=rtl] .alert-dismissible {
  padding-left: 3rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
}
html:not([dir=rtl]) .alert-dismissible .btn-close {
  right: 0;
}
*[dir=rtl] .alert-dismissible .btn-close {
  left: 0;
}

.alert-primary {
  --cui-alert-color: #1e1383;
  --cui-alert-bg: #d6d2f8;
  --cui-alert-border-color: #c2bcf4;
  --cui-alert-link-color: #180f69;
}

.alert-secondary {
  --cui-alert-color: #5e636a;
  --cui-alert-bg: #ebedef;
  --cui-alert-border-color: #e2e4e8;
  --cui-alert-link-color: #4b4f55;
}

.alert-success {
  --cui-alert-color: #1c6e37;
  --cui-alert-bg: #d5f1de;
  --cui-alert-border-color: #c0eace;
  --cui-alert-link-color: #16582c;
}

.alert-danger {
  --cui-alert-color: #893232;
  --cui-alert-bg: #fadddd;
  --cui-alert-border-color: #f7cbcb;
  --cui-alert-link-color: #6e2828;
}

.alert-warning {
  --cui-alert-color: rgba(89, 77, 48, 0.97);
  --cui-alert-bg: #feefd0;
  --cui-alert-border-color: #fde8b9;
  --cui-alert-link-color: #77550a;
}

.alert-info {
  --cui-alert-color: #1f5c99;
  --cui-alert-bg: #d6ebff;
  --cui-alert-border-color: #c2e0ff;
  --cui-alert-link-color: #194a7a;
}

.alert-light {
  --cui-alert-color: rgba(85, 92, 103, 0.97);
  --cui-alert-bg: #fbfbfc;
  --cui-alert-border-color: #f9fafa;
  --cui-alert-link-color: #717272;
}

.alert-dark {
  --cui-alert-color: #2f3845;
  --cui-alert-bg: #dcdfe3;
  --cui-alert-border-color: #caced5;
  --cui-alert-link-color: #262d37;
}

@-webkit-keyframes progress-bar-stripes {
  0% {
    background-position-x: 1rem;
  }
}

@keyframes progress-bar-stripes {
  0% {
    background-position-x: 1rem;
  }
}
.progress {
  height: 1rem;
  font-size: 0.75rem;
  background-color: var(--cui-progress-bg, #d8dbe0);
  border-radius: 0.25rem;
}

.progress,.progress-bar {
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.progress-bar {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  color: var(--cui-progress-bar-color, rgba(255, 255, 255, 0.87));
  text-align: center;
  white-space: nowrap;
  background-color: var(--cui-progress-bar-bg, #321fdb);
  transition: width 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  -webkit-animation: 1s linear infinite progress-bar-stripes;
  animation: 1s linear infinite progress-bar-stripes;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    -webkit-animation: none;
    animation: none;
  }
}

.progress-xs {
  height: 4px;
}

.progress-sm {
  height: 8px;
}

.progress.progress-white {
  background-color: rgba(255, 255, 255, 0.2);
}
.progress.progress-white .progress-bar {
  background-color: #fff;
}

.progress-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  margin-bottom: 1rem;
}

.progress-group-prepend {
  -ms-flex: 0 0 100px;
  flex: 0 0 100px;
  -ms-flex-item-align: center;
  align-self: center;
}

.progress-group-icon {
  font-size: 1.25rem;
}

.progress-group-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 0.25rem;
}

.progress-group-bars {
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-item-align: center;
  align-self: center;
}
.progress-group-bars .progress:not(:last-child) {
  margin-bottom: 2px;
}

.progress-group-header + .progress-group-bars {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}

.list-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: 0;
  border-radius: 0.25rem;
}
html:not([dir=rtl]) .list-group {
  padding-left: 0;
}
*[dir=rtl] .list-group {
  padding-right: 0;
}

.list-group-numbered {
  list-style-type: none;
  counter-reset: section;
}
.list-group-numbered > li::before {
  content: counters(section, ".") ". ";
  counter-increment: section;
}

.list-group-item-action {
  width: 100%;
  color: var(--cui-list-group-action-color, #768192);
  text-align: inherit;
}
.list-group-item-action:hover, .list-group-item-action:focus {
  z-index: 1;
  color: var(--cui-list-group-action-hover-color, #768192);
  text-decoration: none;
  background-color: var(--cui-list-group-hover-bg, #ebedef);
}
.list-group-item-action:active {
  color: var(--cui-list-group-action-active-color, rgba(44, 56, 74, 0.95));
  background-color: var(--cui-list-group-action-active-bg, #d8dbe0);
  border-color: var(--cui-list-group-action-active-border-color);
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
  color: var(--cui-list-group-color, unset);
  text-decoration: none;
  background-color: var(--cui-list-group-bg, #fff);
  border: 1px solid var(--cui-list-group-border-color, rgba(0, 0, 21, 0.125));
}
.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.list-group-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}
.list-group-item.disabled, .list-group-item:disabled {
  color: var(--cui-list-group-disabled-color, #8a93a2);
  pointer-events: none;
  background-color: var(--cui-list-group-disabled-bg, #fff);
}
.list-group-item.active {
  z-index: 2;
  color: var(--cui-list-group-active-color, rgba(255, 255, 255, 0.87));
  background-color: var(--cui-list-group-active-bg, #321fdb);
  border-color: var(--cui-list-group-active-border-color, #321fdb);
}
.list-group-item + .list-group-item {
  border-top-width: 0;
}
.list-group-item + .list-group-item.active {
  margin-top: -1px;
  border-top-width: 1px;
}

.list-group-horizontal {
  -ms-flex-direction: row;
  flex-direction: row;
}
html:not([dir=rtl]) .list-group-horizontal > .list-group-item:first-child {
  border-bottom-left-radius: 0.25rem;
  border-top-right-radius: 0;
}
*[dir=rtl] .list-group-horizontal > .list-group-item:first-child {
  border-bottom-right-radius: 0.25rem;
  border-top-left-radius: 0;
}
html:not([dir=rtl]) .list-group-horizontal > .list-group-item:last-child {
  border-top-right-radius: 0.25rem;
  border-bottom-left-radius: 0;
}
*[dir=rtl] .list-group-horizontal > .list-group-item:last-child {
  border-top-left-radius: 0.25rem;
  border-bottom-right-radius: 0;
}
.list-group-horizontal > .list-group-item.active {
  margin-top: 0;
}
.list-group-horizontal > .list-group-item + .list-group-item {
  border-top-width: 1px;
}
html:not([dir=rtl]) .list-group-horizontal > .list-group-item + .list-group-item {
  border-left-width: 0;
}
*[dir=rtl] .list-group-horizontal > .list-group-item + .list-group-item {
  border-right-width: 0;
}
html:not([dir=rtl]) .list-group-horizontal > .list-group-item + .list-group-item.active {
  margin-left: -1px;
  border-left-width: 1px;
}
*[dir=rtl] .list-group-horizontal > .list-group-item + .list-group-item.active {
  margin-right: -1px;
  border-right-width: 1px;
}

@media (min-width: 576px) {
  .list-group-horizontal-sm {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  html:not([dir=rtl]) .list-group-horizontal-sm > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  *[dir=rtl] .list-group-horizontal-sm > .list-group-item:first-child {
    border-bottom-right-radius: 0.25rem;
    border-top-left-radius: 0;
  }
  html:not([dir=rtl]) .list-group-horizontal-sm > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
  *[dir=rtl] .list-group-horizontal-sm > .list-group-item:last-child {
    border-top-left-radius: 0.25rem;
    border-bottom-right-radius: 0;
  }
  .list-group-horizontal-sm > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item {
    border-top-width: 1px;
  }
  html:not([dir=rtl]) .list-group-horizontal-sm > .list-group-item + .list-group-item {
    border-left-width: 0;
  }
  *[dir=rtl] .list-group-horizontal-sm > .list-group-item + .list-group-item {
    border-right-width: 0;
  }
  html:not([dir=rtl]) .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
  *[dir=rtl] .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
    margin-right: -1px;
    border-right-width: 1px;
  }
}
@media (min-width: 768px) {
  .list-group-horizontal-md {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  html:not([dir=rtl]) .list-group-horizontal-md > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  *[dir=rtl] .list-group-horizontal-md > .list-group-item:first-child {
    border-bottom-right-radius: 0.25rem;
    border-top-left-radius: 0;
  }
  html:not([dir=rtl]) .list-group-horizontal-md > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
  *[dir=rtl] .list-group-horizontal-md > .list-group-item:last-child {
    border-top-left-radius: 0.25rem;
    border-bottom-right-radius: 0;
  }
  .list-group-horizontal-md > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item {
    border-top-width: 1px;
  }
  html:not([dir=rtl]) .list-group-horizontal-md > .list-group-item + .list-group-item {
    border-left-width: 0;
  }
  *[dir=rtl] .list-group-horizontal-md > .list-group-item + .list-group-item {
    border-right-width: 0;
  }
  html:not([dir=rtl]) .list-group-horizontal-md > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
  *[dir=rtl] .list-group-horizontal-md > .list-group-item + .list-group-item.active {
    margin-right: -1px;
    border-right-width: 1px;
  }
}
@media (min-width: 992px) {
  .list-group-horizontal-lg {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  html:not([dir=rtl]) .list-group-horizontal-lg > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  *[dir=rtl] .list-group-horizontal-lg > .list-group-item:first-child {
    border-bottom-right-radius: 0.25rem;
    border-top-left-radius: 0;
  }
  html:not([dir=rtl]) .list-group-horizontal-lg > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
  *[dir=rtl] .list-group-horizontal-lg > .list-group-item:last-child {
    border-top-left-radius: 0.25rem;
    border-bottom-right-radius: 0;
  }
  .list-group-horizontal-lg > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item {
    border-top-width: 1px;
  }
  html:not([dir=rtl]) .list-group-horizontal-lg > .list-group-item + .list-group-item {
    border-left-width: 0;
  }
  *[dir=rtl] .list-group-horizontal-lg > .list-group-item + .list-group-item {
    border-right-width: 0;
  }
  html:not([dir=rtl]) .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
  *[dir=rtl] .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
    margin-right: -1px;
    border-right-width: 1px;
  }
}
@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  html:not([dir=rtl]) .list-group-horizontal-xl > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  *[dir=rtl] .list-group-horizontal-xl > .list-group-item:first-child {
    border-bottom-right-radius: 0.25rem;
    border-top-left-radius: 0;
  }
  html:not([dir=rtl]) .list-group-horizontal-xl > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
  *[dir=rtl] .list-group-horizontal-xl > .list-group-item:last-child {
    border-top-left-radius: 0.25rem;
    border-bottom-right-radius: 0;
  }
  .list-group-horizontal-xl > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item {
    border-top-width: 1px;
  }
  html:not([dir=rtl]) .list-group-horizontal-xl > .list-group-item + .list-group-item {
    border-left-width: 0;
  }
  *[dir=rtl] .list-group-horizontal-xl > .list-group-item + .list-group-item {
    border-right-width: 0;
  }
  html:not([dir=rtl]) .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
  *[dir=rtl] .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
    margin-right: -1px;
    border-right-width: 1px;
  }
}
@media (min-width: 1400px) {
  .list-group-horizontal-xxl {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  html:not([dir=rtl]) .list-group-horizontal-xxl > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  *[dir=rtl] .list-group-horizontal-xxl > .list-group-item:first-child {
    border-bottom-right-radius: 0.25rem;
    border-top-left-radius: 0;
  }
  html:not([dir=rtl]) .list-group-horizontal-xxl > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
  *[dir=rtl] .list-group-horizontal-xxl > .list-group-item:last-child {
    border-top-left-radius: 0.25rem;
    border-bottom-right-radius: 0;
  }
  .list-group-horizontal-xxl > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-xxl > .list-group-item + .list-group-item {
    border-top-width: 1px;
  }
  html:not([dir=rtl]) .list-group-horizontal-xxl > .list-group-item + .list-group-item {
    border-left-width: 0;
  }
  *[dir=rtl] .list-group-horizontal-xxl > .list-group-item + .list-group-item {
    border-right-width: 0;
  }
  html:not([dir=rtl]) .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
  *[dir=rtl] .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
    margin-right: -1px;
    border-right-width: 1px;
  }
}
.list-group-flush {
  border-radius: 0;
}
.list-group-flush > .list-group-item {
  border-width: 0 0 1px;
}
.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 0;
}

.list-group-item-primary {
  --cui-list-group-color: #1e1383;
  --cui-list-group-bg: #d6d2f8;
  --cui-list-group-hover-bg: #2d1cc5;
  --cui-list-group-action-hover-color: #1e1383;
  --cui-list-group-action-active-color: #fff;
  --cui-list-group-action-active-bg: #1e1383;
  --cui-list-group-action-active-border-color: #1e1383;
}

.list-group-item-secondary {
  --cui-list-group-color: #5e636a;
  --cui-list-group-bg: #ebedef;
  --cui-list-group-hover-bg: #8d959f;
  --cui-list-group-action-hover-color: #5e636a;
  --cui-list-group-action-active-color: #fff;
  --cui-list-group-action-active-bg: #5e636a;
  --cui-list-group-action-active-border-color: #5e636a;
}

.list-group-item-success {
  --cui-list-group-color: #1c6e37;
  --cui-list-group-bg: #d5f1de;
  --cui-list-group-hover-bg: #29a653;
  --cui-list-group-action-hover-color: #1c6e37;
  --cui-list-group-action-active-color: #fff;
  --cui-list-group-action-active-bg: #1c6e37;
  --cui-list-group-action-active-border-color: #1c6e37;
}

.list-group-item-danger {
  --cui-list-group-color: #893232;
  --cui-list-group-bg: #fadddd;
  --cui-list-group-hover-bg: #ce4b4b;
  --cui-list-group-action-hover-color: #893232;
  --cui-list-group-action-active-color: #fff;
  --cui-list-group-action-active-bg: #893232;
  --cui-list-group-action-active-border-color: #893232;
}

.list-group-item-warning {
  --cui-list-group-color: rgba(89, 77, 48, 0.97);
  --cui-list-group-bg: #feefd0;
  --cui-list-group-hover-bg: #e09f13;
  --cui-list-group-action-hover-color: rgba(89, 77, 48, 0.97);
  --cui-list-group-action-active-color: #fff;
  --cui-list-group-action-active-bg: rgba(89, 77, 48, 0.97);
  --cui-list-group-action-active-border-color: rgba(89, 77, 48, 0.97);
}

.list-group-item-info {
  --cui-list-group-color: #1f5c99;
  --cui-list-group-bg: #d6ebff;
  --cui-list-group-hover-bg: #2e8ae6;
  --cui-list-group-action-hover-color: #1f5c99;
  --cui-list-group-action-active-color: #fff;
  --cui-list-group-action-active-bg: #1f5c99;
  --cui-list-group-action-active-border-color: #1f5c99;
}

.list-group-item-light {
  --cui-list-group-color: rgba(85, 92, 103, 0.97);
  --cui-list-group-bg: #fbfbfc;
  --cui-list-group-hover-bg: #d4d5d7;
  --cui-list-group-action-hover-color: rgba(85, 92, 103, 0.97);
  --cui-list-group-action-active-color: #fff;
  --cui-list-group-action-active-bg: rgba(85, 92, 103, 0.97);
  --cui-list-group-action-active-border-color: rgba(85, 92, 103, 0.97);
}

.list-group-item-dark {
  --cui-list-group-color: #2f3845;
  --cui-list-group-bg: #dcdfe3;
  --cui-list-group-hover-bg: #475468;
  --cui-list-group-action-hover-color: #2f3845;
  --cui-list-group-action-active-color: #fff;
  --cui-list-group-action-active-bg: #2f3845;
  --cui-list-group-action-active-border-color: #2f3845;
}

.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  background: transparent var(--cui-btn-close-bg, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba%2844, 56, 74, 0.95%29'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")) center/1em auto no-repeat;
  border: 0;
  border-radius: 0.25rem;
  opacity: 0.5;
}
.btn-close,.btn-close:hover {
  color: var(--cui-btn-close-color, rgba(44, 56, 74, 0.95));
}
.btn-close:hover {
  text-decoration: none;
  opacity: 0.75;
}
.btn-close:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(50, 31, 219, 0.25);
  opacity: 1;
}
.btn-close:disabled, .btn-close.disabled {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  opacity: 0.25;
}

.btn-close-white {
  -webkit-filter: invert(1) grayscale(100%) brightness(200%);
  filter: invert(1) grayscale(100%) brightness(200%);
}

.toast {
  width: 350px;
  max-width: 100%;
  font-size: 0.875rem;
  color: var(--cui-toast-color, unset);
  pointer-events: auto;
  background-color: var(--cui-toast-background-color, rgba(255, 255, 255, 0.85));
  background-clip: padding-box;
  border: 1px solid var(--cui-toast-border-color, rgba(0, 0, 0, 0.1));
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 21, 0.15);
  border-radius: 0.25rem;
}
.toast:not(.showing):not(.show) {
  opacity: 0;
}
.toast.hide {
  display: none;
}

.toast-container {
  z-index: 1090;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  pointer-events: none;
}
.toast-container > :not(:last-child) {
  margin-bottom: 0.75rem;
}

.toast-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.5rem 0.75rem;
  color: var(--cui-toast-header-color, #8a93a2);
  background-color: var(--cui-toast-header-background-color, rgba(255, 255, 255, 0.85));
  background-clip: padding-box;
  border-bottom: 1px solid var(--cui-toast-header-border-color, rgba(0, 0, 0, 0.05));
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
.toast-header .btn-close {
  margin-right: -0.375rem;
  margin-left: 0.75rem;
}

.toast-body {
  padding: 0.75rem;
  word-wrap: break-word;
}

.modal-open {
  overflow: hidden;
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal {
  position: fixed;
  top: 0;
  z-index: 1060;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}
html:not([dir=rtl]) .modal {
  left: 0;
}
*[dir=rtl] .modal {
  right: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}
.modal.fade .modal-dialog {
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-transform: translate(0, -50px);
  transform: translate(0, -50px);
}
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
.modal.show .modal-dialog {
  -webkit-transform: none;
  transform: none;
}
.modal.modal-static .modal-dialog {
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  height: calc(100% - 1rem);
}
.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-content {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  color: var(--cui-modal-content-color, unset);
  pointer-events: auto;
  background-color: var(--cui-modal-content-bg, #fff);
  background-clip: padding-box;
  border: 1px solid var(--cui-modal-content-border-color, rgba(0, 0, 21, 0.2));
  border-radius: 0.3rem;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: var(--cui-modal-backdrop-bg, #000015);
}
html:not([dir=rtl]) .modal-backdrop {
  left: 0;
}
*[dir=rtl] .modal-backdrop {
  right: 0;
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop.show {
  opacity: 0.5;
}

.modal-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid var(--cui-modal-header-border-color, #d8dbe0);
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}
.modal-header .btn-close {
  padding: 0.5rem 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-body {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 0.75rem;
  border-top: 1px solid var(--cui-modal-footer-border-color, #d8dbe0);
  border-bottom-right-radius: calc(0.3rem - 1px);
  border-bottom-left-radius: calc(0.3rem - 1px);
}
.modal-footer > * {
  margin: 0.25rem;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }

  .modal-dialog-scrollable {
    height: calc(100% - 3.5rem);
  }

  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }

  .modal-sm {
    max-width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg,
.modal-xl {
    max-width: 800px;
  }
}
@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}
.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal-fullscreen .modal-header {
  border-radius: 0;
}
.modal-fullscreen .modal-body {
  overflow-y: auto;
}
.modal-fullscreen .modal-footer {
  border-radius: 0;
}

@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0;
  }
}
@media (max-width: 767.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-md-down .modal-footer {
    border-radius: 0;
  }
}
@media (max-width: 991.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-lg-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-lg-down .modal-footer {
    border-radius: 0;
  }
}
@media (max-width: 1199.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-xl-down .modal-footer {
    border-radius: 0;
  }
}
@media (max-width: 1399.98px) {
  .modal-fullscreen-xxl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xxl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-xxl-down .modal-footer {
    border-radius: 0;
  }
}
.tooltip {
  position: absolute;
  z-index: 1080;
  display: block;
  margin: 0;
  font-family: var(--cui-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 0;
}
.tooltip.show {
  opacity: 0.9;
}
.tooltip .tooltip-arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}
.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-top, .bs-tooltip-auto[data-popper-placement^=top] {
  padding: 0.4rem 0;
}
.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
  bottom: 0;
}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  top: -1px;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: var(--cui-tooltip-arrow-color, #000015);
}

.bs-tooltip-end, .bs-tooltip-auto[data-popper-placement^=right] {
  padding: 0 0.4rem;
}
.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
  left: 0;
  width: 0.4rem;
  height: 0.8rem;
}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  right: -1px;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: var(--cui-tooltip-arrow-color, #000015);
}

.bs-tooltip-bottom, .bs-tooltip-auto[data-popper-placement^=bottom] {
  padding: 0.4rem 0;
}
.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
  top: 0;
}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: var(--cui-tooltip-arrow-color, #000015);
}

.bs-tooltip-start, .bs-tooltip-auto[data-popper-placement^=left] {
  padding: 0 0.4rem;
}
.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
  right: 0;
  width: 0.4rem;
  height: 0.8rem;
}
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  left: -1px;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: var(--cui-tooltip-arrow-color, #000015);
}

.tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: var(--cui-tooltip-color, rgba(255, 255, 255, 0.87));
  text-align: center;
  background-color: var(--cui-tooltip-bg, #000015);
  border-radius: 0.25rem;
}

.popover {
  top: 0;
  left: 0 /* rtl:ignore */;
  z-index: 1070;
  max-width: 276px;
  font-family: var(--cui-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  background-color: var(--cui-popover-bg, #fff);
  background-clip: padding-box;
  border: 1px solid var(--cui-popover-border-color, rgba(0, 0, 21, 0.2));
  border-radius: 0.3rem;
}
.popover,.popover .popover-arrow {
  position: absolute;
  display: block;
}
.popover .popover-arrow {
  width: 1rem;
  height: 0.5rem;
}
.popover .popover-arrow::before, .popover .popover-arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
  bottom: calc(-0.5rem - 1px);
}
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
  bottom: 0;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: var(--cui-popover-arrow-outer-color, rgba(0, 0, 21, 0.25));
}
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
  bottom: 1px;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: var(--cui-popover-arrow-color, #fff);
}

.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
  left: calc(-0.5rem - 1px);
  width: 0.5rem;
  height: 1rem;
}
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
  left: 0;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: var(--cui-popover-arrow-outer-color, rgba(0, 0, 21, 0.25));
}
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
  left: 1px;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: var(--cui-popover-arrow-color, #fff);
}

.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
  top: calc(-0.5rem - 1px);
}
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {
  top: 0;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: var(--cui-popover-arrow-outer-color, rgba(0, 0, 21, 0.25));
}
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
  top: 1px;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: var(--cui-popover-arrow-color, #fff);
}
.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1rem;
  margin-left: -0.5rem;
  content: "";
  border-bottom: 1px solid var(--cui-popover-header-bg, #f0f0f0);
}

.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
  right: calc(-0.5rem - 1px);
  width: 0.5rem;
  height: 1rem;
}
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
  right: 0;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: var(--cui-popover-arrow-outer-color, rgba(0, 0, 21, 0.25));
}
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
  right: 1px;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: var(--cui-popover-arrow-color, #fff);
}

.popover-header {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  font-size: 1rem;
  color: var(--cui-popover-header-color, unset);
  background-color: var(--cui-popover-header-bg, #f0f0f0);
  border-bottom: 1px solid var(--cui-popover-header-border-color, #d8d8d8);
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}
.popover-header:empty {
  display: none;
}

.popover-body {
  padding: 1rem 1rem;
  color: var(--cui-popover-body-color, rgba(44, 56, 74, 0.95));
}

.carousel {
  position: relative;
}

.carousel.pointer-event {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

/* rtl:begin:ignore */
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

/* rtl:end:ignore */
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  -webkit-transform: none;
  transform: none;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
  z-index: 1;
  opacity: 1;
}
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  z-index: 0;
  opacity: 0;
  transition: opacity 0s 0.6s;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
    transition: none;
  }
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 15%;
  padding: 0;
  color: var(--cui-carousel-control-color, rgba(255, 255, 255, 0.87));
  text-align: center;
  background: none;
  border: 0;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-control-prev,
.carousel-control-next {
    transition: none;
  }
}
.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: var(--cui-carousel-control-color, rgba(255, 255, 255, 0.87));
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}

/* rtl:options: {
  "autoRename": true,
  "stringMap":[ {
    "name"    : "prev-next",
    "search"  : "prev",
    "replace" : "next"
  } ]
} */
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba%28255, 255, 255, 0.87%29'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba%28255, 255, 255, 0.87%29'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0;
  margin-right: 15%;
  margin-bottom: 1rem;
  margin-left: 15%;
  list-style: none;
}
.carousel-indicators [data-coreui-target] {
  box-sizing: content-box;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: var(--cui-carousel-indicator-active-bg, #fff);
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-indicators [data-coreui-target] {
    transition: none;
  }
}
.carousel-indicators .active {
  opacity: 1;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 1.25rem;
  left: 15%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: var(--cui-carousel-caption-color, rgba(255, 255, 255, 0.87));
  text-align: center;
}

.carousel-dark {
  --cui-carousel-indicator-active-bg: #000015;
  --cui-carousel-caption-color: rgba(44, 56, 74, 0.95);
}
.carousel-dark .carousel-control-prev-icon,
.carousel-dark .carousel-control-next-icon {
  -webkit-filter: invert(1) grayscale(100);
  filter: invert(1) grayscale(100);
}
.carousel-dark .carousel-indicators [data-coreui-target] {
  background-color: #000015;
}
.carousel-dark .carousel-caption {
  color: rgba(44, 56, 74, 0.95);
}

@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg) /* rtl:ignore */;
    transform: rotate(360deg) /* rtl:ignore */;
  }
}

@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg) /* rtl:ignore */;
    transform: rotate(360deg) /* rtl:ignore */;
  }
}
.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -0.125em;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: 0.75s linear infinite spinner-border;
  animation: 0.75s linear infinite spinner-border;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

@-webkit-keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -0.125em;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: 0.75s linear infinite spinner-grow;
  animation: 0.75s linear infinite spinner-grow;
}

.spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .spinner-border,
.spinner-grow {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
  }
}
.offcanvas {
  position: fixed;
  bottom: 0;
  z-index: 1050;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 100%;
  color: unset;
  visibility: hidden;
  background-color: #fff;
  background-clip: padding-box;
  outline: 0;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .offcanvas {
    transition: none;
  }
}

.offcanvas-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem 1rem;
}
.offcanvas-header .btn-close {
  padding: 0.5rem 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
}

.offcanvas-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.offcanvas-body {
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 1rem 1rem;
  overflow-y: auto;
}

.offcanvas-start {
  top: 0;
  width: 400px;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
html:not([dir=rtl]) .offcanvas-start {
  left: 0;
  border-right: 1px solid rgba(0, 0, 21, 0.2);
}
*[dir=rtl] .offcanvas-start {
  right: 0;
  border-left: 1px solid rgba(0, 0, 21, 0.2);
}

.offcanvas-end {
  top: 0;
  width: 400px;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
html:not([dir=rtl]) .offcanvas-end {
  right: 0;
  border-left: 1px solid rgba(0, 0, 21, 0.2);
}
*[dir=rtl] .offcanvas-end {
  left: 0;
  border-right: 1px solid rgba(0, 0, 21, 0.2);
}

.offcanvas-top {
  top: 0;
  border-bottom: 1px solid rgba(0, 0, 21, 0.2);
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

.offcanvas-top,.offcanvas-bottom {
  right: 0;
  left: 0;
  height: 30vh;
  max-height: 100%;
}

.offcanvas-bottom {
  border-top: 1px solid rgba(0, 0, 21, 0.2);
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}

.offcanvas.show {
  -webkit-transform: none;
  transform: none;
}

.avatar {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 50em;
  transition: margin 0.15s;
  width: 2rem;
  height: 2rem;
  font-size: 0.8rem;
}
@media (prefers-reduced-motion: reduce) {
  .avatar {
    transition: none;
  }
}
.avatar .avatar-status {
  width: 0.5333333333rem;
  height: 0.5333333333rem;
}

.avatar-img {
  width: 100%;
  height: auto;
  border-radius: 50em;
}

.avatar-status {
  position: absolute;
  bottom: 0;
  display: block;
  border: 1px solid #fff;
  border-radius: 50em;
}
html:not([dir=rtl]) .avatar-status {
  right: 0;
}
*[dir=rtl] .avatar-status {
  left: 0;
}

.avatar-sm {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.6rem;
}
.avatar-sm .avatar-status {
  width: 0.4rem;
  height: 0.4rem;
}

.avatar-md {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
}
.avatar-md .avatar-status {
  width: 0.6666666667rem;
  height: 0.6666666667rem;
}

.avatar-lg {
  width: 3rem;
  height: 3rem;
  font-size: 1.2rem;
}
.avatar-lg .avatar-status {
  width: 0.8rem;
  height: 0.8rem;
}

.avatar-xl {
  width: 4rem;
  height: 4rem;
  font-size: 1.6rem;
}
.avatar-xl .avatar-status {
  width: 1.0666666667rem;
  height: 1.0666666667rem;
}

.avatars-stack {
  display: -ms-flexbox;
  display: flex;
}
html:not([dir=rtl]) .avatars-stack .avatar {
  margin-right: -0.8rem;
}
*[dir=rtl] .avatars-stack .avatar {
  margin-left: -0.8rem;
}
html:not([dir=rtl]) .avatars-stack .avatar:hover {
  margin-right: 0;
}
*[dir=rtl] .avatars-stack .avatar:hover {
  margin-left: 0;
}
html:not([dir=rtl]) .avatars-stack .avatar-sm {
  margin-right: -0.6rem;
}
*[dir=rtl] .avatars-stack .avatar-sm {
  margin-left: -0.6rem;
}
html:not([dir=rtl]) .avatars-stack .avatar-md {
  margin-right: -1rem;
}
*[dir=rtl] .avatars-stack .avatar-md {
  margin-left: -1rem;
}
html:not([dir=rtl]) .avatars-stack .avatar-lg {
  margin-right: -1.2rem;
}
*[dir=rtl] .avatars-stack .avatar-lg {
  margin-left: -1.2rem;
}
html:not([dir=rtl]) .avatars-stack .avatar-xl {
  margin-right: -1.6rem;
}
*[dir=rtl] .avatars-stack .avatar-xl {
  margin-left: -1.6rem;
}

.callout {
  padding: 1rem 1rem;
  margin: 1rem 0;
  border: var(--cui-callout-border-width, 1px) solid var(--cui-callout-border-color, #d8dbe0);
  border-radius: 0.25rem;
}
html:not([dir=rtl]) .callout {
  border-left-width: var(--cui-callout-border-left-width, 4px);
}
*[dir=rtl] .callout {
  border-right-width: var(--cui-callout-border-right-width, 4px);
}

html:not([dir=rtl]) .callout-primary {
  border-left-color: var(--cui-callout-border-left-color, #321fdb);
}
*[dir=rtl] .callout-primary {
  border-right-color: var(--cui-callout-border-right-color, #321fdb);
}

html:not([dir=rtl]) .callout-secondary {
  border-left-color: var(--cui-callout-border-left-color, #9da5b1);
}
*[dir=rtl] .callout-secondary {
  border-right-color: var(--cui-callout-border-right-color, #9da5b1);
}

html:not([dir=rtl]) .callout-success {
  border-left-color: var(--cui-callout-border-left-color, #2eb85c);
}
*[dir=rtl] .callout-success {
  border-right-color: var(--cui-callout-border-right-color, #2eb85c);
}

html:not([dir=rtl]) .callout-danger {
  border-left-color: var(--cui-callout-border-left-color, #e55353);
}
*[dir=rtl] .callout-danger {
  border-right-color: var(--cui-callout-border-right-color, #e55353);
}

html:not([dir=rtl]) .callout-warning {
  border-left-color: var(--cui-callout-border-left-color, #f9b115);
}
*[dir=rtl] .callout-warning {
  border-right-color: var(--cui-callout-border-right-color, #f9b115);
}

html:not([dir=rtl]) .callout-info {
  border-left-color: var(--cui-callout-border-left-color, #39f);
}
*[dir=rtl] .callout-info {
  border-right-color: var(--cui-callout-border-right-color, #39f);
}

html:not([dir=rtl]) .callout-light {
  border-left-color: var(--cui-callout-border-left-color, #ebedef);
}
*[dir=rtl] .callout-light {
  border-right-color: var(--cui-callout-border-right-color, #ebedef);
}

html:not([dir=rtl]) .callout-dark {
  border-left-color: var(--cui-callout-border-left-color, #4f5d73);
}
*[dir=rtl] .callout-dark {
  border-right-color: var(--cui-callout-border-right-color, #4f5d73);
}

.footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  color: var(--cui-footer-color, rgba(44, 56, 74, 0.95));
  background: var(--cui-footer-bg, #ebedef);
  border-top: var(--cui-footer-border-width, 1px) solid var(--cui-footer-border-color, #d8dbe0);
}

.footer-fixed {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

.footer-sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 1030;
}

.header {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  min-height: 4rem;
  padding: 0.5rem 0.5rem;
  background: var(--cui-header-bg, #fff);
  border-bottom: var(--cui-header-border-width, 1px) solid var(--cui-header-border-color, #d8dbe0);
}
.header > .container,
.header > .container-fluid,
.header > .container-sm,
.header > .container-md,
.header > .container-lg,
.header > .container-xl,
.header > .container-xxl, .header .navbar > .container,
.header .navbar > .container-fluid,
.header .navbar > .container-sm,
.header .navbar > .container-md,
.header .navbar > .container-lg,
.header .navbar > .container-xl,
.header .navbar > .container-xxl {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: inherit;
  flex-wrap: inherit;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.header .container:first-child,
.header .container-fluid:first-child,
.header .container-sm:first-child,
.header .container-md:first-child,
.header .container-lg:first-child,
.header .container-xl:first-child,
.header .container-xxl:first-child {
  min-height: 3rem;
}
.header .container:nth-child(n+2),
.header .container-fluid:nth-child(n+2),
.header .container-sm:nth-child(n+2),
.header .container-md:nth-child(n+2),
.header .container-lg:nth-child(n+2),
.header .container-xl:nth-child(n+2),
.header .container-xxl:nth-child(n+2) {
  min-height: 2rem;
}
.header.header-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1029;
}

.header-divider {
  -ms-flex-preferred-size: calc(100% + 1rem);
  flex-basis: calc(100% + 1rem);
  height: 0;
  margin: 0.5rem -0.5rem;
  border-top: var(--cui-header-divider-border-width, 1px) solid var(--cui-header-divider-border-color, #d8dbe0);
}

.header-brand {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  font-size: 1.25rem;
  color: var(--cui-header-brand-color, #4f5d73);
  text-decoration: none;
  white-space: nowrap;
}
html:not([dir=rtl]) .header-brand {
  margin-right: 1rem;
}
*[dir=rtl] .header-brand {
  margin-left: 1rem;
}
.header-brand:hover, .header-brand:focus {
  color: var(--cui-header-brand-hover-color, #475468);
}

.header-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  margin-bottom: 0;
  list-style: none;
}
html:not([dir=rtl]) .header-nav {
  padding-left: 0;
}
*[dir=rtl] .header-nav {
  padding-right: 0;
}
.header-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  color: var(--cui-header-color, rgba(44, 56, 74, 0.681));
}
.header-nav .nav-link:hover, .header-nav .nav-link:focus {
  color: var(--cui-header-hover-color, rgba(44, 56, 74, 0.95));
}
.header-nav .nav-link.disabled {
  color: var(--cui-header-disabled-color, rgba(44, 56, 74, 0.38));
}
.header-nav .show > .nav-link,
.header-nav .nav-link.active {
  color: var(--cui-header-active-color, rgba(44, 56, 74, 0.95));
}
.header-nav .dropdown-menu {
  position: absolute;
}

.header-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--cui-header-color, rgba(44, 56, 74, 0.681));
}
.header-text a,.header-text a:hover, .header-text a:focus {
  color: var(--cui-header-active-color, rgba(44, 56, 74, 0.95));
}

.header-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  color: var(--cui-header-color, rgba(44, 56, 74, 0.681));
  background-color: var(--cui-header-toggler-bg, transparent);
  border: 0;
  border-radius: 0.25rem;
}
.header-toggler:hover {
  color: rgba(44, 56, 74, 0.95);
  text-decoration: none;
}
.header-toggler:focus {
  outline: 0;
}
.header-toggler:not(:disabled) {
  cursor: pointer;
}

.header-toggler-icon {
  display: block;
  height: 1.5625rem;
  background-image: var(--cui-header-toggler-icon-bg, url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%2844, 56, 74, 0.681%29' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.header-toggler-icon:hover {
  background-image: var(--cui-header-toggler-hover-icon-bg, url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%2844, 56, 74, 0.95%29' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"));
}

.icon {
  display: inline-block;
  color: inherit;
  text-align: center;
  vertical-align: -0.125rem;
  fill: currentColor;
}
.icon:not(.icon-c-s):not(.icon-custom-size) {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
}
.icon:not(.icon-c-s):not(.icon-custom-size).icon-2xl {
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
}
.icon:not(.icon-c-s):not(.icon-custom-size).icon-3xl {
  width: 3rem;
  height: 3rem;
  font-size: 3rem;
}
.icon:not(.icon-c-s):not(.icon-custom-size).icon-4xl {
  width: 4rem;
  height: 4rem;
  font-size: 4rem;
}
.icon:not(.icon-c-s):not(.icon-custom-size).icon-5xl {
  width: 5rem;
  height: 5rem;
  font-size: 5rem;
}
.icon:not(.icon-c-s):not(.icon-custom-size).icon-6xl {
  width: 6rem;
  height: 6rem;
  font-size: 6rem;
}
.icon:not(.icon-c-s):not(.icon-custom-size).icon-7xl {
  width: 7rem;
  height: 7rem;
  font-size: 7rem;
}
.icon:not(.icon-c-s):not(.icon-custom-size).icon-8xl {
  width: 8rem;
  height: 8rem;
  font-size: 8rem;
}
.icon:not(.icon-c-s):not(.icon-custom-size).icon-9xl {
  width: 9rem;
  height: 9rem;
  font-size: 9rem;
}
.icon:not(.icon-c-s):not(.icon-custom-size).icon-xl {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.5rem;
}
.icon:not(.icon-c-s):not(.icon-custom-size).icon-lg {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
}
.icon:not(.icon-c-s):not(.icon-custom-size).icon-sm {
  width: 0.875rem;
  height: 0.875rem;
  font-size: 0.875rem;
}

.sidebar {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 16rem;
  flex: 0 0 16rem;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-order: -1;
  order: -1;
  width: 16rem;
  padding: 0 0;
  color: var(--cui-sidebar-color, rgba(255, 255, 255, 0.87));
  background: var(--cui-sidebar-bg, #3c4b64);
  box-shadow: none;
  transition: margin-left 0.15s, margin-right 0.15s, box-shadow 0.075s, width 0.15s, z-index 0s ease 0.15s, -webkit-transform 0.15s;
  transition: margin-left 0.15s, margin-right 0.15s, box-shadow 0.075s, transform 0.15s, width 0.15s, z-index 0s ease 0.15s;
  transition: margin-left 0.15s, margin-right 0.15s, box-shadow 0.075s, transform 0.15s, width 0.15s, z-index 0s ease 0.15s, -webkit-transform 0.15s;
}
html:not([dir=rtl]) .sidebar {
  border-right: var(--cui-sidebar-border-width, 0) solid var(--cui-sidebar-border-color, transparent);
}
*[dir=rtl] .sidebar {
  border-left: var(--cui-sidebar-border-width, 0) solid var(--cui-sidebar-border-color, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .sidebar {
    transition: none;
  }
}
html:not([dir=rtl]) .sidebar:not(.sidebar-end) {
  margin-left: 0;
}
*[dir=rtl] .sidebar:not(.sidebar-end) {
  margin-right: 0;
}
.sidebar:not(.sidebar-end) ~ * {
  --cui-sidebar-occupy-start: 16rem;
}
.sidebar.sidebar-end {
  -ms-flex-order: 99;
  order: 99;
}
html:not([dir=rtl]) .sidebar.sidebar-end {
  margin-right: 0;
}
*[dir=rtl] .sidebar.sidebar-end {
  margin-left: 0;
}
.sidebar.sidebar-end ~ * {
  --cui-sidebar-occupy-end: 16rem;
}
.sidebar[class*=bg-] {
  border-color: rgba(0, 0, 21, 0.1);
}
.sidebar.sidebar-sm {
  -ms-flex: 0 0 12rem;
  flex: 0 0 12rem;
  width: 12rem;
}
.sidebar.sidebar-sm:not(.sidebar-end) ~ * {
  --cui-sidebar-occupy-start: 12rem;
}
.sidebar.sidebar-sm.sidebar-end ~ * {
  --cui-sidebar-occupy-end: 12rem;
}
.sidebar.sidebar-lg {
  -ms-flex: 0 0 20rem;
  flex: 0 0 20rem;
  width: 20rem;
}
.sidebar.sidebar-lg:not(.sidebar-end) ~ * {
  --cui-sidebar-occupy-start: 20rem;
}
.sidebar.sidebar-lg.sidebar-end ~ * {
  --cui-sidebar-occupy-end: 20rem;
}
.sidebar.sidebar-xl {
  -ms-flex: 0 0 24rem;
  flex: 0 0 24rem;
  width: 24rem;
}
.sidebar.sidebar-xl:not(.sidebar-end) ~ * {
  --cui-sidebar-occupy-start: 24rem;
}
.sidebar.sidebar-xl.sidebar-end ~ * {
  --cui-sidebar-occupy-end: 24rem;
}
@media (min-width: 768px) {
  .sidebar.sidebar-fixed {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1030;
  }
  html:not([dir=rtl]) .sidebar.sidebar-fixed:not(.sidebar-end) {
    left: 0;
  }
  *[dir=rtl] .sidebar.sidebar-fixed:not(.sidebar-end),html:not([dir=rtl]) .sidebar.sidebar-fixed.sidebar-end {
    right: 0;
  }
  *[dir=rtl] .sidebar.sidebar-fixed.sidebar-end {
    left: 0;
  }
  .sidebar.sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
  }
}
@media (min-width: 768px) {
}
.sidebar.sidebar-overlaid {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 1032;
}
html:not([dir=rtl]) .sidebar.sidebar-overlaid:not(.sidebar-end) {
  left: 0;
}
*[dir=rtl] .sidebar.sidebar-overlaid:not(.sidebar-end),html:not([dir=rtl]) .sidebar.sidebar-overlaid.sidebar-end {
  right: 0;
}
*[dir=rtl] .sidebar.sidebar-overlaid.sidebar-end {
  left: 0;
}
@media (max-width: 767.98px) {
  .sidebar {
    --cui-is-mobile: true;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1031;
  }
  html:not([dir=rtl]) .sidebar:not(.sidebar-end) {
    left: 0;
  }
  *[dir=rtl] .sidebar:not(.sidebar-end) {
    right: 0;
  }
  .sidebar:not(.sidebar-end) ~ * {
    --cui-sidebar-occupy-start: 0;
  }
  html:not([dir=rtl]) .sidebar.sidebar-end {
    right: 0;
  }
  *[dir=rtl] .sidebar.sidebar-end {
    left: 0;
  }
  .sidebar.sidebar-end ~ * {
    --cui-sidebar-occupy-end: 0;
  }
}

.sidebar-close {
  position: absolute;
  top: 0;
  width: 4rem;
  height: 4rem;
  color: var(--cui-sidebar-color, rgba(255, 255, 255, 0.87));
  background: transparent;
  border: 0;
}
html:not([dir=rtl]) .sidebar-close {
  right: 0;
}
*[dir=rtl] .sidebar-close {
  left: 0;
}
.sidebar-close:hover {
  text-decoration: none;
}
.sidebar-close:focus {
  outline: 0;
}

.sidebar-brand {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 4rem;
  flex: 0 0 4rem;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: var(--cui-sidebar-brand-color, rgba(255, 255, 255, 0.87));
  background: var(--cui-sidebar-brand-bg, rgba(0, 0, 21, 0.2));
}
.sidebar-brand .sidebar-brand-narrow {
  display: none;
}

.sidebar-header {
  -ms-flex: 0 0 4rem;
  flex: 0 0 4rem;
  padding: 0.75rem 1rem;
  text-align: center;
  background: var(--cui-sidebar-header-bg, rgba(0, 0, 21, 0.2));
  transition: height 0.15s, padding 0.15s;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-header {
    transition: none;
  }
}
.sidebar-header .nav-link {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  min-height: 4rem;
}

.sidebar-footer {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding: 0.75rem 1rem;
  background: var(--cui-sidebar-footer-bg, rgba(0, 0, 21, 0.2));
  transition: height 0.15s, padding 0.15s;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-footer {
    transition: none;
  }
}

.sidebar-toggler {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 3rem;
  flex: 0 0 3rem;
  -ms-flex-pack: end;
  justify-content: flex-end;
  width: inherit;
  padding: 0;
  cursor: pointer;
  background-color: var(--cui-sidebar-toggler-bg, rgba(0, 0, 21, 0.2));
  border: 0;
}
@media (max-width: 767.98px) {
  .sidebar-toggler {
    display: none;
  }
}
.sidebar-toggler::before {
  display: block;
  width: 4rem;
  height: 3rem;
  content: "";
  background-image: var(--cui-sidebar-toggler-indicator, url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%238a93a2' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.75rem;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-toggler::before {
    transition: none;
  }
}
*[dir=rtl] .sidebar-toggler::before {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
.sidebar-toggler:focus {
  outline: 0;
}
.sidebar-toggler:hover {
  background-color: var(--cui-sidebar-toggler-hover-bg, rgba(0, 0, 0, 0.3));
}
.sidebar-toggler:hover::before {
  background-image: var(--cui-sidebar-toggler-indicator-hover, url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='rgba%28255, 255, 255, 0.87%29' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"));
}
.sidebar-end .sidebar-toggler {
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.sidebar-end .sidebar-toggler::before {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

@media (max-width: 767.98px) {
  .sidebar-backdrop {
    position: fixed;
    top: 0;
    z-index: 1030;
    width: 100vw;
    height: 100vh;
    background-color: #000015;
    transition: opacity 0.15s linear;
  }
  html:not([dir=rtl]) .sidebar-backdrop {
    left: 0;
  }
  *[dir=rtl] .sidebar-backdrop {
    right: 0;
  }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .sidebar-backdrop {
    transition: none;
  }
}
@media (max-width: 767.98px) {
  .sidebar-backdrop.fade {
    opacity: 0;
  }
  .sidebar-backdrop.show {
    opacity: 0.5;
  }
}
@media (max-width: 767.98px) {
}

@media (max-width: 575.98px) {
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding:not(.sidebar-end) {
    margin-left: -16rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding:not(.sidebar-end) {
    margin-right: -16rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding:not(.sidebar-end).sidebar-sm {
    margin-left: -12rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding:not(.sidebar-end).sidebar-sm {
    margin-right: -12rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding:not(.sidebar-end).sidebar-lg {
    margin-left: -20rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding:not(.sidebar-end).sidebar-lg {
    margin-right: -20rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding:not(.sidebar-end).sidebar-xl {
    margin-left: -24rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding:not(.sidebar-end).sidebar-xl {
    margin-right: -24rem;
  }
  .sidebar:not(.show).sidebar-self-hiding:not(.sidebar-end) ~ * {
    --cui-sidebar-occupy-start: 0;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding.sidebar-end {
    margin-right: -16rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding.sidebar-end {
    margin-left: -16rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding.sidebar-end.sidebar-sm {
    margin-right: -12rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding.sidebar-end.sidebar-sm {
    margin-left: -12rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding.sidebar-end.sidebar-lg {
    margin-right: -20rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding.sidebar-end.sidebar-lg {
    margin-left: -20rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding.sidebar-end.sidebar-xl {
    margin-right: -24rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding.sidebar-end.sidebar-xl {
    margin-left: -24rem;
  }
  .sidebar:not(.show).sidebar-self-hiding.sidebar-end ~ * {
    --cui-sidebar-occupy-end: 0;
  }
}
@media (max-width: 767.98px) {
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-sm:not(.sidebar-end) {
    margin-left: -16rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-sm:not(.sidebar-end) {
    margin-right: -16rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-sm:not(.sidebar-end).sidebar-sm {
    margin-left: -12rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-sm:not(.sidebar-end).sidebar-sm {
    margin-right: -12rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-sm:not(.sidebar-end).sidebar-lg {
    margin-left: -20rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-sm:not(.sidebar-end).sidebar-lg {
    margin-right: -20rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-sm:not(.sidebar-end).sidebar-xl {
    margin-left: -24rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-sm:not(.sidebar-end).sidebar-xl {
    margin-right: -24rem;
  }
  .sidebar:not(.show).sidebar-self-hiding-sm:not(.sidebar-end) ~ * {
    --cui-sidebar-occupy-start: 0;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-end {
    margin-right: -16rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-end {
    margin-left: -16rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-end.sidebar-sm {
    margin-right: -12rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-end.sidebar-sm {
    margin-left: -12rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-end.sidebar-lg {
    margin-right: -20rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-end.sidebar-lg {
    margin-left: -20rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-end.sidebar-xl {
    margin-right: -24rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-end.sidebar-xl {
    margin-left: -24rem;
  }
  .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-end ~ * {
    --cui-sidebar-occupy-end: 0;
  }
}
@media (max-width: 991.98px) {
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-md:not(.sidebar-end) {
    margin-left: -16rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-md:not(.sidebar-end) {
    margin-right: -16rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-md:not(.sidebar-end).sidebar-sm {
    margin-left: -12rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-md:not(.sidebar-end).sidebar-sm {
    margin-right: -12rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-md:not(.sidebar-end).sidebar-lg {
    margin-left: -20rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-md:not(.sidebar-end).sidebar-lg {
    margin-right: -20rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-md:not(.sidebar-end).sidebar-xl {
    margin-left: -24rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-md:not(.sidebar-end).sidebar-xl {
    margin-right: -24rem;
  }
  .sidebar:not(.show).sidebar-self-hiding-md:not(.sidebar-end) ~ * {
    --cui-sidebar-occupy-start: 0;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-md.sidebar-end {
    margin-right: -16rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-md.sidebar-end {
    margin-left: -16rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-md.sidebar-end.sidebar-sm {
    margin-right: -12rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-md.sidebar-end.sidebar-sm {
    margin-left: -12rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-md.sidebar-end.sidebar-lg {
    margin-right: -20rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-md.sidebar-end.sidebar-lg {
    margin-left: -20rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-md.sidebar-end.sidebar-xl {
    margin-right: -24rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-md.sidebar-end.sidebar-xl {
    margin-left: -24rem;
  }
  .sidebar:not(.show).sidebar-self-hiding-md.sidebar-end ~ * {
    --cui-sidebar-occupy-end: 0;
  }
}
@media (max-width: 1199.98px) {
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-lg:not(.sidebar-end) {
    margin-left: -16rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-lg:not(.sidebar-end) {
    margin-right: -16rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-lg:not(.sidebar-end).sidebar-sm {
    margin-left: -12rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-lg:not(.sidebar-end).sidebar-sm {
    margin-right: -12rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-lg:not(.sidebar-end).sidebar-lg {
    margin-left: -20rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-lg:not(.sidebar-end).sidebar-lg {
    margin-right: -20rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-lg:not(.sidebar-end).sidebar-xl {
    margin-left: -24rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-lg:not(.sidebar-end).sidebar-xl {
    margin-right: -24rem;
  }
  .sidebar:not(.show).sidebar-self-hiding-lg:not(.sidebar-end) ~ * {
    --cui-sidebar-occupy-start: 0;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-end {
    margin-right: -16rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-end {
    margin-left: -16rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-end.sidebar-sm {
    margin-right: -12rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-end.sidebar-sm {
    margin-left: -12rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-end.sidebar-lg {
    margin-right: -20rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-end.sidebar-lg {
    margin-left: -20rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-end.sidebar-xl {
    margin-right: -24rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-end.sidebar-xl {
    margin-left: -24rem;
  }
  .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-end ~ * {
    --cui-sidebar-occupy-end: 0;
  }
}
@media (max-width: 1399.98px) {
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xl:not(.sidebar-end) {
    margin-left: -16rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xl:not(.sidebar-end) {
    margin-right: -16rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xl:not(.sidebar-end).sidebar-sm {
    margin-left: -12rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xl:not(.sidebar-end).sidebar-sm {
    margin-right: -12rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xl:not(.sidebar-end).sidebar-lg {
    margin-left: -20rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xl:not(.sidebar-end).sidebar-lg {
    margin-right: -20rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xl:not(.sidebar-end).sidebar-xl {
    margin-left: -24rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xl:not(.sidebar-end).sidebar-xl {
    margin-right: -24rem;
  }
  .sidebar:not(.show).sidebar-self-hiding-xl:not(.sidebar-end) ~ * {
    --cui-sidebar-occupy-start: 0;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-end {
    margin-right: -16rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-end {
    margin-left: -16rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-end.sidebar-sm {
    margin-right: -12rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-end.sidebar-sm {
    margin-left: -12rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-end.sidebar-lg {
    margin-right: -20rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-end.sidebar-lg {
    margin-left: -20rem;
  }
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-end.sidebar-xl {
    margin-right: -24rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-end.sidebar-xl {
    margin-left: -24rem;
  }
  .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-end ~ * {
    --cui-sidebar-occupy-end: 0;
  }
}
html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xxl:not(.sidebar-end) {
  margin-left: -16rem;
}
*[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xxl:not(.sidebar-end) {
  margin-right: -16rem;
}
html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xxl:not(.sidebar-end).sidebar-sm {
  margin-left: -12rem;
}
*[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xxl:not(.sidebar-end).sidebar-sm {
  margin-right: -12rem;
}
html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xxl:not(.sidebar-end).sidebar-lg {
  margin-left: -20rem;
}
*[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xxl:not(.sidebar-end).sidebar-lg {
  margin-right: -20rem;
}
html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xxl:not(.sidebar-end).sidebar-xl {
  margin-left: -24rem;
}
*[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xxl:not(.sidebar-end).sidebar-xl {
  margin-right: -24rem;
}
.sidebar:not(.show).sidebar-self-hiding-xxl:not(.sidebar-end) ~ * {
  --cui-sidebar-occupy-start: 0;
}
html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-end {
  margin-right: -16rem;
}
*[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-end {
  margin-left: -16rem;
}
html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-end.sidebar-sm {
  margin-right: -12rem;
}
*[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-end.sidebar-sm {
  margin-left: -12rem;
}
html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-end.sidebar-lg {
  margin-right: -20rem;
}
*[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-end.sidebar-lg {
  margin-left: -20rem;
}
html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-end.sidebar-xl {
  margin-right: -24rem;
}
*[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-end.sidebar-xl {
  margin-left: -24rem;
}
.sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-end ~ * {
  --cui-sidebar-occupy-end: 0;
}

.sidebar-nav {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0;
  margin-bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
}
.sidebar-nav .nav-title {
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  font-size: 80%;
  font-weight: 700;
  color: var(--cui-sidebar-nav-title-color, rgba(255, 255, 255, 0.6));
  text-transform: uppercase;
  transition: height 0.15s, margin 0.15s;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-nav .nav-title {
    transition: none;
  }
}
.sidebar-nav .nav-link {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.8445rem 1rem;
  color: var(--cui-sidebar-nav-link-color, rgba(255, 255, 255, 0.6));
  text-decoration: none;
  white-space: nowrap;
  background: var(--cui-sidebar-nav-link-bg, transparent);
  transition: background 0.15s ease, color 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-nav .nav-link {
    transition: none;
  }
}
.sidebar-nav .nav-link.active {
  color: var(--cui-sidebar-nav-link-active-color, rgba(255, 255, 255, 0.87));
  background: var(--cui-sidebar-nav-link-active-bg, rgba(255, 255, 255, 0.05));
}
.sidebar-nav .nav-link.active .nav-icon {
  color: var(--cui-sidebar-nav-link-active-icon-color, rgba(255, 255, 255, 0.87));
}
.sidebar-nav .nav-link.disabled {
  color: var(--cui-sidebar-nav-link-disabled-color, rgba(255, 255, 255, 0.38));
  pointer-events: none;
  cursor: not-allowed;
  background: transparent;
}
.sidebar-nav .nav-link.disabled .nav-icon {
  color: var(--cui-sidebar-nav-link-disabled-icon-color, rgba(255, 255, 255, 0.6));
}
.sidebar-nav .nav-link.disabled:hover {
  color: var(--cui-sidebar-nav-link-disabled-color, rgba(255, 255, 255, 0.38));
}
.sidebar-nav .nav-link.disabled:hover .nav-icon {
  color: var(--cui-sidebar-nav-link-disabled-icon-color, rgba(255, 255, 255, 0.6));
}
.sidebar-nav .nav-link.disabled:hover.nav-dropdown-toggle::after {
  background-image: var(--cui-sidebar-nav-group-indicator-hover, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba%28255, 255, 255, 0.87%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"));
}
@media (hover: hover), (-ms-high-contrast: none) {
  .sidebar-nav .nav-link:hover {
    color: var(--cui-sidebar-nav-link-hover-color, rgba(255, 255, 255, 0.87));
    text-decoration: none;
    background: var(--cui-sidebar-nav-link-hover-bg, rgba(255, 255, 255, 0.05));
  }
  .sidebar-nav .nav-link:hover .nav-icon {
    color: var(--cui-sidebar-nav-link-hover-icon-color, rgba(255, 255, 255, 0.87));
  }
  .sidebar-nav .nav-link:hover.nav-group-toggle::after {
    background-image: var(--cui-sidebar-nav-group-indicator-hover, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba%28255, 255, 255, 0.87%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"));
  }
}
.sidebar-nav .nav-icon {
  -ms-flex: 0 0 4rem;
  flex: 0 0 4rem;
  height: 1.25rem;
  font-size: 1.25rem;
  color: var(--cui-sidebar-nav-link-icon-color, rgba(255, 255, 255, 0.6));
  text-align: center;
  fill: currentColor;
  transition: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-nav .nav-icon {
    transition: none;
  }
}
html:not([dir=rtl]) .sidebar-nav .nav-icon:first-child {
  margin-left: -1rem;
}
*[dir=rtl] .sidebar-nav .nav-icon:first-child {
  margin-right: -1rem;
}
.sidebar-nav .nav-group {
  position: relative;
  transition: background 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-nav .nav-group {
    transition: none;
  }
}
.sidebar-nav .nav-group .nav-group-items {
  overflow: hidden;
  transition: height 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-nav .nav-group .nav-group-items {
    transition: none;
  }
}
.sidebar-nav .nav-group:not(.show) .nav-group-items {
  display: none;
}
.sidebar-nav .nav-group.show {
  background: var(--cui-sidebar-nav-group-bg, rgba(0, 0, 0, 0.2));
}
.sidebar-nav .nav-group.show .nav-group-toggle {
  color: var(--cui-sidebar-nav-group-toggle-show-color, rgba(255, 255, 255, 0.6));
}
.sidebar-nav .nav-group.show > .nav-group-toggle::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.sidebar-nav .nav-group.show + .show {
  margin-top: 1px;
}
.sidebar-nav .nav-group-toggle {
  cursor: pointer;
}
.sidebar-nav .nav-group-toggle::after {
  display: block;
  -ms-flex: 0 12px;
  flex: 0 12px;
  height: 12px;
  content: "";
  background-image: var(--cui-sidebar-nav-group-indicator, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba%28255, 255, 255, 0.6%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"));
  background-repeat: no-repeat;
  background-position: center;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
}
html:not([dir=rtl]) .sidebar-nav .nav-group-toggle::after {
  margin-left: auto;
}
*[dir=rtl] .sidebar-nav .nav-group-toggle::after {
  margin-right: auto;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-nav .nav-group-toggle::after {
    transition: none;
  }
}
.sidebar-nav .nav-group-items {
  padding: 0;
  list-style: none;
}
html:not([dir=rtl]) .sidebar-nav .nav-group-items .nav-link {
  padding-left: 4rem;
}
*[dir=rtl] .sidebar-nav .nav-group-items .nav-link {
  padding-right: 4rem;
}
html:not([dir=rtl]) .sidebar-nav .nav-group-items .nav-link .nav-icon {
  margin-left: -4rem;
}
*[dir=rtl] .sidebar-nav .nav-group-items .nav-link .nav-icon {
  margin-right: -4rem;
}
.sidebar-nav.compact .nav-link,
.sidebar-nav .compact .nav-link {
  padding-top: 0.42225rem;
  padding-bottom: 0.42225rem;
}

@media (min-width: 768px) {
  .sidebar-narrow-unfoldable:not(:hover), .sidebar-narrow {
    z-index: 1031;
    -ms-flex: 0 0 4rem;
    flex: 0 0 4rem;
    width: 4rem;
    padding-bottom: 3rem;
    overflow: visible;
  }
  .sidebar-fixed.sidebar-narrow-unfoldable:not(:hover), .sidebar-fixed.sidebar-narrow {
    z-index: 1031;
    width: 4rem;
  }
  .sidebar-narrow-unfoldable:not(:hover) .sidebar-brand-full, .sidebar-narrow .sidebar-brand-full {
    display: none;
  }
  .sidebar-narrow-unfoldable:not(:hover) .sidebar-brand-narrow, .sidebar-narrow .sidebar-brand-narrow {
    display: block;
  }
  .sidebar-narrow-unfoldable:not(:hover) .d-narrow-none, .sidebar-narrow .d-narrow-none,
.sidebar-narrow-unfoldable:not(:hover) .nav-label,
.sidebar-narrow .nav-label,
.sidebar-narrow-unfoldable:not(:hover) .nav-title,
.sidebar-narrow .nav-title,
.sidebar-narrow-unfoldable:not(:hover) .nav-group-items,
.sidebar-narrow .nav-group-items,
.sidebar-narrow-unfoldable:not(:hover) .sidebar-footer,
.sidebar-narrow .sidebar-footer,
.sidebar-narrow-unfoldable:not(:hover) .sidebar-form,
.sidebar-narrow .sidebar-form,
.sidebar-narrow-unfoldable:not(:hover) .sidebar-header,
.sidebar-narrow .sidebar-header {
    height: 0 !important;
    padding: 0;
    margin: 0;
    visibility: hidden;
    opacity: 0;
  }
  .sidebar-narrow-unfoldable:not(:hover) .sidebar-toggler, .sidebar-narrow .sidebar-toggler {
    position: fixed;
    bottom: 0;
  }
  html:not([dir=rtl]) .sidebar-narrow-unfoldable:not(:hover) .sidebar-toggler::before, html:not([dir=rtl]) .sidebar-narrow .sidebar-toggler::before {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
  *[dir=rtl] .sidebar-narrow-unfoldable:not(:hover) .sidebar-toggler::before, *[dir=rtl] .sidebar-narrow .sidebar-toggler::before,.sidebar-end.sidebar-narrow-unfoldable:not(:hover) .sidebar-toggler::before, .sidebar-end.sidebar-narrow .sidebar-toggler::before {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.sidebar-narrow:not(.sidebar-end) ~ * {
  --cui-sidebar-occupy-start: 4rem;
}
.sidebar-narrow.sidebar-end ~ * {
  --cui-sidebar-occupy-end: 4rem;
}

.sidebar-narrow-unfoldable {
  position: fixed;
  z-index: 1031;
}
.sidebar-narrow-unfoldable:not(.sidebar-end) ~ * {
  --cui-sidebar-occupy-start: 4rem;
}
.sidebar-narrow-unfoldable.sidebar-end ~ * {
  --cui-sidebar-occupy-end: 4rem;
}
html:not([dir=rtl]) .sidebar-narrow-unfoldable:hover .sidebar-toggler::before {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
*[dir=rtl] .sidebar-narrow-unfoldable:hover .sidebar-toggler::before,.sidebar-narrow-unfoldable:hover.sidebar-end .sidebar-toggler::before {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding.sidebar-narrow:not(.sidebar-end), html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding.sidebar-narrow-unfoldable:not(.sidebar-end) {
  margin-left: -4rem;
}
*[dir=rtl] .sidebar:not(.show).sidebar-self-hiding.sidebar-narrow:not(.sidebar-end), *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding.sidebar-narrow-unfoldable:not(.sidebar-end),html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding.sidebar-narrow.sidebar-end, html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding.sidebar-narrow-unfoldable.sidebar-end {
  margin-right: -4rem;
}
*[dir=rtl] .sidebar:not(.show).sidebar-self-hiding.sidebar-narrow.sidebar-end, *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding.sidebar-narrow-unfoldable.sidebar-end {
  margin-left: -4rem;
}

@media (max-width: 575.98px) {
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-narrow:not(.sidebar-end), html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-narrow-unfoldable:not(.sidebar-end) {
    margin-left: -4rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-narrow:not(.sidebar-end), *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-narrow-unfoldable:not(.sidebar-end),html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-narrow.sidebar-end, html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-narrow-unfoldable.sidebar-end {
    margin-right: -4rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-narrow.sidebar-end, *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-narrow-unfoldable.sidebar-end {
    margin-left: -4rem;
  }
}
@media (max-width: 767.98px) {
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-md.sidebar-narrow:not(.sidebar-end), html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-md.sidebar-narrow-unfoldable:not(.sidebar-end) {
    margin-left: -4rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-md.sidebar-narrow:not(.sidebar-end), *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-md.sidebar-narrow-unfoldable:not(.sidebar-end),html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-md.sidebar-narrow.sidebar-end, html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-md.sidebar-narrow-unfoldable.sidebar-end {
    margin-right: -4rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-md.sidebar-narrow.sidebar-end, *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-md.sidebar-narrow-unfoldable.sidebar-end {
    margin-left: -4rem;
  }
}
@media (max-width: 991.98px) {
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-narrow:not(.sidebar-end), html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-narrow-unfoldable:not(.sidebar-end) {
    margin-left: -4rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-narrow:not(.sidebar-end), *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-narrow-unfoldable:not(.sidebar-end),html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-narrow.sidebar-end, html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-narrow-unfoldable.sidebar-end {
    margin-right: -4rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-narrow.sidebar-end, *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-narrow-unfoldable.sidebar-end {
    margin-left: -4rem;
  }
}
@media (max-width: 1199.98px) {
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-narrow:not(.sidebar-end), html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-narrow-unfoldable:not(.sidebar-end) {
    margin-left: -4rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-narrow:not(.sidebar-end), *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-narrow-unfoldable:not(.sidebar-end),html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-narrow.sidebar-end, html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-narrow-unfoldable.sidebar-end {
    margin-right: -4rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-narrow.sidebar-end, *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-narrow-unfoldable.sidebar-end {
    margin-left: -4rem;
  }
}
@media (max-width: 1399.98px) {
  html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-narrow:not(.sidebar-end), html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-narrow-unfoldable:not(.sidebar-end) {
    margin-left: -4rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-narrow:not(.sidebar-end), *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-narrow-unfoldable:not(.sidebar-end),html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-narrow.sidebar-end, html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-narrow-unfoldable.sidebar-end {
    margin-right: -4rem;
  }
  *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-narrow.sidebar-end, *[dir=rtl] .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-narrow-unfoldable.sidebar-end {
    margin-left: -4rem;
  }
}
.subheader {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  background: var(--cui-subheader-bg, #fff);
  border-bottom: var(--cui-subheader-border-width, 1px) solid var(--cui-subheader-border-color, #d8dbe0);
}

.subheader-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1029;
}

.subheader-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  margin-bottom: 0;
  list-style: none;
}
html:not([dir=rtl]) .subheader-nav {
  padding-left: 0;
}
*[dir=rtl] .subheader-nav {
  padding-right: 0;
}
.subheader-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  color: var(--cui-subheader-color, rgba(44, 56, 74, 0.681));
}
.subheader-nav .nav-link:hover, .subheader-nav .nav-link:focus {
  color: var(--cui-subheader-hover-color, rgba(44, 56, 74, 0.95));
}
.subheader-nav .nav-link.disabled {
  color: var(--cui-subheader-disabled-color, rgba(44, 56, 74, 0.38));
}
.subheader-nav .show > .nav-link,
.subheader-nav .nav-link.active {
  color: var(--cui-subheader-active-color, rgba(44, 56, 74, 0.95));
}
.subheader-nav .dropdown-menu {
  position: absolute;
}

.subheader-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--cui-subheader-color, rgba(44, 56, 74, 0.681));
}
.subheader-text a,.subheader-text a:hover, .subheader-text a:focus {
  color: var(--cui-subheader-active-color, rgba(44, 56, 74, 0.95));
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.link-primary {
  color: #321fdb;
}
.link-primary:hover, .link-primary:focus {
  color: #5b4ce2;
}

.link-secondary {
  color: #9da5b1;
}
.link-secondary:hover, .link-secondary:focus {
  color: #b1b7c1;
}

.link-success {
  color: #2eb85c;
}
.link-success:hover, .link-success:focus {
  color: #58c67d;
}

.link-info {
  color: #39f;
}
.link-info:hover, .link-info:focus {
  color: #5cadff;
}

.link-warning {
  color: #f9b115;
}
.link-warning:hover, .link-warning:focus {
  color: #c78e11;
}

.link-danger {
  color: #e55353;
}
.link-danger:hover, .link-danger:focus {
  color: #ea7575;
}

.link-light {
  color: #ebedef;
}
.link-light:hover, .link-light:focus {
  color: #bcbebf;
}

.link-dark {
  color: #4f5d73;
}
.link-dark:hover, .link-dark:focus {
  color: #727d8f;
}

.ratio {
  position: relative;
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: var(--cui-aspect-ratio);
  content: "";
}
.ratio > * {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
html:not([dir=rtl]) .ratio > * {
  left: 0;
}
*[dir=rtl] .ratio > * {
  right: 0;
}

.ratio-1x1 {
  --cui-aspect-ratio: 100%;
}

.ratio-4x3 {
  --cui-aspect-ratio: calc(3 / 4 * 100%);
}

.ratio-16x9 {
  --cui-aspect-ratio: calc(9 / 16 * 100%);
}

.ratio-21x9 {
  --cui-aspect-ratio: calc(9 / 21 * 100%);
}

.fixed-top {
  top: 0;
}

.fixed-top,.fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  bottom: 0;
}

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
}

@media (min-width: 576px) {
  .sticky-sm-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
@media (min-width: 768px) {
  .sticky-md-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
@media (min-width: 992px) {
  .sticky-lg-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
@media (min-width: 1200px) {
  .sticky-xl-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
@media (min-width: 1400px) {
  .sticky-xxl-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

html:not([dir=rtl]) .float-start {
  float: left !important;
}

*[dir=rtl] .float-start,html:not([dir=rtl]) .float-end {
  float: right !important;
}
*[dir=rtl] .float-end {
  float: left !important;
}
html:not([dir=rtl]) .float-none,*[dir=rtl] .float-none {
  float: none !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-visible {
  overflow: visible !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-grid {
  display: grid !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-inline-flex {
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

.d-none {
  display: none !important;
}

.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 21, 0.15) !important;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 21, 0.075) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 21, 0.175) !important;
}

.shadow-none {
  box-shadow: none !important;
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}

.top-0 {
  top: 0 !important;
}

.top-50 {
  top: 50% !important;
}

.top-100 {
  top: 100% !important;
}

.bottom-0 {
  bottom: 0 !important;
}

.bottom-50 {
  bottom: 50% !important;
}

.bottom-100 {
  bottom: 100% !important;
}

.start-0 {
  left: 0 !important;
}

.start-50 {
  left: 50% !important;
}

.start-100 {
  left: 100% !important;
}

.end-0 {
  right: 0 !important;
}

.end-50 {
  right: 50% !important;
}

.end-100 {
  right: 100% !important;
}

.translate-middle {
  -webkit-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
}

.translate-middle-x {
  -webkit-transform: translateX(-50%) !important;
  transform: translateX(-50%) !important;
}

.translate-middle-y {
  -webkit-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
}

.border {
  border: 1px solid var(--cui-border-color, #d8dbe0) !important;
}

.border-0 {
  border: 0 !important;
}

.border-top {
  border-top: 1px solid var(--cui-border-color, #d8dbe0) !important;
}

.border-top-0 {
  border-top: 0 !important;
}

html:not([dir=rtl]) .border-end {
  border-right: 1px solid var(--cui-border-color, #d8dbe0) !important;
}
*[dir=rtl] .border-end {
  border-left: 1px solid var(--cui-border-color, #d8dbe0) !important;
}

html:not([dir=rtl]) .border-end-0 {
  border-right: 0 !important;
}
*[dir=rtl] .border-end-0 {
  border-left: 0 !important;
}

.border-bottom {
  border-bottom: 1px solid var(--cui-border-color, #d8dbe0) !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

html:not([dir=rtl]) .border-start {
  border-left: 1px solid var(--cui-border-color, #d8dbe0) !important;
}
*[dir=rtl] .border-start {
  border-right: 1px solid var(--cui-border-color, #d8dbe0) !important;
}

html:not([dir=rtl]) .border-start-0 {
  border-left: 0 !important;
}
*[dir=rtl] .border-start-0 {
  border-right: 0 !important;
}

.border-primary {
  border-color: var(--cui-primary, #321fdb) !important;
}

.border-secondary {
  border-color: var(--cui-secondary, #9da5b1) !important;
}

.border-success {
  border-color: var(--cui-success, #2eb85c) !important;
}

.border-info {
  border-color: var(--cui-info, #39f) !important;
}

.border-warning {
  border-color: var(--cui-warning, #f9b115) !important;
}

.border-danger {
  border-color: var(--cui-danger, #e55353) !important;
}

.border-light {
  border-color: var(--cui-light, #ebedef) !important;
}

.border-dark {
  border-color: var(--cui-dark, #4f5d73) !important;
}

.border-white {
  border-color: var(--cui-white, #fff) !important;
}

.border-top-primary {
  border-top-color: var(--cui-primary, #321fdb) !important;
}

.border-top-secondary {
  border-top-color: var(--cui-secondary, #9da5b1) !important;
}

.border-top-success {
  border-top-color: var(--cui-success, #2eb85c) !important;
}

.border-top-info {
  border-top-color: var(--cui-info, #39f) !important;
}

.border-top-warning {
  border-top-color: var(--cui-warning, #f9b115) !important;
}

.border-top-danger {
  border-top-color: var(--cui-danger, #e55353) !important;
}

.border-top-light {
  border-top-color: var(--cui-light, #ebedef) !important;
}

.border-top-dark {
  border-top-color: var(--cui-dark, #4f5d73) !important;
}

.border-top-white {
  border-top-color: var(--cui-white, #fff) !important;
}

html:not([dir=rtl]) .border-end-primary {
  border-right-color: var(--cui-primary, #321fdb) !important;
}
*[dir=rtl] .border-end-primary {
  border-left-color: var(--cui-primary, #321fdb) !important;
}

html:not([dir=rtl]) .border-end-secondary {
  border-right-color: var(--cui-secondary, #9da5b1) !important;
}
*[dir=rtl] .border-end-secondary {
  border-left-color: var(--cui-secondary, #9da5b1) !important;
}

html:not([dir=rtl]) .border-end-success {
  border-right-color: var(--cui-success, #2eb85c) !important;
}
*[dir=rtl] .border-end-success {
  border-left-color: var(--cui-success, #2eb85c) !important;
}

html:not([dir=rtl]) .border-end-info {
  border-right-color: var(--cui-info, #39f) !important;
}
*[dir=rtl] .border-end-info {
  border-left-color: var(--cui-info, #39f) !important;
}

html:not([dir=rtl]) .border-end-warning {
  border-right-color: var(--cui-warning, #f9b115) !important;
}
*[dir=rtl] .border-end-warning {
  border-left-color: var(--cui-warning, #f9b115) !important;
}

html:not([dir=rtl]) .border-end-danger {
  border-right-color: var(--cui-danger, #e55353) !important;
}
*[dir=rtl] .border-end-danger {
  border-left-color: var(--cui-danger, #e55353) !important;
}

html:not([dir=rtl]) .border-end-light {
  border-right-color: var(--cui-light, #ebedef) !important;
}
*[dir=rtl] .border-end-light {
  border-left-color: var(--cui-light, #ebedef) !important;
}

html:not([dir=rtl]) .border-end-dark {
  border-right-color: var(--cui-dark, #4f5d73) !important;
}
*[dir=rtl] .border-end-dark {
  border-left-color: var(--cui-dark, #4f5d73) !important;
}

html:not([dir=rtl]) .border-end-white {
  border-right-color: var(--cui-white, #fff) !important;
}
*[dir=rtl] .border-end-white {
  border-left-color: var(--cui-white, #fff) !important;
}

.border-bottom-primary {
  border-bottom-color: var(--cui-primary, #321fdb) !important;
}

.border-bottom-secondary {
  border-bottom-color: var(--cui-secondary, #9da5b1) !important;
}

.border-bottom-success {
  border-bottom-color: var(--cui-success, #2eb85c) !important;
}

.border-bottom-info {
  border-bottom-color: var(--cui-info, #39f) !important;
}

.border-bottom-warning {
  border-bottom-color: var(--cui-warning, #f9b115) !important;
}

.border-bottom-danger {
  border-bottom-color: var(--cui-danger, #e55353) !important;
}

.border-bottom-light {
  border-bottom-color: var(--cui-light, #ebedef) !important;
}

.border-bottom-dark {
  border-bottom-color: var(--cui-dark, #4f5d73) !important;
}

.border-bottom-white {
  border-bottom-color: var(--cui-white, #fff) !important;
}

html:not([dir=rtl]) .border-start-primary {
  border-left-color: var(--cui-primary, #321fdb) !important;
}
*[dir=rtl] .border-start-primary {
  border-right-color: var(--cui-primary, #321fdb) !important;
}

html:not([dir=rtl]) .border-start-secondary {
  border-left-color: var(--cui-secondary, #9da5b1) !important;
}
*[dir=rtl] .border-start-secondary {
  border-right-color: var(--cui-secondary, #9da5b1) !important;
}

html:not([dir=rtl]) .border-start-success {
  border-left-color: var(--cui-success, #2eb85c) !important;
}
*[dir=rtl] .border-start-success {
  border-right-color: var(--cui-success, #2eb85c) !important;
}

html:not([dir=rtl]) .border-start-info {
  border-left-color: var(--cui-info, #39f) !important;
}
*[dir=rtl] .border-start-info {
  border-right-color: var(--cui-info, #39f) !important;
}

html:not([dir=rtl]) .border-start-warning {
  border-left-color: var(--cui-warning, #f9b115) !important;
}
*[dir=rtl] .border-start-warning {
  border-right-color: var(--cui-warning, #f9b115) !important;
}

html:not([dir=rtl]) .border-start-danger {
  border-left-color: var(--cui-danger, #e55353) !important;
}
*[dir=rtl] .border-start-danger {
  border-right-color: var(--cui-danger, #e55353) !important;
}

html:not([dir=rtl]) .border-start-light {
  border-left-color: var(--cui-light, #ebedef) !important;
}
*[dir=rtl] .border-start-light {
  border-right-color: var(--cui-light, #ebedef) !important;
}

html:not([dir=rtl]) .border-start-dark {
  border-left-color: var(--cui-dark, #4f5d73) !important;
}
*[dir=rtl] .border-start-dark {
  border-right-color: var(--cui-dark, #4f5d73) !important;
}

html:not([dir=rtl]) .border-start-white {
  border-left-color: var(--cui-white, #fff) !important;
}
*[dir=rtl] .border-start-white {
  border-right-color: var(--cui-white, #fff) !important;
}

.border-1 {
  border-width: 1px !important;
}

.border-2 {
  border-width: 2px !important;
}

.border-3 {
  border-width: 3px !important;
}

.border-4 {
  border-width: 4px !important;
}

.border-5 {
  border-width: 5px !important;
}

.border-top-1 {
  border-top-width: 1px !important;
}

.border-top-2 {
  border-top-width: 2px !important;
}

.border-top-3 {
  border-top-width: 3px !important;
}

.border-top-4 {
  border-top-width: 4px !important;
}

.border-top-5 {
  border-top-width: 5px !important;
}

html:not([dir=rtl]) .border-end-1 {
  border-right-width: 1px !important;
}
*[dir=rtl] .border-end-1 {
  border-left-width: 1px !important;
}

html:not([dir=rtl]) .border-end-2 {
  border-right-width: 2px !important;
}
*[dir=rtl] .border-end-2 {
  border-left-width: 2px !important;
}

html:not([dir=rtl]) .border-end-3 {
  border-right-width: 3px !important;
}
*[dir=rtl] .border-end-3 {
  border-left-width: 3px !important;
}

html:not([dir=rtl]) .border-end-4 {
  border-right-width: 4px !important;
}
*[dir=rtl] .border-end-4 {
  border-left-width: 4px !important;
}

html:not([dir=rtl]) .border-end-5 {
  border-right-width: 5px !important;
}
*[dir=rtl] .border-end-5 {
  border-left-width: 5px !important;
}

.border-bottom-1 {
  border-bottom-width: 1px !important;
}

.border-bottom-2 {
  border-bottom-width: 2px !important;
}

.border-bottom-3 {
  border-bottom-width: 3px !important;
}

.border-bottom-4 {
  border-bottom-width: 4px !important;
}

.border-bottom-5 {
  border-bottom-width: 5px !important;
}

html:not([dir=rtl]) .border-start-1 {
  border-left-width: 1px !important;
}
*[dir=rtl] .border-start-1 {
  border-right-width: 1px !important;
}

html:not([dir=rtl]) .border-start-2 {
  border-left-width: 2px !important;
}
*[dir=rtl] .border-start-2 {
  border-right-width: 2px !important;
}

html:not([dir=rtl]) .border-start-3 {
  border-left-width: 3px !important;
}
*[dir=rtl] .border-start-3 {
  border-right-width: 3px !important;
}

html:not([dir=rtl]) .border-start-4 {
  border-left-width: 4px !important;
}
*[dir=rtl] .border-start-4 {
  border-right-width: 4px !important;
}

html:not([dir=rtl]) .border-start-5 {
  border-left-width: 5px !important;
}
*[dir=rtl] .border-start-5 {
  border-right-width: 5px !important;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.vw-100 {
  width: 100vw !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mh-100 {
  max-height: 100% !important;
}

.vh-100 {
  height: 100vh !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

.flex-fill {
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
}

.flex-row {
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

.flex-column {
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.flex-row-reverse {
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  -ms-flex-direction: column-reverse !important;
  flex-direction: column-reverse !important;
}

.flex-grow-0 {
  -ms-flex-positive: 0 !important;
  flex-grow: 0 !important;
}

.flex-grow-1 {
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  -ms-flex-negative: 1 !important;
  flex-shrink: 1 !important;
}

.flex-wrap {
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}

.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  -ms-flex-wrap: wrap-reverse !important;
  flex-wrap: wrap-reverse !important;
}

.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.gap-5 {
  gap: 3rem !important;
}

.justify-content-start {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.justify-content-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.justify-content-around {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
}

.justify-content-evenly {
  -ms-flex-pack: space-evenly !important;
  justify-content: space-evenly !important;
}

.align-items-start {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}

.align-items-end {
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}

.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}

.align-items-baseline {
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}

.align-items-stretch {
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}

.align-content-start {
  -ms-flex-line-pack: start !important;
  align-content: flex-start !important;
}

.align-content-end {
  -ms-flex-line-pack: end !important;
  align-content: flex-end !important;
}

.align-content-center {
  -ms-flex-line-pack: center !important;
  align-content: center !important;
}

.align-content-between {
  -ms-flex-line-pack: justify !important;
  align-content: space-between !important;
}

.align-content-around {
  -ms-flex-line-pack: distribute !important;
  align-content: space-around !important;
}

.align-content-stretch {
  -ms-flex-line-pack: stretch !important;
  align-content: stretch !important;
}

.align-self-auto {
  -ms-flex-item-align: auto !important;
  align-self: auto !important;
}

.align-self-start {
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
}

.align-self-end {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}

.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

.align-self-baseline {
  -ms-flex-item-align: baseline !important;
  align-self: baseline !important;
}

.align-self-stretch {
  -ms-flex-item-align: stretch !important;
  align-self: stretch !important;
}

.order-first {
  -ms-flex-order: -1 !important;
  order: -1 !important;
}

.order-0 {
  -ms-flex-order: 0 !important;
  order: 0 !important;
}

.order-1 {
  -ms-flex-order: 1 !important;
  order: 1 !important;
}

.order-2 {
  -ms-flex-order: 2 !important;
  order: 2 !important;
}

.order-3 {
  -ms-flex-order: 3 !important;
  order: 3 !important;
}

.order-4 {
  -ms-flex-order: 4 !important;
  order: 4 !important;
}

.order-5 {
  -ms-flex-order: 5 !important;
  order: 5 !important;
}

.order-last {
  -ms-flex-order: 6 !important;
  order: 6 !important;
}

.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}

.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mt-auto {
  margin-top: auto !important;
}

html:not([dir=rtl]) .me-0 {
  margin-right: 0 !important;
}
*[dir=rtl] .me-0 {
  margin-left: 0 !important;
}

html:not([dir=rtl]) .me-1 {
  margin-right: 0.25rem !important;
}
*[dir=rtl] .me-1 {
  margin-left: 0.25rem !important;
}

html:not([dir=rtl]) .me-2 {
  margin-right: 0.5rem !important;
}
*[dir=rtl] .me-2 {
  margin-left: 0.5rem !important;
}

html:not([dir=rtl]) .me-3 {
  margin-right: 1rem !important;
}
*[dir=rtl] .me-3 {
  margin-left: 1rem !important;
}

html:not([dir=rtl]) .me-4 {
  margin-right: 1.5rem !important;
}
*[dir=rtl] .me-4 {
  margin-left: 1.5rem !important;
}

html:not([dir=rtl]) .me-5 {
  margin-right: 3rem !important;
}
*[dir=rtl] .me-5 {
  margin-left: 3rem !important;
}

html:not([dir=rtl]) .me-auto {
  margin-right: auto !important;
}
*[dir=rtl] .me-auto {
  margin-left: auto !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

html:not([dir=rtl]) .ms-0 {
  margin-left: 0 !important;
}
*[dir=rtl] .ms-0 {
  margin-right: 0 !important;
}

html:not([dir=rtl]) .ms-1 {
  margin-left: 0.25rem !important;
}
*[dir=rtl] .ms-1 {
  margin-right: 0.25rem !important;
}

html:not([dir=rtl]) .ms-2 {
  margin-left: 0.5rem !important;
}
*[dir=rtl] .ms-2 {
  margin-right: 0.5rem !important;
}

html:not([dir=rtl]) .ms-3 {
  margin-left: 1rem !important;
}
*[dir=rtl] .ms-3 {
  margin-right: 1rem !important;
}

html:not([dir=rtl]) .ms-4 {
  margin-left: 1.5rem !important;
}
*[dir=rtl] .ms-4 {
  margin-right: 1.5rem !important;
}

html:not([dir=rtl]) .ms-5 {
  margin-left: 3rem !important;
}
*[dir=rtl] .ms-5 {
  margin-right: 3rem !important;
}

html:not([dir=rtl]) .ms-auto {
  margin-left: auto !important;
}
*[dir=rtl] .ms-auto {
  margin-right: auto !important;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}

.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

html:not([dir=rtl]) .pe-0 {
  padding-right: 0 !important;
}
*[dir=rtl] .pe-0 {
  padding-left: 0 !important;
}

html:not([dir=rtl]) .pe-1 {
  padding-right: 0.25rem !important;
}
*[dir=rtl] .pe-1 {
  padding-left: 0.25rem !important;
}

html:not([dir=rtl]) .pe-2 {
  padding-right: 0.5rem !important;
}
*[dir=rtl] .pe-2 {
  padding-left: 0.5rem !important;
}

html:not([dir=rtl]) .pe-3 {
  padding-right: 1rem !important;
}
*[dir=rtl] .pe-3 {
  padding-left: 1rem !important;
}

html:not([dir=rtl]) .pe-4 {
  padding-right: 1.5rem !important;
}
*[dir=rtl] .pe-4 {
  padding-left: 1.5rem !important;
}

html:not([dir=rtl]) .pe-5 {
  padding-right: 3rem !important;
}
*[dir=rtl] .pe-5 {
  padding-left: 3rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

html:not([dir=rtl]) .ps-0 {
  padding-left: 0 !important;
}
*[dir=rtl] .ps-0 {
  padding-right: 0 !important;
}

html:not([dir=rtl]) .ps-1 {
  padding-left: 0.25rem !important;
}
*[dir=rtl] .ps-1 {
  padding-right: 0.25rem !important;
}

html:not([dir=rtl]) .ps-2 {
  padding-left: 0.5rem !important;
}
*[dir=rtl] .ps-2 {
  padding-right: 0.5rem !important;
}

html:not([dir=rtl]) .ps-3 {
  padding-left: 1rem !important;
}
*[dir=rtl] .ps-3 {
  padding-right: 1rem !important;
}

html:not([dir=rtl]) .ps-4 {
  padding-left: 1.5rem !important;
}
*[dir=rtl] .ps-4 {
  padding-right: 1.5rem !important;
}

html:not([dir=rtl]) .ps-5 {
  padding-left: 3rem !important;
}
*[dir=rtl] .ps-5 {
  padding-right: 3rem !important;
}

.font-monospace {
  font-family: var(--cui-font-monospace) !important;
}

.fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-2 {
  font-size: calc(1.325rem + 0.9vw) !important;
}

.fs-3 {
  font-size: calc(1.3rem + 0.6vw) !important;
}

.fs-4 {
  font-size: calc(1.275rem + 0.3vw) !important;
}

.fs-5 {
  font-size: 1.25rem !important;
}

.fs-6 {
  font-size: 1rem !important;
}

.fst-italic {
  font-style: italic !important;
}

.fst-normal {
  font-style: normal !important;
}

.fw-light {
  font-weight: 300 !important;
}

.fw-lighter {
  font-weight: lighter !important;
}

.fw-normal {
  font-weight: 400 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.fw-bolder {
  font-weight: bolder !important;
}

.lh-1 {
  line-height: 1 !important;
}

.lh-sm {
  line-height: 1.25 !important;
}

.lh-base {
  line-height: 1.5 !important;
}

.lh-lg {
  line-height: 2 !important;
}

html:not([dir=rtl]) .text-start {
  text-align: left !important;
}

*[dir=rtl] .text-start,html:not([dir=rtl]) .text-end {
  text-align: right !important;
}
*[dir=rtl] .text-end {
  text-align: left !important;
}
html:not([dir=rtl]) .text-center,*[dir=rtl] .text-center {
  text-align: center !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-decoration-underline {
  text-decoration: underline !important;
}

.text-decoration-line-through {
  text-decoration: line-through !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

/* rtl:end:remove */
.text-primary {
  color: var(--cui-primary, #321fdb) !important;
}

.text-secondary {
  color: var(--cui-secondary, #9da5b1) !important;
}

.text-success {
  color: var(--cui-success, #2eb85c) !important;
}

.text-info {
  color: var(--cui-info, #39f) !important;
}

.text-warning {
  color: var(--cui-warning, #f9b115) !important;
}

.text-danger {
  color: var(--cui-danger, #e55353) !important;
}

.text-light {
  color: var(--cui-light, #ebedef) !important;
}

.text-dark {
  color: var(--cui-dark, #4f5d73) !important;
}

.text-white {
  color: var(--cui-white, #fff) !important;
}

.text-body {
  color: var(--cui-body, rgba(44, 56, 74, 0.95)) !important;
}

.text-muted {
  color: var(--cui-muted, rgba(44, 56, 74, 0.38)) !important;
}

.text-black-50 {
  color: var(--cui-black-50, rgba(0, 0, 21, 0.5)) !important;
}

.text-white-50 {
  color: var(--cui-white-50, rgba(255, 255, 255, 0.5)) !important;
}

.text-reset {
  color: var(--cui-reset, inherit) !important;
}

.text-high-emphasis-inverse {
  color: var(--cui-high-emphasis-inverse, rgba(255, 255, 255, 0.87)) !important;
}

.text-medium-emphasis-inverse {
  color: var(--cui-medium-emphasis-inverse, rgba(255, 255, 255, 0.6)) !important;
}

.text-disabled-inverse {
  color: var(--cui-disabled-inverse, rgba(255, 255, 255, 0.38)) !important;
}

.text-high-emphasis {
  color: var(--cui-high-emphasis, rgba(44, 56, 74, 0.95)) !important;
}

.text-medium-emphasis {
  color: var(--cui-medium-emphasis, rgba(44, 56, 74, 0.681)) !important;
}

.text-disabled {
  color: var(--cui-disabled, rgba(44, 56, 74, 0.38)) !important;
}

.bg-primary {
  background-color: var(--cui-primary, #321fdb) !important;
}

.bg-secondary {
  background-color: var(--cui-secondary, #9da5b1) !important;
}

.bg-success {
  background-color: var(--cui-success, #2eb85c) !important;
}

.bg-info {
  background-color: var(--cui-info, #39f) !important;
}

.bg-warning {
  background-color: var(--cui-warning, #f9b115) !important;
}

.bg-danger {
  background-color: var(--cui-danger, #e55353) !important;
}

.bg-light {
  background-color: var(--cui-light, #ebedef) !important;
}

.bg-dark {
  background-color: var(--cui-dark, #4f5d73) !important;
}

.bg-body {
  background-color: var(--cui-body, #fff) !important;
}

.bg-white {
  background-color: var(--cui-white, #fff) !important;
}

.bg-transparent {
  background-color: var(--cui-transparent, transparent) !important;
}

.bg-gradient {
  background-image: var(--cui-gradient) !important;
}

.user-select-all {
  -webkit-user-select: all !important;
  -moz-user-select: all !important;
  user-select: all !important;
}

.user-select-auto {
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
}

.user-select-none {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.pe-none {
  pointer-events: none !important;
}

.pe-auto {
  pointer-events: auto !important;
}

.rounded {
  border-radius: 0.25rem !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.rounded-1 {
  border-radius: 0.2rem !important;
}

.rounded-2 {
  border-radius: 0.25rem !important;
}

.rounded-3 {
  border-radius: 0.3rem !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: 50rem !important;
}

.rounded-top {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

html:not([dir=rtl]) .rounded-end {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}
*[dir=rtl] .rounded-end {
  border-top-left-radius: 0.25rem !important;
}

*[dir=rtl] .rounded-end,.rounded-bottom {
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-bottom {
  border-bottom-right-radius: 0.25rem !important;
}

html:not([dir=rtl]) .rounded-start {
  border-bottom-left-radius: 0.25rem !important;
  border-top-left-radius: 0.25rem !important;
}
*[dir=rtl] .rounded-start {
  border-bottom-right-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

@media (min-width: 576px) {
  html:not([dir=rtl]) .float-sm-start {
    float: left !important;
  }

  *[dir=rtl] .float-sm-start,html:not([dir=rtl]) .float-sm-end {
    float: right !important;
  }
  *[dir=rtl] .float-sm-end {
    float: left !important;
  }
  html:not([dir=rtl]) .float-sm-none,*[dir=rtl] .float-sm-none {
    float: none !important;
  }

  .d-sm-inline {
    display: inline !important;
  }

  .d-sm-inline-block {
    display: inline-block !important;
  }

  .d-sm-block {
    display: block !important;
  }

  .d-sm-grid {
    display: grid !important;
  }

  .d-sm-table {
    display: table !important;
  }

  .d-sm-table-row {
    display: table-row !important;
  }

  .d-sm-table-cell {
    display: table-cell !important;
  }

  .d-sm-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-sm-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }

  .d-sm-none {
    display: none !important;
  }

  .flex-sm-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }

  .flex-sm-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }

  .flex-sm-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .flex-sm-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }

  .flex-sm-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }

  .flex-sm-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }

  .flex-sm-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }

  .flex-sm-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }

  .flex-sm-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }

  .flex-sm-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }

  .flex-sm-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }

  .flex-sm-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }

  .gap-sm-0 {
    gap: 0 !important;
  }

  .gap-sm-1 {
    gap: 0.25rem !important;
  }

  .gap-sm-2 {
    gap: 0.5rem !important;
  }

  .gap-sm-3 {
    gap: 1rem !important;
  }

  .gap-sm-4 {
    gap: 1.5rem !important;
  }

  .gap-sm-5 {
    gap: 3rem !important;
  }

  .justify-content-sm-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }

  .justify-content-sm-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }

  .justify-content-sm-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }

  .justify-content-sm-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }

  .justify-content-sm-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }

  .justify-content-sm-evenly {
    -ms-flex-pack: space-evenly !important;
    justify-content: space-evenly !important;
  }

  .align-items-sm-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }

  .align-items-sm-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }

  .align-items-sm-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }

  .align-items-sm-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }

  .align-items-sm-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }

  .align-content-sm-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }

  .align-content-sm-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }

  .align-content-sm-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }

  .align-content-sm-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }

  .align-content-sm-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }

  .align-content-sm-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }

  .align-self-sm-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }

  .align-self-sm-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }

  .align-self-sm-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }

  .align-self-sm-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }

  .align-self-sm-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }

  .align-self-sm-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }

  .order-sm-first {
    -ms-flex-order: -1 !important;
    order: -1 !important;
  }

  .order-sm-0 {
    -ms-flex-order: 0 !important;
    order: 0 !important;
  }

  .order-sm-1 {
    -ms-flex-order: 1 !important;
    order: 1 !important;
  }

  .order-sm-2 {
    -ms-flex-order: 2 !important;
    order: 2 !important;
  }

  .order-sm-3 {
    -ms-flex-order: 3 !important;
    order: 3 !important;
  }

  .order-sm-4 {
    -ms-flex-order: 4 !important;
    order: 4 !important;
  }

  .order-sm-5 {
    -ms-flex-order: 5 !important;
    order: 5 !important;
  }

  .order-sm-last {
    -ms-flex-order: 6 !important;
    order: 6 !important;
  }

  .m-sm-0 {
    margin: 0 !important;
  }

  .m-sm-1 {
    margin: 0.25rem !important;
  }

  .m-sm-2 {
    margin: 0.5rem !important;
  }

  .m-sm-3 {
    margin: 1rem !important;
  }

  .m-sm-4 {
    margin: 1.5rem !important;
  }

  .m-sm-5 {
    margin: 3rem !important;
  }

  .m-sm-auto {
    margin: auto !important;
  }

  .mx-sm-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mx-sm-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }

  .mx-sm-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  .mx-sm-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  .mx-sm-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }

  .mx-sm-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }

  .mx-sm-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .my-sm-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-sm-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-sm-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-sm-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-sm-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-sm-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-sm-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .mt-sm-0 {
    margin-top: 0 !important;
  }

  .mt-sm-1 {
    margin-top: 0.25rem !important;
  }

  .mt-sm-2 {
    margin-top: 0.5rem !important;
  }

  .mt-sm-3 {
    margin-top: 1rem !important;
  }

  .mt-sm-4 {
    margin-top: 1.5rem !important;
  }

  .mt-sm-5 {
    margin-top: 3rem !important;
  }

  .mt-sm-auto {
    margin-top: auto !important;
  }

  html:not([dir=rtl]) .me-sm-0 {
    margin-right: 0 !important;
  }
  *[dir=rtl] .me-sm-0 {
    margin-left: 0 !important;
  }

  html:not([dir=rtl]) .me-sm-1 {
    margin-right: 0.25rem !important;
  }
  *[dir=rtl] .me-sm-1 {
    margin-left: 0.25rem !important;
  }

  html:not([dir=rtl]) .me-sm-2 {
    margin-right: 0.5rem !important;
  }
  *[dir=rtl] .me-sm-2 {
    margin-left: 0.5rem !important;
  }

  html:not([dir=rtl]) .me-sm-3 {
    margin-right: 1rem !important;
  }
  *[dir=rtl] .me-sm-3 {
    margin-left: 1rem !important;
  }

  html:not([dir=rtl]) .me-sm-4 {
    margin-right: 1.5rem !important;
  }
  *[dir=rtl] .me-sm-4 {
    margin-left: 1.5rem !important;
  }

  html:not([dir=rtl]) .me-sm-5 {
    margin-right: 3rem !important;
  }
  *[dir=rtl] .me-sm-5 {
    margin-left: 3rem !important;
  }

  html:not([dir=rtl]) .me-sm-auto {
    margin-right: auto !important;
  }
  *[dir=rtl] .me-sm-auto {
    margin-left: auto !important;
  }

  .mb-sm-0 {
    margin-bottom: 0 !important;
  }

  .mb-sm-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-sm-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-sm-3 {
    margin-bottom: 1rem !important;
  }

  .mb-sm-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-sm-5 {
    margin-bottom: 3rem !important;
  }

  .mb-sm-auto {
    margin-bottom: auto !important;
  }

  html:not([dir=rtl]) .ms-sm-0 {
    margin-left: 0 !important;
  }
  *[dir=rtl] .ms-sm-0 {
    margin-right: 0 !important;
  }

  html:not([dir=rtl]) .ms-sm-1 {
    margin-left: 0.25rem !important;
  }
  *[dir=rtl] .ms-sm-1 {
    margin-right: 0.25rem !important;
  }

  html:not([dir=rtl]) .ms-sm-2 {
    margin-left: 0.5rem !important;
  }
  *[dir=rtl] .ms-sm-2 {
    margin-right: 0.5rem !important;
  }

  html:not([dir=rtl]) .ms-sm-3 {
    margin-left: 1rem !important;
  }
  *[dir=rtl] .ms-sm-3 {
    margin-right: 1rem !important;
  }

  html:not([dir=rtl]) .ms-sm-4 {
    margin-left: 1.5rem !important;
  }
  *[dir=rtl] .ms-sm-4 {
    margin-right: 1.5rem !important;
  }

  html:not([dir=rtl]) .ms-sm-5 {
    margin-left: 3rem !important;
  }
  *[dir=rtl] .ms-sm-5 {
    margin-right: 3rem !important;
  }

  html:not([dir=rtl]) .ms-sm-auto {
    margin-left: auto !important;
  }
  *[dir=rtl] .ms-sm-auto {
    margin-right: auto !important;
  }

  .p-sm-0 {
    padding: 0 !important;
  }

  .p-sm-1 {
    padding: 0.25rem !important;
  }

  .p-sm-2 {
    padding: 0.5rem !important;
  }

  .p-sm-3 {
    padding: 1rem !important;
  }

  .p-sm-4 {
    padding: 1.5rem !important;
  }

  .p-sm-5 {
    padding: 3rem !important;
  }

  .px-sm-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .px-sm-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }

  .px-sm-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .px-sm-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .px-sm-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .px-sm-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }

  .py-sm-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-sm-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-sm-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-sm-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-sm-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-sm-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .pt-sm-0 {
    padding-top: 0 !important;
  }

  .pt-sm-1 {
    padding-top: 0.25rem !important;
  }

  .pt-sm-2 {
    padding-top: 0.5rem !important;
  }

  .pt-sm-3 {
    padding-top: 1rem !important;
  }

  .pt-sm-4 {
    padding-top: 1.5rem !important;
  }

  .pt-sm-5 {
    padding-top: 3rem !important;
  }

  html:not([dir=rtl]) .pe-sm-0 {
    padding-right: 0 !important;
  }
  *[dir=rtl] .pe-sm-0 {
    padding-left: 0 !important;
  }

  html:not([dir=rtl]) .pe-sm-1 {
    padding-right: 0.25rem !important;
  }
  *[dir=rtl] .pe-sm-1 {
    padding-left: 0.25rem !important;
  }

  html:not([dir=rtl]) .pe-sm-2 {
    padding-right: 0.5rem !important;
  }
  *[dir=rtl] .pe-sm-2 {
    padding-left: 0.5rem !important;
  }

  html:not([dir=rtl]) .pe-sm-3 {
    padding-right: 1rem !important;
  }
  *[dir=rtl] .pe-sm-3 {
    padding-left: 1rem !important;
  }

  html:not([dir=rtl]) .pe-sm-4 {
    padding-right: 1.5rem !important;
  }
  *[dir=rtl] .pe-sm-4 {
    padding-left: 1.5rem !important;
  }

  html:not([dir=rtl]) .pe-sm-5 {
    padding-right: 3rem !important;
  }
  *[dir=rtl] .pe-sm-5 {
    padding-left: 3rem !important;
  }

  .pb-sm-0 {
    padding-bottom: 0 !important;
  }

  .pb-sm-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-sm-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-sm-3 {
    padding-bottom: 1rem !important;
  }

  .pb-sm-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-sm-5 {
    padding-bottom: 3rem !important;
  }

  html:not([dir=rtl]) .ps-sm-0 {
    padding-left: 0 !important;
  }
  *[dir=rtl] .ps-sm-0 {
    padding-right: 0 !important;
  }

  html:not([dir=rtl]) .ps-sm-1 {
    padding-left: 0.25rem !important;
  }
  *[dir=rtl] .ps-sm-1 {
    padding-right: 0.25rem !important;
  }

  html:not([dir=rtl]) .ps-sm-2 {
    padding-left: 0.5rem !important;
  }
  *[dir=rtl] .ps-sm-2 {
    padding-right: 0.5rem !important;
  }

  html:not([dir=rtl]) .ps-sm-3 {
    padding-left: 1rem !important;
  }
  *[dir=rtl] .ps-sm-3 {
    padding-right: 1rem !important;
  }

  html:not([dir=rtl]) .ps-sm-4 {
    padding-left: 1.5rem !important;
  }
  *[dir=rtl] .ps-sm-4 {
    padding-right: 1.5rem !important;
  }

  html:not([dir=rtl]) .ps-sm-5 {
    padding-left: 3rem !important;
  }
  *[dir=rtl] .ps-sm-5 {
    padding-right: 3rem !important;
  }

  html:not([dir=rtl]) .text-sm-start {
    text-align: left !important;
  }

  *[dir=rtl] .text-sm-start,html:not([dir=rtl]) .text-sm-end {
    text-align: right !important;
  }
  *[dir=rtl] .text-sm-end {
    text-align: left !important;
  }
  html:not([dir=rtl]) .text-sm-center,*[dir=rtl] .text-sm-center {
    text-align: center !important;
  }
}
@media (min-width: 768px) {
  html:not([dir=rtl]) .float-md-start {
    float: left !important;
  }

  *[dir=rtl] .float-md-start,html:not([dir=rtl]) .float-md-end {
    float: right !important;
  }
  *[dir=rtl] .float-md-end {
    float: left !important;
  }
  html:not([dir=rtl]) .float-md-none,*[dir=rtl] .float-md-none {
    float: none !important;
  }

  .d-md-inline {
    display: inline !important;
  }

  .d-md-inline-block {
    display: inline-block !important;
  }

  .d-md-block {
    display: block !important;
  }

  .d-md-grid {
    display: grid !important;
  }

  .d-md-table {
    display: table !important;
  }

  .d-md-table-row {
    display: table-row !important;
  }

  .d-md-table-cell {
    display: table-cell !important;
  }

  .d-md-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-md-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }

  .d-md-none {
    display: none !important;
  }

  .flex-md-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }

  .flex-md-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }

  .flex-md-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .flex-md-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }

  .flex-md-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }

  .flex-md-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }

  .flex-md-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }

  .flex-md-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }

  .flex-md-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }

  .flex-md-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }

  .flex-md-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }

  .flex-md-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }

  .gap-md-0 {
    gap: 0 !important;
  }

  .gap-md-1 {
    gap: 0.25rem !important;
  }

  .gap-md-2 {
    gap: 0.5rem !important;
  }

  .gap-md-3 {
    gap: 1rem !important;
  }

  .gap-md-4 {
    gap: 1.5rem !important;
  }

  .gap-md-5 {
    gap: 3rem !important;
  }

  .justify-content-md-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }

  .justify-content-md-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }

  .justify-content-md-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }

  .justify-content-md-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }

  .justify-content-md-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }

  .justify-content-md-evenly {
    -ms-flex-pack: space-evenly !important;
    justify-content: space-evenly !important;
  }

  .align-items-md-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }

  .align-items-md-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }

  .align-items-md-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }

  .align-items-md-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }

  .align-items-md-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }

  .align-content-md-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }

  .align-content-md-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }

  .align-content-md-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }

  .align-content-md-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }

  .align-content-md-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }

  .align-content-md-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }

  .align-self-md-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }

  .align-self-md-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }

  .align-self-md-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }

  .align-self-md-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }

  .align-self-md-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }

  .align-self-md-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }

  .order-md-first {
    -ms-flex-order: -1 !important;
    order: -1 !important;
  }

  .order-md-0 {
    -ms-flex-order: 0 !important;
    order: 0 !important;
  }

  .order-md-1 {
    -ms-flex-order: 1 !important;
    order: 1 !important;
  }

  .order-md-2 {
    -ms-flex-order: 2 !important;
    order: 2 !important;
  }

  .order-md-3 {
    -ms-flex-order: 3 !important;
    order: 3 !important;
  }

  .order-md-4 {
    -ms-flex-order: 4 !important;
    order: 4 !important;
  }

  .order-md-5 {
    -ms-flex-order: 5 !important;
    order: 5 !important;
  }

  .order-md-last {
    -ms-flex-order: 6 !important;
    order: 6 !important;
  }

  .m-md-0 {
    margin: 0 !important;
  }

  .m-md-1 {
    margin: 0.25rem !important;
  }

  .m-md-2 {
    margin: 0.5rem !important;
  }

  .m-md-3 {
    margin: 1rem !important;
  }

  .m-md-4 {
    margin: 1.5rem !important;
  }

  .m-md-5 {
    margin: 3rem !important;
  }

  .m-md-auto {
    margin: auto !important;
  }

  .mx-md-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mx-md-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }

  .mx-md-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  .mx-md-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  .mx-md-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }

  .mx-md-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }

  .mx-md-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .my-md-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-md-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-md-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-md-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-md-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-md-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-md-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .mt-md-0 {
    margin-top: 0 !important;
  }

  .mt-md-1 {
    margin-top: 0.25rem !important;
  }

  .mt-md-2 {
    margin-top: 0.5rem !important;
  }

  .mt-md-3 {
    margin-top: 1rem !important;
  }

  .mt-md-4 {
    margin-top: 1.5rem !important;
  }

  .mt-md-5 {
    margin-top: 3rem !important;
  }

  .mt-md-auto {
    margin-top: auto !important;
  }

  html:not([dir=rtl]) .me-md-0 {
    margin-right: 0 !important;
  }
  *[dir=rtl] .me-md-0 {
    margin-left: 0 !important;
  }

  html:not([dir=rtl]) .me-md-1 {
    margin-right: 0.25rem !important;
  }
  *[dir=rtl] .me-md-1 {
    margin-left: 0.25rem !important;
  }

  html:not([dir=rtl]) .me-md-2 {
    margin-right: 0.5rem !important;
  }
  *[dir=rtl] .me-md-2 {
    margin-left: 0.5rem !important;
  }

  html:not([dir=rtl]) .me-md-3 {
    margin-right: 1rem !important;
  }
  *[dir=rtl] .me-md-3 {
    margin-left: 1rem !important;
  }

  html:not([dir=rtl]) .me-md-4 {
    margin-right: 1.5rem !important;
  }
  *[dir=rtl] .me-md-4 {
    margin-left: 1.5rem !important;
  }

  html:not([dir=rtl]) .me-md-5 {
    margin-right: 3rem !important;
  }
  *[dir=rtl] .me-md-5 {
    margin-left: 3rem !important;
  }

  html:not([dir=rtl]) .me-md-auto {
    margin-right: auto !important;
  }
  *[dir=rtl] .me-md-auto {
    margin-left: auto !important;
  }

  .mb-md-0 {
    margin-bottom: 0 !important;
  }

  .mb-md-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-md-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-md-3 {
    margin-bottom: 1rem !important;
  }

  .mb-md-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-md-5 {
    margin-bottom: 3rem !important;
  }

  .mb-md-auto {
    margin-bottom: auto !important;
  }

  html:not([dir=rtl]) .ms-md-0 {
    margin-left: 0 !important;
  }
  *[dir=rtl] .ms-md-0 {
    margin-right: 0 !important;
  }

  html:not([dir=rtl]) .ms-md-1 {
    margin-left: 0.25rem !important;
  }
  *[dir=rtl] .ms-md-1 {
    margin-right: 0.25rem !important;
  }

  html:not([dir=rtl]) .ms-md-2 {
    margin-left: 0.5rem !important;
  }
  *[dir=rtl] .ms-md-2 {
    margin-right: 0.5rem !important;
  }

  html:not([dir=rtl]) .ms-md-3 {
    margin-left: 1rem !important;
  }
  *[dir=rtl] .ms-md-3 {
    margin-right: 1rem !important;
  }

  html:not([dir=rtl]) .ms-md-4 {
    margin-left: 1.5rem !important;
  }
  *[dir=rtl] .ms-md-4 {
    margin-right: 1.5rem !important;
  }

  html:not([dir=rtl]) .ms-md-5 {
    margin-left: 3rem !important;
  }
  *[dir=rtl] .ms-md-5 {
    margin-right: 3rem !important;
  }

  html:not([dir=rtl]) .ms-md-auto {
    margin-left: auto !important;
  }
  *[dir=rtl] .ms-md-auto {
    margin-right: auto !important;
  }

  .p-md-0 {
    padding: 0 !important;
  }

  .p-md-1 {
    padding: 0.25rem !important;
  }

  .p-md-2 {
    padding: 0.5rem !important;
  }

  .p-md-3 {
    padding: 1rem !important;
  }

  .p-md-4 {
    padding: 1.5rem !important;
  }

  .p-md-5 {
    padding: 3rem !important;
  }

  .px-md-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .px-md-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }

  .px-md-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .px-md-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .px-md-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .px-md-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }

  .py-md-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-md-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-md-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-md-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-md-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .pt-md-0 {
    padding-top: 0 !important;
  }

  .pt-md-1 {
    padding-top: 0.25rem !important;
  }

  .pt-md-2 {
    padding-top: 0.5rem !important;
  }

  .pt-md-3 {
    padding-top: 1rem !important;
  }

  .pt-md-4 {
    padding-top: 1.5rem !important;
  }

  .pt-md-5 {
    padding-top: 3rem !important;
  }

  html:not([dir=rtl]) .pe-md-0 {
    padding-right: 0 !important;
  }
  *[dir=rtl] .pe-md-0 {
    padding-left: 0 !important;
  }

  html:not([dir=rtl]) .pe-md-1 {
    padding-right: 0.25rem !important;
  }
  *[dir=rtl] .pe-md-1 {
    padding-left: 0.25rem !important;
  }

  html:not([dir=rtl]) .pe-md-2 {
    padding-right: 0.5rem !important;
  }
  *[dir=rtl] .pe-md-2 {
    padding-left: 0.5rem !important;
  }

  html:not([dir=rtl]) .pe-md-3 {
    padding-right: 1rem !important;
  }
  *[dir=rtl] .pe-md-3 {
    padding-left: 1rem !important;
  }

  html:not([dir=rtl]) .pe-md-4 {
    padding-right: 1.5rem !important;
  }
  *[dir=rtl] .pe-md-4 {
    padding-left: 1.5rem !important;
  }

  html:not([dir=rtl]) .pe-md-5 {
    padding-right: 3rem !important;
  }
  *[dir=rtl] .pe-md-5 {
    padding-left: 3rem !important;
  }

  .pb-md-0 {
    padding-bottom: 0 !important;
  }

  .pb-md-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-md-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-md-3 {
    padding-bottom: 1rem !important;
  }

  .pb-md-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-md-5 {
    padding-bottom: 3rem !important;
  }

  html:not([dir=rtl]) .ps-md-0 {
    padding-left: 0 !important;
  }
  *[dir=rtl] .ps-md-0 {
    padding-right: 0 !important;
  }

  html:not([dir=rtl]) .ps-md-1 {
    padding-left: 0.25rem !important;
  }
  *[dir=rtl] .ps-md-1 {
    padding-right: 0.25rem !important;
  }

  html:not([dir=rtl]) .ps-md-2 {
    padding-left: 0.5rem !important;
  }
  *[dir=rtl] .ps-md-2 {
    padding-right: 0.5rem !important;
  }

  html:not([dir=rtl]) .ps-md-3 {
    padding-left: 1rem !important;
  }
  *[dir=rtl] .ps-md-3 {
    padding-right: 1rem !important;
  }

  html:not([dir=rtl]) .ps-md-4 {
    padding-left: 1.5rem !important;
  }
  *[dir=rtl] .ps-md-4 {
    padding-right: 1.5rem !important;
  }

  html:not([dir=rtl]) .ps-md-5 {
    padding-left: 3rem !important;
  }
  *[dir=rtl] .ps-md-5 {
    padding-right: 3rem !important;
  }

  html:not([dir=rtl]) .text-md-start {
    text-align: left !important;
  }

  *[dir=rtl] .text-md-start,html:not([dir=rtl]) .text-md-end {
    text-align: right !important;
  }
  *[dir=rtl] .text-md-end {
    text-align: left !important;
  }
  html:not([dir=rtl]) .text-md-center,*[dir=rtl] .text-md-center {
    text-align: center !important;
  }
}
@media (min-width: 992px) {
  html:not([dir=rtl]) .float-lg-start {
    float: left !important;
  }

  *[dir=rtl] .float-lg-start,html:not([dir=rtl]) .float-lg-end {
    float: right !important;
  }
  *[dir=rtl] .float-lg-end {
    float: left !important;
  }
  html:not([dir=rtl]) .float-lg-none,*[dir=rtl] .float-lg-none {
    float: none !important;
  }

  .d-lg-inline {
    display: inline !important;
  }

  .d-lg-inline-block {
    display: inline-block !important;
  }

  .d-lg-block {
    display: block !important;
  }

  .d-lg-grid {
    display: grid !important;
  }

  .d-lg-table {
    display: table !important;
  }

  .d-lg-table-row {
    display: table-row !important;
  }

  .d-lg-table-cell {
    display: table-cell !important;
  }

  .d-lg-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-lg-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }

  .d-lg-none {
    display: none !important;
  }

  .flex-lg-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }

  .flex-lg-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }

  .flex-lg-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .flex-lg-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }

  .flex-lg-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }

  .flex-lg-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }

  .flex-lg-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }

  .flex-lg-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }

  .flex-lg-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }

  .flex-lg-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }

  .flex-lg-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }

  .flex-lg-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }

  .gap-lg-0 {
    gap: 0 !important;
  }

  .gap-lg-1 {
    gap: 0.25rem !important;
  }

  .gap-lg-2 {
    gap: 0.5rem !important;
  }

  .gap-lg-3 {
    gap: 1rem !important;
  }

  .gap-lg-4 {
    gap: 1.5rem !important;
  }

  .gap-lg-5 {
    gap: 3rem !important;
  }

  .justify-content-lg-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }

  .justify-content-lg-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }

  .justify-content-lg-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }

  .justify-content-lg-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }

  .justify-content-lg-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }

  .justify-content-lg-evenly {
    -ms-flex-pack: space-evenly !important;
    justify-content: space-evenly !important;
  }

  .align-items-lg-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }

  .align-items-lg-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }

  .align-items-lg-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }

  .align-items-lg-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }

  .align-items-lg-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }

  .align-content-lg-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }

  .align-content-lg-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }

  .align-content-lg-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }

  .align-content-lg-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }

  .align-content-lg-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }

  .align-content-lg-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }

  .align-self-lg-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }

  .align-self-lg-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }

  .align-self-lg-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }

  .align-self-lg-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }

  .align-self-lg-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }

  .align-self-lg-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }

  .order-lg-first {
    -ms-flex-order: -1 !important;
    order: -1 !important;
  }

  .order-lg-0 {
    -ms-flex-order: 0 !important;
    order: 0 !important;
  }

  .order-lg-1 {
    -ms-flex-order: 1 !important;
    order: 1 !important;
  }

  .order-lg-2 {
    -ms-flex-order: 2 !important;
    order: 2 !important;
  }

  .order-lg-3 {
    -ms-flex-order: 3 !important;
    order: 3 !important;
  }

  .order-lg-4 {
    -ms-flex-order: 4 !important;
    order: 4 !important;
  }

  .order-lg-5 {
    -ms-flex-order: 5 !important;
    order: 5 !important;
  }

  .order-lg-last {
    -ms-flex-order: 6 !important;
    order: 6 !important;
  }

  .m-lg-0 {
    margin: 0 !important;
  }

  .m-lg-1 {
    margin: 0.25rem !important;
  }

  .m-lg-2 {
    margin: 0.5rem !important;
  }

  .m-lg-3 {
    margin: 1rem !important;
  }

  .m-lg-4 {
    margin: 1.5rem !important;
  }

  .m-lg-5 {
    margin: 3rem !important;
  }

  .m-lg-auto {
    margin: auto !important;
  }

  .mx-lg-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mx-lg-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }

  .mx-lg-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  .mx-lg-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  .mx-lg-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }

  .mx-lg-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }

  .mx-lg-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .my-lg-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-lg-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-lg-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-lg-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-lg-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-lg-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-lg-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .mt-lg-0 {
    margin-top: 0 !important;
  }

  .mt-lg-1 {
    margin-top: 0.25rem !important;
  }

  .mt-lg-2 {
    margin-top: 0.5rem !important;
  }

  .mt-lg-3 {
    margin-top: 1rem !important;
  }

  .mt-lg-4 {
    margin-top: 1.5rem !important;
  }

  .mt-lg-5 {
    margin-top: 3rem !important;
  }

  .mt-lg-auto {
    margin-top: auto !important;
  }

  html:not([dir=rtl]) .me-lg-0 {
    margin-right: 0 !important;
  }
  *[dir=rtl] .me-lg-0 {
    margin-left: 0 !important;
  }

  html:not([dir=rtl]) .me-lg-1 {
    margin-right: 0.25rem !important;
  }
  *[dir=rtl] .me-lg-1 {
    margin-left: 0.25rem !important;
  }

  html:not([dir=rtl]) .me-lg-2 {
    margin-right: 0.5rem !important;
  }
  *[dir=rtl] .me-lg-2 {
    margin-left: 0.5rem !important;
  }

  html:not([dir=rtl]) .me-lg-3 {
    margin-right: 1rem !important;
  }
  *[dir=rtl] .me-lg-3 {
    margin-left: 1rem !important;
  }

  html:not([dir=rtl]) .me-lg-4 {
    margin-right: 1.5rem !important;
  }
  *[dir=rtl] .me-lg-4 {
    margin-left: 1.5rem !important;
  }

  html:not([dir=rtl]) .me-lg-5 {
    margin-right: 3rem !important;
  }
  *[dir=rtl] .me-lg-5 {
    margin-left: 3rem !important;
  }

  html:not([dir=rtl]) .me-lg-auto {
    margin-right: auto !important;
  }
  *[dir=rtl] .me-lg-auto {
    margin-left: auto !important;
  }

  .mb-lg-0 {
    margin-bottom: 0 !important;
  }

  .mb-lg-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-lg-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-lg-3 {
    margin-bottom: 1rem !important;
  }

  .mb-lg-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-lg-5 {
    margin-bottom: 3rem !important;
  }

  .mb-lg-auto {
    margin-bottom: auto !important;
  }

  html:not([dir=rtl]) .ms-lg-0 {
    margin-left: 0 !important;
  }
  *[dir=rtl] .ms-lg-0 {
    margin-right: 0 !important;
  }

  html:not([dir=rtl]) .ms-lg-1 {
    margin-left: 0.25rem !important;
  }
  *[dir=rtl] .ms-lg-1 {
    margin-right: 0.25rem !important;
  }

  html:not([dir=rtl]) .ms-lg-2 {
    margin-left: 0.5rem !important;
  }
  *[dir=rtl] .ms-lg-2 {
    margin-right: 0.5rem !important;
  }

  html:not([dir=rtl]) .ms-lg-3 {
    margin-left: 1rem !important;
  }
  *[dir=rtl] .ms-lg-3 {
    margin-right: 1rem !important;
  }

  html:not([dir=rtl]) .ms-lg-4 {
    margin-left: 1.5rem !important;
  }
  *[dir=rtl] .ms-lg-4 {
    margin-right: 1.5rem !important;
  }

  html:not([dir=rtl]) .ms-lg-5 {
    margin-left: 3rem !important;
  }
  *[dir=rtl] .ms-lg-5 {
    margin-right: 3rem !important;
  }

  html:not([dir=rtl]) .ms-lg-auto {
    margin-left: auto !important;
  }
  *[dir=rtl] .ms-lg-auto {
    margin-right: auto !important;
  }

  .p-lg-0 {
    padding: 0 !important;
  }

  .p-lg-1 {
    padding: 0.25rem !important;
  }

  .p-lg-2 {
    padding: 0.5rem !important;
  }

  .p-lg-3 {
    padding: 1rem !important;
  }

  .p-lg-4 {
    padding: 1.5rem !important;
  }

  .p-lg-5 {
    padding: 3rem !important;
  }

  .px-lg-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .px-lg-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }

  .px-lg-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .px-lg-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .px-lg-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .px-lg-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }

  .py-lg-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-lg-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-lg-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-lg-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-lg-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-lg-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .pt-lg-0 {
    padding-top: 0 !important;
  }

  .pt-lg-1 {
    padding-top: 0.25rem !important;
  }

  .pt-lg-2 {
    padding-top: 0.5rem !important;
  }

  .pt-lg-3 {
    padding-top: 1rem !important;
  }

  .pt-lg-4 {
    padding-top: 1.5rem !important;
  }

  .pt-lg-5 {
    padding-top: 3rem !important;
  }

  html:not([dir=rtl]) .pe-lg-0 {
    padding-right: 0 !important;
  }
  *[dir=rtl] .pe-lg-0 {
    padding-left: 0 !important;
  }

  html:not([dir=rtl]) .pe-lg-1 {
    padding-right: 0.25rem !important;
  }
  *[dir=rtl] .pe-lg-1 {
    padding-left: 0.25rem !important;
  }

  html:not([dir=rtl]) .pe-lg-2 {
    padding-right: 0.5rem !important;
  }
  *[dir=rtl] .pe-lg-2 {
    padding-left: 0.5rem !important;
  }

  html:not([dir=rtl]) .pe-lg-3 {
    padding-right: 1rem !important;
  }
  *[dir=rtl] .pe-lg-3 {
    padding-left: 1rem !important;
  }

  html:not([dir=rtl]) .pe-lg-4 {
    padding-right: 1.5rem !important;
  }
  *[dir=rtl] .pe-lg-4 {
    padding-left: 1.5rem !important;
  }

  html:not([dir=rtl]) .pe-lg-5 {
    padding-right: 3rem !important;
  }
  *[dir=rtl] .pe-lg-5 {
    padding-left: 3rem !important;
  }

  .pb-lg-0 {
    padding-bottom: 0 !important;
  }

  .pb-lg-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-lg-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-lg-3 {
    padding-bottom: 1rem !important;
  }

  .pb-lg-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-lg-5 {
    padding-bottom: 3rem !important;
  }

  html:not([dir=rtl]) .ps-lg-0 {
    padding-left: 0 !important;
  }
  *[dir=rtl] .ps-lg-0 {
    padding-right: 0 !important;
  }

  html:not([dir=rtl]) .ps-lg-1 {
    padding-left: 0.25rem !important;
  }
  *[dir=rtl] .ps-lg-1 {
    padding-right: 0.25rem !important;
  }

  html:not([dir=rtl]) .ps-lg-2 {
    padding-left: 0.5rem !important;
  }
  *[dir=rtl] .ps-lg-2 {
    padding-right: 0.5rem !important;
  }

  html:not([dir=rtl]) .ps-lg-3 {
    padding-left: 1rem !important;
  }
  *[dir=rtl] .ps-lg-3 {
    padding-right: 1rem !important;
  }

  html:not([dir=rtl]) .ps-lg-4 {
    padding-left: 1.5rem !important;
  }
  *[dir=rtl] .ps-lg-4 {
    padding-right: 1.5rem !important;
  }

  html:not([dir=rtl]) .ps-lg-5 {
    padding-left: 3rem !important;
  }
  *[dir=rtl] .ps-lg-5 {
    padding-right: 3rem !important;
  }

  html:not([dir=rtl]) .text-lg-start {
    text-align: left !important;
  }

  *[dir=rtl] .text-lg-start,html:not([dir=rtl]) .text-lg-end {
    text-align: right !important;
  }
  *[dir=rtl] .text-lg-end {
    text-align: left !important;
  }
  html:not([dir=rtl]) .text-lg-center,*[dir=rtl] .text-lg-center {
    text-align: center !important;
  }
}
@media (min-width: 1200px) {
  html:not([dir=rtl]) .float-xl-start {
    float: left !important;
  }

  *[dir=rtl] .float-xl-start,html:not([dir=rtl]) .float-xl-end {
    float: right !important;
  }
  *[dir=rtl] .float-xl-end {
    float: left !important;
  }
  html:not([dir=rtl]) .float-xl-none,*[dir=rtl] .float-xl-none {
    float: none !important;
  }

  .d-xl-inline {
    display: inline !important;
  }

  .d-xl-inline-block {
    display: inline-block !important;
  }

  .d-xl-block {
    display: block !important;
  }

  .d-xl-grid {
    display: grid !important;
  }

  .d-xl-table {
    display: table !important;
  }

  .d-xl-table-row {
    display: table-row !important;
  }

  .d-xl-table-cell {
    display: table-cell !important;
  }

  .d-xl-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-xl-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }

  .d-xl-none {
    display: none !important;
  }

  .flex-xl-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }

  .flex-xl-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }

  .flex-xl-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .flex-xl-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }

  .flex-xl-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }

  .flex-xl-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }

  .flex-xl-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }

  .flex-xl-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }

  .flex-xl-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }

  .flex-xl-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }

  .flex-xl-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }

  .flex-xl-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }

  .gap-xl-0 {
    gap: 0 !important;
  }

  .gap-xl-1 {
    gap: 0.25rem !important;
  }

  .gap-xl-2 {
    gap: 0.5rem !important;
  }

  .gap-xl-3 {
    gap: 1rem !important;
  }

  .gap-xl-4 {
    gap: 1.5rem !important;
  }

  .gap-xl-5 {
    gap: 3rem !important;
  }

  .justify-content-xl-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }

  .justify-content-xl-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }

  .justify-content-xl-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }

  .justify-content-xl-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }

  .justify-content-xl-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }

  .justify-content-xl-evenly {
    -ms-flex-pack: space-evenly !important;
    justify-content: space-evenly !important;
  }

  .align-items-xl-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }

  .align-items-xl-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }

  .align-items-xl-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }

  .align-items-xl-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }

  .align-items-xl-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }

  .align-content-xl-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }

  .align-content-xl-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }

  .align-content-xl-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }

  .align-content-xl-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }

  .align-content-xl-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }

  .align-content-xl-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }

  .align-self-xl-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }

  .align-self-xl-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }

  .align-self-xl-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }

  .align-self-xl-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }

  .align-self-xl-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }

  .align-self-xl-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }

  .order-xl-first {
    -ms-flex-order: -1 !important;
    order: -1 !important;
  }

  .order-xl-0 {
    -ms-flex-order: 0 !important;
    order: 0 !important;
  }

  .order-xl-1 {
    -ms-flex-order: 1 !important;
    order: 1 !important;
  }

  .order-xl-2 {
    -ms-flex-order: 2 !important;
    order: 2 !important;
  }

  .order-xl-3 {
    -ms-flex-order: 3 !important;
    order: 3 !important;
  }

  .order-xl-4 {
    -ms-flex-order: 4 !important;
    order: 4 !important;
  }

  .order-xl-5 {
    -ms-flex-order: 5 !important;
    order: 5 !important;
  }

  .order-xl-last {
    -ms-flex-order: 6 !important;
    order: 6 !important;
  }

  .m-xl-0 {
    margin: 0 !important;
  }

  .m-xl-1 {
    margin: 0.25rem !important;
  }

  .m-xl-2 {
    margin: 0.5rem !important;
  }

  .m-xl-3 {
    margin: 1rem !important;
  }

  .m-xl-4 {
    margin: 1.5rem !important;
  }

  .m-xl-5 {
    margin: 3rem !important;
  }

  .m-xl-auto {
    margin: auto !important;
  }

  .mx-xl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mx-xl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }

  .mx-xl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  .mx-xl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  .mx-xl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }

  .mx-xl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }

  .mx-xl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .my-xl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-xl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-xl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-xl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-xl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-xl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .mt-xl-0 {
    margin-top: 0 !important;
  }

  .mt-xl-1 {
    margin-top: 0.25rem !important;
  }

  .mt-xl-2 {
    margin-top: 0.5rem !important;
  }

  .mt-xl-3 {
    margin-top: 1rem !important;
  }

  .mt-xl-4 {
    margin-top: 1.5rem !important;
  }

  .mt-xl-5 {
    margin-top: 3rem !important;
  }

  .mt-xl-auto {
    margin-top: auto !important;
  }

  html:not([dir=rtl]) .me-xl-0 {
    margin-right: 0 !important;
  }
  *[dir=rtl] .me-xl-0 {
    margin-left: 0 !important;
  }

  html:not([dir=rtl]) .me-xl-1 {
    margin-right: 0.25rem !important;
  }
  *[dir=rtl] .me-xl-1 {
    margin-left: 0.25rem !important;
  }

  html:not([dir=rtl]) .me-xl-2 {
    margin-right: 0.5rem !important;
  }
  *[dir=rtl] .me-xl-2 {
    margin-left: 0.5rem !important;
  }

  html:not([dir=rtl]) .me-xl-3 {
    margin-right: 1rem !important;
  }
  *[dir=rtl] .me-xl-3 {
    margin-left: 1rem !important;
  }

  html:not([dir=rtl]) .me-xl-4 {
    margin-right: 1.5rem !important;
  }
  *[dir=rtl] .me-xl-4 {
    margin-left: 1.5rem !important;
  }

  html:not([dir=rtl]) .me-xl-5 {
    margin-right: 3rem !important;
  }
  *[dir=rtl] .me-xl-5 {
    margin-left: 3rem !important;
  }

  html:not([dir=rtl]) .me-xl-auto {
    margin-right: auto !important;
  }
  *[dir=rtl] .me-xl-auto {
    margin-left: auto !important;
  }

  .mb-xl-0 {
    margin-bottom: 0 !important;
  }

  .mb-xl-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-xl-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-xl-3 {
    margin-bottom: 1rem !important;
  }

  .mb-xl-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-xl-5 {
    margin-bottom: 3rem !important;
  }

  .mb-xl-auto {
    margin-bottom: auto !important;
  }

  html:not([dir=rtl]) .ms-xl-0 {
    margin-left: 0 !important;
  }
  *[dir=rtl] .ms-xl-0 {
    margin-right: 0 !important;
  }

  html:not([dir=rtl]) .ms-xl-1 {
    margin-left: 0.25rem !important;
  }
  *[dir=rtl] .ms-xl-1 {
    margin-right: 0.25rem !important;
  }

  html:not([dir=rtl]) .ms-xl-2 {
    margin-left: 0.5rem !important;
  }
  *[dir=rtl] .ms-xl-2 {
    margin-right: 0.5rem !important;
  }

  html:not([dir=rtl]) .ms-xl-3 {
    margin-left: 1rem !important;
  }
  *[dir=rtl] .ms-xl-3 {
    margin-right: 1rem !important;
  }

  html:not([dir=rtl]) .ms-xl-4 {
    margin-left: 1.5rem !important;
  }
  *[dir=rtl] .ms-xl-4 {
    margin-right: 1.5rem !important;
  }

  html:not([dir=rtl]) .ms-xl-5 {
    margin-left: 3rem !important;
  }
  *[dir=rtl] .ms-xl-5 {
    margin-right: 3rem !important;
  }

  html:not([dir=rtl]) .ms-xl-auto {
    margin-left: auto !important;
  }
  *[dir=rtl] .ms-xl-auto {
    margin-right: auto !important;
  }

  .p-xl-0 {
    padding: 0 !important;
  }

  .p-xl-1 {
    padding: 0.25rem !important;
  }

  .p-xl-2 {
    padding: 0.5rem !important;
  }

  .p-xl-3 {
    padding: 1rem !important;
  }

  .p-xl-4 {
    padding: 1.5rem !important;
  }

  .p-xl-5 {
    padding: 3rem !important;
  }

  .px-xl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .px-xl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }

  .px-xl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .px-xl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .px-xl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .px-xl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }

  .py-xl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-xl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-xl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-xl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-xl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-xl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .pt-xl-0 {
    padding-top: 0 !important;
  }

  .pt-xl-1 {
    padding-top: 0.25rem !important;
  }

  .pt-xl-2 {
    padding-top: 0.5rem !important;
  }

  .pt-xl-3 {
    padding-top: 1rem !important;
  }

  .pt-xl-4 {
    padding-top: 1.5rem !important;
  }

  .pt-xl-5 {
    padding-top: 3rem !important;
  }

  html:not([dir=rtl]) .pe-xl-0 {
    padding-right: 0 !important;
  }
  *[dir=rtl] .pe-xl-0 {
    padding-left: 0 !important;
  }

  html:not([dir=rtl]) .pe-xl-1 {
    padding-right: 0.25rem !important;
  }
  *[dir=rtl] .pe-xl-1 {
    padding-left: 0.25rem !important;
  }

  html:not([dir=rtl]) .pe-xl-2 {
    padding-right: 0.5rem !important;
  }
  *[dir=rtl] .pe-xl-2 {
    padding-left: 0.5rem !important;
  }

  html:not([dir=rtl]) .pe-xl-3 {
    padding-right: 1rem !important;
  }
  *[dir=rtl] .pe-xl-3 {
    padding-left: 1rem !important;
  }

  html:not([dir=rtl]) .pe-xl-4 {
    padding-right: 1.5rem !important;
  }
  *[dir=rtl] .pe-xl-4 {
    padding-left: 1.5rem !important;
  }

  html:not([dir=rtl]) .pe-xl-5 {
    padding-right: 3rem !important;
  }
  *[dir=rtl] .pe-xl-5 {
    padding-left: 3rem !important;
  }

  .pb-xl-0 {
    padding-bottom: 0 !important;
  }

  .pb-xl-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-xl-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-xl-3 {
    padding-bottom: 1rem !important;
  }

  .pb-xl-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-xl-5 {
    padding-bottom: 3rem !important;
  }

  html:not([dir=rtl]) .ps-xl-0 {
    padding-left: 0 !important;
  }
  *[dir=rtl] .ps-xl-0 {
    padding-right: 0 !important;
  }

  html:not([dir=rtl]) .ps-xl-1 {
    padding-left: 0.25rem !important;
  }
  *[dir=rtl] .ps-xl-1 {
    padding-right: 0.25rem !important;
  }

  html:not([dir=rtl]) .ps-xl-2 {
    padding-left: 0.5rem !important;
  }
  *[dir=rtl] .ps-xl-2 {
    padding-right: 0.5rem !important;
  }

  html:not([dir=rtl]) .ps-xl-3 {
    padding-left: 1rem !important;
  }
  *[dir=rtl] .ps-xl-3 {
    padding-right: 1rem !important;
  }

  html:not([dir=rtl]) .ps-xl-4 {
    padding-left: 1.5rem !important;
  }
  *[dir=rtl] .ps-xl-4 {
    padding-right: 1.5rem !important;
  }

  html:not([dir=rtl]) .ps-xl-5 {
    padding-left: 3rem !important;
  }
  *[dir=rtl] .ps-xl-5 {
    padding-right: 3rem !important;
  }

  html:not([dir=rtl]) .text-xl-start {
    text-align: left !important;
  }

  *[dir=rtl] .text-xl-start,html:not([dir=rtl]) .text-xl-end {
    text-align: right !important;
  }
  *[dir=rtl] .text-xl-end {
    text-align: left !important;
  }
  html:not([dir=rtl]) .text-xl-center,*[dir=rtl] .text-xl-center {
    text-align: center !important;
  }
}
@media (min-width: 1400px) {
  html:not([dir=rtl]) .float-xxl-start {
    float: left !important;
  }

  *[dir=rtl] .float-xxl-start,html:not([dir=rtl]) .float-xxl-end {
    float: right !important;
  }
  *[dir=rtl] .float-xxl-end {
    float: left !important;
  }
  html:not([dir=rtl]) .float-xxl-none,*[dir=rtl] .float-xxl-none {
    float: none !important;
  }

  .d-xxl-inline {
    display: inline !important;
  }

  .d-xxl-inline-block {
    display: inline-block !important;
  }

  .d-xxl-block {
    display: block !important;
  }

  .d-xxl-grid {
    display: grid !important;
  }

  .d-xxl-table {
    display: table !important;
  }

  .d-xxl-table-row {
    display: table-row !important;
  }

  .d-xxl-table-cell {
    display: table-cell !important;
  }

  .d-xxl-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-xxl-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }

  .d-xxl-none {
    display: none !important;
  }

  .flex-xxl-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }

  .flex-xxl-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }

  .flex-xxl-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .flex-xxl-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }

  .flex-xxl-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }

  .flex-xxl-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }

  .flex-xxl-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }

  .flex-xxl-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }

  .flex-xxl-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }

  .flex-xxl-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }

  .flex-xxl-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }

  .flex-xxl-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }

  .gap-xxl-0 {
    gap: 0 !important;
  }

  .gap-xxl-1 {
    gap: 0.25rem !important;
  }

  .gap-xxl-2 {
    gap: 0.5rem !important;
  }

  .gap-xxl-3 {
    gap: 1rem !important;
  }

  .gap-xxl-4 {
    gap: 1.5rem !important;
  }

  .gap-xxl-5 {
    gap: 3rem !important;
  }

  .justify-content-xxl-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }

  .justify-content-xxl-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }

  .justify-content-xxl-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }

  .justify-content-xxl-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }

  .justify-content-xxl-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }

  .justify-content-xxl-evenly {
    -ms-flex-pack: space-evenly !important;
    justify-content: space-evenly !important;
  }

  .align-items-xxl-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }

  .align-items-xxl-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }

  .align-items-xxl-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }

  .align-items-xxl-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }

  .align-items-xxl-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }

  .align-content-xxl-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }

  .align-content-xxl-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }

  .align-content-xxl-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }

  .align-content-xxl-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }

  .align-content-xxl-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }

  .align-content-xxl-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }

  .align-self-xxl-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }

  .align-self-xxl-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }

  .align-self-xxl-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }

  .align-self-xxl-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }

  .align-self-xxl-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }

  .align-self-xxl-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }

  .order-xxl-first {
    -ms-flex-order: -1 !important;
    order: -1 !important;
  }

  .order-xxl-0 {
    -ms-flex-order: 0 !important;
    order: 0 !important;
  }

  .order-xxl-1 {
    -ms-flex-order: 1 !important;
    order: 1 !important;
  }

  .order-xxl-2 {
    -ms-flex-order: 2 !important;
    order: 2 !important;
  }

  .order-xxl-3 {
    -ms-flex-order: 3 !important;
    order: 3 !important;
  }

  .order-xxl-4 {
    -ms-flex-order: 4 !important;
    order: 4 !important;
  }

  .order-xxl-5 {
    -ms-flex-order: 5 !important;
    order: 5 !important;
  }

  .order-xxl-last {
    -ms-flex-order: 6 !important;
    order: 6 !important;
  }

  .m-xxl-0 {
    margin: 0 !important;
  }

  .m-xxl-1 {
    margin: 0.25rem !important;
  }

  .m-xxl-2 {
    margin: 0.5rem !important;
  }

  .m-xxl-3 {
    margin: 1rem !important;
  }

  .m-xxl-4 {
    margin: 1.5rem !important;
  }

  .m-xxl-5 {
    margin: 3rem !important;
  }

  .m-xxl-auto {
    margin: auto !important;
  }

  .mx-xxl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mx-xxl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }

  .mx-xxl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  .mx-xxl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  .mx-xxl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }

  .mx-xxl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }

  .mx-xxl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .my-xxl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-xxl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-xxl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-xxl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-xxl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-xxl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-xxl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .mt-xxl-0 {
    margin-top: 0 !important;
  }

  .mt-xxl-1 {
    margin-top: 0.25rem !important;
  }

  .mt-xxl-2 {
    margin-top: 0.5rem !important;
  }

  .mt-xxl-3 {
    margin-top: 1rem !important;
  }

  .mt-xxl-4 {
    margin-top: 1.5rem !important;
  }

  .mt-xxl-5 {
    margin-top: 3rem !important;
  }

  .mt-xxl-auto {
    margin-top: auto !important;
  }

  html:not([dir=rtl]) .me-xxl-0 {
    margin-right: 0 !important;
  }
  *[dir=rtl] .me-xxl-0 {
    margin-left: 0 !important;
  }

  html:not([dir=rtl]) .me-xxl-1 {
    margin-right: 0.25rem !important;
  }
  *[dir=rtl] .me-xxl-1 {
    margin-left: 0.25rem !important;
  }

  html:not([dir=rtl]) .me-xxl-2 {
    margin-right: 0.5rem !important;
  }
  *[dir=rtl] .me-xxl-2 {
    margin-left: 0.5rem !important;
  }

  html:not([dir=rtl]) .me-xxl-3 {
    margin-right: 1rem !important;
  }
  *[dir=rtl] .me-xxl-3 {
    margin-left: 1rem !important;
  }

  html:not([dir=rtl]) .me-xxl-4 {
    margin-right: 1.5rem !important;
  }
  *[dir=rtl] .me-xxl-4 {
    margin-left: 1.5rem !important;
  }

  html:not([dir=rtl]) .me-xxl-5 {
    margin-right: 3rem !important;
  }
  *[dir=rtl] .me-xxl-5 {
    margin-left: 3rem !important;
  }

  html:not([dir=rtl]) .me-xxl-auto {
    margin-right: auto !important;
  }
  *[dir=rtl] .me-xxl-auto {
    margin-left: auto !important;
  }

  .mb-xxl-0 {
    margin-bottom: 0 !important;
  }

  .mb-xxl-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-xxl-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-xxl-3 {
    margin-bottom: 1rem !important;
  }

  .mb-xxl-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-xxl-5 {
    margin-bottom: 3rem !important;
  }

  .mb-xxl-auto {
    margin-bottom: auto !important;
  }

  html:not([dir=rtl]) .ms-xxl-0 {
    margin-left: 0 !important;
  }
  *[dir=rtl] .ms-xxl-0 {
    margin-right: 0 !important;
  }

  html:not([dir=rtl]) .ms-xxl-1 {
    margin-left: 0.25rem !important;
  }
  *[dir=rtl] .ms-xxl-1 {
    margin-right: 0.25rem !important;
  }

  html:not([dir=rtl]) .ms-xxl-2 {
    margin-left: 0.5rem !important;
  }
  *[dir=rtl] .ms-xxl-2 {
    margin-right: 0.5rem !important;
  }

  html:not([dir=rtl]) .ms-xxl-3 {
    margin-left: 1rem !important;
  }
  *[dir=rtl] .ms-xxl-3 {
    margin-right: 1rem !important;
  }

  html:not([dir=rtl]) .ms-xxl-4 {
    margin-left: 1.5rem !important;
  }
  *[dir=rtl] .ms-xxl-4 {
    margin-right: 1.5rem !important;
  }

  html:not([dir=rtl]) .ms-xxl-5 {
    margin-left: 3rem !important;
  }
  *[dir=rtl] .ms-xxl-5 {
    margin-right: 3rem !important;
  }

  html:not([dir=rtl]) .ms-xxl-auto {
    margin-left: auto !important;
  }
  *[dir=rtl] .ms-xxl-auto {
    margin-right: auto !important;
  }

  .p-xxl-0 {
    padding: 0 !important;
  }

  .p-xxl-1 {
    padding: 0.25rem !important;
  }

  .p-xxl-2 {
    padding: 0.5rem !important;
  }

  .p-xxl-3 {
    padding: 1rem !important;
  }

  .p-xxl-4 {
    padding: 1.5rem !important;
  }

  .p-xxl-5 {
    padding: 3rem !important;
  }

  .px-xxl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .px-xxl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }

  .px-xxl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .px-xxl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .px-xxl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .px-xxl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }

  .py-xxl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-xxl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-xxl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-xxl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-xxl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-xxl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .pt-xxl-0 {
    padding-top: 0 !important;
  }

  .pt-xxl-1 {
    padding-top: 0.25rem !important;
  }

  .pt-xxl-2 {
    padding-top: 0.5rem !important;
  }

  .pt-xxl-3 {
    padding-top: 1rem !important;
  }

  .pt-xxl-4 {
    padding-top: 1.5rem !important;
  }

  .pt-xxl-5 {
    padding-top: 3rem !important;
  }

  html:not([dir=rtl]) .pe-xxl-0 {
    padding-right: 0 !important;
  }
  *[dir=rtl] .pe-xxl-0 {
    padding-left: 0 !important;
  }

  html:not([dir=rtl]) .pe-xxl-1 {
    padding-right: 0.25rem !important;
  }
  *[dir=rtl] .pe-xxl-1 {
    padding-left: 0.25rem !important;
  }

  html:not([dir=rtl]) .pe-xxl-2 {
    padding-right: 0.5rem !important;
  }
  *[dir=rtl] .pe-xxl-2 {
    padding-left: 0.5rem !important;
  }

  html:not([dir=rtl]) .pe-xxl-3 {
    padding-right: 1rem !important;
  }
  *[dir=rtl] .pe-xxl-3 {
    padding-left: 1rem !important;
  }

  html:not([dir=rtl]) .pe-xxl-4 {
    padding-right: 1.5rem !important;
  }
  *[dir=rtl] .pe-xxl-4 {
    padding-left: 1.5rem !important;
  }

  html:not([dir=rtl]) .pe-xxl-5 {
    padding-right: 3rem !important;
  }
  *[dir=rtl] .pe-xxl-5 {
    padding-left: 3rem !important;
  }

  .pb-xxl-0 {
    padding-bottom: 0 !important;
  }

  .pb-xxl-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-xxl-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-xxl-3 {
    padding-bottom: 1rem !important;
  }

  .pb-xxl-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-xxl-5 {
    padding-bottom: 3rem !important;
  }

  html:not([dir=rtl]) .ps-xxl-0 {
    padding-left: 0 !important;
  }
  *[dir=rtl] .ps-xxl-0 {
    padding-right: 0 !important;
  }

  html:not([dir=rtl]) .ps-xxl-1 {
    padding-left: 0.25rem !important;
  }
  *[dir=rtl] .ps-xxl-1 {
    padding-right: 0.25rem !important;
  }

  html:not([dir=rtl]) .ps-xxl-2 {
    padding-left: 0.5rem !important;
  }
  *[dir=rtl] .ps-xxl-2 {
    padding-right: 0.5rem !important;
  }

  html:not([dir=rtl]) .ps-xxl-3 {
    padding-left: 1rem !important;
  }
  *[dir=rtl] .ps-xxl-3 {
    padding-right: 1rem !important;
  }

  html:not([dir=rtl]) .ps-xxl-4 {
    padding-left: 1.5rem !important;
  }
  *[dir=rtl] .ps-xxl-4 {
    padding-right: 1.5rem !important;
  }

  html:not([dir=rtl]) .ps-xxl-5 {
    padding-left: 3rem !important;
  }
  *[dir=rtl] .ps-xxl-5 {
    padding-right: 3rem !important;
  }

  html:not([dir=rtl]) .text-xxl-start {
    text-align: left !important;
  }

  *[dir=rtl] .text-xxl-start,html:not([dir=rtl]) .text-xxl-end {
    text-align: right !important;
  }
  *[dir=rtl] .text-xxl-end {
    text-align: left !important;
  }
  html:not([dir=rtl]) .text-xxl-center,*[dir=rtl] .text-xxl-center {
    text-align: center !important;
  }
}
@media (min-width: 1200px) {
  .fs-1 {
    font-size: 2.5rem !important;
  }

  .fs-2 {
    font-size: 2rem !important;
  }

  .fs-3 {
    font-size: 1.75rem !important;
  }

  .fs-4 {
    font-size: 1.5rem !important;
  }
}
@media print {
  .d-print-inline {
    display: inline !important;
  }

  .d-print-inline-block {
    display: inline-block !important;
  }

  .d-print-block {
    display: block !important;
  }

  .d-print-grid {
    display: grid !important;
  }

  .d-print-table {
    display: table !important;
  }

  .d-print-table-row {
    display: table-row !important;
  }

  .d-print-table-cell {
    display: table-cell !important;
  }

  .d-print-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-print-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }

  .d-print-none {
    display: none !important;
  }
}
.wrapper {
  width: 100%;
  will-change: auto;
  transition: padding 0.15s;
}
html:not([dir=rtl]) .wrapper {
  padding-left: var(--cui-sidebar-occupy-start, 0);
}
*[dir=rtl] .wrapper {
  padding-right: var(--cui-sidebar-occupy-start, 0);
}
@media (prefers-reduced-motion: reduce) {
  .wrapper {
    transition: none;
  }
}

.example:not(:first-child) {
  margin-top: 1.5rem;
}
.example .tab-content {
  background-color: #f9fafa !important;
}
.dark-theme .example .tab-content {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.example code[class*=language-],
.example pre[class*=language-] {
  font-size: 0.875rem !important;
}
.example :not(pre) > code[class*=language-],
.example pre[class*=language-] {
  background: transparent;
}
.example + p {
  margin-top: 1.5rem;
}
.example .preview + p {
  margin-top: 2rem;
}
.example .preview > .form-control + .form-control {
  margin-top: 0.5rem;
}
.example .preview > .nav + .nav,
.example .preview > .alert + .alert,
.example .preview > .navbar + .navbar,
.example .preview > .progress + .progress {
  margin-top: 1rem;
}
.example .preview > .dropdown-menu {
  position: static;
  display: block;
}
.example .preview > :last-child {
  margin-bottom: 0;
}
.example .preview > svg + svg,
.example .preview > img + img {
  margin-left: 0.5rem;
}
.example .preview > .btn,
.example .preview > .btn-group {
  margin: 0.25rem 0.125rem;
}
.example .preview > .btn-toolbar + .btn-toolbar {
  margin-top: 0.5rem;
}
.example .preview > .list-group {
  max-width: 400px;
}
.example .preview > [class*=list-group-horizontal] {
  max-width: 100%;
}
.example .preview .fixed-top,
.example .preview .sticky-top {
  position: static;
  margin: -1rem -1rem 1rem;
}
.example .preview .fixed-bottom {
  position: static;
  margin: 1rem -1rem -1rem;
}
@media (min-width: 576px) {
  .example .preview .fixed-top,
.example .preview .sticky-top {
    margin: -1.5rem -1.5rem 1rem;
  }
  .example .preview .fixed-bottom {
    margin: 1rem -1.5rem -1.5rem;
  }
}
.example .preview .pagination {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.dark-theme {
  /* Code blocks */
  /* Inline code */
}
.dark-theme code[class*=language-],
.dark-theme pre[class*=language-] {
  color: #c5c8c6;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: Inconsolata, Monaco, Consolas, "Courier New", Courier, monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
.dark-theme pre[class*=language-] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}
.dark-theme :not(pre) > code[class*=language-],
.dark-theme pre[class*=language-] {
  background: transparent;
}
.dark-theme :not(pre) > code[class*=language-] {
  padding: 0.1em;
  border-radius: 0.3em;
}
.dark-theme .token.comment,
.dark-theme .token.prolog,
.dark-theme .token.doctype,
.dark-theme .token.cdata {
  color: #7C7C7C;
}
.dark-theme .token.punctuation {
  color: #c5c8c6;
}
.dark-theme .namespace {
  opacity: 0.7;
}
.dark-theme .token.property,
.dark-theme .token.keyword,
.dark-theme .token.tag {
  color: #96CBFE;
}
.dark-theme .token.class-name {
  color: #FFFFB6;
  text-decoration: underline;
}
.dark-theme .token.boolean,
.dark-theme .token.constant {
  color: #99CC99;
}
.dark-theme .token.symbol,
.dark-theme .token.deleted {
  color: #f92672;
}
.dark-theme .token.number {
  color: #FF73FD;
}
.dark-theme .token.selector,
.dark-theme .token.attr-name,
.dark-theme .token.string,
.dark-theme .token.char,
.dark-theme .token.builtin,
.dark-theme .token.inserted {
  color: #A8FF60;
}
.dark-theme .token.variable {
  color: #C6C5FE;
}
.dark-theme .token.operator {
  color: #EDEDED;
}
.dark-theme .token.entity {
  color: #FFFFB6;
  cursor: help;
}
.dark-theme .token.url {
  color: #96CBFE;
}
.dark-theme .language-css .token.string,
.dark-theme .style .token.string {
  color: #87C38A;
}
.dark-theme .token.atrule,
.dark-theme .token.attr-value {
  color: #F9EE98;
}
.dark-theme .token.function {
  color: #DAD085;
}
.dark-theme .token.regex {
  color: #E9C062;
}
.dark-theme .token.important {
  color: #fd971f;
}
.dark-theme .token.important,
.dark-theme .token.bold {
  font-weight: bold;
}
.dark-theme .token.italic {
  font-style: italic;
}

.memberLink{
    cursor:pointer
}

/*# sourceMappingURL=style.css.map */
@charset "UTF-8";
/*!
 * CoreUI Plugins - Chart.js for CoreUI 3
 * @version v3.0.0-alpha.0
 * @link https://coreui.io
 * Copyright (c) 2021 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://coreui.io/license/plugins/chart.js)
 */
.chartjs-tooltip {
  position: absolute;
  z-index: 1021;
  padding: 0.25rem 0.5rem;
  color: #fff;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: all 0.15s ease;
  transform: translate(-50%, 0);
  border-radius: 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
  .chartjs-tooltip {
    transition: none;
  }
}

.chartjs-tooltip-header {
  margin-bottom: 0.5rem;
}

.chartjs-tooltip-header-item {
  font-size: 0.875rem;
  font-weight: 700;
}

.chartjs-tooltip-body-item {
  align-items: center;
  font-size: 0.875rem;
  white-space: nowrap;
}

/*# sourceMappingURL=coreui-chartjs.css.map */
.swal2-popup.swal2-toast {
  box-sizing: border-box;
  grid-column: 1/4 !important;
  grid-row: 1/4 !important;
  grid-template-columns: min-content auto min-content;
  padding: 1em;
  overflow-y: hidden;
  background: #fff;
  box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.075), 0 1px 2px hsla(0, 0%, 0%, 0.075), 1px 2px 4px hsla(0, 0%, 0%, 0.075), 1px 3px 8px hsla(0, 0%, 0%, 0.075), 2px 4px 16px hsla(0, 0%, 0%, 0.075);
  pointer-events: all;
}
.swal2-popup.swal2-toast > * {
  grid-column: 2;
}
.swal2-popup.swal2-toast .swal2-title {
  margin: 0.5em 1em;
  padding: 0;
  font-size: 1em;
  text-align: initial;
}
.swal2-popup.swal2-toast .swal2-loading {
  justify-content: center;
}
.swal2-popup.swal2-toast .swal2-input {
  height: 2em;
  margin: 0.5em;
  font-size: 1em;
}
.swal2-popup.swal2-toast .swal2-validation-message {
  font-size: 1em;
}
.swal2-popup.swal2-toast .swal2-footer {
  margin: 0.5em 0 0;
  padding: 0.5em 0 0;
  font-size: 0.8em;
}
.swal2-popup.swal2-toast .swal2-close {
  grid-column: 3/3;
  grid-row: 1/99;
  align-self: center;
  width: 0.8em;
  height: 0.8em;
  margin: 0;
  font-size: 2em;
}
.swal2-popup.swal2-toast .swal2-html-container {
  margin: 0.5em 1em;
  padding: 0;
  overflow: initial;
  font-size: 1em;
  text-align: initial;
}
.swal2-popup.swal2-toast .swal2-html-container:empty {
  padding: 0;
}
.swal2-popup.swal2-toast .swal2-loader {
  grid-column: 1;
  grid-row: 1/99;
  align-self: center;
  width: 2em;
  height: 2em;
  margin: 0.25em;
}
.swal2-popup.swal2-toast .swal2-icon {
  grid-column: 1;
  grid-row: 1/99;
  align-self: center;
  width: 2em;
  min-width: 2em;
  height: 2em;
  margin: 0 0.5em 0 0;
}
.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
  display: flex;
  align-items: center;
  font-size: 1.8em;
  font-weight: bold;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
  width: 2em;
  height: 2em;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  top: 0.875em;
  width: 1.375em;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
  left: 0.3125em;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
  right: 0.3125em;
}
.swal2-popup.swal2-toast .swal2-actions {
  justify-content: flex-start;
  height: auto;
  margin: 0;
  margin-top: 0.5em;
  padding: 0 0.5em;
}
.swal2-popup.swal2-toast .swal2-styled {
  margin: 0.25em 0.5em;
  padding: 0.4em 0.6em;
  font-size: 1em;
}
.swal2-popup.swal2-toast .swal2-success {
  border-color: #a5dc86;
}
.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line] {
  position: absolute;
  width: 1.6em;
  height: 3em;
  border-radius: 50%;
}
.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left] {
  top: -0.8em;
  left: -0.5em;
  transform: rotate(-45deg);
  transform-origin: 2em 2em;
  border-radius: 4em 0 0 4em;
}
.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right] {
  top: -0.25em;
  left: 0.9375em;
  transform-origin: 0 1.5em;
  border-radius: 0 4em 4em 0;
}
.swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
  width: 2em;
  height: 2em;
}
.swal2-popup.swal2-toast .swal2-success .swal2-success-fix {
  top: 0;
  left: 0.4375em;
  width: 0.4375em;
  height: 2.6875em;
}
.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line] {
  height: 0.3125em;
}
.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip] {
  top: 1.125em;
  left: 0.1875em;
  width: 0.75em;
}
.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=long] {
  top: 0.9375em;
  right: 0.1875em;
  width: 1.375em;
}
.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip {
  animation: swal2-toast-animate-success-line-tip 0.75s;
}
.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long {
  animation: swal2-toast-animate-success-line-long 0.75s;
}
.swal2-popup.swal2-toast.swal2-show {
  animation: swal2-toast-show 0.5s;
}
.swal2-popup.swal2-toast.swal2-hide {
  animation: swal2-toast-hide 0.1s forwards;
}

div:where(.swal2-container) {
  display: grid;
  position: fixed;
  z-index: 1060;
  inset: 0;
  box-sizing: border-box;
  grid-template-areas: "top-start     top            top-end" "center-start  center         center-end" "bottom-start  bottom-center  bottom-end";
  grid-template-rows: minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);
  height: 100%;
  padding: 0.625em;
  overflow-x: hidden;
  transition: background-color 0.1s;
  -webkit-overflow-scrolling: touch;
}
div:where(.swal2-container).swal2-backdrop-show, div:where(.swal2-container).swal2-noanimation {
  background: rgba(0, 0, 0, 0.4);
}
div:where(.swal2-container).swal2-backdrop-hide {
  background: transparent !important;
}
div:where(.swal2-container).swal2-top-start, div:where(.swal2-container).swal2-center-start, div:where(.swal2-container).swal2-bottom-start {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
div:where(.swal2-container).swal2-top, div:where(.swal2-container).swal2-center, div:where(.swal2-container).swal2-bottom {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
div:where(.swal2-container).swal2-top-end, div:where(.swal2-container).swal2-center-end, div:where(.swal2-container).swal2-bottom-end {
  grid-template-columns: auto auto minmax(0, 1fr);
}
div:where(.swal2-container).swal2-top-start > .swal2-popup {
  align-self: start;
}
div:where(.swal2-container).swal2-top > .swal2-popup {
  grid-column: 2;
  place-self: start center;
}
div:where(.swal2-container).swal2-top-end > .swal2-popup, div:where(.swal2-container).swal2-top-right > .swal2-popup {
  grid-column: 3;
  place-self: start end;
}
div:where(.swal2-container).swal2-center-start > .swal2-popup, div:where(.swal2-container).swal2-center-left > .swal2-popup {
  grid-row: 2;
  align-self: center;
}
div:where(.swal2-container).swal2-center > .swal2-popup {
  grid-column: 2;
  grid-row: 2;
  place-self: center center;
}
div:where(.swal2-container).swal2-center-end > .swal2-popup, div:where(.swal2-container).swal2-center-right > .swal2-popup {
  grid-column: 3;
  grid-row: 2;
  place-self: center end;
}
div:where(.swal2-container).swal2-bottom-start > .swal2-popup, div:where(.swal2-container).swal2-bottom-left > .swal2-popup {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
}
div:where(.swal2-container).swal2-bottom > .swal2-popup {
  grid-column: 2;
  grid-row: 3;
  place-self: end center;
}
div:where(.swal2-container).swal2-bottom-end > .swal2-popup, div:where(.swal2-container).swal2-bottom-right > .swal2-popup {
  grid-column: 3;
  grid-row: 3;
  place-self: end end;
}
div:where(.swal2-container).swal2-grow-row > .swal2-popup, div:where(.swal2-container).swal2-grow-fullscreen > .swal2-popup {
  grid-column: 1/4;
  width: 100%;
}
div:where(.swal2-container).swal2-grow-column > .swal2-popup, div:where(.swal2-container).swal2-grow-fullscreen > .swal2-popup {
  grid-row: 1/4;
  align-self: stretch;
}
div:where(.swal2-container).swal2-no-transition {
  transition: none !important;
}
div:where(.swal2-container) div:where(.swal2-popup) {
  display: none;
  position: relative;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 100%);
  width: 32em;
  max-width: 100%;
  padding: 0 0 1.25em;
  border: none;
  border-radius: 5px;
  background: #fff;
  color: #545454;
  font-family: inherit;
  font-size: 1rem;
}
div:where(.swal2-container) div:where(.swal2-popup):focus {
  outline: none;
}
div:where(.swal2-container) div:where(.swal2-popup).swal2-loading {
  overflow-y: hidden;
}
div:where(.swal2-container) h2:where(.swal2-title) {
  position: relative;
  max-width: 100%;
  margin: 0;
  padding: 0.8em 1em 0;
  color: inherit;
  font-size: 1.875em;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  word-wrap: break-word;
}
div:where(.swal2-container) div:where(.swal2-actions) {
  display: flex;
  z-index: 1;
  box-sizing: border-box;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 1.25em auto 0;
  padding: 0;
}
div:where(.swal2-container) div:where(.swal2-actions):not(.swal2-loading) .swal2-styled[disabled] {
  opacity: 0.4;
}
div:where(.swal2-container) div:where(.swal2-actions):not(.swal2-loading) .swal2-styled:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
}
div:where(.swal2-container) div:where(.swal2-actions):not(.swal2-loading) .swal2-styled:active {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}
div:where(.swal2-container) div:where(.swal2-loader) {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  margin: 0 1.875em;
  animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
  border-width: 0.25em;
  border-style: solid;
  border-radius: 100%;
  border-color: #2778c4 transparent #2778c4 transparent;
}
div:where(.swal2-container) button:where(.swal2-styled) {
  margin: 0.3125em;
  padding: 0.625em 1.1em;
  transition: box-shadow 0.1s;
  box-shadow: 0 0 0 3px transparent;
  font-weight: 500;
}
div:where(.swal2-container) button:where(.swal2-styled):not([disabled]) {
  cursor: pointer;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  border: 0;
  border-radius: 0.25em;
  background: initial;
  background-color: #7066e0;
  color: #fff;
  font-size: 1em;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(112, 102, 224, 0.5);
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-deny {
  border: 0;
  border-radius: 0.25em;
  background: initial;
  background-color: #dc3741;
  color: #fff;
  font-size: 1em;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-deny:focus {
  box-shadow: 0 0 0 3px rgba(220, 55, 65, 0.5);
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel {
  border: 0;
  border-radius: 0.25em;
  background: initial;
  background-color: #6e7881;
  color: #fff;
  font-size: 1em;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel:focus {
  box-shadow: 0 0 0 3px rgba(110, 120, 129, 0.5);
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-default-outline:focus {
  box-shadow: 0 0 0 3px rgba(100, 150, 200, 0.5);
}
div:where(.swal2-container) button:where(.swal2-styled):focus {
  outline: none;
}
div:where(.swal2-container) button:where(.swal2-styled)::-moz-focus-inner {
  border: 0;
}
div:where(.swal2-container) div:where(.swal2-footer) {
  margin: 1em 0 0;
  padding: 1em 1em 0;
  border-top: 1px solid #eee;
  color: inherit;
  font-size: 1em;
  text-align: center;
}
div:where(.swal2-container) .swal2-timer-progress-bar-container {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  grid-column: auto !important;
  overflow: hidden;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
div:where(.swal2-container) div:where(.swal2-timer-progress-bar) {
  width: 100%;
  height: 0.25em;
  background: rgba(0, 0, 0, 0.2);
}
div:where(.swal2-container) img:where(.swal2-image) {
  max-width: 100%;
  margin: 2em auto 1em;
}
div:where(.swal2-container) button:where(.swal2-close) {
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: -1.2em;
  padding: 0;
  overflow: hidden;
  transition: color 0.1s, box-shadow 0.1s;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: #ccc;
  font-family: monospace;
  font-size: 2.5em;
  cursor: pointer;
  justify-self: end;
}
div:where(.swal2-container) button:where(.swal2-close):hover {
  transform: none;
  background: transparent;
  color: #f27474;
}
div:where(.swal2-container) button:where(.swal2-close):focus {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(100, 150, 200, 0.5);
}
div:where(.swal2-container) button:where(.swal2-close)::-moz-focus-inner {
  border: 0;
}
div:where(.swal2-container) .swal2-html-container {
  z-index: 1;
  justify-content: center;
  margin: 1em 1.6em 0.3em;
  padding: 0;
  overflow: auto;
  color: inherit;
  font-size: 1.125em;
  font-weight: normal;
  line-height: normal;
  text-align: center;
  word-wrap: break-word;
  word-break: break-word;
}
div:where(.swal2-container) input:where(.swal2-input),
div:where(.swal2-container) input:where(.swal2-file),
div:where(.swal2-container) textarea:where(.swal2-textarea),
div:where(.swal2-container) select:where(.swal2-select),
div:where(.swal2-container) div:where(.swal2-radio),
div:where(.swal2-container) label:where(.swal2-checkbox) {
  margin: 1em 2em 3px;
}
div:where(.swal2-container) input:where(.swal2-input),
div:where(.swal2-container) input:where(.swal2-file),
div:where(.swal2-container) textarea:where(.swal2-textarea) {
  box-sizing: border-box;
  width: auto;
  transition: border-color 0.1s, box-shadow 0.1s;
  border: 1px solid #d9d9d9;
  border-radius: 0.1875em;
  background: transparent;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px transparent;
  color: inherit;
  font-size: 1.125em;
}
div:where(.swal2-container) input:where(.swal2-input).swal2-inputerror,
div:where(.swal2-container) input:where(.swal2-file).swal2-inputerror,
div:where(.swal2-container) textarea:where(.swal2-textarea).swal2-inputerror {
  border-color: #f27474 !important;
  box-shadow: 0 0 2px #f27474 !important;
}
div:where(.swal2-container) input:where(.swal2-input):focus,
div:where(.swal2-container) input:where(.swal2-file):focus,
div:where(.swal2-container) textarea:where(.swal2-textarea):focus {
  border: 1px solid #b4dbed;
  outline: none;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(100, 150, 200, 0.5);
}
div:where(.swal2-container) input:where(.swal2-input)::placeholder,
div:where(.swal2-container) input:where(.swal2-file)::placeholder,
div:where(.swal2-container) textarea:where(.swal2-textarea)::placeholder {
  color: #ccc;
}
div:where(.swal2-container) .swal2-range {
  margin: 1em 2em 3px;
  background: #fff;
}
div:where(.swal2-container) .swal2-range input {
  width: 80%;
}
div:where(.swal2-container) .swal2-range output {
  width: 20%;
  color: inherit;
  font-weight: 600;
  text-align: center;
}
div:where(.swal2-container) .swal2-range input,
div:where(.swal2-container) .swal2-range output {
  height: 2.625em;
  padding: 0;
  font-size: 1.125em;
  line-height: 2.625em;
}
div:where(.swal2-container) .swal2-input {
  height: 2.625em;
  padding: 0 0.75em;
}
div:where(.swal2-container) .swal2-file {
  width: 75%;
  margin-right: auto;
  margin-left: auto;
  background: transparent;
  font-size: 1.125em;
}
div:where(.swal2-container) .swal2-textarea {
  height: 6.75em;
  padding: 0.75em;
}
div:where(.swal2-container) .swal2-select {
  min-width: 50%;
  max-width: 100%;
  padding: 0.375em 0.625em;
  background: transparent;
  color: inherit;
  font-size: 1.125em;
}
div:where(.swal2-container) .swal2-radio,
div:where(.swal2-container) .swal2-checkbox {
  align-items: center;
  justify-content: center;
  background: #fff;
  color: inherit;
}
div:where(.swal2-container) .swal2-radio label,
div:where(.swal2-container) .swal2-checkbox label {
  margin: 0 0.6em;
  font-size: 1.125em;
}
div:where(.swal2-container) .swal2-radio input,
div:where(.swal2-container) .swal2-checkbox input {
  flex-shrink: 0;
  margin: 0 0.4em;
}
div:where(.swal2-container) label:where(.swal2-input-label) {
  display: flex;
  justify-content: center;
  margin: 1em auto 0;
}
div:where(.swal2-container) div:where(.swal2-validation-message) {
  align-items: center;
  justify-content: center;
  margin: 1em 0 0;
  padding: 0.625em;
  overflow: hidden;
  background: #f0f0f0;
  color: #666666;
  font-size: 1em;
  font-weight: 300;
}
div:where(.swal2-container) div:where(.swal2-validation-message)::before {
  content: "!";
  display: inline-block;
  width: 1.5em;
  min-width: 1.5em;
  height: 1.5em;
  margin: 0 0.625em;
  border-radius: 50%;
  background-color: #f27474;
  color: #fff;
  font-weight: 600;
  line-height: 1.5em;
  text-align: center;
}
div:where(.swal2-container) .swal2-progress-steps {
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
  margin: 1.25em auto;
  padding: 0;
  background: transparent;
  font-weight: 600;
}
div:where(.swal2-container) .swal2-progress-steps li {
  display: inline-block;
  position: relative;
}
div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step {
  z-index: 20;
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  border-radius: 2em;
  background: #2778c4;
  color: #fff;
  line-height: 2em;
  text-align: center;
}
div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
  background: #2778c4;
}
div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step {
  background: #add8e6;
  color: #fff;
}
div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line {
  background: #add8e6;
}
div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step-line {
  z-index: 10;
  flex-shrink: 0;
  width: 2.5em;
  height: 0.4em;
  margin: 0 -1px;
  background: #2778c4;
}

div:where(.swal2-icon) {
  position: relative;
  box-sizing: content-box;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 2.5em auto 0.6em;
  border: 0.25em solid transparent;
  border-radius: 50%;
  border-color: #000;
  font-family: inherit;
  line-height: 5em;
  cursor: default;
  user-select: none;
}
div:where(.swal2-icon) .swal2-icon-content {
  display: flex;
  align-items: center;
  font-size: 3.75em;
}
div:where(.swal2-icon).swal2-error {
  border-color: #f27474;
  color: #f27474;
}
div:where(.swal2-icon).swal2-error .swal2-x-mark {
  position: relative;
  flex-grow: 1;
}
div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line] {
  display: block;
  position: absolute;
  top: 2.3125em;
  width: 2.9375em;
  height: 0.3125em;
  border-radius: 0.125em;
  background-color: #f27474;
}
div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=left] {
  left: 1.0625em;
  transform: rotate(45deg);
}
div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=right] {
  right: 1em;
  transform: rotate(-45deg);
}
div:where(.swal2-icon).swal2-error.swal2-icon-show {
  animation: swal2-animate-error-icon 0.5s;
}
div:where(.swal2-icon).swal2-error.swal2-icon-show .swal2-x-mark {
  animation: swal2-animate-error-x-mark 0.5s;
}
div:where(.swal2-icon).swal2-warning {
  border-color: #facea8;
  color: #f8bb86;
}
div:where(.swal2-icon).swal2-warning.swal2-icon-show {
  animation: swal2-animate-error-icon 0.5s;
}
div:where(.swal2-icon).swal2-warning.swal2-icon-show .swal2-icon-content {
  animation: swal2-animate-i-mark 0.5s;
}
div:where(.swal2-icon).swal2-info {
  border-color: #9de0f6;
  color: #3fc3ee;
}
div:where(.swal2-icon).swal2-info.swal2-icon-show {
  animation: swal2-animate-error-icon 0.5s;
}
div:where(.swal2-icon).swal2-info.swal2-icon-show .swal2-icon-content {
  animation: swal2-animate-i-mark 0.8s;
}
div:where(.swal2-icon).swal2-question {
  border-color: #c9dae1;
  color: #87adbd;
}
div:where(.swal2-icon).swal2-question.swal2-icon-show {
  animation: swal2-animate-error-icon 0.5s;
}
div:where(.swal2-icon).swal2-question.swal2-icon-show .swal2-icon-content {
  animation: swal2-animate-question-mark 0.8s;
}
div:where(.swal2-icon).swal2-success {
  border-color: #a5dc86;
  color: #a5dc86;
}
div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line] {
  position: absolute;
  width: 3.75em;
  height: 7.5em;
  border-radius: 50%;
}
div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=left] {
  top: -0.4375em;
  left: -2.0635em;
  transform: rotate(-45deg);
  transform-origin: 3.75em 3.75em;
  border-radius: 7.5em 0 0 7.5em;
}
div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=right] {
  top: -0.6875em;
  left: 1.875em;
  transform: rotate(-45deg);
  transform-origin: 0 3.75em;
  border-radius: 0 7.5em 7.5em 0;
}
div:where(.swal2-icon).swal2-success .swal2-success-ring {
  position: absolute;
  z-index: 2;
  top: -0.25em;
  left: -0.25em;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  border: 0.25em solid rgba(165, 220, 134, 0.3);
  border-radius: 50%;
}
div:where(.swal2-icon).swal2-success .swal2-success-fix {
  position: absolute;
  z-index: 1;
  top: 0.5em;
  left: 1.625em;
  width: 0.4375em;
  height: 5.625em;
  transform: rotate(-45deg);
}
div:where(.swal2-icon).swal2-success [class^=swal2-success-line] {
  display: block;
  position: absolute;
  z-index: 2;
  height: 0.3125em;
  border-radius: 0.125em;
  background-color: #a5dc86;
}
div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=tip] {
  top: 2.875em;
  left: 0.8125em;
  width: 1.5625em;
  transform: rotate(45deg);
}
div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=long] {
  top: 2.375em;
  right: 0.5em;
  width: 2.9375em;
  transform: rotate(-45deg);
}
div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-tip {
  animation: swal2-animate-success-line-tip 0.75s;
}
div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-long {
  animation: swal2-animate-success-line-long 0.75s;
}
div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-circular-line-right {
  animation: swal2-rotate-success-circular-line 4.25s ease-in;
}

[class^=swal2] {
  -webkit-tap-highlight-color: transparent;
}

.swal2-show {
  animation: swal2-show 0.3s;
}

.swal2-hide {
  animation: swal2-hide 0.15s forwards;
}

.swal2-noanimation {
  transition: none;
}

.swal2-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

.swal2-rtl .swal2-close {
  margin-right: initial;
  margin-left: 0;
}
.swal2-rtl .swal2-timer-progress-bar {
  right: 0;
  left: auto;
}

@keyframes swal2-toast-show {
  0% {
    transform: translateY(-0.625em) rotateZ(2deg);
  }
  33% {
    transform: translateY(0) rotateZ(-2deg);
  }
  66% {
    transform: translateY(0.3125em) rotateZ(2deg);
  }
  100% {
    transform: translateY(0) rotateZ(0deg);
  }
}
@keyframes swal2-toast-hide {
  100% {
    transform: rotateZ(1deg);
    opacity: 0;
  }
}
@keyframes swal2-toast-animate-success-line-tip {
  0% {
    top: 0.5625em;
    left: 0.0625em;
    width: 0;
  }
  54% {
    top: 0.125em;
    left: 0.125em;
    width: 0;
  }
  70% {
    top: 0.625em;
    left: -0.25em;
    width: 1.625em;
  }
  84% {
    top: 1.0625em;
    left: 0.75em;
    width: 0.5em;
  }
  100% {
    top: 1.125em;
    left: 0.1875em;
    width: 0.75em;
  }
}
@keyframes swal2-toast-animate-success-line-long {
  0% {
    top: 1.625em;
    right: 1.375em;
    width: 0;
  }
  65% {
    top: 1.25em;
    right: 0.9375em;
    width: 0;
  }
  84% {
    top: 0.9375em;
    right: 0;
    width: 1.125em;
  }
  100% {
    top: 0.9375em;
    right: 0.1875em;
    width: 1.375em;
  }
}
@keyframes swal2-show {
  0% {
    transform: scale(0.7);
  }
  45% {
    transform: scale(1.05);
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes swal2-hide {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}
@keyframes swal2-animate-success-line-tip {
  0% {
    top: 1.1875em;
    left: 0.0625em;
    width: 0;
  }
  54% {
    top: 1.0625em;
    left: 0.125em;
    width: 0;
  }
  70% {
    top: 2.1875em;
    left: -0.375em;
    width: 3.125em;
  }
  84% {
    top: 3em;
    left: 1.3125em;
    width: 1.0625em;
  }
  100% {
    top: 2.8125em;
    left: 0.8125em;
    width: 1.5625em;
  }
}
@keyframes swal2-animate-success-line-long {
  0% {
    top: 3.375em;
    right: 2.875em;
    width: 0;
  }
  65% {
    top: 3.375em;
    right: 2.875em;
    width: 0;
  }
  84% {
    top: 2.1875em;
    right: 0;
    width: 3.4375em;
  }
  100% {
    top: 2.375em;
    right: 0.5em;
    width: 2.9375em;
  }
}
@keyframes swal2-rotate-success-circular-line {
  0% {
    transform: rotate(-45deg);
  }
  5% {
    transform: rotate(-45deg);
  }
  12% {
    transform: rotate(-405deg);
  }
  100% {
    transform: rotate(-405deg);
  }
}
@keyframes swal2-animate-error-x-mark {
  0% {
    margin-top: 1.625em;
    transform: scale(0.4);
    opacity: 0;
  }
  50% {
    margin-top: 1.625em;
    transform: scale(0.4);
    opacity: 0;
  }
  80% {
    margin-top: -0.375em;
    transform: scale(1.15);
  }
  100% {
    margin-top: 0;
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes swal2-animate-error-icon {
  0% {
    transform: rotateX(100deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}
@keyframes swal2-rotate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes swal2-animate-question-mark {
  0% {
    transform: rotateY(-360deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes swal2-animate-i-mark {
  0% {
    transform: rotateZ(45deg);
    opacity: 0;
  }
  25% {
    transform: rotateZ(-25deg);
    opacity: 0.4;
  }
  50% {
    transform: rotateZ(15deg);
    opacity: 0.8;
  }
  75% {
    transform: rotateZ(-5deg);
    opacity: 1;
  }
  100% {
    transform: rotateX(0);
    opacity: 1;
  }
}
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
  overflow: hidden;
}
body.swal2-height-auto {
  height: auto !important;
}
body.swal2-no-backdrop .swal2-container {
  background-color: transparent !important;
  pointer-events: none;
}
body.swal2-no-backdrop .swal2-container .swal2-popup {
  pointer-events: all;
}
body.swal2-no-backdrop .swal2-container .swal2-modal {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
@media print {
  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow-y: scroll !important;
  }
  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) > [aria-hidden=true] {
    display: none;
  }
  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) .swal2-container {
    position: static !important;
  }
}
body.swal2-toast-shown .swal2-container {
  box-sizing: border-box;
  width: 360px;
  max-width: 100%;
  background-color: transparent;
  pointer-events: none;
}
body.swal2-toast-shown .swal2-container.swal2-top {
  inset: 0 auto auto 50%;
  transform: translateX(-50%);
}
body.swal2-toast-shown .swal2-container.swal2-top-end, body.swal2-toast-shown .swal2-container.swal2-top-right {
  inset: 0 0 auto auto;
}
body.swal2-toast-shown .swal2-container.swal2-top-start, body.swal2-toast-shown .swal2-container.swal2-top-left {
  inset: 0 auto auto 0;
}
body.swal2-toast-shown .swal2-container.swal2-center-start, body.swal2-toast-shown .swal2-container.swal2-center-left {
  inset: 50% auto auto 0;
  transform: translateY(-50%);
}
body.swal2-toast-shown .swal2-container.swal2-center {
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}
body.swal2-toast-shown .swal2-container.swal2-center-end, body.swal2-toast-shown .swal2-container.swal2-center-right {
  inset: 50% 0 auto auto;
  transform: translateY(-50%);
}
body.swal2-toast-shown .swal2-container.swal2-bottom-start, body.swal2-toast-shown .swal2-container.swal2-bottom-left {
  inset: auto auto 0 0;
}
body.swal2-toast-shown .swal2-container.swal2-bottom {
  inset: auto auto 0 50%;
  transform: translateX(-50%);
}
body.swal2-toast-shown .swal2-container.swal2-bottom-end, body.swal2-toast-shown .swal2-container.swal2-bottom-right {
  inset: auto 0 0 auto;
}

/*Unseen Column*/
@media only screen and (max-width: 800px) {
    #unseen table td:nth-child(2),
    #unseen table th:nth-child(2) {display: none;}
}

@media only screen and (max-width: 640px) {
    #unseen table td:nth-child(4),
    #unseen table th:nth-child(4),
    #unseen table td:nth-child(7),
    #unseen table th:nth-child(7),
    #unseen table td:nth-child(8),
    #unseen table th:nth-child(8){display: none;}
}

/*flip-scroll*/

@media only screen and (max-width: 800px) {
    #flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
    #flip-scroll * html .cf { zoom: 1; }
    #flip-scroll *:first-child+html .cf { zoom: 1; }
    #flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; }

    #flip-scroll th,
    #flip-scroll td { margin: 0; vertical-align: top; }
    #flip-scroll th { text-align: left; }
    #flip-scroll table { display: block; position: relative; width: 100%; }
    #flip-scroll thead { display: block; float: left; }
    #flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
    #flip-scroll thead tr { display: block; }
    #flip-scroll th { display: block; text-align: right; }
    #flip-scroll tbody tr { display: inline-block; vertical-align: top; }
    #flip-scroll td { display: block; min-height: 1.25em; text-align: left; }


    /* sort out borders */

    #flip-scroll th { border-bottom: 0; border-left: 0; }
    #flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }
    #flip-scroll tbody tr { border-left: 1px solid #babcbf; }
    #flip-scroll th:last-child,
    #flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }
}

/*no more table*/

@media only screen and (max-width: 800px) {
    /* Force table to not be like tables anymore */
    #no-more-tables table,
    #no-more-tables thead,
    #no-more-tables tbody,
    #no-more-tables th,
    #no-more-tables td,
    #no-more-tables tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-tables thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #no-more-tables tr { border: 1px solid #ccc; }

    #no-more-tables td {
        /* Behave like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align:left;
    }

    #no-more-tables td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }

    /*
    Label the data
    */
    #no-more-tables td:before { content: attr(data-title); }
}
/* the norm */
#gritter-notice-wrapper {
	position:fixed;
	top:20px;
	right:20px;
	width:301px;
	z-index:9999;
}
#gritter-notice-wrapper.top-left {
    left: 20px;
    right: auto;
}
#gritter-notice-wrapper.bottom-right {
    top: auto;
    left: auto;
    bottom: 20px;
    right: 20px;
}
#gritter-notice-wrapper.bottom-left {
    top: auto;
    right: auto;
    bottom: 20px;
    left: 20px;
}
.gritter-item-wrapper {
	position:relative;
	margin:0 0 10px 0;
	background:url('../lib/gritter/images/ie-spacer.gif?v=2DKlDlXjY5CYyRxkMV4q4uDwtFU'); /* ie7/8 fix */ 
}
.gritter-top {
	background:url(../lib/gritter/images/gritter.png?v=2DKlDlXjY5CYyRxkMV4q4uDwtFU) no-repeat left -30px;
	height:10px;
}
.hover .gritter-top {
	background-position:right -30px;
}
.gritter-bottom {
	background:url(../lib/gritter/images/gritter.png?v=2DKlDlXjY5CYyRxkMV4q4uDwtFU) no-repeat left bottom;
	height:8px;
	margin:0;
}
.hover .gritter-bottom {
	background-position: bottom right;
}
.gritter-item {
	display:block;
	background:url(../lib/gritter/images/gritter.png?v=2DKlDlXjY5CYyRxkMV4q4uDwtFU) no-repeat left -40px;
	color:#eee;
	padding:2px 11px 8px 11px;
	font-size: 11px;
	font-family:verdana;
}
.hover .gritter-item {
	background-position:right -40px;
}
.gritter-item p {
	padding:0;
	margin:0;
	word-wrap:break-word;
}
.gritter-close {
	display:none;
	position:absolute;
	top:5px;
	left:3px;
	background:url(../lib/gritter/images/gritter.png?v=2DKlDlXjY5CYyRxkMV4q4uDwtFU) no-repeat left top;
	cursor:pointer;
	width:30px;
	height:30px;
	text-indent:-9999em;
}
.gritter-title {
	font-size:14px;
	font-weight:bold;
	padding:0 0 7px 0;
	display:block;
	text-shadow:1px 1px 0 #000; /* Not supported by IE :( */
}
.gritter-image {
	width:48px;
	height:48px;
	float:left;
}
.gritter-with-image,
.gritter-without-image {
	padding:0;
}
.gritter-with-image {
	width:220px;
	float:right;
}
/* for the light (white) version of the gritter notice */
.gritter-light .gritter-item,
.gritter-light .gritter-bottom,
.gritter-light .gritter-top,
.gritter-light .gritter-close {
    background-image: url(../lib/gritter/images/gritter-light.png?v=2DKlDlXjY5CYyRxkMV4q4uDwtFU);
    color: #222;
}
.gritter-light .gritter-title {
    text-shadow: none;
}

@font-face {
	font-family: 'linecons';
	src:url('../lib/lineicons/fonts/linecons.eot?v=2DKlDlXjY5CYyRxkMV4q4uDwtFU');
}
@font-face {
	font-family: 'linecons';
	src: url(data:font/svg;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiID4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWV0YWRhdGE+ClRoaXMgaXMgYSBjdXN0b20gU1ZHIGZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uCjxpY29uc2V0IGlkPSJsaW5lY29ucyIgbmFtZT0ibGluZWNvbnMiIGhyZWY9Imh0dHA6Ly9kZXNpZ25tb2RvLmNvbS9saW5lY29ucyI+PC9pY29uc2V0PjxhdXRob3IgbmFtZT0iU2VyZ2V5IFNobWlkdCIgaHJlZj0iaHR0cDovL3NobWlkdC5pbiI+PC9hdXRob3I+PGxpY2Vuc2UgbmFtZT0iQ3JlYXRpdmUgQ29tbW9ucyBBdHRyaWJ1dGlvbi1TaGFyZUFsaWtlIDMuMCIgaHJlZj0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbGljZW5zZXMvYnktc2EvMy4wLyI+PC9saWNlbnNlPgo8L21ldGFkYXRhPgo8ZGVmcz4KPGZvbnQgaWQ9ImxpbmVjb25zIiBob3Jpei1hZHYteD0iNTEyIiA+Cjxmb250LWZhY2UgdW5pdHMtcGVyLWVtPSI1MTIiIGFzY2VudD0iNDgwIiBkZXNjZW50PSItMzIiIC8+CjxtaXNzaW5nLWdseXBoIGhvcml6LWFkdi14PSI1MTIiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDAwOyIgZD0iTSA0NjcuMDg4LDM5NS43NmMtNTguMDY0LDU3LjUzNi0xNTAuOTEyLDU4LjczNi0yMTEuMDU2LDQuNjA4CgkJQyAxOTUuODcyLDQ1NC40OTYsIDEwMy4wNTYsNDUzLjI5NiwgNDQuOTYsMzk1Ljc2Yy01OS44NTYtNTkuMjY0LTU5Ljg1Ni0xNTUuMzQ0LDAuMDAtMjE0LjY0YyAxNy4xMDQtMTYuOTQ0LCAxNzYuODQ4LTE3NS4wNTYsIDE3Ni44NDgtMTc1LjA1NgoJCWMgMTguOTI4LTE4Ljc1MiwgNDkuNTM2LTE4Ljc1MiwgNjguNDQ4LDAuMDBjMC4wMCwwLjAwLCAxNzQuOTEyLDE3My4xNTIsIDE3Ni44NDgsMTc1LjA1NkMgNTI2Ljk3NiwyNDAuNDE2LCA1MjYuOTc2LDMzNi40OTYsIDQ2Ny4wODgsMzk1Ljc2eiBNIDQ0NC4yODgsMjAzLjcxMgoJCUwgMjY3LjQ0LDI4LjY1NmMtNi4yODgtNi4yNTYtMTYuNTQ0LTYuMjU2LTIyLjgwLDAuMDBMIDY3Ljc5MiwyMDMuNzEyYy00Ny4yMCw0Ni43Mi00Ny4yMCwxMjIuNzM2LDAuMDAsMTY5LjQ1NgoJCWMgNDUuNTA0LDQ1LjA0LCAxMTguNjU2LDQ2LjYyNCwgMTY2LjU0NCwzLjU1MmwgMjEuNjk2LTE5LjUybCAyMS42OCwxOS41MmMgNDcuOTA0LDQzLjA3MiwgMTIxLjA1Niw0MS41MDQsIDE2Ni41Ni0zLjU1MgoJCUMgNDkxLjQ3MiwzMjYuNDY0LCA0OTEuNDcyLDI1MC40NDgsIDQ0NC4yODgsMjAzLjcxMnpNIDE0OC4wNDgsMzU5Ljk4NCBDIDE1Mi40OCwzNTkuOTg0IDE1Ni4wNDgsMzU2LjQwIDE1Ni4wNDgsMzUxLjk4NCBDIDE1Ni4wNDgsMzQ3LjU2OCAxNTIuNDY0LDM0My45ODQgMTQ4LjA0OCwzNDMuOTg0IEwgMTQ4LjAzMiwzNDMuOTg0IEMgMTE5LjMyOCwzNDMuOTg0IDk2LjA0OCwzMjAuNzA0IDk2LjA0OCwyOTIuMDAgTCA5Ni4wNDgsMjkxLjk4NCBDIDk2LjA0OCwyODcuNTY4IDkyLjQ2NCwyODMuOTg0IDg4LjA0OCwyODMuOTg0IEMgODMuNjMyLDI4My45ODQgODAuMDQ4LDI4Ny41NjggODAuMDQ4LDI5MS45ODQgTCA4MC4wNDgsMjkxLjk4NCBDIDgwLjA0OCwzMjkuNTIgMTEwLjQ2NCwzNTkuOTM2IDE0Ny45ODQsMzU5Ljk2OCBDIDE0OC4wMTYsMzU5Ljk2OCAxNDguMDE2LDM1OS45ODQgMTQ4LjA0OCwzNTkuOTg0IFoiIGRhdGEtdGFncz0iaGVhcnQiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDAxOyIgZD0iTSA0MTQuNjI0LDI2OS43MTJDIDQwNy42MzIsMzQyLjcyLCAzNDYuODQ4LDQwMC4wMCwgMjcyLjAwLDQwMC4wMAoJYy01Ny45MDQsMC4wMC0xMDcuNDcyLTM0LjM2OC0xMzAuMzM2LTgzLjY4QyAxMzQuNzg0LDMxOC40OTYsIDEyNy42MTYsMzIwLjAwLCAxMjAuMDE2LDMyMC4wMGMtMzkuNzYsMC4wMC03Mi4wMC0zMi4yNTYtNzIuMDAtNzIuMDBjMC4wMC03LjkwNCwgMS41ODQtMTUuMzc2LCAzLjkzNi0yMi40NjQKCWMtMzAuOTI4LTE4LjAzMi01MS45MzYtNTEuMTItNTEuOTM2LTg5LjUwNGMwLjAwLTU3LjQ0LCA0Ni41Ni0xMDQuMDAsIDEwNC4wMC0xMDQuMDBMIDEwNC4wMTYsMzIuMDAgTCAzOTIuMDAsMzIuMDAgbDAuMDAsMC4wMzIgYyA2Ni4yODgsMC4wMCwgMTIwLjAwLDUzLjcxMiwgMTIwLjAwLDEyMC4wMAoJQyA1MTIuMDAsMjEwLjUyOCwgNDcwLjA2NCwyNTkuMTIsIDQxNC42MjQsMjY5LjcxMnogTSAzOTIuMDAsNjQuMDMyTCAzOTIuMDAsNjQuMDAgTCAxMDQuMDE2LDY0LjAwIGMtMzkuNjk2LDAuMDMyLTcyLjAwLDMyLjMyLTcyLjAwLDcyLjAzMmMwLjAwLDI1LjYwLCAxMy40ODgsNDguNzIsIDM2LjA2NCw2MS44NzIKCWMgMjEuOTM2LDEyLjU5MiwgMjMuNDQsMTUuMDg4LCAxNC4yNCwzNy43MTJjLTEuNTUyLDQuNjU2LTIuMzA0LDguNzA0LTIuMzA0LDEyLjM2OGMwLjAwLDIyLjA2NCwgMTcuOTM2LDQwLjAwLCA0MC4wMCw0MC4wMGMwLjAwLDAuMDAsIDEwLjQ5NiwwLjc1MiwgMjEuNjQ4LTMuNjgKCWMgMTguMzUyLTcuMzEyLCAyMC4zNTItMC4zMiwgMjkuMDI0LDE4LjU0NEMgMTg5LjA0LDM0Mi40MTYsIDIyOC44MCwzNjguMDAsIDI3Mi4wMCwzNjguMDBjIDU3LjYwLDAuMDAsIDEwNS4yMTYtNDMuNTY4LCAxMTAuNzg0LTEwMS4zNDRjIDEuOTY4LTIyLjkxMiwgMS45NjgtMjIuOTEyLCAyNS44NC0yOC4zNjgKCUMgNDUwLjAwLDIzMC4zODQsIDQ4MC4wMCwxOTQuMDk2LCA0ODAuMDAsMTUyLjAzMkMgNDgwLjAwLDEwMy41MDQsIDQ0MC41MjgsNjQuMDMyLCAzOTIuMDAsNjQuMDMyeiIgZGF0YS10YWdzPSJjbG91ZCIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGUwMDI7IiBkPSJNIDUxMC4wOTYsMjc5LjA4OGMtNC40MzIsMTIuNzg0LTE1LjgwOCwyMi4xNDQtMjkuNTA0LDI0LjE3NmwtMTMzLjIxNiwxOS44MDhsLTU3LjkwNCwxMjAuMjI0CglDIDI4My4zNzYsNDU1LjkyLCAyNzAuMzM2LDQ2NC4wMCwgMjU2LjAwLDQ2NC4wMGMtMTQuMzM2LDAuMDAtMjcuMzc2LTguMDgtMzMuNDcyLTIwLjcwNGwtNTcuOTA0LTEyMC4yMjRsLTEzMy4yMzItMTkuODA4Yy0xMy42OC0yLjAzMi0yNS4wNTYtMTEuMzkyLTI5LjQ3Mi0yNC4xNzYKCWMtNC40MC0xMi44MTYtMS4wNzItMjYuOTI4LCA4LjU5Mi0zNi41NmwgOTcuNjMyLTk3LjQ3MmwtMjIuNjQtMTM1LjIxNkMgODMuMjAtMy43NzYsIDg5LjEwNC0xNy40NCwgMTAwLjY3Mi0yNS40MDgKCUMgMTA3LjAyNC0yOS43NzYsIDExNC40OTYtMzIuMDAsIDEyMS45NjgtMzIuMDBjIDYuMTQ0LDAuMDAsIDEyLjMwNCwxLjUwNCwgMTcuODg4LDQuNDk2TCAyNTYuMDAsMzUuMDI0bCAxMTYuMTYtNjIuNTI4QyAzNzcuNzQ0LTMwLjQ5NiwgMzgzLjkwNC0zMi4wMCwgMzkwLjAzMi0zMi4wMAoJYyA3LjQ3MiwwLjAwLCAxNC45NDQsMi4yMjQsIDIxLjMxMiw2LjU5MmMgMTEuNTY4LDcuOTY4LCAxNy40NCwyMS42MzIsIDE1LjE1MiwzNS4yNDhsLTIyLjY1NiwxMzUuMjE2bCA5Ny42NjQsOTcuNDcyCglDIDUxMS4xNTIsMjUyLjE3NiwgNTE0LjQ2NCwyNjYuMjg4LCA1MTAuMDk2LDI3OS4wODh6IE0gMzc3LjQwOCwxNzAuMTkyYy04LjE5Mi04LjE2LTExLjkwNC0xOS42NjQtMTAuMDMyLTMwLjk0NGwgMjIuNjU2LTEzNS4yMTZsLTExNi4xNiw2Mi40OTYKCWMtNS41NjgsMy4wMDgtMTEuNzEyLDQuNDk2LTE3Ljg4OCw0LjQ5NmMtNi4xNDQsMC4wMC0xMi4zMDQtMS41MDQtMTcuODcyLTQuNDk2bC0xMTYuMTYtNjIuNDk2bCAyMi42NTYsMTM1LjIxNgoJYyAxLjg4OCwxMS4yOC0xLjgyNCwyMi43ODQtMTAuMDE2LDMwLjk0NGwtOTcuNjMyLDk3LjQ3MmwgMTMzLjIxNiwxOS44NGMgMTIuMTc2LDEuODA4LCAyMi42NTYsOS40MjQsIDI3Ljg4OCwyMC4yODhMIDI1Ni4wMCw0MjcuOTg0bCA1Ny45Mi0xMjAuMjA4CgljIDUuMjQ4LTEwLjg2NCwgMTUuNzEyLTE4LjQ2NCwgMjcuODcyLTIwLjI4OGwgMTMzLjI0OC0xOS44NEwgMzc3LjQwOCwxNzAuMTkyeiIgZGF0YS10YWdzPSJzdGFyIiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAwMzsiIGQ9Ik0gMzU0LjcyLDM0Mi4wMTZjLTQzLjMxMiw4LjkxMi04Ny4yOCwxMy40MjQtMTMwLjY0LDEzLjQyNGMtNDMuMzYsMC4wMC04Ny4zMTItNC41MTItMTMwLjY0LTEzLjQyNAoJCUMgODcuODQsMzQwLjg2NCwgODMuMjY0LDMzNi44MCwgODEuNDU2LDMzMS4zNDRjLTIzLjA3Mi03MC4wOTYtMjMuMDcyLTE0MS4xNjgsMC4wMC0yMTEuMjY0YyAxLjc5Mi01LjQ0LCA2LjM2OC05LjUwNCwgMTEuOTg0LTEwLjY1NgoJCUMgMTM2Ljc2OCwxMDAuNTI4LCAxODAuNzIsOTYuMDAsIDIyNC4wOCw5Ni4wMGMgNDMuMzQ0LDAuMDAsIDg3LjMyOCw0LjUyOCwgMTMwLjY0LDEzLjQ0YyA1LjYzMiwxLjE1MiwgMTAuMTkyLDUuMjE2LCAxMi4wMCwxMC42NTYKCQljIDIzLjA1Niw3MC4wOTYsIDIzLjA1NiwxNDEuMTY4LDAuMDAsMjExLjI2NEMgMzY0LjkxMiwzMzYuODAsIDM2MC4zMzYsMzQwLjg2NCwgMzU0LjcyLDM0Mi4wMTZ6IE0gMzUxLjUwNCwxMjUuMDg4Yy04NC45NDQtMTcuNDQtMTY5LjkwNC0xNy40NC0yNTQuODMyLDAuMDAKCQljLTIyLjA5Niw2Ny4wODgtMjIuMDk2LDEzNC4xNiwwLjAwLDIwMS4yNjRjIDg0Ljk0NCwxNy40NTYsIDE2OS45MDQsMTcuNDU2LCAyNTQuODMyLDAuMDBDIDM3My42MCwyNTkuMjY0LCAzNzMuNjAsMTkyLjE5MiwgMzUxLjUwNCwxMjUuMDg4ek0gNDkzLjY2NCwzNzguODhjLTMuMDg4LDEzLjAyNC0xNC4wMCwyMi43NTItMjcuMjgsMjQuMzUyQyAzOTYuNjI0LDQxMS43MTIsIDMyNS44NzIsNDE2LjAwLCAyNTYuMDgsNDE2LjAwCgkJQyAxODYuMzA0LDQxNi4wMCwgMTE1LjU1Miw0MTEuNzEyLCA0NS43OTIsNDAzLjI0OEMgMzIuNTEyLDQwMS42MzIsIDIxLjYxNiwzOTEuOTIsIDE4LjUyOCwzNzguODhjLTI0LjQ2NC0xMDIuNzY4LTI0LjQ2NC0yMDYuOTc2LDAuMDAtMzA5Ljc2CgkJYyAzLjA4OC0xMy4wMjQsIDEzLjk4NC0yMi43NTIsIDI3LjI2NC0yNC4zMzZjIDMzLjYxNi00LjA5NiwgNjcuNDU2LTcuMDg4LCAxMDEuMjk2LTkuMjE2QyAxNDUuMjY0LDM0LjQwLCAxNDQuMDgsMzMuMjE2LCAxNDQuMDgsMzIuMDBjMC4wMC04Ljg0OCwgNTAuMTQ0LTE2LjAwLCAxMTIuMDAtMTYuMDAKCQljIDYxLjg1NiwwLjAwLCAxMTIuMDAsNy4xNTIsIDExMi4wMCwxNi4wMGMwLjAwLDEuMjE2LTEuMTg0LDIuNDAtMy4wMDgsMy41NjhjIDMzLjg0LDIuMTI4LCA2Ny42OCw1LjEyLCAxMDEuMjgsOS4yMTZjIDEzLjI4LDEuNjAsIDI0LjE5MiwxMS4zMTIsIDI3LjI4LDI0LjMzNgoJCUMgNTE4LjEyOCwxNzEuOTA0LCA1MTguMTI4LDI3Ni4xMTIsIDQ5My42NjQsMzc4Ljg4eiBNIDQ2Mi41MjgsNzYuNTI4Yy0xMzcuNjMyLTE2LjY4OC0yNzUuMjY0LTE2LjY4OC00MTIuODgsMC4wMGMtMjMuNDA4LDk4LjMyLTIzLjQwOCwxOTYuNjQsMC4wMCwyOTQuOTQ0CgkJYyAxMzcuNjMyLDE2LjcwNCwgMjc1LjI2NCwxNi43MDQsIDQxMi44OCwwLjAwQyA0ODUuOTM2LDI3My4xNjgsIDQ4NS45MzYsMTc0Ljg0OCwgNDYyLjUyOCw3Ni41Mjh6TSA0MjQuMDk2LDI4OC4wMGMgMTMuMjQ4LDAuMDAsIDI0LjAwLDEwLjc1MiwgMjQuMDAsMjQuMDBTIDQzNy4zNDQsMzM2LjAwLCA0MjQuMDk2LDMzNi4wMHMtMjQuMDAtMTAuNzUyLTI0LjAwLTI0LjAwUyA0MTAuODQ4LDI4OC4wMCwgNDI0LjA5NiwyODguMDB6CgkJIE0gNDI0LjA5NiwzMjAuMDBjIDQuNDAsMC4wMCwgOC4wMC0zLjYwLCA4LjAwLTguMDBzLTMuNjAtOC4wMC04LjAwLTguMDBzLTguMDAsMy42MC04LjAwLDguMDBTIDQxOS42OCwzMjAuMDAsIDQyNC4wOTYsMzIwLjAwek0gNDQwLjA5NiwxMjguMDAgQyA0NDQuNDk2LDEyOC4wMCA0NDguMDk2LDEyNC40MzIgNDQ4LjA5NiwxMjAuMDAgQyA0NDguMDk2LDExNS42MCA0NDQuNDk2LDExMi4wMCA0NDAuMDk2LDExMi4wMCBMIDM5Mi4wOTYsMTEyLjAwIEMgMzg3LjY2NCwxMTIuMDAgMzg0LjA5NiwxMTUuNjAgMzg0LjA5NiwxMjAuMDAgQyAzODQuMDk2LDEyNC40MzIgMzg3LjY2NCwxMjguMDAgMzkyLjA5NiwxMjguMDAgTCA0NDAuMDk2LDEyOC4wMCBaTSA0NTYuMDk2LDE3Ni4wMCBDIDQ2MC40OTYsMTc2LjAwIDQ2NC4wOTYsMTcyLjQzMiA0NjQuMDk2LDE2OC4wMCBDIDQ2NC4wOTYsMTYzLjYwIDQ2MC40OTYsMTYwLjAwIDQ1Ni4wOTYsMTYwLjAwIEwgNDA4LjA5NiwxNjAuMDAgQyA0MDMuNjY0LDE2MC4wMCA0MDAuMDk2LDE2My42MCA0MDAuMDk2LDE2OC4wMCBDIDQwMC4wOTYsMTcyLjQzMiA0MDMuNjY0LDE3Ni4wMCA0MDguMDk2LDE3Ni4wMCBMIDQ1Ni4wOTYsMTc2LjAwIFpNIDQ1Ni4wOTYsMjI0LjAwIEMgNDYwLjQ5NiwyMjQuMDAgNDY0LjA5NiwyMjAuNDE2IDQ2NC4wOTYsMjE2LjAwIEMgNDY0LjA5NiwyMTEuNTg0IDQ2MC40OTYsMjA4LjAwIDQ1Ni4wOTYsMjA4LjAwIEwgNDA4LjA5NiwyMDguMDAgQyA0MDMuNjY0LDIwOC4wMCA0MDAuMDk2LDIxMS41ODQgNDAwLjA5NiwyMTYuMDAgQyA0MDAuMDk2LDIyMC40MTYgNDAzLjY2NCwyMjQuMDAgNDA4LjA5NiwyMjQuMDAgTCA0NTYuMDk2LDIyNC4wMCBaTSAyMTYuMDgsMjkxLjEzNiBDIDIyMC40OTYsMjkxLjMxMiAyMjQuMDgsMjg3Ljg3MiAyMjQuMDgsMjgzLjQ1NiBDIDIyNC4wOCwyNzkuMDQgMjIwLjQ4LDI3NS4zMjggMjE2LjA4LDI3NS4xNjggTCAxNTYuMDk2LDI3MS4wNTYgQyAxNTEuNzI4LDI3MC42MDggMTQ3LjY2NCwyNjYuNjcyIDE0Ny4wNzIsMjYyLjMyIEwgMTQ0LjQwLDIzMi4wMCBDIDE0NC4yMjQsMjI3LjYwIDE0MC40OCwyMjQuMDAgMTM2LjExMiwyMjQuMDAgQyAxMzEuNzI4LDIyNC4wMCAxMjguMzIsMjI3LjYwIDEyOC41NDQsMjMyLjAwIEwgMTMzLjQyNCwyNzYuNTc2IEMgMTM0LjE2LDI4MC45MjggMTM4LjMzNiwyODQuODk2IDE0Mi43MDQsMjg1LjM5MiBMIDIxNi4wOCwyOTEuMTM2IFoiIGRhdGEtdGFncz0idHYiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDA0OyIgZD0iTSA0MzEuOTY4LDI1NS45NTIgQyA0MzEuOTY4LDMzNS4zNDQgMzY3LjM3NiwzOTkuOTUyIDI4Ny45NjgsMzk5LjkzNiBMIDI4Ny45NjgsNDAwLjAwIEMgMjgzLjU2OCw0MDAuMDE2IDI4MC4wMCw0MDMuNjAgMjgwLjAwLDQwOC4wMCBDIDI4MC4wMCw0MTIuNDE2IDI4My41NjgsNDE2LjAwIDI4OC4wMCw0MTYuMDAgQyAyODguMTYsNDE2LjAwIDI4OC4yODgsNDE1LjkzNiAyODguNDAsNDE1LjkwNCBDIDM3Ni41MjgsNDE1LjY5NiA0NDcuODcyLDM0NC4yNzIgNDQ3Ljk2OCwyNTYuMTI4IEMgNDQ3Ljk2OCwyNTYuMDggNDQ4LjAwLDI1Ni4wNDggNDQ4LjAwLDI1Ni4wMCBDIDQ0OC4wMCwyNTEuNTg0IDQ0NC40MCwyNDguMDE2IDQ0MC4wMCwyNDguMDE2IEMgNDM1LjYwLDI0OC4wMTYgNDMyLjAzMiwyNTEuNTY4IDQzMi4wMCwyNTUuOTUyIEwgNDMxLjk2OCwyNTUuOTUyIFpNIDE0NS45MzYsNDY1Ljk1MkMgMTM2Ljc2OCw0NzUuMTM2LCAxMjQuNDgsNDgwLjAwLCAxMTEuOTg0LDQ4MC4wMEMgMTA1LjgwOCw0ODAuMDAsIDk5LjU4NCw0NzguODE2LCA5My42NDgsNDc2LjM1MkMgNzUuNjk2LDQ2OC45MjgsIDY0LjAwLDQ1MS40MjQsIDY0LjAwLDQzMi4wMAoJCUwgNjMuOTg0LDIxMS44ODhsLTQ5LjkyLTQ5Ljk1MmMtMTguNzUyLTE4LjcyLTE4Ljc1Mi00OS4xMiwwLjAwLTY3Ljg3MmwgMTEyLjAwLTExMi4wMEMgMTM1LjQ0LTI3LjMxMiwgMTQ3LjcxMi0zMi4wMCwgMTYwLjAwLTMyLjAwcyAyNC41Niw0LjY4OCwgMzMuOTM2LDE0LjA2NEwgMjQzLjg3MiwzMi4wMAoJCWwgMjIwLjA5NiwwLjAwIGMgMTkuNDQsMC4wMCwgMzYuOTQ0LDExLjY4LCA0NC4zMzYsMjkuNjMyYyA3LjQ0LDE3LjkzNiwgMy4zNDQsMzguNTkyLTEwLjQwLDUyLjMyTCAxNDUuOTM2LDQ2NS45NTJ6IE0gMjIxLjI0OCw1NC42MjRsLTQ5LjkzNi00OS45MzYKCQlDIDE2Ny4yMzIsMC42MjQsIDE2Mi40NjQsMC4wMCwgMTYwLjAwLDAuMDBzLTcuMjMyLDAuNjI0LTExLjMxMiw0LjY4OGwtMTEyLjAwLDExMi4wMEMgMzIuNjA4LDEyMC43ODQsIDMyLjAwLDEyNS41MzYsIDMyLjAwLDEyOC4wMHMgMC42MDgsNy4yNDgsIDQuNjg4LDExLjMxMmwgNDkuOTIsNDkuOTM2CgkJYyAwLjE0NCwwLjE2LCAwLjE5MiwwLjMzNiwgMC4zMzYsMC40OTZsIDEzNC44MC0xMzQuODE2QyAyMjEuNjAsNTQuODE2LCAyMjEuMzkyLDU0Ljc4NCwgMjIxLjI0OCw1NC42MjR6IE0gMjQzLjg3Miw2NC4wMAoJCWMtMi40OCwwLjAwLTQuNzg0LTAuODgtNy4xNTItMS40MDhMIDk0LjU2LDIwNC43NTJjIDAuNTQ0LDIuMzY4LCAxLjQyNCw0LjY3MiwgMS40MjQsNy4xMzZMIDk2LjAwLDQwNC42MjRMIDQzNi41OTIsNjQuMDBMIDI0My44NzIsNjQuMDAgeiBNIDQ3OC43NTIsNzMuODcyCgkJQyA0NzYuMjg4LDY3Ljg3MiwgNDcwLjQ2NCw2NC4wMCwgNDYzLjk2OCw2NC4wMGwtNC43NTIsMC4wMCBMIDk2LjAwLDQyNy4yNDhMIDk2LjAwLDQzMi4wMCBjMC4wMCw2LjQ5NiwgMy44NzIsMTIuMzA0LCA5Ljg3MiwxNC43ODRDIDEwNy44NCw0NDcuNjAsIDEwOS44ODgsNDQ4LjAwLCAxMTEuOTg0LDQ0OC4wMAoJCWMgNC4yODgsMC4wMCwgOC4zMDQtMS42NjQsIDExLjMxMi00LjY3MmwgMzUxLjk4NC0zNTIuMDE2QyA0NzkuODcyLDg2LjcyLCA0ODEuMjQ4LDc5Ljg3MiwgNDc4Ljc1Miw3My44NzJ6TSAyODcuOTY4LDQ0OC4wMCBDIDI3OS4xNTIsNDQ4LjAxNiAyNzIuMDAsNDU1LjE4NCAyNzIuMDAsNDY0LjAwIEMgMjcyLjAwLDQ3Mi44NDggMjc5LjE1Miw0ODAuMDAgMjg4LjAwLDQ4MC4wMCBDIDI4OC4xNiw0ODAuMDAgMjg4LjI4OCw0NzkuOTM2IDI4OC40MCw0NzkuOTIgQyA0MTEuODcyLDQ3OS42OTYgNTExLjg3MiwzNzkuNjE2IDUxMS45NjgsMjU2LjEyOCBDIDUxMS45NjgsMjU2LjA4IDUxMi4wMCwyNTYuMDQ4IDUxMi4wMCwyNTYuMDAgQyA1MTIuMDAsMjQ3LjE1MiA1MDQuODQ4LDI0MC4wMCA0OTYuMDAsMjQwLjAwIEMgNDg3LjE4NCwyNDAuMDAgNDgwLjAzMiwyNDcuMTM2IDQ4MC4wMCwyNTUuOTM2IEwgNDc5Ljk2OCwyNTUuOTM2IEMgNDc5Ljk2OCwzNjEuODA4IDM5My44NCw0NDcuOTM2IDI4Ny45NjgsNDQ3LjkzNiBMIDI4Ny45NjgsNDQ4LjAwIFoiIGRhdGEtdGFncz0ic291bmQiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDA1OyIgZD0iTSA0ODAuMDAsMzg0LjAwbC0xNC4xOTIsMC4wMCBjLTguNDAsMC4wMC0xNi40NjQtMy4zMTItMjIuNDY0LTkuMjE2TCA0MDAuMDAsMzMyLjAzMkwgNDAwLjAwLDM1Mi4wMCBjMC4wMCwyNi41MTItMjEuNTA0LDQ4LjAwLTQ4LjAwLDQ4LjAwTCA0OC4wMCw0MDAuMDAgCglDIDIxLjUzNiw0MDAuMDAsMC4wMCwzNzguNDgsMC4wMCwzNTIuMDBsMC4wMC0xMTEuNTUyIEwwLjAwLDk2LjAwIGMwLjAwLTI2LjQ5NiwgMjEuNDg4LTQ4LjAwLCA0OC4wMC00OC4wMGwgMzA0LjAwLDAuMDAgYyAyNi40OTYsMC4wMCwgNDguMDAsMjEuNTA0LCA0OC4wMCw0OC4wMGwwLjAwLDE5LjUzNiBsIDQzLjM0NC00Mi43NTJjIDYuMDAtNS45MDQsIDE0LjA2NC05LjIxNiwgMjIuNDY0LTkuMjE2CglMIDQ4MC4wMCw2My41NjggYyAxNy42NjQsMC4wMCwgMzIuMDAsMTQuMzIsIDMyLjAwLDMyLjAwTCA1MTIuMDAsMzUyLjAwIEMgNTEyLjAwLDM2OS42OCwgNDk3LjY2NCwzODQuMDAsIDQ4MC4wMCwzODQuMDB6IE0gNDguMDAsODAuMDBjLTguODMyLDAuMDAtMTYuMDAsNy4xODQtMTYuMDAsMTYuMDBMIDMyLjAwLDM1Mi4wMCBjMC4wMCw4Ljg0OCwgNy4xNTIsMTYuMDAsIDE2LjAwLDE2LjAwbCAzMDQuMDAsMC4wMCBjIDguODE2LDAuMDAsIDE2LjAwLTcuMTY4LCAxNi4wMC0xNi4wMGwwLjAwLTI1Ni4wMCAKCWMwLjAwLTguODE2LTcuMTg0LTE2LjAwLTE2LjAwLTE2LjAwTCA0OC4wMCw4MC4wMCB6IE0gNDgwLjAwLDk1LjU2OGwtMTQuMTkyLDAuMDAgTCA0NjQuMDAsOTUuNTY4IGwtNjQuMDAsNjQuMDBMIDQwMC4wMCwxNjAuMDAgbC0xNi4wMCwxNi4wMGwwLjAwLDk2LjAwIGwgODAuMDAsODAuMDBsIDEuODA4LDAuMDAgTCA0ODAuMDAsMzUyLjAwIEwgNDgwLjAwLDk1LjU2OCB6IiBkYXRhLXRhZ3M9InZpZGVvIiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAwNjsiIGQ9Ik0gNDc5LjY4LDM3MC44OTZjLTEuNTM2LDI1LjEyLTIyLjE5Miw0NS4wNTYtNDcuNjgsNDUuMDU2bC00OC4wMCwwLjAwIGwwLjAwLDE2LjAwIEwgMzg0LjAwLDQzMS45ODQgCgkJYzAuMDAsMjYuNTEyLTIxLjUwNCw0OC4wMC00OC4wMCw0OC4wMEwgMTc2LjAwLDQ3OS45ODQgYy0yNi41MTIsMC4wMC00OC4wMC0yMS40ODgtNDguMDAtNDguMDBsMC4wMC0wLjAxNiBsMC4wMC0xNi4wMCBMIDgwLjAwLDQxNS45NjggYy0yNS41MiwwLjAwLTQ2LjE2LTE5LjkzNi00Ny42OTYtNDUuMDU2TCAzMi4wMCwzNzAuOTEyIGwwLjAwLTE4LjkyOCBsMC4wMC0xNi4wMCBjMC4wMC0xNy42NjQsIDE0LjMzNi0zMi4wMCwgMzIuMDAtMzIuMDBsMC4wMCwwLjAwbDAuMDAtMjcyLjAwIAoJCWMwLjAwLTM1LjM0NCwgMjguNjU2LTY0LjAwLCA2NC4wMC02NC4wMGwgMjU2LjAwLDAuMDAgYyAzNS4zNDQsMC4wMCwgNjQuMDAsMjguNjU2LCA2NC4wMCw2NC4wMGwwLjAwLDI3Mi4wMCBsMC4wMCwwLjAwYyAxNy42NjQsMC4wMCwgMzIuMDAsMTQuMzM2LCAzMi4wMCwzMi4wMGwwLjAwLDE2LjAwIEwgNDgwLjAwLDM3MC44OTYgTCA0NzkuNjgsMzcwLjg5NiB6IE0gMTYwLjAwLDQzMS45NjhjMC4wMCw4Ljg0OCwgNy4xNTIsMTYuMDAsIDE2LjAwLDE2LjAwbCAxNjAuMDAsMC4wMCAKCQljIDguODQ4LDAuMDAsIDE2LjAwLTcuMTUyLCAxNi4wMC0xNi4wMGwwLjAwLTE2LjAwIEwgMTYwLjAwLDQxNS45NjggTCAxNjAuMDAsNDMxLjk2OCB6IE0gNDE2LjAwLDMxLjk2OGMwLjAwLTE3LjYzMi0xNC4zNjgtMzIuMDAtMzIuMDAtMzIuMDBMIDEyOC4wMC0wLjAzMiBjLTE3LjY0OCwwLjAwLTMyLjAwLDE0LjM2OC0zMi4wMCwzMi4wMGwwLjAwLDI3Mi4wMCBsIDMyMC4wMCwwLjAwIEwgNDE2LjAwLDMxLjk2OCB6IE0gNDQ4LjAwLDM1MS45ODRsMC4wMC0xNi4wMCBMIDY0LjAwLDMzNS45ODQgbDAuMDAsMTYuMDAgTCA2NC4wMCwzNjcuOTY4IAoJCWMwLjAwLDguODQ4LCA3LjE1MiwxNi4wMCwgMTYuMDAsMTYuMDBsIDM1Mi4wMCwwLjAwIGMgOC44NDgsMC4wMCwgMTYuMDAtNy4xNTIsIDE2LjAwLTE2LjAwTCA0NDguMDAsMzUxLjk4NCB6TSAxNDQuMDAsMzEuOTA0bCAzMi4wMCwwLjAwIGMgOC44NDgsMC4wMCwgMTYuMDAsNy4xNTIsIDE2LjAwLDE2LjAwbDAuMDAsMjA4LjAwIGMwLjAwLDguODQ4LTcuMTUyLDE2LjAwLTE2LjAwLDE2LjAwTCAxNDQuMDAsMjcxLjkwNCAKCQljLTguODQ4LDAuMDAtMTYuMDAtNy4xNTItMTYuMDAtMTYuMDBsMC4wMC0yMDguMDAgQyAxMjguMDAsMzkuMDU2LCAxMzUuMTUyLDMxLjkwNCwgMTQ0LjAwLDMxLjkwNHogTSAxNDQuMDAsMjU1LjkybCAzMi4wMCwwLjAwIGwwLjAwLTIwOC4wMCBMIDE0NC4wMCw0Ny45MiBMIDE0NC4wMCwyNTUuOTIgek0gMjQwLjAwLDMxLjkwNGwgMzIuMDAsMC4wMCBjIDguODQ4LDAuMDAsIDE2LjAwLDcuMTUyLCAxNi4wMCwxNi4wMGwwLjAwLDIwOC4wMCBjMC4wMCw4Ljg0OC03LjE1MiwxNi4wMC0xNi4wMCwxNi4wMGwtMzIuMDAsMC4wMCAKCQljLTguODQ4LDAuMDAtMTYuMDAtNy4xNTItMTYuMDAtMTYuMDBsMC4wMC0yMDguMDAgQyAyMjQuMDAsMzkuMDU2LCAyMzEuMTUyLDMxLjkwNCwgMjQwLjAwLDMxLjkwNHogTSAyNDAuMDAsMjU1LjkybCAzMi4wMCwwLjAwIGwwLjAwLTIwOC4wMCBsLTMyLjAwLDAuMDAgTCAyNDAuMDAsMjU1LjkyIHpNIDMzNi4wMCwzMS45MDRsIDMyLjAwLDAuMDAgYyA4Ljg0OCwwLjAwLCAxNi4wMCw3LjE1MiwgMTYuMDAsMTYuMDBsMC4wMCwyMDguMDAgYzAuMDAsOC44NDgtNy4xNTIsMTYuMDAtMTYuMDAsMTYuMDBsLTMyLjAwLDAuMDAgCgkJYy04Ljg0OCwwLjAwLTE2LjAwLTcuMTUyLTE2LjAwLTE2LjAwbDAuMDAtMjA4LjAwIEMgMzIwLjAwLDM5LjA1NiwgMzI3LjE1MiwzMS45MDQsIDMzNi4wMCwzMS45MDR6IE0gMzM2LjAwLDI1NS45MmwgMzIuMDAsMC4wMCBsMC4wMC0yMDguMDAgbC0zMi4wMCwwLjAwIEwgMzM2LjAwLDI1NS45MiB6IiBkYXRhLXRhZ3M9InRyYXNoIiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAwNzsiIGQ9Ik0gNDk3Ljc2LDI2LjYyNGMtMy4yMTYsMi4xMjgtNjEuNTY4LDQwLjQwLTE0OC4zNjgsNTkuMTg0YyAzMS44NCw0MC4zMzYsIDUyLjI4OCw5NC41OTIsIDYwLjk3NiwxMzAuNzA0CgljIDEyLjA2NCw1MC4wNDgsIDcuMzc2LDE0Ny45NjgtNDAuNjg4LDIwOC45OTJDIDM0MS41ODQsNDYxLjE2OCwgMzAyLjI3Miw0ODAuMDAsIDI1Ni4wMCw0ODAuMDBjLTQ2LjI3MiwwLjAwLTg1LjU4NC0xOC44NDgtMTEzLjY2NC01NC40OTYKCUMgOTQuMjcyLDM2NC40OTYsIDg5LjYwLDI2Ni41NzYsIDEwMS42NDgsMjE2LjUyOGMgOC42ODgtMzYuMTEyLCAyOS4xMi05MC4zNjgsIDYwLjk3Ni0xMzAuNzA0Yy04Ni44MC0xOC43ODQtMTQ1LjE1Mi01Ny4wNTYtMTQ4LjM1Mi01OS4xODQKCWMtMTEuNzI4LTcuODA4LTE2Ljk3Ni0yMi40MC0xMi44OC0zNS44NzJDIDUuNDU2LTIyLjc1MiwgMTcuOTItMzIuMDAsIDMyLjAwLTMyLjAwbCA0NDguMDAsMC4wMCBjIDE0LjA5NiwwLjAwLCAyNi41MjgsOS4yNDgsIDMwLjYyNCwyMi43NTIKCUMgNTE0LjczNiw0LjIyNCwgNTA5LjQ4OCwxOC44MTYsIDQ5Ny43NiwyNi42MjR6IE0gMzI0LjI3MiwxMDUuNjMybC01LjIxNi02LjYyNGMtMzguMTYtNDMuODQtODcuOTItNDMuODQtMTI2LjA2NCwwLjAwbC01LjIzMiw2LjYyNAoJYy00NC41Niw1Ni40NjQtNjYuNjcyLDEzMS4xNTItNTcuMTUyLDIwMi40MEMgMTM5LjMyOCwzNzYuNDk2LCAxNzguNTYsNDQ4LjAwLCAyNTYuMDAsNDQ4LjAwYyA3Ny40NCwwLjAwLCAxMTYuNjg4LTcxLjUyLCAxMjUuNDA4LTEzOS45ODQKCUMgMzkwLjg5NiwyMzYuNzM2LCAzNjguODY0LDE2Mi4xMjgsIDMyNC4yNzIsMTA1LjYzMnogTSAzMi4wMCwwLjAwYyAyLjIwOCwxLjQ3MiwgNTYuNDE2LDM3LjAyNCwgMTM3LjM3Niw1NC41MjhsIDM5Ljc0NCw4LjU5MkMgMjIzLjMxMiw1My44MDgsIDIzOC44OCw0OC4wMCwgMjU2LjAwLDQ4LjAwCgljIDE3LjEzNiwwLjAwLCAzMi42ODgsNS44MDgsIDQ2Ljg4LDE1LjEybCAzOS43NDQtOC41OTJjIDgwLjMyLTE3LjM3NiwgMTM0LjMzNi01Mi41MjgsIDEzNy4zNzYtNTQuNTI4TCAzMi4wMCwwLjAwIHoiIGRhdGEtdGFncz0idXNlciIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGUwMDg7IiBkPSJNIDM1Mi4wNjQsNDgwLjAwYy04OC4zNjgsMC4wMC0xNjAuMDAtNzEuNjQ4LTE2MC4wMC0xNjAuMDBjMC4wMC0yMC41NiwgNC4zMDQtNDAuMDE2LCAxMS40MDgtNTguMDY0TCA5LjA4OCw2Ny41NjgKCQlDIDMuNDcyLDYxLjkzNiwgMC4wMCw1Ni41OTIsIDAuMDAsNDguMDBsMC4wMC00OC4wMCBjMC4wMC0xNy4xMiwgMTQuODY0LTMyLjAwLCAzMi4wMC0zMi4wMGwgNDguMDAsMC4wMCBjIDguNTc2LDAuMDAsIDE0LjAwLDMuNDQsIDE5LjYxNiw5LjAyNEwgMTIyLjU3NiwwLjAwbCAzNy40ODgsMC4wMCBjIDE3LjY2NCwwLjAwLCAzMi4wMCwxNC4zMzYsIDMyLjAwLDMyLjAwbDAuMDAsMzIuMDAgbCAzMi4wMCwwLjAwIAoJCWMgMTcuNjY0LDAuMDAsIDMyLjAwLDE0LjMzNiwgMzIuMDAsMzIuMDBsMC4wMCwzNy41MDQgbCAzNy45MDQsMzcuOTM2QyAzMTIuMDMyLDE2NC4zMiwgMzMxLjQ3MiwxNjAuMDAsIDM1Mi4wNjQsMTYwLjAwYyA4OC4zMzYsMC4wMCwgMTYwLjAwLDcxLjY0OCwgMTYwLjAwLDE2MC4wMFMgNDQwLjQwLDQ4MC4wMCwgMzUyLjA2NCw0ODAuMDB6IE0gMzUyLjA2NCwxOTIuMDAKCQljLTIzLjY4LDAuMDAtNDUuNjMyLDYuODgtNjQuNjU2LDE4LjExMmwtNS41MDQtNS40ODhsLTE4LjAwLTE4LjAwbC0zMC40OC0zMC40OTZjLTYuMDAtNi4wMC05LjM3Ni0xNC4xMjgtOS4zNzYtMjIuNjI0TCAyMjQuMDQ4LDk2LjAwIGwtMzIuMDAsMC4wMCAKCQljLTE3LjY2NCwwLjAwLTMyLjAwLTE0LjMyLTMyLjAwLTMyLjAwbDAuMDAtMzIuMDAgTCAxMjIuNTc2LDMyLjAwIGMtOC40OCwwLjAwLTE2LjYyNC0zLjM3Ni0yMi42MjQtOS4zNzZsLTIyLjY4OC0yMi42ODhMIDMyLjA0OCwwLjAwTCAzMi4wMCw0NS42MGwgMTg2LjY0LDE4Ni4zMDQKCQljMC4wMCwwLjAwLDAuMDAtMC4wMTYsIDAuMDE2LTAuMDMybCAyMy41MDQsMjMuNTA0Yy0xMS4yMzIsMTkuMDI0LTE4LjExMiw0MC45Ni0xOC4xMTIsNjQuNjRjMC4wMCw3MC42ODgsIDU3LjMyOCwxMjguMDAsIDEyOC4wMCwxMjguMDBzIDEyOC4wMC01Ny4zMTIsIDEyOC4wMC0xMjguMDBTIDQyMi43NTIsMTkyLjAwLCAzNTIuMDY0LDE5Mi4wMHpNIDQ0NS4xMiwzNDguMTc2Yy0xNy45MzYsMjQuOTkyLTM5Ljc3Niw0Ni44MC02NC44OCw2NC44NjRDIDM3Ni4xNiw0MTYuMDAsIDM3MC44OCw0MTYuNzM2LCAzNjYuMTI4LDQxNS4wNzIKCQljLTIyLjIyNC03LjgyNC0zNy40NC0yMy4wMjQtNDUuMjE2LTQ1LjI0OGMtMC41OTItMS42NjQtMC44OC0zLjM5Mi0wLjg4LTUuMTA0YzAuMDAtMy4xODQsIDAuOTkyLTYuMzM2LCAyLjkxMi05LjAwOAoJCWMgMTguMDAtMjUuMDI0LCAzOS44MDgtNDYuODQ4LCA2NC44NDgtNjQuODQ4YyA0LjA5Ni0yLjk0NCwgOS4zNDQtMy42OTYsIDE0LjA5Ni0yLjA0OGMgMjIuMjU2LDcuNzc2LCAzNy40NzIsMjMuMDA4LCA0NS4yOCw0NS4yNDgKCQljIDAuNTkyLDEuNjY0LCAwLjg4LDMuMzkyLCAwLjg4LDUuMTA0QyA0NDguMDMyLDM0Mi4zNTIsIDQ0Ny4wMjQsMzQ1LjUwNCwgNDQ1LjEyLDM0OC4xNzZ6IE0gMzk3LjEyLDMwMy44NEMgMzczLjQ3MiwzMjAuODQ4LCAzNTIuODgsMzQxLjQ0LCAzMzYuMDAsMzY0LjUyOAoJCWMgNi4xOTIsMTcuNjQ4LCAxNy43NzYsMjkuMjMyLCAzNC45MTIsMzUuNTM2YyAyMy42NjQtMTcuMDQsIDQ0LjIyNC0zNy41ODQsIDYxLjA1Ni02MC45NzZDIDQyNS43MTIsMzIxLjU2OCwgNDE0LjE2LDMxMC4wNDgsIDM5Ny4xMiwzMDMuODR6IiBkYXRhLXRhZ3M9ImtleSIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGUwMDk7IiBkPSJNIDMyMC4wMCw0NzkuOTJjLTEwNi4wMzIsMC4wMC0xOTIuMDAtODUuOTY4LTE5Mi4wMC0xOTIuMDBjMC4wMC0zMi40MTYsIDguMTEyLTYyLjkyOCwgMjIuMzItODkuNzI4bC0xMzMuNTA0LTEzMy40NzJsIDAuMTEyLTAuMDk2CgkJQyA2LjQ5Niw1NC4zNjgsMC4wMCw0MC4xNiwwLjAwLDI0LjM2OGMwLjAwLTMxLjE4NCwgMjUuMjgtNTYuNDY0LCA1Ni40NjQtNTYuNDY0YyAxNS43NiwwLjAwLCAyOS45ODQsNi40OTYsIDQwLjI0LDE2Ljk0NGwtMC4wMzIsMC4wMzJsIDEzMy40NTYsMTMzLjQ0CgkJYyAyNi44MTYtMTQuMjU2LCA1Ny4zNzYtMjIuNDAsIDg5Ljg3Mi0yMi40MGMgMTA2LjAzMiwwLjAwLCAxOTIuMDAsODUuOTY4LCAxOTIuMDAsMTkyLjAwQyA1MTIuMDAsMzkzLjk1MiwgNDI2LjAzMiw0NzkuOTIsIDMyMC4wMCw0NzkuOTJ6IE0gNzYuNzIsNC44NDgKCQljLTUuMTUyLTUuMzQ0LTEyLjI4OC04LjY4OC0yMC4yNTYtOC42ODhjLTE1LjYwLDAuMDAtMjguMjQsMTIuNjI0LTI4LjI0LDI4LjIyNGMwLjAwLDcuOTY4LCAzLjM2LDE1LjA4OCwgOC42ODgsMjAuMjU2bC0wLjE0NCwwLjEyOGwgMTI5LjA1NiwxMjkuMDU2CgkJYyAxMS4yOC0xNS4yMTYsIDI0LjcyLTI4LjY1NiwgMzkuOTA0LTM5Ljk2OEwgNzYuNzIsNC44NDh6IE0gMzIwLjAwLDEyNy45MDRjLTg4LjM1MiwwLjAwLTE2MC4wMCw3MS42NjQtMTYwLjAwLDE2MC4wMGMwLjAwLDg4LjM1MiwgNzEuNjQ4LDE2MC4wMCwgMTYwLjAwLDE2MC4wMAoJCWMgODguMzM2LDAuMDAsIDE2MC4wMC03MS42NDgsIDE2MC4wMC0xNjAuMDBDIDQ4MC4wMCwxOTkuNTY4LCA0MDguMzM2LDEyNy45MDQsIDMyMC4wMCwxMjcuOTA0ek0gMzIwLjAwLDM5OS45MiBDIDMyNC40MCwzOTkuOTIgMzI4LjAwLDM5Ni4zMzYgMzI4LjAwLDM5MS45MiBDIDMyOC4wMCwzODcuNTA0IDMyNC40MCwzODMuOTIgMzIwLjAwLDM4My45MiBDIDI2Ni45NzYsMzgzLjkyIDIyNC4wMCwzNDAuOTI4IDIyNC4wMCwyODcuOTIgQyAyMjQuMDAsMjgzLjUwNCAyMjAuNDE2LDI3OS45MiAyMTYuMDAsMjc5LjkyIEMgMjExLjU4NCwyNzkuOTIgMjA4LjAwLDI4My41MDQgMjA4LjAwLDI4Ny45MiBDIDIwOC4wMCwzNDkuNzc2IDI1OC4xMjgsMzk5LjkyIDMyMC4wMCwzOTkuOTIgWiIgZGF0YS10YWdzPSJzZWFyY2giIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDBhOyIgZD0iTSA0ODYuMjU2LDI3Ny4xMmwtNDkuMDI0LDkuODI0Yy0yLjQ2NCw3LjA4OC01LjM3NiwxMy45NjgtOC41OTIsMjAuNjI0bCAyNy43NzYsNDEuNjY0CgkJYyA4LjQ2NCwxMi42ODgsIDYuNzg0LDI5LjYwLTQuMDAsNDAuMzY4bC0zMC43ODQsMzAuNzg0Yy02LjE5Miw2LjE5Mi0xNC4zNjgsOS4zNzYtMjIuNjU2LDkuMzc2Yy02LjEyOCwwLjAwLTEyLjMyLTEuNzYtMTcuNzEyLTUuMzc2CgkJbC00MS42NjQtMjcuNzZjLTYuNjg4LDMuMjMyLTEzLjU2OCw2LjExMi0yMC42NTYsOC41NzZMIDMwOS4xMiw0NTQuMjRjLTIuOTc2LDE0Ljk3Ni0xNi4xMjgsMjUuNzI4LTMxLjM3NiwyNS43MjhsLTQzLjUyLDAuMDAgCgkJYy0xNS4yNDgsMC4wMC0yOC4zODQtMTAuNzY4LTMxLjM3Ni0yNS43MjhsLTkuODI0LTQ5LjA0Yy03LjA4OC0yLjQ2NC0xMy45NjgtNS4zNi0yMC42MjQtOC41NzZMIDEzMC43NTIsNDI0LjM4NAoJCUMgMTI1LjMyOCw0MjguMDAsIDExOS4xNTIsNDI5Ljc2LCAxMTMuMDA4LDQyOS43NmMtOC4yNzIsMC4wMC0xNi40NDgtMy4xODQtMjIuNjQtOS4zNzZMIDU5LjYwLDM4OS42MGMtMTAuNzg0LTEwLjc4NC0xMi40NjQtMjcuNjgtNC4wMC00MC4zNjhsIDI3Ljc2LTQxLjY2NAoJCWMtMy4yMzItNi42NzItNi4xMTItMTMuNTUyLTguNTc2LTIwLjY0TCAyNS43MjgsMjc3LjEyQyAxMC43NjgsMjc0LjEyOCwwLjAwLDI2MC45OTIsMC4wMCwyNDUuNzQ0bDAuMDAtNDMuNTIgYzAuMDAtMTUuMjQ4LCAxMC43NjgtMjguNDAsIDI1LjcyOC0zMS4zNzYKCQlsIDQ5LjA0LTkuODRjIDIuNDY0LTcuMDg4LCA1LjM2LTEzLjk2OCwgOC41NzYtMjAuNjI0TCA1NS42MCw5OC43MmMtOC40NjQtMTIuNjg4LTYuNzg0LTI5LjYwLCA0LjAwLTQwLjM2OGwgMzAuNzg0LTMwLjc4NAoJCWMgNi4xOTItNi4xOTIsIDE0LjM2OC05LjM3NiwgMjIuNjQtOS4zNzZjIDYuMTQ0LDAuMDAsIDEyLjMzNiwxLjc3NiwgMTcuNzI4LDUuMzc2bCA0MS42NjQsMjcuNzc2YyA2LjY3Mi0zLjI0OCwgMTMuNTUyLTYuMTI4LCAyMC42NC04LjU5MgoJCWwgOS44MDgtNDkuMDI0YyAyLjk5Mi0xNC45NzYsIDE2LjEyOC0yNS43NDQsIDMxLjM3Ni0yNS43NDRsIDQzLjUyLDAuMDAgYyAxNS4yNDgsMC4wMCwgMjguNDAsMTAuNzg0LCAzMS4zNzYsMjUuNzQ0bCA5Ljg0LDQ5LjAyNAoJCWMgNy4wODgsMi40NjQsIDEzLjk2OCw1LjM3NiwgMjAuNjI0LDguNTkybCA0MS42NjQtMjcuNzc2YyA1LjQwOC0zLjYwLCAxMS42MC01LjM3NiwgMTcuNzEyLTUuMzc2YyA4LjI4OCwwLjAwLCAxNi40NjQsMy4xODQsIDIyLjY1Niw5LjM3NgoJCWwgMzAuNzg0LDMwLjc4NGMgMTAuNzg0LDEwLjc4NCwgMTIuNDY0LDI3LjY4LCA0LjAwLDQwLjM2OGwtMjcuNzc2LDQxLjY2NGMgMy4yNDgsNi42ODgsIDYuMTI4LDEzLjU2OCwgOC41OTIsMjAuNjU2bCA0OS4wMjQsOS44MDgKCQlDIDUwMS4yMTYsMTczLjgwOCwgNTEyLjAwLDE4Ni45NzYsIDUxMi4wMCwyMDIuMjI0bDAuMDAsNDMuNTIgQyA1MTIuMDAsMjYwLjk5MiwgNTAxLjIxNiwyNzQuMTI4LCA0ODYuMjU2LDI3Ny4xMnogTSA0MzAuOTQ0LDE5Mi40MAoJCWMtMTEuMTItMi4yMjQtMjAuMjI0LTEwLjE2LTIzLjkzNi0yMC44OGMtMi4wNjQtNS45MDQtNC40NjQtMTEuNjMyLTcuMTUyLTE3LjE4NGMtNC45NzYtMTAuMjI0LTQuMTI4LTIyLjI4OCwgMi4xNi0zMS43MTJsIDI3Ljc3Ni00MS42NjQKCQlsLTMwLjc4NC0zMC43ODRsLTQxLjY2NCwyNy43NzZjLTUuMzQ0LDMuNTY4LTExLjUzNiw1LjM3Ni0xNy43NDQsNS4zNzZjLTQuNzUyLDAuMDAtOS41MzYtMS4wNTYtMTMuOTM2LTMuMTg0CgkJYy01LjU2OC0yLjY4OC0xMS4yOC01LjEyLTE3LjIxNi03LjE4NGMtMTAuNjg4LTMuNzEyLTE4LjYyNC0xMi44MTYtMjAuODQ4LTIzLjkzNmwtOS44NC00OS4wNTZsLTQzLjUyLDAuMDAgbC05LjgwOCw0OS4wNTYKCQljLTIuMjI0LDExLjEyLTEwLjE2LDIwLjIyNC0yMC44NjQsMjMuOTM2Yy01LjkwNCwyLjA2NC0xMS42NDgsNC40NjQtMTcuMjAsNy4xNTJjLTQuNDE2LDIuMTYtOS4xODQsMy4yMTYtMTMuOTUyLDMuMjE2CgkJYy02LjIyNCwwLjAwLTEyLjQwLTEuODA4LTE3Ljc0NC01LjM3NmwtNDEuNjY0LTI3Ljc3NmwtMzAuNzg0LDMwLjc4NGwgMjcuNzYsNDEuNjY0YyA2LjI4OCw5LjQ0LCA3LjEwNCwyMS41MDQsIDIuMTkyLDMxLjY4CgkJYy0yLjY4OCw1LjU2OC01LjEwNCwxMS4yOC03LjE2OCwxNy4yMTZjLTMuNzEyLDEwLjY4OC0xMi44MzIsMTguNjI0LTIzLjkzNiwyMC44NDhsLTQ5LjA0LDkuODRMIDMyLjAwLDI0NS43NDRsIDQ5LjA1Niw5LjgwOAoJCWMgMTEuMTA0LDIuMjI0LCAyMC4yMjQsMTAuMTYsIDIzLjkzNiwyMC44NjRjIDIuMDY0LDUuOTA0LCA0LjQ0OCwxMS42NDgsIDcuMTUyLDE3LjIwYyA0Ljk2LDEwLjIwOCwgNC4xMjgsMjIuMjcyLTIuMTc2LDMxLjY5NkwgODIuMjI0LDM2Ni45NzYKCQlMIDExMi45OTIsMzk3Ljc2bCA0MS42NjQtMjcuNzZDIDE2MC4wMCwzNjYuNDMyLCAxNjYuMTkyLDM2NC42MjQsIDE3Mi40MCwzNjQuNjI0YyA0Ljc1MiwwLjAwLCA5LjUyLDEuMDU2LCAxMy45MzYsMy4xODRjIDUuNTUyLDIuNjg4LCAxMS4yOCw1LjEwNCwgMTcuMjAsNy4xNjgKCQljIDEwLjcwNCwzLjcxMiwgMTguNjQsMTIuODMyLCAyMC44NjQsMjMuOTM2bCA5LjgyNCw0OS4wNGwgNDMuNTIsMC4wMTZsIDkuODA4LTQ5LjA1NmMgMi4yMjQtMTEuMTA0LCAxMC4xNi0yMC4yMjQsIDIwLjg4LTIzLjkzNgoJCWMgNS45MDQtMi4wNjQsIDExLjYzMi00LjQ0OCwgMTcuMTg0LTcuMTUyYyA0LjQzMi0yLjE0NCwgOS4xODQtMy4yMCwgMTMuOTY4LTMuMjBjIDYuMjI0LDAuMDAsIDEyLjQwLDEuODA4LCAxNy43NDQsNS4zNzZsIDQxLjY2NCwyNy43NmwgMzAuNzg0LTMwLjc4NAoJCWwtMjcuNzc2LTQxLjY2NGMtNi4yODgtOS40NC03LjA4OC0yMS40ODgtMi4xOTItMzEuNjhjIDIuNjg4LTUuNTUyLCA1LjEyLTExLjI4LCA3LjE4NC0xNy4yMGMgMy43MTItMTAuNzA0LCAxMi44MTYtMTguNjQsIDIzLjkzNi0yMC44NjQKCQlsIDQ5LjAyNC05LjgyNEwgNDgwLjAwLDIwMi4yMjRMIDQzMC45NDQsMTkyLjQwek0gMjU2LjAwLDMzNS45ODRjLTYxLjg0LDAuMDAtMTEyLjAwLTUwLjE2LTExMi4wMC0xMTIuMDBjMC4wMC02MS44NTYsIDUwLjE2LTExMi4wMCwgMTEyLjAwLTExMi4wMHMgMTEyLjAwLDUwLjE2LCAxMTIuMDAsMTEyLjAwQyAzNjguMDAsMjg1LjgyNCwgMzE3Ljg0LDMzNS45ODQsIDI1Ni4wMCwzMzUuOTg0egoJCSBNIDI1Ni4wMCwxMjUuOTY4Yy01NC4xMTIsMC4wMC05OC4wMCw0My45MDQtOTguMDAsOTguMDBjMC4wMCw1NC4xMTIsIDQzLjg4OCw5OC4wMCwgOTguMDAsOTguMDBjIDU0LjA5NiwwLjAwLCA5OC4wMC00My44ODgsIDk4LjAwLTk4LjAwCgkJQyAzNTQuMDAsMTY5Ljg3MiwgMzEwLjA5NiwxMjUuOTY4LCAyNTYuMDAsMTI1Ljk2OHpNIDI1Ni4wMCwyODcuOTg0Yy0zNS4zNiwwLjAwLTY0LjAwLTI4LjY0LTY0LjAwLTY0LjAwYzAuMDAtMzUuMzQ0LCAyOC42NC02NC4wMCwgNjQuMDAtNjQuMDBjIDM1LjM0NCwwLjAwLCA2NC4wMCwyOC42NTYsIDY0LjAwLDY0LjAwQyAzMjAuMDAsMjU5LjMyOCwgMjkxLjM0NCwyODcuOTg0LCAyNTYuMDAsMjg3Ljk4NHoKCQkgTSAyNTYuMDAsMTc1Ljk2OGMtMjYuNDk2LDAuMDAtNDguMDAsMjEuNTA0LTQ4LjAwLDQ4LjAwYzAuMDAsMjYuNDk2LCAyMS41MDQsNDguMDAsIDQ4LjAwLDQ4LjAwcyA0OC4wMC0yMS41MDQsIDQ4LjAwLTQ4LjAwQyAzMDQuMDAsMTk3LjQ3MiwgMjgyLjQ5NiwxNzUuOTY4LCAyNTYuMDAsMTc1Ljk2OHoiIGRhdGEtdGFncz0ic2V0dGluZ3MiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDBiOyIgZD0iTSAyNTYuMDAsMzE5Ljk4NGMtNzAuNzA0LDAuMDAtMTI4LjAwLTU3LjI5Ni0xMjguMDAtMTI4LjAwYzAuMDAtNzAuNjg4LCA1Ny4yOTYtMTI4LjAwLCAxMjguMDAtMTI4LjAwCgkJYyA3MC42ODgsMC4wMCwgMTI4LjAwLDU3LjMxMiwgMTI4LjAwLDEyOC4wMEMgMzg0LjAwLDI2Mi42NzIsIDMyNi42ODgsMzE5Ljk4NCwgMjU2LjAwLDMxOS45ODR6IE0gMzI4Ljg4LDEyOS41MDRjLTM0LjQ5Ni00MC4yNTYtOTUuMDg4LTQ0LjkxMi0xMzUuMzQ0LTEwLjQwCgkJYy00MC4yNzIsMzQuNDk2LTQ0LjkxMiw5NS4xMDQtMTAuNDAsMTM1LjM0NGMgMzQuNDgsNDAuMjcyLCA5NS4wODgsNDQuOTEyLCAxMzUuMzQ0LDEwLjQwQyAzNTguNzIsMjMwLjM2OCwgMzYzLjM3NiwxNjkuNzQ0LCAzMjguODgsMTI5LjUwNHpNIDI1Ni4wMCwyNTUuOTg0IEMgMjYwLjQxNiwyNTUuOTg0IDI2NC4wMCwyNTIuNDAgMjY0LjAwLDI0Ny45ODQgQyAyNjQuMDAsMjQzLjU2OCAyNjAuNDE2LDIzOS45ODQgMjU2LjAwLDIzOS45ODQgQyAyMjkuNDg4LDIzOS45ODQgMjA4LjAxNiwyMTguNDk2IDIwOC4wMCwxOTIuMDAgTCAyMDguMDAsMTkxLjk2OCBDIDIwOC4wMCwxODcuNTY4IDIwNC40MTYsMTgzLjk2OCAyMDAuMDAsMTgzLjk2OCBDIDE5NS41ODQsMTgzLjk2OCAxOTIuMDAsMTg3LjU2OCAxOTIuMDAsMTkxLjk2OCBMIDE5Mi4wMCwxOTIuMDAgQyAxOTIuMDE2LDIyNy4zMjggMjIwLjY1NiwyNTUuOTg0IDI1Ni4wMCwyNTUuOTg0IFpNIDQ3MS44NzIsMzM1LjMyOGwtNjkuMzQ0LDExLjU2OGwtMjEuOTY4LDU0Ljk0NAoJCUMgMzczLjIxNiw0MjAuMTYsIDM1NS43MTIsNDMyLjAwLCAzMzYuMDAsNDMyLjAwTCAxNzYuMDAsNDMyLjAwIEMgMTU2LjI4OCw0MzIuMDAsIDEzOC43ODQsNDIwLjE2LCAxMzEuNDI0LDQwMS44MjRMIDEwOS40NzIsMzQ2Ljg5NkwgNDAuMTQ0LDMzNS4zMjhDIDE2Ljg4LDMzMS40NzIsMC4wMCwzMTEuNTY4LDAuMDAsMjg4LjAwbDAuMDAtMjQwLjAwIAoJCWMwLjAwLTI2LjQ2NCwgMjEuNTM2LTQ4LjAwLCA0OC4wMC00OC4wMGwgNDE2LjAwLDAuMDAgYyAyNi40NjQsMC4wMCwgNDguMDAsMjEuNTM2LCA0OC4wMCw0OC4wMEwgNTEyLjAwLDI4OC4wMCBDIDUxMi4wMCwzMTEuNTY4LCA0OTUuMTIsMzMxLjQ3MiwgNDcxLjg3MiwzMzUuMzI4eiBNIDQ4MC4wMCw0OC4wMGMwLjAwLTguODQ4LTcuMTUyLTE2LjAwLTE2LjAwLTE2LjAwTCA0OC4wMCwzMi4wMCAKCQljLTguODQ4LDAuMDAtMTYuMDAsNy4xNTItMTYuMDAsMTYuMDBMIDMyLjAwLDI4OC4wMCBjMC4wMCw3LjgyNCwgNS42NjQsMTQuNDk2LCAxMy4zNzYsMTUuNzc2bCA4Ny4xMDQsMTQuNTEybCAyOC42NTYsNzEuNjQ4QyAxNjMuNTg0LDM5Ni4wMCwgMTY5LjQ1Niw0MDAuMDAsIDE3Ni4wMCw0MDAuMDBsIDE2MC4wMCwwLjAwIAoJCWMgNi41MjgsMC4wMCwgMTIuNDAtMy45ODQsIDE0Ljg0OC0xMC4wNjRsIDI4LjY1Ni03MS42NDhsIDg3LjEyLTE0LjUxMkMgNDc0LjMzNiwzMDIuNDk2LCA0ODAuMDAsMjk1LjgyNCwgNDgwLjAwLDI4OC4wMEwgNDgwLjAwLDQ4LjAwIHoiIGRhdGEtdGFncz0iY2FtZXJhIiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAwYzsiIGQ9Ik0gNTAyLjI1NiwyNTcuODcybC04MC4wMCwxMjguMDBjLTExLjY4LDE4LjcwNC0zMi4xOTIsMzAuMDgtNTQuMjU2LDMwLjA4TCA2NC4wMCw0MTUuOTUyIAoJCWMtMzUuMzQ0LDAuMDAtNjQuMDAtMjguNjU2LTY0LjAwLTY0LjAwbDAuMDAtMjU2LjAwIGMwLjAwLTM1LjM0NCwgMjguNjU2LTY0LjAwLCA2NC4wMC02NC4wMGwgMzA0LjAwLDAuMDAgYyAyMi4wNjQsMC4wMCwgNDIuNTYsMTEuMzc2LCA1NC4yNTYsMzAuMDk2bCA4MC4wMCwxMjguMDBDIDUxNS4yNDgsMjEwLjc2OCwgNTE1LjI0OCwyMzcuMTIsIDUwMi4yNTYsMjU3Ljg3MnoKCQkgTSA0NzUuMTIsMjA3LjAwOGwtODAuMDAtMTI4LjAzMmMtNS44NzItOS40MDgtMTYuMDMyLTE1LjAyNC0yNy4xMi0xNS4wMjRMIDY0LjAwLDYzLjk1MiBjLTE3LjY0OCwwLjAwLTMyLjAwLDE0LjM2OC0zMi4wMCwzMi4wMGwwLjAwLDI1Ni4wMCBjMC4wMCwxNy42NDgsIDE0LjM1MiwzMi4wMCwgMzIuMDAsMzIuMDBsIDMwNC4wMCwwLjAwIAoJCWMgMTEuMDg4LDAuMDAsIDIxLjI0OC01LjYzMiwgMjcuMTItMTUuMDI0bCA4MC4wMC0xMjguMDBDIDQ4MS41NjgsMjMwLjYwOCwgNDgxLjU2OCwyMTcuMjk2LCA0NzUuMTIsMjA3LjAwOHpNIDM2OC4wMCwyNzEuOTUyYy0yNi41MjgsMC4wMC00OC4wMC0yMS40ODgtNDguMDAtNDguMDBjMC4wMC0yNi41MTIsIDIxLjQ3Mi00OC4wMCwgNDguMDAtNDguMDAKCQljIDI2LjQ5NiwwLjAwLCA0OC4wMCwyMS41MDQsIDQ4LjAwLDQ4LjAwQyA0MTYuMDAsMjUwLjQ2NCwgMzk0LjQ5NiwyNzEuOTUyLCAzNjguMDAsMjcxLjk1MnogTSAzNjguMDAsMTkxLjkzNmMtMTcuNjgsMC4wMC0zMi4wMCwxNC4zMzYtMzIuMDAsMzIuMDBjMC4wMCwxNy42NjQsIDE0LjMyLDMyLjAwLCAzMi4wMCwzMi4wMAoJCWMgMTcuNjY0LDAuMDAsIDMyLjAwLTE0LjMzNiwgMzIuMDAtMzIuMDBDIDQwMC4wMCwyMDYuMjg4LCAzODUuNjY0LDE5MS45MzYsIDM2OC4wMCwxOTEuOTM2eiIgZGF0YS10YWdzPSJ0YWciIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDBkOyIgZD0iTSA0MDAuMDAsMjcyLjAwTCA0MDAuMDAsMzM2LjAwIGMwLjAwLDc5LjUzNi02NC40NjQsMTQ0LjAwLTE0NC4wMCwxNDQuMDBjLTc5LjUzNiwwLjAwLTE0NC4wMC02NC40NjQtMTQ0LjAwLTE0NC4wMGwwLjAwLTY0LjAwIGMtMjYuNTEyLDAuMDAtNDguMDAtMjEuNDg4LTQ4LjAwLTQ4LjAwbDAuMDAtNDguMDAgbDAuMDAtMTYuMDAgbDAuMDAtMzIuMDAgbDAuMDAtMTYuMDAgYzAuMDAtNzkuNTM2LCA2NC40NjQtMTQ0LjAwLCAxNDQuMDAtMTQ0LjAwbCA5Ni4wMCwwLjAwIAoJCWMgNzkuNTM2LDAuMDAsIDE0NC4wMCw2NC40NjQsIDE0NC4wMCwxNDQuMDBsMC4wMCwxNi4wMCBsMC4wMCwzMi4wMCBsMC4wMCwxNi4wMCBsMC4wMCw0OC4wMCBDIDQ0OC4wMCwyNTAuNTI4LCA0MjYuNDk2LDI3Mi4wMCwgNDAwLjAwLDI3Mi4wMHogTSAxNDQuMDAsMzM2LjAwYzAuMDAsNjEuODU2LCA1MC4xNDQsMTEyLjAwLCAxMTIuMDAsMTEyLjAwYyA2MS44NTYsMC4wMCwgMTEyLjAwLTUwLjE0NCwgMTEyLjAwLTExMi4wMGwwLjAwLTY0LjAwIGwtMzIuMDAsMC4wMCBMIDMzNi4wMCwzMzUuOTY4IAoJCWMwLjAwLDQ0LjE5Mi0zNS44MDgsODAuMDAtODAuMDAsODAuMDBjLTQ0LjE5MiwwLjAwLTgwLjAwLTM1LjgwOC04MC4wMC04MC4wMEwgMTc2LjAwLDI3Mi4wMCBMIDE0NC4wMCwyNzIuMDAgTCAxNDQuMDAsMzM2LjAwIHogTSAzMjAuMDAsMzM2LjAwbDAuMDAtMC4wNDggTCAzMjAuMDAsMjcyLjAwIGwtMTI4LjAwLDAuMDAgTCAxOTIuMDAsMzM1Ljk2OCBMIDE5Mi4wMCwzMzYuMDAgYzAuMDAsMzUuMzQ0LCAyOC42NTYsNjQuMDAsIDY0LjAwLDY0LjAwQyAyOTEuMzQ0LDQwMC4wMCwgMzIwLjAwLDM3MS4zNDQsIDMyMC4wMCwzMzYuMDB6IE0gNDE2LjAwLDE3Ni4wMAoJCWwwLjAwLTE2LjAwIGwwLjAwLTMyLjAwIGwwLjAwLTE2LjAwIGMwLjAwLTYxLjc0NC01MC4yNTYtMTEyLjAwLTExMi4wMC0xMTIuMDBsLTk2LjAwLDAuMDAgYy02MS43NDQsMC4wMC0xMTIuMDAsNTAuMjU2LTExMi4wMCwxMTIuMDBsMC4wMCwxNi4wMCBsMC4wMCwzMi4wMCBsMC4wMCwxNi4wMCBsMC4wMCw0OC4wMCBjMC4wMCw4LjgzMiwgNy4xNjgsMTYuMDAsIDE2LjAwLDE2LjAwYyAxMC42NzIsMC4wMCwgMjEuMzI4LDAuMDAsIDMyLjAwLDAuMDBsIDIyNC4wMCwwLjAwIGMgMTAuNjU2LDAuMDAsIDIxLjMxMiwwLjAwLCAzMi4wMCwwLjAwCgkJYyA4LjgxNiwwLjAwLCAxNi4wMC03LjE2OCwgMTYuMDAtMTYuMDBMIDQxNi4wMCwxNzYuMDAgek0gMjU2LjAwLDE3Ni4wMCBDIDI3My42NjQsMTc2LjAwIDI4OC4wMCwxNjEuNjggMjg4LjAwLDE0NC4wMCBDIDI4OC4wMCwxMzQuMjU2IDI4Mi43NTIsMTE1LjcxMiAyNzcuMzQ0LDEwMS4wODggQyAyNzIuOTc2LDg5LjI4IDI2OC41MTIsODAuMDMyIDI1Ni4wMCw4MC4wMzIgQyAyNDQuNDk2LDgwLjAzMiAyMzkuMDI0LDg5LjM3NiAyMzQuNjcyLDEwMS4yNDggQyAyMjkuMzI4LDExNS44NCAyMjQuMDAsMTM0LjI4OCAyMjQuMDAsMTQ0LjAwIEMgMjI0LjAwLDE2MS42OCAyMzguMzM2LDE3Ni4wMCAyNTYuMDAsMTc2LjAwIFoiIGRhdGEtdGFncz0ibG9jayIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGUwMGU7IiBkPSJNIDI1Ni4wMCw0ODAuMDBDIDE1OC43ODQsNDgwLjAwLCA4MC4wMCw0MDEuMjE2LCA4MC4wMCwzMDQuMDBjMC4wMC02NC40OTYsIDU5LjAwOC0xMzIuODQ4LCA4MC40OTYtMTkyLjg4QyAxOTIuNTQ0LDIxLjYwLCAxODguOTkyLTMyLjAwLCAyNTYuMDAtMzIuMDAKCQljIDY4LjAwLDAuMDAsIDYzLjQ0LDUzLjM0NCwgOTUuNTA0LDE0Mi43NTJDIDM3My4wNTYsMTcwLjkxMiwgNDMyLjAwLDI0MC4wMCwgNDMyLjAwLDMwNC4wMEMgNDMyLjAwLDQwMS4yMTYsIDM1My4xODQsNDgwLjAwLCAyNTYuMDAsNDgwLjAweiBNIDI5Ny40NzIsNDUuMTg0bC03OS4zMjgtOS45MDQKCQljLTIuODMyLDguMTkyLTUuODcyLDE3Ljc3Ni05LjU2OCwzMC4yODhjLTAuMDQ4LDAuMTYtMC4xMTIsMC4zMzYtMC4xNDQsMC40OTZsIDk5LjAwOCwxMi4zNjhjLTEuNDA4LTQuNzItMi45MTItOS42OC00LjIyNC0xNC4xMjgKCQlDIDMwMS4xMiw1Ny4xMiwgMjk5LjI0OCw1MC44OCwgMjk3LjQ3Miw0NS4xODR6IE0gMjAzLjc3Niw4MS40NzJjLTIuOTEyLDkuNjMyLTYuMTkyLDE5Ljc3Ni05Ljg0LDMwLjUyOGwgMTI0LjI1NiwwLjAwIAoJCWMtMS45NjgtNS43NDQtMy45MzYtMTEuNTA0LTUuNjMyLTE2Ljk0NEwgMjAzLjc3Niw4MS40NzJ6IE0gMjU2LjAwLDAuMDBjLTE2LjIwOCwwLjAwLTIzLjY2NCwxLjg3Mi0zMS45NTIsMjAuMDBsIDY3LjgwOCw4LjQ5NgoJCUMgMjgyLjAzMiwyLjAzMiwgMjc0Ljg4LDAuMDAsIDI1Ni4wMCwwLjAweiBNIDMzMC43NTIsMTQ0LjAwbC0xNDkuMzI4LDAuMDAgYy03Ljk2OCwxNy4yOC0xNy41MzYsMzQuNTYtMjYuOTc2LDUxLjQ3MkMgMTMzLjU2OCwyMzIuODMyLCAxMTIuMDAsMjcxLjQ3MiwgMTEyLjAwLDMwNC4wMAoJCWMwLjAwLDc5LjQwOCwgNjQuNTkyLDE0NC4wMCwgMTQ0LjAwLDE0NC4wMGMgNzkuNDA4LDAuMDAsIDE0NC4wMC02NC41OTIsIDE0NC4wMC0xNDQuMDBjMC4wMC0zMi4yODgtMjEuNjAtNzEuMTM2LTQyLjQ5Ni0xMDguNzJDIDM0OC4xNiwxNzguNDMyLCAzMzguNjU2LDE2MS4xODQsIDMzMC43NTIsMTQ0LjAwek0gMjU2LjAwLDQwMC4wMCBDIDI2MC40MCw0MDAuMDAgMjY0LjAwLDM5Ni40MTYgMjY0LjAwLDM5Mi4wMCBDIDI2NC4wMCwzODcuNTg0IDI2MC40MTYsMzg0LjAwIDI1Ni4wMCwzODQuMDAgQyAyMTEuODg4LDM4NC4wMCAxNzYuMDAsMzQ4LjExMiAxNzYuMDAsMzA0LjAwIEMgMTc2LjAwLDI5OS41ODQgMTcyLjQxNiwyOTYuMDAgMTY4LjAwLDI5Ni4wMCBDIDE2My41ODQsMjk2LjAwIDE2MC4wMCwyOTkuNTg0IDE2MC4wMCwzMDQuMDAgQyAxNjAuMDAsMzU2Ljk0NCAyMDMuMDU2LDQwMC4wMCAyNTYuMDAsNDAwLjAwIFoiIGRhdGEtdGFncz0iYnVsYiIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGUwMGY7IiBkPSJNIDQ3MC4zMiw0MzguNzJDIDQ0NC4wMCw0NjUuMDA4LCA0MDkuMzQ0LDQ4MC4wMCwgMzc1LjE4NCw0ODAuMDBjLTI4LjgxNiwwLjAwLTU1LjM0NC0xMC42ODgtNzQuNzItMzAuMDMybC03Ny44NzItNzguNDY0CgljLTAuMjQtMC4yMjQtMC41MTItMC4zNjgtMC43NTItMC42MDhjLTAuMTI4LTAuMTI4LTAuMjA4LTAuMzA0LTAuMzM2LTAuNDE2bCAwLjAzMi0wLjAzMkwgNTYuMjcyLDIwMy45MDQKCWMtNy42MTYtNy41NjgtMTMuMTM2LTE2Ljk5Mi0xNi4yMDgtMjcuMjhsLTM3LjU4NC0xMzYuMTI4QyAyLjQ0OCw0MC4xMjgsMC4wMCwyOS40NCwwLjAwLDI0LjAwQzAuMDAtNi45MTIsIDI1LjEwNC0zMi4wMCwgNTYuMDY0LTMyLjAwCgljIDYuMTYsMC4wMCwgMTguMDgsMi45NDQsIDE4LjUxMiwzLjAwOGwgMTM1LjY0OCwzNS42NjRjIDEwLjMwNCwzLjA1NiwgMTkuNjY0LDguNjI0LCAyNy4yOCwxNi4yNTZsIDI0NC4yMDgsMjQ2LjEyOAoJQyA1MjYuMTI4LDMxMy41MDQsIDUyMS4xMiwzODguMDAsIDQ3MC4zMiw0MzguNzJ6IE0gMjU2LjIyNCw5OS4yOGMtMS4zMTIsMTQuNDMyLTUuMzkyLDI4LjU5Mi0xMS41MDQsNDIuMDMybCAxNTEuMjgsMTUxLjI2NAoJYyA5LjI0OC0yOS4yMTYsIDQuNDk2LTU5Ljc3Ni0xNS43NzYtODAuMDY0Yy0wLjEyOC0wLjEyOC0wLjI4OC0wLjIwOC0wLjQwLTAuMzM2bCAwLjIyNC0wLjIwOGwtMTIzLjY0OC0xMjQuNjQKCUMgMjU2LjQwLDkxLjMxMiwgMjU2LjU5Miw5NS4yMTYsIDI1Ni4yMjQsOTkuMjh6IE0gMjM2LjY4OCwxNTUuOTA0Yy01Ljk2OCw5LjgwOC0xMi43NTIsMTkuMjgtMjEuMTUyLDI3LjY2NAoJYy05Ljc3Niw5Ljc3Ni0yMC45OTIsMTcuNDQtMzIuNzA0LDIzLjg3MmwgMTUyLjUxMiwxNTIuNTEyYyAxMS45NjgtNS4zMTIsIDIzLjQ0LTEyLjg4LCAzMy41NjgtMjMuMDA4YyA4LjY1Ni04LjYyNCwgMTUuMzQ0LTE4LjI4OCwgMjAuNDk2LTI4LjMzNgoJTCAyMzYuNjg4LDE1NS45MDR6IE0gMTY3Ljc3NiwyMTUuMDA4Yy0xNC44MTYsNS45NjgtMzAuMzM2LDkuMzc2LTQ1Ljg4OCw5LjU4NGwgMTIzLjI0OCwxMjQuMTkyYyAxOC44NjQsMTguNDAsIDQ2LjMzNiwyMy42OTYsIDczLjM5MiwxNi45OTIKCUwgMTY3Ljc3NiwyMTUuMDA4eiBNIDY2LjY3MiwyLjAzMkMgNjQuOTI4LDEuNjMyLCA1OS41MDQsMC4yNTYsIDU1LjgyNCwwLjAwQyA0Mi42NzIsMC4xNiwgMzIuMDAsMTAuODQ4LCAzMi4wMCwyNC4wMAoJYyAwLjE5MiwyLjY4OCwgMS4yNjQsNy4zMTIsIDEuNjMyLDguOTkybCAxNi44NDgsNjEuMDI0YyAxOC4yODgsMC40OTYsIDM3Ljk2OC02LjYyNCwgNTMuNDQtMjIuMTI4YyAxNS43MTItMTUuNjgsIDIzLjEwNC0zNS43NDQsIDIyLjMwNC01NC4yNTYKCUwgNjYuNjcyLDIuMDMyeiBNIDE0MS45ODQsMjEuODA4Yy0wLjM4NCwyMS40NzItOS4xMiw0My44MDgtMjYuNzUyLDYxLjQwOEMgOTguNTYsOTkuOTA0LCA3Ni43MzYsMTA5LjUzNiwgNTQuOTc2LDExMC40MGwgMTUuOTM2LDU3LjcxMgoJYyAxLjE1MiwzLjg0LCAzLjQ0LDcuNjMyLCA2LjI1NiwxMC45NDRjIDMyLjA5NiwyMi45NzYsIDgxLjQ1NiwxNi4xOTIsIDExNS43NDQtMTguMTI4YyAzNi4yNzItMzYuMjU2LCA0MS44NzItODkuMzc2LCAxMy45MzYtMTIxLjA4OAoJYy0xLjg1Ni0wLjk3Ni0zLjcyOC0xLjkwNC01Ljc0NC0yLjQ5NkwgMTQxLjk4NCwyMS44MDh6IE0gNDU5LjA1NiwyOTEuNjQ4bC0yNi45NDQtMjcuMTUyYzAuMDAsMy42MTYsIDAuNDMyLDcuMDg4LCAwLjA5NiwxMC43ODQKCWMtMi44MTYsMzAuOTYtMTcuMjQ4LDYwLjg5Ni00MC42ODgsODQuMzA0Yy0yNi4wNjQsMjYuMDgtNjAuNjI0LDQxLjA0LTk0Ljg0OCw0MS4xMzZsIDI2LjQ5NiwyNi43MkMgMzM2LjQzMiw0NDAuNjcyLCAzNTQuOTQ0LDQ0OC4wMCwgMzc1LjE4NCw0NDguMDAKCWMgMjUuNzQ0LDAuMDAsIDUyLjE5Mi0xMS42NDgsIDcyLjUyOC0zMS45MmMgMTkuMDg4LTE5LjA1NiwgMzAuNDY0LTQyLjczNiwgMzIuMDk2LTY2LjY4OEMgNDgxLjMxMiwzMjcuMDQsIDQ3My45MzYsMzA2LjU0NCwgNDU5LjA1NiwyOTEuNjQ4eiIgZGF0YS10YWdzPSJwZW4iIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDEwOyIgZD0iTSA1MDIuNjI0LDMyNS4xNjhsLTgxLjI4LDgxLjI5NkMgNDE1LjM0NCw0MTIuNDY0LCA0MDcuMTg0LDQxNS44NCwgMzk4LjcyLDQxNS44NEwgMTEzLjI5Niw0MTUuODQgCgljLTguNDgsMC4wMC0xNi42MjQtMy4zNzYtMjIuNjI0LTkuMzc2bC04MS4yOC04MS4yOTZDIDMuMTA0LDMxOC44OTYtMC4wMzIsMzEwLjYyNCwwLjAwLDMwMi4zMzZjIDAuMDQ4LTcuNTIsIDIuNzM2LTE1LjAyNCwgOC4wOTYtMjEuMDU2CglsIDIyMy45ODQtMjM4LjUyOEMgMjM4LjE2LDM1LjkwNCwgMjQ2Ljg2NCwzMi4wMCwgMjU2LjAwLDMyLjAwYyA5LjEzNiwwLjAwLCAxNy44NCwzLjkwNCwgMjMuOTA0LDEwLjc1MmwgMjI0LjAwLDIzOC41MjhjIDUuNDcyLDYuMTYsIDguMTYsMTMuODcyLCA4LjA5NiwyMS41NjgKCUMgNTExLjkzNiwzMTAuOTQ0LCA1MDguNzg0LDMxOS4wMDgsIDUwMi42MjQsMzI1LjE2OHogTSAyOTEuNTA0LDMwMy44NEwgMjIwLjQ4LDMwMy44NCBMIDI1Ni4wMCwzMzMuNDI0TCAyOTEuNTA0LDMwMy44NHogTSAyNjguNTEyLDM0My44NGwgNDMuNzEyLDM2LjQ0OGwgMzIuMjg4LTMyLjI4OAoJTCAzMDQuMDAsMzE0LjI1NkwgMjY4LjUxMiwzNDMuODR6IE0gMjA4LjAwLDMxNC4yNTZMIDE2Ny40ODgsMzQ4LjAwbCAzMi4yODgsMzIuMjg4bCA0My43MjgtMzYuNDQ4TCAyMDguMDAsMzE0LjI1NnogTSAyOTUuODQsMjg3Ljg0TCAyNTYuMDAsODguNTkyTCAyMTYuMTYsMjg3Ljg0TCAyOTUuODQsMjg3Ljg0IHoKCSBNIDMxMi4xNiwyODcuODRsIDc4LjQ5NiwwLjAwIGwtMTE3Ljc0NC0xOTYuMzA0TCAzMTIuMTYsMjg3Ljg0eiBNIDMxNi40NjQsMzAzLjg0bCAzOS40MDgsMzIuODE2bCAzMi44MTYtMzIuODE2TCAzMTYuNDY0LDMwMy44NCB6IE0gMzMxLjMxMiwzODMuODRsIDU2LjE5MiwwLjAwIGwtMzAuNjU2LTI1LjU1MgoJTCAzMzEuMzEyLDM4My44NHogTSAyNTYuMDAsMzU0LjI0bC0zNS41MiwyOS42MGwgNzEuMDA4LDAuMDAgTCAyNTYuMDAsMzU0LjI0eiBNIDE1NS4xMzYsMzU4LjI4OEwgMTI0LjQ4LDM4My44NGwgNTYuMjA4LDAuMDAgTCAxNTUuMTM2LDM1OC4yODh6IE0gMTU2LjEyOCwzMzYuNjU2bCAzOS4zOTItMzIuODE2TCAxMjMuMzEyLDMwMy44NCAKCUwgMTU2LjEyOCwzMzYuNjU2eiBNIDE5OS44NCwyODcuODRsIDM5LjI0OC0xOTYuMzA0TCAxMjEuMzI4LDI4Ny44NEwgMTk5Ljg0LDI4Ny44NCB6IE0gMjAzLjI2NCwxMjAuMTkyTCA0NS44MjQsMjg3Ljg0bCA1Ni44NjQsMC4wMCBMIDIwMy4yNjQsMTIwLjE5MnogTSA0MDkuMzEyLDI4Ny44NGwgNTYuODgsMC4wMCAKCWwtMTU3LjQ3Mi0xNjcuNjhMIDQwOS4zMTIsMjg3Ljg0eiBNIDQxMS4zMTIsMzAzLjg0bC00My4wODgsNDMuMDg4bCAzNi43NTIsMzAuNjRsIDczLjcxMi03My43MjhMIDQxMS4zMTIsMzAzLjg0IHogTSAxMDYuOTc2LDM3Ny42MGwgMzYuODE2LTMwLjY3MkwgMTAwLjY4OCwzMDMuODRMIDMyLjA5NiwzMDMuODQgCglMIDEwNi45NzYsMzc3LjYweiIgZGF0YS10YWdzPSJkaWFtb25kIiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAxMTsiIGQ9Ik0gNDMyLjAwLDQwMC4wNjRMIDgwLjAwLDQwMC4wMEMgNzEuMTUyLDQwMC4wMCwgNjQuMDAsMzkyLjkxMiwgNjQuMDAsMzg0LjA2NGwwLjAwLTIyNC4wMCBjMC4wMC04Ljg0OCwgNy4xNTItMTYuMDAsIDE2LjAwLTE2LjAwbCAzNTIuMDAsMC4wMCBjIDguODQ4LDAuMDAsIDE2LjAwLDcuMTUyLCAxNi4wMCwxNi4wMGwwLjAwLDIyNC4wMCAKCQlDIDQ0OC4wMCwzOTIuOTEyLCA0NDAuODQ4LDQwMC4wNjQsIDQzMi4wMCw0MDAuMDY0eiBNIDQzMi4wMCwxNjAuMDBMIDgwLjAwLDE2MC4wMCBMIDgwLjAwLDM4NC4wNjQgbCAzNTIuMDAsMC4wMCBMIDQzMi4wMCwxNjAuMDAgek0gNDY0LjAwLDQ2NC4wMEwgNDguMDAsNDY0LjAwIEMgMjEuNDg4LDQ2NC4wMCwwLjAwLDQ0Mi41MjgsMC4wMCw0MTYuMDBsMC4wMC0zMjAuMDAgYzAuMDAtMjYuNDY0LCAyMS40MDgtNDcuOTA0LCA0Ny44NC00Ny45NjhMIDIwOC4wMCw0OC4wMzIgbDAuMDAtMTkuNDcyIGwtOTkuODcyLTEyLjk3NgoJCUMgMTAwLjk5MiwxMy44MDgsIDk2LjAwLDcuNDA4LCA5Ni4wMCwwLjA2NGMwLjAwLTguODQ4LCA3LjE1Mi0xNi4wMCwgMTYuMDAtMTYuMDBsIDI4OC4wMCwwLjAwIGMgOC44NDgsMC4wMCwgMTYuMDAsNy4xNTIsIDE2LjAwLDE2LjAwYzAuMDAsNy4zNDQtNC45OTIsMTMuNzQ0LTEyLjEyOCwxNS41MzZMIDMwNC4wMCwyOC41NmwwLjAwLDE5LjQ3MiAKCQlsIDE2MC4xNiwwLjAwIEMgNDkwLjU5Miw0OC4wOTYsIDUxMi4wMCw2OS41MzYsIDUxMi4wMCw5Ni4wMEwgNTEyLjAwLDQxNi4wMCBDIDUxMi4wMCw0NDIuNTI4LCA0OTAuNDk2LDQ2NC4wMCwgNDY0LjAwLDQ2NC4wMHogTSA0ODAuMDAsOTYuMDBjMC4wMC04LjgxNi03LjE4NC0xNi4wMC0xNi4wMC0xNi4wMGwtMTQ0LjAwLDAuMDAgbC0xMjguMDAsMC4wMCBMIDQ4LjAwLDgwLjAwIGMtOC44MzIsMC4wMC0xNi4wMCw3LjE4NC0xNi4wMCwxNi4wMEwgMzIuMDAsNDE2LjAwIAoJCWMwLjAwLDguODMyLCA3LjE2OCwxNi4wMCwgMTYuMDAsMTYuMDBsIDQxNi4wMCwwLjAwIGMgOC44MTYsMC4wMCwgMTYuMDAtNy4xNjgsIDE2LjAwLTE2LjAwTCA0ODAuMDAsOTYuMDAgeiIgZGF0YS10YWdzPSJkaXNwbGF5IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAxMjsiIGQ9Ik0gMjU2LjAzMiwxOTYuMDY0YyA1Mi45NDQsMC4wMCwgOTYuMDAsNDMuMDcyLCA5Ni4wMCw5Ni4wMHMtNDMuMDU2LDk2LjAwLTk2LjAwLDk2LjAwCgkJYy01Mi45NDQsMC4wMC05Ni4wMC00My4wNTYtOTYuMDAtOTYuMDBTIDIwMy4wODgsMTk2LjA2NCwgMjU2LjAzMiwxOTYuMDY0eiBNIDI1Ni4wMzIsMzcyLjA2NGMgNDQuMTI4LDAuMDAsIDgwLjAwLTM1Ljg3MiwgODAuMDAtODAuMDBzLTM1Ljg3Mi04MC4wMC04MC4wMC04MC4wMGMtNDQuMTI4LDAuMDAtODAuMDAsMzUuODcyLTgwLjAwLDgwLjAwCgkJUyAyMTEuOTA0LDM3Mi4wNjQsIDI1Ni4wMzIsMzcyLjA2NHpNIDI1Ni4wMCw0ODAuMDBDIDE1MC4xMTIsNDgwLjAwLCA2NC4wMCwzOTQuOTQ0LCA2NC4wMCwyODcuOTg0YzAuMDAtMTEyLjAwLCA5Ni4wMTYtMjI2LjU3NiwgMTY2LjAxNi0zMDcuMTA0CgkJQyAyMzAuMjcyLTE5LjQ0LCAyNDEuNTA0LTMyLjAwLCAyNTUuMzkyLTMyLjAwYyAwLjAzMiwwLjAwLCAxLjE2OCwwLjAwLCAxLjIzMiwwLjAwYyAxMy44NzIsMC4wMCwgMjUuMTIsMTIuNTYsIDI1LjM3NiwxMi44OAoJCWMgNzAuMDMyLDgwLjUyOCwgMTY2LjAzMiwxOTUuMDg4LCAxNjYuMDMyLDMwNy4xMDRDIDQ0OC4wMzIsMzk0Ljk0NCwgMzYxLjkwNCw0ODAuMDAsIDI1Ni4wMCw0ODAuMDB6IE0gMjU3Ljg3MiwxLjg3MmMtMC4zMzYtMC4zMi0xLjMxMi0xLjAyNC0yLjE2LTEuNTY4CgkJYy0wLjE2LDAuNDMyLTEuMzQ0LDEuMzc2LTIuMDY0LDIuMTI4QyAxOTUuMDA4LDY5LjkwNCwgOTYuMDAsMTgzLjc3NiwgOTYuMDAsMjg3Ljk4NEMgOTYuMDAsMzc2LjIwOCwgMTY3Ljc5Miw0NDguMDAsIDI1Ni4wMCw0NDguMDBjIDg4LjI1NiwwLjAwLCAxNjAuMDMyLTcxLjc5MiwgMTYwLjAzMi0xNjAuMDMyCgkJQyA0MTYuMDMyLDE4My43NzYsIDMxNy4wMjQsNjkuOTA0LCAyNTcuODcyLDEuODcyeiIgZGF0YS10YWdzPSJsb2NhdGlvbiIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGUwMTM7IiBkPSJNIDUxMS40NCwyMjcuNTg0Yy0wLjE2LDAuNjcyLTAuMDY0LDEuMzkyLTAuMzIsMi4wNDhjLTAuMDk2LDAuMjcyLTAuMzM2LDAuNDE2LTAuNDMyLDAuNjcyCgkJYy0wLjE2LDAuMzg0LTAuMTI4LDAuODE2LTAuMzM2LDEuMTg0Yy00Ni40MCw4OC44MTYtMTQ3LjQwOCwxNTIuNDQ4LTI1My45NjgsMTUyLjQ0OGMtMTA2LjU3NiwwLjAwLTIwNy41NjgtNjMuNTM2LTI1NC4wMC0xNTIuMzM2CgkJYy0wLjIwOC0wLjM2OC0wLjE3Ni0wLjgwLTAuMzM2LTEuMTg0Yy0wLjExMi0wLjI1Ni0wLjMzNi0wLjQwLTAuNDMyLTAuNjcyYy0wLjI1Ni0wLjY1Ni0wLjE2LTEuMzc2LTAuMzItMi4wNDgKCQljLTAuMjg4LTEuMjAtMC41Ni0yLjM1Mi0wLjU2LTMuNTg0cyAwLjI4OC0yLjM2OCwgMC41Ni0zLjU4NGMgMC4xNi0wLjY3MiwgMC4wNjQtMS4zOTIsIDAuMzItMi4wNDgKCQljIDAuMDk2LTAuMjcyLCAwLjMzNi0wLjQxNiwgMC40MzItMC42NzJjIDAuMTYtMC4zODQsIDAuMTI4LTAuODE2LCAwLjMzNi0xLjE4NGMgNDYuNDE2LTg4LjgxNiwgMTQ3LjQyNC0xNTIuNDQ4LCAyNTQuMDAtMTUyLjQ0OAoJCWMgMTA2LjU2LDAuMDAsIDIwNy41NjgsNjMuNTM2LCAyNTMuOTY4LDE1Mi4zMzZjIDAuMjI0LDAuMzY4LCAwLjE5MiwwLjgwLCAwLjMzNiwxLjE4NGMgMC4wOTYsMC4yNTYsIDAuMzM2LDAuNDAsIDAuNDMyLDAuNjcyCgkJYyAwLjI1NiwwLjY1NiwgMC4xNiwxLjM3NiwgMC4zMiwyLjA0OEMgNTExLjcxMiwyMjEuNjMyLCA1MTIuMDAsMjIyLjc4NCwgNTEyLjAwLDIyNC4wMFMgNTExLjcxMiwyMjYuMzg0LCA1MTEuNDQsMjI3LjU4NHogTSAyNTYuMzY4LDk2LjE5MgoJCWMtODkuODQsMC4wMC0xNzcuNzkyLDUxLjA1Ni0yMjEuNjE2LDEyNy45MmMgNDQuMDY0LDc2Ljk2LCAxMzEuODg4LDEyNy44NCwgMjIxLjYxNiwxMjcuODRjIDg5LjgwOCwwLjAwLCAxNzcuNzc2LTUxLjA3MiwgMjIxLjYwLTEyNy45MgoJCUMgNDMzLjkwNCwxNDcuMDU2LCAzNDYuMDk2LDk2LjE5MiwgMjU2LjM2OCw5Ni4xOTJ6TSAyNTYuMzY4LDI4OC4wMTYgQyAyNjAuNzg0LDI4OC4wMTYgMjY0LjMzNiwyODQuNDQ4IDI2NC4zMzYsMjgwLjAxNiBDIDI2NC4zMzYsMjc1LjYxNiAyNjAuNzY4LDI3Mi4wMzIgMjU2LjM2OCwyNzIuMDMyIEwgMjU2LjM2OCwyNzIuMDE2IEMgMjI5LjkwNCwyNzIuMDE2IDIwOC4zODQsMjUwLjQ5NiAyMDguMzg0LDIyNC4wNjQgQyAyMDguMzg0LDIxOS42NDggMjA0LjgwLDIxNi4wNjQgMjAwLjQwLDIxNi4wNjQgQyAxOTUuOTg0LDIxNi4wNjQgMTkyLjQwLDIxOS42NDggMTkyLjQwLDIyNC4wNjQgQyAxOTIuNDAsMjU5LjM0NCAyMjAuOTkyLDI4Ny45MzYgMjU2LjI3MiwyODguMDAgQyAyNTYuMzA0LDI4OC4wMCAyNTYuMzM2LDI4OC4wMTYgMjU2LjM2OCwyODguMDE2IFpNIDI1Ni4wMCwzMzYuMDBjLTYxLjg3MiwwLjAwLTExMi4wMC01MC4xNDQtMTEyLjAwLTExMi4wMGMwLjAwLTYxLjg1NiwgNTAuMTQ0LTExMi4wMCwgMTEyLjAwLTExMi4wMGMgNjEuODQsMC4wMCwgMTEyLjAwLDUwLjE2LCAxMTIuMDAsMTEyLjAwQyAzNjguMDAsMjg1Ljg3MiwgMzE3Ljg0LDMzNi4wMCwgMjU2LjAwLDMzNi4wMHogTSAyNTYuMDAsMTI4LjAwCgkJYy01Mi45NDQsMC4wMC05Ni4wMCw0My4wNTYtOTYuMDAsOTYuMDBjMC4wMCw1Mi45NDQsIDQzLjA1Niw5Ni4wMCwgOTYuMDAsOTYuMDBjIDUyLjk0NCwwLjAwLCA5Ni4wMC00My4wNTYsIDk2LjAwLTk2LjAwQyAzNTIuMDAsMTcxLjA1NiwgMzA4Ljk0NCwxMjguMDAsIDI1Ni4wMCwxMjguMDB6IiBkYXRhLXRhZ3M9ImV5ZSIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGUwMTQ7IiBkPSJNIDI1Ni4wMCwzNjguMDAgQyAyNjAuNDE2LDM2OC4wMCAyNjQuMDAsMzY0LjQxNiAyNjQuMDAsMzYwLjAwIEMgMjY0LjAwLDM1NS41ODQgMjYwLjQwLDM1Mi4wMCAyNTYuMDAsMzUyLjAwIEMgMTcwLjc2OCwzNTIuMDAgOTYuMDAsMzA3LjEzNiA5Ni4wMCwyNTYuMDAgQyA5Ni4wMCwyNTEuNTg0IDkyLjQxNiwyNDguMDAgODguMDAsMjQ4LjAwIEMgODMuNTg0LDI0OC4wMCA4MC4wMCwyNTEuNTg0IDgwLjAwLDI1Ni4wMCBDIDgwLjAwLDMxNi43MDQgMTYwLjU5MiwzNjguMDAgMjU2LjAwLDM2OC4wMCBaTSAyNTYuMDAsNDQ4LjAwQyAxMTQuNjA4LDQ0OC4wMCwwLjAwLDM2Mi4wMzIsMC4wMCwyNTYuMDBjMC4wMC02Ni4wMzIsIDQ0LjQ2NC0xMjQuMjU2LCAxMTIuMTI4LTE1OC44MTYKCQlDIDExMi4xMjgsOTYuNzUyLCAxMTIuMDAsOTYuNDY0LCAxMTIuMDAsOTYuMDBjMC4wMC0yOC42ODgtMjEuNDI0LTU5LjU2OC0zMC44NDgtNzUuNzc2YyAwLjAxNiwwLjAwLCAwLjAzMiwwLjAwLCAwLjAzMiwwLjAwQyA4MC40MzIsMTguNDY0LCA4MC4wMCwxNi41MjgsIDgwLjAwLDE0LjQ5NgoJCUMgODAuMDAsNi40OTYsIDg2LjQ4LDAuMDAsIDk0LjQ5NiwwLjAwQyA5Ni4wMCwwLjAwLCA5OC42NCwwLjQwLCA5OC41NzYsMC4yMjRjIDUwLjAwLDguMTkyLCA5Ny4xMDQsNTQuMTI4LCAxMDguMDQ4LDY3LjQ0QyAyMjIuNjA4LDY1LjMxMiwgMjM5LjA4OCw2NC4wMCwgMjU2LjAwLDY0LjAwCgkJYyAxNDEuMzYsMC4wMCwgMjU2LjAwLDg1Ljk2OCwgMjU2LjAwLDE5Mi4wMEMgNTEyLjAwLDM2Mi4wMzIsIDM5Ny4zNzYsNDQ4LjAwLCAyNTYuMDAsNDQ4LjAweiBNIDI1Ni4wMCw5Ni4wMGMtMTQuNjcyLDAuMDAtMjkuNzI4LDEuMTItNDQuNzM2LDMuMzEyYy0xLjU1MiwwLjI1Ni0zLjEwNCwwLjMzNi00LjY0LDAuMzM2CgkJYy05LjUwNCwwLjAwLTE4LjYwOC00LjIyNC0yNC43MzYtMTEuNjhjLTYuODQ4LTguMzM2LTI2LjMzNi0yNi45NDQtNDkuMzYtNDAuNjI0YyA2LjI0LDE0LjMyLCAxMS4xMiwzMC4zNjgsIDExLjQ1Niw0Ni45MTIKCQljIDAuMDk2LDEuMDI0LCAwLjE0NCwyLjA2NCwgMC4xNDQsMi45NDRjMC4wMCwxMi4wMzItNi43MzYsMjMuMDI0LTE3LjQ0LDI4LjQ5NkMgNjcuMzkyLDE1NS45NjgsIDMyLjAwLDIwNC42ODgsIDMyLjAwLDI1Ni4wMEMgMzIuMDAsMzQ0LjIyNCwgMTMyLjQ4LDQxNi4wMCwgMjU2LjAwLDQxNi4wMAoJCWMgMTIzLjQ4OCwwLjAwLCAyMjQuMDAtNzEuNzc2LCAyMjQuMDAtMTYwLjAwQyA0ODAuMDAsMTY3Ljc3NiwgMzc5LjUwNCw5Ni4wMCwgMjU2LjAwLDk2LjAweiIgZGF0YS10YWdzPSJidWJibGUiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDE1OyIgZD0iTSA1MTAuNzg0LDE4NC43MkwgNDQ2Ljc1Miw0MjQuODE2QyA0NDIuODgsNDM4LjQ2NCwgNDMwLjIyNCw0NDguMDAsIDQxNi4wMCw0NDguMDBMIDI1Ni4wMCw0NDguMDAgTCA5Ni4wMCw0NDguMDAgQyA4MS43Niw0NDguMDAsIDY5LjEyLDQzOC40NjQsIDY1LjI0OCw0MjQuODE2TCAxLjIxNiwxODQuNzIKCQlDIDAuNDAsMTgxLjgwOCwwLjAwLDE3OC44OCwwLjAwLDE3Ni4wMGwwLjAwLTExMi4wMCBjMC4wMC0zNS4zNDQsIDI4LjY1Ni02NC4wMCwgNjQuMDAtNjQuMDBsIDM4NC4wMCwwLjAwIGMgMzUuMzQ0LDAuMDAsIDY0LjAwLDI4LjY1NiwgNjQuMDAsNjQuMDBsMC4wMCwxMTIuMDAgQyA1MTIuMDAsMTc4Ljg4LCA1MTEuNjAsMTgxLjgwOCwgNTEwLjc4NCwxODQuNzJ6IE0gNDgwLjAwLDY0LjAwCgkJYzAuMDAtMTcuNjMyLTE0LjM2OC0zMi4wMC0zMi4wMC0zMi4wMEwgNjQuMDAsMzIuMDAgYy0xNy42NDgsMC4wMC0zMi4wMCwxNC4zNjgtMzIuMDAsMzIuMDBsMC4wMCwxMTIuMDAgTCA5Ni4wMTYsNDE2LjAxNmwgMzE5Ljk1MiwwLjAwIEwgNDgwLjAwLDE3Ni4wMEwgNDgwLjAwLDY0LjAwIHpNIDM3OS44NzIsMzg0LjAwTCAxMzIuMTI4LDM4NC4wMCBjLTcuMjQ4LDAuMDAtMTMuNjAtNC44OC0xNS40NzItMTEuODg4bC01NS4xMi0xOTIuMDBjLTEuMjY0LTQuODE2LTAuMjU2LTkuOTM2LCAyLjc4NC0xMy44NzIKCQlTIDcyLjAzMiwxNjAuMDAsIDc2Ljk5MiwxNjAuMDBsIDQ2LjQ5NiwwLjAwIGwgMTguMjU2LDAuMDAgbCA4LjMzNiwwLjAwIGwgMjMuMTUyLTQ2LjMyQyAxNzguNjcyLDEwMi44NDgsIDE4OS43NDQsOTYuMDAsIDIwMS44NzIsOTYuMDBsIDEwOC4yNTYsMC4wMCBjIDEyLjEyOCwwLjAwLCAyMy4xODQsNi44NDgsIDI4LjYyNCwxNy42OAoJCUwgMzYxLjkwNCwxNjAuMDBsIDguMzM2LDAuMDAgbCAxOC4yNTYsMC4wMCBsIDQ2LjQ5NiwwLjAwIGMgNC45NzYsMC4wMCwgOS42NjQsMi4zMiwgMTIuNjg4LDYuMjU2cyA0LjAzMiw5LjA1NiwgMi43ODQsMTMuODcybC01NS4xMiwxOTIuMDBDIDM5My40NzIsMzc5LjEzNiwgMzg3LjEyLDM4NC4wMCwgMzc5Ljg3MiwzODQuMDB6CgkJIE0gMzg4LjQ5NiwxOTIuMDBsLTI2LjU5MiwwLjAwIGMtMTIuMTkyLDAuMDAtMjMuMTUyLTYuNzUyLTI4LjYyNC0xNy42OEwgMzEwLjEyOCwxMjguMDBsLTEwOC4yNTYsMC4wMCBsLTIzLjE1Miw0Ni4zMkMgMTczLjI0OCwxODUuMjQ4LCAxNjIuMjg4LDE5Mi4wMCwgMTUwLjA5NiwxOTIuMDBMIDEyMy41MDQsMTkyLjAwIEwgODUuMzQ0LDE5Mi4wMCAKCQlMIDEzMi4xMjgsMzY4LjAwbCAyNDcuNzQ0LDAuMDAgbCA0Ni43ODQtMTc2LjAwTCAzODguNDk2LDE5Mi4wMCB6IiBkYXRhLXRhZ3M9InN0YWNrIiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAxNjsiIGQ9Ik0gNDQ5Ljc3NiwzOTkuNjQ4bC0xOS40NCw1OC40OEMgNDI2LjAwLDQ3MS4yMCwgNDEzLjc3Niw0ODAuMDAsIDQwMC4wMCw0ODAuMDBMIDExMi4wMCw0ODAuMDAgQyA5OC4yMDgsNDgwLjAwLCA4Ni4wMCw0NzEuMjAsIDgxLjYzMiw0NTguMTI4CglMIDYyLjAzMiwzOTkuNjE2QyA0NS4zMjgsMzk4LjU0NCwgMzIuMDAsMzg0Ljk3NiwgMzIuMDAsMzY4LjAwbDAuMDAtNDguMDAgYzAuMDAtMTcuNjY0LCAxNC4zMzYtMzIuMDAsIDMyLjAwLTMyLjAwbCAxNi41NDQsMC4wMCBjMC4wMC0xLjIwLTAuNDgtMi4zMzYtMC4zMzYtMy41MzZsIDMyLjAwLTI4OC4wMEMgMTE0LjAwLTE5LjcxMiwgMTI3LjY4LTMyLjAwLCAxNDQuMDAtMzIuMDAKCWwgMjI0LjAwLDAuMDAgYyAxNi4zMiwwLjAwLCAzMC4wMCwxMi4yODgsIDMxLjc3NiwyOC40NjRsIDMyLjAwLDI4OC4wMGMgMC4xNiwxLjIwLTAuMzM2LDIuMzM2LTAuMzM2LDMuNTM2TCA0NDguMDAsMjg4LjAwIGMgMTcuNjY0LDAuMDAsIDMyLjAwLDE0LjMzNiwgMzIuMDAsMzIuMDBMIDQ4MC4wMCwzNjguMDAgCglDIDQ4MC4wMCwzODUuMDQsIDQ2Ni41NiwzOTguNjcyLCA0NDkuNzc2LDM5OS42NDh6IE0gMTEyLjAwLDQ0OC4wMGwgMjg4LjAwLDAuMDAgbCAxNi4wMC00OC4wMEwgOTYuMDAsNDAwLjAwIEwgMTEyLjAwLDQ0OC4wMHogTSAxNDQuMDAsMC4wMGwtNS4zMjgsNDguMDBsIDIzNC42NTYsMC4wMCBMIDM2OC4wMCwwLjAwTCAxNDQuMDAsMC4wMCB6IE0gMzc1LjA4OCw2NC4wMEwgMTM2Ljg4LDY0LjAwIEwgMTE5LjEwNCwyMjQuMDBsIDI3My43NzYsMC4wMCAKCUwgMzc1LjA4OCw2NC4wMHogTSAzOTQuNjU2LDI0MC4wMEwgMTE3LjMyOCwyNDAuMDAgTCAxMTIuMDAsMjg4LjAwbCAyODguMDAsMC4wMCBMIDM5NC42NTYsMjQwLjAweiBNIDQ0OC4wMCwzMjAuMDBMIDY0LjAwLDMyMC4wMCBMIDY0LjAwLDM2OC4wMCBsIDM4NC4wMCwwLjAwIEwgNDQ4LjAwLDMyMC4wMCB6IiBkYXRhLXRhZ3M9ImN1cCIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGUwMTc7IiBkPSJNIDM4NC4wMCw0ODAuMDBMIDEyOC4wMCw0ODAuMDBDIDEwMS40NzIsNDgwLjAwLCA4MC4wMCw0NTguNTEyLCA4MC4wMCw0MzIuMDBsMC4wMC00MTYuMDAgYzAuMDAtMjYuNTI4LCAyMS40ODgtNDguMDAsIDQ4LjAwLTQ4LjAwbCAyNTYuMDAsMC4wMCBjIDI2LjQ5NiwwLjAwLCA0OC4wMCwyMS41MDQsIDQ4LjAwLDQ4LjAwTCA0MzIuMDAsNDMyLjAwIEMgNDMyLjAwLDQ1OC41MjgsIDQxMC40OTYsNDgwLjAwLCAzODQuMDAsNDgwLjAwegoJCSBNIDQwMC4wMCwxNi4wMGMwLjAwLTguODE2LTcuMTg0LTE2LjAwLTE2LjAwLTE2LjAwTCAxMjguMDAsMC4wMCBjLTguODMyLDAuMDAtMTYuMDAsNy4xNTItMTYuMDAsMTYuMDBsMC4wMCwzMi4wNjQgbCAyODguMDAsMC4wMCBMIDQwMC4wMCwxNi4wMCB6IE0gNDAwLjAwLDY0LjA2NEwgMTEyLjAwLDY0LjA2NCBMIDExMi4wMCwzODQuMDAgTCA0MDAuMDAsMzg0LjAwTCA0MDAuMDAsNjQuMDY0IHogTSA0MDAuMDAsNDAwLjAwTCAxMTIuMDAsNDAwLjAwTCAxMTIuMDAsNDMyLjAwIGMwLjAwLDguODMyLCA3LjE2OCwxNi4wMCwgMTYuMDAsMTYuMDAKCQlMIDM4NC4wMCw0NDguMDBjIDguODE2LDAuMDAsIDE2LjAwLTcuMTY4LCAxNi4wMC0xNi4wMEwgNDAwLjAwLDQwMC4wMCB6TSAyODguMDAsNDI0LjAwQyAyODguMDAsNDE5LjU4NCwgMjg0LjQwLDQxNi4wMCwgMjgwLjAwLDQxNi4wMGwtNDguMDAsMC4wMCBDIDIyNy41NjgsNDE2LjAwLCAyMjQuMDAsNDE5LjU4NCwgMjI0LjAwLDQyNC4wMGwwLjAwLDAuMDBDIDIyNC4wMCw0MjguNDMyLCAyMjcuNTY4LDQzMi4wMCwgMjMyLjAwLDQzMi4wMGwgNDguMDAsMC4wMCAKCQlDIDI4NC40MCw0MzIuMDAsIDI4OC4wMCw0MjguNDMyLCAyODguMDAsNDI0LjAwTCAyODguMDAsNDI0LjAwek0gMjcyLjAwLDI0LjA2NGMwLjAwLTQuNDAtMy42MC04LjAwLTguMDAtOC4wMGwtMTYuMDAsMC4wMCBjLTQuNDE2LDAuMDAtOC4wMCwzLjYwLTguMDAsOC4wMGwwLjAwLDAuMDBjMC4wMCw0LjQzMiwgMy41ODQsOC4wMCwgOC4wMCw4LjAwbCAxNi4wMCwwLjAwIAoJCUMgMjY4LjQwLDMyLjA2NCwgMjcyLjAwLDI4LjQ5NiwgMjcyLjAwLDI0LjA2NEwgMjcyLjAwLDI0LjA2NHoiIGRhdGEtdGFncz0icGhvbmUiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDE4OyIgZD0iTSA0NjQuMDAsNDgwLjAwTCAxMTIuMDAsNDgwLjAwIEMgODUuNDg4LDQ4MC4wMCwgNjQuMDAsNDU4LjUyOCwgNjQuMDAsNDMyLjAwbDAuMDAtMzIuMDAgTCA0OC4wMCw0MDAuMDAgQyAyMS40ODgsNDAwLjAwLDAuMDAsMzc4LjUyOCwwLjAwLDM1Mi4wMGwwLjAwLTMyMC4wMCAKCQljMC4wMC0zNS4zNDQsIDI4LjY1Ni02NC4wMCwgNjQuMDAtNjQuMDBsIDM4NC4wMCwwLjAwIGMgMzUuMzQ0LDAuMDAsIDY0LjAwLDI4LjY1NiwgNjQuMDAsNjQuMDBMIDUxMi4wMCw0MzIuMDAgQyA1MTIuMDAsNDU4LjUyOCwgNDkwLjQ5Niw0ODAuMDAsIDQ2NC4wMCw0ODAuMDB6IE0gNDgwLjAwLDMyLjAwYzAuMDAtMTcuNjMyLTE0LjM2OC0zMi4wMC0zMi4wMC0zMi4wMEwgNjQuMDAsMC4wMCBjLTE3LjY0OCwwLjAwLTMyLjAwLDE0LjM2OC0zMi4wMCwzMi4wMEwgMzIuMDAsMzUyLjAwIAoJCWMwLjAwLDguODMyLCA3LjE2OCwxNi4wMCwgMTYuMDAsMTYuMDBsIDE2LjAwLDAuMDAgbDAuMDAtMzIwLjAwIGMwLjAwLTguODQ4LCA3LjE1Mi0xNi4wMCwgMTYuMDAtMTYuMDBzIDE2LjAwLDcuMTUyLCAxNi4wMCwxNi4wMEwgOTYuMDAsNDMyLjAwIGMwLjAwLDguODMyLCA3LjE2OCwxNi4wMCwgMTYuMDAsMTYuMDBsIDM1Mi4wMCwwLjAwIGMgOC44MTYsMC4wMCwgMTYuMDAtNy4xNjgsIDE2LjAwLTE2LjAwTCA0ODAuMDAsMzIuMDAgek0gMzExLjk2OCwyNzEuOTIgQyAzMDcuNTY4LDI3MS45MiAzMDMuOTY4LDI3NS41MDQgMzAzLjk2OCwyNzkuOTIgQyAzMDMuOTY4LDI4NC4zMzYgMzA3LjU2OCwyODcuOTIgMzExLjk2OCwyODcuOTIgTCA0MzkuOTY4LDI4Ny45MiBDIDQ0NC40MCwyODcuOTIgNDQ3Ljk2OCwyODQuMzM2IDQ0Ny45NjgsMjc5LjkyIEMgNDQ3Ljk2OCwyNzUuNTA0IDQ0NC40MCwyNzEuOTIgNDM5Ljk2OCwyNzEuOTIgTCAzMTEuOTY4LDI3MS45MiBaTSAzMTEuOTY4LDMxOS45MiBDIDMwNy41NjgsMzE5LjkyIDMwMy45NjgsMzIzLjUwNCAzMDMuOTY4LDMyNy45MiBDIDMwMy45NjgsMzMyLjMzNiAzMDcuNTY4LDMzNS45MiAzMTEuOTY4LDMzNS45MiBMIDQzOS45NjgsMzM1LjkyIEMgNDQ0LjQwLDMzNS45MiA0NDcuOTY4LDMzMi4zMzYgNDQ3Ljk2OCwzMjcuOTIgQyA0NDcuOTY4LDMyMy41MDQgNDQ0LjQwLDMxOS45MiA0MzkuOTY4LDMxOS45MiBMIDMxMS45NjgsMzE5LjkyIFpNIDMxMS45NjgsMzY3LjkyIEMgMzA3LjU2OCwzNjcuOTIgMzAzLjk2OCwzNzEuNTA0IDMwMy45NjgsMzc1LjkyIEMgMzAzLjk2OCwzODAuMzM2IDMwNy41NjgsMzgzLjkyIDMxMS45NjgsMzgzLjkyIEwgNDM5Ljk2OCwzODMuOTIgQyA0NDQuNDAsMzgzLjkyIDQ0Ny45NjgsMzgwLjMzNiA0NDcuOTY4LDM3NS45MiBDIDQ0Ny45NjgsMzcxLjUwNCA0NDQuNDAsMzY3LjkyIDQzOS45NjgsMzY3LjkyIEwgMzExLjk2OCwzNjcuOTIgWk0gMjY0LjAwLDQ3LjkzNiBDIDI2OC40MTYsNDcuOTM2IDI3Mi4wMCw0NC4zMzYgMjcyLjAwLDM5LjkzNiBDIDI3Mi4wMCwzNS41MDQgMjY4LjQwLDMxLjkzNiAyNjQuMDAsMzEuOTM2IEwgMTM2LjAwLDMxLjkzNiBDIDEzMS41ODQsMzEuOTM2IDEyOC4wMCwzNS41MDQgMTI4LjAwLDM5LjkzNiBDIDEyOC4wMCw0NC4zMzYgMTMxLjU4NCw0Ny45MzYgMTM2LjAwLDQ3LjkzNiBMIDI2NC4wMCw0Ny45MzYgWk0gMjY0LjAwLDk1LjkzNiBDIDI2OC40MTYsOTUuOTM2IDI3Mi4wMCw5Mi4zMzYgMjcyLjAwLDg3LjkzNiBDIDI3Mi4wMCw4My41MDQgMjY4LjQwLDc5LjkzNiAyNjQuMDAsNzkuOTM2IEwgMTM2LjAwLDc5LjkzNiBDIDEzMS41ODQsNzkuOTM2IDEyOC4wMCw4My41MDQgMTI4LjAwLDg3LjkzNiBDIDEyOC4wMCw5Mi4zMzYgMTMxLjU4NCw5NS45MzYgMTM2LjAwLDk1LjkzNiBMIDI2NC4wMCw5NS45MzYgWk0gMjY0LjAwLDE0My45MzYgQyAyNjguNDE2LDE0My45MzYgMjcyLjAwLDE0MC4zMzYgMjcyLjAwLDEzNS45MzYgQyAyNzIuMDAsMTMxLjUwNCAyNjguNDAsMTI3LjkzNiAyNjQuMDAsMTI3LjkzNiBMIDEzNi4wMCwxMjcuOTM2IEMgMTMxLjU4NCwxMjcuOTM2IDEyOC4wMCwxMzEuNTA0IDEyOC4wMCwxMzUuOTM2IEMgMTI4LjAwLDE0MC4zMzYgMTMxLjU4NCwxNDMuOTM2IDEzNi4wMCwxNDMuOTM2IEwgMjY0LjAwLDE0My45MzYgWk0gNDQwLjAwLDQ3LjkzNiBDIDQ0NC40MCw0Ny45MzYgNDQ4LjAwLDQ0LjMzNiA0NDguMDAsMzkuOTM2IEMgNDQ4LjAwLDM1LjUwNCA0NDQuNDAsMzEuOTM2IDQ0MC4wMCwzMS45MzYgTCAzMTIuMDAsMzEuOTM2IEMgMzA3LjU2OCwzMS45MzYgMzA0LjAwLDM1LjUwNCAzMDQuMDAsMzkuOTM2IEMgMzA0LjAwLDQ0LjMzNiAzMDcuNTY4LDQ3LjkzNiAzMTIuMDAsNDcuOTM2IEwgNDQwLjAwLDQ3LjkzNiBaTSA0NDAuMDAsOTUuOTM2IEMgNDQ0LjQwLDk1LjkzNiA0NDguMDAsOTIuMzM2IDQ0OC4wMCw4Ny45MzYgQyA0NDguMDAsODMuNTA0IDQ0NC40MCw3OS45MzYgNDQwLjAwLDc5LjkzNiBMIDMxMi4wMCw3OS45MzYgQyAzMDcuNTY4LDc5LjkzNiAzMDQuMDAsODMuNTA0IDMwNC4wMCw4Ny45MzYgQyAzMDQuMDAsOTIuMzM2IDMwNy41NjgsOTUuOTM2IDMxMi4wMCw5NS45MzYgTCA0NDAuMDAsOTUuOTM2IFpNIDQ0MC4wMCwxNDMuOTM2IEMgNDQ0LjQwLDE0My45MzYgNDQ4LjAwLDE0MC4zMzYgNDQ4LjAwLDEzNS45MzYgQyA0NDguMDAsMTMxLjUwNCA0NDQuNDAsMTI3LjkzNiA0NDAuMDAsMTI3LjkzNiBMIDMxMi4wMCwxMjcuOTM2IEMgMzA3LjU2OCwxMjcuOTM2IDMwNC4wMCwxMzEuNTA0IDMwNC4wMCwxMzUuOTM2IEMgMzA0LjAwLDE0MC4zMzYgMzA3LjU2OCwxNDMuOTM2IDMxMi4wMCwxNDMuOTM2IEwgNDQwLjAwLDE0My45MzYgWk0gNDQwLjAwLDIzOS45MzYgQyA0NDQuNDAsMjM5LjkzNiA0NDguMDAsMjM2LjM1MiA0NDguMDAsMjMxLjkzNiBDIDQ0OC4wMCwyMjcuNTIgNDQ0LjQwLDIyMy45MzYgNDQwLjAwLDIyMy45MzYgTCAxMzYuMDAsMjIzLjkzNiBDIDEzMS41ODQsMjIzLjkzNiAxMjguMDAsMjI3LjUyIDEyOC4wMCwyMzEuOTM2IEMgMTI4LjAwLDIzNi4zNTIgMTMxLjU4NCwyMzkuOTM2IDEzNi4wMCwyMzkuOTM2IEwgNDQwLjAwLDIzOS45MzYgWk0gNDQwLjAwLDE5MS45MzYgQyA0NDQuNDAsMTkxLjkzNiA0NDguMDAsMTg4LjMzNiA0NDguMDAsMTgzLjkzNiBDIDQ0OC4wMCwxNzkuNTA0IDQ0NC40MCwxNzUuOTM2IDQ0MC4wMCwxNzUuOTM2IEwgMTM2LjAwLDE3NS45MzYgQyAxMzEuNTg0LDE3NS45MzYgMTI4LjAwLDE3OS41MDQgMTI4LjAwLDE4My45MzYgQyAxMjguMDAsMTg4LjMzNiAxMzEuNTg0LDE5MS45MzYgMTM2LjAwLDE5MS45MzYgTCA0NDAuMDAsMTkxLjkzNiBaTSAxNDQuMDAsMjcyLjAwbCAxMTIuMDAsMC4wMCBjIDguODQ4LDAuMDAsIDE2LjAwLDcuMTUyLCAxNi4wMCwxNi4wMEwgMjcyLjAwLDM5OS45MzYgYzAuMDAsOC44NDgtNy4xNTIsMTYuMDAtMTYuMDAsMTYuMDBMIDE0NC4wMCw0MTUuOTM2IAoJCWMtOC44NDgsMC4wMC0xNi4wMC03LjE1Mi0xNi4wMC0xNi4wMEwgMTI4LjAwLDI4OC4wMCBDIDEyOC4wMCwyNzkuMTY4LCAxMzUuMTUyLDI3Mi4wMCwgMTQ0LjAwLDI3Mi4wMHogTSAxNjAuMDAsMzg0LjAwbCA4MC4wMCwwLjAwIGwwLjAwLTgwLjAwIGwtODAuMDAsMC4wMCBMIDE2MC4wMCwzODQuMDAgeiIgZGF0YS10YWdzPSJuZXdzIiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAxOTsiIGQ9Ik0gNDQ4LjAwLDQwMC4wMEwgNjQuMDAsNDAwLjAwIEMgMjguNjU2LDQwMC4wMCwwLjAwLDM3MS4zMjgsMC4wMCwzMzYuMDBsMC4wMC0yMDguMDAgYzAuMDAtMzUuMzQ0LCAyOC42NTYtNjQuMDAsIDY0LjAwLTY0LjAwbCAzODQuMDAsMC4wMCBjIDM1LjM0NCwwLjAwLCA2NC4wMCwyOC42NTYsIDY0LjAwLDY0LjAwTCA1MTIuMDAsMzM2LjAwIAoJQyA1MTIuMDAsMzcxLjMyOCwgNDgzLjM0NCw0MDAuMDAsIDQ0OC4wMCw0MDAuMDB6IE0gMzIuMDAsMzE2LjAwbCAxMTEuOTg0LTg0LjAwTCAzMi4wMCwxNDguMDBMIDMyLjAwLDMxNi4wMCB6IE0gNDgwLjAwLDEyOC4wMGMwLjAwLTE3LjY2NC0xNC4zNjgtMzIuMDAtMzIuMDAtMzIuMDBMIDY0LjAwLDk2LjAwIGMtMTcuNjQ4LDAuMDAtMzIuMDAsMTQuMzM2LTMyLjAwLDMyLjAwbCAxMjUuMzEyLDk0LjAwCglsIDY5Ljg4OC01Mi40MzJjIDguNTI4LTYuMzY4LCAxOC42NTYtOS42MCwgMjguODAtOS42MGMgMTAuMTI4LDAuMDAsIDIwLjI1NiwzLjIxNiwgMjguNzg0LDkuNjBsIDY5LjkwNCw1Mi40MzJMIDQ4MC4wMCwxMjguMDBMIDQ4MC4wMCwxMjguMDB6IE0gNDgwLjAwLDE0OC4wMGwtMTEyLjAwLDg0LjAwbCAxMTIuMDAsODQuMDAKCUwgNDgwLjAwLDE0OC4wMCB6IE0gMjc1LjE4NCwxODIuMzY4Yy01LjU4NC00LjE5Mi0xMi4yMDgtNi40MC0xOS4xODQtNi40MGMtNi45NzYsMC4wMC0xMy42MTYsMi4yMjQtMTkuMjAsNi40MEwgMTcwLjY0LDIzMi4wMGwtMTMuMzI4LDEwLjAwTCAzMi4wMCwzMzUuOTg0TCAzMi4wMCwzMzYuMDAgCgljMC4wMCwxNy42NDgsIDE0LjM1MiwzMi4wMCwgMzIuMDAsMzIuMDBsIDM4NC4wMCwwLjAwIGMgMTcuNjMyLDAuMDAsIDMyLjAwLTE0LjM1MiwgMzIuMDAtMzIuMDBMIDI3NS4xODQsMTgyLjM2OHoiIGRhdGEtdGFncz0ibWFpbCIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGUwMWE7IiBkPSJNIDQ2Ni42MjQsMzEyLjQ0OGMtMjAuMDAsNS4yNDgtNjcuMDI0LDUuMTg0LTEzNS44MDgsNy4wMDgKCQljIDMuMjQ4LDE1LjAwOCwgNC4wMCwyOC41NDQsIDQuMDAsNTIuNTc2QyAzMzQuODE2LDQyOS40NCwgMjkyLjk5Miw0ODAuMDAsIDI1Ni4wMCw0ODAuMDBjLTI2LjEyOCwwLjAwLTQ3LjY2NC0yMS4zNi00OC4wMC00Ny42MzJjLTAuMzUyLTMyLjIyNC0xMC4zMi04Ny44NzItNjQuMDAtMTE2LjA5NgoJCWMtMy45MzYtMi4wOC0xNS4yMC03LjYzMi0xNi44NDgtOC4zNTJMIDEyOC4wMCwzMDcuMjBDIDExOS42MCwzMTQuNDQ4LCAxMDcuOTUyLDMyMC4wMCwgOTYuMDAsMzIwLjAwTCA0OC4wMCwzMjAuMDAgYy0yNi40NjQsMC4wMC00OC4wMC0yMS41MzYtNDguMDAtNDguMDBsMC4wMC0yNTYuMDAgYzAuMDAtMjYuNDY0LCAyMS41MzYtNDguMDAsIDQ4LjAwLTQ4LjAwbCA0OC4wMCwwLjAwIAoJCWMgMTkuMDQsMC4wMCwgMzQuOTc2LDExLjUwNCwgNDIuNjg4LDI3LjYzMmMgMC4xOTItMC4wNjQsIDAuNTI4LTAuMTYsIDAuNzUyLTAuMTkyYyAxLjA1Ni0wLjI4OCwgMi4zMDQtMC41OTIsIDMuODI0LTAuOTkyCgkJQyAxNDMuNTUyLTUuNjMyLCAxNDMuNjk2LTUuNjY0LCAxNDQuMDAtNS43NDRjIDkuMjE2LTIuMjg4LCAyNi45Ni02LjUyOCwgNjQuODgtMTUuMjQ4QyAyMTcuMDA4LTIyLjg0OCwgMjU5Ljk1Mi0zMi4wMCwgMzA0LjQzMi0zMi4wMGwgODcuNDcyLDAuMDAgCgkJYyAyNi42NTYsMC4wMCwgNDUuODcyLDEwLjI1NiwgNTcuMzEyLDMwLjg0OGMgMC4xNiwwLjMyLCAzLjg0LDcuNTA0LCA2Ljg0OCwxNy4yMTZjIDIuMjU2LDcuMzEyLCAzLjA4OCwxNy42NjQsIDAuMzY4LDI4LjE2CgkJYyAxNy4xODQsMTEuODA4LCAyMi43MiwyOS42NjQsIDI2LjMyLDQxLjI4YyA2LjAzMiwxOS4wNTYsIDQuMjI0LDMzLjM3NiwgMC4wMzIsNDMuNjMyYyA5LjY2NCw5LjEyLCAxNy45MDQsMjMuMDI0LCAyMS4zNzYsNDQuMjU2CgkJYyAyLjE2LDEzLjE1Mi0wLjE2LDI2LjY4OC02LjIyNCwzNy45NTJjIDkuMDU2LDEwLjE3NiwgMTMuMTg0LDIyLjk3NiwgMTMuNjY0LDM0LjgxNmwgMC4xOTIsMy4zNDRDIDUxMS45MDQsMjUxLjYwLCA1MTIuMDAsMjUyLjg5NiwgNTEyLjAwLDI1Ny41MDQKCQlDIDUxMi4wMCwyNzcuNzEyLCA0OTguMDAsMzAzLjQ4OCwgNDY2LjYyNCwzMTIuNDQ4eiBNIDExMi4wMCwxNi4wMGMwLjAwLTguODQ4LTcuMTUyLTE2LjAwLTE2LjAwLTE2LjAwTCA0OC4wMCwwLjAwIGMtOC44NDgsMC4wMC0xNi4wMCw3LjE1Mi0xNi4wMCwxNi4wMEwgMzIuMDAsMjcyLjAwIGMwLjAwLDguODQ4LCA3LjE1MiwxNi4wMCwgMTYuMDAsMTYuMDBsIDQ4LjAwLDAuMDAgCgkJYyA4Ljg0OCwwLjAwLCAxNi4wMC03LjE1MiwgMTYuMDAtMTYuMDBMIDExMi4wMCwxNi4wMCB6IE0gNDc5LjYzMiwyNDcuNDRDIDQ3OS4zMTIsMjM5LjUzNiwgNDc2LjAwLDIyNC4wMCwgNDQ4LjAwLDIyNC4wMGMtMjQuMDAsMC4wMC0zMi4wMCwwLjAwLTMyLjAwLDAuMDBjLTQuNDMyLDAuMDAtOC4wMC0zLjU4NC04LjAwLTguMDBTIDQxMS41NjgsMjA4LjAwLCA0MTYuMDAsMjA4LjAwCgkJYzAuMDAsMC4wMCwgNy4wMDgsMC4wMCwgMzEuMDA4LDAuMDBzIDI3LjE1Mi0xOS45MDQsIDI1LjYwLTI5LjUwNEMgNDcwLjYyNCwxNjYuNTYsIDQ2NS4wMjQsMTQ0LjAwLCA0MzguMDAsMTQ0LjAwQyA0MTEuMDA4LDE0NC4wMCwgNDAwLjAwLDE0NC4wMCwgNDAwLjAwLDE0NC4wMGMtNC40MzIsMC4wMC04LjAwLTMuNTY4LTguMDAtOC4wMAoJCWMwLjAwLTQuNDAsIDMuNTY4LTguMDAsIDguMDAtOC4wMGMwLjAwLDAuMDAsIDE5LjAwOCwwLjAwLCAzMS41MDQsMC4wMGMgMjcuMDA4LDAuMDAsIDI0LjYyNC0yMC41OTIsIDIwLjc1Mi0zMi44OEMgNDQ3LjE1Miw3OC45NzYsIDQ0NC4wMzIsNjQuMDAsIDQxMC4wMCw2NC4wMAoJCWMtMTEuNTA0LDAuMDAtMjYuMDk2LDAuMDAtMjYuMDk2LDAuMDBjLTQuNDMyLDAuMDAtOC4wMC0zLjU2OC04LjAwLTguMDBjMC4wMC00LjQwLCAzLjU2OC04LjAwLCA4LjAwLTguMDBjMC4wMCwwLjAwLCAxMS4wODgsMC4wMCwgMjUuMDg4LDAuMDAKCQljIDE3LjUwNCwwLjAwLCAxOC4zMi0xNi41NiwgMTYuNDk2LTIyLjQ5NmMtMi4wMC02LjQ5Ni00LjM2OC0xMS4zMTItNC40NjQtMTEuNTM2QyA0MTYuMTkyLDUuMjQ4LCA0MDguNDAsMC4wMCwgMzkxLjkwNCwwLjAwbC04Ny40NzIsMC4wMCAKCQljLTQzLjkzNiwwLjAwLTg3LjUyLDkuOTY4LTg4LjY0LDEwLjIyNGMtNjYuNDY0LDE1LjMxMi02OS45NjgsMTYuNDk2LTc0LjE0NCwxNy42OGMwLjAwLDAuMDAtMTMuNTM2LDIuMjg4LTEzLjUzNiwxNC4wOTZMIDEyOC4wMCwyNjIuOTkyCgkJYzAuMDAsNy41MDQsIDQuNzg0LDE0LjI4OCwgMTIuNzA0LDE2LjY3MmMgMC45OTIsMC4zODQsIDIuMzM2LDAuODAsIDMuMjk2LDEuMjBjIDczLjA4OCwzMC4yNzIsIDk1LjM0NCw5Ni42NCwgOTYuMDAsMTUxLjEzNmMgMC4wOTYsNy42NjQsIDYuMDAsMTYuMDAsIDE2LjAwLDE2LjAwCgkJYyAxNi45MTIsMC4wMCwgNDYuODE2LTMzLjk1MiwgNDYuODE2LTc1Ljk2OEMgMzAyLjgxNiwzMzQuMDk2LCAzMDEuMjgsMzI3LjUzNiwgMjg4LjAwLDI4OC4wMGMgMTYwLjAwLDAuMDAsIDE1OC44OC0yLjMwNCwgMTcyLjk5Mi02LjAwQyA0NzguNDk2LDI3Ni45OTIsIDQ4MC4wMCwyNjIuNDk2LCA0ODAuMDAsMjU3LjUwNAoJCUMgNDgwLjAwLDI1Mi4wMTYsIDQ3OS44NCwyNTIuODE2LCA0NzkuNjMyLDI0Ny40NHpNIDcyLjAwLDY0LjAwQyA1OC43NTIsNjQuMDAsIDQ4LjAwLDUzLjI0OCwgNDguMDAsNDAuMDBTIDU4Ljc1MiwxNi4wMCwgNzIuMDAsMTYuMDAKCQlTIDk2LjAwLDI2Ljc1MiwgOTYuMDAsNDAuMDBTIDg1LjI0OCw2NC4wMCwgNzIuMDAsNjQuMDB6IE0gNzIuMDAsMzIuMDBDIDY3LjYwLDMyLjAwLCA2NC4wMCwzNS42MCwgNjQuMDAsNDAuMDBTIDY3LjYwLDQ4LjAwLCA3Mi4wMCw0OC4wMFMgODAuMDAsNDQuNDAsIDgwLjAwLDQwLjAwUyA3Ni40MCwzMi4wMCwgNzIuMDAsMzIuMDB6IiBkYXRhLXRhZ3M9Imxpa2UiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDFiOyIgZD0iTSA0MzIuMDAsNDgwLjAwTCA4MC4wMCw0ODAuMDAgQyA0NC42NTYsNDgwLjAwLCAxNi4wMCw0NTEuMzQ0LCAxNi4wMCw0MTYuMDBsMC4wMC0zODQuMDAgYzAuMDAtMzUuMzQ0LCAyOC42NTYtNjQuMDAsIDY0LjAwLTY0LjAwbCAzNTIuMDAsMC4wMCBjIDM1LjM0NCwwLjAwLCA2NC4wMCwyOC42NTYsIDY0LjAwLDY0LjAwTCA0OTYuMDAsNDE2LjAwIEMgNDk2LjAwLDQ1MS4zNDQsIDQ2Ny4zNDQsNDgwLjAwLCA0MzIuMDAsNDgwLjAwegoJCSBNIDQ2NC4wMCwzMi4wMGMwLjAwLTE3LjYzMi0xNC4zNjgtMzIuMDAtMzIuMDAtMzIuMDBMIDgwLjAwLDAuMDAgYy0xNy42NDgsMC4wMC0zMi4wMCwxNC4zNjgtMzIuMDAsMzIuMDBMIDQ4LjAwLDQxNi4wMCBjMC4wMCwxNy42NDgsIDE0LjM1MiwzMi4wMCwgMzIuMDAsMzIuMDBsIDM1Mi4wMCwwLjAwIGMgMTcuNjMyLDAuMDAsIDMyLjAwLTE0LjM1MiwgMzIuMDAtMzIuMDBMIDQ2NC4wMCwzMi4wMCB6TSA0MTYuMDAsNDE2LjAwTCA5Ni4wMCw0MTYuMDAgQyA4Ny4xNTIsNDE2LjAwLCA4MC4wMCw0MDguODQ4LCA4MC4wMCw0MDAuMDBsMC4wMC0yODguMDAgYzAuMDAtOC44NDgsIDcuMTUyLTE2LjAwLCAxNi4wMC0xNi4wMGwgMzIwLjAwLDAuMDAgYyA4Ljg0OCwwLjAwLCAxNi4wMCw3LjE1MiwgMTYuMDAsMTYuMDBMIDQzMi4wMCw0MDAuMDAgQyA0MzIuMDAsNDA4Ljg0OCwgNDI0Ljg0OCw0MTYuMDAsIDQxNi4wMCw0MTYuMDB6CgkJIE0gNDE2LjAwLDQwMC4wMGwwLjAwLTIyMS45MDQgbC01Mi4wMCw1Ni40OEMgMzYwLjk0NCwyMzguMDMyLCAzNTYuNTkyLDI0MC4wMCwgMzUyLjAwLDI0MC4wMHMtOC45NzYtMS45NjgtMTIuMDAtNS40MjRsLTQxLjY2NC00Ny4yMGwtMTI2LjMzNiwxNDMuMjAKCQlDIDE2OC45NiwzMzQuMDMyLCAxNjQuNTkyLDMzNi4wMCwgMTYwLjAwLDMzNi4wMFMgMTUxLjA0LDMzNC4wMzIsIDE0OC4wMCwzMzAuNTc2TCA5Ni4wMCwyNzAuNjA4TCA5Ni4wMCw0MDAuMDAgTCA0MTYuMDAsNDAwLjAwIHogTSA5Ni4wMCwyNDYuNDBsIDY0LjAwLDczLjYwbCAxMjkuMDU2LTE0Ni4yODhsIDkuMjgtMTAuNTI4TCAzNDIuNTI4LDExMi4wMEwgOTYuMDAsMTEyLjAwIEwgOTYuMDAsMjQ2LjQwIHoKCQkgTSAzNjMuODQsMTEyLjAwbC01NC44NDgsNjMuMjhMIDM1Mi4wMCwyMjQuMDBsIDY0LjAwLTcwLjA2NEwgNDE2LjAwLDExMi4wMCBMIDM2My44NCwxMTIuMDAgek0gMzIwLjAwLDI3Mi4wMGMgMjYuNDk2LDAuMDAsIDQ4LjAwLDIxLjQ4OCwgNDguMDAsNDguMDBzLTIxLjUwNCw0OC4wMC00OC4wMCw0OC4wMGMtMjYuNTI4LDAuMDAtNDguMDAtMjEuNDg4LTQ4LjAwLTQ4LjAwUyAyOTMuNDcyLDI3Mi4wMCwgMzIwLjAwLDI3Mi4wMHogTSAzMjAuMDAsMzUyLjAwYyAxNy42MzIsMC4wMCwgMzIuMDAtMTQuMzUyLCAzMi4wMC0zMi4wMAoJCXMtMTQuMzY4LTMyLjAwLTMyLjAwLTMyLjAwYy0xNy42NjQsMC4wMC0zMi4wMCwxNC4zNTItMzIuMDAsMzIuMDBTIDMwMi4zMzYsMzUyLjAwLCAzMjAuMDAsMzUyLjAweiIgZGF0YS10YWdzPSJwaG90byIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGUwMWM7IiBkPSJNIDUwMi42MjQsMzU4LjY0bC05Ni4wMCw5Ni4wMEMgNDAwLjYyNCw0NjAuNjQsIDM5Mi40NjQsNDY0LjAwLCAzODQuMDAsNDY0LjAwTCA0OC4wMCw0NjQuMDAgCgkJQyAyMS41MzYsNDY0LjAwLDAuMDAsNDQyLjQ4LDAuMDAsNDE2LjAwbDAuMDAtMzg0LjAwIGMwLjAwLTI2LjQ2NCwgMjEuNTM2LTQ4LjAwLCA0OC4wMC00OC4wMGwgNDE2LjAwLDAuMDAgYyAyNi40NjQsMC4wMCwgNDguMDAsMjEuNTM2LCA0OC4wMCw0OC4wMEwgNTEyLjAwLDMzNi4wMCBDIDUxMi4wMCwzNDQuNDk2LCA1MDguNjI0LDM1Mi42NCwgNTAyLjYyNCwzNTguNjR6IE0gNDgwLjAwLDMyLjAwCgkJYzAuMDAtOC44NDgtNy4xNTItMTYuMDAtMTYuMDAtMTYuMDBMIDQ4LjAwLDE2LjAwIGMtOC44NDgsMC4wMC0xNi4wMCw3LjE1Mi0xNi4wMCwxNi4wMEwgMzIuMDAsNDE2LjAwIGMwLjAwLDguODQ4LCA3LjE1MiwxNi4wMCwgMTYuMDAsMTYuMDBsIDMyMC4wMCwwLjAwIGwwLjAwLTY0LjAwIGwtMC4wMzIsMC4wMCBjMC4wMC0yNi41MTIsIDIxLjUwNC00OC4wMCwgNDguMDAtNDguMDBsIDE2LjAwLDAuMDAgTCA0ODAuMDAsMzIwLjAwIEwgNDgwLjAwLDMyLjAwIHogTSA0MzEuOTY4LDMzNi4wMGwtMTYuMDAsMC4wMCAKCQljLTE3LjYzMiwwLjAwLTMyLjAwLDE0LjM1Mi0zMi4wMCwzMi4wMEwgMzg0LjAwLDM2OC4wMCBMIDM4NC4wMCw0MzIuMDAgbCA5Ni4wMC05Ni4wMEwgNDMxLjk2OCwzMzYuMDAgek0gMjQ4LjAwLDM1Mi4wMCBDIDI0My41ODQsMzUyLjAwIDI0MC4wMCwzNTUuNTY4IDI0MC4wMCwzNjAuMDAgQyAyNDAuMDAsMzY0LjQzMiAyNDMuNTg0LDM2OC4wMCAyNDguMDAsMzY4LjAwIEwgMzI4LjAwLDM2OC4wMCBDIDMzMi40MCwzNjguMDAgMzM2LjAwLDM2NC40MTYgMzM2LjAwLDM2MC4wMCBDIDMzNi4wMCwzNTUuNTg0IDMzMi40MCwzNTIuMDAgMzI4LjAwLDM1Mi4wMCBMIDI0OC4wMCwzNTIuMDAgWk0gMjQ4LjAwLDMwNC4wMCBDIDI0My41ODQsMzA0LjAwIDI0MC4wMCwzMDcuNTg0IDI0MC4wMCwzMTIuMDAgQyAyNDAuMDAsMzE2LjQxNiAyNDMuNTg0LDMyMC4wMCAyNDguMDAsMzIwLjAwIEwgMzI4LjAwLDMyMC4wMCBDIDMzMi40MCwzMjAuMDAgMzM2LjAwLDMxNi40MTYgMzM2LjAwLDMxMi4wMCBDIDMzNi4wMCwzMDcuNTg0IDMzMi40MCwzMDQuMDAgMzI4LjAwLDMwNC4wMCBMIDI0OC4wMCwzMDQuMDAgWk0gMjQwLjAwLDI2NC4wMCBDIDI0MC4wMCwyNjguNDMyIDI0My41ODQsMjcyLjAwIDI0OC4wMCwyNzIuMDAgTCA0NDAuMDAsMjcyLjAwIEMgNDQ0LjQwLDI3Mi4wMCA0NDguMDAsMjY4LjQxNiA0NDguMDAsMjY0LjAwIEMgNDQ4LjAwLDI1OS41ODQgNDQ0LjQwLDI1Ni4wMCA0NDAuMDAsMjU2LjAwIEwgMjQ4LjAwLDI1Ni4wMCBDIDI0My41ODQsMjU2LjAwIDI0MC4wMCwyNTkuNTg0IDI0MC4wMCwyNjQuMDAgWk0gNDQwLjAwLDE3Ni4wMCBDIDQ0NC40MCwxNzYuMDAgNDQ4LjAwLDE3Mi40MzIgNDQ4LjAwLDE2OC4wMCBDIDQ0OC4wMCwxNjMuNjAgNDQ0LjQwLDE2MC4wMCA0NDAuMDAsMTYwLjAwIEwgNzIuMDAsMTYwLjAwIEMgNjcuNTg0LDE2MC4wMCA2NC4wMCwxNjMuNjAgNjQuMDAsMTY4LjAwIEMgNjQuMDAsMTcyLjQzMiA2Ny41ODQsMTc2LjAwIDcyLjAwLDE3Ni4wMCBMIDQ0MC4wMCwxNzYuMDAgWk0gNDQwLjAwLDEyOC4wMCBDIDQ0NC40MCwxMjguMDAgNDQ4LjAwLDEyNC40MzIgNDQ4LjAwLDEyMC4wMCBDIDQ0OC4wMCwxMTUuNjAgNDQ0LjQwLDExMi4wMCA0NDAuMDAsMTEyLjAwIEwgNzIuMDAsMTEyLjAwIEMgNjcuNTg0LDExMi4wMCA2NC4wMCwxMTUuNjAgNjQuMDAsMTIwLjAwIEMgNjQuMDAsMTI0LjQzMiA2Ny41ODQsMTI4LjAwIDcyLjAwLDEyOC4wMCBMIDQ0MC4wMCwxMjguMDAgWk0gNDQwLjAwLDgwLjAwIEMgNDQ0LjQwLDgwLjAwIDQ0OC4wMCw3Ni40MzIgNDQ4LjAwLDcyLjAwIEMgNDQ4LjAwLDY3LjYwIDQ0NC40MCw2NC4wMCA0NDAuMDAsNjQuMDAgTCA3Mi4wMCw2NC4wMCBDIDY3LjU4NCw2NC4wMCA2NC4wMCw2Ny42MCA2NC4wMCw3Mi4wMCBDIDY0LjAwLDc2LjQzMiA2Ny41ODQsODAuMDAgNzIuMDAsODAuMDAgTCA0NDAuMDAsODAuMDAgWk0gNDQwLjAwLDIyNC4wMCBDIDQ0NC40MCwyMjQuMDAgNDQ4LjAwLDIyMC40MTYgNDQ4LjAwLDIxNi4wMCBDIDQ0OC4wMCwyMTEuNTg0IDQ0NC40MCwyMDguMDAgNDQwLjAwLDIwOC4wMCBMIDcyLjAwLDIwOC4wMCBDIDY3LjU4NCwyMDguMDAgNjQuMDAsMjExLjU2OCA2NC4wMCwyMTYuMDAgQyA2NC4wMCwyMjAuNDMyIDY3LjU4NCwyMjQuMDAgNzIuMDAsMjI0LjAwIEwgNDQwLjAwLDIyNC4wMCBaTSA4MC4wMCwyNTYuMDBsIDExMi4wMCwwLjAwIGMgOC44NDgsMC4wMCwgMTYuMDAsNy4xNTIsIDE2LjAwLDE2LjAwTCAyMDguMDAsMzY4LjAwIGMwLjAwLDguODQ4LTcuMTUyLDE2LjAwLTE2LjAwLDE2LjAwTCA4MC4wMCwzODQuMDAgCgkJQyA3MS4xNTIsMzg0LjAwLCA2NC4wMCwzNzYuODQ4LCA2NC4wMCwzNjguMDBsMC4wMC05Ni4wMCBDIDY0LjAwLDI2My4xNjgsIDcxLjE1MiwyNTYuMDAsIDgwLjAwLDI1Ni4wMHogTSA5Ni4wMCwzNTIuMDBsIDgwLjAwLDAuMDAgbDAuMDAtNjQuMDAgTCA5Ni4wMCwyODguMDAgTCA5Ni4wMCwzNTIuMDAgeiIgZGF0YS10YWdzPSJub3RlIiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAxZDsiIGQ9Ik0gMjQwLjAwLDMyMC4wMEExNi4wMCwxNi4wMCAxODAuMDAgMSwwIDI3Mi4wMCwzMjBBMTYuMDAsMTYuMDAgMTgwLjAwIDEsMCAyNDAuMDAsMzIwek0gMjQwLjAwLDEyOC4wMEExNi4wMCwxNi4wMCAxODAuMDAgMSwwIDI3Mi4wMCwxMjhBMTYuMDAsMTYuMDAgMTgwLjAwIDEsMCAyNDAuMDAsMTI4ek0gMTQ0LjAwLDIyNC4wMEExNi4wMCwxNi4wMCAxODAuMDAgMSwwIDE3Ni4wMCwyMjRBMTYuMDAsMTYuMDAgMTgwLjAwIDEsMCAxNDQuMDAsMjI0ek0gMzM2LjAwLDIyNC4wMEExNi4wMCwxNi4wMCAxODAuMDAgMSwwIDM2OC4wMCwyMjRBMTYuMDAsMTYuMDAgMTgwLjAwIDEsMCAzMzYuMDAsMjI0ek0gMTcyLjExMiwxNTYuMTI4QTE2LjAwLDE2LjAwIDE4MC4wMCAxLDAgMjA0LjExMiwxNTYuMTI4QTE2LjAwLDE2LjAwIDE4MC4wMCAxLDAgMTcyLjExMiwxNTYuMTI4ek0gMTcyLjExMiwyOTEuODg4QTE2LjAwLDE2LjAwIDE4MC4wMCAxLDAgMjA0LjExMiwyOTEuODg4MDAwMDAwMDAwMDNBMTYuMDAsMTYuMDAgMTgwLjAwIDEsMCAxNzIuMTEyLDI5MS44ODgwMDAwMDAwMDAwM3pNIDMwNy44NzIsMTU2LjEyOEExNi4wMCwxNi4wMCAxODAuMDAgMSwwIDMzOS44NzIsMTU2LjEyOEExNi4wMCwxNi4wMCAxODAuMDAgMSwwIDMwNy44NzIsMTU2LjEyOHpNIDQxNi4wMCwyNTYuMDBjLTEuMTIsMC4wMC0yLjA2NC0wLjUyOC0zLjE1Mi0wLjY0Yy01LjU2OCwyNy45Mi0xOC43Miw1Mi44OTYtMzYuNzUyLDczLjUwNEwgMzUzLjEyLDQ1My44NTYKCQlDIDM1MC4zMiw0NjkuMDA4LCAzMzcuMDg4LDQ4MC4wMCwgMzIxLjY2NCw0ODAuMDBsLTEyOC4wMCwwLjAwIGMtMTUuNDI0LDAuMDAtMjguNjQtMTEuMDA4LTMxLjQ3Mi0yNi4xNmwtMjIuNDAtMTIwLjc4NEMgMTEyLjkxMiwzMDQuNDY0LCA5Ni4wMCwyNjYuMzY4LCA5Ni4wMCwyMjQuMDAKCQljMC4wMC00MS4zMjgsIDE2LjIyNC03OC40OCwgNDEuOTM2LTEwNi44NDhsIDIyLjU5Mi0xMjMuMDA4QyAxNjMuMzQ0LTIwLjk5MiwgMTc2LjU3Ni0zMi4wMCwgMTkyLjAwLTMyLjAwbCAxMjguMDAsMC4wMCBjIDE1LjQwOCwwLjAwLCAyOC42MjQsMTEuMDA4LCAzMS40NzIsMjYuMTZsIDIyLjc4NCwxMjIuOTEyCgkJYyAxOS4wMjQsMjAuOTc2LCAzMi44NDgsNDYuNzIsIDM4LjU5Miw3NS42MEMgNDEzLjkzNiwxOTIuNTI4LCA0MTQuODgsMTkyLjAwLCA0MTYuMDAsMTkyLjAwYyAxNy42NjQsMC4wMCwgMzIuMDAsMTQuMzM2LCAzMi4wMCwzMi4wMEMgNDQ4LjAwLDI0MS42OCwgNDMzLjY2NCwyNTYuMDAsIDQxNi4wMCwyNTYuMDB6IE0gMTkzLjY2NCw0NDguMDBsIDEyOC4wMCwwLjAwIAoJCWwgMTYuMDAtODYuMTkyQyAzMTQuMDMyLDM3NS41NTIsIDI4Ni45NzYsMzg0LjAwLCAyNTcuNjY0LDM4NC4wMGMtMjkuMjk2LDAuMDAtNTYuMzY4LTguNDQ4LTgwLjAwLTIyLjE5MkwgMTkzLjY2NCw0NDguMDB6IE0gMzIwLjAwLDAuMDBsLTEyOC4wMCwwLjAwIGwtMTYuMDAsODYuMTkyCgkJQyAxOTkuNjE2LDcyLjQ2NCwgMjI2LjY4OCw2NC4wMCwgMjU2LjAwLDY0LjAwYyAyOS4yOTYsMC4wMCwgNTYuMzg0LDguNDY0LCA4MC4wMCwyMi4xOTJMIDMyMC4wMCwwLjAweiBNIDI1Ni4wMCw5Ni4wMGMtNzAuNTc2LDAuMDAtMTI4LjAwLDU3LjQ0LTEyOC4wMCwxMjguMDBjMC4wMCw3MC41NzYsIDU3LjQyNCwxMjguMDAsIDEyOC4wMCwxMjguMDAKCQljIDcwLjU3NiwwLjAwLCAxMjguMDAtNTcuNDI0LCAxMjguMDAtMTI4LjAwQyAzODQuMDAsMTUzLjQ0LCAzMjYuNTYsOTYuMDAsIDI1Ni4wMCw5Ni4wMHpNIDMzNS4wNTYsMzAzLjU4NCBDIDMzNi45OTIsMzAxLjY0OCAzMzcuMTg0LDI5OC41MjggMzM1LjUwNCwyOTYuNDAgTCAyOTYuNjg4LDI0OC4wNjQgTCAyNjcuMTIsMjEyLjQ2NCBDIDI2NC4wOTYsMjA5LjU1MiAyNTkuOTM2LDIwOC4wNjQgMjU1LjkzNiwyMDguMDMyIEMgMjUxLjYzMiwyMDguMDY0IDI0Ny42MTYsMjA5LjcyOCAyNDQuNjI0LDIxMi43MDQgQyAyNDEuNjMyLDIxNS42OCAyNDAuMDAsMjE5LjY2NCAyNDAuMDAsMjIzLjg3MiBDIDI0MC4wMCwyMjguMjI0IDI0MS42OCwyMzIuMjg4IDI0NC43MzYsMjM1LjM2IEwgMzI3LjgwOCwzMDMuOTIgQyAzMzAuMDAsMzA1LjY4IDMzMy4xMiwzMDUuNTIgMzM1LjA1NiwzMDMuNTg0IFoiIGRhdGEtdGFncz0iY2xvY2siIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDFlOyIgZD0iTSA1MDQuNjg4LDQ3Ny40NEMgNTAyLjAzMiw0NzkuMTUyLCA0OTkuMDA4LDQ4MC4wMCwgNDk2LjAwLDQ4MC4wMGMtMy4wODgsMC4wMC02LjE5Mi0wLjg4LTguODgtMi42ODhsLTQ4MC4wMC0zMjAuMDAKCWMtNC45NDQtMy4yOC03LjY2NC05LjA1Ni03LjAyNC0xNC45NzZjIDAuNjA4LTUuOTA0LCA0LjQ0OC0xMS4wMDgsIDkuOTY4LTEzLjE4NGwgMTI1LjE4NC01MC4wOTZsIDU4Ljg2NC0xMDMuMDA4CgljIDIuODE2LTQuOTQ0LCA4LjA0OC04LjAwLCAxMy43MTItOC4wNjRjIDAuMDY0LDAuMDAsIDAuMTEyLDAuMDAsIDAuMTc2LDAuMDBjIDUuNjE2LDAuMDAsIDEwLjgzMiwyLjk3NiwgMTMuNzEyLDcuNzc2bCAzMy4yMzIsNTUuNDA4bCAxNTUuMTItNjIuMDMyCglDIDQxMS45NjgtMzEuNjMyLCA0MTMuOTY4LTMyLjAwLCA0MTYuMDAtMzIuMDBjIDIuNzIsMC4wMCwgNS40MDgsMC42ODgsIDcuODQsMi4wNjRjIDQuMjI0LDIuMzY4LCA3LjEyLDYuNTI4LCA3LjkzNiwxMS4zMTJsIDgwLjAwLDQ4MC4wMAoJQyA1MTIuODE2LDQ2Ny42NjQsIDUxMC4wMzIsNDczLjk2OCwgNTA0LjY4OCw0NzcuNDR6IE0gNTAuMTc2LDE0Ny41NjhMIDQyMC45NzYsMzk0Ljc4NEwgMTUxLjM3NiwxMDYuMTkyYy0xLjQyNCwwLjg0OC0yLjY4OCwxLjk2OC00LjI1NiwyLjU5MgoJTCA1MC4xNzYsMTQ3LjU2OHogTSAxNjMuMDI0LDk0Ljk0NGMtMC4wMzIsMC4wNjQtMC4wOCwwLjA5Ni0wLjExMiwwLjE2TCA0NjYuMDAsNDE5LjUwNEwgMjA3LjYxNiwxNi45MTJMIDE2My4wMjQsOTQuOTQ0eiBNIDQwMy40NzIsNi4yNTYKCWwtMTM2LjY1Niw1NC42NTZjLTMuMjQ4LDEuMjgtNi42MjQsMS43MTItOS45NjgsMS45MDRMIDQ2Ny4yOCwzODkuMDI0TCA0MDMuNDcyLDYuMjU2eiIgZGF0YS10YWdzPSJwYXBlcnBsYW5lIiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAxZjsiIGQ9Ik0gMTI4LjAwLDM4My42NjRMIDEyOC4wMCw0MzIuMDAgYzAuMDAsMjYuNDY0LTIxLjUzNiw0OC4wMC00OC4wMCw0OC4wMFMgMzIuMDAsNDU4LjQ2NCwgMzIuMDAsNDMyLjAwbDAuMDAtNDguMzM2IAoJCUMgMTIuNjcyLDM2OS4wMjQsMC4wMCwzNDYuMDk2LDAuMDAsMzIwLjAwcyAxMi42NzItNDkuMDI0LCAzMi4wMC02My42MzJMIDMyLjAwLDE2LjAwIGMwLjAwLTI2LjQ2NCwgMjEuNTM2LTQ4LjAwLCA0OC4wMC00OC4wMHMgNDguMDAsMjEuNTM2LCA0OC4wMCw0OC4wMEwgMTI4LjAwLDI1Ni4zNjggYyAxOS4zMjgsMTQuNTkyLCAzMi4wMCwzNy41MzYsIDMyLjAwLDYzLjYzMgoJCVMgMTQ3LjMyOCwzNjkuMDI0LCAxMjguMDAsMzgzLjY2NHogTSA2NC4wMCw0MzIuMDBjMC4wMCw4Ljg0OCwgNy4xNTIsMTYuMDAsIDE2LjAwLDE2LjAwcyAxNi4wMC03LjE1MiwgMTYuMDAtMTYuMDBsMC4wMC0zMy42MCBDIDkwLjgzMiwzOTkuNDQsIDg1LjQ4OCw0MDAuMDAsIDgwLjAwLDQwMC4wMFMgNjkuMTY4LDM5OS40NCwgNjQuMDAsMzk4LjQwTCA2NC4wMCw0MzIuMDAgeiBNIDk2LjAwLDE2LjAwCgkJYzAuMDAtOC44NDgtNy4xNTItMTYuMDAtMTYuMDAtMTYuMDBzLTE2LjAwLDcuMTUyLTE2LjAwLDE2LjAwTCA2NC4wMCwyNDEuNjMyIEMgNjkuMTY4LDI0MC41NiwgNzQuNTEyLDI0MC4wMCwgODAuMDAsMjQwLjAwcyAxMC44MzIsMC41NiwgMTYuMDAsMS42MzJMIDk2LjAwLDE2LjAwIHogTSAxMjUuODQsMzA2LjU2CgkJYy0wLjI1Ni0wLjg0OC0wLjQ4LTEuNjgtMC43ODQtMi41MjhjLTEuNTItNC4yMjQtMy40NzItOC4yMjQtNi4wNDgtMTEuNzc2Yy0wLjA2NC0wLjA5Ni0wLjE2LTAuMTYtMC4yMjQtMC4yNTYKCQljLTIuNzg0LTMuODA4LTYuMDk2LTcuMTg0LTkuODU2LTEwLjAzMmMtMC4wNjQtMC4wNjQtMC4xMTItMC4wOTYtMC4xNi0wLjEyOGMtMy44NTYtMi45MTItOC4xNi01LjI0OC0xMi43ODQtNi44OAoJCUMgOTAuOTc2LDI3My4xNTIsIDg1LjY0OCwyNzIuMDAsIDgwLjAwLDI3Mi4wMHMtMTAuOTc2LDEuMTUyLTE2LjAwLDIuOTc2Yy00LjYyNCwxLjYzMi04LjkyOCwzLjk2OC0xMi43ODQsNi44OGMtMC4wNDgsMC4wMzItMC4wOTYsMC4wNjQtMC4xNiwwLjEyOAoJCWMtMy43NiwyLjg0OC03LjA3Miw2LjIyNC05Ljg1NiwxMC4wMzJjLTAuMDY0LDAuMDk2LTAuMTYsMC4xNi0wLjIyNCwwLjI1NmMtMi41NzYsMy41NjgtNC41MjgsNy41NjgtNi4wNDgsMTEuNzc2CgkJYy0wLjMwNCwwLjg0OC0wLjUyOCwxLjY4LTAuNzg0LDIuNTI4QyAzMi44OCwzMTAuODQ4LCAzMi4wMCwzMTUuMzEyLCAzMi4wMCwzMjAuMDBjMC4wMCw0LjcyLCAwLjg4LDkuMTg0LCAyLjE2LDEzLjQ3MgoJCWMgMC4yNTYsMC44NDgsIDAuNDgsMS42OCwgMC43ODQsMi40OTZDIDM2LjQ0OCwzNDAuMTkyLCAzOC40MCwzNDQuMTkyLCA0MC45OTIsMzQ3Ljc3NmMgMC4wNjQsMC4wOTYsIDAuMTYsMC4xNiwgMC4yMjQsMC4yNTYKCQljIDIuNzg0LDMuNzc2LCA2LjA5Niw3LjE4NCwgOS44NTYsMTAuMDMyYyAwLjA2NCwwLjAzMiwgMC4xMTIsMC4wOTYsIDAuMTYsMC4xMjhDIDU1LjA3MiwzNjEuMDU2LCA1OS4zNzYsMzYzLjQwOCwgNjQuMDAsMzY1LjA1NgoJCUMgNjkuMDI0LDM2Ni44NDgsIDc0LjM1MiwzNjguMDAsIDgwLjAwLDM2OC4wMHMgMTAuOTc2LTEuMTUyLCAxNi4wMC0yLjk0NGMgNC42MjQtMS42NjQsIDguOTI4LTQuMDAsIDEyLjc4NC02Ljg4YyAwLjA0OC0wLjAzMiwgMC4wOTYtMC4wOTYsIDAuMTYtMC4xMjgKCQljIDMuNzYtMi44NDgsIDcuMDcyLTYuMjU2LCA5Ljg1Ni0xMC4wMzJjIDAuMDY0LTAuMDk2LCAwLjE2LTAuMTYsIDAuMjI0LTAuMjU2QyAxMjEuNjAsMzQ0LjE5MiwgMTIzLjU1MiwzNDAuMTkyLCAxMjUuMDU2LDMzNS45NjgKCQlDIDEyNS4zNiwzMzUuMTUyLCAxMjUuNjAsMzM0LjMyLCAxMjUuODQsMzMzLjQ3MkMgMTI3LjEyLDMyOS4xODQsIDEyOC4wMCwzMjQuNzIsIDEyOC4wMCwzMjAuMDBDIDEyOC4wMCwzMTUuMzEyLCAxMjcuMTIsMzEwLjg0OCwgMTI1Ljg0LDMwNi41NnpNIDQ4MC4wMCwzODMuNjY0TCA0ODAuMDAsNDMyLjAwIGMwLjAwLDI2LjQ2NC0yMS41MzYsNDguMDAtNDguMDAsNDguMDBzLTQ4LjAwLTIxLjUzNi00OC4wMC00OC4wMGwwLjAwLTQ4LjMzNiAKCQlDIDM2NC42NTYsMzY5LjAyNCwgMzUyLjAwLDM0Ni4wOTYsIDM1Mi4wMCwzMjAuMDBzIDEyLjY1Ni00OS4wMjQsIDMyLjAwLTYzLjYzMkwgMzg0LjAwLDE2LjAwIGMwLjAwLTI2LjQ2NCwgMjEuNTM2LTQ4LjAwLCA0OC4wMC00OC4wMHMgNDguMDAsMjEuNTM2LCA0OC4wMCw0OC4wMEwgNDgwLjAwLDI1Ni4zNjggYyAxOS4zMTIsMTQuNTkyLCAzMi4wMCwzNy41MzYsIDMyLjAwLDYzLjYzMgoJCVMgNDk5LjMxMiwzNjkuMDI0LCA0ODAuMDAsMzgzLjY2NHogTSA0MTYuMDAsNDMyLjAwYzAuMDAsOC44NDgsIDcuMTUyLDE2LjAwLCAxNi4wMCwxNi4wMHMgMTYuMDAtNy4xNTIsIDE2LjAwLTE2LjAwbDAuMDAtMzMuNjAgQyA0NDIuODE2LDM5OS40NCwgNDM3LjQ3Miw0MDAuMDAsIDQzMi4wMCw0MDAuMDBjLTUuNTA0LDAuMDAtMTAuODQ4LTAuNTYtMTYuMDAtMS42MEwgNDE2LjAwLDQzMi4wMCB6CgkJIE0gNDQ4LjAwLDE2LjAwYzAuMDAtOC44NDgtNy4xNTItMTYuMDAtMTYuMDAtMTYuMDBzLTE2LjAwLDcuMTUyLTE2LjAwLDE2LjAwTCA0MTYuMDAsMjQxLjYzMiBDIDQyMS4xNTIsMjQwLjU2LCA0MjYuNDk2LDI0MC4wMCwgNDMyLjAwLDI0MC4wMGMgNS40NzIsMC4wMCwgMTAuODE2LDAuNTYsIDE2LjAwLDEuNjMyTCA0NDguMDAsMTYuMDAgeiBNIDQ3Ny44NCwzMDYuNTYKCQljLTAuMjU2LTAuODQ4LTAuNDk2LTEuNjgtMC43ODQtMi41MjhjLTEuNTM2LTQuMjI0LTMuNDcyLTguMjI0LTYuMDY0LTExLjc3NmMtMC4wNjQtMC4wOTYtMC4xNi0wLjE2LTAuMjI0LTAuMjU2CgkJYy0yLjc4NC0zLjgwOC02LjA5Ni03LjE4NC05Ljg0LTEwLjAzMmMtMC4wNjQtMC4wNjQtMC4xMjgtMC4wOTYtMC4xNi0wLjEyOGMtMy44NzItMi45MTItOC4xNi01LjI0OC0xMi43ODQtNi44OAoJCUMgNDQyLjk3NiwyNzMuMTUyLCA0MzcuNjMyLDI3Mi4wMCwgNDMyLjAwLDI3Mi4wMGMtNS42NjQsMC4wMC0xMC45NzYsMS4xNTItMTYuMDAsMi45NzZjLTQuNjI0LDEuNjMyLTguOTQ0LDMuOTY4LTEyLjc4NCw2Ljg4CgkJYy0wLjA2NCwwLjAzMi0wLjA5NiwwLjA2NC0wLjE2LDAuMTI4Yy0zLjc3NiwyLjg0OC03LjA4OCw2LjIyNC05Ljg3MiwxMC4wMzJjLTAuMDY0LDAuMDk2LTAuMTYsMC4xNi0wLjIyNCwwLjI1NgoJCWMtMi41NiwzLjU2OC00LjUyOCw3LjU2OC02LjAzMiwxMS43NzZjLTAuMzIsMC44NDgtMC41MjgsMS42OC0wLjc4NCwyLjUyOEMgMzg0Ljg4LDMxMC44NDgsIDM4NC4wMCwzMTUuMzEyLCAzODQuMDAsMzIwLjAwCgkJYzAuMDAsNC43MiwgMC44OCw5LjE4NCwgMi4xNiwxMy40NzJjIDAuMjU2LDAuODQ4LCAwLjQ2NCwxLjY4LCAwLjc4NCwyLjQ5NmMgMS41MDQsNC4yMjQsIDMuNDcyLDguMjI0LCA2LjAzMiwxMS44MDgKCQljIDAuMDY0LDAuMDk2LCAwLjE2LDAuMTYsIDAuMjI0LDAuMjU2YyAyLjc4NCwzLjc3NiwgNi4wOTYsNy4xODQsIDkuODcyLDEwLjAzMmMgMC4wNjQsMC4wMzIsIDAuMDk2LDAuMDk2LCAwLjE2LDAuMTI4CgkJYyAzLjg0LDIuODgsIDguMTYsNS4yMTYsIDEyLjc4NCw2Ljg4QyA0MjEuMDI0LDM2Ni44NDgsIDQyNi4zMzYsMzY4LjAwLCA0MzIuMDAsMzY4LjAwYyA1LjYzMiwwLjAwLCAxMC45NzYtMS4xNTIsIDE2LjAwLTIuOTQ0YyA0LjYyNC0xLjY2NCwgOC45MTItNC4wMCwgMTIuNzg0LTYuODgKCQljIDAuMDMyLTAuMDMyLCAwLjA5Ni0wLjA5NiwgMC4xNi0wLjEyOGMgMy43NDQtMi44NDgsIDcuMDU2LTYuMjU2LCA5Ljg0LTEwLjAzMmMgMC4wNjQtMC4wOTYsIDAuMTYtMC4xNiwgMC4yMjQtMC4yNTYKCQljIDIuNTkyLTMuNjAsIDQuNTI4LTcuNjAsIDYuMDY0LTExLjgwOGMgMC4yODgtMC44MTYsIDAuNTI4LTEuNjY0LCAwLjc4NC0yLjQ5NkMgNDc5LjEyLDMyOS4xODQsIDQ4MC4wMCwzMjQuNzIsIDQ4MC4wMCwzMjAuMDAKCQlDIDQ4MC4wMCwzMTUuMzEyLCA0NzkuMTIsMzEwLjg0OCwgNDc3Ljg0LDMwNi41NnpNIDMwNC4wMCwxOTEuNjY0TCAzMDQuMDAsNDMyLjAwIGMwLjAwLDI2LjQ2NC0yMS41MzYsNDguMDAtNDguMDAsNDguMDBzLTQ4LjAwLTIxLjUzNi00OC4wMC00OC4wMGwwLjAwLTI0MC4zMzYgCgkJYy0xOS4zMjgtMTQuNjI0LTMyLjAwLTM3LjU2OC0zMi4wMC02My42NjRzIDEyLjY3Mi00OS4wMjQsIDMyLjAwLTYzLjYzMkwgMjA4LjAwLDE2LjAwIGMwLjAwLTI2LjQ2NCwgMjEuNTM2LTQ4LjAwLCA0OC4wMC00OC4wMHMgNDguMDAsMjEuNTM2LCA0OC4wMCw0OC4wMGwwLjAwLDQ4LjM2OCBjIDE5LjMxMiwxNC41OTIsIDMyLjAwLDM3LjUzNiwgMzIuMDAsNjMuNjMyCgkJUyAzMjMuMzEyLDE3Ny4wMjQsIDMwNC4wMCwxOTEuNjY0eiBNIDI0MC4wMCw0MzIuMDBjMC4wMCw4Ljg0OCwgNy4xNTIsMTYuMDAsIDE2LjAwLDE2LjAwYyA4Ljg0OCwwLjAwLCAxNi4wMC03LjE1MiwgMTYuMDAtMTYuMDBsMC4wMC0yMjUuNjAgYy01LjE4NCwxLjAyNC0xMC41MjgsMS42MC0xNi4wMCwxLjYwCgkJYy01LjQ4OCwwLjAwLTEwLjgzMi0wLjU2LTE2LjAwLTEuNjBMIDI0MC4wMCw0MzIuMDAgeiBNIDI3Mi4wMCwxNi4wMGMwLjAwLTguODQ4LTcuMTUyLTE2LjAwLTE2LjAwLTE2LjAwYy04Ljg0OCwwLjAwLTE2LjAwLDcuMTUyLTE2LjAwLDE2LjAwbDAuMDAsMzMuNjMyIEMgMjQ1LjE2OCw0OC41NiwgMjUwLjUxMiw0OC4wMCwgMjU2LjAwLDQ4LjAwCgkJYyA1LjQ3MiwwLjAwLCAxMC44MTYsMC41NiwgMTYuMDAsMS42MzJMIDI3Mi4wMCwxNi4wMCB6IE0gMzAxLjg0LDExNC41NmMtMC4yNTYtMC44NDgtMC40OTYtMS42OC0wLjc4NC0yLjUyOGMtMS41MzYtNC4yMjQtMy40NzItOC4yMjQtNi4wNjQtMTEuNzc2CgkJYy0wLjA2NC0wLjA5Ni0wLjE2LTAuMTYtMC4yMjQtMC4yNTZjLTIuNzg0LTMuODA4LTYuMDk2LTcuMTg0LTkuODQtMTAuMDMyYy0wLjA2NC0wLjA2NC0wLjEyOC0wLjA5Ni0wLjE2LTAuMTI4CgkJYy0zLjg3Mi0yLjkxMi04LjE2LTUuMjQ4LTEyLjc4NC02Ljg4QyAyNjYuOTc2LDgxLjE1MiwgMjYxLjYzMiw4MC4wMCwgMjU2LjAwLDgwLjAwYy01LjY0OCwwLjAwLTEwLjk3NiwxLjE1Mi0xNi4wMCwyLjk3NgoJCWMtNC42MjQsMS42MzItOC45MjgsMy45NjgtMTIuNzg0LDYuODhjLTAuMDQ4LDAuMDMyLTAuMDk2LDAuMDY0LTAuMTYsMC4xMjhjLTMuNzYsMi44NDgtNy4wNzIsNi4yMjQtOS44NTYsMTAuMDMyCgkJYy0wLjA2NCwwLjA5Ni0wLjE2LDAuMTYtMC4yMjQsMC4yNTZjLTIuNTc2LDMuNTY4LTQuNTI4LDcuNTY4LTYuMDQ4LDExLjc3NmMtMC4zMDQsMC44NDgtMC41MjgsMS42OC0wLjc4NCwyLjUyOAoJCUMgMjA4Ljg4LDExOC44NDgsIDIwOC4wMCwxMjMuMzEyLCAyMDguMDAsMTI4LjAwYzAuMDAsNC43MiwgMC44OCw5LjE4NCwgMi4xNiwxMy40NzJjIDAuMjU2LDAuODQ4LCAwLjQ4LDEuNjgsIDAuNzg0LDIuNDk2CgkJYyAxLjUyLDQuMjI0LCAzLjQ3Miw4LjIyNCwgNi4wNDgsMTEuODA4YyAwLjA2NCwwLjA5NiwgMC4xNiwwLjE2LCAwLjIyNCwwLjI1NmMgMi43ODQsMy43NzYsIDYuMDk2LDcuMTg0LCA5Ljg1NiwxMC4wMzIKCQljIDAuMDY0LDAuMDMyLCAwLjExMiwwLjA5NiwgMC4xNiwwLjEyOGMgMy44NTYsMi44OCwgOC4xNiw1LjIxNiwgMTIuNzg0LDYuODhDIDI0NS4wMjQsMTc0Ljg0OCwgMjUwLjM1MiwxNzYuMDAsIDI1Ni4wMCwxNzYuMDBjIDUuNjMyLDAuMDAsIDEwLjk3Ni0xLjE1MiwgMTYuMDAtMi45NDQKCQljIDQuNjI0LTEuNjY0LCA4LjkxMi00LjAwLCAxMi43ODQtNi44OGMgMC4wMzItMC4wMzIsIDAuMDk2LTAuMDk2LCAwLjE2LTAuMTI4YyAzLjc0NC0yLjg0OCwgNy4wNTYtNi4yNTYsIDkuODQtMTAuMDMyCgkJYyAwLjA2NC0wLjA5NiwgMC4xNi0wLjE2LCAwLjIyNC0wLjI1NmMgMi41OTItMy42MCwgNC41MjgtNy42MCwgNi4wNjQtMTEuODA4YyAwLjI4OC0wLjgxNiwgMC41MjgtMS42NjQsIDAuNzg0LTIuNDk2CgkJQyAzMDMuMTIsMTM3LjE4NCwgMzA0LjAwLDEzMi43MiwgMzA0LjAwLDEyOC4wMEMgMzA0LjAwLDEyMy4zMTIsIDMwMy4xMiwxMTguODQ4LCAzMDEuODQsMTE0LjU2eiIgZGF0YS10YWdzPSJwYXJhbXMiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDIwOyIgZD0iTSA1MDIuNjQsMzEwLjYyNGwtMTYwLjAwLDE2MC4wMEMgMzM0LjcwNCw0NzguNTYsIDMyMy4yMCw0ODEuNzQ0LCAzMTIuMzA0LDQ3OS4wNTYKCQljLTUuNzQ0LTEuNDA4LTEwLjg4LTQuMzY4LTE0Ljk0NC04LjQzMmMtMy42MzItMy42MzItNi4zNjgtOC4xMjgtNy45MzYtMTMuMTUyYy03LjI0OC0yMy41MDQtMTkuNzc2LTQzLjkzNi0zOC4zMi02Mi40NjQKCQlDIDIyNi4zMzYsMzcwLjI1NiwgMTk0LjA4LDM1MS41MDQsIDE1OS45NTIsMzMxLjY4Yy0zNi4yMjQtMjAuOTkyLTczLjY0OC00Mi43NTItMTA0LjMyLTczLjQwOGMtMjYuMDY0LTI2LjA5Ni00My44MDgtNTUuMTItNTQuMjA4LTg4LjgxNgoJCWMtMy41MDQtMTEuMzc2LTAuNDQ4LTIzLjY4LCA3LjkzNi0zMi4wOTZsIDE2MC4wMC0xNjAuMDBjIDcuOTM2LTcuOTM2LCAxOS40NC0xMS4xMiwgMzAuMzM2LTguNDMyYyA1Ljc0NCwxLjQ0LCAxMC44OCw0LjM2OCwgMTQuOTQ0LDguNDMyCgkJYyAzLjYzMiwzLjYzMiwgNi4zNjgsOC4xMjgsIDcuOTM2LDEzLjE4NGMgNy4yNjQsMjMuNTA0LCAxOS43OTIsNDMuOTM2LCAzOC4zNTIsNjIuNDY0YyAyNC43NTIsMjQuNzUyLCA1Ni45OTIsNDMuNDcyLCA5MS4xNTIsNjMuMjgKCQljIDM2LjE5MiwyMS4wMjQsIDczLjYzMiw0Mi43ODQsIDEwNC4yODgsNzMuNDRjIDI2LjA2NCwyNi4wNjQsIDQzLjgwOCw1NS4xMiwgNTQuMjI0LDg4LjgxNkMgNTE0LjA4LDI4OS45MDQsIDUxMS4wMDgsMzAyLjI1NiwgNTAyLjY0LDMxMC42MjR6IE0gMTkyLjAwLDAuMDAKCQlDIDEzOS4wMDgsNTIuOTkyLCA4NC45OTIsMTA3LjAyNCwgMzIuMDAsMTYwLjAwYyA0NS40NzIsMTQ3LjIxNiwgMjQyLjU2LDE0MC43ODQsIDI4OC4wMCwyODguMDBjIDUyLjk5Mi01Mi45NzYsIDEwNy4wMjQtMTA3LjAwOCwgMTYwLjAzMi0xNjAuMDAKCQlDIDQzNC41NDQsMTQwLjgxNiwgMjM3LjQ1NiwxNDcuMjE2LCAxOTIuMDAsMC4wMHpNIDMxMi45OTIsMjQxLjYwYy01LjIxNiw0LjM2OC0xMC40NjQsNy4zNDQtMTUuNzQ0LDguODE2CgkJYy01LjI0OCwxLjQ3Mi0xMC40OTYsMi4wNjQtMTUuODA4LDEuNjhjLTUuMjQ4LTAuNDAtMTAuNjI0LTEuNjAtMTYuMDAtMy42NjRjLTUuMzc2LTIuMDk2LTEwLjc4NC00LjM2OC0xNi4yMjQtNy4wMDgKCQljLTguNTkyLDkuODcyLTE3LjE4NCwxOS42MzItMjUuNzc2LDI4LjY4OGMgMy44NzIsMy41MDQsIDcuNjMyLDUuMjgsIDExLjI0OCw1LjQwOGMgMy42MzIsMC4xNiwgNy4xMi0wLjIyNCwgMTAuNDMyLTEuMDU2CgkJYyAzLjM3Ni0wLjg0OCwgNi40NjQtMS41NjgsIDkuMzEyLTIuMTI4YyAyLjg4LTAuNTYsIDUuMzc2LDAuMDY0LCA3LjU2OCwxLjkwNGMgMi4zMiwyLjAwLCAzLjYwLDQuNTkyLCAzLjc3Niw3LjcxMgoJCWMgMC4xNiwzLjE1Mi0xLjAyNCw2LjIyNC0zLjY2NCw5LjIxNmMtMy4zNzYsMy44NzItNy40NCw2LjIyNC0xMi4zMiw3LjA4OGMtNC44MTYsMC44NDgtOS43NDQsMC43ODQtMTQuODgtMC4zMzYKCQljLTUuMDU2LTEuMTUyLTkuODcyLTMuMDU2LTE0LjQzMi01Ljc0NHMtOC4yMjQtNS40NC0xMC45NDQtOC4xMjhjLTEuMDQsMC45OTItMi4wOCwxLjk2OC0zLjEyLDIuOTQ0CgkJYy0xLjE1MiwxLjA1Ni0yLjU5MiwxLjYzMi00LjMyLDEuNjBjLTEuNzQ0LDAuMDAtMy4xODQtMC43NTItNC4zNjgtMi4xMjhjLTEuMTUyLTEuMzQ0LTEuNjgtMi45MTItMS40NzItNC41NgoJCWMgMC4xNi0xLjcxMiwgMC44NDgtMy4wMjQsIDIuMDMyLTQuMDMyYyAxLjA0LTAuODgsIDIuMDgtMS43NDQsIDMuMTItMi42NTZjLTQuMDk2LTQuOTQ0LTcuNDcyLTEwLjQwLTEwLjEyOC0xNi4xNgoJCWMtMi42ODgtNS43NzYtNC4yODgtMTEuNTA0LTQuODgtMTcuMDU2Yy0wLjYyNC01LjYwLTAuMDMyLTEwLjcyLCAxLjY4LTE1LjQ3MmMgMS43MTItNC43ODQsIDQuODgtOC44NDgsIDkuNTA0LTEyLjY4OAoJCWMgNy41MzYtNi4yNTYsIDE2LjQwLTguOTEyLCAyNi42ODgtOC4zMmMgMTAuMjU2LDAuNjI0LCAyMS4zMTIsMy42OCwgMzMuMjAsMTAuMDY0YyA5LjQ0LTEwLjkxMiwgMTguOTEyLTIxLjc0NCwgMjguMzY4LTMxLjgwOAoJCWMtNC4wMC0zLjM3Ni03LjUwNC01LjMxMi0xMC41OTItNS45MzZjLTMuMDg4LTAuNjU2LTUuODQtMC41OTItOC4zMzYsMC4xNmMtMi40OTYsMC43ODQtNC44MTYsMS45MDQtNi45NDQsMy4zNDQKCQljLTIuMTI4LDEuNDcyLTQuMjI0LDIuNzItNi4zMiwzLjc0NGMtMi4wNjQsMS4wMjQtNC4xOTIsMS42MC02LjM2OCwxLjYzMnMtNC40OTYtMS4wMjQtNy4wNTYtMy4yMTYKCQljLTIuNjI0LTIuMjg4LTMuOTM2LTQuOTQ0LTMuOTM2LTcuOTM2YzAuMDAtMi45NzYsIDEuMzc2LTYuMDAsIDQuMDY0LTkuMDU2YyAyLjcyLTMuMDU2LCA2LjI1Ni01LjYzMiwgMTAuNTI4LTcuNjY0CgkJcyA5LjEwNC0zLjMxMiwgMTQuNDE2LTMuNjY0YyA1LjMxMi0wLjM2OCwgMTAuOTEyLDAuNDMyLCAxNi44MTYsMi42MjRjIDUuOTM2LDIuMTYsIDExLjgwOCw2LjA2NCwgMTcuNjAsMTEuODcyCgkJYyAyLjc4NC0yLjcyLCA1LjYwLTUuMzEyLCA4LjQwLTcuODA4YyAxLjE4NC0xLjAyNCwgMi42MjQtMS41MzYsIDQuMzY4LTEuNDA4YyAxLjY4LDAuMDY0LCAzLjE1MiwwLjg0OCwgNC4zMiwyLjI1NgoJCWMgMS4xODQsMS40NCwgMS42OCwzLjAyNCwgMS41MDQsNC42ODhjLTAuMTYsMS42OC0wLjg0OCwyLjk3Ni0yLjAwLDMuOTA0Yy0yLjgxNiwyLjI1Ni01LjYzMiw0LjYyNC04LjQzMiw3LjEyCgkJYyA0Ljc4NCw1Ljg3MiwgOC42MjQsMTIuMDY0LCAxMS40NzIsMTguMTkyYyAyLjg0OCw2LjE2LCA0LjUyOCwxMi4wOTYsIDUuMDg4LDE3LjYwYyAwLjU2LDUuNTM2LTAuMDk2LDEwLjUyOC0xLjkwNCwxNS4wNTYKCQlDIDMyMC43MzYsMjMzLjg3MiwgMzE3LjU1MiwyMzcuODA4LCAzMTIuOTkyLDI0MS42MHogTSAyMjMuNTM2LDIzMC43NTJjLTQuNTI4LTAuMTkyLTguNDgsMS4zMTItMTEuOTM2LDQuNjU2CgkJYy0xLjQ3MiwxLjQwOC0yLjQ5NiwzLjEyLTMuMTIsNS4xNTJjLTAuNjU2LDIuMDMyLTAuODgsNC4yNTYtMC42MjQsNi42ODhjIDAuMjI0LDIuNDAsIDAuOTQ0LDQuOTEyLCAyLjE5Miw3LjQ0CgkJYyAxLjE4NCwyLjUyOCwgMi45NDQsNS4wNTYsIDUuMTg0LDcuNTA0YyA4LjExMi04LjA2NCwgMTYuMjA4LTE2LjkxMiwgMjQuMzItMjYuMDY0QyAyMzMuNDA4LDIzMi43NTIsIDIyOC4wNjQsMjMwLjk0NCwgMjIzLjUzNiwyMzAuNzUyegoJCSBNIDI5OS4wMDgsMTk4LjcyYy0xLjQ0LTIuNjU2LTMuMDg4LTUuMDI0LTUuMDI0LTcuMDg4Yy04Ljk3Niw5LjA1Ni0xNy45MzYsMTkuMDA4LTI2Ljg4LDI5LjIxNmMgMi4yODgsMS4wMjQsIDQuNjg4LDIuMDk2LCA3LjI4LDMuMTg0CgkJcyA1LjE4NCwxLjgwOCwgNy43NzYsMi4yNTZjIDIuNjU2LDAuNDAsIDUuMjgsMC4yODgsIDcuOTA0LTAuMzM2YyAyLjU5Mi0wLjY1NiwgNS4wNTYtMi4wNjQsIDcuMzQ0LTQuMjg4CgkJYyAyLjI1Ni0yLjI1NiwgMy42OC00LjU5MiwgNC4yNTYtNy4xMmMgMC42MjQtMi41NiwgMC42NTYtNS4xNTIsIDAuMjI0LTcuODA4QyAzMDEuNDI0LDIwNC4wNjQsIDMwMC40OCwyMDEuNDA4LCAyOTkuMDA4LDE5OC43MnpNIDIzNS40NzIsMTI1LjEyIEMgMjM4LjYyNCwxMjcuNjY0IDI0My4yNjQsMTI3LjUzNiAyNDYuMTYsMTI0LjU5MiBDIDI0OS4yOTYsMTIxLjQ3MiAyNDkuMjk2LDExNi4zNjggMjQ2LjE2LDExMy4yNDggQyAyNDUuOTA0LDExMi45OTIgMjQ1LjYzMiwxMTIuODE2IDI0NS4zNDQsMTEyLjU5MiBMIDI0NS4zNzYsMTEyLjU2IEMgMjM1LjI0OCwxMDQuODY0IDIyNi45MjgsOTcuOTM2IDIxNy45NTIsODguOTYgQyAyMDkuODQsODAuODY0IDIwMi41MTIsNzIuMzM2IDE5Ni4xNzYsNjMuNjggTCAxODUuOTUyLDQ5LjY4IEMgMTg1LjYzMiw0OS4xMDQgMTg1LjI0OCw0OC41NzYgMTg0Ljc2OCw0OC4wOCBDIDE4MS42MzIsNDQuOTYgMTc2LjUyOCw0NC45NiAxNzMuNDA4LDQ4LjA4IEMgMTcwLjY4OCw1MC44MCAxNzAuMzUyLDU0Ljk5MiAxNzIuMzUyLDU4LjExMiBMIDE3Mi4zMiw1OC4xNDQgTCAxODMuMjY0LDczLjA4OCBDIDE5MC4wOTYsODIuNDMyIDE5Ny45NTIsOTEuNTg0IDIwNi42NCwxMDAuMjcyIEMgMjE1LjY4LDEwOS4zNDQgMjI1LjQ0LDExNy40NCAyMzUuNDQsMTI1LjEyIEwgMjM1LjQ3MiwxMjUuMTIgWk0gMjk0LjA0OCwzNTYuNTYgQyAzMDIuMTQ0LDM2NC42NTYgMzA5LjQ1NiwzNzMuMTUyIDMxNS44MDgsMzgxLjg1NiBMIDMyNi40MzIsMzk2LjQxNiBDIDMyNi44MTYsMzk3LjEwNCAzMjcuMjQ4LDM5Ny43OTIgMzI3Ljg0LDM5OC4zODQgQyAzMzAuOTkyLDQwMS41MzYgMzM2LjA5Niw0MDEuNTM2IDMzOS4yNDgsMzk4LjM4NCBDIDM0Mi4yNCwzOTUuMzc2IDM0Mi4zNjgsMzkwLjYyNCAzMzkuNjQ4LDM4Ny40NCBMIDMzOS42OCwzODcuNDA4IEwgMzI4LjczNiwzNzIuNDAgQyAzMjEuODg4LDM2My4wNTYgMzE0LjA0OCwzNTMuOTM2IDMwNS4zNiwzNDUuMjQ4IEMgMjk2LjMyLDMzNi4yMDggMjg2LjU3NiwzMjguMDggMjc2LjU3NiwzMjAuNDAgTCAyNzYuNTEyLDMyMC40MzIgQyAyNzMuMzI4LDMxNy41MDQgMjY4LjM4NCwzMTcuNTY4IDI2NS4zMjgsMzIwLjY1NiBDIDI2Mi4xNzYsMzIzLjgwOCAyNjIuMTc2LDMyOC45NDQgMjY1LjMyOCwzMzIuMDk2IEMgMjY1Ljg4OCwzMzIuNjg4IDI2Ni41NDQsMzMzLjEwNCAyNjcuMjAsMzMzLjQ3MiBDIDI3Ni42MDgsMzQwLjY1NiAyODUuNjgsMzQ4LjE5MiAyOTQuMDQ4LDM1Ni41NiBaIiBkYXRhLXRhZ3M9ImJhbmtub3RlIiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAyMTsiIGQ9Ik0gMjU2LjAwLDQ4MC4wMEMgMTQ4LjA5Niw0ODAuMDAsIDMyLjAwLDQ0Ny40NzIsIDMyLjAwLDM3Ni4wMGwwLjAwLTMwNC4wMCBDIDMyLjAwLDAuNTYsIDE0OC4wOTYtMzIuMDAsIDI1Ni4wMC0zMi4wMGMgMTA3Ljg4OCwwLjAwLCAyMjQuMDAsMzIuNTYsIDIyNC4wMCwxMDQuMDBsMC4wMCwzMDQuMDAgCgkJQyA0ODAuMDAsNDQ3LjQ3MiwgMzYzLjg3Miw0ODAuMDAsIDI1Ni4wMCw0ODAuMDB6IE0gNDQ4LjAwLDcyLjAwYzAuMDAtMzkuNzQ0LTg1Ljk2OC03Mi4wMC0xOTIuMDAtNzIuMDBjLTEwNi4wNDgsMC4wMC0xOTIuMDAsMzIuMjU2LTE5Mi4wMCw3Mi4wMGwwLjAwLDU5Ljc3NiBDIDk3LjA1Niw5Ny43MTIsIDE3Ni44MCw4MC4wMCwgMjU2LjAwLDgwLjAwCgkJYyA3OS4yMCwwLjAwLCAxNTguOTQ0LDE3LjcxMiwgMTkyLjAwLDUxLjc3NkwgNDQ4LjAwLDcyLjAwIHogTSA0NDguMDAsMTY4LjAwbC0wLjA2NCwwLjAwIGMwLjAwLTAuMTYsIDAuMDY0LTAuMzM2LCAwLjA2NC0wLjQ5NkMgNDQ4LjAwLDEyOC4wMCwgMzYyLjAzMiw5Ni4wMCwgMjU2LjAwLDk2LjAwYy0xMDYuMDMyLDAuMDAtMTkyLjAwLDMyLjAwLTE5Mi4wMCw3MS41MDQKCQljMC4wMCwwLjE2LCAwLjA2NCwwLjMzNiwgMC4wNjQsMC40OTZMIDY0LjAwLDE2OC4wMCBsMC4wMCw1OS43NzYgQyA5Ny4wNTYsMTkzLjcxMiwgMTc2LjgwLDE3Ni4wMCwgMjU2LjAwLDE3Ni4wMGMgNzkuMjAsMC4wMCwgMTU4Ljk0NCwxNy43MTIsIDE5Mi4wMCw1MS43NzZMIDQ0OC4wMCwxNjguMDAgeiBNIDQ0OC4wMCwyNjQuMDBsLTAuMDY0LDAuMDAgCgkJYzAuMDAtMC4xNiwgMC4wNjQtMC4zMzYsIDAuMDY0LTAuNDk2QyA0NDguMDAsMjI0LjAwLCAzNjIuMDMyLDE5Mi4wMCwgMjU2LjAwLDE5Mi4wMGMtMTA2LjAzMiwwLjAwLTE5Mi4wMCwzMi4wMC0xOTIuMDAsNzEuNTA0YzAuMDAsMC4xNiwgMC4wNjQsMC4zMzYsIDAuMDY0LDAuNDk2TCA2NC4wMCwyNjQuMDAgbDAuMDAsNTQuOTc2IAoJCUMgMTA1LjkzNiwyODcuMDI0LCAxODIuODAsMjcyLjAwLCAyNTYuMDAsMjcyLjAwYyA3My4yMCwwLjAwLCAxNTAuMDY0LDE1LjAyNCwgMTkyLjAwLDQ2Ljk3NkwgNDQ4LjAwLDI2NC4wMCB6IE0gMjU2LjAwLDMwNC4wMEMgMTQ5Ljk1MiwzMDQuMDAsIDY0LjAwLDMzNi4yNTYsIDY0LjAwLDM3Ni4wMEMgNjQuMDAsNDE1Ljc3NiwgMTQ5Ljk1Miw0NDguMDAsIDI1Ni4wMCw0NDguMDAKCQljIDEwNi4wMzIsMC4wMCwgMTkyLjAwLTMyLjIyNCwgMTkyLjAwLTcyLjAwQyA0NDguMDAsMzM2LjI1NiwgMzYyLjAzMiwzMDQuMDAsIDI1Ni4wMCwzMDQuMDB6TSAzODQuMDAsNjQuMDBBMTYuMDAsMTYuMDAgMTgwLjAwIDEsMCA0MTYuMDAsNjRBMTYuMDAsMTYuMDAgMTgwLjAwIDEsMCAzODQuMDAsNjR6TSAzODQuMDAsMTYwLjAwQTE2LjAwLDE2LjAwIDE4MC4wMCAxLDAgNDE2LjAwLDE2MEExNi4wMCwxNi4wMCAxODAuMDAgMSwwIDM4NC4wMCwxNjB6TSAzODQuMDAsMjU2LjAwQTE2LjAwLDE2LjAwIDE4MC4wMCAxLDAgNDE2LjAwLDI1NkExNi4wMCwxNi4wMCAxODAuMDAgMSwwIDM4NC4wMCwyNTZ6IiBkYXRhLXRhZ3M9ImRhdGEiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDIyOyIgZD0iTSA1MDAuNTc2LDQ3Mi40OTZDIDQ5NC43NjgsNDc3LjM3NiwgNDg3LjQ4OCw0ODAuMDAsIDQ4MC4wMTYsNDgwLjAwYy0xLjg0LDAuMDAtMy43MTItMC4xNi01LjU2OC0wLjQ5NmwtMjcyLjAzMi00OC4wMAoJQyAxODcuMTIsNDI4LjgxNiwgMTc1Ljk4NCw0MTUuNTM2LCAxNzUuOTg0LDQwMC4wMGwwLjAwLTMyLjAwIGwwLjAwLTE2LjAwIGwwLjAwLTIyNi43MiBDIDE1OS43NDQsMTM3LjA1NiwgMTM4LjY3MiwxNDQuMDAsIDExNS4yOCwxNDQuMDBjLTEzLjYwLDAuMDAtMjcuMjAtMi4yNTYtNDAuNDY0LTYuNjU2CglDIDQ0LjQ0OCwxMjcuMjE2LCAyMC4wOTYsMTA2LjkxMiwgOC4wMCw4MS42MGMtOS4zNDQtMTkuNTY4LTEwLjU0NC00MC44NDgtMy40MjQtNTkuOTM2QyAxNi43NTItMTAuOTQ0LCA1MS4zNDQtMzIuMDAsIDkyLjcwNC0zMi4wMAoJYyAxMy42MCwwLjAwLCAyNy4yMCwyLjIyNCwgNDAuNDQ4LDYuNjU2YyAzMC4zNTIsMTAuMDk2LCA1NC43MDQsMzAuNDAsIDY2LjgwLDU1LjY4YyA1LjIwLDEwLjkxMiwgNy42MzIsMjIuMzM2LCA3LjcyOCwzMy42NjRsIDAuMjg4LDAuMDAgTCAyMDcuOTY4LDMyMC4wMCAKCWMgMS44NCwwLjAwLCAzLjcxMiwwLjE2LCA1LjU2OCwwLjQ2NGwgMjY2LjQ4LDQ3LjAyNEwgNDgwLjAxNiwxNzMuMjggQyA0NjMuNzYsMTg1LjA1NiwgNDQyLjcwNCwxOTIuMDAsIDQxOS4yOTYsMTkyLjAwYy0xMy42MCwwLjAwLTI3LjIxNi0yLjI1Ni00MC40NjQtNi42NTYKCWMtMzAuMzY4LTEwLjEyOC01NC43Mi0zMC40MzItNjYuNzg0LTU1Ljc0NGMtOS4zNDQtMTkuNTY4LTEwLjU2LTQwLjg0OC0zLjQ0LTU5LjkzNkMgMzIwLjgwLDM3LjA1NiwgMzU1LjM2LDE2LjAwLCAzOTYuNzM2LDE2LjAwCgljIDEzLjYwLDAuMDAsIDI3LjIxNiwyLjIyNCwgNDAuNDY0LDYuNjU2YyAzMC4zMzYsMTAuMDk2LCA1NC42ODgsMzAuNDAsIDY2Ljc4NCw1NS42OGMgNS4yMTYsMTAuOTEyLCA3LjYzMiwyMi4zMzYsIDcuNzQ0LDMzLjY2NGwgMC4yODgsMC4wMCBMIDUxMi4wMTYsNDAwLjAwIEwgNTEyLjAxNiw0MTYuMDAgTCA1MTIuMDE2LDQ0OC4wMCAKCUMgNTEyLjAxNiw0NTcuNDQsIDUwNy44MjQsNDY2LjQzMiwgNTAwLjU3Niw0NzIuNDk2eiBNIDEyMy4wMDgsNC45OTJjLTM4LjMzNi0xMi43ODQtNzcuOTY4LTAuMjg4LTg4LjQ2NCwyNy44NGMtMTAuNTI4LDI4LjE2LCAxMi4wMTYsNjEuMzQ0LCA1MC4zMzYsNzQuMTI4CgljIDM4LjMzNiwxMi43ODQsIDc3Ljk2OCwwLjMyLCA4OC40NjQtMjcuODRDIDE4My44ODgsNTAuOTc2LCAxNjEuMzQ0LDE3Ljc3NiwgMTIzLjAwOCw0Ljk5MnogTSA0MjYuNDQ4LDUyLjk5MmMtMzguMzY4LTEyLjc4NC03OC4wMC0wLjI4OC04OC40OTYsMjcuODQKCWMtMTAuNTI4LDI4LjE2LCAxMi4wMzIsNjEuMzQ0LCA1MC4zMzYsNzQuMTI4YyAzOC4zNjgsMTIuNzg0LCA3OC4wMCwwLjMyLCA4OC40OTYtMjcuODRDIDQ4Ny4zMjgsOTguOTc2LCA0NjQuODAsNjUuNzc2LCA0MjYuNDQ4LDUyLjk5MnogTSA0NzkuMzYsNDAwLjAwCglMIDIwNy4zMjgsMzUyLjAwTCAyMDcuMzI4LDM2OC4wMCBMIDIwNy4zMjgsNDAwLjAwIEwgNDc5LjM2LDQ0OC4wMGwwLjAwLTMyLjAwIEwgNDc5LjM2LDQwMC4wMCB6IiBkYXRhLXRhZ3M9Im11c2ljIiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAyMzsiIGQ9Ik0gNDAwLjAwLDQ4MC4wMGMtMzIuODQ4LDAuMDAtNTguNjU2LTIyLjU2LTc3LjE4NC01Ny4zNzZsLTAuMzM2LDAuMTkyQyAyOTUuNTY4LDM3MC4xMjgsIDI1NS41MDQsMzM2LjAwLCAyMTEuNjE2LDMzNi4wMGwtMTAuNjA4LDAuMDAgCglMIDEzMC40OTYsMzM2LjAwIEwgNjQuMDAsMzM2LjAwIGMtMzUuODg4LDAuMDAtNjQuMDAtMzUuMTUyLTY0LjAwLTgwLjAwYzAuMDAtNDQuODgsIDI4LjExMi04MC4wMCwgNjQuMDAtODAuMDBjIDE3LjY0OC0wLjA2NCwgMzEuOTItMTQuMzM2LCAzMS45Mi0zMi4wMGwwLjAwLTE0NC4wMCBjMC4wMC0xNy42OCwgMTQuMzM2LTMyLjAwLCAzMi4wMC0zMi4wMGwgNjQuMDAsMC4wMCBjIDE3LjY2NCwwLjAwLCAzMi4wMCwxNC4zMiwgMzIuMDAsMzIuMDAKCWwwLjAwLDE2LjAwIGMwLjAwLDE2LjAwLTE2LjAwLDIzLjE1Mi0xNi4wMCwzMi4wMGwwLjAwLDExMi4wMCBjMC4wMCwwLjM2OCwgMC4yNTYsMC42MjQsIDAuMjg4LDAuOTkyYyAwLjE2LDIuMjg4LCAwLjc4NCw0LjQwLCAxLjc5Miw2LjMyYyAwLjI4OCwwLjUyOCwgMC41OTIsMC45NDQsIDAuOTQ0LDEuNDA4CgljIDEuMjgsMS45MDQsIDIuODk2LDMuNDcyLCA0Ljg2NCw0LjY4OGMgMC4wOTYsMC4wNjQsIDAuMTI4LDAuMTYsIDAuMjI0LDAuMjI0YyAwLjA2NCwwLjAwLCAwLjExMiwwLjA2NCwgMC4xNzYsMC4wNjQKCWMgMS4yOCwwLjcyLCAyLjgxNiwwLjg4LCA0LjI1NiwxLjI4YyA0MC4zODQtNC4yODgsIDc2Ljk0NC0zNi44OCwgMTAyLjAzMi04NS45NjhsIDAuNDAsMC4xOTJDIDM0MS40NCw1NC40OTYsIDM2Ny4xODQsMzIuMDAsIDQwMC4wMCwzMi4wMAoJYyA3My41MzYsMC4wMCwgMTEyLjAwLDExMi42ODgsIDExMi4wMCwyMjQuMDBTIDQ3My41MzYsNDgwLjAwLCA0MDAuMDAsNDgwLjAweiBNIDMyMC4wMCwyNTYuMDBjMC4wMCwxNi41OTIsIDAuOTc2LDMyLjYyNCwgMi42MjQsNDguMDBMIDM2OC4wMCwzMDQuMDAgYyAxNy42NjQsMC4wMCwgMzIuMDAtMjEuNTA0LCAzMi4wMC00OC4wMGMwLjAwLTI2LjUyOC0xNC4zMzYtNDguMDAtMzIuMDAtNDguMDBsLTQ1LjM3NiwwLjAwIAoJQyAzMjAuOTc2LDIyMy4zNzYsIDMyMC4wMCwyMzkuMzc2LCAzMjAuMDAsMjU2LjAweiBNIDMyLjAwLDI1Ni4wMGMwLjAwLDI2LjQ5NiwgMTQuMzM2LDQ4LjAwLCAzMi4wMCw0OC4wMGwgNjYuNDk2LDAuMDAgTCAxNDQuMDAsMzA0LjAwIGwgMzIuMjI0LDAuMDAgQyAxNjYuMzA0LDI5Mi4zMzYsIDE2MC4wMCwyNzUuNDA4LCAxNjAuMDAsMjU2LjAwCgljMC4wMC0xOS40NCwgNi4zMDQtMzYuMzY4LCAxNi4yMjQtNDguMDBMIDE0NC4wMCwyMDguMDAgTCA2NC4wMCwyMDguMDAgQyA0Ni4zMzYsMjA4LjAwLCAzMi4wMCwyMjkuNDcyLCAzMi4wMCwyNTYuMDB6IE0gMTkxLjkyLDAuMDBsLTY0LjAwLDAuMDAgbDAuMDAsMTQ0LjAwIGMwLjAwLDExLjY2NC0zLjEyLDIyLjU2LTguNTkyLDMyLjAwbCAxMS4xNjgsMC4wMCBsMC4wMC0wLjE5MiBsIDQ4LjEyOCwwLjAwIAoJYy0xLjcxMi00Ljk3Ni0yLjcwNC0xMC4yNTYtMi43MDQtMTUuODA4bDAuMDAtMTEyLjAwIGMwLjAwLTE1LjQwOCwgOC42MDgtMjUuNjY0LCAxMy43NDQtMzEuNzc2YyAwLjcwNC0wLjg0OCwgMS41MzYtMS43MTIsIDIuMjU2LTIuNjU2TCAxOTEuOTIsMC4wMCB6IE0gMjExLjYxNiwyMDcuODA4CglMIDIwOC4wMCwyMDcuODA4IEwgMjA4LjAwLDIwOC4wMCBjLTE3LjY2NCwwLjAwLTMyLjAwLDIxLjQ3Mi0zMi4wMCw0OC4wMGMwLjAwLDI2LjQ5NiwgMTQuMzM2LDQ4LjAwLCAzMi4wMCw0OC4wMGwgMy42MTYsMC4wMCBjIDMwLjE3NiwwLjAwLCA1OC40MzIsMTEuODcyLCA4My4yOTYsMzIuMjg4QyAyOTAuMzM2LDMxMC41MjgsIDI4OC4wMCwyODMuMjQ4LCAyODguMDAsMjU2LjAwCgljMC4wMC0yNy4zNDQsIDIuMzM2LTU0LjcyLCA2Ljk0NC04MC40OTZDIDI3MC4wNjQsMTk1LjkzNiwgMjQxLjc5MiwyMDcuODA4LCAyMTEuNjE2LDIwNy44MDh6IE0gNDAwLjAwLDY0LjAwYy0zMi4yODgsMC4wMC02MC4wMCw0NS45MzYtNzIuNjU2LDExMi4wMEwgMzY4LjAwLDE3Ni4wMCAKCWMgMzUuODcyLDAuMDAsIDY0LjAwLDM1LjEyLCA2NC4wMCw4MC4wMGMwLjAwLDQ0Ljg0OC0yOC4xMjgsODAuMDAtNjQuMDAsODAuMDBsLTQwLjY1NiwwLjAwIEMgMzQwLjAwLDQwMi4wMzIsIDM2Ny43MTIsNDQ4LjAwLCA0MDAuMDAsNDQ4LjAwYyA0NC4xOTIsMC4wMCwgODAuMDAtODUuOTY4LCA4MC4wMC0xOTIuMDBTIDQ0NC4xOTIsNjQuMDAsIDQwMC4wMCw2NC4wMHoiIGRhdGEtdGFncz0ibWVnYXBob25lIiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAyNDsiIGQ9Ik0gNTEyLjAwLDM1Mi4wMGMwLjAwLDIyLjQ5Ni0xNS4zMTIsNDEuNzI4LTM3LjIxNiw0Ni43ODRMIDI2Ni41NzYsNDQ2LjgzMkMgMjYzLjA4OCw0NDcuNjE2LCAyNTkuNTM2LDQ0OC4wMCwgMjU2LjAwLDQ0OC4wMAoJCWMtMy41MzYsMC4wMC03LjA4OC0wLjM4NC0xMC44MC0xLjIxNmwtMjA3Ljk4NC00OC4wMEMgMTUuMjk2LDM5My43MjgsMC4wMCwzNzQuNDk2LDAuMDAsMzUyLjAwcyAxNS4zMTItNDEuNzI4LCAzNy4yMC00Ni43ODRMIDgwLjAwLDI5NS4zNDRMIDgwLjAwLDE2MC4wMCBjMC4wMC00Mi40NjQsIDQ4LjYwOC04MC4wMCwgMTc2LjAwLTgwLjAwCgkJcyAxNzYuMDAsMzcuNTM2LCAxNzYuMDAsODAuMDBsMC4wMCwxMzUuMzQ0IGwgNDIuNzg0LDkuODcyQyA0OTYuNjg4LDMxMC4yNzIsIDUxMi4wMCwzMjkuNTA0LCA1MTIuMDAsMzUyLjAweiBNIDQwMC4wMCwxNjAuMDBjMC4wMC0xNy42OC00OC4wMC00OC4wMC0xNDQuMDAtNDguMDBjLTk2LjAwLDAuMDAtMTQ0LjAwLDMwLjMyLTE0NC4wMCw0OC4wMGwwLjAwLDEyNy45NTIgbCAxMzMuNDA4LTMwLjc4NAoJCUMgMjQ4Ljg5NiwyNTYuMzg0LCAyNTIuNDY0LDI1Ni4wMCwgMjU2LjAwLDI1Ni4wMGMgMy41MzYsMC4wMCwgNy4xMDQsMC4zODQsIDEwLjc4NCwxLjIxNkwgNDAwLjAwLDI4Ny45NTJMIDQwMC4wMCwxNjAuMDAgeiBNIDI1OS42MCwyODguNDBDIDI1OC40MCwyODguMTQ0LCAyNTcuMjAsMjg4LjAwLCAyNTYuMDAsMjg4LjAwCgkJcy0yLjQxNiwwLjE0NC0zLjYwLDAuNDBsLTIwOC4wMCw0OC4wMEMgMzcuMTM2LDMzOC4wOCwgMzIuMDAsMzQ0LjU0NCwgMzIuMDAsMzUyLjAwcyA1LjEzNiwxMy45MiwgMTIuNDAsMTUuNjBsIDIwOC4wMCw0OC4wMEMgMjUzLjU4NCw0MTUuODU2LCAyNTQuNzg0LDQxNi4wMCwgMjU2LjAwLDQxNi4wMAoJCXMgMi40MTYtMC4xNDQsIDMuNjAtMC40MGwgMjA4LjAwLTQ4LjAwQyA0NzQuODQ4LDM2NS45MiwgNDgwLjAwLDM1OS40NTYsIDQ4MC4wMCwzNTIuMDBzLTUuMTUyLTEzLjkyLTEyLjQwLTE1LjYwTCAyNTkuNjAsMjg4LjQwek0gNDY0LjAwLDI3Mi4wMCBDIDQ2NC4wMCwyODAuODQ4IDQ3MS4xNTIsMjg4LjAwIDQ4MC4wMCwyODguMDAgQyA0ODguODMyLDI4OC4wMCA0OTYuMDAsMjgwLjg0OCA0OTYuMDAsMjcyLjAwIEwgNDk2LjAwLDEyOC4wMCBDIDQ5Ni4wMCwxMTkuMTUyIDQ4OC44MzIsMTEyLjAwIDQ4MC4wMCwxMTIuMDAgQyA0NzEuMTUyLDExMi4wMCA0NjQuMDAsMTE5LjE1MiA0NjQuMDAsMTI4LjAwIEwgNDY0LjAwLDI3Mi4wMCBaTSA0ODAuMDAsOTYuMDAgQyA0OTcuNjY0LDk2LjAwIDUxMi4wMCw0OS42NjQgNTEyLjAwLDMyLjAwIEMgNTEyLjAwLDE0LjMzNiA0OTcuNjY0LDAuMDAgNDgwLjAwLDAuMDAgQyA0NjIuMzIsMC4wMCA0NDguMDAsMTQuMzM2IDQ0OC4wMCwzMi4wMCBDIDQ0OC4wMCw0OS42NjQgNDYyLjMyLDk2LjAwIDQ4MC4wMCw5Ni4wMCBaIiBkYXRhLXRhZ3M9InN0dWR5IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAyNTsiIGQ9Ik0gMzMwLjkxMiw0MjAuMjg4QyAzMjMuMzQ0LDQyNy44NCwgMzEzLjMxMiw0MzIuMDAsIDMwMi42MjQsNDMyLjAwcy0yMC43Mi00LjE2LTI4LjMyLTExLjcyOGwtMjIuNTYtMjIuNTkyCgkJQyAyNDQuMTc2LDM5MC4xMjgsIDI0MC4wMCwzODAuMDgsIDI0MC4wMCwzNjkuMzc2YzAuMDAtNy41MzYsIDIuMDY0LTE0Ljc1MiwgNS45MzYtMjEuMDA4TCAyOC43MDQsMjYxLjM0NGMtMTQuNTI4LTYuMzg0LTI0Ljk0NC0xOS40ODgtMjcuODcyLTM1LjAyNAoJCWMtMi45Ni0xNS42MzIsIDIuMDAtMzEuNjY0LCAxMy4zNDQtNDIuOTkybCAyMDMuNTItMjAxLjI4YyA4Ljc2OC04Ljc2OCwgMjAuNDE2LTEzLjc0NCwgMzIuNzItMTQuMDMyQyAyNTAuNzA0LTMyLjAwLCAyNTEuMzc2LTMyLjAwLCAyNTEuNjY0LTMyLjAwCgkJYyAzLjIzMiwwLjAwLCA2LjUxMiwwLjMzNiwgOS43NiwwLjk5MmMgMTUuOTA0LDMuMjk2LCAyOC45MjgsMTQuMjg4LCAzNC44MzIsMjkuMjQ4bCA4NS40NzIsMjE0LjAxNmMgNi40MzItNC4yNCwgMTQuMDAtNi41MTIsIDIxLjg3Mi02LjUxMgoJCWMgMTAuNzIsMC4wMCwgMjAuNzUyLDQuMTc2LCAyOC4yODgsMTEuNzI4TCA0NTQuNDAsMjQwLjAwYyA3LjYzMiw3LjU4NCwgMTEuODA4LDE3LjY0OCwgMTEuODA4LDI4LjM2OHMtNC4xOTIsMjAuODAtMTEuNzEyLDI4LjI4OEwgMzMwLjkxMiw0MjAuMjg4egoJCSBNIDI2Ni41NDQsMTAuMTI4Yy0xLjk4NC01LjAwOC02LjM1Mi04LjcwNC0xMS42MzItOS43OTJjLTEuMjE2LTAuMjU2LTIuNDQ4LTAuMzUyLTMuNjY0LTAuMzM2Yy00LjA2NCwwLjA5Ni03Ljk4NCwxLjcyOC0xMC45MTIsNC42NzIKCQlMIDM2LjY4OCwyMDYuMDhjLTMuNzQ0LDMuNzI4LTUuMzkyLDkuMDcyLTQuNDAsMTQuMjg4YyAwLjk3Niw1LjE4NCwgNC40NjQsOS41NjgsIDkuMzEyLDExLjY4bCA5OS40NzIsMzkuODQKCQljIDY3LjAyNC0yMi4yODgsIDEzNC4wNjQtMC44MTYsIDIwMS4xMi03Mi4zNTJMIDI2Ni41NDQsMTAuMTI4eiBNIDQzMS44NzIsMjYyLjcybC0yMi42MjQtMjIuNjA4Yy0zLjEyLTMuMTM2LTguMTkyLTMuMTM2LTExLjMxMiwwLjAwbC0yOC4yODgsMjguMjcyCgkJbC0yMi45MTItNTcuNDI0bCAxLjkwNCw0Ljg0OGMtNDguMTYsNDguMDgtOTcuMTA0LDU0LjE0NC0xNDEuMjY0LDU5LjU2OGMtMTQuMTkyLDEuNzQ0LTI3Ljk1MiwzLjU2OC00MS40NzIsNi40OGwgMTM1Ljg1Niw1NC40MTZsLTI3LjQ0LDI3LjQ0CgkJYy0zLjEyLDMuMTItMy4xMiw4LjE5MiwwLjAwLDExLjMxMmwgMjIuNjI0LDIyLjY0YyAzLjEyLDMuMTIsIDguMTkyLDMuMTIsIDExLjMxMiwwLjAwbCAxMjMuNjAtMTIzLjYzMgoJCUMgNDM1LjAyNCwyNzAuOTEyLCA0MzUuMDI0LDI2NS44NCwgNDMxLjg3MiwyNjIuNzJ6TSAyNjQuMDAsMTQ0LjAwYyAyMi4wNDgsMC4wMCwgNDAuMDAsMTcuOTM2LCA0MC4wMCw0MC4wMFMgMjg2LjA2NCwyMjQuMDAsIDI2NC4wMCwyMjQuMDBjLTIyLjA2NCwwLjAwLTQwLjAwLTE3LjkzNi00MC4wMC00MC4wMFMgMjQxLjk1MiwxNDQuMDAsIDI2NC4wMCwxNDQuMDB6CgkJIE0gMjY0LjAwLDIwOC4wMGMgMTMuMjQ4LDAuMDAsIDI0LjAwLTEwLjc1MiwgMjQuMDAtMjQuMDBTIDI3Ny4yNDgsMTYwLjAwLCAyNjQuMDAsMTYwLjAwYy0xMy4yNjQsMC4wMC0yNC4wMCwxMC43NTItMjQuMDAsMjQuMDBTIDI1MC43MzYsMjA4LjAwLCAyNjQuMDAsMjA4LjAwek0gNDcyLjAwLDQ4MC4wMEMgNDQ5LjkzNiw0ODAuMDAsIDQzMi4wMCw0NjIuMDY0LCA0MzIuMDAsNDQwLjAwUyA0NDkuOTM2LDQwMC4wMCwgNDcyLjAwLDQwMC4wMFMgNTEyLjAwLDQxNy45MzYsIDUxMi4wMCw0NDAuMDBTIDQ5NC4wNjQsNDgwLjAwLCA0NzIuMDAsNDgwLjAweiBNIDQ3Mi4wMCw0MTYuMDAKCQlDIDQ1OC43NTIsNDE2LjAwLCA0NDguMDAsNDI2Ljc1MiwgNDQ4LjAwLDQ0MC4wMFMgNDU4Ljc1Miw0NjQuMDAsIDQ3Mi4wMCw0NjQuMDBTIDQ5Ni4wMCw0NTMuMjQ4LCA0OTYuMDAsNDQwLjAwUyA0ODUuMjQ4LDQxNi4wMCwgNDcyLjAwLDQxNi4wMHpNIDEyOC4wMCwyMDguMDBjMC4wMC0xNy42NDgsIDE0LjM1Mi0zMi4wMCwgMzIuMDAtMzIuMDBzIDMyLjAwLDE0LjM1MiwgMzIuMDAsMzIuMDBzLTE0LjM1MiwzMi4wMC0zMi4wMCwzMi4wMFMgMTI4LjAwLDIyNS42NDgsIDEyOC4wMCwyMDguMDB6IE0gMTYwLjAwLDIyNC4wMGMgOC44MzIsMC4wMCwgMTYuMDAtNy4xNTIsIDE2LjAwLTE2LjAwCgkJcy03LjE2OC0xNi4wMC0xNi4wMC0xNi4wMHMtMTYuMDAsNy4xNTItMTYuMDAsMTYuMDBTIDE1MS4xNjgsMjI0LjAwLCAxNjAuMDAsMjI0LjAwek0gMTkyLjAwLDExMi4wMEExNi4wMCwxNi4wMCAxODAuMDAgMSwwIDIyNC4wMCwxMTJBMTYuMDAsMTYuMDAgMTgwLjAwIDEsMCAxOTIuMDAsMTEyek0gNDQ4LjAwLDM1Mi4wMEExNi4wMCwxNi4wMCAxODAuMDAgMSwwIDQ4MC4wMCwzNTJBMTYuMDAsMTYuMDAgMTgwLjAwIDEsMCA0NDguMDAsMzUyeiIgZGF0YS10YWdzPSJsYWIiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDI2OyIgZD0iTSA0NzIuMDAsMTQ0LjAwbC00My4wNTYsMC4wMCBjLTAuNzIsMy44MjQtMS42MCw3LjU2OC0yLjU2LDExLjI5NmwgNzYuNzg0LDM4LjM4NGMgNy45MDQsMy45NTIsIDExLjA4OCwxMy41NjgsIDcuMTUyLDIxLjQ3MgoJCWMtMy45NjgsNy45MDQtMTMuNTM2LDExLjA3Mi0yMS40NzIsNy4xNTJsLTczLjI0OC0zNi42MDhDIDM4Ny42NjQsMjQ1Ljk4NCwgMzI2LjcyLDI4OC4wMCwgMjU2LjAwLDI4OC4wMGMtODYuMTEyLDAuMDAtMTU3Ljg0LTYyLjIwOC0xNzIuOTQ0LTE0NC4wMEwgNDAuMDAsMTQ0LjAwIAoJCUMgMTcuOTUyLDE0NC4wMCwwLjAwLDEyNi4wNjQsMC4wMCwxMDQuMDBjMC4wMC03Ljg0LCAyLjg4LTE1LjQwOCwgOC4wOC0yMS4yNjRMIDY0LjAwLDE5LjgyNEwgNjQuMDAsOC4wMCBDIDY0LjAwLTE0LjA2NCwgODEuOTUyLTMyLjAwLCAxMDQuMDAtMzIuMDBsIDMwNC4wMCwwLjAwIGMgMjIuMDY0LDAuMDAsIDQwLjAwLDE3LjkzNiwgNDAuMDAsNDAuMDAKCQlsMC4wMCwxMS44MjQgbCA1NS45MDQsNjIuOTEyQyA1MDkuMTIsODguNTkyLCA1MTIuMDAsOTYuMTYsIDUxMi4wMCwxMDQuMDBDIDUxMi4wMCwxMjYuMDY0LCA0OTQuMDY0LDE0NC4wMCwgNDcyLjAwLDE0NC4wMHogTSA0MTIuNzg0LDE0NC4wMGwtOC45OTIsMC4wMCBsIDcuOTY4LDQuMDAKCQlDIDQxMi4wNjQsMTQ2LjY1NiwgNDEyLjQ5NiwxNDUuMzYsIDQxMi43ODQsMTQ0LjAweiBNIDI1Ni4wMCwyNzIuMDBjIDY0LjQ2NCwwLjAwLCAxMjAuMDAtMzguNDAsIDE0NS4zMTItOTMuNDU2bC0xNC4yNTYtNy4xMkMgMzY0LjQwLDIyMS4yNjQsIDMxNC4zMiwyNTYuMDAsIDI1Ni4wMCwyNTYuMDAKCQljLTY4LjUxMiwwLjAwLTEyNS43NDQtNDcuODg4LTE0MC4zMi0xMTIuMDBMIDk5LjIzMiwxNDQuMDAgQyAxMTQuMDk2LDIxNi45NDQsIDE3OC43MzYsMjcyLjAwLCAyNTYuMDAsMjcyLjAweiBNIDMyOS4yMTYsMTQ0LjAwYy0xMi4zNjgsMjguMjA4LTQwLjQ5Niw0OC4wMC03My4yMTYsNDguMDBzLTYwLjgzMi0xOS43OTItNzMuMjE2LTQ4LjAwCgkJTCAxNjUuNjAsMTQ0LjAwIGMgMTMuMjE2LDM3LjIxNiwgNDguNjg4LDY0LjAwLCA5MC40MCw2NC4wMGMgMzkuNDQsMC4wMCwgNzMuNDA4LTIzLjkzNiwgODguMTI4LTU4LjAzMkwgMzMyLjIyNCwxNDQuMDBMIDMyOS4yMTYsMTQ0LjAwIHogTSAyNTYuMDAsMTYwLjAwYy0xNC4xMjgsMC4wMC0yNi43Mi02LjI1Ni0zNS41Mi0xNi4wMGwtMTkuNTg0LDAuMDAgCgkJYyAxMS4xMDQsMTkuMDI0LCAzMS41MiwzMi4wMCwgNTUuMTA0LDMyLjAwYyAyMy41NjgsMC4wMCwgNDQuMDAtMTIuOTc2LCA1NS4wODgtMzIuMDBsLTE5LjYwLDAuMDAgQyAyODIuNzIsMTUzLjc0NCwgMjcwLjEyOCwxNjAuMDAsIDI1Ni4wMCwxNjAuMDB6IE0gMjU2LjAwLDIyNC4wMAoJCWMtNTAuNjQsMC4wMC05My40NzItMzMuNzkyLTEwNy4yOC04MC4wMEwgMTMyLjIwOCwxNDQuMDAgYyAxNC4yNzIsNTUuMTA0LCA2NC4yNzIsOTYuMDAsIDEyMy43OTIsOTYuMDBjIDUxLjkzNiwwLjAwLCA5Ni42ODgtMzEuMTY4LCAxMTYuNzItNzUuNzQ0bC0xNC4yODgtNy4xMzYKCQlDIDM0MS4wMjQsMTk2LjQzMiwgMzAxLjY4LDIyNC4wMCwgMjU2LjAwLDIyNC4wMHogTSA0MTYuMDAsMzIuMDBsMC4wMC0yNC4wMCBjMC4wMC00LjQxNi0zLjYwLTguMDAtOC4wMC04LjAwbC0zMDQuMDAsMC4wMCBDIDk5LjU4NCwwLjAwLCA5Ni4wMCwzLjU4NCwgOTYuMDAsOC4wMEwgOTYuMDAsMzIuMDAgbC02NC4wMCw3Mi4wMAoJCUMgMzIuMDAsMTA4LjQxNiwgMzUuNTg0LDExMi4wMCwgNDAuMDAsMTEyLjAwTCA4MC4wMCwxMTIuMDAgbCAxNi4wMCwwLjAwIGwgMTYuMDAsMC4wMCBsIDE2LjAwLDAuMDAgbCAxNi4wMCwwLjAwIGwgMTYuMDAsMC4wMCBsIDE2LjAwLDAuMDAgbCAxNi4wMCwwLjAwIGwgMTYuMDAsMC4wMCBsIDk2LjAwLDAuMDAgbCAxNi4wMCwwLjAwIGwgMTYuMDAsMC4wMCBsIDE2LjAwLDAuMDAgbCAxNi4wMCwwLjAwIGwgMTYuMDAsMC4wMCBsIDE2LjAwLDAuMDAgbCAxNi4wMCwwLjAwIGwgMTYuMDAsMC4wMCBsIDQwLjAwLDAuMDAgYyA0LjQwLDAuMDAsIDguMDAtMy41ODQsIDguMDAtOC4wMEwgNDE2LjAwLDMyLjAwek0gMTI3LjYzMiwyOTIuNjA4IEMgMTI3LjUyLDI5Mi44MzIgMTI3LjQ0LDI5My4wNCAxMjcuMzQ0LDI5My4yOCBDIDExOS4wNCwzMTMuMzI4IDEyNy4yOTYsMzMyLjk5MiAxMzQuNzUyLDM1MC43MzYgQyAxNDEuODA4LDM2Ny41NjggMTQ4LjA2NCwzODIuNDggMTQxLjYwLDM5Ny4wMjQgQyAxNDEuNTY4LDM5Ny4wODggMTQxLjU1MiwzOTcuMTUyIDE0MS41MiwzOTcuMjE2IEMgMTQxLjUwNCwzOTcuMjY0IDE0MS40ODgsMzk3LjMxMiAxNDEuNDcyLDM5Ny4zNiBDIDE0MS40NTYsMzk3LjM5MiAxNDEuNDU2LDM5Ny40MjQgMTQxLjQ1NiwzOTcuNDU2IEMgMTQxLjEzNiwzOTguMzA0IDE0MC45NDQsMzk5LjIwIDE0MC45NDQsNDAwLjE2IEMgMTQwLjk0NCw0MDQuNDggMTQ0LjQ0OCw0MDguMDAgMTQ4Ljc4NCw0MDguMDAgQyAxNTIuMTEyLDQwOC4wMCAxNTQuOTQ0LDQwNS45MiAxNTYuMDgsNDAyLjk5MiBDIDE2NS4wMDgsMzgyLjY1NiAxNTYuODk2LDM2Mi42NTYgMTQ5LjMyOCwzNDQuNjQgQyAxNDIuMzIsMzI3Ljk2OCAxMzYuNjI0LDMxMi40OCAxNDIuNjI0LDI5OC4zNjggQyAxNDIuNjU2LDI5OC4yNTYgMTQyLjY1NiwyOTguMTYgMTQyLjYyNCwyOTguMDQ4IEMgMTQyLjgwLDI5Ny40MDggMTQyLjkxMiwyOTYuNzM2IDE0Mi45MTIsMjk2LjA0OCBDIDE0Mi45MTIsMjkxLjYxNiAxMzkuMzEyLDI4OC4wMCAxMzQuODgsMjg4LjAwIEMgMTMxLjc3NiwyODguMDAgMTI5LjEyLDI4OS43NiAxMjcuNzkyLDI5Mi4zMiBDIDEyNy43NzYsMjkyLjMyIDEyNy43NiwyOTIuMzIgMTI3Ljc2LDI5Mi4zMiBDIDEyNy43MTIsMjkyLjQxNiAxMjcuNjgsMjkyLjUxMiAxMjcuNjMyLDI5Mi42MDggWk0gMzIyLjQ2NCwyOTQuOTQ0IEMgMzIyLjM2OCwyOTUuMTUyIDMyMi4yODgsMjk1LjM3NiAzMjIuMjA4LDI5NS41ODQgQyAzMTMuOTA0LDMxNS42MzIgMzIyLjE0NCwzMzUuMzEyIDMyOS41ODQsMzUzLjA1NiBDIDMzNi42NTYsMzY5Ljg4OCAzNDIuODk2LDM4NC44MCAzMzYuNDMyLDM5OS4zNDQgQyAzMzYuNDMyLDM5OS40MDggMzM2LjQwLDM5OS40NzIgMzM2LjM2OCwzOTkuNTM2IEMgMzM2LjMzNiwzOTkuNTg0IDMzNi4zMzYsMzk5LjYzMiAzMzYuMzA0LDM5OS42OCBDIDMzNi4zMDQsMzk5LjcxMiAzMzYuMzA0LDM5OS43NDQgMzM2LjMwNCwzOTkuNzc2IEMgMzM2LjAwLDQwMC42MjQgMzM1Ljc3Niw0MDEuNTIgMzM1Ljc3Niw0MDIuNDggQyAzMzUuNzc2LDQwNi44MCAzMzkuMjk2LDQxMC4zMiAzNDMuNjE2LDQxMC4zMiBDIDM0Ni45Niw0MTAuMzIgMzQ5Ljc3Niw0MDguMjU2IDM1MC45MjgsNDA1LjMxMiBDIDM1OS44NTYsMzg0Ljk3NiAzNTEuNzQ0LDM2NC45NzYgMzQ0LjE3NiwzNDYuOTYgQyAzMzcuMTY4LDMzMC4yODggMzMxLjQ4OCwzMTQuODAgMzM3LjQ1NiwzMDAuNjg4IEMgMzM3LjUyLDMwMC41NzYgMzM3LjUyLDMwMC40OCAzMzcuNDg4LDMwMC4zNjggQyAzMzcuNjQ4LDI5OS43MjggMzM3Ljc3NiwyOTkuMDU2IDMzNy43NzYsMjk4LjM2OCBDIDMzNy43NzYsMjkzLjkzNiAzMzQuMTQ0LDI5MC4zMiAzMjkuNzEyLDI5MC4zMiBDIDMyNi42MjQsMjkwLjMyIDMyMy45NjgsMjkyLjA5NiAzMjIuNjI0LDI5NC42NTYgTCAzMjIuNTkyLDI5NC42NTYgQyAzMjIuNTYsMjk0Ljc1MiAzMjIuNTI4LDI5NC44NDggMzIyLjQ2NCwyOTQuOTQ0IFpNIDI0MC4zMDQsMzY0LjYwOCBDIDI0MC4xOTIsMzY0LjgzMiAyNDAuMTEyLDM2NS4wNCAyNDAuMDAsMzY1LjI2NCBDIDIzMS42OCwzODUuMzEyIDIzOS45MzYsNDA0Ljk5MiAyNDcuMzkyLDQyMi43MzYgQyAyNTQuNDQ4LDQzOS41NjggMjYwLjcwNCw0NTQuNDggMjU0LjI0LDQ2OS4wMjQgQyAyNTQuMjI0LDQ2OS4wODggMjU0LjE5Miw0NjkuMTUyIDI1NC4xNzYsNDY5LjIxNiBDIDI1NC4xNiw0NjkuMjY0IDI1NC4xNDQsNDY5LjMxMiAyNTQuMTI4LDQ2OS4zNiBDIDI1NC4xMTIsNDY5LjM5MiAyNTQuMTEyLDQ2OS40MjQgMjU0LjExMiw0NjkuNDU2IEMgMjUzLjc5Miw0NzAuMzA0IDI1My42MCw0NzEuMjAgMjUzLjYwLDQ3Mi4xNiBDIDI1My42MCw0NzYuNDggMjU3LjEyLDQ4MC4wMCAyNjEuNDQsNDgwLjAwIEMgMjY0Ljc4NCw0ODAuMDAgMjY3LjYwLDQ3Ny45MiAyNjguNzUyLDQ3NC45NzYgQyAyNzcuNjgsNDU0LjY0IDI2OS41NjgsNDM0LjY0IDI2Mi4wMCw0MTYuNjI0IEMgMjU0Ljk5MiwzOTkuOTUyIDI0OS4yOTYsMzg0LjQ2NCAyNTUuMjk2LDM3MC4zNTIgQyAyNTUuMzI4LDM3MC4yNCAyNTUuMzI4LDM3MC4xNDQgMjU1LjI5NiwzNzAuMDMyIEMgMjU1LjQ3MiwzNjkuMzkyIDI1NS41ODQsMzY4LjcyIDI1NS41ODQsMzY4LjAzMiBDIDI1NS41ODQsMzYzLjYwIDI1MS45ODQsMzU5Ljk4NCAyNDcuNTUyLDM1OS45ODQgQyAyNDQuNDY0LDM1OS45ODQgMjQxLjgwOCwzNjEuNzYgMjQwLjQ2NCwzNjQuMzIgQyAyNDAuNDQ4LDM2NC4zMiAyNDAuNDMyLDM2NC4zMiAyNDAuNDMyLDM2NC4zMiBDIDI0MC4zODQsMzY0LjQxNiAyNDAuMzUyLDM2NC41MTIgMjQwLjMwNCwzNjQuNjA4IFoiIGRhdGEtdGFncz0iZm9vZCIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGUwMjc7IiBkPSJNIDUwMC4wMCwzNzYuOTkybC04MC4wMCw2NC4wMEMgNDE0LjMyLDQ0NS41MzYsIDQwNy4yNDgsNDQ4LjAwLCA0MDAuMDAsNDQ4LjAwTCAxMTIuMDAsNDQ4LjAwIAoJCUMgMTA0LjczNiw0NDguMDAsIDk3LjY4LDQ0NS41MzYsIDkyLjAwLDQ0MC45OTJsLTgwLjAwLTY0LjAwQyAxLjUzNiwzNjguNjA4LTIuNTkyLDM1NC41OTIsIDEuNjQ4LDM0MS44NzJsIDMyLjAwLTk2LjAwYyAzLjE1Mi05LjQ1NiwgMTAuNTQ0LTE2LjkxMiwgMTkuOTg0LTIwLjE0NAoJCUMgNTYuOTkyLDIyNC41NzYsIDYwLjUxMiwyMjQuMDAsIDY0LjAwLDIyNC4wMGMgNS41NjgsMC4wMCwgMTEuMDg4LDEuNDU2LCAxNi4wMCw0LjI4OEwgODAuMDAsMzIuMDAgYzAuMDAtMTcuNjY0LCAxNC4zMzYtMzIuMDAsIDMyLjAwLTMyLjAwbCAyODguMDAsMC4wMCBjIDE3LjY2NCwwLjAwLCAzMi4wMCwxNC4zMzYsIDMyLjAwLDMyLjAwTCA0MzIuMDAsMjI4LjI4OCAKCQlDIDQzNi45MTIsMjI1LjQ1NiwgNDQyLjQzMiwyMjQuMDAsIDQ0OC4wMCwyMjQuMDBjIDMuNTA0LDAuMDAsIDcuMDA4LDAuNTc2LCAxMC4zNjgsMS43MjhjIDkuNDQsMy4yMzIsIDE2LjgxNiwxMC42ODgsIDE5Ljk2OCwyMC4xNDRsIDMyLjAwLDk2LjAwCgkJQyA1MTQuNTkyLDM1NC41OTIsIDUxMC40NjQsMzY4LjYwOCwgNTAwLjAwLDM3Ni45OTJ6IE0gMzE2LjA2NCw0MTYuMDBDIDMwNy4yMTYsMzk3LjQyNCwgMjgzLjc3NiwzODQuMDAsIDI1Ni4wMCwzODQuMDBjLTI3Ljc3NiwwLjAwLTUxLjIzMiwxMy40MjQtNjAuMDY0LDMyLjAwTCAzMTYuMDY0LDQxNi4wMCB6IE0gNDQ4LjAwLDI1Ni4wMGwtNDguMDAsMzIuMDAKCQlsMC4wMC0yNTYuMDAgTCAxMTIuMDAsMzIuMDAgTCAxMTIuMDAsMjg4LjAwIGwtNDguMDAtMzIuMDBMIDMyLjAwLDM1Mi4wMGwgODAuMDAsNjQuMDBsIDY2LjgzMiwwLjAwIEMgMTg3Ljc0NCwzODguNDQ4LCAyMTguNzY4LDM2OC4wMCwgMjU2LjAwLDM2OC4wMGMgMzcuMjE2LDAuMDAsIDY4LjI1NiwyMC40NDgsIDc3LjE1Miw0OC4wMEwgNDAwLjAwLDQxNi4wMCBsIDgwLjAwLTY0LjAwTCA0NDguMDAsMjU2LjAweiIgZGF0YS10YWdzPSJ0LXNoaXJ0IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAyODsiIGQ9Ik0gMzUyLjAwLDMzNi4wMGMtMC45OTItNDIuODAtMzMuMTItNzguOTQ0LTMzLjEyLTc4Ljk0NEMgMzE4Ljg4LDMzNi42NzIsIDI1Ni4wMCw0MDAuMDAsIDI1Ni4wMCw0MDAuMDBzLTAuODQ4LTQ3LjM5Mi0zMi42ODgtOTUuMTY4CgkJCUMgMTkxLjQ3Miw0MTYuMzA0LCA5NS45Miw0ODAuMDAsIDk1LjkyLDQ4MC4wMEMgMTQzLjY5NiwzMDQuODMyLCA4MC4wMCwyNDEuMTIsIDgwLjAwLDExMy43MjhDIDgwLjAwLDM4Ljk5MiwgMTQzLjI2NC0zMi4wMCwgMjQwLjAwLTMyLjAwYyAxNDMuMzEyLDAuMDAsIDE3MS4wMjQsNTIuNjA4LCAxODUuODQsMTExLjg4OAoJCQlDIDQ0Ni4yNTYsMTYxLjUwNCwgNDE1LjY4LDI1Ni4zODQsIDM1Mi4wMCwzMzYuMDB6IE0gMzk0LjgxNiw4Ny42NjRDIDM4NC41MjgsNDYuNTYsIDM3Mi45MTIsMC4wMCwgMjQwLjAwLDAuMDBjLTgwLjEyOCwwLjAwLTEyOC4wMCw1Ny44MjQtMTI4LjAwLDExMy43MjgKCQkJYzAuMDAsNDIuODE2LCA3LjgwOCw3Ny45NjgsIDE2LjA2NCwxMTUuMTg0YyAxMC40OTYsNDcuMTg0LCAyMS4yNDgsOTUuNDg4LCAxNi41OTIsMTU5LjM3NmMgNDkuMzQ0LTY4LjMwNCwgNjYuOTEyLTE1OC44MCwgNjYuOTEyLTE1OC44MAoJCQlzIDQ1LjkzNiw2NC40OTYsIDU4LjI4OCw5NC40NDhDIDI3OS4zMTIsMzA0LjY4OCwgMjg4LjAwLDI0MC4wMCwgMjg4LjAwLDE3Ni4wMGMwLjAwLDAuMDAsIDQyLjQ5NiwzNS4wMDgsIDc0LjM2OCw4Ny42NDhDIDM5NS45MzYsMjAzLjQ1NiwgNDA4LjAzMiwxNDAuNTI4LCAzOTQuODE2LDg3LjY2NHpNIDM1OC45MTIsMjExLjI4IEwgMzYxLjg4OCwxOTQuNzIgQyAzNjguNTQ0LDE1Ny42MzIgMzY0LjgxNiwxMTMuNzkyIDM1Mi40MTYsODMuMDA4IEMgMzUxLjE2OCw3OS44ODggMzQ4LjE2LDc4LjAwIDM0NS4wMDgsNzguMDAgQyAzNDQuMDAsNzguMDAgMzQyLjk3Niw3OC4xOTIgMzQyLjAwLDc4LjU3NiBDIDMzNy45MDQsODAuMjI0IDMzNS45MDQsODQuODggMzM3LjU2OCw4OC45NzYgQyAzNDYuOTEyLDExMi4xNiAzNTAuODQ4LDE0NC44MCAzNDguMzUyLDE3NC42MjQgQyAzMzIuMjg4LDE1Ni42NzIgMzEyLjA0OCwxMzcuOTY4IDI2OC44MCwxMTcuNDI0IEwgMjYwLjcwNCwxMTMuNjAgTCAyNTcuNzkyLDEyMi4wNDggQyAyNTIuMDAsMTM4Ljg0OCAyNDYuMTYsMTU1LjgyNCAyNDMuNjMyLDE3OS40ODggQyAyMzQuOTc2LDE2NS44NCAyMjcuMDcyLDE1My42OCAyMTMuNzkyLDEzNS42MCBMIDIwNS42NjQsMTI0LjUyOCBMIDIwMC4wMzIsMTM3LjA3MiBDIDE4Ni4yNTYsMTY3Ljg3MiAxNzUuNzYsMTkxLjkyIDE2Ny40NCwyMTMuMDcyIEMgMTU5Ljc0NCwxODguMzUyIDE1NC4wMCwxNTkuNzYgMTU0LjAwLDEwMi4wMTYgQyAxNTQuMDAsOTcuNjAgMTUwLjQwLDk0LjAxNiAxNDYuMDAsOTQuMDE2IEMgMTQxLjU2OCw5NC4wMTYgMTM4LjAwLDk3LjYwIDEzOC4wMCwxMDIuMDE2IEMgMTM4LjAwLDE3Ny4zNiAxNDguMDAsMjA2LjM4NCAxNTguNTYsMjM3LjEyIEwgMTY2Ljg4LDI2MS4yOCBMIDE3NC41NDQsMjM5LjY4IEMgMTgyLjc4NCwyMTYuNDY0IDE5My42MzIsMTkwLjg4IDIwOC45NzYsMTU2LjI4OCBDIDIxOS4wODgsMTcwLjU3NiAyMjUuODcyLDE4MS4zMjggMjM0LjA2NCwxOTQuMzA0IEwgMjU4LjM1MiwyMzIuMzUyIEwgMjU4LjM1MiwyMDUuMDA4IEMgMjU4LjM1MiwxNzQuMjI0IDI2My44ODgsMTU0LjExMiAyNjkuOTg0LDEzNS44NCBDIDMxMi41MjgsMTU3LjI0OCAzMjguNDY0LDE3NS44NzIgMzQ1LjMxMiwxOTUuNTIgTCAzNTguOTEyLDIxMS4yOCBaIiBkYXRhLXRhZ3M9ImZpcmUiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDI5OyIgZD0iTSA0NjkuODA4LDQwNS44MDggQyA1MjYuMDY0LDM0OS41ODQgNTI2LjA2NCwyNTguNDAgNDY5LjgwOCwyMDIuMTc2IEwgMjk0LjMzNiwyNi42ODggQyAyODguMDgsMjAuNDE2IDI3Ny45NjgsMjAuNDE2IDI3MS43MTIsMjYuNjg4IEMgMjY1LjQyNCwzMi45NDQgMjY1LjQyNCw0My4wNCAyNzEuNzEyLDQ5LjMxMiBMIDQ0NC45MjgsMjIyLjU0NCBDIDQ4OC42NzIsMjY2LjI4OCA0ODguNjcyLDMzNy4xNjggNDQ0Ljg5NiwzODAuOTI4IEMgNDAxLjIxNiw0MjQuNjcyIDMzMC4yNzIsNDI0LjY3MiAyODYuNTI4LDM4MC45MjggTCA1NS4zNzYsMTUyLjQ5NiBDIDI0LjEyOCwxMjEuMjY0IDI0LjEyOCw3MC42MDggNTUuMzc2LDM5LjM3NiBDIDg2LjYyNCw4LjEyOCAxMzcuMjQ4LDguMTI4IDE2OC40OTYsMzkuMzc2IEwgNDAxLjkzNiwyNzAuMDQ4IEMgNDIwLjY1NiwyODguNzY4IDQyMC42NTYsMzE5LjIxNiA0MDEuOTM2LDMzNy45MzYgQyAzODMuMjE2LDM1Ni42NCAzNTIuNzg0LDM1Ni42NCAzMzQuMDY0LDMzNy45MzYgTCAxNTguNTYsMTYyLjQzMiBDIDE1Mi4zMDQsMTU2LjE3NiAxNDIuMTkyLDE1Ni4xNzYgMTM1LjkzNiwxNjIuNDMyIEMgMTI5LjY4LDE2OC43MDQgMTI5LjY4LDE3OC44MCAxMzUuOTM2LDE4NS4wNzIgTCAzMTEuNDI0LDM2MC41NiBDIDM0Mi42NCwzOTEuNzkyIDM5My4yOTYsMzkxLjc5MiA0MjQuNTQ0LDM2MC41NiBDIDQ1NS43OTIsMzI5LjMxMiA0NTUuNzkyLDI3OC42NzIgNDI0LjU0NCwyNDcuNDI0IEwgMTkxLjEwNCwxNi43MzYgQyAxNDcuNDU2LTI2LjkyOCA3Ni40MC0yNi45MjggMzIuNzM2LDE2LjczNiBDIC0xMC45MjgsNjAuNDAgLTEwLjkyOCwxMzEuNDcyIDMyLjczNiwxNzUuMTM2IEwgMjY2LjE3Niw0MDUuODA4IEMgMzIyLjQwLDQ2Mi4wNjQgNDEzLjU4NCw0NjIuMDY0IDQ2OS44MDgsNDA1LjgwOCBaIiBkYXRhLXRhZ3M9ImNsaXAiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDJhOyIgZD0iTSA1MDIuNDAsMzAwLjgwbC00OC4wMCw2My45NjhjLTEuODcyLDIuNTEyLTQuMDk2LDQuNjg4LTYuNDAsNi43NjhMIDQ0OC4wMCw0NDguMDAgYzAuMDAsMTcuNjY0LTE0LjMzNiwzMi4wMC0zMi4wMCwzMi4wMEwgOTYuMDAsNDgwLjAwIAoJQyA3OC4zMiw0ODAuMDAsIDY0LjAwLDQ2NS42NjQsIDY0LjAwLDQ0OC4wMGwwLjAwLTc2LjQ4IEMgNjEuNjk2LDM2OS40NTYsIDU5LjQ3MiwzNjcuMjk2LCA1Ny42MCwzNjQuODBsLTQ3Ljk4NC02My45ODRDIDMuNDA4LDI5Mi41NiwwLjAwLDI4Mi4zMzYsMC4wMCwyNzIuMDBsMC4wMC0xNi4wMCBjMC4wMC0yNi40NjQsIDIxLjUzNi00OC4wMCwgNDguMDAtNDguMDBsMC4wMCwwLjAwIGwwLjAwLTIwOC4wMCAKCWMwLjAwLTE3LjY2NCwgMTQuMzM2LTMyLjAwLCAzMi4wMC0zMi4wMGwgMzUyLjAwLDAuMDAgYyAxNy42NjQsMC4wMCwgMzIuMDAsMTQuMzM2LCAzMi4wMCwzMi4wMEwgNDY0LjAwLDIwOC4wMCBsMC4wMCwwLjAwYyAyNi40NjQsMC4wMCwgNDguMDAsMjEuNTM2LCA0OC4wMCw0OC4wMGwwLjAwLDE2LjAwIEMgNTEyLjAwLDI4Mi4zMzYsIDUwOC41OTIsMjkyLjU2LCA1MDIuNDAsMzAwLjgweiBNIDQxNi4wMCw0NDguMDBsMC4wMC02NC4wMCBMIDk2LjAwLDM4NC4wMCBsMC4wMCwwLjAwIEwgOTYuMDAsNDQ4LjAwIEwgNDE2LjAwLDQ0OC4wMCB6CgkgTSAxNjMuMDg4LDI0MC4wMEwgOTYuMDY0LDI0MC4wMCBsIDY0LjAwLDExMi4wMGwgMzUuMDI0LDAuMDAgTCAxNjMuMDg4LDI0MC4wMHogTSAyMTEuNzQ0LDM1Mi4wMEwgMjQ4LjAwLDM1Mi4wMCBsMC4wMC0xMTIuMDAgbC02OC4yNTYsMC4wMCBMIDIxMS43NDQsMzUyLjAweiBNIDI2NC4wMCwzNTIuMDBsIDM2LjI1NiwwLjAwIGwgMzIuMDAtMTEyLjAwTCAyNjQuMDAsMjQwLjAwIEwgMjY0LjAwLDM1Mi4wMCB6IE0gMzE2Ljg4LDM1Mi4wMGwgMzUuMDI0LDAuMDAgbCA2NC4wMC0xMTIuMDBsLTY3LjAyNCwwLjAwIAoJTCAzMTYuODgsMzUyLjAweiBNIDMyLjAwLDI1Ni4wMGwwLjAwLDE2LjAwIGMwLjAwLDMuNDcyLCAxLjEyLDYuODMyLCAzLjIwLDkuNjBsIDQ4LjAwLDY0LjAwQyA4Ni4yMjQsMzQ5LjYzMiwgOTAuOTYsMzUyLjAwLCA5Ni4wMCwzNTIuMDBsIDQ1LjYzMiwwLjAwIGwtNjQuMDAtMTEyLjAwTCA0OC4wMCwyNDAuMDAgQyAzOS4xNjgsMjQwLjAwLCAzMi4wMCwyNDcuMTUyLCAzMi4wMCwyNTYuMDB6IE0gMzIwLjAwLDAuMDBsLTEyMC4wMCwwLjAwIEwgMjAwLjAwLDE2MC4wMCAKCUwgMzIwLjAwLDE2MC4wMCBMIDMyMC4wMCwwLjAwIHogTSA0MzIuMDAsMC4wMGwtOTYuMDAsMC4wMCBMIDMzNi4wMCwxNjAuMDAgYzAuMDAsOC44NDgtNy4xODQsMTYuMDAtMTYuMDAsMTYuMDBsLTEyMC4wMCwwLjAwIGMtOC44MzIsMC4wMC0xNi4wMC03LjE1Mi0xNi4wMC0xNi4wMGwwLjAwLTE2MC4wMCBMIDgwLjAwLDAuMDAgTCA4MC4wMCwyMDguMDAgbCAzNTIuMDAsMC4wMCBMIDQzMi4wMCwwLjAwIHogTSA0ODAuMDAsMjU2LjAwYzAuMDAtOC44NDgtNy4xNTItMTYuMDAtMTYuMDAtMTYuMDBsLTI5LjY2NCwwLjAwIGwtNjQuMDAsMTEyLjAwTCA0MTYuMDAsMzUyLjAwIGwwLjAwLDAuMDAKCWMgNS4wMjQsMC4wMCwgOS43NzYtMi4zNjgsIDEyLjc4NC02LjQwbCA0OC4wMC02NC4wMEMgNDc4Ljg4LDI3OC44MzIsIDQ4MC4wMCwyNzUuNDcyLCA0ODAuMDAsMjcyLjAwTCA0ODAuMDAsMjU2LjAwIHoiIGRhdGEtdGFncz0ic2hvcCIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGUwMmI7IiBkPSJNIDQ2OS4zNDQsNDMyLjAwTCA0MDAuMDAsNDMyLjAwIEwgNDAwLjAwLDQ2NC4wMCBjMC4wMCw4Ljg0OC03LjE1MiwxNi4wMC0xNi4wMCwxNi4wMHMtMTYuMDAtNy4xNTItMTYuMDAtMTYuMDBsMC4wMC0zMi4wMCBsLTk2LjAwLDAuMDAgTCAyNzIuMDAsNDY0LjAwIGMwLjAwLDguODQ4LTcuMTY4LDE2LjAwLTE2LjAwLDE2LjAwcy0xNi4wMC03LjE1Mi0xNi4wMC0xNi4wMGwwLjAwLTMyLjAwIEwgMTQ0LjAwLDQzMi4wMCBMIDE0NC4wMCw0NjQuMDAgCgkJYzAuMDAsOC44NDgtNy4xNjgsMTYuMDAtMTYuMDAsMTYuMDBTIDExMi4wMCw0NzIuODQ4LCAxMTIuMDAsNDY0LjAwbDAuMDAtMzIuMDAgTCA0Mi42NzIsNDMyLjAwIEMgMTkuMTA0LDQzMi4wMCwwLjAwLDQxMi45MTIsMC4wMCwzODkuMzQ0bDAuMDAtMzc4LjY3MiBDMC4wMC0xMi44OTYsIDE5LjEwNC0zMi4wMCwgNDIuNjcyLTMyLjAwbCA0MjYuNjcyLDAuMDAgCgkJQyA0OTIuOTEyLTMyLjAwLCA1MTIuMDAtMTIuODk2LCA1MTIuMDAsMTAuNjcyTCA1MTIuMDAsMzg5LjM0NCBDIDUxMi4wMCw0MTIuOTEyLCA0OTIuOTEyLDQzMi4wMCwgNDY5LjM0NCw0MzIuMDB6IE0gNDgwLjAwLDEwLjY3MkMgNDgwLjAwLDQuNzg0LCA0NzUuMjE2LDAuMDAsIDQ2OS4zNDQsMC4wMEwgNDIuNjcyLDAuMDAgCgkJQyAzNi43ODQsMC4wMCwgMzIuMDAsNC43ODQsIDMyLjAwLDEwLjY3MkwgMzIuMDAsMzg5LjM0NCBDIDMyLjAwLDM5NS4yMTYsIDM2Ljc4NCw0MDAuMDAsIDQyLjY3Miw0MDAuMDBMIDExMi4wMCw0MDAuMDAgbDAuMDAtMzIuMDAgYzAuMDAtOC44NDgsIDcuMTY4LTE2LjAwLCAxNi4wMC0xNi4wMHMgMTYuMDAsNy4xNTIsIDE2LjAwLDE2LjAwTCAxNDQuMDAsNDAwLjAwIGwgOTYuMDAsMC4wMCBsMC4wMC0zMi4wMCBjMC4wMC04Ljg0OCwgNy4xNjgtMTYuMDAsIDE2LjAwLTE2LjAwCgkJcyAxNi4wMCw3LjE1MiwgMTYuMDAsMTYuMDBMIDI3Mi4wMCw0MDAuMDAgbCA5Ni4wMCwwLjAwIGwwLjAwLTMyLjAwIGMwLjAwLTguODQ4LCA3LjE1Mi0xNi4wMCwgMTYuMDAtMTYuMDBzIDE2LjAwLDcuMTUyLCAxNi4wMCwxNi4wMEwgNDAwLjAwLDQwMC4wMCBsIDY5LjM0NCwwLjAwIEMgNDc1LjIxNiw0MDAuMDAsIDQ4MC4wMCwzOTUuMjE2LCA0ODAuMDAsMzg5LjM0NEwgNDgwLjAwLDEwLjY3MiB6TSAxMTIuMDAsMjg4LjAwTCAxNzYuMDAsMjg4LjAwTCAxNzYuMDAsMjQwLjAwTCAxMTIuMDAsMjQwLjAwek0gMTEyLjAwLDIwOC4wMEwgMTc2LjAwLDIwOC4wMEwgMTc2LjAwLDE2MC4wMEwgMTEyLjAwLDE2MC4wMHpNIDExMi4wMCwxMjguMDBMIDE3Ni4wMCwxMjguMDBMIDE3Ni4wMCw4MC4wMEwgMTEyLjAwLDgwLjAwek0gMjI0LjAwLDEyOC4wMEwgMjg4LjAwLDEyOC4wMEwgMjg4LjAwLDgwLjAwTCAyMjQuMDAsODAuMDB6TSAyMjQuMDAsMjA4LjAwTCAyODguMDAsMjA4LjAwTCAyODguMDAsMTYwLjAwTCAyMjQuMDAsMTYwLjAwek0gMjI0LjAwLDI4OC4wMEwgMjg4LjAwLDI4OC4wMEwgMjg4LjAwLDI0MC4wMEwgMjI0LjAwLDI0MC4wMHpNIDMzNi4wMCwxMjguMDBMIDQwMC4wMCwxMjguMDBMIDQwMC4wMCw4MC4wMEwgMzM2LjAwLDgwLjAwek0gMzM2LjAwLDIwOC4wMEwgNDAwLjAwLDIwOC4wMEwgNDAwLjAwLDE2MC4wMEwgMzM2LjAwLDE2MC4wMHpNIDMzNi4wMCwyODguMDBMIDQwMC4wMCwyODguMDBMIDQwMC4wMCwyNDAuMDBMIDMzNi4wMCwyNDAuMDB6IiBkYXRhLXRhZ3M9ImNhbGVuZGFyIiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAyYzsiIGQ9Ik0gMjU2LjAwLDE2MC4wMEEzMi4wMCwzMi4wMCAxODAuMDAgMSwwIDMyMC4wMCwxNjBBMzIuMDAsMzIuMDAgMTgwLjAwIDEsMCAyNTYuMDAsMTYwek0gNDY0LjAxNiwyNzIuMDBDIDQ2NC4wMCwyNzIuMDAsIDQ2NC4wMCwyNzIuMDAsIDQ2NC4wMTYsMjcyLjAwTCA0NjQuMDAsMzY4LjAwTCA0NjQuMDAsMzc2LjAwIEwgNDY0LjAwLDQxNi4wMCBjMC4wMCwyNi41MTItMjEuNTA0LDQ4LjAwLTQ4LjAwLDQ4LjAwbC02NC4wMCwwLjAwIEwgODguMDAsNDY0LjAwIEMgMzkuNDcyLDQ2NC4wMCwwLjAwLDQyNC41MTIsMC4wMCwzNzYuMDBsMC4wMC0zMjAuMDAgCgkJQzAuMDAsNy40ODgsIDM5LjQ3Mi0zMi4wMCwgODguMDAtMzIuMDBsIDI4OC4wMCwwLjAwIGMgNDguNTEyLDAuMDAsIDg4LjAwLDM5LjQ4OCwgODguMDAsODguMDBMIDQ2NC4wMCw4MC4wMCBjMC4wMCwwLjAwLDAuMDAsMC4wMCwgMC4wMTYsMC4wMEMgNTI3Ljk4NCwxMjguMDE2LCA1MjcuOTg0LDIyMy45ODQsIDQ2NC4wMTYsMjcyLjAweiBNIDg4LjAwLDQzMi4wMEwgMzUyLjAwLDQzMi4wMCBsIDY0LjAwLDAuMDAgCgkJYyA4LjgxNiwwLjAwLCAxNi4wMC03LjE2OCwgMTYuMDAtMTYuMDBsMC4wMC00MC4wMCBMIDQzMi4wMCwzNjguMDAgbDAuMDAtNTAuOTQ0IEMgNDI2Ljk3NiwzMTguODQ4LCA0MjEuNjMyLDMyMC4wMCwgNDE2LjAwLDMyMC4wMGwtMC4wMTYsMC4wMCBMIDQxNS45ODQsMzM2LjAwIEwgNDE1Ljk4NCwzNjguMDAgTCA0MTUuOTg0LDQwMC4wMCBjMC4wMCw4Ljg0OC03LjE2OCwxNi4wMC0xNi4wMCwxNi4wMGwtMzM2LjAwLDAuMDAgYy04LjgzMiwwLjAwLTE2LjAwLTcuMTUyLTE2LjAwLTE2LjAwbDAuMDAtMzIuMDAgCgkJbDAuMDAtMzEuMDg4IEMgMzguMTEyLDM0Ny4wMDgsIDMyLjAwLDM2MC43NjgsIDMyLjAwLDM3Ni4wMEMgMzIuMDAsNDA2LjkyOCwgNTcuMDU2LDQzMi4wMCwgODguMDAsNDMyLjAweiBNIDM5OS45ODQsMzg0LjAwbC0zMzYuMDAsMC4wMCBMIDYzLjk4NCw0MDAuMDAgbCAzMzYuMDAsMC4wMCBMIDM5OS45ODQsMzg0LjAwIHogTSAzOTkuOTg0LDM2OC4wMGwwLjAwLTE2LjAwIGwtMzM2LjAwLDAuMDAgTCA2My45ODQsMzY4LjAwIEwgMzk5Ljk4NCwzNjguMDAgeiBNIDM5OS45ODQsMzM2LjAwbDAuMDAtMTYuMDAgTCAzNTIuMDAsMzIwLjAwIEwgODguMDAsMzIwLjAwIAoJCWMtOC42NCwwLjAwLTE2LjcwNCwyLjExMi0yNC4wMCw1LjYwTCA2NC4wMCwzMzYuMDAgTCAzOTkuOTg0LDMzNi4wMCB6IE0gNDMyLjAwLDU2LjAwYzAuMDAtMzAuOTI4LTI1LjA3Mi01Ni4wMC01Ni4wMC01Ni4wMGwtMjg4LjAwLDAuMDAgQyA1Ny4wNTYsMC4wMCwgMzIuMDAsMjUuMDcyLCAzMi4wMCw1Ni4wMEwgMzIuMDAsMzA4LjE3NiAKCQlDIDQ3LjIxNiwyOTUuNTg0LCA2Ni43MzYsMjg4LjAwLCA4OC4wMCwyODguMDBMIDM1Mi4wMCwyODguMDAgbCA2NC4wMCwwLjAwIGMgOC44MTYsMC4wMCwgMTYuMDAtNy4xNjgsIDE2LjAwLTE2LjAwbDAuMDAtMzIuMDAgbC0xNDQuMDAsMC4wMCBjLTQ0LjE5MiwwLjAwLTgwLjAwLTM1LjgwOC04MC4wMC04MC4wMHMgMzUuODI0LTgwLjAwLCA4MC4wMC04MC4wMGwgMTQ0LjAwLDAuMDAgTCA0MzIuMDAsNTYuMDAgeiBNIDQ1Mi40MzIsMTEyLjAwTCAyODguMDAsMTEyLjAwIAoJCWMtMjYuNDY0LDAuMDAtNDguMDAsMjEuNTM2LTQ4LjAwLDQ4LjAwcyAyMS41MzYsNDguMDAsIDQ4LjAwLDQ4LjAwbCAxNDQuMDAsMC4wMCBjIDkuODcyLDAuMTI4LCAxOS42NjQsNC45MTIsIDI1LjYzMiwxMi44NjRjIDEuNjY0LDIuMjQsIDIuOTYsNC43NTIsIDQuMDAsNy4zNzYKCQljIDAuMTQ0LDAuMzUyLCAwLjQwLDAuNjI0LCAwLjUyOCwwLjk5MkMgNDczLjY2NCwyMTQuMTQ0LCA0ODAuMDAsMTk1LjY0OCwgNDgwLjAwLDE3Ni4wMEMgNDgwLjAwLDE1MS4zOTIsIDQ3MC4wNjQsMTI4LjU2LCA0NTIuNDMyLDExMi4wMHoiIGRhdGEtdGFncz0idmFsbGV0IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAyZDsiIGQ9Ik0gMzUxLjIxNiw0NjEuNjBjLTEzMS4yMzIsNTIuNTQ0LTI4MC4yNC0xMS4yMzItMzMyLjgwLTE0Mi40OAoJCWMtNTIuNTc2LTEzMS4yNjQsIDExLjIzMi0yODAuMjg4LCAxNDIuNDgtMzMyLjgzMmMgMTMxLjI0OC01Mi41NiwgMjgwLjI1NiwxMS4yMzIsIDMzMi44MTYsMTQyLjQ4QyA1NDYuMjg4LDI2MC4wMzIsIDQ4Mi40NjQsNDA5LjAyNCwgMzUxLjIxNiw0NjEuNjB6CgkJIE0gMTcyLjgwLDE1Ljk4NEMgNTguMTQ0LDYxLjkwNCwgMi4yMDgsMTkyLjUyOCwgNDguMTEyLDMwNy4yMGMgNDUuOTIsMTE0LjY1NiwgMTc2LjU2LDE3MC42MDgsIDI5MS4yMzIsMTI0LjY3MmMgMTE0LjY1Ni00NS45MDQsIDE3MC41OTItMTc2LjU0NCwgMTI0LjY4OC0yOTEuMjAKCQlDIDQxOC4wOTYsMjYuMDAsIDI4Ny40NzItMjkuOTIsIDE3Mi44MCwxNS45ODR6TSAyNjcuOTg0LDI1My42NDhjLTE2LjQwLDYuNTc2LTM1LjA0LTEuNDA4LTQxLjYxNi0xNy44MDgKCQlzIDEuNDA4LTM1LjAyNCwgMTcuNzkyLTQxLjYwYyAxNi40MC02LjU3NiwgMzUuMDU2LDEuNDA4LCA0MS42MTYsMTcuNzkyQyAyOTIuMzM2LDIyOC40MzIsIDI4NC4zNjgsMjQ3LjA1NiwgMjY3Ljk4NCwyNTMuNjQ4eiBNIDI1MC4xMTIsMjA5LjA3MgoJCWMtOC4xOTIsMy4yOTYtMTIuMTc2LDEyLjYwOC04LjkxMiwyMC44MTZjIDMuMjk2LDguMTkyLCAxMi42MjQsMTIuMTc2LCAyMC44MTYsOC45MTJjIDguMTc2LTMuMjgsIDEyLjE2LTEyLjYwOCwgOC44OTYtMjAuODE2CgkJQyAyNjcuNjMyLDIwOS43OTIsIDI1OC4zMDQsMjA1LjgwOCwgMjUwLjExMiwyMDkuMDcyek0gMjkxLjc0NCwzMTMuMDRjLTQ5LjIxNiwxOS43MTItMTA1LjA4OC00LjIyNC0xMjQuODAtNTMuNDI0CgkJYy0xOS43MTItNDkuMjE2LCA0LjIyNC0xMDUuMDg4LCA1My40MjQtMTI0LjgwYyA0OS4yMTYtMTkuNzEyLCAxMDUuMDg4LDQuMjA4LCAxMjQuODAsNTMuNDI0UyAzNDAuOTc2LDI5My4zNDQsIDI5MS43NDQsMzEzLjA0eiBNIDIzMi4yODgsMTY0LjUyOAoJCWMtMzIuNzY4LDEzLjEwNC00OC43MzYsNTAuNDQ4LTM1LjYzMiw4My4yMGMgMTMuMTIsMzIuNzUyLCA1MC40MzIsNDguNzM2LCA4My4xODQsMzUuNjMyYyAzMi43ODQtMTMuMTIsIDQ4Ljc1Mi01MC40NjQsIDM1LjY2NC04My4yMTYKCQlDIDMwMi4zNjgsMTY3LjM5MiwgMjY1LjA0LDE1MS4zOTIsIDIzMi4yODgsMTY0LjUyOHpNIDM3NC45MTIsMTc2LjM1MiBMIDM3NC44OCwxNzYuMzUyIEMgMzYxLjgwOCwxNDMuNzI4IDMzNi43NTIsMTE5LjQ1NiAzMDYuNzg0LDEwNi40OTYgQyAzMDYuNjcyLDEwNi40NDggMzA2LjYwOCwxMDYuMzIgMzA2LjQ0OCwxMDYuMjU2IEMgMzAyLjM4NCwxMDQuNTI4IDI5Ny42OTYsMTA2LjQwIDI5NS45NTIsMTEwLjQ4IEMgMjk0LjIwOCwxMTQuNTI4IDI5Ni4xMTIsMTE5LjIzMiAzMDAuMTQ0LDEyMC45NiBDIDMyNi40OCwxMzIuMjQgMzQ4LjU0NCwxNTMuNTY4IDM2MC4wNDgsMTgyLjMwNCBMIDM2MC4wNDgsMTgyLjI4OCBDIDM2MS42OTYsMTg2LjQwIDM2Ni4zNTIsMTg4LjQwIDM3MC40NDgsMTg2LjczNiBDIDM3NC41NDQsMTg1LjEwNCAzNzYuNTQ0LDE4MC40NDggMzc0LjkxMiwxNzYuMzUyIFpNIDQyOS44NCwxNjIuOTc2IEMgNDMzLjkzNiwxNjEuMzI4IDQzNS45MzYsMTU2LjY3MiA0MzQuMzA0LDE1Mi41NzYgQyA0MTQuNzA0LDEwMy42NDggMzc3LjA4OCw2Ny4yMTYgMzMyLjE0NCw0Ny44MDggQyAzMzEuOTUyLDQ3LjcyOCAzMzEuODA4LDQ3LjU1MiAzMzEuNjE2LDQ3LjQ1NiBDIDMyNy41NTIsNDUuNzI4IDMyMi44NjQsNDcuNTg0IDMyMS4xMiw1MS42NjQgQyAzMTkuMzc2LDU1LjcyOCAzMjEuMjgsNjAuNDMyIDMyNS4zMTIsNjIuMTYgQyAzNjYuNzIsNzkuODg4IDQwMS4zNzYsMTEzLjQwOCA0MTkuNDQsMTU4LjUyOCBDIDQyMS4wODgsMTYyLjYyNCA0MjUuNzQ0LDE2NC42MjQgNDI5Ljg0LDE2Mi45NzYgWk0gNDAwLjEyOCwxNzQuODY0IEMgNDA0LjIyNCwxNzMuMjE2IDQwNi4yMjQsMTY4LjU2IDQwNC41OTIsMTY0LjQ2NCBDIDM4OC4yNTYsMTIzLjY4IDM1Ni45MTIsOTMuMzQ0IDMxOS40NzIsNzcuMTY4IEMgMzE5LjI5Niw3Ny4wNzIgMzE5LjIwLDc2LjkyOCAzMTkuMDQsNzYuODQ4IEMgMzE0Ljk3Niw3NS4xMiAzMTAuMjg4LDc2Ljk5MiAzMDguNTQ0LDgxLjA1NiBDIDMwNi44MCw4NS4xMiAzMDguNzA0LDg5LjgyNCAzMTIuNzY4LDkxLjU2OCBMIDMxMi43MzYsOTEuNTY4IEMgMzQ2LjY0LDEwNi4wOCAzNzQuOTc2LDEzMy40ODggMzg5LjcyOCwxNzAuNDE2IEMgMzkxLjM3NiwxNzQuNTI4IDM5Ni4wMzIsMTc2LjUxMiA0MDAuMTI4LDE3NC44NjQgWk0gMjE2LjIwOCwzMzcuNDA4IEMgMjE3Ljk1MiwzMzMuMzI4IDIxNi4wNjQsMzI4LjY0IDIxMi4wMCwzMjYuODggQyAxODUuNjY0LDMxNS42MTYgMTYzLjYwLDI5NC4yNzIgMTUyLjExMiwyNjUuNTY4IEwgMTUyLjA5NiwyNjUuNTY4IEMgMTUwLjQ2NCwyNjEuNDcyIDE0NS44MDgsMjU5LjQ3MiAxNDEuNjk2LDI2MS4xMiBDIDEzNy42MCwyNjIuNzY4IDEzNS42MCwyNjcuNDA4IDEzNy4yNDgsMjcxLjUyIEwgMTM3LjI2NCwyNzEuNTIgQyAxNTAuMzIsMzA0LjEyOCAxNzUuMzkyLDMyOC40MTYgMjA1LjM2LDM0MS4zNzYgQyAyMDUuNDcyLDM0MS40MjQgMjA1LjU1MiwzNDEuNTUyIDIwNS42OTYsMzQxLjYwIEMgMjA5Ljc2LDM0My4zNDQgMjE0LjQ2NCwzNDEuNDg4IDIxNi4yMDgsMzM3LjQwOCBaTSAxOTEuMDA4LDM5Ni4yNCBDIDE5Mi43NTIsMzkyLjE3NiAxOTAuODY0LDM4Ny40ODggMTg2LjgxNiwzODUuNzI4IEMgMTQ1LjQwOCwzNjguMDAgMTEwLjc2OCwzMzQuNDggOTIuNjg4LDI4OS4zNzYgQyA5MS4wNCwyODUuMjY0IDg2LjM4NCwyODMuMjggODIuMjg4LDI4NC45MjggQyA3OC4xNzYsMjg2LjU2IDc2LjE3NiwyOTEuMjE2IDc3Ljg0LDI5NS4zNDQgQyA5Ny40NCwzNDQuMjcyIDEzNS4wNCwzODAuNjg4IDE4MC4wMCw0MDAuMTEyIEMgMTgwLjE2LDQwMC4xOTIgMTgwLjMwNCw0MDAuMzY4IDE4MC40OTYsNDAwLjQ0OCBDIDE4NC41Niw0MDIuMTc2IDE4OS4yNjQsNDAwLjMwNCAxOTEuMDA4LDM5Ni4yNCBaTSAxOTkuMzkyLDM1Ni4zMzYgTCAxOTkuMzkyLDM1Ni4yODggQyAxNjUuNTIsMzQxLjc5MiAxMzcuMTY4LDMxNC4zNjggMTIyLjQwLDI3Ny40NCBDIDEyMC43NTIsMjczLjMyOCAxMTYuMDk2LDI3MS4zNiAxMTIuMDAsMjcyLjk5MiBDIDEwNy45MiwyNzQuNjU2IDEwNS45MDQsMjc5LjI5NiAxMDcuNTY4LDI4My40MDggQyAxMjMuODg4LDMyNC4xNzYgMTU1LjIzMiwzNTQuNTQ0IDE5Mi42ODgsMzcwLjczNiBDIDE5Mi44NDgsMzcwLjgwIDE5Mi45NDQsMzcwLjk2IDE5My4xMDQsMzcxLjAyNCBDIDE5Ny4xNjgsMzcyLjc2OCAyMDEuODcyLDM3MC44OCAyMDMuNjE2LDM2Ni44MzIgQyAyMDUuMzYsMzYyLjc1MiAyMDMuNDU2LDM1OC4wNjQgMTk5LjQwOCwzNTYuMzM2IFoiIGRhdGEtdGFncz0idnluaWwiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlMDJlOyIgZD0iTSAzOTcuMzEyLDI5Ni44OEMgMzk0LjMzNiwzMDEuMzI4LCAzODkuMzQ0LDMwNC4wMCwgMzg0LjAwLDMwNC4wMGwtMTYuMDAsMC4wMCBjLTguODQ4LDAuMDAtMTYuMDAtNy4xNTItMTYuMDAtMTYuMDBsMC4wMC05Ni4wMCBjMC4wMC04Ljg0OCwgNy4xNTItMTYuMDAsIDE2LjAwLTE2LjAwbCA2NC4wMCwwLjAwIAoJCWMgOC44NDgsMC4wMCwgMTYuMDAsNy4xNTIsIDE2LjAwLDE2LjAwbDAuMDAsMjQuMDAgYzAuMDAsMy4xNTItMC45NDQsNi4yNTYtMi42ODgsOC44OEwgMzk3LjMxMiwyOTYuODh6IE0gNDMyLjAwLDE5Mi4wMGwtNjQuMDAsMC4wMCBsMC4wMCw5Ni4wMCBsIDE2LjAwLDAuMDAgbCA0OC4wMC03Mi4wMEwgNDMyLjAwLDE5Mi4wMCB6TSA1MDMuOTM2LDIzNC42MjRsLTY0LjAwLDk2LjAwQyA0MzEuMDA4LDM0NC4wMTYsIDQxNi4wNjQsMzUyLjAwLCA0MDAuMDAsMzUyLjAwbC02NC4wMCwwLjAwIEwgMzM2LjAwLDM4NC4wMCBjMC4wMCwyNi40NjQtMjEuNTM2LDQ4LjAwLTQ4LjAwLDQ4LjAwTCA0OC4wMCw0MzIuMDAgQyAyMS41MzYsNDMyLjAwLDAuMDAsNDEwLjQ2NCwwLjAwLDM4NC4wMGwwLjAwLTE3Ni4wMCAKCQljMC4wMC0yNi40NjQsIDIxLjUzNi00OC4wMCwgNDguMDAtNDguMDBsMC4wMCwwLjAwIGwwLjAwLTQ4LjAwIGMwLjAwLTI2LjQ2NCwgMjEuNTM2LTQ4LjAwLCA0OC4wMC00OC4wMGwgMTguMjcyLDAuMDAgYyA3LjE1Mi0yNy41MzYsIDMyLjAwLTQ4LjAwLCA2MS43NDQtNDguMDBjIDI5LjcxMiwwLjAwLCA1NC41NiwyMC40NjQsIDYxLjcxMiw0OC4wMGwgODQuNTEyLDAuMDAgCgkJYyA3LjE1Mi0yNy41MzYsIDMyLjAwLTQ4LjAwLCA2MS43NDQtNDguMDBjIDI5LjcxMiwwLjAwLCA1NC41NiwyMC40NjQsIDYxLjcxMiw0OC4wMEwgNDY0LjAwLDY0LjAwIGMgMjYuNDY0LDAuMDAsIDQ4LjAwLDIxLjUzNiwgNDguMDAsNDguMDBsMC4wMCw5Ni4wMCBDIDUxMi4wMCwyMTcuNTA0LCA1MDkuMjE2LDIyNi43MiwgNTAzLjkzNiwyMzQuNjI0eiBNIDQ4LjAwLDE5Mi4wMAoJCWMtOC44MzIsMC4wMC0xNi4wMCw3LjE1Mi0xNi4wMCwxNi4wMEwgMzIuMDAsMzg0LjAwIGMwLjAwLDguODQ4LCA3LjE2OCwxNi4wMCwgMTYuMDAsMTYuMDBsIDI0MC4wMCwwLjAwIGMgOC44NDgsMC4wMCwgMTYuMDAtNy4xNTIsIDE2LjAwLTE2LjAwbDAuMDAtMzIuMDAgbDAuMDAtMzIuMDAgbDAuMDAtMTEyLjAwIGMwLjAwLTguODQ4LTcuMTUyLTE2LjAwLTE2LjAwLTE2LjAwTCA0OC4wMCwxOTIuMDAgeiBNIDE3Ni4wMTYsNDguMDAKCQljLTE3LjY4LDAuMDAtMzIuMDAsMTQuMzM2LTMyLjAwLDMyLjAwcyAxNC4zMiwzMi4wMCwgMzIuMDAsMzIuMDBjIDE3LjY2NCwwLjAwLCAzMi4wMC0xNC4zMzYsIDMyLjAwLTMyLjAwUyAxOTMuNjY0LDQ4LjAwLCAxNzYuMDE2LDQ4LjAweiBNIDM4NC4wMCw0OC4wMGMtMTcuNjgsMC4wMC0zMi4wMCwxNC4zMzYtMzIuMDAsMzIuMDBzIDE0LjMyLDMyLjAwLCAzMi4wMCwzMi4wMAoJCWMgMTcuNjY0LDAuMDAsIDMyLjAwLTE0LjMzNiwgMzIuMDAtMzIuMDBTIDQwMS42NjQsNDguMDAsIDM4NC4wMCw0OC4wMHogTSA0ODAuMDAsMTEyLjAwYzAuMDAtOC44NDgtNy4xNTItMTYuMDAtMTYuMDAtMTYuMDBsLTE4LjI4OCwwLjAwIGMtNy4xNTIsMjcuNTM2LTMyLjAwLDQ4LjAwLTYxLjcxMiw0OC4wMGMtMjkuNzQ0LDAuMDAtNTQuNTkyLTIwLjQ2NC02MS43NDQtNDguMDAKCQlsLTg0LjUxMiwwLjAwIGMtNy4xNTIsMjcuNTM2LTMyLjAwLDQ4LjAwLTYxLjcxMiw0OC4wMGMtMjkuNzQ0LDAuMDAtNTQuNTkyLTIwLjQ2NC02MS43NDQtNDguMDBMIDk2LjAwLDk2LjAwIGMtOC44MzIsMC4wMC0xNi4wMCw3LjE1Mi0xNi4wMCwxNi4wMGwwLjAwLDQ4LjAwIGwgMjA4LjAwLDAuMDAgYyAyNi40NjQsMC4wMCwgNDguMDAsMjEuNTM2LCA0OC4wMCw0OC4wMGwwLjAwLDExMi4wMCBsIDY0LjAwLDAuMDAgCgkJYyA1LjM0NCwwLjAwLCAxMC4zMzYtMi42NzIsIDEzLjMxMi03LjEybCA2NC4wMC05Ni4wMEMgNDc5LjA1NiwyMTQuMjU2LCA0ODAuMDAsMjExLjE1MiwgNDgwLjAwLDIwOC4wMEwgNDgwLjAwLDExMi4wMCB6IiBkYXRhLXRhZ3M9InRydWNrIiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTAyZjsiIGQ9Ik0gMjQ4LjAwLDQ4MC4wMEMgMTExLjAyNCw0ODAuMDAsMC4wMCwzNjguOTc2LDAuMDAsMjMyLjAwUyAxMTEuMDI0LTE2LjAwLCAyNDguMDAtMTYuMDBTIDQ5Ni4wMCw5NS4wMjQsIDQ5Ni4wMCwyMzIuMDBTIDM4NC45NzYsNDgwLjAwLCAyNDguMDAsNDgwLjAweiBNIDQ2My42MCwyNDAuMDAKCWwtOTUuOTM2LDAuMDAgYy0wLjg4LDM1LjQ0LTcuMTg0LDY5LjI5Ni0xOC4zNjgsMTAwLjI4OGMgMjEuNjAsOS4wMDgsIDQxLjU2OCwyMC45OTIsIDU5Ljc3NiwzNS4xNTJDIDQ0MS40NCwzMzkuMTA0LCA0NjEuNjgsMjkxLjkyLCA0NjMuNjAsMjQwLjAwegoJIE0gMjM5LjE1MiwxNi40NDhjLTI2LjU5MiwyMi4xNDQtNDguODk2LDUwLjg5Ni02NS4yMTYsODQuMjg4YyAyMC45NDQsNi41NDQsIDQzLjEzNiwxMC4xMjgsIDY2LjA2NCwxMC44NjRsMC4wMC05NS4xODQgCglDIDIzOS43MTIsMTYuNDE2LCAyMzkuNDQsMTYuNDMyLCAyMzkuMTUyLDE2LjQ0OHogTSAyNTYuODE2LDQ0Ny41NTJjIDMwLjE3Ni0yNS4xMiwgNTQuODAtNTguNzY4LCA3MS40NTYtOTguMDE2Yy0yMi44MTYtNy43OTItNDcuMDU2LTEyLjMyLTcyLjI4OC0xMy4xMgoJTCAyNTUuOTg0LDQ0Ny42MCBDIDI1Ni4yODgsNDQ3LjU4NCwgMjU2LjU0NCw0NDcuNTY4LCAyNTYuODE2LDQ0Ny41NTJ6IE0gMjgzLjQ3Miw0NDQuODMyYyA0NC4xNi03LjM0NCwgODMuNzc2LTI3Ljk2OCwgMTE0LjYyNC01Ny44MjQKCWMtMTYuNzUyLTEyLjg0OC0zNS4wNTYtMjMuNzI4LTU0Ljg0OC0zMS45NjhDIDMyOC42ODgsMzg5LjU1MiwgMzA4LjI1Niw0MjAuMDY0LCAyODMuNDcyLDQ0NC44MzJ6IE0gMjQwLjAwLDQ0Ny42MGwwLjAwLTExMS4xODQgCgljLTI1LjIzMiwwLjgxNi00OS40ODgsNS4zMjgtNzIuMjg4LDEzLjEyYyAxNi42NTYsMzkuMjQ4LCA0MS4yOCw3Mi44OTYsIDcxLjQ1Niw5OC4wMTZDIDIzOS40NTYsNDQ3LjU2OCwgMjM5LjcxMiw0NDcuNTg0LCAyNDAuMDAsNDQ3LjYweiBNIDE1Mi43MzYsMzU1LjAyNAoJYy0xOS43Niw4LjI0LTM4LjA4LDE5LjEyLTU0LjgzMiwzMS45NjhjIDMwLjgzMiwyOS44NTYsIDcwLjQ2NCw1MC40OCwgMTE0LjYyNCw1Ny44MjRDIDE4Ny43MjgsNDIwLjA2NCwgMTY3LjMxMiwzODkuNTUyLCAxNTIuNzM2LDM1NS4wMjR6IE0gMTYxLjY4LDMzNC43ODQKCUMgMTg2LjM1MiwzMjYuMjI0LCAyMTIuNjQsMzIxLjIzMiwgMjQwLjAwLDMyMC40MEwgMjQwLjAwLDI0MC4wMCBMIDE0NC4zMzYsMjQwLjAwIEMgMTQ1LjIwLDI3My41MDQsIDE1MS4xMzYsMzA1LjUyLCAxNjEuNjgsMzM0Ljc4NHogTSAyNDAuMDAsMjI0LjAwbDAuMDAtOTYuNDAgCgljLTI1LjIzMi0wLjc2OC00OS42MzItNC44OTYtNzIuNjI0LTEyLjMwNEMgMTUzLjUyLDE0OC4yODgsIDE0NS4zNDQsMTg1LjA0LCAxNDQuMzM2LDIyNC4wMEwgMjQwLjAwLDIyNC4wMCB6IE0gMjEyLjUyOCwxOS4xNjgKCWMtMzkuNTY4LDYuNTc2LTc1LjUwNCwyMy44MDgtMTA0LjcyLDQ4LjgzMmMgMTUuNzYsMTAuOTI4LCAzMi44MCwyMC4xNzYsIDUxLjAwOCwyNy4yMEMgMTcyLjc2OCw2Ni4yNzIsIDE5MS4wMjQsNDAuNTkyLCAyMTIuNTI4LDE5LjE2OHogTSAyNTYuMDAsMTYuNDAKCWwwLjAwLDk1LjE4NCBjIDIyLjkxMi0wLjczNiwgNDUuMTItNC4zMiwgNjYuMDY0LTEwLjg2NGMtMTYuMzM2LTMzLjM5Mi0zOC42MjQtNjIuMTQ0LTY1LjIxNi04NC4yODhDIDI1Ni41NzYsMTYuNDMyLCAyNTYuMjg4LDE2LjQxNiwgMjU2LjAwLDE2LjQwegoJIE0gMzM3LjE4NCw5NS4yMGMgMTguMTkyLTcuMDI0LCAzNS4yMTYtMTYuMjg4LCA1MS4wMDgtMjcuMjBjLTI5LjIxNi0yNS4wMDgtNjUuMTUyLTQyLjI1Ni0xMDQuNzItNDguODMyQyAzMDQuOTc2LDQwLjU5MiwgMzIzLjIxNiw2Ni4yNzIsIDMzNy4xODQsOTUuMjB6CgkgTSAzMjguNjI0LDExNS4yOTZjLTIzLjAwOCw3LjQwOC00Ny40MDgsMTEuNTM2LTcyLjYyNCwxMi4zMDRMIDI1Ni4wMCwyMjQuMDAgbCA5NS42NjQsMC4wMCBDIDM1MC42NTYsMTg1LjA0LCAzNDIuNDY0LDE0OC4yODgsIDMyOC42MjQsMTE1LjI5NnogTSAyNTYuMDAsMjQwLjAwTCAyNTYuMDAsMzIwLjQwIAoJYyAyNy4zNDQsMC44MzIsIDUzLjYzMiw1LjgwOCwgNzguMzIsMTQuMzY4YyAxMC41MjgtMjkuMjY0LCAxNi40NjQtNjEuMjgsIDE3LjM0NC05NC43ODRMIDI1Ni4wMCwyMzkuOTg0IHogTSA4Ni45NDQsMzc1LjQ0QyAxMDUuMTUyLDM2MS4yOCwgMTI1LjEyLDM0OS4yOTYsIDE0Ni43MDQsMzQwLjI4OAoJQyAxMzUuNTIsMzA5LjI5NiwgMTI5LjIxNiwyNzUuNDQsIDEyOC4zMzYsMjQwLjAwTCAzMi40MCwyNDAuMDAgQyAzNC4zMiwyOTEuOTIsIDU0LjU2LDMzOS4xMDQsIDg2Ljk0NCwzNzUuNDR6IE0gMzIuNDAsMjI0LjAwbCA5NS45MzYsMC4wMCAKCWMgMC45OTItNDAuODgsIDkuNTM2LTc5LjQ4OCwgMjQuMDQ4LTExNC4xOTJjLTIwLjI3Mi03LjkwNC0zOS4xNjgtMTguNDMyLTU2LjYwOC0zMC44OTZDIDU4LjIwOCwxMTYuMzA0LCAzNC40OTYsMTY3LjQyNCwgMzIuNDAsMjI0LjAweiBNIDQwMC4yMjQsNzguOTI4CgljLTE3LjQ0LDEyLjQ0OC0zNi4zMzYsMjIuOTkyLTU2LjYyNCwzMC44OTZjIDE0LjUyOCwzNC43MDQsIDIzLjA1Niw3My4zMTIsIDI0LjA2NCwxMTQuMTkybCA5NS45MzYsMC4wMCBDIDQ2MS41MDQsMTY3LjQyNCwgNDM3Ljc3NiwxMTYuMzA0LCA0MDAuMjI0LDc4LjkyOHoiIGRhdGEtdGFncz0id29ybGQiIC8+CjxnbHlwaCBjbGFzcz0iaGlkZGVuIiB1bmljb2RlPSImI3hmMDAwOyIgZD0iTTAsNDgwTCA1MTIgLTMyTDAgLTMyIHoiIGhvcml6LWFkdi14PSIwIiAvPgo8L2ZvbnQ+PC9kZWZzPjwvc3ZnPg==) format('svg'),
		 url(data:font/ttf;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTWNFYKgAADwQAAAAHEdERUYAYQAGAAA78AAAACBPUy8yL7vcHwAAAVgAAABWY21hcOBz89MAAAKAAAABUmdhc3D//wADAAA76AAAAAhnbHlmzx00fAAABEAAADP8aGVhZPrbMjIAAADcAAAANmhoZWEEEQAUAAABFAAAACRobXR4YqoCXAAAAbAAAADQbG9jYTjZKywAAAPUAAAAam1heHAAhwD7AAABOAAAACBuYW1lrhGJrQAAODwAAAGVcG9zdKj+xwcAADnUAAACEgABAAAAAQAARrYAwV8PPPUACwIAAAAAAMzd+LsAAAAAzN34u////98CAQHgAAAACAACAAAAAAAAAAEAAAHg/98ALgIA///+AAIBAAEAAAAAAAAAAAAAAAAAAAA0AAEAAAA0APgAEQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQMAAAAAAAAAAAAAEAAAAAAAAAAAAAAAUGZFZABA4ADwAAHg/+AALgHgACGAAAABAAAAAAAAAgAAAAAAAAAAqgAAAgAAAAIAAAACAAABAgAAEgIAAAACAAAAAgAAIAIAAAECAAAAAgAAAAIAAAACAAAAAgAAAAIAAEACAABQAgAAAAIAAAACAAAAAgAAQAIAAAACAAAAAgAAAAIAACACAABQAgAAAAIAAAACAAAAAgAAEAIAAAACAABgAgAAAAIAAAACAAABAgAAIAIAAAQCAAAAAgAAAAIAAAACAAAAAgAAAQIAAFACAAAAAgAAAAIAAAACAAAAAgAAAgIAAAACAAAAAAAAAAAAAAMAAAADAAAAHAABAAAAAABMAAMAAQAAABwABAAwAAAACAAIAAIAAAAA4C/wAP//AAAAAOAA8AD//wAAIAMQMwABAAAAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABOAKoA/gGkAiYCeAMkA3wD/ARGBW4F2gYmBpIHAAegCBYIeAjKCTIJjgn0Ck4KoAtuC7wMiA0IDagOXA6iD/oRKBGgEhYStBMiE+YU5BU6FdAWFhaeFzQXzBiSGToZ8Bn+AAAAAwAA//gCAQG4ABIAJAAwAAABLgEHJgYHBhQXFjMWMjc2NzY0DwEGLwEmNDc+AR8BNzYWFxYUJTIUIyIGFRQiNTQ2AdMrey0teystLbABDigOrwItRLELC7EkJCJgJBYWJGAiJP60CAgVHxAoAYwrAikpAistfS2vDg6tAi19k68MDK8jYyMiAiAUFCACIiNjeRAeFggIHCgAAAAAAgAAACACAAGQABkAPQAAAS4BIyIGByYjIgYVFBcOARUUFjMhMjY1NCYHISImNTQ3PgEnJjU0NjM2Fx4BPgE3PgEzMhYXHgEXHgEVFAYBnwZROCtGEQwKHioEGBw9KwEgMkY3Qf7gHiokEQQHAhcRCwsHCAcCBQ04ICtABAEHEh8oNAEON0suJgQqHgsLDjAcKz1GMixCxioeKRUJDBEHBREXAQUCAggFCh4jOisSBwQGMCAkNAAAAAIAAf/gAf8B0AAeADMAAAAmLwImIg8CDgEfAQcGFxYzMj8BFxYzMjc2LwE3BwYfAScmIg8BNzYvATc2PwEXFh8BAgUOFoY6Ci4KOoYWDhBhFgQTCQwJCXR0CQkMCRMEFmJ9DQMXdAgUCHQXAw1ihRQIOjoIFIUBAioDFHgVFXgUAyoPYocWDQcEPz8EBw0Wh2JJDRKHPwQEP4cSDWIUAhJ4eBIDEwAAAAoAEgAQAe4BoAASABoANgA+AEYASgBSAFoAYgBwAAABJiIHBgcGFxYXFjI3Njc2NCcmBwYnJjc2FxY3JicmIgcGBwYXFhcWFwYVFBYyNjU0JzY3Njc2BwYnJjc2FxYmMjY0JiIGFDYyFCIXMhQrASI0MzcyFCsBIjQzNzIUKwEiNDMnMhQjBwYPARQiPwE2NwFjQoJCCQMiIgMJQoJCCQMREQMMgH8hIX+AIW0FF2nSaRYFJSUFFjA1A0JcQgM1MBYGJUTPziMjzs8jVBQODhQOEBAQGAgIMAgIQAgIMAgIMAgIMAgIwAgIPAgBAxABBAIIAVYNDQIJaWoJAg0NAgk1ajQJ1xoaZWQbG2SZFgINDQIWm5sWAgYDAgIHCQkHAgIDBgIWm5MaGpOTGhqTQA4UDg4UEhCwEBAwEBAwEBBDEAQBCB4ICC0HAQAABgAA/+ACAAHgAAsAIwAxADkARgBYAAABNCYjIjQzMhYVFCIlJiMiBw4BHQEHBhQfARYyPwEzMjY3NicFBwYiLwEmND8BNDEXIjciByc2PQEBNgYrAQE1NDc2MzIXAQMiJjU0NjMyFhUUBiMiJjU0JgGwVDwICEJeEP7iDhQKCA4QMg4OcA4oDjLcDxgFDRf+6zIEDgRwBQUyhwEXAQaOAQFVLggLBf6VCgMDBwQBYLsHCQkHXYMJBwcJcQEAPFQQXkII2g4EBRgP3DIOKA5wDg4yEA4dFzsyBQVwBA4EMgGHCQGOBgHB/qsUFAFrBQsEAQX+oAFlCQcHCYNdBwkJB09xAAADAAAAMAIAAZAAIAAwADkAAAEjIg8BNTQmIyEiBh0CFBYzITI2PQEXFjsBMjY1ETQmASImNRE0NjMhMhYVERQGIzcrAS8BNTc7AQHgDg0KKxwU/tAUHBwUATAUHCsKDQ4NExP+QwcJCQcBMAcJCQeADgJAEFACDgGACSsUFBwcFHCQFBwcFBQrCRIOAQANE/7QCQcBAAcJCQf/AAcJEEAQYFAAAAoAIP/fAeAB4AAjAC0ANwBDAFMAVwBnAGsAewB/AAABLgErATU0JisBIgYdASMiBgcdARQWMxEUFjMhMjY1ETI2PQElNDY7ATIWHQEjARQGIyEiJjURITcVIT0BNDYzITIWFQEzMjY9ATQmKwEiBh0BFBY3MxUjFzMyNj0BNCYrASIGHQEUFjczFSMXMzI2PQE0JisBIgYdARQWNzMVIwHgARwTMBwUoBQcMBMcARMNJRsBABslDRP+wAkHoAcJwAEAEw3/AA0TAUAg/oAJBwFgBwn+0CAHCQkHIAcJCQcgIGAgBwkJByAHCQkHICBgIAcJCQcgBwkJByAgAXMTGhAUHBwUEBoTExANE/7wGyUlGwEQEw0QUAcJCQcQ/oANExMNARAwEBAQBwkJB/6wCQfQBwkJB9AHCeDQEAkH0AcJCQfQBwng0BAJB9AHCQkH0AcJ4NAAAAAAAwAB/+AB/wHgABsAKwA1AAAlJic2Nz4BJicmIgcOARYXFhcGBwYXHgEzITI2JwcGIi8BLgE3PgEyFhcWBgU2PwEWMjcXFhcB8j1YKxIFARgWK44rFhgBBRIrWD0UBwMRCwHAGA7CBR1EHQUiHgcHQGxABwce/ro3UigXMBcoUTgbKBM2TRxFUx02Nh1TRRxNNhMoDhYKDS1dByEhByprNTpSUjo1a5QlEggPDwgSJQAEAAD/4AIBAeAAIAA+AFIAWgAAACIGFRQXBwYdARQWOwEyPwEzMjY9ATMyNj0BNxYzMjY0ByInDwIGHQEjIgYdASMiDwEjNT8BJjU0NjIWFAY3JicmBwYHBhUUFxYXFjc2NzY1NAcmJzY3FhcGAaKEXgvCCRMNMAsJFyUNEyANEyYdHUJeoCIfBRIfCSANEyUOCRctuxcSS2pLSygbJgYIIQwBAxsmBgghDAEzIxoJGiQZCQHgXkIdHcIKCjANEwkXEw0gEw0mJQtehMISBRIfCQ0mEw0gCRcuuhcfIjVLS2pLnCYbBQMMIQMCBQQmGwUDDCEDAgUoGSQaCRojGgAABAAA/98CAAHgABMAHAAkADAAAAAiBhUUFwcGFRQWMzI/ARYzMjY0AQYiJjQ/ARYXFiImNDYyFhQnMhQjIgYVFCI1NDYBkKBwFoURIRcYEYUqMFBw/k0JFxEJgREXtIReXoReoAgIKDgQQgHgcU8wKoURGBchEYUWcJ/+lgkRFwmBFxEGXoReXoSyEDgoCAguQgAAAAYAAP/fAgAB4ABbAKsAswC7AMMAywAAAScmJzc2Ji8BJiMiDwEmLwEuASsBIgYPAQYHJyYjIg8BDgEfAQYPAQ4BHQEUFh8BFhcHBhYfARYzMj8BFh8BHgE7ATI2PwE2NxcWMzI/AT4BLwE2PwE+AT0BNCYHBgcGBwYfAQcnJiMiBwYHBg8BIycmJyYnJiMiDwEnNzYnJicmLwE1NzY3Njc2LwE3FxYzMjc2NzY/ATMXFhcWFxYzMj8BFwcGFxYXFh8BFSYiBhQWMjY0BiImNDYyFhQmIgYUFjI2NAYiJjQ2MhYUAeYxAwUbBwIJHgoNCggpCwoKAhILLAsSAgoKCykICg0KHggDBxsFAzELDw8LMQMFGwcDCB4KDQoIKQsKCgISCywLEgIKCgspCAoNCh4JAgcbBQMxCw8PQhIGAwQIChwfKggJCAYJCREDCiwKAxEJCQYICQgqHxwKCAQDBhIxMRIGAwQIChwfKggJCAYJCREDCiwKAxEJCQYICQgqHxwKCAQDBhIxslxCQlxCR1I5OVI5RzYlJTYlLCgcHCgcARUKCgspChcIHgoGGwUDMQsPDwsxAwUbBgoeCBcKKQsKCgISCywLEgIKCgspChcIHgoGGwUDMQwODwsxAwUbBgoeCBcKKQsKCgISCywLElMDEQkJEA8qHxwFAwQDBhIxMRIGAwQDBRwfKg8QCQkRAwosCgMRCQkQDyofHAUDBAMGEjExEgYDBAMFHB8qDxAJCREDCiyGQlxCQlyQOVI5OVJpJTYlJTVKHCgcHCgAAAAFAAAAAAIAAbAABwAPABsANQBLAAAAIgYUFjI2NA4CLgE+ARYnMhQjIgYVFCI1NDY3LwEuASsBIgYPAg4BHQEUFjMhMjY9ATQmAxQGIyEiJj0BND8CNjsBMh8CFhUBNWpLS2pLHTRPPQY0Tz1dCAgUHBAl80UWBhgPoA8YBhZFERccFAGgFBwXCQkH/mAHCQ1XHQQLoAsEHVcNAUBLaktLalU9BjRPPQY0ERAcFAgIGiZPDDcOEBAONwwDGhLwFBwcFPASGv7kBwkJB/AOAg5ICgpIDgIOAAAEAAAAHwH3AaAAEAAhACkAMQAAAScmIyEiBhURFBYzITI/ATYPAQYjISImNRE0NjMhMh8BFiYiBhQWMjY0BiImNDYyFhQB9lATI/7QGyUlGwEwIxNQFjFQCRL+0A0TEw0BMBIJUAtiKBwcKBwjGhMTGhMBAoAeJhr/ABslHoAiEYAPEw0BAA0TD4ARMBwoHBwoNBMaExMaAAUAQP/gAcAB4AAbACsAMwBLAFcAAAE1NCYiBh0BIgYdBBQWOwEyNj0ENCYlNDYyFh0BIzU0JiIGHQEjNxUjNTQ2MhYXHQIUBisBIiY9BDQ2OwMyFhUGMhYVFAcGIicmNTQBkFR4VBQcVDxgPFQc/uxCXEIgL0IvILCAJTYlYEIuYC5CCQcg4CAHCa0aEwsHHAcLARBAPFRUPEAcFDAQIBA8VFQ8ECAQMBQcQC5CQi5AQCEvLyFAQEBAGyUluxAgEC5CQi4QIBAwBwkJBzATDQ4dFRUdDg0AAAYAUP/gAbAB4AAYACIAKAAvAD0ASQAAACIGFRQeARceBDMyPgM3PgI1NAMHJicjNxQGBwYnJiczBg8BIiYnNw4BNyMmJyY1NDYyFhUUBwYnMhQjIgYVFCI1NDYBSZJnHisHCBAKERkUFBkSCRAIByseh08EBQFjAwEDYAQGfAQBOQ0NBkQHDjyWCBMqVHhUKhNTCAghLxA4AeBnSRxESxYUORodCwsdGjkUFUxEHEn+tAoNEgwBCgMLHA4RCwZfBw0IEgqQEiFMITxUVDwgTSHuEC8hCAgoOAAAAAAHAAD/4AIAAeAAIQAqADQAOgBHAFcAaAAAASYjIg8BBjEVBwYPATAUBhQGFRQWMzI2Mj4BMTc2PwE2JgMmJzcWBxUHNCcmJyYnNxYXFhcHJic3NhcDBiMiJjU0PwE2FxYHNyYnJic3Njc2FhceAQcGBwEHPAExJicmIzc2MzIXFhcWAdYpNiwfTQGmCwUmAQEhFwIFBQQDhxAM9CEH/AIJlw8ffBMKCw4TmBMPDAjdFxd7HS38CAMKDgIQHxcYAhABGhoiEAIEGEIaGwgVBAIBAhsEJCk2GhUfKSAdAwIBtykeTgEBpgsQiQIEBAQCFyEBAQEkBAz2IWP+0hUVmDEfAX0KOxELDQqZCA8MEF4JAXwcC/6UAg4KAgc9ARcYHgQjGhoBOgYFEQoZG0YYAgEA/xwBCjAlKRoVIB0mIgAAABAAAAAgAgABoAATABYAGgAeACEAJAAnACoALQAwADMANgA5ADwAQABEAAABJyYjISIPAQYVFB8BFjI/ATY1NAcjPwIXByMnNx8BByc7AQc/ARcnMw8BJzMHJzMHFyMfAScXJzMhMwc3JzcXJRcHIwH3UgkN/uINCVIJCOAKHArgCNxIJA0rISlgKSEsNCgoYE92KyghOjkfZSRHiB85GShJTSd2Up05ATI5nWYrJUr+jCUrRQFFUQoKUQkODAnuCwvuCgwNDB0LJCAiIiAkOMfHxNQhIVAaBB4aGi8hEMTEqKiouCsfSkofKwAABAAA//ACAAHQAA8AEwAzAEUAAAEhIgYdARQWMyEyNj0BNCYHITUhNyEiBhURFBY7ARUHBhUUFjMhMjY1NC8BNTMyNjURNCYDFAYrAyImNRE0NjMhMhYVAbD+oAcJCQcBYAcJCQf+oAFgIP5gFBwcFKBkDAkHASAHCQxkoBQcHAQJB5CAkAcJCQcBoAcJAZAJB+AHCQkH4AcJ8OBQHBT+wBQcEw0DDQcJCQcNAw0THBQBQBQc/pAHCQkHAUAHCQkHAAAAAAQAQP/gAcEB4AAHAA8AIwA4AAA2MjY0JiIGFDYyFhQGIiY0NiIGFRQeAhcWOwEyNz4DNTQDBgc0JyIxLgM1NDYyFhUUDgLYUDg4UDg/Qi8vQi+goHAdOi0iCg8CDwoiLTodvgEBAQEgJzodXoReHTsmxDhQODhQeC9CLy9Cm3BQKFRWOicNDSc6VlQoUP6SAQEBASUwVFAlQl5eQiVQVDAAAAAABQAAAEACAAGAACwANgBCAEoAUgAAJTA0NTgBJjEuASIGBxQwFTAxBhQxHAEVHAEXOAEVHgEyNjcwNjEwMTwBMTY0BiImJz4BMhYXBicyFCMiBhUUIjU0PgEiBhQWMjY0BiImNDYyFhQB/wEjjJ6LJAEBJIuejCMBAbyHeSEheYd5ISG9CAgTHRAmSFxCQlxCSFA4OFA45AEBAURVVUMBAQEBAwICAQEBAURVVUQBAQEDAoFGOjpGRjo6ehAcFAgIGyUwQlxCQlyOOFA4OFAAAAMAAAAAAgABwAALACkAQQAAATIUIyIGFRQiNTQ+ASIGFRQWFxQxFA4DFQYVFBYzMjM+ATcWMzI2NAUiJyYjIgcGBzY1NDU0Jy4BNTQ2MhYUBgEACAhAYBBostSWPDQECQUNAQgGBAEgPQ8ZGGqW/wAWFwICEAkSHwsRLTKDuoODAXAQOiYICC5CUHBQMVMbAQgRFAoUAQMDBggGLBIEcKDwAwEMFhMaFQIBFAkWRiZCXl6EXgAAAAAEAAAAAAIAAcAAFgAiADwASgAAJScuASsCIgYPAQYdARQWMyEyNj0BNAcUBiMhIiY9ATchFycjIg8BBhY7AxcWOwEyPwE7AjI2LwEmByMiDwEjJyYrAjczFwH/QAMRC6CgCxEDQAElGwGAGyUgEw3+gA0TQAFAQGT4DAM3AgkILhMIFwkUbBQJFwgSLwgJAjcDBBoUCRdsFwkUGicv+C+58AoNDQrwBQRwGyUlG3AEdA0TEw1w8PDQDMAIDC4SEi4MCMAMwBIuLhKwsAAGACD/4AHgAeAAJQApAC0AMQA1ADkAAAEnJiMhIg8BDgEdARQWOwEwBhUTHgE7ATI2NxM0JjEzMjY9ATQmJSEXIRMnMwc3IychNyEnITchNSEBwhQHF/7gFwcUDRETDREBIAISDOAMEgIgARENExL+ogEgEP7AMAXqBQfuEgESAv7qBQEgMP6AAYABkDoWFjoBEg0wDRMDAf7gDBAQDAEgAQMTDTANEjEw/nAwMECgEDAgMAAGAFD/4AGwAeAADwAZAB0AJwAvADcAAAEhIgYVERQWMyEyNjURNCYDFAYjISImPQEhNSERITUhNTQ2MyEyFhUiFCsBIjQ7AQIUKwEiNDsBAYD/ABQcHBQBABQcHAQJB/8ABwkBIP7gASD+4AkHAQAHCXAIMAgIMAgIEAgIEAHgHBT+YBQcHBQBoBQc/jAHCQkHIBABQBAgBwkJBxAQ/nAQEAAAAA8AAP/gAgAB4AAUAC8ANwA/AEcATwBXAGEAaQBxAHsAgwCLAJsAnwAAASEiBh0BIyIGFREUFjMhMjY1ETQmAxQGIyEiJjURNDY7AREUFjI2NRE0NjMhMhYVByI0OwEyFCMnIjQ7ATIUIyciNDsBMhQjAzIUKwEiNDM3MhQrASI0MzcyFRQGKwEiNDMFMhQrASI0MzcyFCsBIjQzNzIVFAYrASI0MzcyFCMhIjQzBTIUIyEiNDM3MzI2PQE0JisBIgYdARQWNzMVIwHQ/qAUHBAUHCUbAYAbJRwEEw3+gA0TCQcQCQ4JCQcBYAcJqAgIgAgIgAgIgAgIgAgIgAgIsAgIgAgIgAgIgAgIgAgFA4AICAEwCAiACAiACAiACAiACAUDgAgIgAgI/tAICAEwCAj+0AgICHAHCQkHcAcJCRdQUAHgHBQgHBT+wBslJRsBkBQc/kANExMNAUAHCf7ABwkJBwGABwkJB6AQEDAQEDAQEP7AEBAwEBAwCAMFEGAQEDAQEDAIAwUQYBAQMBAQUAkHcAcJCQdwBwlwUAAFAAAAQAIAAZAADwASACAAIwAxAAABISIGHQEUFjMhMjY9ATQmBRcHBRQGIyEiJjU3FxYyPwEXJzcHBiIvAzQ2MyEyFhUBwP6AGyUlGwGAGyUl/kVwcAHAEw3+gA0TfUYNIA1GfXBwzQgWCEIOfRMNAYANEwGQJhrQGyUlG9AaJlRUVBQNExMNXjQKCjRKVFSGBgYyCl4NExMNAAAFAAD/4AIAAeAAPQBNAI4AlgCaAAABJic2NTQmIyIGFQYHBgcXJisBIgYVERQWOwEyNxQxOgEVMDMWFxY7ATI3Njc2JzY3Nic2NzYnNjc1NDU0JgEUBisBIiY1ETQ2OwEyFhUFBisBIhQ7ATIWBwYrASIUOwEyBw4CKwEiFDsBMhYHBgcGKwEiJyYnJj0BNDcwNjM+ATc0MzIWFRQGBzIXFhUUBCIGFBYyNjQGIjQyAdMPeQQyHRQcAT8LBgEPETAUHBwUMB0OAQMBEi8wL1goEQQDBAQSCQgIEQQDCQ0BF/6HCQcwBwkJBzAHCQFwAR8gCAgfEAsBBh0mCAggHwsDBRIQGggIGQsIAwEDCBVYKy0/Cw4NAgEyLQEQDiEFCpYXE/5yFA4OFA4QEBABOAQDEyIqQhwUUyEFAwENHBT/ABQcHAEBBAsLHwgJDg4MHhgTEBwVEQ8UBAMFECD+3gcJCQcBAAcJCQcZFxATCyIQIQsJCxAQBgQIDgoPAwIM3Q0EARVTLxAvHRwaHgYFEwHBDhQODhQSEAAIABD/4AHwAeAADwAfAC8APABCAEcATwBXAAABISIGFREUFjMhMjY1ETQmExQGIyEiJjURNDYzITIWFSMhIgYVERQWMyEyNjURNCYHFScmIg8BJyYiDwE1FTcfAiMhJzcXFSYyNjQmIgYUNjIWFAYiJjQBsP6gGyUlGwFgGyUlBRMN/qANExMNAWANEzD+wAcJCQcBQAcJCQc0BQ4FKn4FDgU0QIEJLfcBDDcrQHQoHBwoHCMaExMaEwHgJRv+gBslJRsBgBsl/kANExMNAYANExMNCQf+4AcJCQcBIAcJEN45BQUwkAUFPIGaSpILMz8xRiqgHCgcHCg0ExoTExoADAAA//ACAAHQABEAJAArADMAOwBDAEsAUwBbAGMAcwB3AAABJyYjISIGFREUFjMhMjY1ETQDFAYjISImNRE0NjMhFRQWOwInIyImPQEXJyI0OwEyFCMHIjQ7ATIUIwY0OwEyFCsBFzIUIyEiNDMFMhQjISI0MwUyFCMhIjQzJTIUIyEiNDM3MzI2PQE0JisBIgYdARQWNzMVIwH3YAoN/rAUHBwUAaAUHCAJB/5gBwkJBwFAHBQQMDAQDRNg6AgIUAgIUAgIUAgIWAjACAjAwAgI/pAICAFwCAj+kAgIAXAICP6QCAgBcAgI/pAICAhwBwkJB3AHCQkXUFABZ2AJHBT+gBQcHBQBMA3+wwcJCQcBgAcJQBQcEBMNQGAQEBAwEBAwEBBQEBAwEBAwEBCQEBAgCQdgBwkJB2AHCWBAAAAMAGD/4AHAAeAABwAPABcAHwAnAC8AOQBeAGQAagByAH0AABI0NjIWFAYiBjQ2MhYUBiImNDYyFhQGIjY0NjIWFAYiBjQ2MhYUBiImNDYyFhQGIhY0NjIWFTEUBiI3IgYxJi8BLgErASIGDwEGFRQfAR4BOwEyNj8BNjcwFjMyNjQmJzMXJiIHEyMnFjI3JiImNDYyFhQmFg8CBiImND8B8AkOCQkOCQkOCQkOaQkOCQkOtwkOCQkOrQkOCQkOCQkOCQkOfwkNCgoNYwECCB0XAhILgAwSAhYsKhcCEQyADBECFx4JAgENExPrgBAmVCaOgBAmVCYbaktLaks0BgInHgQOCQVTATkOCQkOCbcOCQkOCWkOCQkOCQkOCQkOCToNCQkNCpEOCQkOCX4NCQkHBgp0ASkhfQsPDwt5Lz49LnsLDw8LeyErARMaE8BWFhb+llYWFgpLaktLaogHBDAkBAkOBEUAAAAEAAD/3wIAAeAAFgAcAB8AJAAAASYiBwEGFh8CFjI/ARcWMzI3NjcTNgElATAmJxcJARcnJicTAfkECgT+IAgCCX07BRIFIZsDAwQEBgJQAf4xAXP+8gMBEAEv/v7DiAQG0gHdAwP+wAUTBDJnCAg3PgECBAcB4Av+vPf+3wIBDgFF/m0LNwEBAUYAAAwAAP/gAgAB4AATAB0AJwBRAGUAbwB5AKQAuADCAMwA9wAAEzU0JiIGHQEGFBcVFBYyNj0BNjQnNDYyFh0BJiIHExQGIiY9ARYyPwEGMQYHBgcGBwYiJy4BJyYnMCcmNDc2MTY3Njc2NzYyFx4BFxYXFBcWFCU1NCYiBh0BBhQXFRQWMjY9ATY0JzQ2MhYdASYiBxMUBiImPQEWMj8BBhUGBwYHBgcGIicuAScmJzAnJjQ3NjE2NzY3Njc2MhcWFxYXFhcwFxYUBzU0JiIGHQEGFBcVFBYyNj0BNjQDNDYyFh0BJiIHFxQGIiY9ARYyPwEGFQYHBgcGBwYiJy4BJyYnMCcmNDc2MTY3Njc2NzYyFxYXFhcWFzAXFhSAHCgcICAcKBwgYAkOCQgQCCAJDgkIEAgeAQIEBAYGBwgQCAcMBAQCAQICAQIEBQUGBwgQCAcMBAQCAQIBYBwoHCAgHCgcIGAJDgkIEAggCQ4JCBAIHgECBAQGBgcIEAgHDAQEAgECAgECBAQGBgcIEAgHBgYEBAIBArAcKBwgIBwoHCBgCQ4JCBAIIAkOCQgQCB4BAgQEBgYHCBAIBwwEBAIBAgIBAgQFBQYHCBAIBwYGBAQCAQIBgDAUHBwUMBlOGfAUHBwU8BlOSQcJCQciAgL+ggcJCQfiAgJBAwcFBgQFAgMDAgkGBQcDBwwHAwcFBgQFAgMDAgkGBQcBAgcMRjAUHBwUMBlOGfAUHBwU8BlOSQcJCQciAgL+ggcJCQfiAgJBAgEHBQYEBQIDAwIJBgUHAwcMBwMHBQYEBQIDAwIFBAYFBwMHDHrwFBwcFPAZThkwFBwcFDAZTgEJBwkJB+ICAr4HCQkHIgICQQIBBwUGBAUCAwMCCQYFBwMHDAcDBwUGBAUCAwMCBQQGBQcDBwwAAAAHAAH/4AH/AeAAIQA0AIMAjQCZAK8AxQAAAScmBwYHBgcGBwYHBgcGBwYfARY3Njc2NzY3Njc2NzY3NgEuAic+BDceARcOBDcuAQcGBwYHJic+ARcWFxY3NjQnLgEOAQcmJyYiBhQXFhUGBwYHBhcWFxY3NjcWFw4BLgIiBhQeARcyNzY3FhcWPgEmJyYnNjc2NTYnJg4BJy4BPgE3FhcWBgcmJzY3PgEeAgc2FxYHMCMGBwYPAQYVBicmPwE2NzY3Nj8BNjM2FxYPAQYHBgcGJyY3NjM2AfegDRIIBwUDChwZQkoeJxAFDaANEggHBQMKHBlCSh4nEAX+vBJBNRgNPEdHPQwaaxsMPUdHPGwIEAgICAkHEAoGCwUGAwUDBAQFDw8NBAICAQUEAgMGBAQBAQMDBwsPERASCwYJCAYHBggIDQgJCAkJAwUCBQQBAgQEBwQFAQIDWg0FAwIBBAMKDz0EAwsQBQIECAgHAkQGBQYGARALDAoKAQYGBAMLCw0LTAwKCgEBBgUFBAsLDQsRBgYFBQEBEAE3oAwEAgYGCCIcGSYrHycyEg6gDAQCBgYIIxsZJisfJjMS/tcSQTUYKD8pKT8oGmsbKD8pKT/KBgUBAQMDBBMKBQECAQEBAwMKBAYDBAgEAQICBQUBAgEHCQgJCAcHBgkBAQkVCwUCAgUDBwkJBgEDAwkEBAIBBAUBBAMJCgkICAcHBQEFAgcHBwQKECEIAwsSAgECAQIHB1YFBQYGDQsMDQ4BAQYGBQUPDg0M9QwNDgIGBgUGDw4NDA0FBgUGAQ0AAAAACAAg/+AB4AHgAAsAFwAlADMAOwBDAEsAUwAAACIGFREUFjI2NRE0AxQGIiY9AR4BMjY3NTEUBiImNTE1HgEyNjc1MRQGIiY1MTUeATI2NwYiJjQ2MhYUAjQ2MhYUBiImNDYyFhQGIiY0NjIWFAYiAVq0hoa0hiBwoHAYanxqGHCgcBhqfGoYcKBwHmh0aB5woHBwoHBACQ4JCQ4JCQ4JCQ4JCQ4JCQ4B4DYy/tAyNjYyATAy/p4eKioePBkbGxkkHioqHjwZGxsZJB4qKh43FxgYFw8qPCoqPP7fDgkJDglpDgkJDglpDgkJDgkAAAAABAAE/+ACAQHgADYAPgBGAEwAAAEmIyIjBQ4BHQMmIyIHBgcGFx4BMzI3Njc2NREyMyUVJiMiBwYHBhceATMyNzY3NjURPQE0AAYuAT4BHgEkBi4BPgEeAQMFPQElFQH1CQwDA/7wCw8aIxQUMBMOCwkwHxQUMBMIAwMBChojFBQwEw4LCTAfFBQwEwj+mDo0Dx06MxABEjk0EB45NBAG/vABEAHYCDADEQwgEOMTBxAnHx0ZHQcQJxASAQAvwhMHECcfHRkdBxAnEBIBIBAgD/5AFBEqKxQRKgUUESorFBEqASYwECAwIAAAAAAGAAD/4AIAAeAAMgA8AEkAWABnAHkAAAEiByMOASsDIgYUFjMyFh0BFBY7ATI2PQE0Jj0BMDU0NzQ3Njc1MjcWFzMWMzI2NCYGNDczMhYUBisBJDQ2OwMGFBcrASIXIzU0JzsBBh0BFBcwFjE3IyImNDY7ATI3BhUUFyYXIiYnMzI2NCYrAT4BMzIWFAYBkC8eARQ6IAtHQhslJRsNExMNQA0TEAIBAgMBAz4oAR4vNDw8hAMtDRMTDS3+3RMNQg4gEBAgUA2NQAkLMQMOAhQEDRMTDQQsJwcHJ5AYJwopGyUlGykKJxghLy8B4DkpLi5ELhMNkA0TEw0QCRMEcAEDAwEBAwEBAQdPOYa0hvgwGBwoHBwoHBM6E9CQEQ8ICHAPEQLCHCgcICcpKiYgkD4yLkQuMj5woHAAAAAABQAAAAACAAHAABcAJQA1AEEASwAAADQmLwEmIg8BDgEUFh8BFRQWMjY9ATc2BxQOASIuAT0BFxYyPwEjKgEjJyY0PwE6ATMXFhQPATQ2MhYdARQGIiY1FjIWFRQGIiY1NAIAFRDQBgoG0BAVFRArVrRWKxBbHkVaRR6FBgoGhYwCBALQDAzQAgQC0AwMBAkOCQkOCQQYFBMaEwFPIhoEMAEBMAQaIhoECocjLS0jhwoElQoVEREVCoAfAQEfMAMaAzAwAxoDQAcJCQeQBwkJByAwEA0TEw0QAAAAAAsAAP/gAgAB4AAeAC4ARABMAFQAXABkAGwAdAB8AIQAAAEmIg8BBhUUFwcOAR8BFjMyMzI3Nj8BFjMyPwE2NCcDBgciIyIvASY2PwEeAhc3BwYvAQc3LgInJic3JyY/ATYfARYGMjY0JiIGFDYyFhQGIiY0EiIGFBYyNjQGIiY0NjIWFAQUFjI2NCYiFjIWFAYiJjQWNDYyFhQGIjY0NjIWFAYiAUsMIQwWDAbZFwoSzA0TAQEFBBoJVgoMEAwWDAy7BAgCAgYFywYDCGMVVEIeWhcFBhwXAhc2Ix4aD4gcBQUXBgV8Br8iFxciFx4UDg4UDvkiFxciFx4UDg4UDv6QExoTExoGDgkJDgkwCQ4JCQ73CQ4JCQ4BpAwMFgwRCwpXCjISyQ4BBRjWBgsXDCEM/uEIAgXJBhEDKAcJGR8/FwYGHDkFFhsHAwQDNhwFBhcFBXwGfBciFxciKQ4UDg4UAR4XIhcXIikOFA4OFNEaExMaExAJDgkJDm4OCQkOCfkOCQkOCQAACgAA/+ACAAHgACUAKgA4AEYATgBcAHwAlQCvAMgAACUjJic3PgEuAQ8BLgEjIgYHIyIGFRQfARUUFjMhMjY9ATc2NTQmKwE3FBYnMhYXBy4BIyIGByM+ARcuASIGByM+ATMyFhcHJiIHIzYyFyMnIgYHIz4BMzIWFwcuARcVFCMhIj0BJzQ7EzIVJTAjJjc2JyIxNDU0MzIXFgcGFxQVFCMiJzcwNSY3Nic1MTQ1NDMyFxYHBhcVFhUUIyIvATAxJjc2JzAxNDU0MzIXFgcGFxYVFCMiJwHYKwECTQYEBgwGSRZWNEBiCysRFwg4FxEBMBEXOAgXTAkIAZ0wThMOEUcrM04LEQtZggkoMCgJEQoxHx0wCww3Kg8TE0gTFCMmOwoRC0UsJj8QDw03fgj+0AhACCgQEBAQEBAQEGAQEBAQEBAQECgI/qABCBANBgEIBQIJEA0HCAUCwggQDQcIBQIJEA0GAQgFAlMIDw4HBwYCCRANBgEIBQOQBQYnAwwMBAMkLjhSPhcRDAk/DBEXFxEMPwkMERcEAQJ/MyoIJi8/MTdJgBYaGhYcJCAaBhAQICBQLSMqNioiBx4lwBgICBhICAi9FCYfDwIBCAUVJSAPAQEIBAMBFCUgDgEBAQgFFCYfDwEBAQgFRhQmHw8CAQgFFSUgDwEBCAQAAAMAAQAAAf8BwAAhACcANwAAAScmIyEiDwEGHwEWFxYzMjcVFBYzITI2PQEWMzI3Nj8BNicOASImJxcnESERByc3Mx4BMjY3MxcB9FAJC/7gCwlQEQcgBQ8FBQkHEw0BIA0TBwkFBQ8FIAfJByAqIAf8MP7gMCBQQwcqOCoHQ1ABeUAHB0AOFWAPBQIExA0TEw3EBAIFD2AVNQ4SEg6gIP8AAQAgYEAVGxsVQAADAFD/4AGqAeAAHwA5AGYAAAEUBg8BNCYvAQYHLgMvAR4BDgEVFBYzMj4CNzYmBw4EIyImNTQ3NiceAhU2Nx4BFTY3FicXFgcGIyInJjc2JwYPAScmJwYPAScmJwYVFCI1ND8BFxYXNj8BFRQXPgI3AWARCAggDxABIAkgIiAKChACEBJaRjRGJxIHDygGBAcUHjgmOUcQFQQWIQwuDAcLKx81OAMLFQIFAgEHAw4EHjEIAwwCEA4IBhYLDRAVCAgKGAoPGAwUHg4LAVATJwsKI0gSEi8wHzsoHwcHPGtDXSc7VxEjIho8h7sRERwPC0UtKklfQB5RLARBHg9WLyM1XyoQPTMFAQMHJTEiGAMIIhcXFAsMMhorRAgISzwYFR03DxcmGyIjChYPDQAB////7wIAAcAAKwAAABYUDwEGJj8BNjQmIg8BBhQWMj8BNjQmIg8BBiY/ATYyFhQPAQYiJjQ/ATYBrFQqsAsXDK0hQl0g6BcvQhfqDhwoDq8MFguvGEIvF+ohXUEh6SoBwFR4Kq8MFwuuIF1CIeUXQi8X5w4oHA6wCxcLsBcvQhjmIUFdIecqAAAAAAoAAP/gAgAB4AAjACcAKwAvADMANwBDAEcAVQBhAAABJyYnNTQmIyEiBh0BBg8BBh0BFBYzFRQWMyEyNj0BMjY9ATQnFSE1FyM3OwIVIzczFyM3MxcjJTU0PwE2OwEHIyImBSM1MxcjNTQmKwEiBh0BIzUhNxQGKwEnMzIfARYVAfYwAgQTDf7ADRMEAjAKHBQTDQFgDRMUHGD+wENDQCMRJERUJCBENSNAQ/7DAzAFCC5AHgcJASB4eHBgCQd4BwloAWAwCQceQC4IBTADAS1AAwRMDRMTDUwEA0ANEBAUHNANExMN0BwUEBCgQEDQcHBwcHBwEBAFBUAGcAn5oKCgBwkJB6DQMAcJcAZABQUACwAA/+ACAAHgACcATwBTAFcAWwBfAGMAZwBrAG8AcwAAASM1NCYiBh0BIzU0JiIGHQEjNTQmIgYdASMiBhURFBYzITI2NRE0JgMUBiMhIiY1ETQ2OwEVFBYyNj0BMxUUFjI2PQEzFRQWMjY9ATMyFhUFMxUjFTMVIxUzFSM3MxUjNTMVIzUzFSMXMxUjNTMVIzUzFSMB1UUJDglgCQ4JYAkOCUUSGRkSAaoSGRkHBgX+VgUGBgVFCQ4JYAkOCWAJDglFBQb+kEBAQEBAQHBAQEBAQEBwQEBAQEBAAbAgBwkJByAgBwkJByAgBwkJByAZEv6GEhkZEgF6Ehn+WwUGBgUBegUGIAcJCQcgIAcJCQcgIAcJCQcgBgVlMCAwIDAwMIAwgDBwMIAwgDAACAAA/+ACAAHQAAcAHgA5AD0AQQBIAGAAcQAAJDQ2MhYUBiI3PQI0JisBISIGFREUFjMhMjY9ATY0JSEzMhYdAyYjPQI0JiMhIgYdAiY1NDYFITUhHQEhNQUVIyEiJzUBFAYjISImPQEWMyEzMhYdASMiBhQWOwE3IyImNDY7ATI3NjcwNRYVFAEAExoTExq9HBRA/vgkNDQkASAkNDD+WAEIQAcJCAgJB/6wBwkQIQFP/rABUP6wAVAw/vgMDAFwIRf+4BchGCABCEAHCZAhLy8hkBSkFBwcFJAQCgICEpMaExMaE5BgCCgUHDQk/sAkNDQkGCR4xAkHKAgzAxAgIAcJCQcgHxAXFyEwECAQECAQBgr+6BchIRf8FAkHIC9CLyAcKBwNAwQBFx4mAAAAAAwAAv/iAf4B3gAPABcAHwAnAC8ANwBCAE4AWABjAG8AeQAAASYOAQcGHgEXFj4BNzYuAQIuAT4BHgEGLgEOAR4BPgEGLgE+AR4BBjYmDgEeAT4BBi4BPgEeAQYzBgcjBiY3Njc2HgIHBgcwFQYmNzY3JhYHBgcGJjc2NyYWBwYHBiY3Nj8BJhYHBgcGJjc2NzAxFwYHBiY3Njc2FgFfRIFuGhgSVEFEgm0aGBFVnaxJRaqsSUSWGBkKCxgZCiMMBQUMDAUFPUpJHh9KSR5nMRUTMTEVE0UUMAEHBgcrEQMPLA8DHUkIBgdDGxoPAxk9BwcINxaxBgcrEQMPAxQwARIGB0MbAw8DHUkTNhcDDgMYPQcHAc4YElRBRIJtGhgRVUFEgW7+OkSrrElFqqzCCgsYGQoLGBEFDAwFBQwMVh4fSkkeH0pGEzExFRMxMTEVAw8DEisIBhIGB0ofAQMPAx1EEwYIPRoDDgQXN68PAxIrCAYIMBUBPg8DHUQHBgdKHywXOAcGBz4aAw8AAAcAAAAQAgABsAARABYAPQBPAFcAXwB/AAABJisBIgYdARQWOwEyNj0BNCcHIzUzFzcnJisBNTQmKwEiBh0BFBYzFRQWOwEeATI2NzMeATI2NzMyNj0BNAUiJj0BNDY7ATIWHQMUBiMGIiY0NjIWFBYiJjQ2MhYUNxQGKwEuASIGByMuASIGByMiJj0BMzI2PQEzMh8BFhUBjQQJEAcJCQdABwkDDUAQMEhADhpAHBTwFBwcFBwUEgYiLCIGVAYiLCIGEhQc/jAHCQkH8AcJCQdjGhMTGhO9GhMTGhNACQcSBiIsIgZUBiIsIgYSBwnQFBxACQRAAwEpBwkHYAcJCQcYBQQhYEgTYBUgFBwcFLAUHDAUHBUbGxUVGxsVHBRgDx8JB7AHCQkHICBwBwmQExoTExoTExoTExotBwkVGxsVFRsbFQkHMBwUcAdgBAUAABEAAP/wAfAB4AAHAA4AFQAcACIAKQAvADUAOwBBAEgATgBUAFoAYQBoAG8AAAAiBhQWMjY0ByMmJzY3FgMmJzY3FTATFhcGBzUwFxYXBgcmJxUmJzY3MAcmJzY3BgcWFxUjNhcVBgcmJxcmJzY3Fhc1FhcGBzA3FhcGBzY3Jic1MwYnNTY3FhclFhcGByM2BzMWFwYHJgUmJzY3MwYBX86Rkc6RIGACESAcNN4oGR8jES4ZIyUbQzAaHRZRJSMZLlYdGjBDJg0mKGACXiYjFQJFPC0YGxVMIx8ZKFAbGC08IQ0jJmACXigmEAL+9xwgEQJgAwNgAhYdGzwBbBsdFgJgBAHgkc6Rkc5fNS8NFjr+0yIzCQJgAbAnOwwCcAMLLxQMNClwAgw7J10MFC8LJkgNAlAyQmACCzQ5zQonEQorJGACCTMiTwoRJwohPwsCYDlJUAINLTKHFg0vNU1dPDYMEzw8Eww2PFUAAAABAAD/4AIAAeAAAgAAEQEhAgD+AAHg/gAAAAAAAAAMAJYAAQAAAAAAAQAIABIAAQAAAAAAAgAHACsAAQAAAAAAAwAlAH8AAQAAAAAABAAIALcAAQAAAAAABQALANgAAQAAAAAABgAIAPYAAwABBAkAAQAQAAAAAwABBAkAAgAOABsAAwABBAkAAwBKADMAAwABBAkABAAQAKUAAwABBAkABQAWAMAAAwABBAkABgAQAOQAbABpAG4AZQBjAG8AbgBzAABsaW5lY29ucwAAUgBlAGcAdQBsAGEAcgAAUmVndWxhcgAARgBvAG4AdABGAG8AcgBnAGUAIAAyAC4AMAAgADoAIABsAGkAbgBlAGMAbwBuAHMAIAA6ACAAMwAwAC0AMQAxAC0AMgAwADEAMgAARm9udEZvcmdlIDIuMCA6IGxpbmVjb25zIDogMzAtMTEtMjAxMgAAbABpAG4AZQBjAG8AbgBzAABsaW5lY29ucwAAVgBlAHIAcwBpAG8AbgAgADEALgAwAABWZXJzaW9uIDEuMAAAbABpAG4AZQBjAG8AbgBzAABsaW5lY29ucwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA0AAAAAQACAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgETARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAElASYBJwEoASkBKgErASwBLQEuAS8BMAExATIHdW5pRTAwMAd1bmlFMDAxB3VuaUUwMDIHdW5pRTAwMwd1bmlFMDA0B3VuaUUwMDUHdW5pRTAwNgd1bmlFMDA3B3VuaUUwMDgHdW5pRTAwOQd1bmlFMDBBB3VuaUUwMEIHdW5pRTAwQwd1bmlFMDBEB3VuaUUwMEUHdW5pRTAwRgd1bmlFMDEwB3VuaUUwMTEHdW5pRTAxMgd1bmlFMDEzB3VuaUUwMTQHdW5pRTAxNQd1bmlFMDE2B3VuaUUwMTcHdW5pRTAxOAd1bmlFMDE5B3VuaUUwMUEHdW5pRTAxQgd1bmlFMDFDB3VuaUUwMUQHdW5pRTAxRQd1bmlFMDFGB3VuaUUwMjAHdW5pRTAyMQd1bmlFMDIyB3VuaUUwMjMHdW5pRTAyNAd1bmlFMDI1B3VuaUUwMjYHdW5pRTAyNwd1bmlFMDI4B3VuaUUwMjkHdW5pRTAyQQd1bmlFMDJCB3VuaUUwMkMHdW5pRTAyRAd1bmlFMDJFB3VuaUUwMkYHdW5pRjAwMAAAAAAAAf//AAIAAQAAAA4AAAAYAAAAAAACAAEAAwAzAAEABAAAAAIAAAAAAAEAAAAAyYlvMQAAAADM3fi7AAAAAMzd+Ls=) format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'linecons';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

/* Use the following CSS code if you want to have a class per icon */
[class^="li_"]:before, [class*=" li_"]:before {
	font-family: 'linecons';
	font-style: normal;
	speak: none;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.li_heart:before {
	content: "\e000";
}
.li_cloud:before {
	content: "\e001";
}
.li_star:before {
	content: "\e002";
}
.li_tv:before {
	content: "\e003";
}
.li_sound:before {
	content: "\e004";
}
.li_video:before {
	content: "\e005";
}
.li_trash:before {
	content: "\e006";
}
.li_user:before {
	content: "\e007";
}
.li_key:before {
	content: "\e008";
}
.li_search:before {
	content: "\e009";
}
.li_settings:before {
	content: "\e00a";
}
.li_camera:before {
	content: "\e00b";
}
.li_tag:before {
	content: "\e00c";
}
.li_lock:before {
	content: "\e00d";
}
.li_bulb:before {
	content: "\e00e";
}
.li_pen:before {
	content: "\e00f";
}
.li_diamond:before {
	content: "\e010";
}
.li_display:before {
	content: "\e011";
}
.li_location:before {
	content: "\e012";
}
.li_eye:before {
	content: "\e013";
}
.li_bubble:before {
	content: "\e014";
}
.li_stack:before {
	content: "\e015";
}
.li_cup:before {
	content: "\e016";
}
.li_phone:before {
	content: "\e017";
}
.li_news:before {
	content: "\e018";
}
.li_mail:before {
	content: "\e019";
}
.li_like:before {
	content: "\e01a";
}
.li_photo:before {
	content: "\e01b";
}
.li_note:before {
	content: "\e01c";
}
.li_clock:before {
	content: "\e01d";
}
.li_paperplane:before {
	content: "\e01e";
}
.li_params:before {
	content: "\e01f";
}
.li_banknote:before {
	content: "\e020";
}
.li_data:before {
	content: "\e021";
}
.li_music:before {
	content: "\e022";
}
.li_megaphone:before {
	content: "\e023";
}
.li_study:before {
	content: "\e024";
}
.li_lab:before {
	content: "\e025";
}
.li_food:before {
	content: "\e026";
}
.li_t-shirt:before {
	content: "\e027";
}
.li_fire:before {
	content: "\e028";
}
.li_clip:before {
	content: "\e029";
}
.li_shop:before {
	content: "\e02a";
}
.li_calendar:before {
	content: "\e02b";
}
.li_vallet:before {
	content: "\e02c";
}
.li_vynil:before {
	content: "\e02d";
}
.li_truck:before {
	content: "\e02e";
}
.li_world:before {
	content: "\e02f";
}

/*!
 * 
 * Super simple WYSIWYG editor v0.9.1
 * https://summernote.org
 *
 * Copyright 2013~ Hackerwins and contributors
 * Summernote may be freely distributed under the MIT license.
 *
 * Date: 2024-10-09T10:28Z
 *
 */
@font-face {
    font-family: "summernote";
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url("../lib/summernote/font/summernote.eot?v=2DKlDlXjY5CYyRxkMV4q4uDwtFU&#iefix") format("embedded-opentype"), url("../lib/summernote/font/summernote.woff2?v=2DKlDlXjY5CYyRxkMV4q4uDwtFU") format("woff2"), url("../lib/summernote/font/summernote.woff?v=2DKlDlXjY5CYyRxkMV4q4uDwtFU") format("woff"), url("../lib/summernote/font/summernote.ttf?v=2DKlDlXjY5CYyRxkMV4q4uDwtFU") format("truetype");
}
[class^=note-icon]:before,
[class*=" note-icon"]:before {
    display: inline-block;
    font-family: "summernote";
    font-style: normal;
    font-size: inherit;
    text-decoration: inherit;
    text-rendering: auto;
    text-transform: none;
    vertical-align: middle;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    speak: none;
}

.note-icon-fw {
    text-align: center;
    width: 1.25em;
}

.note-icon-border {
    border: solid 0.08em #eee;
    border-radius: 0.1em;
    padding: 0.2em 0.25em 0.15em;
}

.note-icon-pull-left {
    float: left;
}

.note-icon-pull-right {
    float: right;
}

.note-icon.note-icon-pull-left {
    margin-right: 0.3em;
}
.note-icon.note-icon-pull-right {
    margin-left: 0.3em;
}

.note-icon-align::before {
    content: "\ea01";
}

.note-icon-align-center::before {
    content: "\ea02";
}

.note-icon-align-indent::before {
    content: "\ea03";
}

.note-icon-align-justify::before {
    content: "\ea04";
}

.note-icon-align-left::before {
    content: "\ea05";
}

.note-icon-align-outdent::before {
    content: "\ea06";
}

.note-icon-align-right::before {
    content: "\ea07";
}

.note-icon-arrow-circle-down::before {
    content: "\ea08";
}

.note-icon-arrow-circle-left::before {
    content: "\ea09";
}

.note-icon-arrow-circle-right::before {
    content: "\ea0a";
}

.note-icon-arrow-circle-up::before {
    content: "\ea0b";
}

.note-icon-arrows-alt::before {
    content: "\ea0c";
}

.note-icon-arrows-h::before {
    content: "\ea0d";
}

.note-icon-arrows-v::before {
    content: "\ea0e";
}

.note-icon-bold::before {
    content: "\ea0f";
}

.note-icon-caret::before {
    content: "\ea10";
}

.note-icon-chain-broken::before {
    content: "\ea11";
}

.note-icon-circle::before {
    content: "\ea12";
}

.note-icon-close::before {
    content: "\ea13";
}

.note-icon-code::before {
    content: "\ea14";
}

.note-icon-col-after::before {
    content: "\ea15";
}

.note-icon-col-before::before {
    content: "\ea16";
}

.note-icon-col-remove::before {
    content: "\ea17";
}

.note-icon-eraser::before {
    content: "\ea18";
}

.note-icon-float-left::before {
    content: "\ea19";
}

.note-icon-float-none::before {
    content: "\ea1a";
}

.note-icon-float-right::before {
    content: "\ea1b";
}

.note-icon-font::before {
    content: "\ea1c";
}

.note-icon-frame::before {
    content: "\ea1d";
}

.note-icon-italic::before {
    content: "\ea1e";
}

.note-icon-link::before {
    content: "\ea1f";
}

.note-icon-magic::before {
    content: "\ea20";
}

.note-icon-menu-check::before {
    content: "\ea21";
}

.note-icon-minus::before {
    content: "\ea22";
}

.note-icon-orderedlist::before {
    content: "\ea23";
}

.note-icon-pencil::before {
    content: "\ea24";
}

.note-icon-picture::before {
    content: "\ea25";
}

.note-icon-question::before {
    content: "\ea26";
}

.note-icon-redo::before {
    content: "\ea27";
}

.note-icon-rollback::before {
    content: "\ea28";
}

.note-icon-row-above::before {
    content: "\ea29";
}

.note-icon-row-below::before {
    content: "\ea2a";
}

.note-icon-row-remove::before {
    content: "\ea2b";
}

.note-icon-special-character::before {
    content: "\ea2c";
}

.note-icon-square::before {
    content: "\ea2d";
}

.note-icon-strikethrough::before {
    content: "\ea2e";
}

.note-icon-subscript::before {
    content: "\ea2f";
}

.note-icon-summernote::before {
    content: "\ea30";
}

.note-icon-superscript::before {
    content: "\ea31";
}

.note-icon-table::before {
    content: "\ea32";
}

.note-icon-text-height::before {
    content: "\ea33";
}

.note-icon-trash::before {
    content: "\ea34";
}

.note-icon-underline::before {
    content: "\ea35";
}

.note-icon-undo::before {
    content: "\ea36";
}

.note-icon-unorderedlist::before {
    content: "\ea37";
}

.note-icon-video::before {
    content: "\ea38";
}

.note-frame {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    color: #000;
    font-family: sans-serif;
    border-radius: 4px;
}

.note-toolbar {
    padding: 10px 5px;
    border-bottom: 1px solid #e2e2e2;
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.note-btn-group {
    position: relative;
    display: inline-block;
    margin-right: 8px;
}
.note-btn-group > .note-btn-group {
    margin-right: 0;
}
.note-btn-group > .note-btn:first-child {
    margin-left: 0;
}
.note-btn-group .note-btn + .note-btn,
.note-btn-group .note-btn + .note-btn-group,
.note-btn-group .note-btn-group + .note-btn,
.note-btn-group .note-btn-group + .note-btn-group {
    margin-left: -1px;
}
.note-btn-group > .note-btn:not(:first-child),
.note-btn-group > .note-btn-group:not(:first-child) > .note-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.note-btn-group > .note-btn:not(:last-child):not(.dropdown-toggle),
.note-btn-group > .note-btn-group:not(:last-child) > .note-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.note-btn-group.open > .note-dropdown {
    display: block;
}

.note-btn {
    display: inline-block;
    font-weight: 400;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid #dae0e5;
    white-space: nowrap;
    outline: 0;
    color: #333;
    background-color: #fff;
    border-color: #dae0e5;
    padding: 5px 10px;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.note-btn:focus, .note-btn.focus {
    color: #333;
    background-color: #ebebeb;
    border-color: #dae0e5;
}
.note-btn:hover {
    color: #333;
    background-color: #ebebeb;
    border-color: #dae0e5;
}
.note-btn.disabled:focus, .note-btn.disabled.focus, .note-btn[disabled]:focus, .note-btn[disabled].focus, fieldset[disabled] .note-btn:focus, fieldset[disabled] .note-btn.focus {
    background-color: #fff;
    border-color: #dae0e5;
}
.note-btn:hover, .note-btn:focus, .note-btn.focus {
    color: #333;
    text-decoration: none;
    border: 1px solid #dae0e5;
    background-color: #ebebeb;
    outline: 0;
    border-radius: 1px;
}
.note-btn:active, .note-btn.active {
    outline: 0;
    background-image: none;
    color: #333;
    text-decoration: none;
    border: 1px solid #dae0e5;
    background-color: #ebebeb;
    outline: 0;
    border-radius: 1px;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.note-btn.disabled, .note-btn[disabled], fieldset[disabled] .note-btn {
    cursor: not-allowed;
    -webkit-opacity: 0.65;
    -khtml-opacity: 0.65;
    -moz-opacity: 0.65;
    opacity: 0.65;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=65);
    filter: alpha(opacity=65);
    box-shadow: none;
}
.note-btn > span.note-icon-caret:first-child {
    margin-left: -1px;
}
.note-btn > span.note-icon-caret:nth-child(2) {
    padding-left: 3px;
    margin-right: -5px;
}

.note-btn-primary {
    background: #fa6362;
    color: #fff;
}
.note-btn-primary:hover, .note-btn-primary:focus, .note-btn-primary.focus {
    color: #fff;
    text-decoration: none;
    border: 1px solid #dae0e5;
    background-color: #fa6362;
    border-radius: 1px;
}

.note-btn-block {
    display: block;
    width: 100%;
}

.note-btn-block + .note-btn-block {
    margin-top: 5px;
}

input[type=submit].note-btn-block,
input[type=reset].note-btn-block,
input[type=button].note-btn-block {
    width: 100%;
}

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}

.close {
    float: right;
    font-size: 21px;
    line-height: 1;
    color: #000;
    opacity: 0.2;
}

.close:hover {
    -webkit-opacity: 1;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    -ms-filter: alpha(opacity=100);
    filter: alpha(opacity=100);
    opacity: 1;
}

.note-dropdown {
    position: relative;
}

.note-color .dropdown-toggle {
    width: 30px;
    padding-left: 5px;
}

.note-dropdown-menu {
    display: none;
    min-width: 100px;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    text-align: left;
    background: #fff;
    border: 1px solid #e2e2e2;
    padding: 5px;
    background-clip: padding-box;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}
.note-dropdown-menu > *:last-child {
    margin-right: 0;
}

.note-btn-group.open .note-dropdown-menu {
    display: block;
}

.note-dropdown-item {
    display: block;
}
.note-dropdown-item:hover {
    background-color: #ebebeb;
}

a.note-dropdown-item,
a.note-dropdown-item:hover {
    margin: 5px 0;
    color: #000;
    text-decoration: none;
}

.note-modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1050;
    -webkit-opacity: 1;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    filter: alpha(opacity=100);
    display: none;
}
.note-modal.open {
    display: block;
}

.note-modal-content {
    position: relative;
    width: auto;
    margin: 30px 20px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: #fff;
    background-clip: border-box;
    outline: 0;
    border-radius: 5px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
}

.note-modal-header {
    padding: 10px 20px;
    border: 1px solid #ededef;
}

.note-modal-body {
    position: relative;
    padding: 20px 30px;
}
.note-modal-body kbd {
    border-radius: 2px;
    background-color: #000;
    color: #fff;
    padding: 3px 5px;
    font-weight: 700;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.note-modal-footer {
    height: 40px;
    padding: 10px;
    text-align: center;
}

.note-modal-footer a {
    color: #337ab7;
    text-decoration: none;
}

.note-modal-footer a:hover,
.note-modal-footer a:focus {
    color: #23527c;
    text-decoration: underline;
}

.note-modal-footer .note-btn {
    float: right;
}

.note-modal-title {
    font-size: 20px;
    color: #42515f;
    margin: 0;
    line-height: 1.4;
}

.note-modal-backdrop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1040;
    background: #000;
    -webkit-opacity: 0.5;
    -khtml-opacity: 0.5;
    -moz-opacity: 0.5;
    opacity: 0.5;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    filter: alpha(opacity=50);
    display: none;
}
.note-modal-backdrop.open {
    display: block;
}

@media (min-width: 768px) {
    .note-modal-content {
        width: 600px;
        margin: 30px auto;
    }
}
@media (min-width: 992px) {
    .note-modal-content-large {
        width: 900px;
    }
}
.note-modal .note-help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
}
.note-modal .note-nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.note-modal .note-nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
.note-modal .note-nav-link:focus,
.note-modal .note-nav-link:hover {
    color: #0056b3;
    text-decoration: none;
}
.note-modal .note-nav-link.disabled {
    color: #868e96;
}
.note-modal .note-nav-tabs {
    border-bottom: 1px solid #ddd;
}
.note-modal .note-nav-tabs .note-nav-item {
    margin-bottom: -1px;
}
.note-modal .note-nav-tabs .note-nav-link {
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}
.note-modal .note-nav-tabs .note-nav-link:focus,
.note-modal .note-nav-tabs .note-nav-link:hover {
    border-color: #e9ecef #e9ecef #ddd;
}
.note-modal .note-nav-tabs .note-nav-link.disabled {
    color: #868e96;
    background-color: transparent;
    border-color: transparent;
}
.note-modal .note-nav-tabs .note-nav-item.show .note-nav-link {
    color: #495057;
    background-color: #fff;
    border-color: #ddd #ddd #fff;
}
.note-modal .note-tab-content {
    margin: 15px auto;
}
.note-modal .note-tab-content > .note-tab-pane:target ~ .note-tab-pane:last-child,
.note-modal .note-tab-content > .note-tab-pane {
    display: none;
}
.note-modal .note-tab-content > :last-child,
.note-modal .note-tab-content > .note-tab-pane:target {
    display: block;
}

.note-form-group {
    padding-bottom: 20px;
}

.note-form-group:last-child {
    padding-bottom: 0;
}

.note-form-label {
    display: block;
    width: 100%;
    font-size: 16px;
    color: #42515f;
    margin-bottom: 10px;
    font-weight: 700;
}

.note-input {
    width: 100%;
    display: block;
    border: 1px solid #ededef;
    background: #fff;
    outline: 0;
    padding: 6px 4px;
    font-size: 14px;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.note-input::-webkit-input-placeholder {
    color: #eeeeee;
}

.note-input:-moz-placeholder { /* Firefox 18- */
    color: #eeeeee;
}

.note-input::-moz-placeholder { /* Firefox 19+ */
    color: #eeeeee;
}

.note-input:-ms-input-placeholder {
    color: #eeeeee;
}

.note-tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    font-size: 13px;
    transition: opacity 0.15s;
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    filter: alpha(opacity=0);
}
.note-tooltip.in {
    -webkit-opacity: 0.9;
    -khtml-opacity: 0.9;
    -moz-opacity: 0.9;
    opacity: 0.9;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
    filter: alpha(opacity=90);
}
.note-tooltip.top {
    margin-top: -3px;
    padding: 5px 0;
}
.note-tooltip.right {
    margin-left: 3px;
    padding: 0 5px;
}
.note-tooltip.bottom {
    margin-top: 3px;
    padding: 5px 0;
}
.note-tooltip.left {
    margin-left: -3px;
    padding: 0 5px;
}

.note-tooltip.bottom .note-tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}
.note-tooltip.top .note-tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000;
}
.note-tooltip.right .note-tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #000;
}
.note-tooltip.left .note-tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #000;
}

.note-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.note-tooltip-content {
    max-width: 200px;
    font-family: sans-serif;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #000;
}

.note-popover {
    position: absolute;
    z-index: 1060;
    display: block;
    font-size: 13px;
    font-family: sans-serif;
    display: none;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border: 1px solid #ccc;
}
.note-popover.in {
    display: block;
}
.note-popover.top {
    margin-top: -10px;
    padding: 5px 0;
}
.note-popover.right {
    margin-left: 10px;
    padding: 0 5px;
}
.note-popover.bottom {
    margin-top: 10px;
    padding: 5px 0;
}
.note-popover.left {
    margin-left: -10px;
    padding: 0 5px;
}

.note-popover.bottom .note-popover-arrow {
    top: -11px;
    left: 20px;
    margin-left: -10px;
    border-top-width: 0;
    border-bottom-color: #999999;
    border-bottom-color: rgba(0, 0, 0, 0.25);
}
.note-popover.bottom .note-popover-arrow::after {
    top: 1px;
    margin-left: -10px;
    content: "\0020";
    border-top-width: 0;
    border-bottom-color: #fff;
}
.note-popover.top .note-popover-arrow {
    bottom: -11px;
    left: 20px;
    margin-left: -10px;
    border-bottom-width: 0;
    border-top-color: #999999;
    border-top-color: rgba(0, 0, 0, 0.25);
}
.note-popover.top .note-popover-arrow::after {
    bottom: 1px;
    margin-left: -10px;
    content: "\0020";
    border-bottom-width: 0;
    border-top-color: #fff;
}
.note-popover.right .note-popover-arrow {
    top: 50%;
    left: -11px;
    margin-top: -10px;
    border-left-width: 0;
    border-right-color: #999999;
    border-right-color: rgba(0, 0, 0, 0.25);
}
.note-popover.right .note-popover-arrow::after {
    left: 1px;
    margin-top: -10px;
    content: "\0020";
    border-left-width: 0;
    border-right-color: #fff;
}
.note-popover.left .note-popover-arrow {
    top: 50%;
    right: -11px;
    margin-top: -10px;
    border-right-width: 0;
    border-left-color: #999999;
    border-left-color: rgba(0, 0, 0, 0.25);
}
.note-popover.left .note-popover-arrow::after {
    right: 1px;
    margin-top: -10px;
    content: "\0020";
    border-right-width: 0;
    border-left-color: #fff;
}

.note-popover-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 11px solid transparent;
}
.note-popover-arrow::after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    content: "\0020";
    border-width: 10px;
}

.note-popover-content {
    /*max-width: $popover-max-width;*/
    padding: 3px 8px;
    color: #000;
    text-align: center;
    background-color: #ffffff;
    min-width: 100px;
    min-height: 30px;
}

/* Theme Variables
 ------------------------------------------ */
/* Layout
 ------------------------------------------ */
.note-editor {
    position: relative;
}
.note-editor .note-dropzone {
    position: absolute;
    display: none;
    z-index: 100;
    color: lightskyblue;
    background-color: #fff;
    opacity: 0.95;
}
.note-editor .note-dropzone .note-dropzone-message {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
}
.note-editor .note-dropzone.hover {
    color: #098ddf;
}
.note-editor.dragover .note-dropzone {
    display: table;
}
.note-editor .note-editing-area {
    position: relative;
}
.note-editor .note-editing-area .note-editable {
    outline: none;
}
.note-editor .note-editing-area .note-editable sup {
    vertical-align: super;
}
.note-editor .note-editing-area .note-editable sub {
    vertical-align: sub;
}
.note-editor .note-editing-area .note-editable img.note-float-left {
    margin-right: 10px;
}
.note-editor .note-editing-area .note-editable img.note-float-right {
    margin-left: 10px;
}

/* Frame mode layout
 ------------------------------------------ */
.note-editor.note-frame,
.note-editor.note-airframe {
    border: 1px solid rgba(0, 0, 0, 0.1960784314);
}
.note-editor.note-frame.codeview .note-editing-area .note-editable,
.note-editor.note-airframe.codeview .note-editing-area .note-editable {
    display: none;
}
.note-editor.note-frame.codeview .note-editing-area .note-codable,
.note-editor.note-airframe.codeview .note-editing-area .note-codable {
    display: block;
}
.note-editor.note-frame .note-editing-area,
.note-editor.note-airframe .note-editing-area {
    overflow: hidden;
}
.note-editor.note-frame .note-editing-area .note-editable,
.note-editor.note-airframe .note-editing-area .note-editable {
    padding: 10px;
    overflow: auto;
    word-wrap: break-word;
}
.note-editor.note-frame .note-editing-area .note-editable[contenteditable=false],
.note-editor.note-airframe .note-editing-area .note-editable[contenteditable=false] {
    background-color: rgba(128, 128, 128, 0.1137254902);
}
.note-editor.note-frame .note-editing-area .note-codable,
.note-editor.note-airframe .note-editing-area .note-codable {
    display: none;
    width: 100%;
    padding: 10px;
    border: none;
    box-shadow: none;
    font-family: Menlo, Monaco, monospace, sans-serif;
    font-size: 14px;
    color: #ccc;
    background-color: #222;
    resize: none;
    outline: none;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0;
    margin-bottom: 0;
}
.note-editor.note-frame.fullscreen,
.note-editor.note-airframe.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    z-index: 1050;
}
.note-editor.note-frame.fullscreen .note-resizebar,
.note-editor.note-airframe.fullscreen .note-resizebar {
    display: none;
}
.note-editor.note-frame .note-status-output,
.note-editor.note-airframe .note-status-output {
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 1.42857143;
    height: 20px;
    margin-bottom: 0;
    color: #000;
    border: 0;
    border-top: 1px solid #e2e2e2;
}
.note-editor.note-frame .note-status-output:empty,
.note-editor.note-airframe .note-status-output:empty {
    height: 0;
    border-top: 0 solid transparent;
}
.note-editor.note-frame .note-status-output .pull-right,
.note-editor.note-airframe .note-status-output .pull-right {
    float: right !important;
}
.note-editor.note-frame .note-status-output .text-muted,
.note-editor.note-airframe .note-status-output .text-muted {
    color: #777;
}
.note-editor.note-frame .note-status-output .text-primary,
.note-editor.note-airframe .note-status-output .text-primary {
    color: #286090;
}
.note-editor.note-frame .note-status-output .text-success,
.note-editor.note-airframe .note-status-output .text-success {
    color: #3c763d;
}
.note-editor.note-frame .note-status-output .text-info,
.note-editor.note-airframe .note-status-output .text-info {
    color: #31708f;
}
.note-editor.note-frame .note-status-output .text-warning,
.note-editor.note-airframe .note-status-output .text-warning {
    color: #8a6d3b;
}
.note-editor.note-frame .note-status-output .text-danger,
.note-editor.note-airframe .note-status-output .text-danger {
    color: #a94442;
}
.note-editor.note-frame .note-status-output .alert,
.note-editor.note-airframe .note-status-output .alert {
    margin: -7px 0 0 0;
    padding: 7px 10px 2px 10px;
    border-radius: 0;
    color: #000;
    background-color: #f5f5f5;
}
.note-editor.note-frame .note-status-output .alert .note-icon,
.note-editor.note-airframe .note-status-output .alert .note-icon {
    margin-right: 5px;
}
.note-editor.note-frame .note-status-output .alert-success,
.note-editor.note-airframe .note-status-output .alert-success {
    color: #3c763d !important;
    background-color: #dff0d8 !important;
}
.note-editor.note-frame .note-status-output .alert-info,
.note-editor.note-airframe .note-status-output .alert-info {
    color: #31708f !important;
    background-color: #d9edf7 !important;
}
.note-editor.note-frame .note-status-output .alert-warning,
.note-editor.note-airframe .note-status-output .alert-warning {
    color: #8a6d3b !important;
    background-color: #fcf8e3 !important;
}
.note-editor.note-frame .note-status-output .alert-danger,
.note-editor.note-airframe .note-status-output .alert-danger {
    color: #a94442 !important;
    background-color: #f2dede !important;
}
.note-editor.note-frame .note-statusbar,
.note-editor.note-airframe .note-statusbar {
    background-color: rgba(128, 128, 128, 0.1137254902);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.1960784314);
}
.note-editor.note-frame .note-statusbar .note-resizebar,
.note-editor.note-airframe .note-statusbar .note-resizebar {
    padding-top: 1px;
    height: 9px;
    width: 100%;
    cursor: ns-resize;
}
.note-editor.note-frame .note-statusbar .note-resizebar .note-icon-bar,
.note-editor.note-airframe .note-statusbar .note-resizebar .note-icon-bar {
    width: 20px;
    margin: 1px auto;
    border-top: 1px solid rgba(0, 0, 0, 0.1960784314);
}
.note-editor.note-frame .note-statusbar.locked .note-resizebar,
.note-editor.note-airframe .note-statusbar.locked .note-resizebar {
    cursor: default;
}
.note-editor.note-frame .note-statusbar.locked .note-resizebar .note-icon-bar,
.note-editor.note-airframe .note-statusbar.locked .note-resizebar .note-icon-bar {
    display: none;
}
.note-editor.note-frame .note-placeholder,
.note-editor.note-airframe .note-placeholder {
    padding: 10px;
}

.note-editor.note-airframe {
    border: 0;
}
.note-editor.note-airframe .note-editing-area .note-editable {
    padding: 0;
}

/* Popover
 ------------------------------------------ */
.note-popover.popover {
    display: none;
    max-width: none;
}
.note-popover.popover .popover-content a {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.note-popover.popover .arrow {
    left: 20px !important;
}

/* Popover and Toolbar (Button container)
 ------------------------------------------ */
.note-toolbar {
    position: relative;
}

.note-popover .popover-content, .note-editor .note-toolbar {
    margin: 0;
    padding: 0 0 5px 5px;
}
.note-popover .popover-content > .note-btn-group, .note-editor .note-toolbar > .note-btn-group {
    margin-top: 5px;
    margin-left: 0;
    margin-right: 5px;
}
.note-popover .popover-content .note-btn-group .note-table, .note-editor .note-toolbar .note-btn-group .note-table {
    min-width: 0;
    padding: 5px;
}
.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker, .note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker {
    font-size: 18px;
}
.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher, .note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher {
    position: absolute !important;
    z-index: 3;
    width: 10em;
    height: 10em;
    cursor: pointer;
}
.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted, .note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted {
    position: relative !important;
    z-index: 1;
    width: 5em;
    height: 5em;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC") repeat;
}
.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted, .note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted {
    position: absolute !important;
    z-index: 2;
    width: 1em;
    height: 1em;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC") repeat;
}
.note-popover .popover-content .note-style .dropdown-style blockquote, .note-popover .popover-content .note-style .dropdown-style pre, .note-editor .note-toolbar .note-style .dropdown-style blockquote, .note-editor .note-toolbar .note-style .dropdown-style pre {
    margin: 0;
    padding: 5px 10px;
}
.note-popover .popover-content .note-style .dropdown-style h1, .note-popover .popover-content .note-style .dropdown-style h2, .note-popover .popover-content .note-style .dropdown-style h3, .note-popover .popover-content .note-style .dropdown-style h4, .note-popover .popover-content .note-style .dropdown-style h5, .note-popover .popover-content .note-style .dropdown-style h6, .note-popover .popover-content .note-style .dropdown-style p, .note-editor .note-toolbar .note-style .dropdown-style h1, .note-editor .note-toolbar .note-style .dropdown-style h2, .note-editor .note-toolbar .note-style .dropdown-style h3, .note-editor .note-toolbar .note-style .dropdown-style h4, .note-editor .note-toolbar .note-style .dropdown-style h5, .note-editor .note-toolbar .note-style .dropdown-style h6, .note-editor .note-toolbar .note-style .dropdown-style p {
    margin: 0;
    padding: 0;
}
.note-popover .popover-content .note-color-all .note-dropdown-menu, .note-editor .note-toolbar .note-color-all .note-dropdown-menu {
    min-width: 337px;
}
.note-popover .popover-content .note-color .dropdown-toggle, .note-editor .note-toolbar .note-color .dropdown-toggle {
    width: 20px;
    padding-left: 5px;
}
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette, .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette {
    display: inline-block;
    margin: 0;
    width: 160px;
}
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette:first-child, .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette:first-child {
    margin: 0 5px;
}
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-palette-title, .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-palette-title {
    font-size: 12px;
    margin: 2px 7px;
    text-align: center;
    border-bottom: 1px solid #eee;
}
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-reset,
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select, .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset,
.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select {
    font-size: 11px;
    margin: 3px;
    padding: 0 3px;
    cursor: pointer;
    width: 100%;
    border-radius: 5px;
}
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-reset:hover,
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select:hover, .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset:hover,
.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select:hover {
    background: #eee;
}
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-row, .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-row {
    height: 20px;
}
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select-btn, .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select-btn {
    display: none;
}
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-holder-custom .note-color-btn, .note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-holder-custom .note-color-btn {
    border: 1px solid #eee;
}
.note-popover .popover-content .note-para .note-dropdown-menu, .note-editor .note-toolbar .note-para .note-dropdown-menu {
    min-width: 228px;
    padding: 5px;
}
.note-popover .popover-content .note-para .note-dropdown-menu > div + div, .note-editor .note-toolbar .note-para .note-dropdown-menu > div + div {
    margin-left: 5px;
}
.note-popover .popover-content .note-dropdown-menu, .note-editor .note-toolbar .note-dropdown-menu {
    min-width: 160px;
}
.note-popover .popover-content .note-dropdown-menu.right, .note-editor .note-toolbar .note-dropdown-menu.right {
    right: 0;
    left: auto;
}
.note-popover .popover-content .note-dropdown-menu.right::before, .note-editor .note-toolbar .note-dropdown-menu.right::before {
    right: 9px;
    left: auto !important;
}
.note-popover .popover-content .note-dropdown-menu.right::after, .note-editor .note-toolbar .note-dropdown-menu.right::after {
    right: 10px;
    left: auto !important;
}
.note-popover .popover-content .note-dropdown-menu.note-check a i, .note-editor .note-toolbar .note-dropdown-menu.note-check a i {
    color: deepskyblue;
    visibility: hidden;
}
.note-popover .popover-content .note-dropdown-menu.note-check a.checked i, .note-editor .note-toolbar .note-dropdown-menu.note-check a.checked i {
    visibility: visible;
}
.note-popover .popover-content .note-fontsize-10, .note-editor .note-toolbar .note-fontsize-10 {
    font-size: 10px;
}
.note-popover .popover-content .note-color-palette, .note-editor .note-toolbar .note-color-palette {
    line-height: 1;
}
.note-popover .popover-content .note-color-palette div .note-color-btn, .note-editor .note-toolbar .note-color-palette div .note-color-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
}
.note-popover .popover-content .note-color-palette div .note-color-btn:hover, .note-editor .note-toolbar .note-color-palette div .note-color-btn:hover {
    transform: scale(1.2);
    transition: all 0.2s;
}

/* Dialog
 ------------------------------------------ */
.note-modal .modal-dialog {
    outline: 0;
    border-radius: 5px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
}
.note-modal .form-group {
    margin-left: 0;
    margin-right: 0;
}
.note-modal .note-modal-form {
    margin: 0;
}
.note-modal .note-image-dialog .note-dropzone {
    min-height: 100px;
    font-size: 30px;
    line-height: 4;
    color: lightgray;
    text-align: center;
    border: 4px dashed lightgray;
    margin-bottom: 10px;
}
@-moz-document url-prefix() {
    .note-modal .note-image-input {
        height: auto;
    }
}

/* Placeholder
 ------------------------------------------ */
.note-placeholder {
    position: absolute;
    display: none;
    color: gray;
}

/* Handle
 ------------------------------------------ */
.note-handle .note-control-selection {
    position: absolute;
    display: none;
    border: 1px solid #000;
}
.note-handle .note-control-selection > div {
    position: absolute;
}
.note-handle .note-control-selection .note-control-selection-bg {
    width: 100%;
    height: 100%;
    background-color: #000;
    -webkit-opacity: 0.3;
    -khtml-opacity: 0.3;
    -moz-opacity: 0.3;
    opacity: 0.3;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    filter: alpha(opacity=30);
}
.note-handle .note-control-selection .note-control-handle, .note-handle .note-control-selection .note-control-sizing, .note-handle .note-control-selection .note-control-holder {
    width: 7px;
    height: 7px;
    border: 1px solid #000;
}
.note-handle .note-control-selection .note-control-sizing {
    background-color: #000;
}
.note-handle .note-control-selection .note-control-nw {
    top: -5px;
    left: -5px;
    border-right: none;
    border-bottom: none;
}
.note-handle .note-control-selection .note-control-ne {
    top: -5px;
    right: -5px;
    border-bottom: none;
    border-left: none;
}
.note-handle .note-control-selection .note-control-sw {
    bottom: -5px;
    left: -5px;
    border-top: none;
    border-right: none;
}
.note-handle .note-control-selection .note-control-se {
    right: -5px;
    bottom: -5px;
    cursor: se-resize;
}
.note-handle .note-control-selection .note-control-se.note-control-holder {
    cursor: default;
    border-top: none;
    border-left: none;
}
.note-handle .note-control-selection .note-control-selection-info {
    right: 0;
    bottom: 0;
    padding: 5px;
    margin: 5px;
    color: #fff;
    background-color: #000;
    font-size: 12px;
    border-radius: 5px;
    -webkit-opacity: 0.7;
    -khtml-opacity: 0.7;
    -moz-opacity: 0.7;
    opacity: 0.7;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    filter: alpha(opacity=70);
}

.note-hint-popover {
    min-width: 100px;
    padding: 2px;
}
.note-hint-popover .popover-content {
    padding: 3px;
    max-height: 150px;
    overflow: auto;
}
.note-hint-popover .popover-content .note-hint-group .note-hint-item {
    display: block !important;
    padding: 3px;
}
.note-hint-popover .popover-content .note-hint-group .note-hint-item.active, .note-hint-popover .popover-content .note-hint-group .note-hint-item:hover {
    display: block;
    clear: both;
    font-weight: 400;
    line-height: 1.4;
    color: white;
    white-space: nowrap;
    text-decoration: none;
    background-color: #428bca;
    outline: 0;
    cursor: pointer;
}

/* Handle
 ------------------------------------------ */
html .note-fullscreen-body, body .note-fullscreen-body {
    overflow: hidden !important;
}

.note-editable ul li, .note-editable ol li {
    list-style-position: inside;
}

.note-editor .note-editing-area .note-editable table {
    width: 100%;
    border-collapse: collapse;
}
.note-editor .note-editing-area .note-editable table td, .note-editor .note-editing-area .note-editable table th {
    border: 1px solid #ececec;
    padding: 5px 3px;
}
.note-editor .note-editing-area .note-editable a {
    background-color: inherit;
    text-decoration: inherit;
    font-family: inherit;
    font-weight: inherit;
    color: #337ab7;
}
.note-editor .note-editing-area .note-editable a:hover,
.note-editor .note-editing-area .note-editable a:focus {
    color: #23527c;
    text-decoration: underline;
    outline: 0;
}
.note-editor .note-editing-area .note-editable figure {
    margin: 0;
}

/* Dialog
 ------------------------------------------*/
.note-modal .note-modal-body label {
    margin-bottom: 2px;
    padding: 2px 5px;
    display: inline-block;
}
.note-modal .note-modal-body .help-list-item:hover {
    background-color: #e0e0e0;
}
@-moz-document url-prefix() {
    .note-modal .note-image-input {
        height: auto;
    }
}

.help-list-item label {
    margin-bottom: 5px;
    display: inline-block;
}

/*# sourceMappingURL=summernote-lite.css.map*/
.flatpickr-calendar {
    background: transparent;
    opacity: 0;
    display: none;
    text-align: center;
    visibility: hidden;
    padding: 0;
    -webkit-animation: none;
    animation: none;
    direction: ltr;
    border: 0;
    font-size: 14px;
    line-height: 24px;
    border-radius: 5px;
    position: absolute;
    width: 307.875px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    background: #fff;
    -webkit-box-shadow: 1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);
    box-shadow: 1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);
}

    .flatpickr-calendar.open, .flatpickr-calendar.inline {
        opacity: 1;
        max-height: 640px;
        visibility: visible
    }

    .flatpickr-calendar.open {
        display: inline-block;
        z-index: 99999
    }

    .flatpickr-calendar.animate.open {
        -webkit-animation: fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);
        animation: fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)
    }

    .flatpickr-calendar.inline {
        display: block;
        position: relative;
        top: 2px
    }

    .flatpickr-calendar.static {
        position: absolute;
        top: calc(100% + 2px);
    }

        .flatpickr-calendar.static.open {
            z-index: 999;
            display: block
        }

    .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
        -webkit-box-shadow: none !important;
        box-shadow: none !important
    }

    .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
        -webkit-box-shadow: -2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;
        box-shadow: -2px 0 0 #e6e6e6,5px 0 0 #e6e6e6
    }

    .flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer {
        border-bottom: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0
    }

    .flatpickr-calendar .hasWeeks .dayContainer {
        border-left: 0
    }

    .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
        height: 40px;
        border-top: 1px solid #e6e6e6
    }

    .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
        height: auto
    }

    .flatpickr-calendar:before, .flatpickr-calendar:after {
        position: absolute;
        display: block;
        pointer-events: none;
        border: solid transparent;
        content: '';
        height: 0;
        width: 0;
        left: 22px
    }

    .flatpickr-calendar.rightMost:before, .flatpickr-calendar.rightMost:after {
        left: auto;
        right: 22px
    }

    .flatpickr-calendar:before {
        border-width: 5px;
        margin: 0 -5px
    }

    .flatpickr-calendar:after {
        border-width: 4px;
        margin: 0 -4px
    }

    .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after {
        bottom: 100%
    }

    .flatpickr-calendar.arrowTop:before {
        border-bottom-color: #e6e6e6
    }

    .flatpickr-calendar.arrowTop:after {
        border-bottom-color: #fff
    }

    .flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after {
        top: 100%
    }

    .flatpickr-calendar.arrowBottom:before {
        border-top-color: #e6e6e6
    }

    .flatpickr-calendar.arrowBottom:after {
        border-top-color: #fff
    }

    .flatpickr-calendar:focus {
        outline: 0
    }

.flatpickr-wrapper {
    position: relative;
    display: inline-block
}

.flatpickr-months {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

    .flatpickr-months .flatpickr-month {
        background: transparent;
        color: rgba(0,0,0,0.9);
        fill: rgba(0,0,0,0.9);
        height: 34px;
        line-height: 1;
        text-align: center;
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        overflow: hidden;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
        text-decoration: none;
        cursor: pointer;
        position: absolute;
        top: 0;
        height: 34px;
        padding: 10px;
        z-index: 3;
        color: rgba(0,0,0,0.9);
        fill: rgba(0,0,0,0.9);
    }

        .flatpickr-months .flatpickr-prev-month.flatpickr-disabled, .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
            display: none
        }

        .flatpickr-months .flatpickr-prev-month i, .flatpickr-months .flatpickr-next-month i {
            position: relative
        }

        .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { /*
      /*rtl:begin:ignore*/
            left: 0; /*
      /*rtl:end:ignore*/
        }
        /*
      /*rtl:begin:ignore*/
        /*
      /*rtl:end:ignore*/
        .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month { /*
      /*rtl:begin:ignore*/
            right: 0; /*
      /*rtl:end:ignore*/
        }
        /*
      /*rtl:begin:ignore*/
        /*
      /*rtl:end:ignore*/
        .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover {
            color: #959ea9;
        }

            .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
                fill: #f64747
            }

        .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg {
            width: 14px;
            height: 14px;
        }

            .flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path {
                -webkit-transition: fill .1s;
                transition: fill .1s;
                fill: inherit
            }

.numInputWrapper {
    position: relative;
    height: auto;
}

    .numInputWrapper input, .numInputWrapper span {
        display: inline-block
    }

    .numInputWrapper input {
        width: 100%;
    }

        .numInputWrapper input::-ms-clear {
            display: none
        }

        .numInputWrapper input::-webkit-outer-spin-button, .numInputWrapper input::-webkit-inner-spin-button {
            margin: 0;
            -webkit-appearance: none
        }

    .numInputWrapper span {
        position: absolute;
        right: 0;
        width: 14px;
        padding: 0 4px 0 2px;
        height: 50%;
        line-height: 50%;
        opacity: 0;
        cursor: pointer;
        border: 1px solid rgba(57,57,57,0.15);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .numInputWrapper span:hover {
            background: rgba(0,0,0,0.1)
        }

        .numInputWrapper span:active {
            background: rgba(0,0,0,0.2)
        }

        .numInputWrapper span:after {
            display: block;
            content: "";
            position: absolute
        }

        .numInputWrapper span.arrowUp {
            top: 0;
            border-bottom: 0;
        }

            .numInputWrapper span.arrowUp:after {
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-bottom: 4px solid rgba(57,57,57,0.6);
                top: 26%
            }

        .numInputWrapper span.arrowDown {
            top: 50%;
        }

            .numInputWrapper span.arrowDown:after {
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 4px solid rgba(57,57,57,0.6);
                top: 40%
            }

        .numInputWrapper span svg {
            width: inherit;
            height: auto;
        }

            .numInputWrapper span svg path {
                fill: rgba(0,0,0,0.5)
            }

    .numInputWrapper:hover {
        background: rgba(0,0,0,0.05);
    }

        .numInputWrapper:hover span {
            opacity: 1
        }

.flatpickr-current-month {
    font-size: 135%;
    line-height: inherit;
    font-weight: 300;
    color: inherit;
    position: absolute;
    width: 75%;
    left: 12.5%;
    padding: 7.48px 0 0 0;
    line-height: 1;
    height: 34px;
    display: inline-block;
    text-align: center;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

    .flatpickr-current-month span.cur-month {
        font-family: inherit;
        font-weight: 700;
        color: inherit;
        display: inline-block;
        margin-left: .5ch;
        padding: 0;
    }

        .flatpickr-current-month span.cur-month:hover {
            background: rgba(0,0,0,0.05)
        }

    .flatpickr-current-month .numInputWrapper {
        width: 6ch;
        width: 7ch\0;
        display: inline-block;
    }

        .flatpickr-current-month .numInputWrapper span.arrowUp:after {
            border-bottom-color: rgba(0,0,0,0.9)
        }

        .flatpickr-current-month .numInputWrapper span.arrowDown:after {
            border-top-color: rgba(0,0,0,0.9)
        }

    .flatpickr-current-month input.cur-year {
        background: transparent;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: inherit;
        cursor: text;
        padding: 0 0 0 .5ch;
        margin: 0;
        display: inline-block;
        font-size: inherit;
        font-family: inherit;
        font-weight: 300;
        line-height: inherit;
        height: auto;
        border: 0;
        border-radius: 0;
        vertical-align: initial;
        -webkit-appearance: textfield;
        -moz-appearance: textfield;
        appearance: textfield;
    }

        .flatpickr-current-month input.cur-year:focus {
            outline: 0
        }

        .flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover {
            font-size: 100%;
            color: rgba(0,0,0,0.5);
            background: transparent;
            pointer-events: none
        }

    .flatpickr-current-month .flatpickr-monthDropdown-months {
        appearance: menulist;
        background: transparent;
        border: none;
        border-radius: 0;
        box-sizing: border-box;
        color: inherit;
        cursor: pointer;
        font-size: inherit;
        font-family: inherit;
        font-weight: 300;
        height: auto;
        line-height: inherit;
        margin: -1px 0 0 0;
        outline: none;
        padding: 0 0 0 .5ch;
        position: relative;
        vertical-align: initial;
        -webkit-box-sizing: border-box;
        -webkit-appearance: menulist;
        -moz-appearance: menulist;
        width: auto;
    }

        .flatpickr-current-month .flatpickr-monthDropdown-months:focus, .flatpickr-current-month .flatpickr-monthDropdown-months:active {
            outline: none
        }

        .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
            background: rgba(0,0,0,0.05)
        }

        .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
            background-color: transparent;
            outline: none;
            padding: 0
        }

.flatpickr-weekdays {
    background: transparent;
    text-align: center;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 28px;
}

    .flatpickr-weekdays .flatpickr-weekdaycontainer {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

span.flatpickr-weekday {
    cursor: default;
    font-size: 90%;
    background: transparent;
    color: rgba(0,0,0,0.54);
    line-height: 1;
    margin: 0;
    text-align: center;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-weight: bolder
}

.dayContainer, .flatpickr-weeks {
    padding: 1px 0 0 0
}

.flatpickr-days {
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 307.875px;
}

    .flatpickr-days:focus {
        outline: 0
    }

.dayContainer {
    padding: 0;
    outline: 0;
    text-align: left;
    width: 307.875px;
    min-width: 307.875px;
    max-width: 307.875px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
}

    .dayContainer + .dayContainer {
        -webkit-box-shadow: -1px 0 0 #e6e6e6;
        box-shadow: -1px 0 0 #e6e6e6
    }

.flatpickr-day {
    background: none;
    border: 1px solid transparent;
    border-radius: 150px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #393939;
    cursor: pointer;
    font-weight: 400;
    width: 14.2857143%;
    -webkit-flex-basis: 14.2857143%;
    -ms-flex-preferred-size: 14.2857143%;
    flex-basis: 14.2857143%;
    max-width: 39px;
    height: 39px;
    line-height: 39px;
    margin: 0;
    display: inline-block;
    position: relative;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}

    .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
        cursor: pointer;
        outline: 0;
        background: #e6e6e6;
        border-color: #e6e6e6
    }

    .flatpickr-day.today {
        border-color: #959ea9;
    }

        .flatpickr-day.today:hover, .flatpickr-day.today:focus {
            border-color: #959ea9;
            background: #959ea9;
            color: #fff
        }

    .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
        background: #569ff7;
        -webkit-box-shadow: none;
        box-shadow: none;
        color: #fff;
        border-color: #569ff7
    }

        .flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange {
            border-radius: 50px 0 0 50px
        }

        .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {
            border-radius: 0 50px 50px 0
        }

        .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
            -webkit-box-shadow: -10px 0 0 #569ff7;
            box-shadow: -10px 0 0 #569ff7
        }

        .flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange {
            border-radius: 50px
        }

    .flatpickr-day.inRange {
        border-radius: 0;
        -webkit-box-shadow: -5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;
        box-shadow: -5px 0 0 #e6e6e6,5px 0 0 #e6e6e6
    }

    .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
        color: rgba(57,57,57,0.3);
        background: transparent;
        border-color: transparent;
        cursor: default
    }

        .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
            cursor: not-allowed;
            color: rgba(57,57,57,0.1)
        }

    .flatpickr-day.week.selected {
        border-radius: 0;
        -webkit-box-shadow: -5px 0 0 #569ff7,5px 0 0 #569ff7;
        box-shadow: -5px 0 0 #569ff7,5px 0 0 #569ff7
    }

    .flatpickr-day.hidden {
        visibility: hidden
    }

.rangeMode .flatpickr-day {
    margin-top: 1px
}

.flatpickr-weekwrapper {
    float: left;
}

    .flatpickr-weekwrapper .flatpickr-weeks {
        padding: 0 12px;
        -webkit-box-shadow: 1px 0 0 #e6e6e6;
        box-shadow: 1px 0 0 #e6e6e6
    }

    .flatpickr-weekwrapper .flatpickr-weekday {
        float: none;
        width: 100%;
        line-height: 28px
    }

    .flatpickr-weekwrapper span.flatpickr-day, .flatpickr-weekwrapper span.flatpickr-day:hover {
        display: block;
        width: 100%;
        max-width: none;
        color: rgba(57,57,57,0.3);
        background: transparent;
        cursor: default;
        border: none
    }

.flatpickr-innerContainer {
    display: block;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}

.flatpickr-rContainer {
    display: inline-block;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.flatpickr-time {
    text-align: center;
    outline: 0;
    display: block;
    height: 0;
    line-height: 40px;
    max-height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

    .flatpickr-time:after {
        content: "";
        display: table;
        clear: both
    }

    .flatpickr-time .numInputWrapper {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 40%;
        height: 40px;
        float: left;
    }

        .flatpickr-time .numInputWrapper span.arrowUp:after {
            border-bottom-color: #393939
        }

        .flatpickr-time .numInputWrapper span.arrowDown:after {
            border-top-color: #393939
        }

    .flatpickr-time.hasSeconds .numInputWrapper {
        width: 26%
    }

    .flatpickr-time.time24hr .numInputWrapper {
        width: 49%
    }

    .flatpickr-time input {
        background: transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        text-align: center;
        margin: 0;
        padding: 0;
        height: inherit;
        line-height: inherit;
        color: #393939;
        font-size: 14px;
        position: relative;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-appearance: textfield;
        -moz-appearance: textfield;
        appearance: textfield;
    }

        .flatpickr-time input.flatpickr-hour {
            font-weight: bold
        }

        .flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second {
            font-weight: 400
        }

        .flatpickr-time input:focus {
            outline: 0;
            border: 0
        }

    .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
        height: inherit;
        float: left;
        line-height: inherit;
        color: #393939;
        font-weight: bold;
        width: 2%;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        align-self: center
    }

    .flatpickr-time .flatpickr-am-pm {
        outline: 0;
        width: 18%;
        cursor: pointer;
        text-align: center;
        font-weight: 400
    }

        .flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus {
            background: #eee
        }

.flatpickr-input[readonly] {
    cursor: pointer
}

@-webkit-keyframes fpFadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
}

@keyframes fpFadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
}

/* ============================================
   Design tokens — canonical radii / shapes
   ────────────────────────────────────────────
   The 2026-05-01 consistency audit found 11 distinct border-radius values
   in active use across buttons, badges, cards and inputs. These tokens
   are the values new code should reach for. Existing rules with literal
   pixel values are gradually migrating onto them.

     --radius-xs   3px    very small chips / inline tags
     --radius-sm   4px    standard button / input
     --radius-md   8px    cards, picture-cards, panels
     --radius-lg   12px   large surfaces, modal-shell
     --radius-xl   16px   hero cards
     --radius-pill 999px  pill badges, status pills, avatars

   When a one-off radius is genuinely needed, prefer the closest token
   over inventing a new value (e.g. 7.5px → 8px / --radius-md).
   ============================================ */
:root {
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* Status colour pairs — used by .status-pill and any contextual
       status renderings. Pick the bg/fg pair together. */
    --status-success-bg: #dcfce7;  --status-success-fg: #15803d;
    --status-warning-bg: #fef3c7;  --status-warning-fg: #92400e;
    --status-danger-bg:  #fee2e2;  --status-danger-fg:  #dc2626;
    --status-info-bg:    #dbeafe;  --status-info-fg:    #1d4ed8;
    --status-neutral-bg: #f3f4f6;  --status-neutral-fg: #4b5563;

    /* ClubRight brand orange. Used for chart accents, finance sidebar
       icons, and as the SweetAlert button colour on brand-tied flows.
       Per-club brand colour (which most pages use) is set via
       --cui-nav-link-color on <body> in _Layout.cshtml — this is the
       fixed ClubRight-product-brand orange, not the per-club one. */
    --brand-orange: #e8651a;
}

/* ============================================
   Canonical status pill component
   ────────────────────────────────────────────
   Single source of truth for "Active / Pending / Frozen / Cancelled /
   Archived" type indicators. Pre-2026-05-01 there were three competing
   pill systems (.member-plan-card__status, .comms-status, .settings-pay-status)
   each with their own colour palette. They all rendered the same word
   ("Active") differently. Now they all alias to .status-pill so existing
   markup keeps working while the rendering converges.

   New code should use .status-pill .status-pill--<variant> directly.
   ============================================ */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
}

.status-pill--success,
.member-plan-card__status--success,
.comms-status--success,
.settings-pay-status--success {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.status-pill--warning,
.member-plan-card__status--warning,
.comms-status--warning,
.settings-pay-status--warning {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.status-pill--danger,
.member-plan-card__status--danger,
.comms-status--danger {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
}

.status-pill--info,
.member-plan-card__status--info {
    background: var(--status-info-bg);
    color: var(--status-info-fg);
}

.status-pill--neutral {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
}

/* ============================================
   #40211 — Insert personalisation chips
   Shared "Insert personalisation" strip rendered under message-body editors (bulk
   messaging, smart workflows) and as the email-template dynamic-field list.
   ============================================ */
.cr-personalise {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.cr-personalise__label {
    font-size: 0.8125rem;
    color: var(--cui-secondary-color, #6b7280);
    margin-right: 0.125rem;
}

.cr-personalise__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--status-info-fg);
    background: var(--status-info-bg);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: border-color 0.12s ease, filter 0.12s ease;
}

.cr-personalise__chip:hover,
.cr-personalise__chip:focus-visible {
    border-color: var(--status-info-fg);
    outline: none;
}

.cr-personalise__chip .fa {
    font-size: 0.7rem;
}

/* "More" disclosure — keeps the strip to the common fields; the rest sit in a popover. */
.cr-personalise__more {
    position: relative;
    display: inline-flex;
}

.cr-personalise__more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--cui-secondary-color, #6b7280);
    background: transparent;
    border: 1px solid var(--cui-border-color, #e5e7eb);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease;
}

.cr-personalise__more-btn:hover,
.cr-personalise__more-btn:focus-visible,
.cr-personalise__more-btn[aria-expanded="true"] {
    color: var(--status-info-fg);
    border-color: var(--status-info-fg);
    outline: none;
}

.cr-personalise__more-btn .fa {
    font-size: 0.65rem;
}

.cr-personalise__menu {
    /* Fixed (not absolute) so the popover escapes the message-composer modal's overflow
       clip; personalisation.js sets top/left from the button's screen position on open. */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 12rem;
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.25rem;
    background: #fff;
    border: 1px solid var(--cui-border-color, #e5e7eb);
    border-radius: var(--radius-md, 0.5rem);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.cr-personalise__menu[hidden] {
    display: none;
}

/* Menu rows reuse the chip click/insert plumbing but read as a quiet list, not pills. */
.cr-personalise__menu-item {
    justify-content: flex-start;
    width: 100%;
    color: var(--cui-body-color, #374151);
    background: transparent;
    border-radius: var(--radius-sm, 0.25rem);
}

.cr-personalise__menu-item:hover,
.cr-personalise__menu-item:focus-visible {
    color: var(--status-info-fg);
    background: var(--status-info-bg);
    border-color: transparent;
}

/* Stacked variant — the email-template dynamic-field list (headings + chip groups). */
.cr-personalise--stacked {
    display: block;
    margin-top: 0;
}

.cr-personalise__heading {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0.75rem 0 0.5rem;
}

.cr-personalise__hint {
    margin-bottom: 0.5rem;
}

.cr-personalise__group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

/* ============================================
   Accessibility: Skip Navigation
   ============================================ */
.skip-nav {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 10000;
    padding: 12px 24px;
    background: #1a1a2e;
    color: #fff;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: top 0.2s;
}

.skip-nav:focus {
    top: 0;
    color: #fff;
}

/* ============================================
   Accessibility: Global Focus Indicator
   ============================================ */
*:focus-visible {
    outline: 2px solid var(--cui-nav-link-color, #3b82f6) !important;
    outline-offset: 2px !important;
}

/* #41340 — the global focus outline above renders as a harsh dark box on the discount picker's
   amount field; swap it for a soft brand-tinted focus ring so the input reads cleanly. */
.cr-discount-picker .form-control:focus,
.cr-discount-picker .form-control:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    border-color: #5b4bef !important;
    box-shadow: 0 0 0 0.2rem rgba(91, 75, 239, 0.25) !important;
}

/* ============================================
   Cube Loader
   ============================================ */
.loader {
    width: 48px;
    height: 48px;
    margin: auto;
    margin-bottom: 18px;
    position: relative;
}

.loader:before {
    content: '';
    width: 48px;
    height: 5px;
    background: #000;
    opacity: 0.25;
    position: absolute;
    top: 60px;
    left: 0;
    border-radius: 50%;
    animation: loader-shadow 0.5s linear infinite;
}

.loader:after {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--club-color, #6366f1);
    animation: loader-spin 0.5s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--radius-sm);
}

.loader--sm {
    width: 24px;
    height: 24px;
}

.loader--sm:before {
    width: 24px;
    height: 3px;
    top: 30px;
}

/* Wrapper for centering the loader with optional text */
.loader-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 0;
    gap: 1rem;
}

.loader-wrap__text {
    font-size: 0.85rem;
    color: #9ca3af;
}

@keyframes loader-spin {
    17% { border-bottom-right-radius: 3px; }
    25% { transform: translateY(9px) rotate(22.5deg); }
    50% { transform: translateY(18px) scale(1, .9) rotate(45deg); border-bottom-right-radius: 40px; }
    75% { transform: translateY(9px) rotate(67.5deg); }
    100% { transform: translateY(0) rotate(90deg); }
}

@keyframes loader-shadow {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(1.2, 1); }
}

/* Global font sizes — base bumped +1px at each breakpoint for #38997.
   Previous baseline ran 13–15px depending on viewport, leaving 0.75rem
   text at ~11px and 0.65rem at ~9.75px (Paul Jouanny's "I can't read on
   this screen"). A floor sweep elsewhere in this file pushes any
   font-size below 0.75rem up to 0.75rem so the smallest text in the
   admin reads at a true 12px, regardless of breakpoint. */

/* None */
@media (max-width:575px) {
    html {
        font-size: 14px;
    }

    .text-value-lg {
        font-size: 1.1325rem;
    }
}

/* sm */
@media (min-width:576px) and (max-width:767px) {
    html {
        font-size: 14px;
    }

    .text-value-lg {
        font-size: 1.1925rem;
    }
}

/* md */
@media (min-width:768px) and (max-width:991px) {
    html {
        font-size: 15px;
    }

    .text-value-lg {
        font-size: 1.2525rem;
    }

    .display-6 {
        font-size: 1.4rem !important;
    }
}

/* lg */
@media (min-width:992px) and (max-width:1199px) {
    html {
        font-size: 16px;
    }

    .text-value-lg {
        font-size: 1.3125rem;
    }

    .statWidget {
        font-size: 16px !important;
    }

    .display-6 {
        font-size: 1.5rem !important;
    }
}

/* xl */
@media (min-width:1200px) and (max-width:1399px) {
    html {
        font-size: 16px;
    }

    .text-value-lg {
        font-size: 1.3125rem;
    }

    .statWidget {
        font-size: 15px !important;
    }

    .display-6 {
        font-size: 1.6rem !important;
    }
}

/* xxl */
@media (min-width:1400px) {
    html {
        font-size: 16px;
    }

    .text-value-lg {
        font-size: 1.3125rem;
    }
}

/* --- Top header: hidden on desktop, minimal on mobile --- */
/* #40786 — hide the mobile header (which carries the hamburger / drawer toggle)
   only once the pinned sidebar takes over at 1200px. Previously this hid at
   768px while the sidebar didn't pin until 1200px, leaving 768–1199px (iPad
   portrait AND landscape, small laptops) with no navigation at all. Keep this
   breakpoint in lockstep with the sidebar-pin media query (min-width: 1200px). */
@media (min-width: 1200px) {
    .header.header-sticky {
        display: none !important;
    }
}

.header.header-sticky {
    min-height: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-top: 3px solid var(--admin-club-color, #667eea) !important;
    box-shadow: none !important;
}

.header.header-sticky > .container-fluid {
    padding: 6px 16px !important;
}

.header.header-sticky .header-toggler {
    color: #6b7280;
    font-size: 0.85rem;
    padding: 4px 8px;
}

.header.header-sticky .header-toggler:hover {
    color: #111827;
}

.header.header-sticky .header-nav .btn-outline-dark {
    color: #374151;
    border-color: #d1d5db;
    background: transparent;
    font-size: 0.78rem;
    padding: 3px 10px;
    line-height: 1.4;
}

.header.header-sticky .header-nav .btn-outline-dark:hover {
    color: #111827;
    background: #f3f4f6;
    border-color: #9ca3af;
}

.header.header-sticky .header-nav .badge {
    font-size: 0.75rem;
    padding: 1px 4px;
}

.header.header-sticky .avatar-md {
    width: 26px;
    height: 26px;
}

.member-avatar.avatar-md {
    font-size: 0.75rem;
}

/* --- Sidebar user profile section (bottom) --- */
.sidebar-user-section {
    border-top: 1px solid #eef0f2;
    padding: 0.5rem 0.625rem;
    margin-top: auto;
    background: #f5f6f8;
    /* #40893 — keep this section (and its account dropup) painted above the nav.
       .sidebar-nav is an overflow:auto scroll container; at browser zoom <= 80%
       Chrome promotes it (and other position:relative sidebar items) onto a
       composited layer that painted OVER the absolutely-positioned dropup menu,
       ignoring its z-index:1000. The nav's bottom group (Settings / View Member
       Area / Assistant) then bled through the open menu. An explicit stacking
       order — nav below the user section, Admin link below the dropup — fixes
       the paint order across zoom levels. */
    position: relative;
    z-index: 2;
}

/* #40893 — see note above. */
#sidebar .sidebar-nav {
    position: relative;
    z-index: 1;
}

/* #40893 — the Admin link sits in the user section alongside the dropup; keep it
   below the menu so it doesn't bleed through when the account menu is open. */
.sidebar-user-section a.sidebar-user-trigger {
    position: relative;
    z-index: 1;
}

.sidebar-user-trigger {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0.75rem 0.6rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
    color: #374151;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
}

.sidebar-user-trigger:hover {
    background: #ecedf0;
    color: #111827;
}

.sidebar-user-trigger__avatar {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    object-fit: cover;
    font-size: 0.75rem;
}

.sidebar-user-trigger__avatar .member-avatar__img,
.sidebar-user-trigger__avatar .member-avatar__initials {
    border-radius: 50%;
}

.sidebar-user-trigger__name {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.sidebar-user-trigger__chevron {
    font-size: 0.75rem;
    color: #9ca3af;
    flex-shrink: 0;
}

.sidebar-user-section .dropdown-menu {
    width: calc(100% - 1rem);
    margin-bottom: 4px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
}

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
    text-transform: none;
}

/** 
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/* missing bootstrap styles */

img {
    max-width: 100%;
}

a {
    cursor: pointer;
    text-decoration: none;
}

.cursor-pointer {
    cursor: pointer;
}

.radio, .checkbox {
    min-height: 20px;
}

.table-hover {
    cursor: pointer;
}

.loading {
    display: none;
}

.row {
    margin-top: 10px;
}


.btn.float-end {
    margin-left: 10px;
}

textarea {
    min-height: 120px;
}

video {
    max-width: 100% !important;
}

.link {
    cursor: pointer;
}

.terminalPanel {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    transform-origin: center center;
    padding: 2vh 2vw;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    text-align: center;
}

    .terminalPanel .adminMessage {
        display: none;
    }

    .terminalPanel .terminalContent {
        height: 100%;
        position: relative;
    }

#checkInResult .terminalPanel {
    position: inherit;
    margin-top: 0; /* half of #content height*/
    margin-left: 0;
}

#checkInResult .adminMessage {
    display: block;
}

#checkInResult .terminalMessage {
    display: none;
}

#checkInResult .memberPanel {
    padding: 10px;
    border-radius: 10px;
}

#checkInResult .messagesPanel {
    width: 100%;
}

#checkInResult .messagesPanel {
    display: none;
}

#checkInResult .memberPanel h1 {
    font-size: 30px;
}

#checkInResult .memberPanel.memberGreen h2 {
    display: none;
}

#checkInResult .memberPanel h2 {
    font-size: 20px;
}

#checkInResult .memberPanel:nth-child(2) {
    display: none;
}

#memberCardPanel {
    padding: 50px 80px;
}

.memberPanel {
    border: solid 1px #ddd !important;
    text-align: center;
    background-color: #fff;
    border-radius: 17px;
    padding: 0 30px;
    overflow: hidden;
}

    .memberPanel.memberGreen, .terminalPanel.memberGreen {
        background-color: #2eb85c !important;
        color: #fff;
    }

    .memberPanel.memberRed, .terminalPanel.memberRed {
        background-color: #e55353;
        color: #fff;
    }

    .memberPanel h1 {
        font-size: 10vh;
        text-align: left;
    }

    .memberPanel h2 {
        font-size: 7vh;
        text-align: left;
    }

    .memberPanel img, .extraPanel img {
        border-radius: 17px;
    }

.terminalPanel img, .memberPan300pxel img {
    max-height: 23vh;
}

.terminalPanel h1 {
    text-align: center;
}

.terminalOverlay {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0.6;
    border-radius: 17px;
}

/* ── Till product grid: CSS Grid so vertical + horizontal gaps are exactly equal
   (Bootstrap's flex-row gutter ends up with slightly larger row-gap in this layout). */
.till-product-section .row.productsPanel,
.till-product-section .row.groupPanel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* Row gap smaller than column gap: tiles are wide (~240px) and short
       (~88px), so equal numeric gap reads as uneven — tighter row-gap makes
       the grid feel rhythmically balanced. */
    column-gap: 0.5rem;
    row-gap: 0.3rem;
    margin: 0;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

.till-product-section .row.productsPanel > .col-md-3,
.till-product-section .row.groupPanel > .col-md-3 {
    flex: unset;
    padding: 0;
    margin: 0;
    max-width: none;
    width: auto;
}

@media (max-width: 991.98px) {
    .till-product-section .row.productsPanel,
    .till-product-section .row.groupPanel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .till-product-section .row.productsPanel,
    .till-product-section .row.groupPanel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Till tile base (shared by folder + product + back variants) ── */
.tillItem {
    position: relative;
    overflow: hidden;
    height: 88px;
    padding: 0.5rem 0.75rem;
    text-align: center;
    transition: box-shadow 0.15s ease, transform 0.08s ease, border-color 0.12s;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: var(--radius-md);
    cursor: pointer;
    container-type: inline-size;
    container-name: till-tile;
}

.tillItem:hover {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.tillItem:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

.tillItem small {
    float: left;
    text-align: center;
    width: 100%;
}

.tillItem.till-credit-match {
    box-shadow: 0 0 0 2px #e8651a, 0 0 12px rgba(232, 101, 26, 0.35);
}

.tillItem.till-credit-match::after {
    content: '\f058';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.8rem;
    color: #e8651a;
    z-index: 2;
}

/* ── Till Product Sections (credit grouping) ── */
.till-product-section { margin-bottom: 0.5rem; }
.till-product-section--credits .productsPanel { padding-top: 0.25rem; }

/* ── Back tile (first item inside any open group panel) ── */
.tillItem--back {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    background: #f8f9fb;
    color: #4b5563;
}

.tillItem--back:hover {
    background: #eef1f4;
    color: #1f2937;
}

.tillItem__back-icon {
    font-size: 1.25rem;
    opacity: 0.75;
}

.tillItem__back-label {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

/* ── Folder variant: flat group-colour tile with a whisper of gradient for depth ── */
.tillItem--folder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.04) 100%),
        var(--till-accent, #7a7a7a);
    border-color: rgba(15, 23, 42, 0.1);
}

.tillItem__folder-icon {
    opacity: 0.75;
    font-size: 1.3rem;
}

.tillItem__folder-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.2;
    font-size: 0.95rem;
    max-width: 100%;
    word-break: break-word;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

/* ── Product variant: flat white base + left accent stripe, name + price ── */
.tillItem--product {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.4rem 0.7rem 1.5rem 0.95rem;
    background: #ffffff;
    color: #1f2937;
}

.tillItem--product::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--till-accent, transparent);
    z-index: 1;
}

.tillItem__product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    text-align: center;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.25;
    color: #1f2937;
    padding: 0 0.1rem;
    word-break: break-word;
    max-width: 100%;
}

.tillItem__product-price {
    font-size: 0.82rem;
    font-weight: 700;
    color: #111827;
    background: rgba(15, 23, 42, 0.06);
    padding: 1px 8px;
    border-radius: 10px;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* ── Bottom row on product tiles: optional stock pill + price chip ── */
.tillItem__bottom {
    position: absolute;
    bottom: 8px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 1;
}

.till-stock-pill {
    padding: 0 6px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: var(--radius-md);
    pointer-events: none;
    white-space: nowrap;
}

.till-stock-pill--out {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.till-stock-pill--low {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

/* ── Class-line coverage pill (Order panel) ──
   Sits in the till-order-line__total slot to indicate how a class booking is
   being paid for: Membership / Credit / Choose credit / Needs payment. */
.till-coverage-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
    line-height: 1.4;
    white-space: nowrap;
}
button.till-coverage-pill {
    cursor: pointer;
}
.till-coverage-pill i {
    font-size: 0.75rem;
}
.till-coverage-pill--membership {
    background: #dbeafe;
    color: #1e3a8a;
    border-color: #93c5fd;
}
.till-coverage-pill--credit {
    background: #d1fae5;
    color: #065f46;
    border-color: #6ee7b7;
}
.till-coverage-pill--needs {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}
.till-coverage-pill--needs:hover {
    background: #fde68a;
}
.till-coverage-pill--missing {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.till-order-line__credit-picker {
    margin-top: 0.5rem;
    padding: 0.5rem 0 0;
    border-top: 1px dashed #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.till-credit-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.4rem 0.65rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    min-width: 110px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.till-credit-option:hover {
    border-color: var(--admin-club-color, #667eea);
    box-shadow: 0 0 0 1px var(--admin-club-color, #667eea);
}
.till-credit-option__name {
    font-weight: 600;
    font-size: 0.78rem;
    color: #111827;
}
.till-credit-option__price {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.1rem;
}

/* Shorten the out-of-stock pill to "OOS" when the tile gets too narrow to fit
   the full label alongside the price chip — keeps the indicator visible without
   clipping. Uses the original text node only as a placeholder; the visible
   label comes from the ::after pseudo-element. */
@container till-tile (max-width: 210px) {
    .till-stock-pill--out {
        font-size: 0;
        padding: 0 5px;
    }
    .till-stock-pill--out::after {
        content: "OOS";
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0.02em;
    }
}

/* ── Disabled product tile (out-of-stock + overselling prevented) ── */
.till-item--disabled {
    opacity: 0.55;
    pointer-events: none;
    filter: saturate(0.6);
}

/* ── Payment Queue ── */
.payment-queue__card { transition: box-shadow 0.15s; }
.payment-queue__card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.payment-queue__photo { width: 40px; height: 40px; object-fit: cover; }

/* ── Future Sessions Payment Modal ── */
.future-sessions__list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}

.future-sessions__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.85rem;
}

.future-sessions__item:last-child { border-bottom: none; }

.future-sessions__item--covered {
    opacity: 0.55;
    background: #f9fafb;
}

.future-sessions__date { flex: 1; white-space: nowrap; }

.future-sessions__status { flex-shrink: 0; }

.future-sessions__check { flex-shrink: 0; }

.tillSale {
    position: relative;
    width: 100%;
    height: 100px;
    text-align: center;
}

    .tillSale div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: smaller;
    }

.tillTotal {
    margin-left: 1%;
    margin-right: 2%;
    margin-bottom: 5px;
}

    .tillTotal .clearButton {
        float: left;
        cursor: pointer;
        padding-left: 10px;
    }


    .tillTotal.value {
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        color: #fff;
        text-align: right;
        padding: 14px 18px;
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        width: 100%;
        display: block;
        border-radius: 10px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(15, 23, 42, 0.18);
    }

    .tillTotal #saleTotal {
        background-color: #fff;
        color: #111827;
        border: 1px solid #e5e7eb;
        padding: 10px 14px;
        font-size: 1.6rem;
        font-weight: 700;
        width: 100%;
        display: inline-block;
        text-align: right;
        border-radius: 10px;
    }

.tillButton {
    margin-right: 1%;
    margin-left: 1%;
    width: 31%;
    float: left;
    margin-bottom: 0.5vh;
    cursor: pointer;
}

.cardButton {
    margin-bottom: 5px;
    cursor: pointer;
}

    .tillButton span, .cardButton span {
        padding: 12px;
        text-align: center;
        background: #fff;
        color: #111827;
        border: 1px solid #e5e7eb;
        display: inline-block;
        width: 100%;
        font-size: 1.4rem;
        font-weight: 600;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.08s;
    }

    .tillButton:hover span, .cardButton:hover span {
        background: #f9fafb;
        border-color: #d1d5db;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }

    .tillButton:active span, .cardButton:active span {
        background: #f3f4f6;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
        transform: translateY(1px);
    }

.readerPayButton {
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #111827;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.readerPayButton:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.readerPayButton.bg-success {
    border-color: #a7f3d0;
    background: #ecfdf5 !important;
    color: #065f46;
}

.readerPayButton.bg-danger {
    border-color: #fecaca;
    background: #fef2f2 !important;
    color: #991b1b;
}

.readerPayButton .readerStatus {
    color: inherit;
    opacity: 0.75;
    font-weight: 500;
}

.terminalPanel .tillButton span {
    padding: 2.5vh;
    font-size: 4vh;
}

/* ==========================================================================
   TILL REDESIGN
   Context-aware layout, modernised payment panel, BEM-named components
   ========================================================================== */

/* ── Context Banner ── */
/* ── Till Focused view ──
   One-screen "complete this sale" UI for context-driven sales (booking, due
   membership). Replaces the keypad+method+complete-button two-step with single
   amount-prefilled buttons that take payment and finish the sale in one click. */
.till-focused {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.till-focused__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #fff;
}
.till-focused__icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.till-focused__title-block {
    flex: 1;
    min-width: 0;
}
.till-focused__title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}
.till-focused__subtitle {
    font-size: 0.82rem;
    color: #cbd5e1;
    line-height: 1.4;
}
.till-focused__age {
    margin-top: 0.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.07);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}
.till-focused__age--stale {
    color: #fde68a;
    background: rgba(251, 191, 36, 0.15);
}
.till-focused__amount {
    text-align: right;
    flex-shrink: 0;
}
.till-focused__amount-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}
.till-focused__amount-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}
.till-focused__body {
    padding: 1.1rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.till-focused__panel-head {
    font-size: 0.78rem;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
/* #41715 — "Split this payment" hand-off pill in the focused till's methods header. */
.till-focused__panel-head--with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.till-focused__split-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 999px;
    color: var(--admin-club-color, #667eea);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.till-focused__split-toggle:hover {
    border-color: var(--admin-club-color, #667eea);
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 6%, #fff);
    text-decoration: none;
}
.till-focused__order {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.85rem 1rem;
}
.till-focused__order-body {
    margin: 0 -0.25rem;
}
.till-focused__order-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid #e5e7eb;
    font-weight: 700;
    font-size: 0.95rem;
    color: #111827;
}
.till-focused__methods-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}
.till-focused__method {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    width: 100%;
}
.till-focused__method:hover {
    border-color: var(--admin-club-color, #667eea);
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 4%, #fff);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.till-focused__method:disabled {
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.till-focused__method-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: #f3f4f6;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.till-focused__method:hover .till-focused__method-icon {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 18%, #fff);
    color: var(--admin-club-color, #667eea);
}
.till-focused__method--pdq .till-focused__method-icon {
    background: #fef3c7;
    color: #b45309;
}
.till-focused__method-body {
    flex: 1;
    min-width: 0;
}
.till-focused__method-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
}
.till-focused__method-detail {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 0.1rem;
}
.till-focused__error {
    padding: 0.6rem 0.8rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    color: #991b1b;
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
}
/* #41820 — success confirmation overlay shown after cash/cheque/PDQ payments */
.till-focused__success {
    text-align: center;
    padding: 3rem 1.5rem;
}
.till-focused__success-icon {
    font-size: 3rem;
    color: #059669;
    margin-bottom: 0.75rem;
}
.till-focused__success-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.35rem;
}
.till-focused__success-detail {
    font-size: 0.9rem;
    color: #6b7280;
}
.till-focused__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.4rem;
    border-top: 1px solid #f1f5f9;
    background: #f9fafb;
}
.till-focused__secondary,
.till-focused__cancel {
    font-size: 0.85rem;
    color: #4b5563;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.till-focused__secondary:hover {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 10%, #fff);
    color: var(--admin-club-color, #667eea);
}
.till-focused__cancel:hover {
    background: #f3f4f6;
    color: #111827;
}
.till-focused__cancel--danger {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #b91c1c;
    font-family: inherit;
}
.till-focused__cancel--danger:hover {
    background: #fef2f2;
    color: #991b1b;
}
.till-focused__cancel--danger:disabled {
    opacity: 0.55;
    cursor: progress;
}
@media (max-width: 600px) {
    .till-focused__header {
        flex-wrap: wrap;
    }
    .till-focused__amount {
        flex: 1 0 100%;
        text-align: left;
        margin-top: 0.5rem;
    }
    .till-focused__methods-grid {
        grid-template-columns: 1fr;
    }
    /* Footer: stack the 3 actions full-width (was a cramped space-between row whose
       labels wrapped messily), give each a 44px tap target, and add bottom clearance
       so the fixed chat launcher (bottom-right) can't cover "Back to till". */
    .till-focused__footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding-bottom: calc(0.85rem + 76px);
    }
    .till-focused__secondary,
    .till-focused__cancel {
        justify-content: center;
        min-height: 44px;
    }
}

.till-context-banner {
    background: #1e293b;
    color: #fff;
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

.till-context-banner__icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: #e8651a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.till-context-banner__title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
}

.till-context-banner__detail {
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.4;
}

.till-context-banner__date {
    color: #64748b;
}

.till-context-banner__amount {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.till-context-banner__action {
    background: #e8651a;
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 8px 18px;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background 0.15s;
}

.till-context-banner__action:hover {
    background: #d05a15;
    color: #fff;
}

.till-context-banner__extra {
    color: #94a3b8;
    font-size: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 8px;
}

/* Booking-completion variant: amber gradient + alert icon to make the
   "this booking needs a credit" state unmissable. The default till-context-banner
   styling reads as informational; this reads as a call to action. */
.till-context-banner--booking {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
}
.till-context-banner__icon--alert {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}

/* When the banner is on screen, draw the eye to the unresolved credit pill on
   the order line — the pulse fades after the user clicks "Choose credit". */
[data-needs-credit-banner] ~ * .till-coverage-pill--needs,
.till-coverage-pill--needs[data-needs-attention] {
    animation: till-needs-credit-pulse 1.6s ease-in-out infinite;
}
@@keyframes till-needs-credit-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0.6); }
    50%      { box-shadow: 0 0 0 6px rgba(180, 83, 9, 0); }
}

/* ── Section Headers (collapsible) ── */
.till-section-header {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.till-section-header:hover {
    background: #f3f4f6;
}

/* Match the Till's Order header: lighter bg, smaller h6, medium weight.
   Override .settings-feature-card's heavier defaults by stacking both classes.
   min-height matches the Order header's button-driven height so both cards
   line up visually across the split. */
.settings-feature-card.selectProducts > .card-header {
    padding: 0.5rem 1rem;
    min-height: 45px;
}

.settings-feature-card.selectProducts > .card-header h6 {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Tighten the product-grid card body: the default 1rem bottom padding leaves
   a visible strip below the last row. Top padding kept at default so the
   header-to-first-row gap stays as it was. */
.settings-feature-card.selectProducts > .card-body,
.settings-feature-card.selectProducts #productsGrid > .card-body,
.settings-feature-card.selectProducts #otherProductsContent > .card-body {
    padding-bottom: 0.5rem;
}

.till-section-icon {
    color: #e8651a;
    margin-right: 6px;
}

.till-collapse-icon {
    color: #6b7280;
    transition: transform 0.2s ease;
    font-size: 0.85rem;
}

.till-section-header[aria-expanded="true"] .till-collapse-icon {
    transform: rotate(180deg);
}

/* ── Due Memberships ── */
.till-due-memberships__title {
    font-weight: 600;
    margin-bottom: 8px;
    color: #111827;
}

/* ── Catalog (left column, scrolls naturally) ── */
.till-catalog {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

/* ── Transaction (right column) ──
   Stretches to viewport so the order list can grow into the available
   vertical space without pushing the page itself into a scrollbar.
   Uses explicit `height` (not max-height) so the flex children
   (.till-transaction__card with flex: 1 1 auto) actually fill the
   column — with max-height the container sizes to content and the
   card leaves a large empty area below it.
   The 180px subtraction accounts for the dashboard header + page
   header above this row (~140px, down from ~180px since the operator
   bar was folded into the page-header subtitle), plus a 20px bottom
   safe area so the column doesn't butt up against the page footer —
   this mirrors the 20px `top` offset from the sticky positioning above. */
@media (min-width: 768px) and (min-height: 850px) {
    .till-transaction {
        position: sticky;
        top: 20px;
        align-self: flex-start;
        height: calc(100vh - 180px);
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* Paying view's left column (keypad / payment methods) matches the
       right column's height so both column bottoms line up. The panel
       inside flexes to fill the full column height. */
    .till-paying__keypad-col {
        height: calc(100vh - 180px);
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .till-paying__keypad-col > .till-paying__panel {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    /* Keypad grows to fill the Amount-to-collect panel's available vertical
       space — each number button takes an equal share so the grid looks balanced
       and the buttons are comfortably large for touch. Payment-methods grid stays
       at its natural size at the bottom. */
    /* Make the panel itself a flex column so the body can flex-fill via flex-grow
       (height: 100% wouldn't work because the panel's height is flex-computed, not
       explicit — children would fall back to natural sizing and overflow). */
    #payingKeypadPanel {
        display: flex;
        flex-direction: column;
    }
    #payingKeypadPanel > .till-paying__panel-header {
        flex-shrink: 0;
    }
    #payingKeypadPanel > .till-paying__panel-body {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    #payingKeypadPanel .till-keypad {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* minmax floor on the row ensures the grid never crushes buttons below
           a touch-friendly 56px — if the column's max-height can't fit that,
           the panel overflows into the column (which becomes page-scroll via
           the outer max-height on .till-paying__keypad-col) rather than
           clipping button text silently. */
        grid-auto-rows: minmax(56px, 1fr);
        gap: 8px;
        /* flex-basis: 0 so the keypad claims only the leftover space after the
           amount display + payment-method grid, instead of starting at its
           natural content height (which overflows the panel). */
        flex: 1 1 0;
        min-height: 0;
    }
    #payingKeypadPanel .till-keypad .tillButton {
        float: none;
        width: auto;
        margin: 0;
        display: flex;
        align-items: stretch;
        min-height: 56px;
    }
    #payingKeypadPanel .till-keypad .tillButton span {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
}

/* ── Transaction Card ── */
.till-transaction__card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
}

.till-transaction__order-header {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.till-transaction__order-header h6 { font-size: 0.9rem; }

.till-transaction__order {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border-bottom: 1px solid #e5e7eb;
}

/* ── Transaction Card Footer (total + Complete Sale button) ── */
.till-transaction__footer {
    border-top: 2px solid #e5e7eb;
    background: #fff;
    flex-shrink: 0;
}
.till-transaction__footer-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
}

/* ── Compact Order Lines (receipt-style, two-row) ──
   Top row: remove (×) button · product name · line total.
   Bottom row: price (click-to-edit text) · separator · qty stepper. */
.till-order-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}
.till-order-line:last-child { border-bottom: none; }
.till-order-line__body {
    flex: 1 1 auto;
    min-width: 0;
}
.till-order-line__top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.till-order-line__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.till-order-line__total {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: #111827;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.till-order-line__qty-ro {
    font-size: 0.85rem;
    font-weight: 500;
    color: #4b5563;
    font-variant-numeric: tabular-nums;
}
.till-order-line__fields {
    display: flex;
    align-items: center;
    gap: 8px;
}
.till-order-line__currency {
    color: #6b7280;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-right: -4px;
}
.till-order-line__sep {
    color: #cbd5e1;
    font-size: 0.9rem;
    flex-shrink: 0;
}
/* Price: looks like plain text until you focus it. */
.till-order-line__price--text {
    width: auto;
    min-width: 52px;
    max-width: 80px;
    flex-shrink: 0;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 500;
    color: #111827;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 2px 4px;
    box-shadow: none;
    cursor: text;
    transition: border-color 120ms ease, background-color 120ms ease;
}
.till-order-line__price--text:hover {
    border-color: #e5e7eb;
    background: #f9fafb;
}
.till-order-line__price--text:focus {
    outline: none;
    border-color: #94a3b8;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25);
}
/* Hide native number spinners — they clash with the text-first look. */
.till-order-line__price--text::-webkit-inner-spin-button,
.till-order-line__price--text::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.till-order-line__price--text { -moz-appearance: textfield; }

/* Qty stepper: [−] value [+] in a single bordered pill. */
.till-order-line__qty-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    height: 28px;
}
.till-order-line__qty-btn {
    width: 26px;
    border: 0;
    background: transparent;
    color: #374151;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 120ms ease;
}
.till-order-line__qty-btn:hover:not(:disabled) { background: #f3f4f6; }
.till-order-line__qty-btn:active:not(:disabled) { background: #e5e7eb; }
.till-order-line__qty-btn:disabled {
    color: #cbd5e1;
    cursor: not-allowed;
}
.till-order-line__qty-value {
    width: 34px;
    border: 0;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    background: transparent;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: #111827;
    font-variant-numeric: tabular-nums;
    padding: 0 2px;
    box-shadow: none;
}
.till-order-line__qty-value:focus {
    outline: none;
    background: #f9fafb;
}
.till-order-line__qty-value:disabled {
    color: #94a3b8;
    background: #f9fafb;
}
.till-order-line__qty-value::-webkit-inner-spin-button,
.till-order-line__qty-value::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.till-order-line__qty-value { -moz-appearance: textfield; }

/* Remove (×) button: neutral ghost icon — routine action, not destructive-looking. */
.till-order-line__remove {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 0 !important;
    font-size: 0.75rem !important;
    line-height: 1;
    color: #9ca3af;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Align with the name on the top row. */
    margin-top: 2px;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.till-order-line__remove:hover {
    color: #dc3545;
    background: #fef2f2;
    border-color: #fecaca;
}
/* #41340 — subtle tag icon on the inline discount line; the label itself uses
   .till-order-line__name so it reads identically to the product rows. */
.till-order-line__discount-icon {
    color: #9ca3af;
    margin-right: 6px;
    font-size: 0.8rem;
}

/* ── Payment Summary ── */
.till-summary {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-bottom: 8px;
}

.till-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #374151;
    padding: 2px 0;
}

.till-summary__divider {
    border-top: 1px solid #d1d5db;
    margin: 6px 0;
}

.till-summary__remaining {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    padding: 6px 0 0;
}

/* Remaining amount as a colour-coded pill. The parent action column's
   data-pay-state drives the colour — green when there's nothing left to
   take, amber when something's still owed, blue when overpaid (change due).
   The element retains its #saleTotal id so existing JS that reads the live
   remaining (.text()) and click-to-copy-into-keypad (#saleTotal click)
   still work unchanged. */
.till-summary__remaining #saleTotal {
    display: inline-flex;
    align-items: center;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
    padding: 0.25rem 0.7rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    cursor: pointer;
    line-height: 1.2;
    width: auto;
    text-align: center;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.till-summary__remaining #saleTotal::before {
    /* #41802 — currency-aware: the club's real symbol is rendered onto the element
       as data-currency (server falls back to "£" when none is set). attr() keeps the
       symbol out of #saleTotal's text node so the JS that parses the remaining amount
       is unaffected. */
    content: attr(data-currency);
    margin-right: 0.15rem;
    opacity: 0.75;
}
/* JS-driven state classes (added/removed by tillFlow.js' refreshPayingTileAmounts).
   These beat the parent-attribute cascade if anything has set !important on
   the base rule from another stylesheet. */
.till-summary__remaining #saleTotal.till-remaining-pill--paid {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border-color: #6ee7b7 !important;
}
/* #41802 — keep the currency symbol (the base ::before "£") visible in the paid
   state too. The paid tick previously overrode ::before, REPLACING the £, so a
   £0.00 remaining pill showed only a tick and no currency symbol. Put the tick
   AFTER the amount via ::after instead, giving "£0.00 ✓". The FontAwesome family
   was also the legacy FA4 name (not loaded → tofu box); use the loaded FA5/6 stack. */
.till-summary__remaining #saleTotal.till-remaining-pill--paid::after {
    /* #41802 — admin loads Font Awesome as the JS/SVG framework (it swaps <i> tags
       for inline SVG), NOT a webfont, so an FA glyph in CSS `content` can't resolve
       and rendered as a tofu box. Use a plain Unicode check mark, which paints from
       the system font exactly like the currency symbol does. */
    content: "\2713";   /* ✓ U+2713 CHECK MARK */
    margin-left: 0.4rem;
    opacity: 0.9;
    font-weight: 900;
}
.till-summary__remaining #saleTotal.till-remaining-pill--change {
    background: #dbeafe !important;
    color: #1e40af !important;
    border-color: #93c5fd !important;
}

/* ── Pay Remaining Button ── */
.till-pay-remaining-btn {
    border-style: dashed;
}

/* ── Payment Method Buttons ──
   Neutral white cards with subtle tinting to differentiate methods. A
   single saturated accent per card lives on a left-edge strip rather
   than the whole surface — keeps the grid calm on the eye while still
   letting muscle-memory latch onto colour cues for Cash/Card/ePoints. */
.till-pay-btn {
    padding: 10px 8px;
    text-align: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.08s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.till-pay-btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #cbd5e1;
    transition: background 0.12s;
}

.till-pay-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transform: none;
    filter: none;
}
.till-pay-btn:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.till-pay-btn--cash::before { background: #10b981; }
.till-pay-btn--card {
    color: #9a3412;
}
.till-pay-btn--card::before { background: #e8651a; }
.till-pay-btn--epoints {
    color: #6d28d9;
}
.till-pay-btn--epoints::before { background: #8b5cf6; }

.till-pay-btn--disabled {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.75;
}
.till-pay-btn--disabled::before { background: #d1d5db !important; }

.till-pay-btn--reader {
    /* Retained for legacy reader button selectors — now uses the same
       neutral card treatment as the other methods, with a red edge strip
       only when the reader is offline (see .readerPayButton above). */
    color: #111827;
}

/* ── Payments Table ── */
.till-payments-table td {
    vertical-align: middle;
    padding: 6px 8px;
}

/* ── Member Hero Panel (right column) ── */
.till-member-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 10px;
    padding: 12px 16px;
    color: #fff;
}
.till-member-hero--guest {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
}
.till-member-hero__avatar { flex-shrink: 0; }
.till-member-hero__img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.till-member-hero__placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
}
.till-member-hero--guest .till-member-hero__placeholder {
    background: #e2e8f0;
    color: #94a3b8;
}
.till-member-hero__info { flex-grow: 1; min-width: 0; }
.till-member-hero__name {
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    text-decoration: none;
    line-height: 1.3;
}
.till-member-hero__name:hover { color: #e8651a; }
.till-member-hero--guest .till-member-hero__name { color: #1e293b; }
.till-member-hero__number {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: 0.4rem;
}
.till-member-hero--guest .till-member-hero__number {
    color: #94a3b8;
}
.till-member-hero__detail {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 2px;
}
.till-member-hero__search { margin-top: 6px; }
.till-member-hero__search .form-control {
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}
.till-member-hero__change {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    box-sizing: border-box;
}
.till-member-hero__change:hover {
    background: #e8651a;
    border-color: #e8651a;
    color: #fff;
}

/* ── Void button in member hero (matches Change pill shape + danger colouring) ── */
.till-member-hero__actions {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    align-items: center;
}
/* In guest mode the info column has a search box below the name, making it
   taller than the avatar. Bottom-align the actions so the Void button sits
   in line with the search box rather than next to the "Guest" label. */
.till-member-hero--guest .till-member-hero__actions {
    align-self: flex-end;
}
.till-member-hero__void {
    flex-shrink: 0;
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.55);
    color: #fca5a5;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    box-sizing: border-box;
}
.till-member-hero__void:hover {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.till-member-hero .msg:empty { display: none; }

/* ── Page-header subtitle: operator chip only ──
   The subtitle line carries just the operator link (or a read-only label
   for non-owners). Whose sale this is is surfaced by the dedicated member
   hero in the right column of Building/Paying views, so duplicating the
   name in the header would be noise. */
.till-header-operator-readonly {
    color: rgba(255, 255, 255, 0.65);
}
.till-header-operator-readonly strong {
    color: #fff;
    font-weight: 600;
    margin-left: 0.15rem;
}

/* ── Operator chip (#changeStaffLink) ──
   #41161 Promoted from a faint inline text link to a visible pill so staff can
   tell it's a clickable swap control (it was being missed). Opens #tillStaffModal
   on click. */
.till-staff-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.till-staff-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    text-decoration: none;
}
.till-staff-btn:hover strong {
    color: #fff;
}
.till-staff-btn:focus-visible {
    outline: 2px solid #e8651a;
    outline-offset: 3px;
}
.till-staff-btn strong {
    color: #fff;
    font-weight: 700;
    margin: 0 0.1rem;
}
.till-staff-btn__swap {
    font-size: 0.82em;
    opacity: 1;
    margin-left: 0.1rem;
}

/* Unset-operator state — amber attention chip nudges the user to pick someone. */
.till-staff-btn--empty {
    color: #fcd34d;
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.7);
    font-weight: 700;
}
.till-staff-btn--empty:hover {
    color: #fde68a;
    background: rgba(251, 191, 36, 0.28);
    border-color: #fcd34d;
}

/* #41161 Lobby (Empty view) operator strip — light-background variant of the
   swap control, surfaced in the till body where the eye lands. */
.till-operator-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0.25rem 0 0.75rem;
    font-size: 0.9rem;
    color: #4b5563;
}
.till-staff-btn--body {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    color: #374151;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.till-staff-btn--body:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

/* ── Payment Modal ── */
#paymentModal .modal-dialog { max-width: 420px; }
#paymentModal .modal-body { padding: 1rem; }
#paymentModal .tillTotal { margin-left: 0; margin-right: 0; }
#paymentModal .tillTotal.value {
    font-size: 1.2rem;
    padding: 6px 10px;
    border-radius: var(--radius-md);
}
.till-keypad { overflow: hidden; }
#paymentModal .tillButton {
    width: 31%;
    margin: 1%;
    margin-bottom: 2px;
}
#paymentModal .tillButton span {
    padding: 6px;
    font-size: 1.1rem;
    border-radius: 0.4rem;
}
/* Reset global .cardButton span overrides inside modal */
#paymentModal .cardButton {
    margin-bottom: 0;
}
#paymentModal .cardButton span:not(.till-pay-btn) {
    font-size: inherit;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}
/* Disabled complete buttons */
#paymentModal .completeButton.disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* Modal z-index stacking (card/reader modals stack above payment modal) */
#CardReaderModal { z-index: 1060; }
#cardPaymentModal { z-index: 1060; }

/* ── Payment method grid (3 columns) ── */
.till-pay-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px;
    background: #f9fafb;
}
.till-pay-grid .cardButton,
.till-pay-grid .readerPayButton {
    margin-bottom: 0;
}
/* Inside the grid, tillButton/cardButton spans were given generic keypad
   styling (white card, 1.4rem font) by the shared .tillButton span rule.
   Inside .till-pay-grid they should defer entirely to .till-pay-btn which
   has its own sizing and accent strip. */
.till-pay-grid .cardButton span:not(.till-pay-btn) {
    font-size: inherit;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* ==========================================================================
   END TILL REDESIGN
   ========================================================================== */

.autocomplete-suggestions {
    border: 1px solid #999;
    background: #fff;
    overflow: auto;
}

.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-selected {
    background: #f0f0f0;
}

.autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399ff;
}

.autocomplete-group {
    padding: 2px 5px;
}

    .autocomplete-group strong {
        display: block;
        border-bottom: 1px solid #000;
    }

.full-width {
    width: 100%;
}

.half-width {
    width: 50%;
    align-self: flex-end;
}

h3.hasSwitch span.title {
    vertical-align: top;
    display: inline-block;
    padding-top: 2px;
}

.pad-20 {
    padding: 0 20px;
}

.hideThead thead {
    display: none;
}

.miniMember {
    text-align: center;
    border-radius: 20px;
    border: solid 2px #ddd;
}

.birthdayColumn {
    display: flex !important;
    flex-wrap: wrap;
    flex-grow: 0;
    flex-basis: 33%;
    justify-content: center;
    min-width: 33%;
    max-width: 33%;
}

    .birthdayColumn a {
        width: 100%;
    }

.miniMemberBirthday {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    margin: 0 0 10px 0;
    justify-content: center;
    flex-grow: 0;
    flex-basis: 100%;
    min-width: 33%;
}

.integrationDetails {
    height: 120px;
}

    .integrationDetails img {
        max-width: 100%;
        max-height: 120px;
    }

.clubPanel {
    height: 350px;
}

    .clubPanel img {
        max-width: 100%;
        max-height: 200px;
    }

.reportLink {
    display: block;
}

/* =============================================
   Reporting Page
   ============================================= */

/* Sticky page header - stays pinned at top on scroll */
/* Double class for specificity — .page-header sets position: relative later in the file */
.page-header.reporting-page-header {
    position: sticky;
    top: 0;
    z-index: 9;
    margin-bottom: 16px;
}

/* Reporting sidebar - reuses settings-sidebar classes, sticky + scrollable */
.reporting-sidebar,
.admin-report-sidebar {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    align-self: flex-start;
    scrollbar-width: thin;
}
.reporting-sidebar .settings-sidebar-search {
    margin-top: 0.75rem;
}
.reporting-sidebar .settings-sidebar-tier-label span,
.admin-report-sidebar .settings-sidebar-tier-label span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Reporting sub-group headers (within Member Reports tier) */
.settings-sidebar-subgroup-label {
    padding: 8px 16px 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    margin-top: 2px;
}
.settings-sidebar-subgroup-label:first-child {
    margin-top: 0;
}

/* Filter bar */
.reporting-filters {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 1rem;
}
.reporting-filters .form-control,
.reporting-filters .form-select {
    font-size: 0.875rem;
}
.reporting-filters #fromDate,
.reporting-filters #toDate {
    width: 100%;
}

/* Active report link highlight */
.reporting-sidebar .settings-sidebar-item.active {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 8%, #f9fafb);
    color: var(--admin-club-color, #2563eb);
    font-weight: 600;
    border-left-color: var(--admin-club-color, #2563eb);
}
.reporting-sidebar .settings-sidebar-item.active:hover {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 14%, #f9fafb);
    color: var(--admin-club-color, #2563eb);
}

/* Disabled report links */
.reporting-sidebar .settings-sidebar-item.disabled {
    color: #9ca3af;
    pointer-events: none;
}

/* Reporting migration banner */
.reporting-migration-banner {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    margin-bottom: 20px;
}
.reporting-migration-banner__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    color: #22d3ee;
    margin-top: 2px;
}
.reporting-migration-banner__title {
    color: #f1f5f9;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.reporting-migration-banner__text {
    color: #94a3b8;
    font-size: 0.84rem;
    line-height: 1.55;
    margin: 0 0 14px;
}
.reporting-migration-banner__links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.reporting-migration-banner__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 14px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.reporting-migration-banner__link:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    text-decoration: none;
}
.reporting-migration-banner__link i {
    color: #22d3ee;
    font-size: 0.82rem;
}

/* ── Cross-area report search results (#41748) ──
   Shown in the main content area while the reporting search box has a query. Surfaces every
   report regardless of where it now lives, grouped by area with a location badge. */
.report-search-results__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.report-search-results__count {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.report-result-group {
    margin-bottom: 18px;
}
.report-result-group__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 8px;
}
.report-result-group__count {
    background: var(--status-neutral-bg, #f1f5f9);
    color: var(--status-neutral-fg, #475569);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
    font-size: 0.7rem;
    font-weight: 700;
}
.report-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.report-result:hover {
    border-color: var(--cui-nav-link-color, #4f46e5);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    text-decoration: none;
}
.report-result:hover .report-result__arrow {
    opacity: 1;
    transform: translateX(0);
}
.report-result__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--status-neutral-bg, #f1f5f9);
    color: #64748b;
    font-size: 0.95rem;
}
.report-result__body {
    flex: 1 1 auto;
    min-width: 0;
}
.report-result__name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
}
.report-result__desc {
    display: block;
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.report-result__match {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.7rem;
    font-weight: 500;
    color: #475569;
    background: var(--status-warning-bg, #fef3c7);
    border-radius: var(--radius-xs);
    padding: 0 6px;
}
.report-result__badge {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--status-neutral-fg, #475569);
    background: var(--status-neutral-bg, #f1f5f9);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
}
.report-result__arrow {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--cui-nav-link-color, #4f46e5);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s, transform 0.15s;
}
/* Per-area accents — icon + badge tint by location */
.report-result--members .report-result__icon { background: #eef2ff; color: #4f46e5; }
.report-result--members .report-result__badge { background: #eef2ff; color: #4338ca; }
.report-result--diary .report-result__icon { background: #ecfeff; color: #0891b2; }
.report-result--diary .report-result__badge { background: #ecfeff; color: #0e7490; }
.report-result--finance .report-result__icon { background: var(--status-success-bg, #dcfce7); color: var(--status-success-fg, #15803d); }
.report-result--finance .report-result__badge { background: var(--status-success-bg, #dcfce7); color: var(--status-success-fg, #15803d); }
.report-result--salesfunnel .report-result__icon { background: #fdf2f8; color: #be185d; }
.report-result--salesfunnel .report-result__badge { background: #fdf2f8; color: #be185d; }

/* Reports directory intro — the "why we moved things" rationale on the hub landing */
.report-directory-intro {
    margin-bottom: 20px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%);
    border: 1px solid #e0e7ff;
    border-radius: var(--radius-lg);
}
.report-directory-intro__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.report-directory-intro__text {
    font-size: 0.85rem;
    line-height: 1.55;
    color: #475569;
    margin: 0;
    max-width: 80ch;
}

/* Hide footer and intercom on reporting page to prevent scroll overhang */
.wrapper:has(.reporting-sidebar) > footer.footer,
.wrapper:has(.admin-report-sidebar) > footer.footer {
    display: none !important;
}
.wrapper:has(.reporting-sidebar) > .intercomLauncher,
.wrapper:has(.admin-report-sidebar) > .intercomLauncher {
    display: none !important;
}

/* Mobile: reporting sidebar stacks above content instead of hiding */
@media (max-width: 991.98px) {
    .reporting-sidebar,
    .admin-report-sidebar {
        display: block;
        width: 100%;
        min-width: 0;
        position: static;
        max-height: none;
        overflow-y: visible;
        margin-bottom: 1rem;
    }
}

.hasSuccessPayments {
    color: green !important;
}

    .hasSuccessPayments:hover {
        color: blue !important;
    }

.hasFailedPayments {
    color: darkorange !important;
}

    .hasFailedPayments:hover {
        color: blue !important;
    }

.thumbnailImage {
    width: 250px;
}

#overviewGraph svg {
    width: 100%;
}

.onlyprint {
    display: none;
}

.tableImage {
    max-width: 80px;
}

/* When .tableImage wraps the _MemberAvatar partial, force a square so the
   absolutely-positioned image and initials have a surface to fill. */
.member-avatar.tableImage {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    font-size: 1.4rem;
    flex-shrink: 0;
}

#reportListPanel {
    overflow-y: scroll;
    min-height: 450px;
}

    #reportListPanel td {
        padding: 0;
    }

        #reportListPanel td a {
            padding: 8px;
            display: block;
        }

.calendarDay {
    text-align: center;
    width: 14.5%;
    float: left;
}

    .calendarDay h3 {
        background-color: #efefef;
        padding: 10px;
        margin: 0;
    }

    .calendarDay .classWrapper {
        border-bottom: solid 1px #ccc;
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }

    .calendarDay .class {
        padding: 15px;
    }

        .calendarDay .class.classImage {
            padding: 0;
        }

        .calendarDay .class.disabled {
            opacity: 0.4;
        }


.monthly .classWrapper {
    border: 0;
    margin: 0;
}

    .monthly .classWrapper .class {
        padding: 5px;
    }

        .monthly .classWrapper .class p {
            margin: 0;
        }

        .monthly .classWrapper .class a {
            display: block;
        }


.calendarBreak {
    width: 100%;
    clear: both;
}

/*reporting bulk email*/
.displaySection {
    display: inline-flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 19%;
    gap: 10px;
    padding: 2.4%;
}

.displayCircle {
    display: inline-flex;
    align-content: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin: 2.5%;
    padding: 10px;
    width: 98%;
    min-width: 90%;
    aspect-ratio: 1 / 1;
}

.displayTotalSection {
    display: inline-flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 19%;
    gap: 3.3rem;
    padding: 1.5%;
    position: relative;
    top: -4%;
}

    .displayTotalSection > b {
        font-size: x-large;
    }

.displayViewersData {
    display: inline-flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 5% 15%;
}

/* #41439 Mobile: the bulk-email report's Opened/Clicked/Unsubscribed/Bounced
   rings sit in fixed width:19% slots (5 across). The ring has min-width:70px, so
   on a narrow container each ring was wider than its 19% slot and the rings
   overlapped. Widen the slots on small screens so the rings sit side by side. */
@media (max-width: 767.98px) {
    .displayTotalSection,
    .displaySection {
        width: 33.333%;
        padding: 2%;
    }
    .displayTotalSection {
        top: 0;
        gap: 1rem;
    }
    /* Keep the ring a compact, fixed size (it otherwise scales to fill the slot
       via min-width:90%, so the widened slots made the rings balloon and span
       the screen). A ~84px ring centred in its slot looks normal on phones. */
    .displayCircle {
        width: 84px;
        min-width: 0;
        max-width: 84px;
        margin: 0 auto;
        padding: 0;
    }
}
@media (max-width: 480px) {
    .displayTotalSection,
    .displaySection {
        width: 50%;
    }
    .displayCircle {
        width: 72px;
        max-width: 72px;
    }
}

.bulk-email-progress {
    width: 100%;
    height: 100% !important;
    min-width: 70px;
    min-height: 70px;
    background: none;
    position: relative;
    aspect-ratio: 1/1;
}

    .bulk-email-progress:hover {
        color: #39f !important;
    }

    .bulk-email-progress:after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 10px solid #ebedef;
        position: absolute;
        top: 0;
        left: 0;
    }

    .bulk-email-progress > span {
        width: 50%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        z-index: 1;
    }

    .bulk-email-progress .progress-left {
        left: 0;
    }

    .bulk-email-progress .progress-bar {
        width: 100%;
        height: 100%;
        background: none;
        border-width: 10px;
        border-style: solid;
        position: absolute;
        top: 0;
    }

    .bulk-email-progress .progress-left .progress-bar {
        left: 100%;
        border-top-right-radius: 80px;
        border-bottom-right-radius: 80px;
        border-left: 0;
        -webkit-transform-origin: center left;
        transform-origin: center left;
    }

    .bulk-email-progress .progress-right {
        right: 0;
    }

        .bulk-email-progress .progress-right .progress-bar {
            left: -100%;
            border-top-left-radius: 80px;
            border-bottom-left-radius: 80px;
            border-right: 0;
            -webkit-transform-origin: center right;
            transform-origin: center right;
        }

    .bulk-email-progress .progress-value {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: none;
        color: inherit;
        text-align: center;
        position: absolute;
        top: 30%;
    }

        .bulk-email-progress .progress-value > small {
            font-size: x-small;
        }

        .bulk-email-progress .progress-value > b {
            font-size: medium;
        }

    .bulk-email-progress .progress-bar {
        border-color: #82b5e9;
    }


@media screen and (max-width: 1100px) {
    .calendarDay {
        width: 100% !important;
    }
}

@media print {

    /* #41711 — Reporting hub reports (e.g. Till History) sit inside the redesign's
       .settings-feature-card (overflow:hidden), a scrollable #reportBody
       (.overflow-auto) and .table-responsive wrappers. overflow:hidden/auto can't
       paginate, so long reports were clipped after the first printed page. Let them
       flow across pages when printing. */
    .settings-feature-card,
    #reportBody,
    .table-responsive {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    /* #41711 — print the report as clean content, not a screenshot of the app.
       Drop the coloured page-header band (club-colour/purple + the reporting
       gradient), flatten the card chrome (shadow/border/rounded corners) and
       whiten the grey app background so the report sits plainly on white paper.
       The report already carries its own <h2> title and date range. */
    .reporting-page-header {
        display: none !important;
    }

    .settings-feature-card {
        background: #fff !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    #reportBody {
        padding: 0 !important;
    }

    .noprint {
        display: none !important;
    }

    .wrapper {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .onlyprint {
        display: block;
    }

    .wrapper {
        margin-top: 0;
    }

    .col-print-1 {
        width: 8%;
        float: left;
    }

    .col-print-2 {
        width: 16%;
        float: left;
    }

    .col-print-3 {
        width: 25%;
        float: left;
    }

    .col-print-4 {
        width: 33%;
        float: left;
    }

    .col-print-5 {
        width: 42%;
        float: left;
    }

    .col-print-6 {
        width: 50%;
        float: left;
    }

    .col-print-7 {
        width: 58%;
        float: left;
    }

    .col-print-8 {
        width: 66%;
        float: left;
    }

    .col-print-9 {
        width: 75%;
        float: left;
    }

    .col-print-10 {
        width: 83%;
        float: left;
    }

    .col-print-11 {
        width: 92%;
        float: left;
    }

    .col-print-12 {
        width: 100%;
        float: left;
    }

    .clubHeader {
        padding: 0 50px;
    }

    .printlogo {
        max-width: 150px !important;
        max-height: 150px !important;
        float: right;
    }

    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

#cancelMembershipPanel {
    display: none;
}

.wide-modal {
    width: 500px;
    max-width: 100%;
}

.ultra-wide-modal {
    width: 1000px;
    max-width: 100%;
}

/* #40653 — the Unipaas onboarding component is a fixed-width form that anchors
   to the left of its mount point. Centre it inside the wide CR Pay modal so it
   doesn't leave a huge dead zone on the right. */
.unipaas-onboarding-wrap {
    max-width: 540px;
    margin: 0 auto;
}

.selectStaff {
    display: none;
}

.tableFilters .narrowInput {
    width: 50px;
}

.table > thead > tr.tableFilters > th {
    vertical-align: middle;
}

.tableFilterHeaderItem {
    display: inline-flex;
    width: 50%;
    flex-wrap: wrap;
    flex-direction: column;
    min-height: 60px;
    justify-content: center;
}

    .tableFilterHeaderItem > div {
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

#filterHeading {
    margin-left: 1em;
    font-size: smaller;
}

.tableFilterItem {
    display: inline-flex;
    width: 16.5%;
    flex-wrap: wrap;
    flex-direction: column;
    min-height: 60px;
    justify-content: center;
    border: none;
}

    .tableFilterItem > div {
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

.tableFilterRangeItem {
    display: inline-flex;
    width: 33%;
    flex-direction: column;
    min-height: 60px;
    justify-content: center;
    border: none;
}


.filterItemGroup {
    display: inline-flex;
}

.filterRangeItemGroup {
    max-height: 36px;

}
.ageSlider {
    display: inline-flex;
    flex-direction: column-reverse;
    max-height: 38px;
    padding: 0.2em 0.5em;
    overflow: clip;
    border: 1px solid #b1b7c1;
    border-radius: 5px;
}
.filterRangeItemGroup > div {
    display: inline-flex;
    width: 33%;
}
    .filterRangeItemGroup > p {
        display: inline-flex;
        margin: 0.5em 0 !important;
        font-style: normal;
        font-size: small;
        align-items: center;
        width: 20%;
    }

    .filterRangeItemGroup > p1 {
        margin: 0.5em !important;
        font-style: normal;
        font-size: small;
    }
.filterRangeItemGroup > div > input[type='range'] {
    min-width: 100%;
}
.filterRangeItemGroup > div > #ageFilterFrom {
    direction: rtl;
}
    .filterRangeItemGroup > div > input[type='range']::-webkit-slider-thumb {
        cursor: -webkit-grab;
    }
.filterRangeItemGroup > div > small {
    padding: 0 5%;
    min-width: max-content;
    font-size: x-small;
    float:right;
    color: var(--cui-info);
}

.filterItemGroup > span {
        width: 10%;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
    }

/* Tagify in filter groups - match other filter dropdowns */
.filterItemGroup > .tagify {
    width: 90%;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 2px 5px;
    border: 1px solid #ced4da;
    border-radius: var(--radius-sm);
    background: #fff;
    align-items: center;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    --tag-bg: #dedede;
    --tag-hover: #ccc;
    --tag-text-color: #222;
    --tag-remove-btn-color: #666;
    --tag-remove-btn-bg--hover: #c77777;
    --tags-border-color: #ced4da;
    --tags-focus-border-color: #86b7fe;
    --tag--max-width: 120px;
}

.filterItemGroup > .tagify .tagify__tag {
    margin: 2px !important;
    max-width: 140px;
}

.filterItemGroup > .tagify .tagify__tag > div {
    max-width: 100%;
}

.filterItemGroup > .tagify .tagify__tag > div > * {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100px !important;
}

.filterItemGroup > .tagify:hover {
    border-color: #adb5bd;
}

.filterItemGroup > .tagify.tagify--focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.filterItemGroup > .filter-multi-select {
    width: 90%;
    height: 40px;
}

.filterItemGroup > .tagify .tagify__input::before {
    color: dimgrey;
    opacity: 1;
    font-weight: 400;
}

/* Tagify in input-groups (bulk edit modals) */
.input-group .tagify {
    flex: 1;
    border: 1px solid #ced4da;
    border-radius: 0 0.25rem 0.25rem 0;
    min-height: 38px;
    background: #fff;
    --tag-bg: #dedede;
    --tag-hover: #ccc;
    --tag-text-color: #222;
    --tag-remove-btn-color: #666;
    --tag-remove-btn-bg--hover: #c77777;
}

.input-group .tagify.tagify--focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Ensure consistent alignment in filter groups */
.filterItemGroup {
    flex-wrap: nowrap;
}

.filterItemGroup > .tagify {
    flex: 1;
    max-width: calc(100% - 30px);
}

/* Remove the expanding hover effect on tags */
.tagify__tag:hover:not([readonly]) div::before,
.tagify__tag:focus div::before {
    --tag-bg-inset: 0 !important;
}

.filterItemGroup > select {
    width: 90%;
}

.filterPinSelected {
    color: black !important;
    transform: rotate(0deg) !important;
}

.filterPin {
    color: #c1c1c1; /*light grey*/
    transform: rotate(90deg);
    width: 2em !important;
    height: 2em !important;
    padding: 9px;
    /*border:grey solid;
    border-width:thin;
    border-radius:20px;*/
}

    .filterPin:hover {
        color: grey !important;
    }

.dataTables_processing {
    z-index: 100000;
}

.floatThead thead {
    background-color: #fff;
}

.filtersTable thead {
    background-color: #fff;
}



form#stripeForm .group {
    background: white;
    box-shadow: 0 7px 14px 0 rgba(49, 49, 93, 0.10), 0 3px 6px 0 rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
}

form#stripeForm label {
    position: relative;
    color: #8898aa;
    font-weight: 300;
    height: 40px;
    line-height: 40px;
    margin-left: 20px;
    display: block;
}

form#stripeForm .group label:not(:last-child) {
    border-bottom: 1px solid #f0f5fa;
}

form#stripeForm .field {
    background: transparent;
    font-weight: 300;
    border: 0;
    color: #31325f;
    outline: none;
    padding-right: 10px;
    padding-left: 10px;
    cursor: text;
    width: 100%;
    height: 40px;
    padding-top: 9px;
}

    form#stripeForm .field::-webkit-input-placeholder {
        color: #cfd7e0;
    }

    form#stripeForm .field::-moz-placeholder {
        color: #cfd7e0;
    }

    form#stripeForm .field:-ms-input-placeholder {
        color: #cfd7e0;
    }

form#stripeForm button {
    float: left;
    display: block;
    background: #666ee8;
    color: white;
    box-shadow: 0 7px 14px 0 rgba(49, 49, 93, 0.10), 0 3px 6px 0 rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-sm);
    border: 0;
    margin-top: 20px;
    font-size: 15px;
    font-weight: 400;
    width: 100%;
    height: 40px;
    line-height: 38px;
    outline: none;
}

    form#stripeForm button:focus {
        background: #555abf;
    }

    form#stripeForm button:active {
        background: #43458b;
    }

form#stripeForm .outcome {
    float: left;
    width: 100%;
    padding-top: 8px;
    min-height: 24px;
    text-align: center;
}

form#stripeForm .success, form#stripeForm .error {
    display: none;
    font-size: 13px;
}

    form#stripeForm .success.visible, form#stripeForm .error.visible {
        display: inline;
    }

form#stripeForm .error {
    color: #e4584c;
}

form#stripeForm .success {
    color: #666ee8;
}

    form#stripeForm .success .token {
        font-weight: 500;
        font-size: 13px;
    }

.modal-header {
    background: #dba437;
    color: #fff;
}

.modal-title {
    color: inherit;
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.2;
}

/* Disable future clicks on membership CTAs after first submission to prevent double-purchase requests */
.membership-cta-disabled,
.membership-cta-btn.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

.form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0;
}

.datetimepicker {
    margin: 0 !important;
    padding: 0 !important;
}

#membershipDetailsGrid p {
    font-size: 1.1em;
    text-align: center;
}

    #membershipDetailsGrid p small {
        font-size: 0.8em;
        opacity: 0.5;
    }

.paymentOption {
    padding: 15px;
    border: solid #bbb 1px;
    text-align: center;
    margin-bottom: 20px;
}

.Inactive, .Renewed, .Cancelled, .completeTask {
    opacity: 0.5;
    text-decoration: line-through;
}

.diaryNotOnShift {
    background: repeating-linear-gradient( -55deg, #222, #222 10px, #333 10px, #333 20px );
    color: #ccc;
    text-align: center;
}

.btn-static {
    cursor: default;
}

    .btn-static:active {
        -moz-box-shadow: inset 0 0 0 white;
        -webkit-box-shadow: inset 0 0 0 white;
        box-shadow: inset 0 0 0 white;
    }

.membershipPanel h3 {
    margin-top: 0;
}

.membershipPanelFeatured {
    background-color: #bce8f1;
}

.table-striped > tbody > tr.NEW {
    background-color: #cae8ca !important;
}

.table-striped > tbody > tr.Seen, .table-striped > tbody > tr.InboundSeen {
    background-color: #fbe9d0 !important;
}

.miniMember.failed, .failed {
    background-color: red !important;
    color: #fff;
}

    .miniMember.failed a, .failed a {
        color: #fff;
    }

.miniMember.staff td, .staff td {
    background-color: #d2faf6 !important;
}

    .miniMember.staff td, .staff td:hover {
        background-color: #b8dbd8 !important;
    }

.miniMember img {
    max-height: 90px;
    margin-top: 10px;
}

.miniMember.left {
    background-color: #fbe9d0;
}

.miniMember.failed a {
    color: #fff;
}

.modalError .modal-header {
    background-color: red;
}

.validation-summary-errors ul {
    margin: 0;
    padding: 0;
    border-top: none;
}

.hideArchive #archiveButton {
    display: none;
}



.very-specific-design {
    width: 1920px;
    height: 932px;
    text-align: center;
    position: relative;
    transform-origin: top left;
}

.memberTitle {
    margin-top: 13px;
}

.memberPhoto {
    max-width: 70px;
    max-height: 50px;
    z-index: 1000;
    float: left;
    margin-right: 10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

/* When .memberPhoto wraps the _MemberAvatar partial, force concrete sizing so
   the absolutely-positioned image and initials have a surface to fill.
   Override the float-y display: declared earlier so the wrapper still floats
   left like the original <img>. */
.member-avatar.memberPhoto {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    display: inline-flex;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    .memberPhoto.hover {
        position: absolute;
        width: 500px;
        max-width: none;
        max-height: none;
    }

.positive {
    color: green;
    float: right;
}

.negative {
    color: red;
    float: right;
}

#viewMessagePanel iframe {
    width: 100%;
    height: 350px;
    border: solid 1px #ededed;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    /*outline: 1px solid slategrey;*/
}

body::-webkit-scrollbar {
    width: 0.8em;
}

.taskComplete {
    background-color: green;
    color: #fff;
}

.taskOverdue {
    background-color: orange;
    color: #fff;
}

.taskCompleted.taskOverdue {
    background-color: red;
    color: #fff;
}

.registerForm .form-control {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    margin-bottom: 20px;
    padding: 30px 10px;
    font-size: 1.5em;
    box-shadow: none;
}

.registerForm .bigBox {
    font-size: 40px;
    text-align: center;
    margin: auto;
    width: 80%;
    color: dimgrey;
    letter-spacing: 0.5ch;
}

.bigText {
    font-size: 20px;
}


.registerForm .bigBox:focus {
    outline: none;
}

.dropdown-menu {
    max-height: 90vh;
    overflow-y: auto;
}

.notInput {
    border: 0;
}

.card {
    width: 100% !important;
    border-radius: 1.25rem !important;
    border-style: none !important;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    overflow: hidden;
}

.card.till-numpad-card {
    height: auto;
}

    .card.border-primary {
        border-style: solid !important;
        border-color: #000 !important;
        border-radius: 1rem !important;
    }

    .card.tillItem {
        border: solid 1px #eee !important;
        border-radius: 0.8rem !important;
    }

    .card.tillSale {
        border: solid 1px #eee !important;
        border-radius: 0.8rem !important;
    }

.card-header {
    border-top-left-radius: 1.25rem !important;
    border-top-right-radius: 1.25rem !important;
    border-top-style: none !important;
}

.card-footer {
    border-bottom-left-radius: 1.25rem !important;
    border-bottom-right-radius: 1.25rem !important;
    border-bottom-style: none !important;
}

.tilecard {
    position: relative;
    cursor: pointer;
}

    .tilecard[badge-success]:after, .tilecard[badge-info]:after, .tilecard[badge-warning]:after, .tilecard[badge-danger]:after, .tilecard[badge-primary]:after {
        position: absolute;
        top: -5px;
        right: -5px;
        font-size: 90%;
        padding: .6em;
        border-radius: var(--radius-pill);
        line-height: 0.75em;
        color: white;
        background: #000;
        text-align: center;
        min-width: 2em;
        font-weight: bold;
    }

    .tilecard[badge-success]:after {
        background-color: rgb(46, 184, 92);
        content: attr(badge-success);
    }

    .tilecard[badge-info]:after {
        background-color: rgb(51, 153, 255);
        content: attr(badge-info);
    }

    .tilecard[badge-warning]:after {
        background-color: rgb(249, 177, 21);
        content: attr(badge-warning);
    }

    .tilecard[badge-danger]:after {
        background-color: rgb(229, 83, 83);
        content: attr(badge-danger);
    }

    .tilecard[badge-primary]:after {
        background-color: rgb(50, 31, 219);
        content: attr(badge-primary);
    }

.scroll-box {
    overflow-x: hidden;
    overflow-y: scroll;
}

div.dataTables_wrapper div.row {
    margin-top: 0 !important;
}

table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* #38909 — opt-in to native +/- dials on numeric inputs that benefit from them
   (e.g. activity edit Duration, attendees, latest booking). Override the global
   spinner-suppression above on a per-input basis using this class. */
input[type="number"].mpe-number-input {
    -moz-appearance: auto;
    appearance: auto;
}

input[type="number"].mpe-number-input::-webkit-outer-spin-button,
input[type="number"].mpe-number-input::-webkit-inner-spin-button {
    -webkit-appearance: auto;
    appearance: auto;
    margin: 0;
}

#filterBox > thead > tr > th {
    border: none;
}

.paymentReference span {
    display: none;
}

.paymentReference:hover span {
    display: inline;
}

#diaryschedule, #schedule, #appointmentschedule {
    padding: 10px 20px;
}

    #diaryschedule .fc-time {
        color: #000;
    }

    #appointmentschedule .fc-time {
        color: #000;
    }

#diary {
    position: relative;
}

.fc-bgevent {
    color: #000 !important;
    font-weight: bold;
    padding: 1px 5px;
    opacity: 1 !important;
}

.fc th {
    padding: 2px;
}

.fc-title span {
    padding-right: 2px;
}

.fc-time-grid .fc-slats td {
    height: 2.2em !important;
}

.bookingFilter {
    width: 100%;
    padding: 7px;
}

.bookBtn {
    cursor: pointer;
}

.fc-event {
    padding: 3px;
    min-height: 15px;
}

.fc-time-grid-event.fc-short .fc-title {
    font-size: 1em;
}

.fc-event .fc-event-time {
    margin-right: 3px;
    font-size: .97em;
    text-align: right;
    margin-left: 2px;
}

.fc-event .fc-event-content {
    font-size: .97em;
}

.fc-event.deleted, .deletedEvent {
    opacity: 0.3;
}

.fc-v-event .fc-event-main {
    color: unset;
}

.fc-v-event .fc-event-main-frame {
    flex-direction: row-reverse;
    font-size: 0.85em;
}

.fc-v-event .fc-event-title-container {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.fc-v-event .fc-event-time {
    flex-shrink: 1;
    overflow: hidden;
    white-space: nowrap;
}

.fc-v-event .titlespan {
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
}

.fc-v-event .spaces {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-list .titlespan {
    float: left;
}

.fc-list .spaces {
    float: right;
}

.fc-v-event .fc-event-title {
    overflow: inherit;
}

.miniCal {
    float: left;
    position: absolute;
    left: 200px;
    top: 8px;
    font-size: 26px;
    cursor: pointer;
}

.modal {
    padding: 0 !important;
}

.fc-list-item {
    color: black !important;
}

.scheduleList {
    height: 900px;
    overflow: auto;
}

.form-control {
    background-color: #fff;
}

.header-fixed {
    position: fixed;
    top: 59px;
    z-index: 100;
}

    .header-fixed th {
        background-color: #fff;
    }

#replyPanel .consentBox {
    display: none !important;
}

.clubVisit {
    background-color: #ffffff;
    padding: 10px;
    text-align: left;
    height: 100%;
    min-height: 115px;
    color: #000;
    border-radius: 10px;
}

    .clubVisit .col-md-5 {
        text-align: left;
    }

    .clubVisit span {
        color: red;
        font-weight: bold;
    }

        .clubVisit span.arriving {
            color: orange;
        }

        .clubVisit span.inclub {
            color: green;
        }

        .clubVisit span.inclubactivity {
            color: #666ee8;
        }

.clubVisitAlert {
    background-color: #fadddd;
    padding: 10px;
    text-align: left;
    height: 100%;
    min-height: 115px;
    color: #000;
    border-radius: 10px;
}

    .clubVisitAlert .col-md-5 {
        text-align: left;
    }

    .clubVisitAlert span {
        color: #893232;
        font-weight: bold;
    }

        .clubVisitAlert span.arriving {
            color: orange;
        }

        .clubVisitAlert span.inclub {
            color: green;
        }

        .clubVisitAlert span.inclubactivity {
            color: #666ee8;
        }

#weeklyGraph, #hourlyGraph {
    height: 180px;
}

.progressbar {
    width: 100%;
    background-color: #efefef;
    height: 30px;
}

    .progressbar .inclub, .progressbar .inclubactivity, .progressbar .onway {
        height: 28px;
        float: left;
    }

    .progressbar .inclub {
        background-color: #ff8230;
    }

    .progressbar .inclubactivity {
        background-color: #666ee8;
    }

.inclubactivity {
    opacity: 0.5;
}

.onway {
    opacity: 0.2;
}

.inclub {
    color: #ff8230;
}

.table > tbody > tr.shortNotification {
    background-color: red !important;
    color: #fff;
}

    .table > tbody > tr.shortNotification a, .table > tbody > tr.shortNotification td {
        color: #fff;
    }

.table-striped > tbody > tr.shortNotification a.btn {
    color: #000;
}

.table > tbody > tr.successShortNotification {
    background-color: var(--cui-success) !important;
    color: #fff;
}

    .table > tbody > tr.successShortNotification a, .table > tbody > tr.successShortNotification td {
        color: #fff;
    }

.table-striped > tbody > tr.successShortNotification a.btn {
    color: #000;
}

.green {
    color: green;
}

.red {
    color: red;
}

.yellow {
    color: darkorange;
}


.sessionList {
    border: solid 2px var(--cui-dark, #4f5d73);
}

    .sessionList img {
        max-height: 70px;
    }

    .sessionList .visitPanel {
        min-width: 300px;
    }

    .sessionList .btn {
        padding: 2px 10px;
        color: #fff;
    }

#checkInModal .modal-dialog {
    width: 90% !important;
}

.modal-body {
    padding-bottom: 20px !important;
}

table.dataTable thead th, table.dataTable thead td {
    padding: 8px;
}

table.dataTable > thead > tr.tableFilters > th, table.dataTable > thead > tr.tableFilters > td {
    padding-right: 8px;
}

table.dataTable .actions {
    text-align: right;
    padding-right: 10px;
    white-space: nowrap;
}

table.compress tr th {
    font-size: 0.85em;
}

table.compress tr td {
    font-size: 0.85em;
}

/* Dashboard Footer */
.dashboard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 1rem;
    gap: 1.5rem;
    margin-right: 80px; /* Space for Intercom widget */
}

.dashboard-footer__social {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e9ecef;
    color: #495057;
    text-decoration: none;
    transition: all 0.2s ease;
}

.dashboard-footer__social a:hover {
    background: #667eea;
    color: #fff;
    transform: translateY(-2px);
}

.dashboard-footer__social a i {
    font-size: 0.875rem;
}

.dashboard-footer__links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #6c757d;
}

.dashboard-footer__links a {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.2s ease;
}

.dashboard-footer__links a:hover {
    color: #495057;
}

.dashboard-footer__divider {
    color: #dee2e6;
}

.dashboard-footer__contact {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.8125rem;
}

.dashboard-footer__contact a {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #495057;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.dashboard-footer__contact a:hover {
    color: #667eea;
}

.dashboard-footer__contact a i {
    font-size: 0.75rem;
    color: #6c757d;
}

/* Lite footer (no contact info) - center the content */
.dashboard-footer--lite {
    justify-content: center;
}

/* Legacy footer support */
footer img {
    width: 32px;
}

footer .footercorner {
    margin-right: 80px;
}

.memberview .badge {
    font-size: 1em;
}

.jssocials-share-link {
    color: #fff !important;
    border-radius: 50% !important;
}

@media screen and (max-width: 768px) {
    .modal-dialog {
        margin: 0;
    }

    .wrapper {
        padding-left: 0 !important;
    }
}

@media screen and (max-width: 992px) {
    /* Dashboard mobile layout — drop GridStack's absolute positioning and
       flow widgets into a 6-col CSS grid. Sizing is driven off the desktop
       `gs-w` attribute so small KPI/nav widgets become tiles (3 of 6 cols
       = 2 per row) and anything wider takes the full mobile row.

       Drag/drop is intentionally not supported on mobile — editing a grid
       layout on a phone is bad UX, and Index.cshtml already runs with
       `disableOneColumnMode: true` for the same reason. */
    #dashboard.grid-stack {
        height: auto !important;
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
    }

    .grid-stack > .grid-stack-item {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 90px;
        transform: none !important;
        /* Flex column so the inner .grid-stack-item-content stretches to
           fill whatever row height CSS Grid's `align-items: stretch`
           hands us. Without this, percentage heights on .h-100 and
           .dash-hero collapse to content height and tiles in the same
           row render at different heights. */
        display: flex !important;
        flex-direction: column !important;
        /* Default: full row. Anything not explicitly small spans 6 cols. */
        grid-column: span 6;
    }

    /* Tiles — small KPI / nav-action widgets render 2 per row. */
    .grid-stack > .grid-stack-item[gs-w="2"],
    .grid-stack > .grid-stack-item[gs-w="3"] {
        grid-column: span 3;
    }

    /* Inner content stretches to the full grid item height so two tiles
       in the same row match (the row sizes to the tallest tile's
       content, then both tiles fill that height). */
    .grid-stack > .grid-stack-item > .grid-stack-item-content {
        position: relative !important;
        inset: auto !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        background: none !important;
        overflow-x: auto;
    }

    /* Compact dashboard header — reclaim vertical space on mobile. */
    .mdash-header {
        padding: 12px 4px 8px;
        margin-bottom: 12px;
        gap: 10px;
    }
    .mdash-name {
        font-size: 1.05rem;
    }
    .mdash-meta {
        font-size: 0.75rem;
    }
    .mdash-header__actions {
        width: 100%;
        justify-content: space-between;
    }

    .fc .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
    }

        .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk {
            margin-bottom: 2px;
        }

        /* #41445 — keep the Day + List(agenda) buttons on phones (was hiding ALL
           view buttons, locking users into agenda). Month/Week/Rota stay hidden
           (too wide for a phone); the resize handler no longer force-switches. */
        .fc .fc-toolbar.fc-header-toolbar .fc-dayGridMonth-button,
        .fc .fc-toolbar.fc-header-toolbar .fc-timeGridWeek-button,
        .fc .fc-toolbar.fc-header-toolbar .fc-resourceTimeGridDay-button {
            display: none;
        }

    .grid-stack-item .nomobileBg {
        background-color: transparent !important;
        border: none;
    }
}


@media screen and (min-width: 768px) {
    .visitPanel {
        max-width: 16vw;
    }
}

.card {
    margin-bottom: 20px;
}

.card .overlay {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    color: #000;
}

@media (max-width: 412px) {
    .overlay {
        overflow: scroll !important;
    }
}

#userListdatatable .badge {
    font-size: 1em;
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.bg-danger.lessdanger {
    opacity: 0.4;
}

@media (max-width: 1399.98px) {
    html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xl:not(.sidebar-end) {
        margin-left: inherit;
    }

    .sidebar:not(.show).sidebar-self-hiding-xl:not(.sidebar-end) ~ * {
        --cui-sidebar-occupy-start: 4rem;
    }
}

@media (max-width: 1199.98px) {
    html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-narrow:not(.sidebar-end), html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-narrow-unfoldable:not(.sidebar-end) {
        margin-left: -16rem;
    }

    .sidebar:not(.show).sidebar-self-hiding-xl:not(.sidebar-end) ~ * {
        --cui-sidebar-occupy-start: 0;
    }
}

.card-body {
    text-overflow: ellipsis;
    overflow-x: hidden;
    width: 100%;
}

.card-body-full-scroll {
    text-overflow: ellipsis;
    overflow-x: auto !important;
    overflow-y: auto !important;
    width: 100%;
}

/* ============================================================
   Dashboard stat widgets — container-query responsive sizing.
   Every .statWidget acts as a size container, and icon/value/label
   scale relative to the widget's own rendered box (cqi/cqh) so
   they read cleanly at any grid cell size. Superseded the older
   fa-2x { height: 0.7em } + span:first-child { width: 0.4em } +
   span { white-space: nowrap } rules which caused icon clipping
   and label overflow at small sizes.
   ============================================================ */

.statWidget {
    container: statw / size;
    overflow: hidden;
}

.statWidget .card-body {
    padding: clamp(0.2rem, 4cqi, 0.55rem);
    gap: clamp(0.05rem, 1.5cqh, 0.25rem);
    overflow: hidden;
    min-height: 0;
    /* `safe center` centres the content when it fits, but falls back to the start
       edge if centering would overflow — so Club Status at 1x1 no longer pushes
       its "Club is currently" line above the rounded card top. */
    justify-content: safe center !important;
}

.statWidget .card-body .fa-2x,
.statWidget .card-body .fa-lg {
    font-size: clamp(0.9rem, min(20cqh, 14cqi), 1.55rem);
    line-height: 1;
    height: auto;
    flex: 0 0 auto;
}

.statWidget .card-body .display-6 {
    font-size: clamp(1rem, min(32cqh, 22cqi), 2rem) !important;
    line-height: 1 !important;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.statWidget .card-body span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
}

.statWidget .card-body small {
    font-size: clamp(0.62rem, 7cqi, 0.8rem);
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Very short widgets (≈1 grid row, ~55–90px): drop the decorative icon
   so the number + label can breathe. */
@container statw (max-height: 90px) {
    .statWidget .card-body .fa-2x,
    .statWidget .card-body .fa-lg {
        display: none !important;
    }
    .statWidget .card-body .display-6 {
        font-size: clamp(1rem, 52cqh, 1.75rem) !important;
    }
}

/* Narrow widgets: let the small label wrap to 2 lines rather than ellipsis. */
@container statw (max-width: 180px) {
    .statWidget .card-body small {
        white-space: normal;
        line-height: 1.1;
    }
}

/* Club Status — carries a stacked "Club is currently" block plus a capacity
   progress bar. Scale its bits too so the whole thing stays legible. */
.statWidget #clubstats {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.statWidget #clubstats .progress {
    margin: 2px 0;
    height: clamp(4px, 1.5cqh, 8px);
}

.statWidget #clubstats p {
    margin: 0;
    font-size: clamp(0.65rem, 8cqi, 0.85rem);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@container statw (max-height: 110px) {
    .statWidget #clubstats .progress { display: none; }
}

/* ============================================================
   Dashboard widget delete button (edit mode). Small white circle
   with a red glyph, revealed via body.dashboard-editing — replaces
   the old solid-red fa-times-circle blob.
   ============================================================ */
.grid-stack-item > .deleteIcon {
    position: absolute;
    top: -9px;
    right: -9px;
    width: 22px;
    height: 22px;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    color: #dc2626;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
    transition: transform 0.12s ease, background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
    z-index: 20;
}

.grid-stack-item > .deleteIcon:hover {
    background: #dc2626;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.32);
}

.grid-stack-item > .deleteIcon:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

body.dashboard-editing .grid-stack-item > .deleteIcon {
    display: flex;
}

/* ============================================================
   Per-tile resize buttons (edit mode). Sit at the bottom-right
   of the tile so users don't have to discover the GridStack drag
   handle. Hidden by default; shown when body.dashboard-editing.
   ============================================================ */
.grid-stack-item > .tile-resize {
    position: absolute;
    bottom: 6px;
    right: 6px;
    display: none;
    gap: 4px;
    z-index: 19;
    pointer-events: none;
}

.grid-stack-item > .tile-resize > .tile-resize__btn {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: #475569;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
    pointer-events: auto;
}

.grid-stack-item > .tile-resize > .tile-resize__btn:hover {
    background: var(--club-colour, #2563eb);
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
}

.grid-stack-item > .tile-resize > .tile-resize__btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

body.dashboard-editing .grid-stack-item > .tile-resize {
    display: flex;
}

/* GridStack's native resize handle renders its default diagonal-arrow glyph
   in the same bottom-right corner as our custom .tile-resize buttons, sitting
   on top of the ↔ button (native handle is z-index 100 vs the buttons' 19) and
   showing as a clipped/overlapping visual on hover. The custom −/+/↔ buttons
   are the discoverable resize UI, so suppress the native glyph while leaving
   the corner drag-to-resize fully functional. !important overrides the
   bundled third-party GridStack rule
   (.grid-stack > .grid-stack-item > .ui-resizable-se/-sw) which carries the
   default glyph and higher selector specificity. */
.grid-stack > .grid-stack-item > .ui-resizable-handle {
    background-image: none !important;
}

.st-mem {
    border-radius: var(--radius-md);
    margin-bottom: 4px;
}
.st-mem:hover {
    cursor: grab;
}

/* ========================================
   Sales Funnel Kanban Board
   ======================================== */

.sf-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    height: calc(100vh - 230px);
    min-height: 300px;
    align-items: stretch;
}

.sf-column {
    flex: 1 1 200px;
    min-width: 200px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.sf-column--dragover {
    border-color: #e8651a;
    box-shadow: 0 0 0 2px rgba(232, 101, 26, 0.15);
    background: #fff7ed;
}

.sf-column__header {
    padding: 12px 14px 10px;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
}

.sf-column__accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 10px 10px 0 0;
}

.sf-column__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 2px;
}

.sf-column__name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-column__count {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    background: #e5e7eb;
    padding: 1px 7px;
    border-radius: 10px;
    flex-shrink: 0;
}

.sf-column__body {
    padding: 8px;
    flex: 1;
    min-height: 80px;
    overflow-y: auto;
}

.sf-card {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid #e5e7eb;
    border-left: 3px solid var(--sf-stage-color, #d1d5db);
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
    position: relative;
}

.sf-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.sf-card:active,
.sf-card[draggable="true"]:active {
    cursor: grabbing;
}

.sf-card--dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}

.sf-card__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sf-card__tasks {
    font-size: 0.75rem;
    font-weight: 600;
    color: #e8651a;
    background: rgba(232, 101, 26, 0.1);
    padding: 1px 6px;
    border-radius: var(--radius-md);
    white-space: nowrap;
    flex-shrink: 0;
}

.sf-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #6b7280;
}

.sf-card__member-no {
    color: #9ca3af;
}

.sf-card__time {
    display: flex;
    align-items: center;
    gap: 3px;
}

.sf-card__time i {
    font-size: 0.75rem;
}

.sf-card__actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
}

.sf-card:hover .sf-card__actions {
    display: flex;
    gap: 4px;
}

.sf-card__action-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: #f3f4f6;
    border-radius: var(--radius-sm);
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}

.sf-card__action-btn:hover {
    background: #e8651a;
    color: #fff;
}

/* #40999 — bulk-select checkbox on each card */
.sf-card__select {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}

.sf-card:hover .sf-card__select,
.sf-card__select:checked,
.sf-card--selected .sf-card__select {
    opacity: 1;
}

.sf-card--selected {
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

.sf-card__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sf-card__photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sf-card__initials {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8651a 0%, #b84e14 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sf-card__info {
    flex: 1;
    min-width: 0;
}

.sf-column__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    text-align: center;
    color: #9ca3af;
    font-size: 0.8rem;
    border: 2px dashed #e5e7eb;
    border-radius: var(--radius-md);
    margin: 4px;
    min-height: 80px;
}

.sf-column__empty i {
    font-size: 1.2rem;
    margin-bottom: 6px;
    opacity: 0.5;
}

/* No-stages empty state */
.sf-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

.sf-empty-state__icon {
    font-size: 2.5rem;
    color: #d1d5db;
    margin-bottom: 16px;
}

.sf-empty-state__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.sf-empty-state__desc {
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* Quick View Panel (reused from Member Index) - already defined in .quick-view-panel */

/* Sales Funnel specific quick-view overrides */
.sf-qv-stage {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.85rem;
}

.sf-qv-stage__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sf-qv-stage__label {
    color: #6b7280;
}

.sf-qv-stage__name {
    font-weight: 600;
    color: #111827;
}

.sf-qv-stage-select {
    font-size: 0.8rem;
    padding: 3px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    margin-left: auto;
}

.sf-qv-stage-select:focus {
    outline: none;
    border-color: #e8651a;
}

.sf-qv-remove-btn {
    font-size: 0.8rem;
    padding: 4px 12px;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    background: #fff;
    color: #b91c1c;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    margin-left: auto;
}

.sf-qv-remove-btn:hover {
    background: #fee2e2;
    border-color: #f87171;
    color: #991b1b;
}

.sf-qv-remove-btn .fa-times {
    font-size: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
    .sf-board {
        gap: 8px;
    }
    .sf-column {
        min-width: 170px;
        flex: 1 0 170px;
    }
}

#contentPages .card {
    border: solid 1px #ddd !important;
}

.card-link {
    text-decoration: none;
    position: absolute;
    top: 2px !important;
    right: 27px;
    opacity: 70%;
}

.slick-prev {
    top: 14px !important;
    left: 4px !important;
    z-index: 100
}

.slick-next {
    top: 14px !important;
    right: 4px !important;
}

.slick-arrow {
    opacity: 50% !important;
}

.slick-list {
    height: 100% !important;
}

.slick-track {
    height: 100% !important;
}

.accordion .nav-item {
    clear: both;
    width: 100%;
    display: block;
    border-bottom: solid 1px #ddd;
    padding: 3px;
}

.container-fluid .nav-tabs {
    clear: both;
}

@media only screen and (max-width: 800px) {

    /* Force table to not be like tables anymore */
    .no-more-tables table,
    .no-more-tables thead,
    .no-more-tables tbody,
    .no-more-tables th,
    .no-more-tables td,
    .no-more-tables tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        .no-more-tables thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .no-more-tables tr {
        border: 1px solid #ccc; 
    }

    .no-more-tables td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: left;
    }

        .no-more-tables td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
        }

        /*
	Label the data
	*/
        .no-more-tables td:before {
            content: attr(data-title);
        }
}

.note-modal-footer {
    height: 60px;
}

.truncate {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

.mobileRelativeWrapper {
    min-height: 100%;
    position: relative;
}

.mobileFooter {
    background: #ffab62;
    width: 100%;
    height: 45px;
    position: fixed;
    bottom: 0;
    left: 0;
    white-space: nowrap;
    border-top: solid 2px var(--cui-body-bg, #fff);
}

    .mobileFooter .leftMenu {
        position: absolute;
        left: 0;
        padding-left: 4rem;
    }

    .mobileFooter .rightMenu {
        position: absolute;
        right: 0;
        padding-right: 2rem;
    }

.btn-checkin {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
    border-style: solid !important;
}

.btn-success {
    color: #fff;
}

.quickDashboardBtn {
    position: relative;
    height: 90px;
    width: 90px;
    margin-top: -60px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: solid 2px var(--cui-primary, #321fdb);
}

.black-bg, .bg-dark, .sidebar, .bg-primary {
    color: #fff !important;
}

.saveContentLink {
    display: none;
}

.editContentLink {
    display: none;
}

#iphoneFrame {
    background-image: url("../img/iphone-holo.png?v=2DKlDlXjY5CYyRxkMV4q4uDwtFU");
    background-repeat: no-repeat;
    background-size: cover;
    height: 1110px;
    width: 750px;
    position: absolute;
    pointer-events: none;
    margin: auto auto;
    right: 0;
    left: 0;
}

#mobileIframe {
    height: 1019px;
    width: 470px;
    top: 46px;
    position: absolute;
    margin: auto auto;
    right: 0;
    left: 0;
}

div.dataTables_wrapper div.dataTables_processing {
    width: 200px !important;
}

/* Style anchors as normal text */
a.nostyle:link {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

a.nostyle:visited {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

/* Intercom Launcher Override */
.intercomLauncher {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 50px !important;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f06522;
    transition: transform 100ms linear, opacity 80ms linear;
}

    .intercomLauncher:focus {
        outline: none;
    }

.intercom-lightweight-app-launcher-icon-open {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

    .intercom-lightweight-app-launcher-icon-open svg {
        width: 28px;
        height: 32px;
    }

        .intercom-lightweight-app-launcher-icon-open svg path {
            fill: rgb(255, 255, 255);
        }

/* JQuery Scrollable */
body.dragging, body.dragging * {
    cursor: move !important;
}

.dragged {
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
}

ol.jqsortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

    ol.jqsortable li.placeholder {
        position: relative;
    }

        ol.jqsortable li.placeholder:before {
            position: absolute;
        }

.fc-timegrid-slot {
    height: 1.8em !important;
}

/* #40196 — PostHog showed thousands of rage clicks on the /Diary calendar
   grid where users clicked an empty slot expecting something to happen and
   got no visual feedback that the cell was even interactive. FullCalendar's
   selectable behaviour is wired up (single click opens the Schedule
   Activity panel), but the grid cells looked dead.

   Give empty time slots and day cells a hover state + pointer cursor so
   the affordance is obvious before the user clicks. Doesn't apply to cells
   that have an event drawn over them — those have their own interactions. */
.fc-timegrid-slot-lane:not(.fc-non-business),
.fc-daygrid-day-frame {
    cursor: pointer;
    transition: background-color 0.08s ease;
}

.fc-timegrid-slot-lane:not(.fc-non-business):hover,
.fc-daygrid-day-frame:hover {
    background-color: rgba(99, 102, 241, 0.06);
}

.fc-timegrid-col:hover .fc-timegrid-col-frame {
    /* Subtle column hint when hovering a day column with no event under the cursor. */
    background-color: transparent;
}

.fc-timegrid-event-short {
    padding: 0;
    line-height: 11px;
}

    .fc-timegrid-event-short .fc-event-time {
        display: none;
    }

.bootstrap-tagsinput .tag {
    font-size: small;
    border-radius: var(--radius-sm);
    padding: 0 6px 3px 6px;
}

    .bootstrap-tagsinput .tag:not([class*=bg-]) {
        background-color: #ebedef;
        color: #000000;
    }

/* Bootstrap TagsInput */
/*.bootstrap-tagsinput {
    display: inline-block;
    vertical-align: middle;
    width: 100%;*/
/*border: 1px solid;*/
/*}

    .bootstrap-tagsinput input {
        direction: ltr;
        border: 0;
        outline: 0;
        background-color: transparent;
        padding: 7px 0 7px 7px;
        margin-top: 3px;
        margin-bottom: 3px;
        width: auto !important;
        min-width: 150px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid var(--cui-input-border-color, #b1b7c1);
        border-radius: var(--radius-sm);
    }

.bootstrap-tagsinput input:focus {
    box-shadow: none;
}

.bootstrap-tagsinput .twitter-typeahead {
    width: auto;
}

.bootstrap-tagsinput .tt-dropdown-menu {
    margin-top: 5px;
    min-width: 200px;
}

.bootstrap-tagsinput .tag {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-right: 6px;
    border: 0;
    border-radius: 100px;
    padding: 7px 14px;
    padding-right: 33px;
    float: left;
    font-size: 13px;
    line-height: 1.6666667;
    font-weight: 400;
    text-transform: none;
    position: relative;
}

.bootstrap-tagsinput .tag:not([class*=bg-]) {
    background-color: #03a9f4;
    color: #fff;
}

.bootstrap-tagsinput .tag [data-role="remove"] {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 14px;
    line-height: 1;
    margin-top: -5.5px;
    opacity: 0.7;
    filter: alpha(opacity=70);
}*/

/* Twitter Typeahead */
.twitter-typeahead {
    width: 100%;
}

.typeahead,
.tt-query,
.tt-hint {
    outline: 0;
}

.tt-hint {
    color: #999;
}

.tt-menu {
    width: 100%;
    margin-top: 1px;
    min-width: 180px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    max-height: 300px;
    overflow-y: auto;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.typeahead-scrollable .tt-menu {
    max-height: 250px;
}

.typeahead-rtl .tt-menu {
    text-align: right;
}

.tt-suggestion {
    padding: 8px 15px;
    cursor: pointer;
}

    .tt-suggestion:hover,
    .tt-suggestion:focus,
    .tt-suggestion.tt-cursor {
        background-color: #f5f5f5;
    }

.tt-dataset-group .tt-suggestion {
    padding-left: 32px;
    padding-right: 32px;
}

.tt-heading {
    font-size: 11px;
    line-height: 1.82;
    padding: 8px 15px;
    text-transform: uppercase;
    display: block;
    font-weight: 700;
    margin-top: 2px;
    margin-bottom: 2px;
}

.typeahead-template .empty-message {
    padding: 8px 15px;
    text-align: center;
}

.diary-schedule a {
    color: #000 !important
}


#hubspot-messages-iframe-container {
    visibility: hidden;
}

.tab-content > .active {
    display: block !important;
}

.pricing-page-container {
    max-width: 900px;
    margin: auto;
    text-align: center;
    margin-top: 2em;
    padding-left: 1em;
    padding-right: 1em;
}

.pricing-grid {
    display: block;
    margin-bottom: 1em;
}

    .pricing-grid .starter-plan {
        background-color: AliceBlue
    }

    .pricing-grid .pro-plan {
        background-color: HoneyDew
    }

    .pricing-grid .enterprise-plan {
        background-color: LavenderBlush
    }

    .pricing-grid > * {
        padding: 1rem;
    }

@media (min-width: 768px) {
    .pricing-grid {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

input[data-input] {
    background-color: white !important;
    color: #2c384af2 !important;
}

.note-editor.note-frame.fullscreen {
    background-color: white;
}
.assistant-btn {
    font-size:x-small;
    margin-top:5px;
    color:white;
}

.chatassistant {
    /*border: solid 1px #000;*/
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, .08);
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: auto;
    scrollbar-width: none;
    /* smooth scrolling on touch devices */
    -webkit-overflow-scrolling: touch;
}

.chatassistant .chat_container div {
    width: 100%;
    height: auto;
    float: left;
}

.chatassistant .note-toolbar{
    display: none;
}

.chatassistant .message_holder {
    margin-bottom: 20px;
}

.chatassistant .message_holder .assistant-icon {
    float: left;
    margin-right: 10px;
    /*color: var(--cui-info);*/
}

.chatassistant .chat_container {
    display:flex;
    flex-direction:column;
    background-color: white;
    overflow: auto;
    padding: 20px 20px 5px 20px;
    height: 100%;
    scrollbar-width: none;
    /* smooth scrolling on touch devices */
    -webkit-overflow-scrolling: touch;
    /*border: solid 1px #000;
    border-radius: 10px 10px 0 0;*/
}

    .chatassistant .chat-input {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .chatassistant .chat {
        padding: 15px;
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, .08);
    }

    .chatassistant .chat p {
        padding: 0;
        margin: 0;
    }

    .chatassistant .user1 {
        float: left;
        border-radius: 0 20px 20px 20px;
        max-width: 90%;
        /*border: 2px solid #000;*/
    }

    .chatassistant .user2 {
        float: right;
        border-radius: 20px 20px 0 20px;
        max-width: 90%;
        /*background-color: rgba(0, 0, 0, 0.08);*/
        background-color: var(--cui-info);
        /*border: 2px solid var(--cui-info);*/
        color:white;
    }
#assistantNewMessage {
    width: 100%;
    min-height: auto;
    height: 100%;
    border-width: 1px 1px 1px 1px;
    border-radius: 10px 10px 10px 10px;
    padding: 10px;
    scrollbar-width: thin;
}
#newMessageButton {
    border-radius: 10px 10px 10px 10px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    max-height: 60px;
}
#acceptMessageButton {
    border-radius: 10px 10px 10px 10px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    max-height: 60px;
}

.cd-main-content {
    text-align: center;
}

    .cd-main-content h1 {
        font-size: 2rem;
        color: #64788c;
        padding: 4em 0;
    }

.cd-btn {
    position: relative;
    display: inline-block;
    padding: 1em 2em;
    background-color: #89ba2c;
    color: #ffffff;
    border-radius: 50em;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
    -webkit-transition: -webkit-box-shadow 0.2s;
    transition: -webkit-box-shadow 0.2s;
    transition: box-shadow 0.2s;
    transition: box-shadow 0.2s, -webkit-box-shadow 0.2s;
}

    .cd-btn:hover {
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
    }

@media only screen and (min-width: 1170px) {
    .cd-main-content h1 {
        font-size: 3.2rem;
    }
}

.cd-panel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    visibility: hidden;
    -webkit-transition: visibility 0s 0.6s;
    transition: visibility 0s 0.6s;
    z-index: 10000000;
}

    .cd-panel::after {
        /* overlay layer */
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        cursor: pointer;
        -webkit-transition: background 0.3s 0.3s;
        transition: background 0.3s 0.3s;
    }

    .cd-panel.cd-panel--is-visible {
        visibility: visible;
        -webkit-transition: visibility 0s 0s;
        transition: visibility 0s 0s;
    }

        .cd-panel.cd-panel--is-visible::after {
            background: rgba(0, 0, 0, 0.6);
            -webkit-transition: background 0.3s 0s;
            transition: background 0.3s 0s;
        }

.cd-panel__header {
    display: flex;
    align-items: center;
    position: fixed;
    width: 90%;
    height: 7%;
    background: rgba(255, 255, 255, 0.96);
    z-index: 2;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    -webkit-transition: -webkit-transform 0.3s 0s;
    transition: -webkit-transform 0.3s 0s;
    transition: transform 0.3s 0s;
    transition: transform 0.3s 0s, -webkit-transform 0.3s 0s;
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
}

    .cd-panel__header h1 {
        padding-left: 5%;
    }

.cd-panel--from-right .cd-panel__header {
    right: 0;
}

.cd-panel--from-left .cd-panel__header {
    left: 0;
}

.cd-panel--is-visible .cd-panel__header {
    -webkit-transition: -webkit-transform 0.3s 0.3s;
    transition: -webkit-transform 0.3s 0.3s;
    transition: transform 0.3s 0.3s;
    transition: transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

@media only screen and (min-width: 768px) {
    .cd-panel__header {
        width: 70%;
    }
}

@media only screen and (min-width: 1170px) {
    .cd-panel__header {
        width: 50%;
    }
}

.cd-panel__close {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 60px;
    /* image replacement */
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

    .cd-panel__close::before, .cd-panel__close::after {
        /* close icon created in CSS */
        content: '';
        position: absolute;
        top: 22px;
        left: 20px;
        height: 3px;
        width: 20px;
        background-color: #424f5c;
        /* this fixes a bug where pseudo elements are slighty off position */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .cd-panel__close::before {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .cd-panel__close::after {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .cd-panel__close:hover {
        background-color: #424f5c;
    }

        .cd-panel__close:hover::before, .cd-panel__close:hover::after {
            background-color: #ffffff;
            -webkit-transition: -webkit-transform 0.3s;
            transition: -webkit-transform 0.3s;
            transition: transform 0.3s;
            transition: transform 0.3s, -webkit-transform 0.3s;
        }

        .cd-panel__close:hover::before {
            -webkit-transform: rotate(220deg);
            transform: rotate(220deg);
        }

        .cd-panel__close:hover::after {
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
        }

.cd-panel--is-visible .cd-panel__close::before {
    -webkit-animation: cd-close-1 0.6s 0.3s;
    animation: cd-close-1 0.6s 0.3s;
}

.cd-panel--is-visible .cd-panel__close::after {
    -webkit-animation: cd-close-2 0.6s 0.3s;
    animation: cd-close-2 0.6s 0.3s;
}

@-webkit-keyframes cd-close-1 {
    0%, 50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}

@keyframes cd-close-1 {
    0%, 50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}

@-webkit-keyframes cd-close-2 {
    0%, 50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}

@keyframes cd-close-2 {
    0%, 50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}

.cd-panel__container {
    position: fixed;
    width: 90%;
    height: 100%;
    top: 0;
    background: #dbe2e9;
    z-index: 1;
    -webkit-transition: -webkit-transform 0.3s 0.3s;
    transition: -webkit-transform 0.3s 0.3s;
    transition: transform 0.3s 0.3s;
    transition: transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
}

.cd-panel--from-right .cd-panel__container {
    right: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.cd-panel--from-left .cd-panel__container {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.cd-panel--is-visible .cd-panel__container {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

@media only screen and (min-width: 768px) {
    .cd-panel__container {
        width: 70%;
    }
}

@media only screen and (min-width: 1170px) {
    .cd-panel__container {
        width: 50%;
    }
}

.cd-panel__content {
    position: absolute;
    top: 7%;
    left: 0;
    width: 100%;
    height: 93%;
    padding: 5%;
    overflow: auto;
    scrollbar-width:thin;
    /* smooth scrolling on touch devices */
    -webkit-overflow-scrolling: touch;
}

.text-grow-anim {
    font-size: 5rem;
    font-weight:bolder;
    color: var(--cui-orange);
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation-name: grow-text;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: grow-text;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes grow-text {
    from {
        font-size:2rem;
    }

    to {
        font-size:5rem;
    }
}

@-moz-keyframes grow-text {
    from {
        font-size: 2rem;
    }

    to {
        font-size: 5rem;
    }
}

/* ========================================
   MODAL RESPONSIVENESS & SCROLLING
   ======================================== */

/* Make all modals responsive and scrollable */
.modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-dialog {
    margin: 1.75rem auto;
    height: auto;
}

.modal-content {
    max-height: none;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
}

.modal-header {
    flex-shrink: 0;
    border-bottom: 1px solid #dee2e6;
}

.modal-body {
    flex: 1 1 auto;
}

.modal-footer {
    flex-shrink: 0;
    border-top: 1px solid #dee2e6;
}

/* For the ultra-wide modals */
.ultra-wide-modal {
    max-width: 90%;
    width: 90%;
}

/* Restore full-height membership modal on desktop */
#editMembershipModal .modal-dialog.ultra-wide-modal,
#editMembershipModal .modal-content {
    max-height: none;
    max-width: 100%;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .modal-dialog {
        max-height: calc(100vh - 1rem);
    }

    .modal-content {
        max-height: calc(100vh - 1rem);
    }

    .ultra-wide-modal {
        max-width: calc(100% - 1rem);
        width: calc(100% - 1rem);
    }
}

/* For very small screens */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        max-height: 100%;
    }

    .modal-content {
        border-radius: 0;
        height: 100vh;
        max-height: 100vh;
    }

    .ultra-wide-modal {
        max-width: 100%;
        width: 100%;
    }
}

/* Ensure content inside modal body is scrollable */
#addMessageModalContent,
#bulkMemberActionModalContent {
    overflow-y: auto;
    max-height: 100%;
}

/* Fix for iOS devices */
@supports (-webkit-touch-callout: none) {
    .modal-body {
        -webkit-overflow-scrolling: touch;
    }
}

/* Message form specific styles */
.modal-body-scroll-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(90vh - 150px); /* Account for modal header and footer */
}

/* Adjust for mobile screens */
@media (max-width: 768px) {
    /* Stack preview and editor on mobile */
    .messageBox .col-md-6 {
        width: 100%;
        margin-bottom: 20px;
    }

    /* Make the form elements more mobile-friendly */
    .form-control, .form-select {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

/* For very small screens */
@media (max-width: 576px) {
    /* Reduce padding on mobile */
    #messageFormContainer {
        padding: 0;
    }
}

/* ==========================================================================
   MESSAGING & CONSENT SELECTION STYLES
   Unified styles for all messaging flows across the application
   ========================================================================== */

/* Choice Cards (New Message vs Draft) */
.choice-card {
    transition: all 0.3s ease;
    border: 2px solid #e9ecef;
}

.choice-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-color: #0d6efd;
}

.swal-choice-modal {
    max-width: 540px !important;
}

.swal-choice-modal .swal2-title {
    text-align: center !important;
    font-size: 1.25rem !important;
    padding: 1.25rem 1.25rem 0 !important;
}

.swal-choice-modal .swal2-html-container {
    margin: 0 !important;
    padding: 0.75rem 1.5rem 1.5rem !important;
}

.swal-choice-modal .choice-card {
    border: 2px solid #dee2e6;
    border-radius: var(--radius-md);
    padding: 1.75rem 1rem !important;
}

.swal-choice-modal .choice-card:hover {
    border-color: var(--club-colour, #0d6efd);
    background-color: #f8f9fa;
}

/* Consent Selection Cards */
.consent-card {
    transition: all 0.3s ease;
    border: 2px solid #e9ecef;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.consent-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #0d6efd;
}

.consent-option-card.selected .consent-card {
    border-color: #0d6efd;
    background-color: #f8f9fa;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
}

/* Draft Message Cards */
.draft-card {
    transition: all 0.3s ease;
    border: 2px solid #e9ecef;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.draft-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #198754;
}

.draft-option-card.selected .draft-card {
    border-color: #198754;
    background-color: #f8f9fa;
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.2);
}

/* Consent Summary Card */
.consent-summary-card {
    border: 2px solid #0d6efd;
    background-color: #f8f9fa;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
}

/* Message Type Button Styles (Email, SMS, etc.) */
.message-type-btn {
    transition: all 0.15s ease-in-out;
    border: 2px solid #ced4da !important;
    background-color: #ffffff !important;
    color: #212529 !important;
    position: relative;
    padding-right: 2.5rem !important;
    cursor: pointer;
}

.message-type-btn i {
    color: #212529 !important;
}

.message-type-btn:hover {
    border-color: #0d6efd !important;
    background-color: #f8f9fa !important;
}

/* Checked/Active state - solid blue background with checkmark */
.message-type-btn-checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15) !important;
}

.message-type-btn-checked i {
    color: #ffffff !important;
}

/* Checkmark icon for checked state */
.message-type-btn-checked::after {
    content: '✓';
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    color: #ffffff;
    font-weight: bold;
    line-height: 1;
}

.message-type-btn-checked:hover {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
}

/* Quick Filter Cards */
.quick-filter-card {
    transition: all 0.3s ease;
    border: 2px solid #e9ecef;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.quick-filter-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #198754;
}

.quick-filter-card .card-title {
    font-weight: 600;
}

.quick-filter-card .btn {
    transition: all 0.2s ease;
}

/* Quick Filter Option Card - Selected State */
.quick-filter-option-card.selected .quick-filter-card {
    border-color: #198754;
    background-color: #f0f9f4;
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.2);
}

/* Quick Filter Modal - Custom Size (legacy, kept for reference) */
.modal-quick-filters {
    max-width: 75%;
    width: 75%;
}

/* Quick Filter Summary Card */
#saveFilterSummaryContent {
    max-height: 400px;
    overflow-y: auto;
}

#saveFilterSummaryContent .mb-2 {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

#saveFilterSummaryContent .mb-2:last-child {
    border-bottom: none;
}

#saveFilterSummaryContent strong {
    color: #495057;
    font-weight: 600;
    min-width: 120px;
    display: inline-block;
}

/* ==========================================================================
   SWEETALERT2 CUSTOM STYLING
   Modern, branded alerts using club colours
   ========================================================================== */

/* Backdrop - blurred glass effect. Scoped to .swal2-backdrop-show so toast
   containers (which have no backdrop) don't pick up the blur — without this
   the toast's corner container was visibly blurring the area behind it,
   reading as "this part of the page is dimmed" rather than a discrete
   notification. #40598 */
.swal2-container.swal2-backdrop-show {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.45) !important;
}

/* Popup container - modern rounded card */
.swal2-popup {
    border-radius: var(--radius-xl) !important;
    padding: 2em 1.5em 1.5em !important;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    font-family: inherit !important;
}

/* Title styling */
.swal2-title {
    font-size: 1.5em !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    padding: 0 !important;
    margin-bottom: 0.5em !important;
}

/* Text/HTML content */
.swal2-html-container {
    font-size: 1rem !important;
    color: #4b5563 !important;
    line-height: 1.6 !important;
    margin: 0.5em 1em 1em !important;
}

/* Icon sizing and colors — scoped to modal popups; toasts keep SweetAlert2's compact 2em icon */
.swal2-popup:not(.swal2-toast) .swal2-icon {
    width: 5em !important;
    height: 5em !important;
    margin: 1.5em auto 1em !important;
    border-width: 3px !important;
}

.swal2-icon.swal2-success {
    border-color: #10b981 !important;
    color: #10b981 !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #10b981 !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.swal2-icon.swal2-error {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: #ef4444 !important;
}

.swal2-icon.swal2-warning {
    border-color: #f59e0b !important;
    color: #f59e0b !important;
}

.swal2-icon.swal2-info {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}

.swal2-icon.swal2-question {
    border-color: #6366f1 !important;
    color: #6366f1 !important;
}

/* Button container */
.swal2-actions {
    margin-top: 1.25em !important;
    gap: 0.75em !important;
}

/* Base button styles - modern refined */
.swal2-styled {
    border-radius: var(--radius-md) !important;
    padding: 0.625em 1.5em !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
    min-width: 90px !important;
    border: none !important;
}

.swal2-styled:focus {
    box-shadow: 0 0 0 3px rgba(var(--club-color-rgb, 59, 130, 246), 0.4) !important;
    outline: none !important;
}

/* Confirm button - uses club colour with fallback. Text colour is computed contrast
   so it stays readable on light club brand colours (#38928, #38910, #38932). */
.swal2-confirm {
    background: var(--cui-nav-link-color, var(--club-button, var(--club-color, #2563eb))) !important;
    color: var(--cui-nav-link-color-text, #fff) !important;
}

.swal2-confirm:hover {
    background: var(--cui-nav-link-color, var(--club-button, var(--club-color, #2563eb))) !important;
    filter: brightness(0.92) !important;
}

.swal2-confirm:active {
    filter: brightness(0.88) !important;
}

/* Cancel button - text style, no background */
.swal2-cancel {
    background: transparent !important;
    color: #6b7280 !important;
}

.swal2-cancel:hover {
    background: #f3f4f6 !important;
    color: #374151 !important;
}

/* Deny button - subtle red */
.swal2-deny {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

.swal2-deny:hover {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}

/* Close button */
.swal2-close {
    color: #9ca3af !important;
    font-size: 2em !important;
    transition: color 0.2s ease !important;
}

.swal2-close:hover {
    color: #4b5563 !important;
}

/* Input fields in alerts */
.swal2-input,
.swal2-textarea,
.swal2-select {
    border-radius: 10px !important;
    border: 2px solid #e5e7eb !important;
    padding: 0.75em 1em !important;
    font-size: 1rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: var(--cui-nav-link-color, var(--club-color, #3b82f6)) !important;
    box-shadow: 0 0 0 3px rgba(var(--club-color-rgb, 59, 130, 246), 0.15) !important;
    outline: none !important;
}

/* Footer text */
.swal2-footer {
    border-top: 1px solid #e5e7eb !important;
    color: #6b7280 !important;
    font-size: 0.875rem !important;
    margin-top: 1.5em !important;
    padding-top: 1em !important;
}

/* Animation overrides - smoother */
.swal2-show {
    animation: swal2-show-custom 0.25s ease-out !important;
}

.swal2-hide {
    animation: swal2-hide-custom 0.2s ease-in !important;
}

@keyframes swal2-show-custom {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes swal2-hide-custom {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Toast notifications - compact pill style */
.swal2-popup.swal2-toast {
    border-radius: 50px !important;
    padding: 0.75em 1.25em !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.swal2-popup.swal2-toast .swal2-title {
    font-size: 0.95rem !important;
    margin: 0 !important;
}

/* Loading state */
.swal2-loading .swal2-styled.swal2-confirm {
    background: var(--cui-nav-link-color, var(--club-color, #3b82f6)) !important;
}

/* Timer progress bar - uses club colour */
.swal2-timer-progress-bar {
    background: var(--cui-nav-link-color, var(--club-color, #3b82f6)) !important;
}

/* Diary modal variant — left-aligned content, compact title */
.swal-diary-modal {
    max-width: 480px !important;
    width: 100% !important;
}
.swal-diary-modal .swal2-html-container {
    text-align: left !important;
    margin: 0 !important;
    padding: 0 1.25rem 1.25rem !important;
}
.swal-diary-modal .swal2-title {
    text-align: left !important;
    padding: 1.25rem 1.25rem 0.5rem !important;
    font-size: 1.1em !important;
}
.swal-diary-modal .swal2-close {
    top: 0.75rem !important;
    right: 0.75rem !important;
}

/* ==========================================================================
   SETTINGS HUB
   Card grid layout for the /Settings page
   ========================================================================== */

/* ==========================================================================
   SETTINGS HUB
   ========================================================================== */

.settings-hub-category {
    margin-bottom: 2rem;
}

/* Category header — mixed case, subtle left accent */
.settings-hub-category-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 1rem;
    padding-left: 0.75rem;
    border-left: 3px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* Category accent colours (left border) */
.settings-hub-category-label--account { border-left-color: #3b82f6; }
.settings-hub-category-label--programmes { border-left-color: #6366f1; }
.settings-hub-category-label--people { border-left-color: #10b981; }
.settings-hub-category-label--comms { border-left-color: #f59e0b; }
.settings-hub-category-label--finance { border-left-color: #ef4444; }
.settings-hub-category-label--tools { border-left-color: #64748b; }

/* Card — clean with subtle lift on hover */
.settings-hub-card {
    display: flex;
    align-items: center;
    padding: 1rem 1.125rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
    height: 100%;
}

.settings-hub-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    border-color: #d1d5db;
    text-decoration: none;
    color: inherit;
}

/* Card with attention needed — subtle left accent */
.settings-hub-card--attention {
    border-left: 3px solid #f59e0b;
}

.settings-hub-card--disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

/* #39615 — Locked variant of the settings hub card. Visually identical to an
   active card so the user reads it as a clickable preview link, just with a
   LOCKED badge as the cue. Click navigates to the feature page where the icy
   upgrade overlay engages. Replaces the older --disabled treatment which
   greyed cards out and blocked clicks. */
.settings-hub-card--hero.settings-hub-card--locked .badge-ice-locked {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.settings-hub-card--locked .badge-ice-locked {
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
}

/* Icon container */
.settings-hub-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 0.625rem;
    margin-right: 1rem;
    font-size: 1.0625rem;
    color: #374151;
}

.settings-hub-icon--disabled {
    background: #f9fafb;
    color: #9ca3af;
}

/* Category icon colours */
.settings-hub-icon--account { background: #eff6ff; color: #3b82f6; }
.settings-hub-icon--programmes { background: #eef2ff; color: #6366f1; }
.settings-hub-icon--people { background: #ecfdf5; color: #10b981; }
.settings-hub-icon--comms { background: #fffbeb; color: #f59e0b; }
.settings-hub-icon--finance { background: #fef2f2; color: #ef4444; }
.settings-hub-icon--tools { background: #f8fafc; color: #64748b; }

.settings-hub-card-body {
    flex: 1;
    min-width: 0;
}

.settings-hub-card-title {
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.3;
    color: #1f2937;
}

.settings-hub-card-desc {
    font-size: 0.8125rem;
    color: #9ca3af;
    margin-top: 0.125rem;
    line-height: 1.4;
}

.settings-hub-card-match {
    font-size: 0.75rem;
    color: #e8651a;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.settings-hub-card-match i {
    font-size: 0.75rem;
}

.settings-hub-chevron {
    flex-shrink: 0;
    margin-left: 0.75rem;
    color: #d1d5db;
    font-size: 0.75rem;
    transition: transform 0.15s ease, color 0.15s ease;
}

.settings-hub-card:hover .settings-hub-chevron {
    color: #9ca3af;
    transform: translateX(2px);
}

/* Attention dot — small indicator on card */
.settings-hub-attention-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

/* Attention pill — inline label inside card body, replaces opaque dot */
.settings-hub-attention-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.2rem 0.55rem;
    background: #fef3c7;
    color: #92400e;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.settings-hub-attention-pill i {
    font-size: 0.75rem;
}

/* Category attention count — pill badge */
.settings-hub-category-badge {
    font-size: 0.75rem;
    font-weight: 500;
    color: #92400e;
    background: #fef3c7;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
}

/* Tier section headings — same treatment for every section after #38985 so the
   page reads as peer settings groups, not "real settings + appendix". */
.settings-hub-tier {
    margin-bottom: 2.25rem;
}

.settings-hub-tier-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #374151;
    margin: 0 0 0.875rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

/* Compact-list tier (config subgroups: People & Access, Communications,
   Finance & Billing) keeps the dense list look it had in the old right column,
   just hosted inline now. */
.settings-hub-tier--list {
    margin-bottom: 1.75rem;
}

/* Hero cards for Tier 1 (Offerings) */
.settings-hub-card--hero {
    padding: 1.25rem;
    flex-direction: column;
    text-align: center;
    gap: 0;
}

.settings-hub-card--hero .settings-hub-icon {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
    margin-right: 0;
    margin-bottom: 0.75rem;
}

.settings-hub-card--hero .settings-hub-card-body {
    text-align: center;
}

.settings-hub-card--hero .settings-hub-card-title {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.settings-hub-card--hero .settings-hub-card-desc {
    font-size: 0.8125rem;
}

.settings-hub-card--hero .settings-hub-chevron {
    display: none;
}

.settings-hub-card--hero .settings-hub-card-match {
    justify-content: center;
}

.settings-hub-card--hero .settings-hub-attention-dot {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    margin-left: 0;
}

.settings-hub-card--hero {
    position: relative;
}

/* Hero icon colours — use the same palette as category icons */
.settings-hub-icon--hero-programmes { background: #eef2ff; color: #6366f1; }

/* #38985 — `.settings-hub-config-column`, `.settings-hub-config-column-heading`,
   `.settings-hub-config-group` and `.settings-hub-config-group-heading` retired
   when the right column was unwound. The compact-list items now sit inside
   peer `.settings-hub-tier--list` sections in the main scroll, so the layout
   classes that wrapped them previously aren't rendered any more. */

/* 2-column grid on desktop, single column on narrower viewports — keeps the
   list dense without forcing one long vertical stack per section. */
.settings-hub-config-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.125rem 1rem;
}

@media (max-width: 767.98px) {
    .settings-hub-config-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

.settings-hub-config-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #374151;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
    border-radius: 0.375rem;
}

.settings-hub-config-item:hover {
    background: #f9fafb;
    color: #111827;
    text-decoration: none;
}

.settings-hub-config-item i:first-child,
.settings-hub-config-item svg:first-child {
    font-size: 0.8125rem;
    color: #9ca3af;
    width: 1.125rem;
    text-align: center;
    flex-shrink: 0;
}

.settings-hub-config-item-name {
    flex: 1;
    min-width: 0;
}

.settings-hub-config-item-match {
    font-size: 0.75rem;
    color: #e8651a;
    display: none;
}

.settings-hub-config-item-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.settings-hub-config-item-chevron {
    font-size: 0.75rem;
    color: #d1d5db;
    flex-shrink: 0;
}

.settings-hub-config-item:hover .settings-hub-config-item-chevron {
    color: #9ca3af;
}

.settings-hub-config-item--disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* #38985 — `.settings-hub-config-column .settings-hub-config-item` override
   removed when the right column was unwound; base padding now covers the
   inline-tier rendering. */

/* Sidebar tier labels - collapsible */
.settings-sidebar-tier {
    margin-bottom: 0.25rem;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.settings-sidebar-tier:first-child {
    border-top: none;
    padding-top: 0;
}

.settings-sidebar-tier-label {
    padding: 0.45rem 0.5rem;
    margin-bottom: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease;
    user-select: none;
}

.settings-sidebar-tier-label:hover {
    background: #eef0f3;
    color: #6b7280;
}

.settings-sidebar-tier-chevron {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    color: #d1d5db;
}

.settings-sidebar-tier-label[aria-expanded="true"] .settings-sidebar-tier-chevron {
    transform: rotate(90deg);
}

.settings-sidebar-tier-body {
    overflow: hidden;
}

.settings-sidebar-tier-body[data-collapsed="true"] {
    display: none;
}

/* Auto-expand tier that contains the active item */
.settings-sidebar-tier--has-active .settings-sidebar-tier-label {
    color: #6b7280;
}

.settings-sidebar-tier--has-active .settings-sidebar-tier-chevron {
    color: #9ca3af;
}

/* (progress card now in sidebar) */

/* Hidden settings section */
.settings-hub-hidden-section {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e5e7eb;
}

.settings-hub-hidden-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #9ca3af;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.375rem 0;
    transition: color 0.15s ease;
}

.settings-hub-hidden-section-header:hover {
    color: #6b7280;
}

.settings-hub-hidden-section-header i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.settings-hub-hidden-section-header[aria-expanded="true"] i.fa-chevron-right {
    transform: rotate(90deg);
}

.settings-hub-card--hidden {
    opacity: 0.45;
    border-style: dashed;
}

.settings-hub-card--hidden:hover {
    opacity: 0.7;
}

/* Customise mode */
.settings-hub-card--customise {
    position: relative;
}

.settings-hub-toggle-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 1;
    padding: 0;
    line-height: 1;
}

.settings-hub-toggle-btn--hide:hover {
    background: #fee2e2;
    border-color: #ef4444;
    color: #ef4444;
}

.settings-hub-toggle-btn--show {
    background: #ecfdf5;
    border-color: #10b981;
    color: #10b981;
}

.settings-hub-toggle-btn--show:hover {
    background: #d1fae5;
    border-color: #059669;
    color: #059669;
}

/* Single-column layout after #38985 — was a two-column flex (cards left,
   sticky Configuration sidebar right). Sections now stack as peers. */
.settings-hub-layout {
    display: block;
}

.settings-hub-main {
    min-width: 0;
}

/* Settings header row */
.settings-hub-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.settings-hub-customise-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #9ca3af;
    text-decoration: none;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
}

.settings-hub-customise-link:hover {
    color: #374151;
    background: #f3f4f6;
}

/* Page header cog icon */
.page-header-cog {
    font-size: 0.6em;
    color: #6b7280;
}

/* Settings hub search bar (inside dark header) */
.settings-hub-search {
    position: relative;
    width: 240px;
}

.settings-hub-search__input {
    width: 100%;
    padding: 0.4375rem 2rem 0.4375rem 2.125rem;
    font-size: 0.8125rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.settings-hub-search__input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.settings-hub-search__input:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.settings-hub-search__icon {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    pointer-events: none;
}

.settings-hub-search__clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    display: none;
}

.settings-hub-search__clear:hover {
    color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 767px) {
    .settings-hub-search {
        width: 100%;
    }
}

/* Sidebar variant — light background context */
.settings-sidebar-search {
    width: 100%;
    margin-bottom: 0.75rem;
}

.settings-sidebar-search .settings-hub-search__input {
    background: #fff;
    border-color: #e5e7eb;
    color: #1f2937;
    padding: 0.375rem 2rem 0.375rem 2rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-md);
}

.settings-sidebar-search .settings-hub-search__input::placeholder {
    color: #9ca3af;
}

.settings-sidebar-search .settings-hub-search__input:focus {
    border-color: var(--admin-club-color, #667eea);
    background: #fff;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--admin-club-color, #667eea) 15%, transparent);
}

.settings-sidebar-search .settings-hub-search__icon {
    color: #9ca3af;
    font-size: 0.75rem;
    left: 0.625rem;
}

.settings-sidebar-search .settings-hub-search__clear {
    color: #9ca3af;
    font-size: 0.75rem;
    right: 0.375rem;
}

.settings-sidebar-search .settings-hub-search__clear:hover {
    color: #374151;
}

/* Sidebar entity search results */
.settings-sidebar-results:empty {
    display: none;
}

.settings-sidebar-results {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.settings-sidebar-results__group {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    padding: 0.375rem 0.5rem 0.125rem;
}

.settings-sidebar-results__group:first-child {
    padding-top: 0;
}

.settings-sidebar-results__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.5rem;
    font-size: 0.8125rem;
    color: #374151;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.12s;
}

.settings-sidebar-results__item:hover {
    background: #f3f4f6;
    text-decoration: none;
    color: #1f2937;
}

.settings-sidebar-results__item span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-sidebar-results__icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 0.75rem;
    color: #e8651a;
}

.settings-sidebar-results__img {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

/* Sidebar loading indicator */
.settings-sidebar-loading {
    display: none;
    font-size: 0.75rem;
    color: #9ca3af;
    padding: 0.5rem;
    text-align: center;
}

.settings-sidebar-loading i {
    color: #e8651a;
    margin-right: 0.25rem;
}

/* Data entity search results */
.settings-hub-data-results {
    margin-bottom: 2rem;
    display: none;
}

.settings-hub-data-results__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
    padding-left: 0.75rem;
    border-left: 3px solid #e8651a;
}

.settings-hub-data-results__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
}

@media (max-width: 991.98px) {
    .settings-hub-data-results__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .settings-hub-data-results__list {
        grid-template-columns: 1fr;
    }
}

/* Group label — spans full grid width */
.settings-hub-data-group {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    padding: 0.5rem 0 0.125rem;
}

.settings-hub-data-group:first-child {
    padding-top: 0;
}

.settings-hub-data-group > .fas {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-right: 0.125rem;
}

.settings-hub-data-result {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.settings-hub-data-result:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    border-color: #d1d5db;
    text-decoration: none;
    color: inherit;
}

.settings-hub-data-result__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7ed;
    color: #e8651a;
    border-radius: 0.375rem;
    margin-right: 0.625rem;
    font-size: 0.75rem;
}

.settings-hub-data-result__img {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 0.375rem;
    margin-right: 0.625rem;
    object-fit: cover;
}

.settings-hub-data-result__name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    font-size: 0.8125rem;
    color: #1f2937;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-hub-data-result__chevron {
    flex-shrink: 0;
    margin-left: 0.5rem;
    color: #d1d5db;
    font-size: 0.75rem;
}

/* Config callout — shown in main area when only config items match search */
.settings-hub-config-callout {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: var(--radius-md);
    color: #0369a1;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.settings-hub-config-callout i {
    font-size: 1rem;
}

/* No results state */
.settings-hub-no-results {
    text-align: center;
    padding: 3rem 1rem;
    display: none;
}

.settings-hub-no-results__icon {
    font-size: 2rem;
    color: #d1d5db;
    margin-bottom: 0.75rem;
}

.settings-hub-no-results__text {
    font-size: 0.9375rem;
    color: #6b7280;
    font-weight: 500;
}

.settings-hub-no-results__hint {
    font-size: 0.8125rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

/* Loading spinner for data search */
.settings-hub-data-loading {
    text-align: center;
    padding: 1rem;
    color: #9ca3af;
    font-size: 0.8125rem;
    display: none;
}

/* ==========================================================================
   FORM VALIDATION — visible red ring on input-groups (#39125)
   ==========================================================================
   Bootstrap's .is-invalid only ever paints the border on the .form-control
   itself; when the control sits inside an .input-group with addon icons or
   buttons, the addon's neutral border fights the invalid colour and the
   visual ring is easy to miss. The JS sets .is-invalid-group on the wrapper
   so the whole group reads as invalid regardless of layout. */
.is-invalid-group {
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 1px var(--cui-form-invalid-border-color, #e55353);
}
.is-invalid-group > .form-control,
.is-invalid-group > .input-group-text,
.is-invalid-group > .btn {
    border-color: var(--cui-form-invalid-border-color, #e55353) !important;
}

/* ==========================================================================
   ADMIN SIDEBAR – Modern light overlay drawer with club colour accent
   ========================================================================== */

/* Always hidden by default (no breakpoint-specific behaviour) */
html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding {
    margin-left: -16rem;
}

/* Prevent content from shifting when sidebar opens */
.sidebar:not(.sidebar-end) ~ * {
    --cui-sidebar-occupy-start: 0rem;
}

/* Remove narrow-mode brand toggling — sidebar is always full-width now */
.sidebar-brand-narrow {
    display: none !important;
}

.sidebar-brand-full {
    display: block !important;
}

/* --- Light sidebar base (high specificity to beat legacy #sidebar rules) --- */
#sidebar.admin-sidebar {
    --cui-sidebar-width: 15.5rem;
    --cui-sidebar-bg: #f9fafb;
    --cui-sidebar-nav-link-color: #374151;
    --cui-sidebar-nav-link-icon-color: #9ca3af;
    --cui-sidebar-nav-link-hover-color: #111827;
    --cui-sidebar-nav-link-hover-bg: #f3f4f6;
    --cui-sidebar-nav-link-hover-icon-color: #6b7280;
    --cui-sidebar-nav-link-active-color: var(--admin-club-color, #667eea);
    --cui-sidebar-nav-link-active-icon-color: var(--admin-club-color, #667eea);
    --cui-sidebar-nav-link-active-bg: color-mix(in srgb, var(--admin-club-color, #667eea) 12%, #f9fafb);
    --cui-sidebar-nav-link-disabled-color: #d1d5db;
    --cui-sidebar-nav-link-disabled-icon-color: #d1d5db;
    --cui-sidebar-brand-bg: var(--admin-club-color, #667eea);
    --cui-sidebar-border-color: #e5e7eb;
    width: 15.5rem;
    background-color: #f9fafb !important;
    background-image: none !important;
    border-right: 1px solid #f0f0f2;
    color: #374151 !important;
}

/* Override CoreUI's default -16rem hide margin to match our 15.5rem width */
html:not([dir="rtl"]) #sidebar.admin-sidebar:not(.show).sidebar-self-hiding:not(.sidebar-end) {
    margin-left: calc(-1 * (15.5rem + 2px));
}

/* Only show shadow when sidebar is visible — prevents bleed when hidden */
#sidebar.admin-sidebar.show {
    box-shadow: 1px 0 8px rgba(0, 0, 0, 0.06), 4px 0 24px rgba(0, 0, 0, 0.03);
}

/* Ensure sidebar is flex column so user section pins to bottom */
#sidebar.admin-sidebar {
    display: flex !important;
    flex-direction: column !important;
}

#sidebar.admin-sidebar .sidebar-nav {
    /* #41164 — basis 0 + min-height 0 let this flex item shrink below its content
       height so it becomes a real scroll area at short viewport heights (otherwise
       the bottom items, incl. Settings, overflow off-screen unreachably). The
       native overflow itself is forced on in _DashboardLayout (CoreUI keeps it
       visible). */
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

#sidebar.admin-sidebar .sidebar-nav:hover {
    scrollbar-color: #d1d5db transparent;
}

#sidebar.admin-sidebar .sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

#sidebar.admin-sidebar .sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar.admin-sidebar .sidebar-nav::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: var(--radius-sm);
}

#sidebar.admin-sidebar .sidebar-nav:hover::-webkit-scrollbar-thumb {
    background: #d1d5db;
}

#sidebar.admin-sidebar .sidebar-nav:hover::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Payments app sub-menu panel */
.payments-nav-trigger {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

#sidebar .payments-submenu {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Hide app sub-menu triggers on pages that already have their own sub-sidebar */
body.has-sub-sidebar #payments-nav-trigger,
body.has-sub-sidebar #communication-nav-trigger {
    display: none;
}

/* Brand / logo area — compact inline (SaaS-style) */
#sidebar.admin-sidebar .sidebar-brand {
    position: relative;
    background: transparent;
    padding: 0.875rem 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #eef0f2;
}

#sidebar.admin-sidebar .sidebar-brand-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
    text-align: left;
    min-width: 0;
}

#sidebar.admin-sidebar .sidebar-brand img {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid color-mix(in srgb, var(--admin-club-color, #667eea) 20%, transparent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#sidebar.admin-sidebar .sidebar-club-name {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
}

/* Close button — top-right of brand area */
#sidebar.admin-sidebar .sidebar-close {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 0.8rem;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    z-index: 1;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1;
}

#sidebar.admin-sidebar .sidebar-close:hover {
    background: #f3f4f6;
    color: #374151;
}

/* --- Navigation links --- */
#sidebar.admin-sidebar .sidebar-nav {
    padding: 0.5rem 0.5rem;
}

#sidebar.admin-sidebar .sidebar-nav .nav-item {
    margin-bottom: 1px;
}

/* Section labels in sidebar */
#sidebar.admin-sidebar .sidebar-nav-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    padding: 0.75rem 0.75rem 0.35rem;
    margin-top: 0.25rem;
    border-top: 1px solid #eef0f2;
    list-style: none;
}

#sidebar.admin-sidebar .sidebar-nav-section-label:first-child {
    border-top: none;
    margin-top: 0;
}

/* Visual divider between sidebar nav tiers (no label text) */
#sidebar.admin-sidebar .sidebar-nav-divider {
    border-top: 1px solid #e2e5e9;
    margin: 0.6rem 0.75rem;
    list-style: none;
}

#sidebar.admin-sidebar .sidebar-nav .nav-link {
    color: #374151 !important;
    background: transparent !important;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.6rem 0.75rem 0.6rem 1rem;
    border-radius: var(--radius-md);
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
}

#sidebar.admin-sidebar .sidebar-nav .nav-link .nav-icon {
    color: #9ca3af !important;
    flex: 0 0 1.25rem;
    width: 1.25rem;
    text-align: center;
    font-size: 1.05rem;
    line-height: inherit;
    flex-shrink: 0;
    transition: color 0.15s ease;
    margin: 0 !important;
}

#sidebar.admin-sidebar .sidebar-nav .nav-link span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sidebar.admin-sidebar .sidebar-nav .nav-link:hover {
    background: #eff0f3 !important;
    color: #111827 !important;
    text-decoration: none;
}

#sidebar.admin-sidebar .sidebar-nav .nav-link:hover .nav-icon {
    color: #6b7280 !important;
}

/* Active state — club colour accent with left bar */
#sidebar.admin-sidebar .sidebar-nav .nav-link.active {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 12%, #f9fafb) !important;
    color: var(--admin-club-color, #667eea) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--admin-club-color, #667eea);
}

#sidebar.admin-sidebar .sidebar-nav .nav-link.active .nav-icon {
    color: var(--admin-club-color, #667eea) !important;
}

/* Core nav items — icon gets a soft tinted background pill */
#sidebar.admin-sidebar .sidebar-nav .nav-link.nav-link--core {
    font-weight: 500;
}

#sidebar.admin-sidebar .sidebar-nav .nav-link.nav-link--core .nav-icon-bg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 12%, #f9fafb);
    flex-shrink: 0;
}

#sidebar.admin-sidebar .sidebar-nav .nav-link.nav-link--core .nav-icon-bg .nav-icon {
    color: var(--admin-club-color, #667eea) !important;
    font-size: 0.8rem;
}

#sidebar.admin-sidebar .sidebar-nav .nav-link.nav-link--core:hover .nav-icon-bg {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 20%, #f9fafb);
}

#sidebar.admin-sidebar .sidebar-nav .nav-link.nav-link--core.active .nav-icon-bg {
    background: var(--admin-club-color, #667eea);
}

#sidebar.admin-sidebar .sidebar-nav .nav-link.nav-link--core.active .nav-icon-bg .nav-icon {
    color: #fff !important;
}

/* Disabled nav items */
#sidebar.admin-sidebar .sidebar-nav .nav-link.disabled {
    color: #d1d5db !important;
    pointer-events: none;
}

#sidebar.admin-sidebar .sidebar-nav .nav-link.disabled {
    background: transparent !important;
}

#sidebar.admin-sidebar .sidebar-nav .nav-link.disabled .nav-icon {
    color: #d1d5db !important;
}

/* Badge polish — count pills and beta tags */
#sidebar.admin-sidebar .sidebar-nav .nav-link .badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
}

/* ─────────────────────────────────────────────────────────────────────
   .badge.bg-warning — canonical soft amber.
   Pre-2026-05-01: bg-warning rendered as the saturated CoreUI amber
   (#f9b115) outside the sidebar but as a soft amber inside it, so the
   same word ("98", "Draft" etc) appeared in two different ambers
   depending on where it sat. Picking the soft amber globally aligns
   the whole system to the modern look. The sidebar-only rule below
   is now redundant for colour, but kept for the smaller font/upper-case.
   ───────────────────────────────────────────────────────────────────── */
.badge.bg-warning,
.badge.bg-warning.text-dark {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}

#sidebar.admin-sidebar .sidebar-nav .nav-link .badge.bg-warning {
    background: #fef3c7 !important;
    color: #92400e;
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* --- Bottom section --- */
#sidebar.admin-sidebar .sidebar-nav-bottom-divider {
    margin-top: auto;
    padding-top: 0;
    border-top: 1px solid #e2e5e9;
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* --- Backdrop overlay --- */
/* Hide CoreUI sidebar-backdrop completely - we use our own .sidebar-overlay instead */
.sidebar-backdrop,
.sidebar-backdrop.show,
.sidebar-backdrop.fade.show {
    display: none !important;
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1029;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* --- Simplebar flex for bottom pinning --- */
.admin-sidebar .simplebar-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* #40687 — below 992px the icon rail goes off-canvas (CoreUI sidebar-self-hiding
   default) and the existing "2-panel mobile drawer" rule at site.css ~43564
   keeps the sub-sidebar off-canvas too; both reveal together via the header
   hamburger (body.drawer-with-pagemenu). No wrapper offset needed — the main
   content flows full-width. */

/* --- Mini sidebar rail: icon-only strip for pages with sub-sidebars (992px+) --- */
@media (min-width: 992px) {

    /* Override self-hiding: show sidebar as 59px icon rail (56 + 3px scrollbar) */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) {
        width: 59px !important;
        min-width: 59px;
        margin-left: 0 !important;
        transition: width 0.25s ease;
        box-shadow: 1px 0 4px rgba(0, 0, 0, 0.04);
    }

    /* Override overflow on sidebar and sidebar-nav in mini-rail mode so tooltip
       flyouts can escape the clipping boundary and appear over the sub-sidebar. */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show),
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav {
        overflow: visible !important;
    }

    /* Center nav icons in 56px rail — all items get consistent 40x40 box */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link {
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        gap: 0;
        border-radius: 10px;
        margin: 2px auto;
        position: relative;
        overflow: visible;
    }

    /* Larger, more legible icons when only the icon is shown — Paul Jouanny
       feedback (#38981): stock 1.05rem icons were too small to identify the
       section at a glance after the sidebar collapses on entry. */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link .nav-icon {
        font-size: 1.25rem;
    }

    /* Prevent span overflow:hidden from clipping icons in collapsed rail */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link span {
        overflow: visible;
    }

    /* Active state in mini mode: solid colour box */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link.active {
        background: var(--admin-club-color, #667eea) !important;
        /* Without this, the cascading `.nav-link.active` rule sets
           `color: var(--admin-club-color)` and the label disappears against
           the now-solid club-colour background — fine while the rail is
           collapsed (no labels) but invisible once it expands on hover. */
        color: #fff !important;
        box-shadow: none;
    }

    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link.active .nav-icon {
        color: #fff !important;
    }

    /* Core items in mini mode: fully neutralise the icon background pill */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link.nav-link--core .nav-icon-bg {
        background: transparent;
        width: auto;
        height: auto;
        border-radius: 0;
    }

    /* Core icons in mini mode: match the size of non-core icons */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link.nav-link--core .nav-icon-bg .nav-icon {
        font-size: 1.25rem;
    }

    /* Nav padding: push icons down to align below the diary sidebar brand area */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav {
        padding-top: 4rem;
    }

    /* Hide elements that don't fit in 56px */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-brand,
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-club-name,
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav-divider,
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav-section-label,
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link .badge,
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-item__action,
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-close {
        display: none !important;
    }

    /* In collapsed mode, drop the flex-row layout so the icon re-centres inside the link */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .nav-item--has-action {
        display: block;
        padding-right: 0;
    }

    /* Bottom divider: keep margin-top:auto for pinning, just hide the visual border */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav-bottom-divider {
        border: none;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    /* Text labels become tooltip flyouts on hover (exclude .nav-icon-bg wrapper) */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link span:not(.nav-icon-bg) {
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        background: #1e293b;
        color: #fff;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease, visibility 0.15s ease;
        z-index: 1060;
        pointer-events: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link:hover span:not(.nav-icon-bg) {
        opacity: 1;
        visibility: visible;
    }

    /* User section in mini mode: icon-only admin + avatar */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-user-section {
        padding: 0.25rem 0;
        background: transparent;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-user-trigger {
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        gap: 0;
        border-radius: 10px;
        margin: 2px auto;
        position: relative;
    }

    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-user-trigger__chevron {
        display: none;
    }

    /* Turn name labels into tooltip flyouts */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-user-trigger__name {
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        background: #1e293b;
        color: #fff;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease, visibility 0.15s ease;
        z-index: 1060;
        pointer-events: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-user-trigger:hover .sidebar-user-trigger__name {
        opacity: 1;
        visibility: visible;
    }

    /* Dropdown menu: proper width in collapsed mode */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-user-section .dropdown-menu {
        width: auto;
        min-width: 12rem;
    }

    /* Expanded state: full sidebar overlay on toggle */
    body.has-sub-sidebar #sidebar.admin-sidebar.show {
        width: 15.5rem !important;
        z-index: 1040;
        transition: width 0.25s ease;
    }

    /* Show burger toggle in header (to expand mini → full) */
    body.has-sub-sidebar .header .header-toggler {
        display: flex !important;
    }

    /* Show close button when expanded */
    body.has-sub-sidebar #sidebar.admin-sidebar.show .sidebar-close {
        display: flex !important;
    }

    /* Allow overlay when sidebar expands */
    body.has-sub-sidebar .sidebar-overlay {
        display: block !important;
    }

    /* Diary: shift diary sidebar right to accommodate mini rail */
    body.diary-page-active .diary-sidebar {
        left: 59px;
    }
    /* #41251 — the diary .wrapper offset was only defined at >=1200px, so in the
       992-1199px band (iPad landscape) the fixed 59px rail + 290px diary sidebar
       overlaid the calendar with no content offset, and with page scroll disabled
       (body.flex-grow-1 overflow:hidden) the day view couldn't scroll. Mirror the
       members/finance/etc. pattern so the content clears both rails at tablet width. */
    body.diary-page-active .wrapper {
        margin-left: calc(290px + 59px) !important;
        width: calc(100% - 290px - 59px) !important;
    }

    /* Members: shift members sidebar right to accommodate mini rail */
    body.members-page-active .members-sidebar {
        left: 59px;
    }
    body.members-page-active .wrapper {
        margin-left: calc(280px + 59px) !important;
        width: calc(100% - 280px - 59px) !important;
    }

    /* Messaging: shift messaging sidebar right to accommodate mini rail */
    body.messaging-page-active .messaging-sidebar {
        left: 56px;
    }
    body.messaging-page-active .wrapper {
        margin-left: calc(260px + 56px) !important;
        width: calc(100% - 260px - 56px) !important;
    }

    /* Finance: shift finance sidebar right to accommodate mini rail */
    body.finance-page-active .finance-sidebar {
        left: 59px;
    }
    body.finance-page-active .wrapper {
        margin-left: calc(260px + 59px) !important;
        width: calc(100% - 260px - 59px) !important;
    }

    /* Settings: shift fixed settings sidebar right to accommodate mini rail */
    body.settings-subpage-active .settings-sidebar {
        left: 59px;
    }
    body.settings-subpage-active .wrapper {
        margin-left: calc(260px + 59px) !important;
        width: calc(100% - 260px - 59px) !important;
    }

    /* Till: collapse to rail only (no sub-sidebar) */
    body.till-page-active .wrapper {
        margin-left: 59px !important;
        width: calc(100% - 59px) !important;
    }

    /* Self Check-in: collapse to rail only (no sub-sidebar) */
    body.checkin-page-active .wrapper {
        margin-left: 59px !important;
        width: calc(100% - 59px) !important;
    }

    /* Sales Funnel: collapse to rail only (no sub-sidebar) */
    body.salesfunnel-page-active .wrapper {
        margin-left: 59px !important;
        width: calc(100% - 59px) !important;
    }

    /* Reporting: shift reporting sidebar right to accommodate mini rail */
    body.reporting-page-active .reporting-sidebar,
    body.admin-page-active .admin-report-sidebar {
        position: fixed;
        top: 0;
        left: 59px;
    }
    body.reporting-page-active .wrapper,
    body.admin-page-active .wrapper {
        margin-left: calc(260px + 59px) !important;
        width: calc(100% - 260px - 59px) !important;
    }

    /* #40656 — When the operator manually expands the main sidebar (the
       hamburger toggle adds .show) while a sub-sidebar is open, the sub-
       sidebar was still sitting at left:59px (rail width) and the wrapper
       still had a 59px-based margin. Result: the sub-sidebar ended up
       hidden behind the now-15.5rem-wide main sidebar, and the page
       content rendered over the top of the sub-sidebar. Push everything
       across so both panels stay visible side-by-side. */
    body.has-sub-sidebar:has(#sidebar.admin-sidebar.show) .diary-sidebar,
    body.has-sub-sidebar:has(#sidebar.admin-sidebar.show) .members-sidebar,
    body.has-sub-sidebar:has(#sidebar.admin-sidebar.show) .messaging-sidebar,
    body.has-sub-sidebar:has(#sidebar.admin-sidebar.show) .finance-sidebar,
    body.has-sub-sidebar:has(#sidebar.admin-sidebar.show) .settings-sidebar,
    body.has-sub-sidebar:has(#sidebar.admin-sidebar.show) .reporting-sidebar,
    body.has-sub-sidebar:has(#sidebar.admin-sidebar.show) .admin-report-sidebar {
        left: 15.5rem;
    }
    body.has-sub-sidebar:has(#sidebar.admin-sidebar.show) .wrapper {
        margin-left: calc(15.5rem + 260px) !important;
        width: calc(100% - 15.5rem - 260px) !important;
    }
}

/* --- Large screens: sidebar always visible --- */
@media (min-width: 1200px) {
    /* Sidebar always visible - override self-hiding behavior */
    html:not([dir="rtl"]) #sidebar.admin-sidebar.sidebar-self-hiding:not(.show):not(.sidebar-end) {
        margin-left: 0 !important;
    }

    /* Main content wrapper pushed to accommodate sidebar (admin only) */
    body:has(#sidebar.admin-sidebar) .wrapper {
        margin-left: 15.5rem !important;
        width: calc(100% - 15.5rem) !important;
    }

    /* Sub-sidebar pages: keep mini-rail (59px) + sub-sidebar positioning at 1200px+ */
    body.diary-page-active:has(#sidebar.admin-sidebar) .wrapper {
        margin-left: calc(290px + 59px) !important;
        width: calc(100% - 290px - 59px) !important;
    }
    body.members-page-active:has(#sidebar.admin-sidebar) .wrapper {
        margin-left: calc(280px + 59px) !important;
        width: calc(100% - 280px - 59px) !important;
    }
    body.messaging-page-active:has(#sidebar.admin-sidebar) .wrapper {
        margin-left: calc(260px + 56px) !important;
        width: calc(100% - 260px - 56px) !important;
    }
    body.finance-page-active:has(#sidebar.admin-sidebar) .wrapper {
        margin-left: calc(260px + 59px) !important;
        width: calc(100% - 260px - 59px) !important;
    }
    body.settings-subpage-active:has(#sidebar.admin-sidebar) .wrapper {
        margin-left: calc(260px + 59px) !important;
        width: calc(100% - 260px - 59px) !important;
    }
    body.till-page-active:has(#sidebar.admin-sidebar) .wrapper {
        margin-left: 59px !important;
        width: calc(100% - 59px) !important;
    }
    body.checkin-page-active:has(#sidebar.admin-sidebar) .wrapper {
        margin-left: 59px !important;
        width: calc(100% - 59px) !important;
    }
    body.salesfunnel-page-active:has(#sidebar.admin-sidebar) .wrapper {
        margin-left: 59px !important;
        width: calc(100% - 59px) !important;
    }
    /* #40892 — deliberately no .reporting-sidebar left rule here. The 992px block
       already pins it at left:59px, and the :has(#sidebar...) guarded copy that
       used to live here carried ID specificity, beating the ≥2000px "full main
       sidebar + sub-sidebar" override below — so on wide viewports (e.g. a 1920px
       screen at 80% zoom) the report menu stayed at 59px, hidden under the
       expanded main sidebar. */
    body.reporting-page-active:has(#sidebar.admin-sidebar) .wrapper,
    body.admin-page-active:has(#sidebar.admin-sidebar) .wrapper {
        margin-left: calc(260px + 59px) !important;
        width: calc(100% - 260px - 59px) !important;
    }

    /* Hide close button - not needed on desktop */
    #sidebar.admin-sidebar .sidebar-close {
        display: none;
    }

    /* Hide hamburger toggle in header on desktop */
    .header .header-toggler {
        display: none;
    }

    /* Never show overlay on desktop */
    .sidebar-overlay {
        display: none !important;
    }

    /* Sidebar shadow always visible on desktop */
    #sidebar.admin-sidebar {
        box-shadow: 1px 0 8px rgba(0, 0, 0, 0.06), 4px 0 24px rgba(0, 0, 0, 0.03);
    }
}

/* --- Very wide screens: keep the full main sidebar alongside any sub-sidebar ---
   Paul Jouanny feedback (#38981): on viewports with room for both, don't
   auto-collapse the main sidebar to a 59px icon rail just because a sub-sidebar
   is present. Threshold raised from 1600px → 2000px because at 1600px the two
   nav columns (~538px) ate roughly a third of the viewport, leaving the
   content area too cramped. The rail still applies below this breakpoint. */
@media (min-width: 2000px) {
    /* Restore full sidebar width and remove rail-specific link sizing */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) {
        width: 15.5rem !important;
        min-width: 15.5rem;
        box-shadow: 1px 0 8px rgba(0, 0, 0, 0.06), 4px 0 24px rgba(0, 0, 0, 0.03);
    }

    /* #40602 — once the sidebar re-expands to full width it must look identical to
       the standard sidebar shown on non-sub-sidebar pages, so restore the base
       nav-link metrics (the 992px rail block tightened them for the 59px strip). */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link {
        justify-content: flex-start;
        width: auto;
        height: auto;
        padding: 0.6rem 0.75rem 0.6rem 1rem;
        gap: 1rem;
        border-radius: var(--radius-md);
        margin: 0;
    }

    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link .nav-icon {
        font-size: 1.05rem;
    }

    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link.nav-link--core .nav-icon-bg .nav-icon {
        font-size: 0.8rem;
    }

    /* #40602 — bring back the soft tinted icon tile on core items. The rail block
       flattens it to a bare icon; without this the re-expanded sidebar shows plain
       icons while the standard sidebar shows tiles — the reported inconsistency. */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link.nav-link--core .nav-icon-bg {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        background: color-mix(in srgb, var(--admin-club-color, #667eea) 12%, #f9fafb);
    }

    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link.nav-link--core:hover .nav-icon-bg {
        background: color-mix(in srgb, var(--admin-club-color, #667eea) 20%, #f9fafb);
    }

    /* #40602 — restore the standard active treatment (soft tint fill + club-colour
       left bar) instead of the rail's solid pill, so the active row matches too. */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link.active {
        background: color-mix(in srgb, var(--admin-club-color, #667eea) 12%, #f9fafb) !important;
        color: var(--admin-club-color, #667eea) !important;
        font-weight: 600;
        box-shadow: inset 3px 0 0 var(--admin-club-color, #667eea);
    }

    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link.active .nav-icon {
        color: var(--admin-club-color, #667eea) !important;
    }

    /* Active core item keeps the solid tile + white glyph, matching the base look. */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link.nav-link--core.active .nav-icon-bg {
        background: var(--admin-club-color, #667eea);
    }

    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link.nav-link--core.active .nav-icon-bg .nav-icon {
        color: #fff !important;
    }

    /* Bring back the brand area, club name and section labels */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-brand,
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-club-name,
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav-section-label,
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link .badge,
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-item__action {
        display: revert !important;
    }

    /* The 768px override forces .nav-item--has-action to display:block for the
       collapsed rail. At ≥1600px we restore the rail to a full-width sidebar
       AND bring the "+" action back, so the parent must go back to flex too —
       otherwise the "+" drops onto its own line below Home (#39870). */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .nav-item--has-action {
        display: flex;
        padding-right: 8px;
    }

    /* Reset the rail nav padding so labels start where they normally would */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav {
        padding-top: 0.5rem;
    }

    /* Drop the absolutely-positioned tooltip flyouts — labels are inline now */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-nav .nav-link span:not(.nav-icon-bg) {
        position: static;
        background: transparent;
        color: inherit;
        padding: 0;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        font-size: inherit;
        font-weight: inherit;
        white-space: nowrap;
        transform: none;
    }

    /* User section in the footer: full layout instead of icon-only */
    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-user-trigger {
        justify-content: flex-start;
        width: 100%;
        height: auto;
        padding: 0.4rem 0.6rem;
        gap: 0.55rem;
        border-radius: 6px;
    }

    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-user-trigger__chevron {
        display: inline-block;
    }

    body.has-sub-sidebar #sidebar.admin-sidebar:not(.show) .sidebar-user-trigger__name {
        position: static;
        background: transparent;
        color: inherit;
        padding: 0;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        font-size: inherit;
        font-weight: inherit;
        white-space: nowrap;
        transform: none;
    }

    /* Sub-sidebars sit immediately to the right of the full main sidebar (15.5rem = 248px) */
    body.diary-page-active.has-sub-sidebar .diary-sidebar,
    body.members-page-active.has-sub-sidebar .members-sidebar,
    body.finance-page-active.has-sub-sidebar .finance-sidebar,
    body.settings-subpage-active.has-sub-sidebar .settings-sidebar,
    body.reporting-page-active.has-sub-sidebar .reporting-sidebar,
    body.admin-page-active.has-sub-sidebar .admin-report-sidebar {
        left: 15.5rem;
    }
    body.messaging-page-active.has-sub-sidebar .messaging-sidebar {
        left: 15.5rem;
    }

    /* Wrapper offset = main (15.5rem) + sub-sidebar width */
    body.diary-page-active.has-sub-sidebar:has(#sidebar.admin-sidebar) .wrapper {
        margin-left: calc(15.5rem + 290px) !important;
        width: calc(100% - 15.5rem - 290px) !important;
    }
    body.members-page-active.has-sub-sidebar:has(#sidebar.admin-sidebar) .wrapper {
        margin-left: calc(15.5rem + 280px) !important;
        width: calc(100% - 15.5rem - 280px) !important;
    }
    body.messaging-page-active.has-sub-sidebar:has(#sidebar.admin-sidebar) .wrapper {
        margin-left: calc(15.5rem + 260px) !important;
        width: calc(100% - 15.5rem - 260px) !important;
    }
    body.finance-page-active.has-sub-sidebar:has(#sidebar.admin-sidebar) .wrapper,
    body.settings-subpage-active.has-sub-sidebar:has(#sidebar.admin-sidebar) .wrapper,
    body.reporting-page-active.has-sub-sidebar:has(#sidebar.admin-sidebar) .wrapper,
    body.admin-page-active.has-sub-sidebar:has(#sidebar.admin-sidebar) .wrapper {
        margin-left: calc(15.5rem + 260px) !important;
        width: calc(100% - 15.5rem - 260px) !important;
    }

    /* Rail-only pages (no sub-sidebar) fall back to the standard full sidebar offset */
    body.till-page-active.has-sub-sidebar:has(#sidebar.admin-sidebar) .wrapper,
    body.checkin-page-active.has-sub-sidebar:has(#sidebar.admin-sidebar) .wrapper,
    body.salesfunnel-page-active.has-sub-sidebar:has(#sidebar.admin-sidebar) .wrapper {
        margin-left: 15.5rem !important;
        width: calc(100% - 15.5rem) !important;
    }
}

/* ============================================
   Settings Sidebar Navigation
   ============================================ */

.settings-page-layout {
    display: block;
    min-height: 0;
}

/* --- Sidebar --- */
.settings-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    z-index: 1025;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    padding: 16px 14px;
    overflow-y: auto;
    box-shadow: 1px 0 8px rgba(0, 0, 0, 0.06);
}

/* Brand row */
.settings-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}
.settings-sidebar__brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    min-width: 0;
    flex: 1;
}
.settings-sidebar__brand-img {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid color-mix(in srgb, var(--admin-club-color, #667eea) 20%, transparent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.settings-sidebar__brand-name {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-sidebar-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 6px 0 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4b5563;
    text-decoration: none;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid #e5e7eb;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.settings-sidebar-back i {
    font-size: 0.75rem;
    color: #9ca3af;
    transition: transform 0.15s, color 0.15s;
}

.settings-sidebar-back:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #111827;
    text-decoration: none;
}

.settings-sidebar-back:hover i {
    transform: translateX(-2px);
    color: #6b7280;
}

.settings-sidebar-category {
    margin-bottom: 0.5rem;
}

.settings-sidebar-category-label {
    padding: 0.35rem 0.75rem;
    margin-bottom: 0.125rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    border-left: 3px solid transparent;
}

.settings-sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.84rem;
    font-weight: 500;
    color: #4b5563;
    text-decoration: none;
    border-radius: 6px;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s;
    margin-bottom: 1px;
}

.settings-sidebar-item:hover {
    background: #eef0f3;
    color: #111827;
}

.settings-sidebar-item--active {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 8%, #f9fafb);
    color: var(--admin-club-color, #667eea);
    font-weight: 600;
    border-left-color: var(--admin-club-color, #667eea);
}

.settings-sidebar-item--active:hover {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 14%, #f9fafb);
    color: var(--admin-club-color, #667eea);
}

.settings-sidebar-item-icon {
    width: 1.25rem;
    min-width: 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    opacity: 0.6;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.settings-sidebar-item-name {
    flex: 1;
    min-width: 0;
}

.settings-sidebar-item-match {
    font-size: 0.75rem;
    color: #e8651a;
    margin-left: 0.25rem;
    flex-shrink: 0;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-sidebar-count {
    margin-left: auto;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.4rem;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.settings-sidebar-item--active .settings-sidebar-item-icon {
    opacity: 1;
    color: var(--admin-club-color, #667eea);
}

/* --- Page content area --- */
.settings-page-content {
    flex: 1;
    min-width: 0;
    width: 100%;
}

/* Scroll-spy bottom padding — set dynamically by _SettingsLayout.cshtml JS */

/* Stop short sections triggering the next scroll-spy item too early */
.settings-page-layout:has(.mpe-sidebar-nav) .mpe-form-card {
    min-height: 40vh;
}

/* --- Page header (coloured bar — frames content, holds action buttons) --- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    margin-left: -12px;
    margin-right: -12px;
    padding: 14px 24px;
    background-color: var(--admin-club-color, #667eea);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
}

/* Diagonal satin sheen — echoes the glossy gradient on dashboard tiles
   (darker bottom-left, brighter band sweeping to top-right). Gives the header
   depth and polish without texture or imagery. */
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0.04) 25%,
            rgba(255, 255, 255, 0.1) 55%,
            rgba(255, 255, 255, 0.04) 80%,
            rgba(0, 0, 0, 0.08) 100%);
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

/* Soft top-right spotlight — catches the "lit from above" feel of the tiles. */
.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 130% at 80% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 60%);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* Keep header content above the hero overlay */
.page-header > * {
    position: relative;
    z-index: 2;
}

.page-header--sticky {
    position: sticky;
    top: 0;
    z-index: 9;
}

.page-header__title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.page-header__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-right: 16px;
}

.page-header__subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 4px 0 0 0;
    line-height: 1.4;
    max-width: 560px;
}

.page-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 20px;
}

/* #41387 — date-range toolbar surfaced in the diary insight header (Activity
   Attendance / Missed Sessions) so staff can pick the reporting period. */
.diary-insight-daterange {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.diary-insight-daterange .form-select,
.diary-insight-daterange .form-control {
    width: auto;
    min-width: 0;
    background: #ffffff;
    color: #1f2937;
}

.diary-insight-daterange input[type="date"] {
    max-width: 150px;
}

/* #41818 — at phone widths the daterange is a single non-wrapping flex item, so
   the controls overflowed the header: WKWebView wrapped the date text ("2026"
   spilling below the input) while Android pushed Apply off-screen entirely.
   Let the toolbar wrap and keep date inputs wide enough for iOS's longer
   locale text ("13 Jun 2026") so WebKit never wraps the value. */
@media (max-width: 767px) {
    .diary-insight-daterange {
        flex-wrap: wrap;
        width: 100%;
    }
    .diary-insight-daterange .form-select {
        flex: 1 1 100%;
    }
    .diary-insight-daterange input[type="date"] {
        flex: 1 1 auto;
        min-width: 130px;
        max-width: none;
    }
}

/* Diary view-scoped action buttons: only the buttons whose data-show-when matches
   the host's data-active-view are displayed. ID prefix needed to outweigh the
   .action-btn { display: inline-flex } rule that buttons share. */
#diaryPageActions .diary-action-btn { display: none; }
#diaryPageActions[data-active-view="classes"] .diary-action-btn[data-show-when="classes"],
#diaryPageActions[data-active-view="appointments"] .diary-action-btn[data-show-when="appointments"] {
    display: inline-flex;
}

.page-header__actions .btn-outline-secondary,
.page-header__actions .btn-outline-dark,
.page-header__actions .btn-light.btn-outline-dark {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.2);
    background: transparent;
}

.page-header__actions .btn-outline-secondary:hover,
.page-header__actions .btn-outline-dark:hover,
.page-header__actions .btn-light.btn-outline-dark:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
}

.page-header__actions .btn-success,
.page-header__actions .btn-primary {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.page-header__actions .btn-success:hover,
.page-header__actions .btn-primary:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
}

.page-header__actions .text-muted {
    color: rgba(255, 255, 255, 0.55) !important;
}

.page-header__actions .text-success {
    color: #4ade80 !important;
}

@media (max-width: 767px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 18px;
    }
    .page-header__actions {
        margin-left: 0;
        flex-wrap: wrap;
    }
}

/* ================================================
   Info Banner
   Informational strip used on settings pages to
   redirect users to related areas of the app.
   ================================================ */
.info-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #92400e;
}

.info-banner__icon {
    flex-shrink: 0;
}

.info-banner a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* --- Mobile horizontal nav --- */
.settings-mobile-nav {
    display: none;
    margin-bottom: 1rem;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    padding: 0 0.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.settings-mobile-nav::-webkit-scrollbar {
    display: none;
}

.settings-mobile-nav-inner {
    display: flex;
    gap: 0.375rem;
    padding-bottom: 0.25rem;
    white-space: nowrap;
}

.settings-mobile-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    color: #6b7280;
    text-decoration: none;
    background: #f3f4f6;
    border-radius: var(--radius-pill);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.settings-mobile-nav-item:hover {
    background: #e5e7eb;
    color: #374151;
}

.settings-mobile-nav-item--active {
    background: var(--admin-club-color, #667eea);
    color: #fff;
}

.settings-mobile-nav-item--active:hover {
    background: var(--admin-club-color, #667eea);
    color: #fff;
    filter: brightness(0.9);
}

/* --- Responsive: below 992px hide sidebar, show mobile nav --- */
@media (max-width: 991.98px) {
    .settings-sidebar {
        display: none;
    }

    .settings-mobile-nav {
        display: block;
    }

    .settings-page-layout {
        display: block;
    }

    body.settings-subpage-active .wrapper,
    body.reporting-page-active .wrapper,
    body.admin-page-active .wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

@media (min-width: 992px) {
    .settings-mobile-nav {
        display: none;
    }
}

/* =============================================
   Settings - Marketing Feature & Integration Cards
   ============================================= */

/* --- Feature Card (category wrapper) --- */
.settings-feature-card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
    margin-bottom: 1.5rem;
    height: auto;
}

.settings-feature-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
}

.settings-feature-card .card-header {
    background: #f9fafb;
    color: #111827;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settings-feature-card .card-header h6 {
    margin: 0;
    font-weight: 700;
    font-size: 0.95rem;
    color: #111827;
    letter-spacing: 0.01em;
}

.settings-feature-card .card-header h6 i {
    margin-right: 10px;
    color: #e8651a;
    opacity: 0.9;
}

/* --- Nav link within feature card --- */
.settings-feature-card .card-body > a {
    transition: background 0.15s ease;
}
.settings-feature-card .card-body > a:hover {
    background: #f3f4f6;
}

/* Harlands Direct Debit — the Harlands-hosted iSnap signup form is embedded in
   this iframe; the surrounding page is framed with settings-feature-card. The
   card's overflow:hidden + radius clips the iframe to the rounded corners. */
.harlands-dd-iframe {
    width: 100%;
    height: 80vh;
    border: 0;
    display: block;
}

.copy-id-btn {
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.15s;
}
.copy-id-btn:hover {
    opacity: 1;
}

/* --- Integration Item (row within card) --- */
/* CR Pay banner inside Payment Providers */
.settings-integration-crpay-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    background: #1e293b;
    text-decoration: none;
    transition: background 0.15s ease;
    border-bottom: 1px solid #334155;
}

.settings-integration-crpay-banner:hover {
    background: #273548;
    text-decoration: none;
}

.settings-integration-crpay-banner__logo {
    width: 48px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: var(--radius-md);
    padding: 6px;
}

.settings-integration-crpay-banner__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.settings-integration-crpay-banner__text {
    flex: 1;
    min-width: 0;
}

.settings-integration-crpay-banner__name {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
}

.settings-integration-crpay-banner__desc {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 1px;
}

.settings-integration-crpay-banner__action {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-size: 0.85rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.settings-integration-crpay-banner:hover .settings-integration-crpay-banner__action {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.settings-integration-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s ease;
}

.settings-integration-item:hover {
    background: #f8fafc;
}

.settings-integration-item:last-child {
    border-bottom: none;
}

/* Logo area - 56px default */
.settings-integration-logo {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;
    color: #fff;
    background: #f3f4f6;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.settings-integration-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.settings-integration-logo--white {
    background: #fff;
    border: 1px solid #e5e7eb;
}

/* Member dashboard integrations panel — brand-logo section headings */
.member-integration-heading__logo {
    width: 40px;
    height: 40px;
    font-size: 1rem;
}

.member-integration-heading__logo--mywellness {
    background: #6dc6be;
    border: none;
}

.member-integration-heading__name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
}

/* Member dashboard integration status at-a-glance logos (front-page rail).
   Solid = member is linked (has an Id); greyed = not set up for this member. */
.member-integration-glance {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.member-integration-glance__logo {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.member-integration-glance__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.member-integration-glance__logo--mywellness {
    background: #6dc6be;
    border: none;
}

.member-integration-glance__logo--off {
    filter: grayscale(1);
    opacity: 0.4;
}

/* Body */
.settings-integration-body {
    flex: 1;
    min-width: 0;
}

.settings-integration-name {
    font-weight: 700;
    font-size: 1rem;
    color: #111827;
    margin-bottom: 2px;
}

.settings-integration-desc {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.5;
}

.settings-integration-desc a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.settings-integration-desc a:hover {
    text-decoration: underline;
}

/* Status badges (pill style) */
.settings-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.settings-status-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.settings-status-badge--active { background: #dcfce7; color: #166534; }
.settings-status-badge--active::before { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.4); }

.settings-status-badge--inactive { background: #f3f4f6; color: #6b7280; }
.settings-status-badge--inactive::before { background: #d1d5db; }

.settings-status-badge--warning { background: #fef3c7; color: #92400e; }
.settings-status-badge--warning::before { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); }

.settings-status-badge--error { background: #fee2e2; color: #991b1b; }
.settings-status-badge--error::before { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }

.settings-status-badge--pending { background: #dbeafe; color: #1e40af; }
.settings-status-badge--pending::before { background: #3b82f6; box-shadow: 0 0 6px rgba(59, 130, 246, 0.4); }

/* Actions area */
.settings-integration-actions {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* --- CR Pay Hero Banner --- */
.settings-pay-hero {
    display: flex;
    align-items: center;
    gap: 32px;
    background: #1e293b;
    border-radius: 14px;
    padding: 36px 40px;
    margin-bottom: 28px;
    overflow: hidden;
    position: relative;
}

.settings-pay-hero__content {
    flex: 1;
    min-width: 0;
}

.settings-pay-hero__logo {
    height: 52px;
    margin-bottom: 14px;
}

.settings-pay-hero__title {
    color: #fff;
    font-weight: 800;
    font-size: 1.35rem;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.settings-pay-hero__subtitle {
    color: #94a3b8;
    font-size: 0.88rem;
    margin: 0 0 20px;
    line-height: 1.6;
}

.settings-pay-hero__badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.settings-pay-hero__badges span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.07);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-pay-hero__badges span i {
    color: #22d3ee;
    font-size: 0.82rem;
}

.settings-pay-hero__image {
    flex-shrink: 0;
    width: 150px;
}

.settings-pay-hero__image img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
}

/* --- CR Pay Highlights (connected state enrichment) --- */
.settings-pay-highlights {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.settings-pay-highlights__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #4b5563;
    background: #f9fafb;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid #f3f4f6;
}

.settings-pay-highlights__item i {
    color: #e8651a;
    font-size: 0.75rem;
}

.settings-pay-highlights__item img {
    height: 14px;
    width: auto;
    opacity: 0.7;
}

/* --- CR Pay Product Card --- */
.settings-pay-product {
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-top: 3px solid #22b8cf;
}

.settings-pay-product__header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: #f0fafb;
    border-bottom: 1px solid #e0f2f3;
    position: relative;
}

.settings-pay-product__logo {
    width: 100px;
    height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e0f2f3;
    padding: 12px;
}

.settings-pay-product__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.settings-pay-product__header-text {
    flex: 1;
    min-width: 0;
}

.settings-pay-product__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.settings-pay-product__title-row h5 {
    font-weight: 800;
    font-size: 1.15rem;
    color: #111827;
    margin: 0;
}

.settings-pay-product__desc {
    font-size: 0.84rem;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
}

.settings-pay-product__desc a {
    color: #e8651a;
    text-decoration: none;
    font-weight: 600;
}

.settings-pay-product__desc a:hover {
    text-decoration: underline;
}

.settings-pay-product__header-actions {
    flex-shrink: 0;
    position: absolute;
    top: 12px;
    right: 12px;
}

.settings-pay-product__body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Feature check list */
.settings-pay-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.settings-pay-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 0.88rem;
    color: #374151;
}

.settings-pay-features li i {
    color: #e8651a;
    flex-shrink: 0;
}

/* CTA area */
.settings-pay-product__cta {
    margin-top: auto;
}

.settings-pay-product__cta .btn {
    width: 100%;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: var(--radius-md);
}

.btn-pay-cta {
    background: #e8651a;
    border-color: #e8651a;
    color: #fff;
}

.btn-pay-cta:hover, .btn-pay-cta:focus {
    background: #cf5815;
    border-color: #cf5815;
    color: #fff;
}

/* Compact KV grid inside pay product */
.settings-pay-product .settings-kv-item {
    justify-content: flex-start;
    gap: 16px;
}

.settings-pay-product .settings-kv-item .kv-label {
    min-width: 140px;
}

/* Pay status display */
.settings-pay-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.settings-pay-status i { flex-shrink: 0; }

.settings-pay-status--success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.settings-pay-status--warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.settings-pay-status--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.settings-pay-status--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.settings-pay-status--neutral {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #6b7280;
}


/* Card readers sub-section (inside Card Payments card) */
.settings-pay-readers-section {
    border-top: 1px solid #e5e7eb;
    margin-top: 20px;
    padding-top: 16px;
}

.settings-pay-readers-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.settings-pay-readers-section__title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.settings-pay-reader-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}

.settings-pay-reader-item:last-child {
    border-bottom: none;
}

.settings-pay-reader-item__icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #f0f9ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #0ea5e9;
    font-size: 0.8rem;
}

.settings-pay-reader-item__name {
    flex: 1;
    font-weight: 600;
    font-size: 0.88rem;
    color: #111827;
}

.settings-pay-empty {
    font-size: 0.85rem;
    color: #9ca3af;
    padding: 8px 0;
}

/* --- Key-Value Config Grid --- */
.settings-kv-grid {
    padding: 12px 0;
}

.settings-kv-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.88rem;
}

.settings-kv-item:last-child {
    border-bottom: none;
}

.settings-kv-item .kv-label {
    color: #6b7280;
    font-weight: 500;
}

.settings-kv-item .kv-value {
    font-weight: 600;
    color: #111827;
}

.editable-inline {
    cursor: pointer;
    border-bottom: 1px dashed #9ca3af;
    padding-bottom: 1px;
}

.editable-inline:hover {
    color: var(--cui-primary, #3b82f6);
    border-bottom-color: var(--cui-primary, #3b82f6);
}

/* --- Admin Panel --- */
.settings-admin-panel {
    background: #f9fafb;
    border-radius: 10px;
    padding: 14px 18px;
    margin-top: 16px;
    border: 1px solid #f3f4f6;
}

.settings-admin-panel-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    font-weight: 700;
    margin-bottom: 10px;
}

/* --- URL Display --- */
.settings-url-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #6b7280;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    padding: 4px 12px;
    border-radius: 6px;
    margin-top: 6px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 0.8rem;
}

.settings-url-display a {
    color: #9ca3af;
    flex-shrink: 0;
    transition: color 0.15s;
}

.settings-url-display a:hover {
    color: #3b82f6;
}

/* --- Responsive --- */
@media (max-width: 767.98px) {
    .settings-integration-item {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px 18px;
    }

    .settings-integration-actions {
        width: 100%;
    }

    .settings-integration-actions .btn {
        flex: 1;
    }

    .settings-integration-status {
        order: -1;
        margin-left: auto;
    }

    .settings-pay-hero {
        padding: 24px 20px;
        gap: 20px;
    }

    .settings-pay-hero__title {
        font-size: 1.1rem;
    }

    .settings-pay-hero__image {
        width: 80px;
    }

    .settings-pay-hero__badges span {
        font-size: 0.75rem;
        padding: 4px 10px;
    }

    .settings-pay-product__header {
        padding: 16px;
        gap: 14px;
    }

    .settings-pay-product__logo {
        width: 72px;
        height: 56px;
        padding: 8px;
    }

    .settings-pay-product__body {
        padding: 20px;
    }

    .settings-pay-product__header-actions .btn {
        font-size: 0.78rem;
        padding: 4px 8px;
    }

    .settings-pay-highlights {
        gap: 4px;
    }

    .settings-pay-highlights__item {
        font-size: 0.75rem;
        padding: 4px 8px;
    }

    .settings-kv-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

/* --- Featured Integration Card --- */
.settings-featured-integration {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 28px 30px;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.settings-featured-integration--dark {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: #fff;
}

.settings-featured-integration--blue {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    color: #fff;
}

.settings-featured-integration--green {
    background: linear-gradient(135deg, #064e3b 0%, #059669 100%);
    color: #fff;
}

.settings-featured-integration--purple {
    background: linear-gradient(135deg, #3b0764 0%, #7c3aed 100%);
    color: #fff;
}

.settings-featured-integration__icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    font-size: 2rem;
    color: #fff;
}

.settings-featured-integration__icon img {
    max-width: 52px;
    max-height: 52px;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.settings-featured-integration__body {
    flex: 1;
    min-width: 0;
}

.settings-featured-integration__name {
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.settings-featured-integration__desc {
    font-size: 0.88rem;
    opacity: 0.85;
    line-height: 1.6;
    margin-bottom: 12px;
}

.settings-featured-integration__badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-featured-integration__badges span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-featured-integration__badges span i {
    color: #22d3ee;
    font-size: 0.75rem;
}

.settings-featured-integration__actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.settings-featured-integration__status {
    margin-bottom: 4px;
}

/* --- Widget Grid --- */
.settings-widget-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 20px;
}

.settings-widget-card {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: #fff;
}

.settings-widget-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.08);
}

.settings-widget-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.settings-widget-card__name {
    font-weight: 700;
    font-size: 1rem;
    color: #111827;
    margin-bottom: 6px;
}

.settings-widget-card__desc {
    font-size: 0.84rem;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 16px;
    flex: 1;
}

.settings-widget-card__preview {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

.settings-widget-card__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.settings-widget-card__preview--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    font-size: 2rem;
}

.settings-widget-card__action {
    margin-top: auto;
}

/* --- Featured Integration Responsive --- */
@media (max-width: 767.98px) {
    .settings-featured-integration {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 20px;
        gap: 16px;
    }

    .settings-featured-integration__icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

    .settings-featured-integration__icon img {
        max-width: 40px;
        max-height: 40px;
    }

    .settings-featured-integration__name {
        font-size: 1.05rem;
    }

    .settings-featured-integration__actions {
        width: 100%;
        flex-direction: row;
    }

    .settings-featured-integration__actions .btn {
        flex: 1;
    }

    .settings-widget-grid {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 12px;
    }

    .settings-widget-card {
        padding: 20px 16px;
    }
}

/* --- Member App Hero --- */
.settings-app-hero {
    display: flex;
    align-items: center;
    gap: 40px;
    background: #1e293b;
    border-radius: var(--radius-xl);
    padding: 36px 40px;
    overflow: hidden;
    position: relative;
}

.settings-app-hero__content {
    flex: 1;
    min-width: 0;
}

.settings-app-hero__name {
    font-weight: 800;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 8px;
}

.settings-app-hero__desc {
    font-size: 0.92rem;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 16px;
}

.settings-app-hero__features {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.settings-app-hero__features span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.07);
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-app-hero__features span i {
    color: #22d3ee;
    font-size: 0.75rem;
}

.settings-app-hero__stores {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.settings-app-hero__store-badge {
    height: 40px;
    width: auto;
    border-radius: 6px;
    transition: opacity 0.15s ease;
}

.settings-app-hero__store-badge:hover {
    opacity: 0.85;
}

.settings-app-hero__store-badge--gplay {
    height: 58px;
    margin: -9px 0;
}

.settings-app-hero__preview {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.settings-app-hero__preview a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    transition: all 0.15s ease;
}

.settings-app-hero__preview a:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
}

.settings-app-hero__phone {
    flex-shrink: 0;
    width: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -60px -10px -80px 0;
    position: relative;
}

.settings-app-hero__phone img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.5));
}

@media (max-width: 767.98px) {
    .settings-app-hero {
        flex-direction: column;
        padding: 28px 24px;
        gap: 24px;
        text-align: center;
    }

    .settings-app-hero__features {
        justify-content: center;
    }

    .settings-app-hero__stores {
        justify-content: center;
    }

    .settings-app-hero__phone {
        width: 120px;
        order: -1;
    }

    .settings-app-hero__name {
        font-size: 1.2rem;
    }
}

/* ===============================================================
   Subscription Pricing Table
   =============================================================== */

/* --- Pricing Grid (5-column layout for SMS bundles) --- */
.settings-sub-pricing-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    padding: 24px;
    align-items: stretch;
}

.settings-sub-pricing-grid--plan-compare {
    grid-template-columns: 1fr 1fr;
}

.settings-sub-pricing-grid--plan-current {
    grid-template-columns: 1fr;
}

.settings-sub-feature-pill {
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: var(--radius-pill) !important;
    padding: 0.5rem 0.8rem;
}

/* --- Individual Pricing Column --- */
.settings-sub-pricing-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 28px 16px 24px;
    position: relative;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.settings-sub-pricing-col:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Popular tier highlight */
.settings-sub-pricing-col--popular {
    border: 2px solid #e8651a;
    box-shadow: 0 4px 24px rgba(232, 101, 26, 0.15);
    transform: scale(1.03);
    z-index: 1;
    /* #41400 — reserve room for the absolutely-positioned ribbon so it never
       overlaps the plan name (it can wrap to two lines on narrow columns). */
    padding-top: 42px;
}

.settings-sub-pricing-col--popular:hover {
    box-shadow: 0 8px 32px rgba(232, 101, 26, 0.2);
}

/* Active (currently subscribed) tier */
.settings-sub-pricing-col--active {
    background: #f0fdf4;
    border-color: #22c55e;
}

/* --- Popular badge ribbon --- */
.settings-sub-pricing-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: #e8651a;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 16px;
    border-radius: 0 0 8px 8px;
    /* #41400 — keep the ribbon on a single line so it stays short and clears the title. */
    white-space: nowrap;
}

/* --- Pricing typography --- */
.settings-sub-pricing-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #111827;
    margin-bottom: 12px;
    margin-top: 8px;
}

.settings-sub-pricing-amount {
    font-size: 2rem;
    font-weight: 800;
    color: #111827;
    line-height: 1;
}

.settings-sub-pricing-interval {
    font-size: 0.85rem;
    font-weight: 400;
    color: #6b7280;
}

.settings-sub-pricing-vat {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 2px;
    margin-bottom: 14px;
}

.settings-sub-pricing-credits {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #ede9fe;
    color: #5b21b6;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 18px;
}

.settings-sub-pricing-grid--plan-current .settings-sub-pricing-col {
    width: 100%;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.settings-sub-pricing-grid--plan-current .settings-sub-pricing-amount {
    font-size: 2.25rem;
}

.settings-sub-pricing-grid--plan-current .settings-sub-pricing-name {
    font-size: 1.05rem;
}

.settings-sub-pricing-grid--plan-current .settings-sub-pricing-cta {
    display: flex;
    justify-content: center;
}

.settings-sub-pricing-grid--plan-current .settings-status-badge {
    min-width: 140px;
    text-align: center;
}

@media (min-width: 992px) {
    .settings-sub-pricing-grid--plan-current {
        padding-left: 32px;
        padding-right: 32px;
    }
}

.settings-sub-pricing-credits i {
    font-size: 0.75rem;
}

.settings-sub-pricing-cta {
    margin-top: auto;
    width: 100%;
}

.settings-sub-pricing-cta .btn {
    width: 100%;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px 12px;
}

/* Hero "Your Plan" card — soft pastel base, mouse-tracked spotlight,
   cyan-tinted lift on hover. The spotlight position is fed by --cb-mx/--cb-my,
   set from the mousemove handler on /Subscription. */
.settings-plan-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #e0f2fe 0%, #fef3c7 100%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.settings-plan-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient( 400px circle at var(--cb-mx, 50%) var(--cb-my, 0%), rgba(255, 255, 255, 0.55), transparent 40% );
    opacity: 0;
    transition: opacity 200ms ease;
}

.settings-plan-hero:hover {
    box-shadow: 0 12px 32px -10px rgba(14, 165, 233, 0.35);
}

.settings-plan-hero:hover::before {
    opacity: 1;
}

.settings-plan-hero > * {
    position: relative;
    z-index: 1;
}

/* Upgrade confirmation modal — soft brand-aligned bordered frame. The
   double-background trick keeps the white interior crisp while a slow
   teal→indigo gradient sweeps the border. Slow (12s) and low-saturation:
   "premium", not "novelty", on a money-commitment dialog. */
.settings-sub-upgrade-modal {
    overflow: hidden;
    border: 2px solid transparent !important;
    border-radius: 14px !important;
    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(135deg, #14b8a6, #0ea5e9, #6366f1, #0ea5e9, #14b8a6);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 250% 250%;
    background-repeat: no-repeat;
    animation: settingsSubUpgradeModalBrandSweep 12s ease-in-out infinite;
    box-shadow: 0 12px 32px -10px rgba(14, 165, 233, 0.25), 0 4px 12px -4px rgba(99, 102, 241, 0.18);
    transition: box-shadow 200ms ease;
}

.settings-sub-upgrade-modal:hover {
    box-shadow: 0 16px 40px -10px rgba(14, 165, 233, 0.35), 0 6px 16px -4px rgba(99, 102, 241, 0.25);
}

@keyframes settingsSubUpgradeModalBrandSweep {
    0% { background-position: 0% 50%, 0% 50%; }
    50% { background-position: 0% 50%, 100% 50%; }
    100% { background-position: 0% 50%, 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .settings-sub-upgrade-modal {
        animation: none;
    }
}

.settings-sub-upgrade-modal__feature-list {
    align-content: flex-start;
}

.settings-sub-upgrade-modal__feature-item {
    background: #f0f4ff;
    flex: 0 0 calc(50% - 8px);
}

/* --- Inline Active Subscription Panel --- */
.settings-sub-active {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-bottom: 1px solid #bbf7d0;
    padding: 20px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.settings-sub-active__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.settings-sub-active__header i {
    color: #16a34a;
    font-size: 1.1rem;
}

.settings-sub-active__plan {
    font-weight: 700;
    font-size: 0.95rem;
    color: #166534;
}

.settings-sub-active__info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    /* #41400 — grow to fill the row but don't shrink below the content: the detail
       lines are nowrap, so allowing the box to collapse (min-width:0) let "Next
       payment: …" overflow under the action buttons. Keeping the content min-width
       makes the actions wrap onto their own line when space is tight instead. */
    flex: 1 0 auto;
}

.settings-sub-active__detail {
    font-size: 0.82rem;
    color: #166534;
    white-space: nowrap;
}

.settings-sub-active__detail strong {
    font-weight: 600;
}

.settings-sub-active__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.settings-sub-active__actions .btn {
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: var(--radius-md);
}

.settings-sub-active__scheduled {
    width: 100%;
    margin-top: 4px;
    padding: 8px 12px;
    background: #fef3c7;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    font-weight: 600;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-sub-active__scheduled i {
    color: #f59e0b;
}

/* --- Skeleton loading animation --- */
.settings-sub-pricing-skeleton {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    padding: 24px;
}

.settings-sub-pricing-skeleton .skeleton-col {
    background: #f3f4f6;
    border-radius: 14px;
    height: 280px;
    position: relative;
    overflow: hidden;
}

.settings-sub-pricing-skeleton .skeleton-col::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: settings-sub-shimmer 1.5s infinite;
}

@keyframes settings-sub-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* --- Feature card color variants for subscription (now neutral, matching base) --- */

/* --- Standalone product card (inbound SMS, PTRight) --- */
.settings-sub-product {
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.settings-sub-product__info {
    flex: 1;
    min-width: 200px;
}

.settings-sub-product__name {
    font-weight: 700;
    font-size: 1rem;
    color: #111827;
    margin-bottom: 4px;
}

.settings-sub-product__desc {
    font-size: 0.84rem;
    color: #6b7280;
    line-height: 1.5;
}

.settings-sub-product__price {
    text-align: center;
    flex-shrink: 0;
}

.settings-sub-product__price-amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
}

.settings-sub-product__price-interval {
    font-size: 0.8rem;
    color: #6b7280;
}

.settings-sub-product__price-vat {
    font-size: 0.75rem;
    color: #9ca3af;
}

.settings-sub-product__action {
    flex-shrink: 0;
}

/* --- Responsive Breakpoints --- */
@media (max-width: 1399.98px) {
    .settings-sub-pricing-grid,
    .settings-sub-pricing-skeleton {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    .settings-sub-pricing-grid,
    .settings-sub-pricing-skeleton {
        grid-template-columns: repeat(2, 1fr);
    }

    .settings-sub-pricing-col--popular {
        transform: none;
    }

    .settings-sub-active {
        flex-direction: column;
        align-items: flex-start;
    }

    .settings-sub-active__actions {
        width: 100%;
    }

    .settings-sub-active__actions .btn {
        flex: 1;
    }
}

@media (max-width: 575.98px) {
    .settings-sub-pricing-grid,
    .settings-sub-pricing-skeleton {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 12px;
    }

    .settings-sub-pricing-grid--plan-compare {
        grid-template-columns: 1fr;
    }

    .settings-sub-pricing-col {
        padding: 24px 16px 20px;
    }

    .settings-sub-product {
        flex-direction: column;
        text-align: center;
    }

    .settings-sub-active {
        padding: 16px;
    }

    .settings-sub-upgrade-modal__body {
        padding-bottom: 12px !important;
    }

    .settings-sub-upgrade-modal__feature-list {
        max-height: min(34rem, 45dvh);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 4px;
    }

    .settings-sub-upgrade-modal__feature-item {
        flex-basis: 100%;
    }
}

/* Colour preview (Club Info page) */
.colour-preview {
    border: 1px solid #dee2e6;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.colour-preview-header {
    padding: 12px 16px;
}

.colour-preview-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.colour-preview-body {
    background: #fff;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.colour-preview-btn {
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: default;
    align-self: flex-start;
}

.colour-contrast-warning {
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffecb5;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.85rem;
}

/* --- Settings Toggle Panel --- */
/* A bordered panel with a form-switch header and collapsible body for dependent fields */
.settings-toggle-panel {
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    background: #fff;
}

.settings-toggle-panel:last-child {
    margin-bottom: 0;
}

.settings-toggle-panel__header {
    padding: 12px 16px;
    background: #f9fafb;
    border-radius: var(--radius-md);
}

.settings-toggle-panel--active .settings-toggle-panel__header {
    border-radius: var(--radius-md) 8px 0 0;
    border-bottom: 1px solid #e5e7eb;
}

.settings-toggle-panel__header .form-check {
    margin-bottom: 0;
}

.settings-toggle-panel__header .form-check-label {
    font-weight: 500;
    font-size: 0.9rem;
    color: #1e293b;
}

.settings-toggle-panel__header .form-text {
    margin-top: 2px;
    font-size: 0.8rem;
}

.settings-toggle-panel__body {
    padding: 16px;
    display: none;
}

.settings-toggle-panel--active .settings-toggle-panel__body {
    display: block;
}

/* --- Free Add-On Locked Overlay --- */
/* Transparent click target over disabled fields that are locked due to membership plan free add-ons */
.free-addon-locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 2;
}

/* --- Task Event Item --- */
/* Used on Task Settings page for event trigger rows */
.task-event-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.task-event-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.task-event-item:first-child {
    padding-top: 0;
}

.task-event-item__header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.task-event-item__header > i {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.task-event-item__text {
    flex: 1;
    min-width: 0;
}

.task-event-item__text .form-label {
    font-weight: 500;
    font-size: 0.9rem;
    color: #1e293b;
}

.task-event-item__text .form-text {
    font-size: 0.8rem;
    line-height: 1.3;
}

/* --- Settings Field Group --- */
/* Visual sub-heading within a card to group related fields */
.settings-field-group {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}

.settings-field-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.settings-field-group__title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* --- Settings Form Switch Row --- */
/* Consistent form-switch row for settings pages — mobile stacks label above toggle */
.settings-switch-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 8px 0;
}

.settings-switch-row .form-check-label {
    font-size: 0.88rem;
    color: #374151;
    line-height: 1.4;
}

/* Fix mobile layout for inline From/To time fields */
@media (max-width: 575.98px) {
    .settings-time-range {
        flex-direction: column;
        gap: 0.5rem;
    }

    .settings-time-range > div {
        width: 100%;
    }
}

/* --- Opening Hours List --- */
.opening-hours-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.opening-hours-row {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    padding: 12px;
    transition: border-color 0.15s ease;
}

.opening-hours-row:hover {
    border-color: #d1d5db;
}

.opening-hours-row--closure {
    background: #fef3c7;
    border-color: #fbbf24;
}

.opening-hours-row--closure:hover {
    border-color: #f59e0b;
}

.opening-hours-row .closure-fields {
    margin-top: 8px;
}

@media (min-width: 768px) {
    .opening-hours-row .closure-fields {
        margin-top: 0;
    }
}

/* Compact opening hours row */
.opening-hours-row {
    padding: 8px 10px;
    background: #fafafa;
}

.opening-hours-list {
    gap: 6px;
}

@media (max-width: 575.98px) {
    .opening-hours-row {
        padding: 10px;
    }

    .opening-hours-row .d-flex {
        gap: 6px !important;
    }

    .opening-hours-row select,
    .opening-hours-row input[type="time"] {
        flex: 1;
        min-width: 0;
    }

    .opening-hours-row .closure-fields {
        width: 100%;
        margin-top: 8px;
    }
}

/* --- Check-in Method Selector --- */
/* Visual card-based selector for check-in methods */
.checkin-method-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 1rem;
}

@media (min-width: 576px) {
    .checkin-method-selector {
        grid-template-columns: repeat(3, 1fr);
    }
}

.checkin-method-option {
    position: relative;
}

.checkin-method-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkin-method-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-lg);
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 100px;
}

.checkin-method-option label:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}

.checkin-method-option input[type="radio"]:checked + label {
    border-color: #7c3aed;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.checkin-method-option input[type="radio"]:checked + label .checkin-method-icon {
    color: #7c3aed;
}

.checkin-method-icon {
    font-size: 1.75rem;
    color: #9ca3af;
    margin-bottom: 8px;
    transition: color 0.2s ease;
}

.checkin-method-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;
}

.checkin-method-desc {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 2px;
}

/* Check-in method with "selected" badge */
.checkin-method-option input[type="radio"]:checked + label::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    background: #7c3aed;
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Block Users Inline Form --- */
.block-user-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.block-user-form .form-control {
    flex: 1;
}

.block-user-form .btn {
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* Empty state for blocked users - more compact */
.blocked-users-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f0fdf4;
    border-radius: var(--radius-md);
    color: #166534;
    font-size: 0.88rem;
}

.blocked-users-empty i {
    font-size: 1.25rem;
    opacity: 0.7;
}

/* --- Access Settings Hero Card --- */
/* A featured card at the top of access settings for the check-in method */
.settings-hero-card {
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 1.5rem;
}

.settings-hero-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.settings-hero-card__icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.settings-hero-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.settings-hero-card__subtitle {
    font-size: 0.85rem;
    color: #64748b;
    margin: 4px 0 0 0;
}

/* --- Settings Hero Toggle --- */
/* A large clickable toggle panel for primary on/off decisions */
.settings-hero-toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.settings-hero-toggle:hover {
    border-color: color-mix(in srgb, var(--club-colour, #6366f1) 40%, #dee2e6);
    background: linear-gradient(135deg, #f5f5f5 0%, #f0f0f0 100%);
}

.settings-hero-toggle:has(input:checked) {
    border-color: var(--club-colour, #6366f1);
    background: color-mix(in srgb, var(--club-colour, #6366f1) 5%, white);
}

.settings-hero-toggle__icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.settings-hero-toggle__content {
    flex: 1;
    min-width: 0;
}

.settings-hero-toggle__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.settings-hero-toggle__subtitle {
    font-size: 0.85rem;
    color: #64748b;
    margin: 4px 0 0 0;
}

.settings-hero-toggle__switch {
    display: flex;
    align-items: center;
}

.settings-hero-toggle__switch .form-check-input {
    width: 3em;
    height: 1.5em;
    margin: 0;
    cursor: pointer;
}

/* Mobile: stack vertically and make toggle more prominent */
@media (max-width: 575px) {
    .settings-hero-toggle {
        flex-wrap: wrap;
    }

    .settings-hero-toggle__content {
        flex: 1 1 calc(100% - 64px);
    }

    .settings-hero-toggle__switch {
        width: 100%;
        justify-content: flex-end;
        padding-top: 12px;
        margin-top: 8px;
        border-top: 1px solid #e5e7eb;
    }

    .settings-hero-toggle__switch .form-check-input {
        width: 3.5em;
        height: 1.75em;
    }
}

/* --- ParQ Question Cards --- */
/* Card-based layout for health questionnaire setup */
.parq-question-card {
    border-bottom: 1px solid #e5e7eb;
    padding: 16px 20px;
    background: #fff;
    transition: background-color 0.15s ease;
}

.parq-question-card:hover {
    background: #fafafa;
}

.parq-question-card:last-child {
    border-bottom: none;
}

.parq-question-card__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.parq-drag-handle {
    width: 20px;
    min-width: 20px;
    padding-top: 10px;
    color: #d1d5db;
    cursor: grab;
    transition: color 0.15s ease;
    text-align: center;
}

.parq-drag-handle:hover {
    color: #6b7280;
}

.parq-drag-handle:active {
    cursor: grabbing;
}

.parq-question-card__number {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    margin-top: 6px;
}

.parq-question-card__main {
    flex: 1;
    min-width: 0;
}

.parq-question-input {
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    padding: 10px 14px;
}

.parq-question-input:focus {
    border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1);
}

.parq-question-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.parq-question-card__options {
    display: flex;
    gap: 16px;
    padding-left: 72px; /* Aligns with question input (drag handle + number + gap) */
    flex-wrap: wrap;
}

.parq-option-group {
    flex: 1;
    min-width: 140px;
    max-width: 200px;
}

.parq-option-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.parq-option-label input[type="text"] {
    font-size: 0.85rem;
    border-radius: 6px;
}

.parq-option-label input[type="text"]::placeholder {
    color: #9ca3af;
}

.parq-option-details {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 2px;
}

.parq-option-details .form-check-input {
    margin-top: 0;
    cursor: pointer;
}

.parq-option-details .form-check-label {
    color: #6b7280;
    cursor: pointer;
    user-select: none;
}

.parq-option-details .form-check-input:checked + .form-check-label {
    color: #7c3aed;
    font-weight: 500;
}

.parq-option-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-left: 2px;
}

.parq-option-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    line-height: 1.2;
    color: #9ca3af;
    background: #fff;
    cursor: pointer;
    user-select: none;
    margin: 0;
    transition: color 0.12s, background-color 0.12s, border-color 0.12s;
}

.parq-option-pill input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.parq-option-pill i {
    font-size: 0.75rem;
}

.parq-option-pill:hover {
    border-color: #d1d5db;
    color: #6b7280;
}

.parq-option-pill:has(input:checked) {
    background: #f5f3ff;
    border-color: #7c3aed;
    color: #6d28d9;
    font-weight: 500;
}

.parq-option-pill--highrisk:has(input:checked) {
    background: #fef3c7;
    border-color: #d97706;
    color: #92400e;
}

/* When the high-risk pill is active, tint the answer input amber so it's obvious at a glance which answer is flagged */
.parq-option-group:has(.parq-option-pill--highrisk input:checked) .parq-option-input {
    border-left: 3px solid #d97706;
    background-color: #fffbeb;
}

/* Locked pill — when rendered as a <button>, click opens an upgrade modal so
   the rest of the page stays usable (#39552). Native button chrome (font,
   line-height, box-sizing, padding) leaks through .parq-option-pill base
   rules unless explicitly reset, which made the button render visibly larger
   than the <label> version. Lock everything down to match pixel-for-pixel. */
button.parq-option-pill--locked {
    margin: 0;
    padding: 3px 9px;
    font-size: 0.75rem;
    font-family: inherit;
    line-height: 1.2;
    color: #9ca3af;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.parq-option-pill--locked {
    opacity: 0.5;
    cursor: pointer;
}

.parq-option-pill--locked:hover {
    opacity: 0.75;
    border-color: #fbbf24;
    color: #b45309;
}

/* Member alerts offcanvas list */
.alerts-panel__empty {
    text-align: center;
    padding: 1.5rem 0;
    color: #6b7280;
}
.alerts-panel__empty i {
    opacity: 0.3;
}
.alerts-panel__empty span {
    font-size: 0.9rem;
}
.alerts-panel__list {
    display: flex;
    flex-direction: column;
}
.alerts-panel__item {
    border-bottom: 1px solid #f1f5f9;
    padding: 10px 0;
}
.alerts-panel__item:last-child {
    border-bottom: none;
}
.alerts-panel__item--parq {
    background: #fffbeb;
    border-left: 3px solid #d97706;
    padding-left: 10px;
    margin-bottom: 6px;
    border-bottom: none;
    border-radius: 0 6px 6px 0;
}
.alerts-panel__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.alerts-panel__body {
    flex: 1;
    min-width: 0;
}
.alerts-panel__title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}
.alerts-panel__title {
    font-size: 0.9rem;
}
.alerts-panel__source {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
}
.alerts-panel__source--parq {
    background: #d97706;
    color: #fff;
}
.alerts-panel__detail {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0 0 3px;
}
.alerts-panel__meta {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Browser check-in SweetAlert alert rows */
.checkin-alert-popup {
    max-width: 520px;
}

.checkin-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-left: 4px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 6px;
}

.checkin-alert:last-child {
    margin-bottom: 0;
}

.checkin-alert__icon {
    font-size: 1rem;
    margin-top: 2px;
    color: #6b7280;
}

.checkin-alert__body {
    flex: 1;
    min-width: 0;
}

.checkin-alert__title {
    font-size: 0.9rem;
    color: #111827;
}

.checkin-alert__message {
    font-size: 0.82rem;
    color: #4b5563;
    margin-top: 2px;
    word-break: break-word;
}

.checkin-alert--critical {
    background: #fef2f2;
    border-left-color: #dc3545;
}

.checkin-alert--critical .checkin-alert__icon,
.checkin-alert--critical .checkin-alert__title {
    color: #7f1d1d;
}

.checkin-alert--warning {
    background: #fffbeb;
    border-left-color: #d97706;
}

.checkin-alert--warning .checkin-alert__icon,
.checkin-alert--warning .checkin-alert__title {
    color: #92400e;
}

.checkin-alert--info {
    background: #eff6ff;
    border-left-color: #0d6efd;
}

.checkin-alert--info .checkin-alert__icon,
.checkin-alert--info .checkin-alert__title {
    color: #1e40af;
}

/* Terminal check-in alert rows (used inside viewModel.MemberMessages) */
.terminal-alert {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 6px;
    border-left: 4px solid transparent;
}

.terminal-alert--critical {
    background: #fef2f2;
    border-left-color: #dc3545;
    color: #7f1d1d;
}

.terminal-alert--warning {
    background: #fffbeb;
    border-left-color: #d97706;
    color: #92400e;
}

.terminal-alert--info {
    background: #eff6ff;
    border-left-color: #0d6efd;
    color: #1e40af;
}

/* Help panel icons */
.parq-help-icon {
    width: 20px;
    min-width: 20px;
    text-align: center;
    padding-top: 2px;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .parq-question-card {
        padding: 14px 16px;
    }

    .parq-question-card__options {
        padding-left: 0;
        flex-direction: column;
        gap: 12px;
    }

    .parq-option-group {
        max-width: 100%;
        background: #f9fafb;
        border-radius: var(--radius-md);
        padding: 10px 12px;
    }

    .parq-option-label {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .parq-option-label input[type="text"] {
        flex: 1;
        min-width: 0;
    }

    .parq-option-details {
        white-space: nowrap;
    }

    .parq-drag-handle {
        padding-top: 8px;
    }
}

/* ParQ Sortable states */
.parq-sortable-ghost {
    opacity: 0.4;
    background: #f3e8ff;
}

.parq-sortable-chosen {
    background: #faf5ff;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}

.parq-sortable-drag {
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
}

/* --- Compact Settings List --- */
/* For toggle lists with less vertical padding */
.settings-compact-list .form-check {
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: 1px solid #f3f4f6;
}

.settings-compact-list .form-check:last-child {
    border-bottom: none;
}

.settings-compact-list .form-check-label {
    font-size: 0.88rem;
    font-weight: 500;
}

.settings-compact-list .form-text {
    margin-top: 2px;
    margin-left: 2.5em;
    font-size: 0.78rem;
    line-height: 1.3;
}

/* --- Compact Checkbox Picker --- */
/* Reusable component for searchable, scrollable checkbox lists */

.checkbox-picker {
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    background: #fff;
}

.checkbox-picker__header {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: var(--radius-md) 8px 0 0;
}

.checkbox-picker__search {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    padding: 0 10px;
}

.checkbox-picker__search:focus-within {
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
}

.checkbox-picker__search i {
    color: #9ca3af;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.checkbox-picker__search input {
    flex: 1;
    padding: 8px 10px;
    border: none;
    font-size: 0.85rem;
    line-height: 1.2;
    background: transparent;
    outline: none;
}

.checkbox-picker__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.checkbox-picker__count {
    font-size: 0.8rem;
    color: #6b7280;
}

.checkbox-picker__count strong {
    color: #1e293b;
}

.checkbox-picker__actions {
    display: flex;
    gap: 4px;
}

.checkbox-picker__actions button {
    padding: 4px 10px;
    font-size: 0.75rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: var(--radius-sm);
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
}

.checkbox-picker__actions button:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #1e293b;
}

.checkbox-picker__list {
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}

.checkbox-picker__item {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.checkbox-picker__item:hover {
    background: #f9fafb;
}

.checkbox-picker__item.checkbox-picker__item--hidden {
    display: none;
}

.checkbox-picker__item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    accent-color: #7c3aed;
    flex-shrink: 0;
}

.checkbox-picker__item label {
    margin: 0;
    font-size: 0.85rem;
    color: #374151;
    cursor: pointer;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkbox-picker__item a {
    color: #374151;
    text-decoration: none;
}

.checkbox-picker__item a:hover {
    color: #7c3aed;
    text-decoration: underline;
}

.checkbox-picker__empty {
    padding: 20px 12px;
    text-align: center;
    color: #9ca3af;
    font-size: 0.85rem;
}

.checkbox-picker__section {
    border-top: 1px solid #e5e7eb;
}

.checkbox-picker__section:first-child {
    border-top: none;
}

.checkbox-picker__section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9fafb;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    cursor: pointer;
}

.checkbox-picker__section-header:hover {
    background: #f3f4f6;
}

.checkbox-picker__section-header i {
    transition: transform 0.2s ease;
}

.checkbox-picker__section.collapsed .checkbox-picker__section-header i {
    transform: rotate(-90deg);
}

.checkbox-picker__section.collapsed .checkbox-picker__list {
    display: none;
}

.checkbox-picker__no-results {
    padding: 16px 12px;
    text-align: center;
    color: #9ca3af;
    font-size: 0.85rem;
    display: none;
}

.checkbox-picker__excluded-summary {
    padding: 8px 12px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    font-size: 0.8rem;
}

.checkbox-picker__non-qualifying {
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    background: #fafafa;
}

.checkbox-picker__non-qualifying .checkbox-picker__section-header {
    border-radius: var(--radius-md);
}

.checkbox-picker__non-qualifying-list {
    padding: 4px 0;
    border-top: 1px solid #e5e7eb;
}

.checkbox-picker__item--disabled {
    opacity: 0.7;
    cursor: default;
}

.checkbox-picker__item--disabled:hover {
    background: transparent;
}

/* --- Sales Funnel Stage List --- */
.funnel-stages-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.funnel-stage-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.funnel-stage-row:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.funnel-stage-row__drag {
    cursor: grab;
    padding: 8px;
    color: #9ca3af;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background 0.15s ease;
}

.funnel-stage-row__drag:hover {
    color: #6b7280;
    background: #f3f4f6;
}

.funnel-stage-row__drag:active {
    cursor: grabbing;
}

.funnel-stage-row__color {
    flex-shrink: 0;
}

.funnel-stage-color-input {
    width: 32px;
    height: 32px;
    padding: 2px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.funnel-stage-color-input:hover {
    border-color: #9ca3af;
}

.funnel-stage-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.funnel-stage-color-input::-webkit-color-swatch {
    border: none;
    border-radius: var(--radius-xs);
}

.funnel-stage-color-input::-moz-color-swatch {
    border: none;
    border-radius: var(--radius-xs);
}

.funnel-stage-row__fields {
    flex: 1;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.funnel-stage-row__name {
    flex: 0 0 180px;
}

.funnel-stage-row__description {
    flex: 1;
    min-width: 0;
}

.funnel-stage-row__actions {
    flex-shrink: 0;
}

.funnel-stage-row__actions .btn-outline-danger {
    border-color: #e5e7eb;
    color: #9ca3af;
}

.funnel-stage-row__actions .btn-outline-danger:hover {
    border-color: #ef4444;
    background: #fef2f2;
    color: #ef4444;
}

/* Sortable drag state */
.funnel-stages-list .ui-sortable-helper {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: #fff;
}

.funnel-stages-list .ui-sortable-placeholder {
    visibility: visible !important;
    background: #f3f4f6;
    border: 2px dashed #d1d5db;
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}

/* Responsive: stack fields on smaller screens */
@media (max-width: 768px) {
    .funnel-stage-row {
        flex-wrap: wrap;
    }

    .funnel-stage-row__fields {
        flex-direction: column;
        width: 100%;
        order: 2;
        margin-top: 8px;
    }

    .funnel-stage-row__name {
        flex: 1;
    }
}

/* =============================================================================
   REUSABLE UI COMPONENTS
   Picture Cards, Colour Cards, Status Tabs, Filter Toolbar, Card Grids
   ============================================================================= */

/* --- Action Button (pill-style filter/action button) --- */
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    text-decoration: none;
}

.action-btn--active {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

.action-btn--primary {
    background: var(--cui-nav-link-color, #4f46e5);
    border-color: var(--cui-nav-link-color, #4f46e5);
    color: var(--cui-nav-link-color-text, #ffffff);
}

.action-btn--primary:hover {
    background: var(--cui-nav-link-color, #4f46e5);
    border-color: var(--cui-nav-link-color, #4f46e5);
    color: var(--cui-nav-link-color-text, #ffffff);
    filter: brightness(0.92);
}

.action-btn i {
    font-size: 0.75rem;
}

/* --- Action Button Dropdown (unified split button) --- */
.action-btn-dropdown {
    display: inline-flex;
}

.action-btn-dropdown .action-btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.action-btn-dropdown .dropdown-toggle-split {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: 10px;
    padding-right: 10px;
    border-left: none;
}

.action-btn-dropdown .dropdown-toggle-split::after {
    margin-left: 0;
}


/* --- Picture Card (card with image header) --- */
.picture-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.picture-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    z-index: 10;
}

.picture-card--archived {
    opacity: 0.7;
}

.picture-card--featured {
    /* Featured status shown via badge only - no special border */
}

/* Image Section with Overlay */
.picture-card__image {
    position: relative;
    width: 100%;
    height: 140px;
    background: #f3f4f6;
    overflow: hidden;
    border-radius: var(--radius-lg) 12px 0 0;
}

.picture-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* #40079: bias the crop toward the upper portion of the photo so that
   faces (typically composed in the top half of the frame) are visible
   instead of foreheads or mouths from the default centre crop. */
.picture-card--member .picture-card__image img {
    object-position: 50% 25%;
}

.picture-card__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Overlay with actions (shows on hover) - positioned over image area only */
.picture-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: var(--radius-lg) 12px 0 0;
    pointer-events: none;
    z-index: 10;
}

.picture-card:hover .picture-card__overlay {
    opacity: 1;
}

/* Keep overlay visible when dropdown is open */
.picture-card:has(.dropdown-menu.show) .picture-card__overlay {
    opacity: 1;
    pointer-events: auto;
}

.picture-card__overlay .picture-card__actions {
    pointer-events: auto;
    padding-top: 0;
    border-top: none;
}

.picture-card__overlay .dropdown-toggle::after {
    display: none;
}

.picture-card__overlay .btn {
    color: white;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: var(--radius-sm);
    padding: 4px 8px;
}

.picture-card__overlay .btn:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Inline action buttons on picture card overlay */
.picture-card__actions-buttons {
    pointer-events: auto;
    display: flex;
    gap: 4px;
    position: absolute;
    top: 8px;
    right: 8px;
}

.picture-card__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.picture-card__action-btn:hover {
    background: rgba(0, 0, 0, 0.55);
    color: white;
}

/* Ensure card with open dropdown is always on top */
.picture-card:has(.dropdown-menu.show) {
    z-index: 100;
}

/* Featured badge on image - positioned at bottom-left */
.picture-card__featured-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1f2937;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
}

/* Promo code badge on image - top-right corner */
.picture-card__promo-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

/* Draft card styling */
.picture-card--draft {
    opacity: 0.85;
}

.picture-card--draft .picture-card__image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(107, 114, 128, 0.15);
    pointer-events: none;
}

/* Draft badge styling */
.badge-draft {
    background: #e5e7eb;
    color: #4b5563;
}

/* Attention indicator — yellow left border matching settings hub style */
.picture-card--attention {
    border-left: 3px solid #f59e0b;
}

/* Attention dot — 8px amber circle, matching settings-hub-attention-dot */
.picture-card__attention-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
}

/* Card view: dot sits beside the three-dots menu inside the overlay */
.picture-card__overlay .picture-card__attention-dot {
    pointer-events: auto;
    margin-top: 10px;
    margin-right: 6px;
}

/* Attention chip — labelled badge that replaces the lone dot on the plan card.
   Sits in the card footer / list visibility column alongside the status badge
   so the warning reads as a proper CTA instead of an easy-to-miss pixel. */
.picture-card__attention-chip {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    font-weight: 600;
    margin-right: 6px;
}

/* #41678 — list-row attention line: the labelled chip plus the actual reason text
   shown inline (not hover-only) so operators can see what needs fixing at a glance. */
.picture-card__attention-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.picture-card__attention-reason {
    color: #92400e;
    font-size: 0.8125rem;
}

/* Toolbar quick-filter button: amber variant for the "Needs attention" chip
   so the destination is visible as soon as the user lands from the Settings
   tile (otherwise they wouldn't know the filter was applied). */
.toolbar__filter-btn--attention {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}

.toolbar__filter-btn--attention.active {
    background: #f59e0b;
    color: #fff;
    border-color: #f59e0b;
}

.toolbar__filter-btn-count {
    margin-left: 6px;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.toolbar__filter-btn--attention.active .toolbar__filter-btn-count {
    background: rgba(255, 255, 255, 0.25);
}

/* Make Changes nav cards: attention state mirrors the settings-hub treatment
   (amber left bar + soft amber background + chip) so users can see at a
   glance which section of the plan still needs work. */
.mps-nav-card--attention {
    border-left: 3px solid #f59e0b;
    background: #fffbeb;
}

.mps-nav-card__attention {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 10px;
    white-space: nowrap;
}

/* #40581 — Google Places autocomplete dropdown sits at z-index 1000 by default,
   which renders it behind any open modal/offcanvas (Bootstrap modal is 1055).
   Lift it above so the suggestions appear when the New Membership wizard or
   any other modal uses the address typeahead. */
.pac-container {
    z-index: 1080 !important;
}

/* #40562 — Top-of-editor banner that lists every setup-incomplete reason
   and lets the operator deep-link into the section that needs attention.
   Matches the amber treatment used on the Make Changes nav cards above. */
.mpe-setup-banner {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 3px solid #f59e0b;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 14px 0;
}

.mpe-setup-banner__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mpe-setup-banner__icon {
    color: #f59e0b;
    font-size: 1.25rem;
    margin-top: 2px;
}

.mpe-setup-banner__title {
    font-weight: 700;
    color: #92400e;
    font-size: 0.95rem;
}

.mpe-setup-banner__sub {
    color: #78350f;
    font-size: 0.83rem;
}

.mpe-setup-banner__list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mpe-setup-banner__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: #fef3c7;
    border-radius: 6px;
    color: #78350f;
    text-decoration: none;
    transition: background 0.15s ease;
}

.mpe-setup-banner__link:hover {
    background: #fde68a;
    color: #78350f;
}

.mpe-setup-banner__section {
    font-weight: 600;
    min-width: 100px;
    color: #92400e;
}

.mpe-setup-banner__reason {
    flex: 1;
    font-size: 0.85rem;
}

.mpe-setup-banner__arrow {
    color: #b45309;
    font-size: 0.8rem;
}

/* Drag hint tooltip - positioned at top-left */
.picture-card__drag-hint {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
}

/* Show drag hint on hover when sortable is enabled */
.card-grid.ui-sortable .picture-card:hover .picture-card__drag-hint {
    opacity: 1;
    visibility: visible;
}

/* Grab cursor for sortable cards */
.card-grid.ui-sortable .picture-card {
    cursor: grab;
}

.card-grid.ui-sortable .picture-card:active {
    cursor: grabbing;
}

/* Show overlay always on desktop - for dropdown and attention dot visibility */
@media (min-width: 992px) {
    .card-grid .picture-card__overlay {
        opacity: 1;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent);
    }
}

/* Hide drag hint while dragging */
.picture-card.ui-sortable-helper .picture-card__drag-hint {
    display: none;
}

/* Content Section */
.picture-card__content {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.picture-card__content .member-status {
    max-width: 100%;
}

.picture-card__actions-bar {
    display: flex;
    gap: 0.5rem;
    padding: 0 14px 14px;
}

.picture-card__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.picture-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 6px 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
}

.picture-card__title .badge {
    font-size: 0.75rem;
    font-weight: 500;
    vertical-align: middle;
    margin-left: 6px;
}

/* Meta section (price + contract) */
.picture-card__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.picture-card__price {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.picture-card__age {
    font-size: 0.8rem;
    color: #6b7280;
    margin-left: 0.5rem;
}

.picture-card__highrisk {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 0.4rem;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: #d97706;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.picture-card__contract {
    font-size: 0.75rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 4px;
}

.picture-card__contract i {
    font-size: 0.75rem;
    color: #9ca3af;
}

.picture-card__meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #6b7280;
}

.picture-card__meta-item i {
    width: 14px;
    color: #9ca3af;
}

/* Card Footer Strip - combines pills and visibility */
.picture-card__footer {
    margin-top: auto;
    padding: 8px 10px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    border-radius: 0 0 12px 12px;
    margin-left: -14px;
    margin-right: -14px;
    margin-bottom: -14px;
}

/* #40604 — Element directly above the footer (e.g. the member-card status
   row "ACTIVE ANNUAL") had no enforced gap, so on tightly-packed cards it
   sat right up against the grey footer divider with no breathing room.
   Force a small bottom margin on whatever's immediately above the footer
   so the divider always has space above it. */
.picture-card__content > *:has(+ .picture-card__footer),
.picture-card > *:has(+ .picture-card__footer) {
    margin-bottom: 10px;
}

.picture-card__footer-icons {
    display: flex;
    gap: 3px;
}

.picture-card__footer-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.picture-card__footer-status .badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 8px;
}

/* Feature icons in footer */
.picture-card__icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: #374151;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.picture-card__icon--inactive {
    background: #e5e7eb !important;
    color: #9ca3af !important;
}

.picture-card__icon.has-tooltip {
    cursor: default;
    position: relative;
}

/* Legacy pills with text (for list view) */
.picture-card__pills {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.picture-card__pills--inline {
    margin-bottom: 0;
}

/* Inline category badge (shown next to title) */
.picture-card__category-inline {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    vertical-align: middle;
    margin-left: 6px;
}

/* Feature Icons Dashboard (legacy - kept for list view) */
.picture-card__feature-dashboard {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.picture-card__feature-icon {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background: #dcfce7;
    color: #166534;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    position: relative;
    cursor: default;
}

.picture-card__feature-icon--inactive {
    background: #f3f4f6;
    color: #9ca3af;
}

/* Tooltip for feature icons */
.picture-card__feature-icon.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 1000;
    pointer-events: none;
}

.picture-card__feature-icon.has-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

.picture-card__feature-icon.has-tooltip.has-tooltip--right::after {
    left: auto;
    right: 0;
    transform: none;
}

/* Visibility Section */
.picture-card__visibility {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.picture-card__visibility .form-check {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.picture-card__visibility .form-check-input {
    width: 2.2em;
    height: 1.1em;
    margin-top: 0; /* Reset Bootstrap's 0.25em margin for proper flex alignment */
    cursor: pointer;
}

.picture-card__visibility .form-check-input:checked {
    background-color: #2563eb;
    border-color: #2563eb;
}

.picture-card__visibility .form-check-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

.picture-card__visibility .badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 6px;
}

.picture-card__visibility .badge.has-tooltip {
    cursor: default;
    position: relative;
}

.picture-card__visibility .badge.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: auto;
    right: 0;
    background: #1f2937;
    color: #fff;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 1000;
}

.picture-card__visibility .badge.has-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Mobile reorder buttons (card view) */
.picture-card__reorder {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    justify-content: center;
}

.reorder-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.reorder-btn:hover:not(:disabled) {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}

.reorder-btn:active:not(:disabled) {
    background: #e5e7eb;
}

.reorder-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Hide reorder buttons on desktop (use drag instead) */
@media (min-width: 992px) {
    .picture-card__reorder {
        display: none;
    }
}

/* Category badge in visibility section (grid view) */
.picture-card__category-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    margin-left: auto;
}

/* Legacy badges (keep for backwards compatibility) */
.picture-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.picture-card__badge--online {
    background: #dcfce7;
    color: #166534;
}

.picture-card__badge--staff {
    background: #fef3c7;
    color: #92400e;
}

.picture-card__badge--category {
    background: #e0e7ff;
    color: #3730a3;
}

.picture-card__badge--archived {
    background: #fee2e2;
    color: #991b1b;
}

/* Legacy actions (keep for backwards compatibility) */
.picture-card__actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}

.picture-card__actions .btn {
    flex: 1;
    font-size: 0.75rem;
    padding: 6px 10px;
}

/* =====================================================
   Picture Card - Row Variant (List View)
   ===================================================== */
.picture-card--row {
    display: flex;
    flex-direction: row;
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    cursor: pointer;
}

.picture-card--row:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: #fafbfc;
}

/* Ensure row with open dropdown is on top and fully opaque */
.picture-card--row:has(.dropdown-menu.show) {
    z-index: 1000;
    position: relative;
}

.picture-card--row.picture-card--archived:has(.dropdown-menu.show) {
    opacity: 1;
}

.picture-card--row .picture-card__image {
    display: none;
}

.picture-card--row .picture-card__content {
    display: none;
}

.picture-card--row .picture-card__body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    gap: 16px;
}

/* Left group: thumbnail + info */
.picture-card__left-group {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

/* Featured star - inline with title */
.picture-card__featured-inline {
    color: #f59e0b;
    font-size: 0.75rem;
}

.picture-card__thumbnail {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
}

.picture-card__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.picture-card__thumbnail--placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.picture-card__info {
    min-width: 0;
    flex: 1;
}

.picture-card--row .picture-card__title {
    font-size: 0.9rem;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    -webkit-line-clamp: unset;
    text-align: left;
}

.picture-card__category {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    margin-left: 8px;
    vertical-align: middle;
}

.picture-card__subtitle {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    color: #6b7280;
}

.picture-card__price-inline {
    font-weight: 600;
    color: #111827;
}

/* Right group: features + visibility + actions */
.picture-card__right-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Feature icons inline variant */
.picture-card__feature-dashboard--inline {
    display: flex;
    gap: 3px;
    margin-bottom: 0;
}

.picture-card__feature-dashboard--inline .picture-card__feature-icon {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
}

/* Visibility section in row */
.picture-card--row .picture-card__visibility {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    display: flex;
    align-items: center;
    width: 180px;
    flex-shrink: 0;
    border-left: 1px solid #e2e8f0;
    padding-left: 1rem;
}

/* Drag zone for list view reordering */
.picture-card__drag-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    cursor: grab;
    border-radius: var(--radius-sm);
    color: #d1d5db;
    transition: background-color 0.15s, color 0.15s;
}

.picture-card__drag-zone:hover {
    background-color: #f1f5f9;
    color: #64748b;
}

.picture-card__drag-zone:active {
    cursor: grabbing;
    background-color: #e2e8f0;
}

/* Actions dropdown inline */
.picture-card__actions-inline {
    display: flex;
    align-items: center;
}

.picture-card__actions-inline .btn {
    color: #9ca3af;
    padding: 6px 8px;
}

.picture-card__actions-inline .btn:hover {
    color: #374151;
    background: #f3f4f6;
}

.picture-card__actions-inline .dropdown-menu {
    background-color: #fff;
    border: none;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    min-width: 160px;
    z-index: 1050;
}

/* Restore full opacity when dropdown is open on archived cards */
.picture-card--archived:has(.dropdown-menu.show) {
    opacity: 1;
}

/* jQuery UI sortable helper styles */
.picture-card.ui-sortable-helper {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: rotate(1deg);
    z-index: 1000;
}

.picture-card--row.ui-sortable-helper {
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ui-sortable-placeholder {
    visibility: visible !important;
    background: #e0f2fe !important;
    border: 2px dashed #3b82f6 !important;
    border-radius: var(--radius-lg);
}

/* Responsive adjustments for row view */
@media (max-width: 768px) {
    .picture-card__right-group {
        flex-wrap: wrap;
        gap: 8px;
    }

    .picture-card__feature-dashboard--inline {
        display: none;
    }

    .picture-card--row .picture-card__visibility {
        border-left: none;
        padding-left: 0;
    }
}

/* --- Colour Card (card with thin colour bar at top) --- */
.colour-card {
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    cursor: pointer;
}

.colour-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.colour-card--archived {
    opacity: 0.7;
}

.colour-card--archived:hover {
    opacity: 1;
}

.colour-card:has(.dropdown-menu.show) {
    z-index: 100;
}

.colour-card__colour-bar {
    height: 6px;
    background: var(--card-colour, #6366f1);
    border-radius: var(--radius-lg) 12px 0 0;
}

.colour-card__header {
    position: absolute;
    top: 14px;
    right: 12px;
    z-index: 2;
}

.colour-card__actions {
    position: relative;
}

.colour-card__actions .dropdown-toggle {
    background: transparent;
    border: none;
    padding: 4px 8px;
    color: #6b7280;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.colour-card__actions .dropdown-toggle:hover,
.colour-card__actions .dropdown-toggle:focus {
    background: #f3f4f6;
    color: #111827;
}

.colour-card__actions .dropdown-toggle::after {
    display: none;
}

.colour-card__actions .dropdown-menu {
    min-width: 160px;
    padding: 6px;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
    z-index: 1050;
}

.colour-card__actions .dropdown-item {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.875rem;
}

.colour-card__actions .dropdown-item:hover {
    background: #f3f4f6;
}

.colour-card__actions .dropdown-item i {
    width: 16px;
    text-align: center;
}

.colour-card__body {
    padding: 20px;
}

.colour-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px 0;
    padding-right: 32px;
}

.colour-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.colour-card__stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: #6b7280;
}

.colour-card__stat i {
    font-size: 0.8rem;
}

.colour-card__cap {
    margin-top: 12px;
}

.colour-card__cap .badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
}

/* --- Empty State --- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-state__icon {
    font-size: 3rem;
    color: #d1d5db;
    margin-bottom: 16px;
}

.empty-state__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px 0;
}

.empty-state__text {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0 0 20px 0;
    max-width: 360px;
}

/* (.modal-modern rules removed 2026-05-01 — markup migrated to the canonical
   .modal-styled. Rule was only ever used on MembershipPlanGroup/Index modals.) */

/* --- Selectable List - scrollable list with toggle items --- */
.selectable-list {
    max-height: 400px;
    overflow-y: auto;
}

.selectable-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s ease;
}

.selectable-list__item:hover {
    background: #f9fafb;
}

.selectable-list__item:last-child {
    border-bottom: none;
}

.selectable-list__name {
    font-size: 0.9rem;
    color: #374151;
}

.selectable-list__toggle {
    flex-shrink: 0;
}

/* Sortable helpers */
.sortable-ghost {
    opacity: 0.4;
}

.sortable-drag {
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Toolbar (Search & Filters)
   ============================================ */

.toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: var(--radius-lg);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.toolbar__search {
    position: relative;
    flex: 0 1 280px;
    min-width: 180px;
}

.toolbar__search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #868e96;
    font-size: 0.85rem;
    pointer-events: none;
}

.toolbar__search-input {
    width: 100%;
    padding: 0.5rem 0.875rem 0.5rem 2.25rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: var(--radius-md);
    background: #fff;
    color: #212529;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.toolbar__search-input:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.toolbar__search-input::placeholder {
    color: #adb5bd;
}

.toolbar__filters {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
}

/* #40999 — sales funnel bulk-select controls */
.toolbar__bulk {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.sf-bulk-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    white-space: nowrap;
}

.sf-bulk-check input {
    cursor: pointer;
    margin: 0;
}

.sf-bulk-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    margin-left: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 999px;
}

.toolbar__quick-filters {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.toolbar__quick-filters.d-none {
    display: none !important;
}

.toolbar__filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #495057;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.toolbar__filter-btn:hover {
    background: #e9ecef;
    border-color: #ced4da;
}

.toolbar__filter-btn.active {
    background: #212529;
    color: #fff;
    border-color: #212529;
}

.toolbar__filter-btn--open {
    background: #4f46e5;
    color: #fff;
    border-color: #4f46e5;
}

.toolbar__filter-btn--open:hover {
    background: #4338ca;
    color: #fff;
    border-color: #4338ca;
}

.toolbar__filter-btn i {
    font-size: 0.75rem;
}

.toolbar__filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 10px;
    padding: 0.05rem 0.4rem;
    min-width: 18px;
    background: #e9ecef;
    color: #495057;
    line-height: 1.3;
}

.toolbar__filter-badge--green {
    background: #dcfce7;
    color: #16a34a;
}

.toolbar__filter-badge--red {
    background: #fee2e2;
    color: #dc2626;
}

.toolbar__filter-badge--amber {
    background: #fef3c7;
    color: #d97706;
}

.toolbar__filter-badge--blue {
    background: #dbeafe;
    color: #2563eb;
}

.toolbar__filter-btn.active .toolbar__filter-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.toolbar__divider {
    width: 1px;
    height: 20px;
    background: #dee2e6;
    margin: 0 0.25rem;
    flex-shrink: 0;
}

.toolbar__category {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: 0.375rem;
    padding-left: 0.75rem;
    border-left: 1px solid #dee2e6;
}

.toolbar__select {
    height: 32px;
    padding: 0 2rem 0 0.75rem;
    font-size: 0.8125rem;
    color: #495057;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.5rem center/0.75rem;
    border: 1px solid #dee2e6;
    border-radius: var(--radius-md);
    cursor: pointer;
    appearance: none;
    min-width: 140px;
    box-sizing: border-box;
}

.toolbar__select:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.toolbar__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #6c757d;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    box-sizing: border-box;
}

.toolbar__icon-btn:hover {
    background: #e9ecef;
    color: #212529;
    border-color: #ced4da;
}

.toolbar__view-toggle {
    display: flex;
    margin-left: 0.375rem;
    padding-left: 0.75rem;
    border-left: 1px solid #dee2e6;
}

.toolbar__view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #6c757d;
    background: #fff;
    border: 1px solid #dee2e6;
    cursor: pointer;
    transition: all 0.15s ease;
}

.toolbar__view-btn:first-child {
    border-radius: var(--radius-md) 0 0 8px;
}

.toolbar__view-btn:last-child {
    border-radius: 0 8px 8px 0;
    border-left: none;
}

.toolbar__view-btn:hover {
    background: #e9ecef;
    color: #212529;
}

.toolbar__view-btn.active {
    background: #212529;
    color: #fff;
    border-color: #212529;
}

@media (max-width: 768px) {
    .toolbar {
        padding: 0.625rem 0.75rem;
    }

    .toolbar__search {
        flex: 1 1 100%;
        min-width: 0;
    }

    .toolbar__filters {
        justify-content: flex-start;
        width: 100%;
    }

    /* #41445 Mobile: let the inner toolbar section wrap so the search box,
       Refresh button and filter pills stack instead of overflowing sideways.
       The inbound panel forces nowrap on its filters at desktop (line ~45158);
       re-enable wrapping on phones so they don't run off the right edge. */
    .toolbar-section {
        flex-wrap: wrap;
    }

    [data-toolbar-tab="inbound-panel"] .toolbar__filters {
        flex-wrap: wrap;
    }

    .toolbar__category {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }

    .toolbar__view-toggle {
        margin-left: auto;
        padding-left: 0;
        border-left: none;
    }
}

/* Modal toolbar variant */
.toolbar--modal {
    background: #f8f9fa;
    border-radius: var(--radius-md);
    padding: 0.625rem 0.75rem;
    margin-bottom: 1rem;
}

.toolbar--modal .toolbar__search {
    flex: 1 1 200px;
}

.toolbar-section {
    display: flex;
    align-items: center;
    flex: 1;
    /* Wrap at every width, not just phones: when the search + Refresh + filter
       group can't fit the (nav-narrowed) content area, the filter group drops
       to its own row instead of overflowing the toolbar to the right. #41439 */
    flex-wrap: wrap;
    row-gap: 0.5rem;
    min-width: 0;
}

/* ============================================
   Tabs - Segmented Tab Control
   ============================================ */

.tabs {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    height: 36px;
    padding: 0;
    background: #f1f3f5;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 36px;
    padding: 0 0.875rem;
    border: none;
    background: transparent;
    color: #6c757d;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab:hover {
    color: #495057;
    background: rgba(255, 255, 255, 0.5);
}

.tab.active {
    background: #fff;
    color: #212529;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.tab__icon {
    font-size: 0.8rem;
    opacity: 0.7;
}

.tab.active .tab__icon {
    opacity: 1;
}

.tab[data-tab="active"].active .tab__icon {
    color: #198754;
}

.tab[data-tab="archived"].active .tab__icon {
    color: #6c757d;
}

.tab[data-tab="drafts"].active .tab__icon {
    color: #fd7e14;
}

.tab__label {
    display: inline;
}

.tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.375rem;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.tab.active .tab__count {
    background: #2563eb;
    color: #fff;
}

/* Mobile/Tablet responsive tabs */
@media (max-width: 767.98px) {
    .tabs {
        display: flex;
        width: 100%;
        height: auto;
        min-height: 44px;
    }

    .tab {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
        padding: 0.5rem 0.25rem;
        min-height: 44px;
    }

    .tab__label {
        font-size: 0.75rem;
    }

    .tab__icon {
        font-size: 1rem;
    }

    .tab__count {
        display: none;
    }
}

/* ============================================
   Card Grid & List
   ============================================ */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    padding: 0.5rem 0;
    position: relative; /* Required for jQuery UI sortable positioning */
}

.card-grid > .loader-wrap {
    grid-column: 1 / -1;
}

.card-grid__empty,
.card-grid__loading {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.card-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0;
    position: relative; /* Required for jQuery UI sortable positioning */
}

.card-list__empty,
.card-list__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Horizontal card row variant */
.picture-card--row {
    flex-direction: row;
    align-items: stretch;
    border-radius: var(--radius-md);
    overflow: visible !important;
    position: relative;
}

.picture-card--row:has(.dropdown-menu.show) {
    z-index: 1000;
}

.picture-card--row:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: #fafbfc;
}

.picture-card--row .plan-card__body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.75rem 1rem;
    flex: 1;
}

.picture-card--row .plan-card__thumbnail {
    position: static;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 6px;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.picture-card--row .plan-card__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.picture-card--row .plan-card__thumbnail--placeholder {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #9ca3af;
    font-size: 16px;
}

.picture-card--row .plan-card__left-group {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 1rem;
    min-width: 0;
}

.picture-card--row .plan-card__info {
    min-width: 0;
}

.picture-card--row .plan-card__title {
    padding-right: 0;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    font-size: 1rem;
}

.picture-card--row .plan-card__subtitle {
    font-size: 0.8rem;
    color: #718096;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-top: 2px;
}

.picture-card--row .plan-card__price-inline {
    font-weight: 600;
    color: #4a5568;
}

.picture-card--row .plan-card__right-group {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 1rem;
    flex-shrink: 0;
}

.picture-card--row .plan-card__feature-dashboard {
    flex-shrink: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.picture-card--row .plan-card__visibility {
    margin-top: 0;
    padding-top: 0;
    display: flex;
    align-items: center;
    width: 180px;
    flex-shrink: 0;
    border-left: 1px solid #e2e8f0;
    padding-left: 1rem;
}

.picture-card--row .plan-card__grip-handle {
    width: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    color: #94a3b8;
    cursor: grab;
}

.picture-card--row .plan-card__grip-handle:hover {
    color: #64748b;
}

.picture-card--row .plan-card__actions-inline {
    width: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    position: relative;
}

.picture-card--row .plan-card__actions-inline .btn {
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

.picture-card--row .plan-card__actions-inline .dropdown-menu {
    z-index: 1050;
}

/* Responsive row view */
@media (max-width: 1200px) {
    .picture-card--row .plan-card__right-group {
        gap: 0.75rem;
    }
    .picture-card--row .plan-card__visibility {
        width: 160px;
    }
}

@media (max-width: 992px) {
    .picture-card--row .plan-card__body {
        flex-wrap: wrap;
    }
    .picture-card--row .plan-card__right-group {
        gap: 0.5rem;
    }
    .picture-card--row .plan-card__feature-dashboard {
        display: none;
    }
    .picture-card--row .plan-card__visibility {
        width: 140px;
    }
}

@media (max-width: 576px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1400px) {
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    }
}

/* ============================================
   Category Card Grid
   ============================================ */

.category-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.category-card-grid__empty,
.category-card-grid__loading {
    grid-column: 1 / -1;
}

@media (max-width: 576px) {
    .category-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Pagination
   ============================================ */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: var(--radius-lg);
}

.pagination__info {
    color: #64748b;
    font-size: 0.875rem;
    padding-left: 1rem;
}

.pagination__controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.pagination__size {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #64748b;
}

.pagination__select {
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") no-repeat right 0.5rem center;
    background-size: 1.25rem;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.pagination__select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.pagination__nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pagination__btn:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.pagination__btn--disabled {
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.6;
}

.pagination__btn--page {
    min-width: 2.25rem;
    padding: 0.5rem 0.625rem;
}

.pagination__btn--active {
    background: #212529;
    border-color: #212529;
    color: #fff;
}

.pagination__btn--active:hover:not(:disabled) {
    background: #111827;
    border-color: #111827;
}

.pagination__ellipsis {
    padding: 0 0.375rem;
    color: #9ca3af;
    font-size: 0.875rem;
}

/* Responsive pagination */
@media (max-width: 768px) {
    .pagination {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
    }

    .pagination__info {
        text-align: center;
    }

    .pagination__controls {
        justify-content: space-between;
    }

    .pagination__nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination__btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    .pagination__btn--page {
        min-width: 2rem;
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    .pagination__controls {
        flex-direction: column;
        gap: 0.75rem;
    }

    .pagination__size {
        justify-content: center;
    }
}

/* Mobile footer clearance */
@media (max-width: 767.98px) {
    .pagination {
        margin-bottom: 60px;
    }
}

/* ============================================
   Assign Plans List (Modal)
   ============================================ */

.assign-plans-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.assign-plan-card {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.assign-plan-card--assigned {
    background: #e8f5e9;
    border-color: #c8e6c9;
}

.assign-plan-card--other {
    background: #fff8e1;
    border-color: #ffecb3;
}

.assign-plan-card__thumbnail {
    width: 48px;
    height: 48px;
    border-radius: 0.375rem;
    object-fit: cover;
    flex-shrink: 0;
}

.assign-plan-card__thumbnail--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    color: #adb5bd;
    font-size: 1.25rem;
}

.assign-plan-card__info {
    flex: 1;
    margin-left: 1rem;
    min-width: 0;
}

.assign-plan-card__name {
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assign-plan-card__category {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.125rem;
}

.assign-plan-card__category--warning {
    color: #856404;
}

.assign-plan-card__toggle {
    margin-left: 1rem;
    flex-shrink: 0;
}

.assign-plan-card__toggle .form-check-input {
    width: 2.5rem;
    height: 1.25rem;
    cursor: pointer;
}

.assign-plan-card__toggle .form-check-input:disabled {
    cursor: wait;
    opacity: 0.6;
}

/* ============================================
   Tooltip Utility (for feature icons)
   ============================================ */

.has-tooltip {
    position: relative;
    cursor: help;
}

.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    background: #1f2937;
    color: #fff;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease, visibility 0.1s ease;
    pointer-events: none;
    z-index: 1060;
}

.has-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

.has-tooltip[data-tooltip]:not(:hover)::after {
    content: '';
    padding: 0;
}

.has-tooltip--center::after {
    left: 50%;
    transform: translateX(-50%);
}

.has-tooltip--right::after {
    left: auto;
    right: 0;
}

/* #40640: --left opens the tooltip leftward (anchored to the element's right
   edge). It's applied to the attention dot in a card's top-right overlay, but
   had no CSS — so the nowrap tooltip stayed anchored left:0 and ran off the
   right of the viewport for right-column cards. That overflow flickers the
   horizontal scrollbar, which reflows the grid on hover (the "screen
   tremble"). Anchoring right keeps it on-screen. */
.has-tooltip--left::after {
    left: auto;
    right: 0;
}

/* Safety net: a long attention message would still make a single-line
   (nowrap) tooltip wide enough to overflow / get clipped at the card edge.
   Let the attention dot AND the "Setup incomplete" chip wrap within a sane
   width so the full message is readable and can't force horizontal scroll.
   (#40640 dot, #40562 chip) */
.picture-card__attention-dot.has-tooltip::after,
.picture-card__attention-chip.has-tooltip::after {
    white-space: normal;
    max-width: 240px;
    width: max-content;
}

/* #40662: the Retention Rate (and other KPI-card) info tooltips carry a
   full sentence — let them wrap within a sane width so they're readable
   and don't overflow the card. */
.member-kpi-card__info {
    margin-left: 0.3rem;
    color: #9ca3af;
    font-size: 0.8em;
    cursor: help;
}
.member-kpi-card__info.has-tooltip::after {
    white-space: normal;
    max-width: 240px;
    width: max-content;
}

/* Clickable elements with tooltips */
.has-tooltip.toolbar__icon-btn,
a.has-tooltip,
button.has-tooltip {
    cursor: pointer;
}

/* ============================================
   Global Dropdown Styling
   ============================================ */

.dropdown-menu {
    background-color: #fff;
    border: none;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    min-width: 160px !important;
    width: max-content !important;
}

.dropdown-menu--scrollable {
    max-height: 90vh;
    overflow-y: auto;
    width: auto;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 14px;
    color: #333;
    transition: background-color 0.15s ease;
    white-space: nowrap;
}

.dropdown-item svg.svg-inline--fa {
    width: 1.25em !important;
    margin: 0 !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #f5f5f5;
    color: #333;
}

.dropdown-item.text-danger i {
    color: #dc3545;
}

.dropdown-item.text-success i {
    color: #28a745;
}

.dropdown-divider {
    margin: 4px 0;
    border-top: 1px solid #eee;
}
}

/* ==========================================================================
   MEMBERSHIP PLAN WIZARD (mpw-*)
   7-step guided wizard for creating membership plans
   ========================================================================== */

/* Muted text in wizard */
.mpw-container .text-muted,
.mpw-container .form-text,
.mpw-step p.text-muted {
    color: #6b7280 !important;
}

.mpw-container .form-control::placeholder,
.mpw-container .form-select::placeholder,
.mpw-container textarea::placeholder {
    color: #9ca3af;
}

/* Force hide for wizard buttons - uses !important to prevent overrides */
.mpw-btn-hidden {
    display: none !important;
}

.mpw-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Progress Indicator */
.mpw-progress {
    margin-bottom: 1.5rem;
}

.mpw-progress-track {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

.mpw-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.mpw-progress-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    transition: all 0.2s ease;
}

.mpw-progress-step.active .mpw-progress-circle {
    background: var(--club-colour, #6366f1);
    border-color: var(--club-colour, #6366f1);
    color: var(--club-colour-contrast, white);
}

.mpw-progress-step.completed .mpw-progress-circle {
    background: var(--club-colour, #6366f1);
    border-color: var(--club-colour, #6366f1);
    color: var(--club-colour-contrast, white);
}

.mpw-progress-label {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.5rem;
    text-align: center;
    white-space: nowrap;
}

.mpw-progress-step.active .mpw-progress-label,
.mpw-progress-step.completed .mpw-progress-label {
    color: var(--club-colour, #6366f1);
    font-weight: 500;
}

.mpw-progress-line {
    width: 40px;
    height: 3px;
    background: #e5e7eb;
    margin: 0 0.25rem;
    margin-bottom: 1.5rem;
}

.mpw-progress-line.completed {
    background: var(--club-colour, #6366f1);
}

/* Clickable progress steps */
.mpw-progress-step.clickable {
    cursor: pointer;
}

.mpw-progress-step.clickable:hover .mpw-progress-circle {
    transform: scale(1.1);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--club-colour, #6366f1) 30%, transparent);
}

.mpw-progress-step.clickable:hover .mpw-progress-label {
    color: var(--club-colour, #6366f1);
}

/* Template Selection Grid */
.mpw-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.mpw-template-card {
    border: 2px solid #dee2e6;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    min-height: 88px;
}

.mpw-template-card:hover {
    border-color: var(--club-colour, #6366f1);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--club-colour, #6366f1) 15%, transparent);
}

.mpw-template-card.selected {
    border-color: var(--club-colour, #6366f1);
    background: color-mix(in srgb, var(--club-colour, #6366f1) 5%, white);
}

.mpw-template-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mpw-template-icon i {
    font-size: 1.25rem;
    color: #6b7280;
}

.mpw-template-card.selected .mpw-template-icon {
    background: var(--club-colour, #6366f1);
}

.mpw-template-card.selected .mpw-template-icon i {
    color: var(--club-colour-contrast, white);
}

.mpw-template-content {
    flex: 1;
    min-width: 0;
}

.mpw-template-name {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.mpw-template-desc {
    margin: 0;
    font-size: 0.875rem;
    color: #6c757d;
}

.mpw-template-check {
    color: var(--club-colour, #6366f1);
    font-size: 1.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mpw-template-card.selected .mpw-template-check {
    opacity: 1;
}

/* Form Elements */
.mpw-input {
    border-radius: var(--radius-md);
    border: 1px solid #d1d5db;
    padding: 0.625rem 0.875rem;
}

.mpw-input-group .input-group-text {
    border-radius: var(--radius-md) 0 0 8px;
    background: #f9fafb;
}

.mpw-checkbox .form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
}

.mpw-checkbox .form-check-label {
    padding-left: 0.25rem;
}

/* Image Upload */
.mpw-image-upload {
    margin-bottom: 1rem;
}

.mpw-image-input {
    display: none;
}

.mpw-image-preview {
    width: 200px;
    height: 150px;
    border: 2px dashed #dee2e6;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.15s ease-in-out;
    background: #f8f9fa;
}

.mpw-image-preview:hover {
    border-color: var(--club-colour, #6366f1);
    background: color-mix(in srgb, var(--club-colour, #6366f1) 5%, white);
}

.mpw-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mpw-image-placeholder {
    text-align: center;
    color: #9ca3af;
}

.mpw-image-placeholder i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.mpw-image-placeholder span {
    font-size: 0.75rem;
}

.mpw-image-actions {
    margin-top: 0.5rem;
}

/* Featured Toggle */
.mpw-featured-toggle {
    display: block;
    border: 2px solid #dee2e6;
    border-radius: var(--radius-md);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    background: #fff;
}

.mpw-featured-toggle:hover {
    border-color: #ffc107;
    background: #fffbeb;
}

.mpw-featured-toggle.selected {
    border-color: #ffc107;
    background: #fff9e6;
}

.mpw-featured-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.mpw-featured-toggle-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mpw-featured-toggle-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mpw-featured-toggle-icon i {
    font-size: 1.25rem;
    color: #6c757d;
}

.mpw-featured-toggle.selected .mpw-featured-toggle-icon {
    background: #ffc107;
}

.mpw-featured-toggle.selected .mpw-featured-toggle-icon i {
    color: #fff;
}

.mpw-featured-toggle-text {
    flex: 1;
}

.mpw-featured-toggle-text strong {
    display: block;
    margin-bottom: 0.25rem;
}

.mpw-featured-toggle-text span {
    font-size: 0.875rem;
    color: #6c757d;
}

.mpw-featured-toggle-check {
    font-size: 1.5rem;
    color: #dee2e6;
}

.mpw-featured-toggle.selected .mpw-featured-toggle-check {
    color: #ffc107;
}

/* Inclusions Section (Step 6) */
.mpw-inclusions-section {
    background: #f9fafb;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.mpw-inclusions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.mpw-inclusions-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #111827;
}

.mpw-inclusions-title i {
    color: #6b7280;
}

.mpw-inclusions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.mpw-inclusion-card {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.mpw-inclusion-card:hover {
    border-color: color-mix(in srgb, var(--club-colour, #6366f1) 40%, #dee2e6);
}

.mpw-inclusion-card.selected {
    border-color: var(--club-colour, #6366f1);
    background: color-mix(in srgb, var(--club-colour, #6366f1) 5%, white);
}

.mpw-inclusion-card input[type="checkbox"] {
    display: none;
}

.mpw-inclusion-card-image {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 0.5rem;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mpw-inclusion-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mpw-inclusion-card-image i {
    font-size: 1.25rem;
    color: #9ca3af;
}

.mpw-inclusion-card-image.activity {
    background: #dbeafe;
}

.mpw-inclusion-card-image.activity i {
    color: #3b82f6;
}

.mpw-inclusion-card-image.appointment {
    background: #d1fae5;
}

.mpw-inclusion-card-image.appointment i {
    color: #10b981;
}

/* Bolt-on card image variant (purple) */
.mpw-inclusion-card-image.bolton {
    background: #ede9fe;
}

.mpw-inclusion-card-image.bolton i {
    color: #8b5cf6;
}

/* Free add-on card image variant (teal) */
.mpw-inclusion-card-image.free-addon {
    background: #ccfbf1;
}

.mpw-inclusion-card-image.free-addon i {
    color: #14b8a6;
}

/* [+] Add new tile variant */
.mpw-inclusion-card--add {
    border: 2px dashed #d1d5db;
    background: #fafafa;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.mpw-inclusion-card--add:hover {
    border-color: #14b8a6;
    background: #f0fdfa;
}

.mpw-inclusion-card--add .mpw-inclusion-card-image {
    background: transparent;
}

.mpw-inclusion-card--add .mpw-inclusion-card-image i {
    font-size: 1.25rem;
}

.mpw-inclusion-card--add:hover .mpw-inclusion-card-image i {
    color: #0d9488;
}

.mpw-inclusion-card--add .mpw-inclusion-card-name {
    color: #9ca3af;
    font-size: 0.75rem;
}

.mpw-inclusion-card--add:hover .mpw-inclusion-card-name {
    color: #14b8a6;
}

/* Compact inclusion grid for use inside modals */
.mpw-inclusions-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
    max-height: 240px;
    overflow-y: auto;
    padding: 2px;
}

.mpw-inclusions-grid--compact .mpw-inclusion-card {
    padding: 0.5rem;
}

.mpw-inclusions-grid--compact .mpw-inclusion-card-image {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
}

.mpw-inclusions-grid--compact .mpw-inclusion-card-image i {
    font-size: 1.125rem;
}

.mpw-inclusions-grid--compact .mpw-inclusion-card-name {
    font-size: 0.75rem;
}

.mpw-inclusions-grid--compact .mpw-inclusion-card-badge {
    width: 18px;
    height: 18px;
    font-size: 0.75rem;
    top: 0.35rem;
    right: 0.35rem;
}

/* "All" toggle card for compact grids */
.mpw-inclusion-card--all {
    border-style: dashed;
}

.mpw-inclusion-card--all.selected {
    border-style: solid;
}

/* Credits metadata text on inclusion cards */
.mpw-inclusion-card-meta {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
    margin-top: 0.125rem;
}

/* Plan card image variant (amber) */
.mpw-inclusion-card-image.plan {
    background: #fef3c7;
}

.mpw-inclusion-card-image.plan i {
    color: #d97706;
}

/* Product/credit pack card image variant (emerald) */
.mpw-inclusion-card-image.product {
    background: #d1fae5;
}

.mpw-inclusion-card-image.product i {
    color: #059669;
}

/* Resource card image variant (sky blue) */
.mpw-inclusion-card-image.resource {
    background: #dbeafe;
}

.mpw-inclusion-card-image.resource i {
    color: #2563eb;
}

/* Staff card image variant (pink/rose) */
.mpw-inclusion-card-image.staff {
    background: #fce7f3;
}

.mpw-inclusion-card-image.staff i {
    color: #db2777;
}

/* Indicator icons for inclusion cards */
.mpw-inclusion-card-indicators {
    display: flex;
    gap: 4px;
    margin-top: 0.25rem;
}

.mpw-inclusion-card-indicators .picture-card__feature-icon {
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
}

/* Edit link on inclusion cards */
.mpw-inclusion-card-edit {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.9);
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    opacity: 0;
    transition: all 0.2s ease;
    text-decoration: none;
}

.mpw-inclusion-card:hover .mpw-inclusion-card-edit {
    opacity: 1;
}

.mpw-inclusion-card-edit:hover {
    background: var(--club-colour, #6366f1);
    color: #fff;
}

.mpw-inclusion-card-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    word-break: break-word;
    text-overflow: ellipsis;
}

.mpw-inclusion-card-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--club-colour, #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
}

.mpw-inclusion-card.selected .mpw-inclusion-card-badge {
    opacity: 1;
    transform: scale(1);
}

.mpw-inclusions-count {
    font-size: 0.8125rem;
    color: #6b7280;
}

.mpw-inclusions-empty {
    text-align: center;
    padding: 1.5rem;
    color: #6b7280;
}

.mpw-inclusions-empty i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #9ca3af;
}

/* ── Access Tab: tag-based relationship editor ── */
.access-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}

.access-status--locked {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.access-status--locked i {
    color: #dc2626;
}

.access-status--open {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.access-status--open i {
    color: #16a34a;
}

.access-section {
    margin-bottom: 1.25rem;
}

.access-section--group {
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 2px solid #e5e7eb;
}

.access-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.access-section__title {
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.access-section__title i {
    color: #6b7280;
    font-size: 0.8125rem;
}

.access-section__count {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

.access-section__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-height: 1.5rem;
}

.access-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    transition: all 0.15s ease;
}

.access-tag i:first-of-type {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.access-tag a {
    text-decoration: none;
    color: inherit;
}

.access-tag a:hover {
    text-decoration: underline;
}

.access-tag__remove {
    border: none;
    background: none;
    padding: 0;
    margin-left: 0.125rem;
    cursor: pointer;
    opacity: 0.5;
    font-size: 0.75rem;
    color: inherit;
    line-height: 1;
    transition: opacity 0.15s;
}

.access-tag:hover .access-tag__remove {
    opacity: 1;
}

.access-tag--plan {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.access-tag--product {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.access-tag--bolton {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
}

.access-tag--resource {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.access-tag--staff {
    background: #fce7f3;
    color: #9d174d;
    border: 1px solid #fbcfe8;
}

.access-tag--activity {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.access-tag--appointment {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.access-section__empty {
    font-size: 0.8125rem;
    color: #9ca3af;
    padding: 0.25rem 0;
    font-style: italic;
}

.access-section__no-items {
    font-size: 0.8125rem;
    color: #9ca3af;
}

.access-section__no-items a {
    color: var(--club-colour, #6366f1);
    cursor: pointer;
}

.access-section__add {
    margin-top: 0.5rem;
}

.access-add-select {
    padding: 0.375rem 0.625rem;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    font-size: 0.8125rem;
    color: #6b7280;
    background: #fff;
    cursor: pointer;
    outline: none;
    min-width: 220px;
    transition: border-color 0.2s;
}

.access-add-select:hover,
.access-add-select:focus {
    border-color: var(--club-colour, #6366f1);
    color: #374151;
}

/* ── Informational linked-info pattern (read-only relationship display) ── */
.linked-info-section {
    margin-bottom: 1rem;
}

.linked-info-section--group {
    margin-left: 1rem;
    padding-left: 0.75rem;
    border-left: 2px solid #e5e7eb;
}

.linked-info-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.linked-info-section__title {
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.linked-info-section__title i {
    color: #6b7280;
    font-size: 0.8rem;
}

.linked-info-section__count {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 500;
}

.linked-info-section__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.linked-info-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.625rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    text-decoration: none;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.linked-info-tag i:first-of-type {
    font-size: 0.75rem;
    opacity: 0.7;
}

.linked-info-tag span {
    font-weight: 500;
}

.linked-info-tag__arrow {
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.15s ease;
    margin-left: 0.125rem;
}

.linked-info-tag:hover .linked-info-tag__arrow {
    opacity: 0.6;
}

.linked-info-tag--plan {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.linked-info-tag--plan:hover {
    background: #fde68a;
    color: #78350f;
    text-decoration: none;
}

.linked-info-tag--product {
    background: #dbeafe;
    color: #1e40af;
    border-color: #bfdbfe;
}

.linked-info-tag--product:hover {
    background: #bfdbfe;
    color: #1e3a8a;
    text-decoration: none;
}

.linked-info-tag--activity {
    background: #ede9fe;
    color: #5b21b6;
    border-color: #ddd6fe;
}

.linked-info-tag--activity:hover {
    background: #ddd6fe;
    color: #4c1d95;
    text-decoration: none;
}

.linked-info-tag--appointment {
    background: #d1fae5;
    color: #065f46;
    border-color: #a7f3d0;
}

.linked-info-tag--appointment:hover {
    background: #a7f3d0;
    color: #064e3b;
    text-decoration: none;
}

.linked-info-section__empty {
    font-size: 0.8125rem;
    color: #9ca3af;
    padding: 0.5rem 0;
    font-style: italic;
}

.linked-info-section__hint {
    font-size: 0.75rem;
    color: #9ca3af;
    padding-top: 0.25rem;
}
/* #40578 — "Link more…" disclosure on the access tab. Lets operators tick
   additional plans / credit packs without having to leave the activity editor. */
.linked-info-section__add {
    margin-top: 0.5rem;
    border-top: 1px dashed #e5e7eb;
    padding-top: 0.5rem;
}
.linked-info-section__add-toggle {
    font-size: 0.8rem;
    color: var(--club-colour, #6366f1);
    cursor: pointer;
    padding: 0.25rem 0;
    list-style: none;
}
.linked-info-section__add-toggle::-webkit-details-marker { display: none; }
.linked-info-section__add-toggle i { margin-right: 0.35rem; }
.linked-info-section__add-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
}
.linked-info-section__add-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #374151;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    cursor: pointer;
}
.linked-info-section__add-row:hover { background: #f3f4f6; }
.linked-info-section__add-row input[type="checkbox"] { margin: 0; }

.linked-info-section__hint i {
    margin-right: 0.25rem;
    font-size: 0.75rem;
}

.linked-info-section__hint a {
    color: #6366f1;
    text-decoration: none;
}

.linked-info-section__hint a:hover {
    text-decoration: underline;
}

/* ── Access section description ── */
.linked-info-section__desc {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: -0.25rem;
    margin-bottom: 0.375rem;
}

/* ── Access two-column layout ── */
.access-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .access-columns {
        grid-template-columns: 1fr;
    }
}

/* ── Linked info: compact row list (read-only reference) ── */
.linked-info-section__rows {
    margin-bottom: 0.375rem;
}

.linked-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.5rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
    transition: background-color 0.1s ease;
}

.linked-info-row:hover {
    background-color: #f9fafb;
    color: #111827;
    text-decoration: none;
}

.linked-info-row__arrow {
    color: #d1d5db;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-left: 0.5rem;
    transition: color 0.1s ease;
}

.linked-info-row:hover .linked-info-row__arrow {
    color: #9ca3af;
}

/* ── Resource link card headers ── */
.resource-link-header {
    margin: 4px 0 0 0;
}

.resource-link-header__icon {
    font-size: 0.8em;
    opacity: 0.6;
}

/* ── Inclusion grid search input ── */
.mpw-inclusions-search {
    position: relative;
    display: flex;
    align-items: center;
}

.mpw-inclusions-search i {
    position: absolute;
    left: 0.625rem;
    color: #9ca3af;
    font-size: 0.75rem;
    pointer-events: none;
}

.mpw-inclusions-search input {
    padding: 0.375rem 0.625rem 0.375rem 1.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.8125rem;
    width: 160px;
    outline: none;
    transition: border-color 0.2s;
}

.mpw-inclusions-search input:focus {
    border-color: var(--club-colour, #6366f1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--club-colour, #6366f1) 15%, transparent);
}

/* ── Linked Items: compact relationship list for reverse-direction views ── */
.linked-items__explanation {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
    font-size: 0.8125rem;
    color: #1e40af;
    line-height: 1.5;
}

.linked-items__explanation i {
    margin-top: 2px;
    flex-shrink: 0;
    font-size: 0.875rem;
}

.linked-items__section {
    background: #f9fafb;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.linked-items__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid #e5e7eb;
}

.linked-items__section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #111827;
}

.linked-items__section-label i {
    color: #6b7280;
    font-size: 0.875rem;
}

.linked-items__section-count {
    font-weight: 400;
    font-size: 0.75rem;
    color: #6b7280;
    background: #e5e7eb;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 0.25rem;
}

.linked-items__section-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.linked-items__select-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.linked-items__select-all:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.linked-items__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.linked-items__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}

.linked-items__item:hover {
    background: #f3f4f6;
}

.linked-items__item.selected {
    background: color-mix(in srgb, var(--club-colour, #6366f1) 6%, white);
}

.linked-items__item input[type="checkbox"] {
    display: none;
}

.linked-items__item-check {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    border: 2px solid #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
    font-size: 0.75rem;
    color: transparent;
}

.linked-items__item.selected .linked-items__item-check {
    background: var(--club-colour, #6366f1);
    border-color: var(--club-colour, #6366f1);
    color: #fff;
}

.linked-items__item-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.75rem;
}

.linked-items__item-icon.plan {
    background: #fef3c7;
    color: #d97706;
}

.linked-items__item-icon.product {
    background: #dbeafe;
    color: #3b82f6;
}

.linked-items__item-icon.bolton {
    background: #ede9fe;
    color: #8b5cf6;
}

.linked-items__item-icon.resource {
    background: #d1fae5;
    color: #10b981;
}

.linked-items__item-icon.staff {
    background: #fce7f3;
    color: #ec4899;
}

.linked-items__item-name {
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.linked-items__item-link {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 0.75rem;
    opacity: 0;
    transition: all 0.15s ease;
    text-decoration: none;
}

.linked-items__item:hover .linked-items__item-link {
    opacity: 1;
}

.linked-items__item-link:hover {
    background: #e5e7eb;
    color: #374151;
}

.linked-items__section-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0.75rem;
    padding-top: 0.625rem;
    border-top: 1px solid #e5e7eb;
}

.linked-items__empty {
    text-align: center;
    padding: 1.25rem;
    color: #9ca3af;
    font-size: 0.8125rem;
}

.linked-items__empty i {
    display: block;
    font-size: 1.25rem;
    margin-bottom: 0.375rem;
}

/* ── Mini picture-card grid for renewable plan selection ── */
.mpe-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.picture-card--mini {
    position: relative;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-lg);
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.picture-card--mini .picture-card__image {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.picture-card--mini:hover {
    border-color: color-mix(in srgb, var(--club-colour, #6366f1) 40%, #dee2e6);
}

.picture-card--mini-selected:hover {
    border-color: var(--club-colour, #6366f1);
}

.picture-card--mini-selected {
    border-color: var(--club-colour, #6366f1);
    background: color-mix(in srgb, var(--club-colour, #6366f1) 5%, white);
}

.picture-card--mini input[type="checkbox"] {
    display: none;
}

.picture-card--mini .picture-card__image {
    height: 90px;
}

.picture-card--mini .picture-card__image-placeholder {
    font-size: 1.25rem;
}

.picture-card--mini .picture-card__content {
    padding: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.picture-card--mini .picture-card__title {
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    text-align: center;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.picture-card--mini .picture-card__meta {
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
    text-align: center;
}

.picture-card--mini .picture-card__price {
    font-size: 0.75rem;
    font-weight: 400;
    color: #6b7280;
}

.picture-card--mini .picture-card__contract {
    font-size: 0.75rem;
}

.picture-card--mini .picture-card__footer {
    margin-top: auto;
    padding: 6px 8px;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -10px;
    justify-content: center;
}

.picture-card--mini .picture-card__icon {
    background-color: var(--club-primary, #6366f1);
}

.picture-card--mini .picture-card__icon--inactive {
    background: #e5e7eb !important;
    color: #9ca3af !important;
}

/* Selection check badge */
.picture-card--mini__check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--club-colour, #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
    z-index: 2;
}

.picture-card--mini-selected .picture-card--mini__check {
    opacity: 1;
    transform: scale(1);
}

/* Edit link */
.picture-card--mini__edit {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    opacity: 0;
    transition: all 0.2s ease;
    text-decoration: none;
    z-index: 2;
}

.picture-card--mini:hover .picture-card--mini__edit {
    opacity: 1;
}

.picture-card--mini__edit:hover {
    background: var(--club-colour, #6366f1);
    color: #fff;
}

/* Age Restriction Controls */
.mpw-age-input {
    text-align: center;
}

.mpw-age-input label {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
    display: block;
}

.mpw-age-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.mpw-age-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mpw-age-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.mpw-age-value {
    width: 60px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-md);
    padding: 0.5rem;
}

.mpw-age-label {
    display: block;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.5rem;
}

/* Toggle Switch (iOS-style) */
.mpw-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.mpw-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mpw-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d1d5db;
    transition: 0.3s;
    border-radius: 24px;
}

.mpw-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.mpw-toggle-switch input:checked + .mpw-toggle-slider {
    background-color: var(--club-colour, #6366f1);
}

.mpw-toggle-switch input:checked + .mpw-toggle-slider:before {
    transform: translateX(20px);
}

/* Review Step (Step 7) */
.mpw-review-summary {
    background: linear-gradient(135deg, var(--club-colour, #6366f1) 0%, color-mix(in srgb, var(--club-colour, #6366f1) 80%, black) 100%);
    color: var(--club-colour-contrast, white);
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-lg);
    text-align: center;
}

.mpw-review-summary-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.mpw-review-summary-details {
    font-size: 0.95rem;
    opacity: 0.95;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}

.mpw-review-summary-details .mx-2 {
    opacity: 0.6;
}

.mpw-review-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.mpw-review-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.mpw-review-card-header {
    background: #f9fafb;
    padding: 0.875rem 1rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.mpw-review-card-header i {
    color: var(--club-colour, #6366f1);
    font-size: 1rem;
}

.mpw-review-card-body {
    padding: 1rem;
}

.mpw-review-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.mpw-review-item:last-child {
    border-bottom: none;
}

.mpw-review-item-label {
    color: #6b7280;
    font-size: 0.875rem;
}

.mpw-review-item-value {
    font-weight: 500;
    color: #111827;
    text-align: right;
}

.mpw-review-item-value--wrap {
    max-width: 60%;
    word-break: break-word;
}

.mpw-review-item-value--large {
    font-size: 1.125rem;
    font-weight: 600;
}

.mpw-review-item--highlight {
    background: #f9fafb;
    margin: 0 -1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
}

.mpw-review-item--success {
    color: #059669;
}

.mpw-review-item--success .mpw-review-item-value {
    color: #059669;
}

.mpw-review-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    background: #f3f4f6;
    color: #374151;
    margin-top: 0.5rem;
}

.mpw-review-badge--success {
    background: #d1fae5;
    color: #059669;
}

.mpw-review-badge--muted {
    background: #f3f4f6;
    color: #6b7280;
}

/* Preview Panel */
.mpw-preview-card {
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
}

.mpw-preview {
    font-size: 0.875rem;
}

.mpw-preview-title {
    font-size: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.mpw-preview-section {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.mpw-preview-section:last-child {
    border-bottom: none;
}

.mpw-preview-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin-bottom: 0.5rem;
}

.mpw-preview-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
}

.mpw-preview-total {
    font-weight: 600;
    border-top: 1px solid #e5e7eb;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.mpw-preview-info {
    color: #374151;
}

.mpw-preview-info i {
    color: #6b7280;
    margin-right: 0.375rem;
}

.mpw-preview-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mpw-preview-method {
    background: #f3f4f6;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: #374151;
}

.mpw-preview-method i {
    margin-right: 0.25rem;
    color: #6b7280;
}

.mpw-preview-schedule {
    font-size: 0.8125rem;
}

.mpw-preview-payment {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
}

.mpw-preview-payment-date {
    color: #6b7280;
}

.mpw-preview-payment-amount {
    font-weight: 500;
}

.mpw-preview-more {
    font-size: 0.75rem;
    font-style: italic;
    padding-top: 0.25rem;
}

/* Radio Cards */
.mpw-radio-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mpw-radio-card {
    border: 2px solid #dee2e6;
    border-radius: var(--radius-lg);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
}

.mpw-radio-card:hover {
    border-color: var(--club-colour, #6366f1);
}

.mpw-radio-card.selected {
    border-color: var(--club-colour, #6366f1);
    background: color-mix(in srgb, var(--club-colour, #6366f1) 5%, white);
}

.mpw-radio-card input[type="radio"] {
    display: none;
}

.mpw-radio-card-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mpw-radio-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mpw-radio-card-icon i {
    font-size: 1rem;
    color: #6c757d;
}

.mpw-radio-card.selected .mpw-radio-card-icon {
    background: var(--club-colour, #6366f1);
}

.mpw-radio-card.selected .mpw-radio-card-icon i {
    color: var(--club-colour-contrast, white);
}

.mpw-radio-card-text {
    display: flex;
    flex-direction: column;
}

.mpw-radio-card-text strong {
    font-size: 0.95rem;
}

.mpw-radio-card-text span {
    font-size: 0.85rem;
    color: #6c757d;
}

.mpw-radio-card-title {
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}

.mpw-radio-card-desc {
    font-size: 0.8125rem;
    color: #6b7280;
}

.mpw-radio-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f8f9fa;
    pointer-events: none;
}

.mpw-radio-card.disabled:hover {
    border-color: #dee2e6;
    background-color: #f8f9fa;
}

.mpw-radio-card.disabled input[type="radio"] {
    cursor: not-allowed;
}

/* Payment Methods (Step 5) */
.mpw-payment-methods {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mpw-payment-method {
    border: 2px solid #dee2e6;
    border-radius: var(--radius-lg);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
}

.mpw-payment-method:hover:not(.disabled) {
    border-color: var(--club-colour, #6366f1);
}

.mpw-payment-method.selected {
    border-color: var(--club-colour, #6366f1);
    background: color-mix(in srgb, var(--club-colour, #6366f1) 5%, white);
}

.mpw-payment-method.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #f8f9fa;
}

.mpw-payment-method-checkbox {
    flex-shrink: 0;
}

.mpw-payment-method-checkbox input[type="checkbox"] {
    width: 24px;
    height: 24px;
}

.mpw-payment-method-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mpw-payment-method-icon i {
    font-size: 1rem;
    color: #6c757d;
}

.mpw-payment-method.selected .mpw-payment-method-icon {
    background: var(--club-colour, #6366f1);
}

.mpw-payment-method.selected .mpw-payment-method-icon i {
    color: var(--club-colour-contrast, white);
}

.mpw-payment-method-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mpw-payment-method-content strong {
    font-size: 0.95rem;
}

.mpw-payment-method-content span {
    font-size: 0.85rem;
    color: #6c757d;
}

.mpw-payment-method-unavailable {
    font-size: 0.8rem;
    color: #dc3545;
    margin-top: 0.25rem;
}

/* Availability Options */
.mpw-availability-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mpw-availability-options .mpw-radio-card {
    flex-direction: row;
    padding: 1rem 1.25rem;
}

.mpw-availability-options .mpw-radio-card-content {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.mpw-availability-options .mpw-radio-card-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
}

.mpw-availability-options .mpw-radio-card-text {
    flex: 1;
}

@media (max-width: 576px) {
    .mpw-availability-options .mpw-radio-card-content {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* Contract Duration Controls (Step 4) */
.mpw-duration-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mpw-duration-control .mpw-duration-input {
    width: 80px !important;
    flex: 0 0 80px;
}

.mpw-duration-control .mpw-duration-unit {
    width: 130px !important;
    flex: 0 0 130px;
}

/* Contract End Behavior Radio Cards */
.mpw-end-behavior {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Responsive */
@media (max-width: 992px) {
    .mpw-progress-line {
        width: 20px;
    }

    .mpw-progress-label {
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    .mpw-template-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mpw-payment-methods {
        grid-template-columns: 1fr;
    }

    .mpw-availability-options {
        grid-template-columns: 1fr;
    }

    .mpw-end-behavior {
        grid-template-columns: 1fr;
    }

    .mpw-review-cards {
        grid-template-columns: 1fr;
    }

    .mpw-progress-label {
        display: none;
    }
    /* ...but keep the CURRENT step's label so the user still has orientation
       (bare numbered circles gave no context on the smallest screens). */
    .mpw-progress-step.active .mpw-progress-label {
        display: block;
    }

    .mpw-progress-line {
        width: 30px;
    }
}

/* Wizard Time Restriction Grid */
.mpw-time-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    overflow: hidden;
}

.mpw-time-grid-row {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    gap: 0.25rem;
    transition: opacity 0.15s ease;
}

.mpw-time-grid-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.mpw-time-blocks {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 3rem;
}

.mpw-time-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mpw-time-block-remove {
    border: none;
    background: none;
    color: #6c757d;
    padding: 0.25rem 0.4rem;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    line-height: 1;
}
.mpw-time-block-remove:hover {
    color: #dc2626;
    background: #fef2f2;
}

.mpw-time-block-add {
    font-size: 0.8rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0.15rem 0;
    text-decoration: none;
    display: inline-block;
}
.mpw-time-block-add:hover {
    color: #0d6efd;
}

.mpw-time-grid-row:last-child {
    border-bottom: none;
}

.mpw-time-grid-row--disabled {
    opacity: 0.65;
    background: #f9f9f9;
}
.mpw-time-grid-row--disabled .mpw-time-grid-toggle {
    opacity: 1;
}

.mpw-time-grid-toggle {
    min-width: 120px;
    margin-bottom: 0;
}

.mpw-time-grid-day {
    font-weight: 500;
    font-size: 0.875rem;
}

.mpw-time-grid-times {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.mpw-time-grid-separator {
    color: #6c757d;
    font-size: 0.85rem;
}

.mpw-time-input {
    width: 110px;
    font-size: 0.85rem;
}

.mpw-time-grid-status {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    min-width: 60px;
    text-align: center;
    margin-left: auto;
}
.mpw-time-grid-status--allowed { color: #16a34a; background: #f0fdf4; }
.mpw-time-grid-status--blocked { color: #dc2626; background: #fef2f2; }

@media (max-width: 576px) {
    .mpw-time-grid-row {
        gap: 0.25rem;
    }

    .mpw-time-grid-toggle {
        min-width: unset;
        width: 100%;
    }

    .mpw-time-blocks {
        padding-left: 1.5rem;
        width: 100%;
    }

    .mpw-time-block {
        flex-wrap: wrap;
    }

    .mpw-time-input {
        width: 0;
        flex: 1;
    }
}

/* =============================================
   DIARY VIEW TABS
   Compact horizontal tabs for switching between
   Classes, Appointments, and Schedule views
   ============================================= */

.diary-view-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #f3f4f6;
    padding: 4px;
    border-radius: var(--radius-md);
    width: fit-content;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* Wrapper to position tabs over calendar toolbar */
.diary-tabs-wrapper {
    position: relative;
    height: 0;
    overflow: visible;
}

.diary-view-tab {
    position: relative;
}

.diary-view-tab input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.diary-view-tab label,
a.diary-view-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
    text-decoration: none;
}

.diary-view-tab label i,
a.diary-view-tab i {
    font-size: 0.9rem;
    color: #9ca3af;
}

.diary-view-tab label:hover,
a.diary-view-tab:hover {
    background: rgba(255, 255, 255, 0.6);
    color: #374151;
}

.diary-view-tab input[type="radio"]:checked + label {
    background: #fff;
    color: #e8651a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.diary-view-tab input[type="radio"]:checked + label i {
    color: #e8651a;
}

/* Badge for count (shown inline) */
.diary-view-tab__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: #e8651a;
    border-radius: 9px;
}

.diary-view-tab__badge--muted {
    background: #9ca3af;
}

.diary-view-tab input[type="radio"]:checked + label .diary-view-tab__badge,
.diary-view-tab input[type="radio"]:checked + label .diary-view-tab__badge--muted {
    background: #e8651a;
}

/* Secondary style (for Schedule tab) - subtle separator */
.diary-view-tab--secondary label {
    border-left: 1px solid #e5e7eb;
    margin-left: 4px;
    padding-left: 18px;
    border-radius: 0 12px 12px 0;
}

.diary-view-tab--secondary input[type="radio"]:checked + label {
    border-radius: 6px;
    margin-left: 4px;
    border-left: none;
    padding-left: 14px;
}

/* Action style (for Schedule Class) */
a.diary-view-tab--action {
    background: #e8651a;
    color: #fff;
    border-left: 1px solid rgba(232, 101, 26, 0.3);
    margin-left: 4px;
}

a.diary-view-tab--action i {
    color: rgba(255, 255, 255, 0.9);
}

a.diary-view-tab--action:hover {
    background: #d45a16;
    color: #fff;
}

/* Mobile: Show icons only */
@media (max-width: 575px) {
    .diary-view-tabs {
        width: auto;
        margin: 0 auto;
    }

    .diary-view-tab label span:not(.diary-view-tab__badge),
    a.diary-view-tab span {
        display: none;
    }

    .diary-view-tab label,
    a.diary-view-tab {
        padding: 8px 12px;
    }
}

/* =============================================
   DIARY TOOLBAR & FILTER DROPDOWN
   ============================================= */

.diary-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.diary-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: #e8651a;
    border-radius: 9px;
}

.diary-filter-dropdown .dropdown-header {
    font-weight: 600;
    color: #374151;
    font-size: 0.85rem;
}

.diary-filter-dropdown .form-label {
    font-weight: 500;
}

/* Filter container - positioned in FullCalendar toolbar */
.diary-filter-container {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    vertical-align: middle;
}

.diary-filter-container .btn {
    border-radius: var(--radius-sm);
    font-size: 0.875em;
    padding: 0.4em 0.65em;
}

/* Diary toolbar wrapper - contains tabs and calendar on same visual row */
.diary-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 16px;
}

.diary-toolbar-row .diary-view-tabs {
    margin: 0;
}

/* FullCalendar toolbar styling */
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1em;
    flex-wrap: nowrap;
}

.fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk {
    display: flex;
    align-items: center;
}

/* Title styling - smaller when on left */
.fc .fc-toolbar-title {
    font-size: 1rem;
    font-weight: 500;
    color: #374151;
    margin-left: 12px !important;
}

/* Right chunk with view buttons and filter */
.fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:last-child {
    display: flex;
    align-items: center;
    gap: 0;
}
/* ============================================
   Membership Plan Edit Page - Settings Cards
   ============================================ */

/* Settings card container */
.mp-settings-card {
    margin-bottom: 1rem;
    border: 1px solid #dee2e6;
    border-radius: var(--radius-md);
}

/* Membership Plan Info tab - Description editor height to align with image */
.mp-settings-card .note-editable {
    min-height: 265px !important;
    max-height: 265px !important;
    overflow-y: auto;
}

.tab-pane .mp-settings-card:first-child,
.col-lg-3 > .mp-settings-card:first-child {
    margin-top: 1rem;
}

.mp-settings-card .card-header {
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    border-radius: var(--radius-md) 0.5rem 0 0;
}

.mp-settings-card .card-header h6 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #495057;
}

.mp-settings-card .card-header i {
    color: #6c757d;
    width: 1.25rem;
    text-align: center;
}

/* Action buttons in settings cards - override dark toolbar styling */
.mp-settings-card .action-btn,
.mpe-form-card .action-btn {
    color: #495057;
    background: #fff;
    border-color: #dee2e6;
}

.mp-settings-card .action-btn:hover,
.mpe-form-card .action-btn:hover {
    color: #212529;
    background: #f8f9fa;
    border-color: #adb5bd;
}

.mp-settings-card .card-body {
    padding: 1rem;
}

/* Plan Information card - reduce top spacing from row gutters */
#info .mp-settings-card:first-child .row.g-3,
#section-plan .mp-settings-card:first-child .row.g-3 {
    --bs-gutter-y: 0;
    margin-top: 0 !important;
}

#info .mp-settings-card:first-child .row.g-3 > [class*="col-"],
#section-plan .mp-settings-card:first-child .row.g-3 > [class*="col-"] {
    margin-top: 0 !important;
}

/* Status Panel for primary toggles (BookableOnline, CancelAtEndOfContract) */
.mp-status-panel {
    padding: 1rem;
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.mp-status-panel.is-enabled {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
}

.mp-status-panel.is-disabled {
    background: #fef3c7;
    border: 1px solid #fcd34d;
}

.mp-status-panel .status-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mp-status-panel .status-icon {
    font-size: 1.5rem;
}

.mp-status-panel.is-enabled .status-icon {
    color: #059669;
}

.mp-status-panel.is-disabled .status-icon {
    color: #d97706;
}

.mp-status-panel .status-text .status-title {
    font-weight: 600;
    margin-bottom: 0.125rem;
}

.mp-status-panel .status-text .status-description {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

/* Payment method grid */
.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.payment-method-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.payment-method-card {
    padding: 0.875rem;
    border: 2px solid #dee2e6;
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    background: #fff;
}

.payment-method-card:hover {
    border-color: #adb5bd;
}

.payment-method-card.is-active {
    border-color: #0d6efd;
    background: #e7f1ff;
}

.payment-method-card .payment-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.payment-method-card .payment-label i {
    color: #6c757d;
    width: 1.25rem;
    text-align: center;
}

.payment-method-card.is-active .payment-label i {
    color: #0d6efd;
}

/* Consistent switch sizing */
.mp-switch {
    width: 3em !important;
    height: 1.5em !important;
    cursor: pointer;
}

.mp-switch:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Form field styling within settings cards */
.mp-settings-card .form-label {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.375rem;
}

.mp-settings-card .form-text {
    font-size: 0.8125rem;
    color: #6c757d;
}

/* Image upload section for Info tab */
.mp-image-upload {
    border: 2px dashed #dee2e6;
    border-radius: var(--radius-md);
    padding: 0.5rem;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
    position: relative;
    background: #f8f9fa;
}

.mp-image-upload:hover {
    border-color: #0d6efd;
    background: #fff;
}

.mp-image-upload img {
    max-width: 100%;
    border-radius: 0.375rem;
    display: block;
}

.mp-image-upload-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 0.5rem;
    font-size: 0.875rem;
    border-radius: 0 0 0.375rem 0.375rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.mp-image-upload:hover .mp-image-upload-hint {
    opacity: 1;
}

/* URL section with copy button */
.mp-url-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid #e9ecef;
}

.mp-url-section a {
    word-break: break-all;
    color: #0d6efd;
}

.mp-url-section .btn-copy-url {
    flex-shrink: 0;
}

/* Age range cards with sliders */
.age-range-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: var(--radius-md);
    padding: 1rem;
}

.age-range-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.age-range-label {
    font-weight: 500;
    color: #495057;
}

.age-range-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0d6efd;
}

.age-range-card .form-range {
    margin: 0;
}

/* Draft Badge */
.draft-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
}

.draft-badge i {
    font-size: 0.75rem;
}

/* Membership Plan Edit - Plan Tabs */
.plan-tabs {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    height: 36px;
    padding: 0;
    background: #f1f3f5;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.plan-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 36px;
    padding: 0 0.875rem;
    border: none;
    background: transparent;
    color: #6c757d;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.plan-tab:hover {
    color: #495057;
    background: rgba(255, 255, 255, 0.5);
}

.plan-tab.active {
    background: #fff;
    color: #212529;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.plan-tab__icon {
    font-size: 0.8rem;
    opacity: 0.7;
}

.plan-tab.active .plan-tab__icon {
    opacity: 1;
}

.plan-tab__label {
    display: inline;
}

/* Scrollable tabs modifier (for pages with many tabs) */
.plan-tabs--scrollable {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 1;
    min-width: 0;
}

.plan-tabs--scrollable::-webkit-scrollbar {
    display: none;
}

/* Allow tabs to use anchor tags for CoreUI tab functionality */
a.plan-tab {
    text-decoration: none;
}

a.plan-tab:hover {
    text-decoration: none;
}

/* Reset CoreUI nav styles when used with plan-tabs */
.plan-tabs.nav {
    border-bottom: none;
    flex-wrap: nowrap;
}

.plan-tabs .nav-item {
    margin-bottom: 0;
}

.plan-tabs .nav-link.plan-tab {
    border: none;
    border-radius: var(--radius-md);
    margin-bottom: 0;
}

.plan-tabs .nav-link.plan-tab:hover,
.plan-tabs .nav-link.plan-tab:focus {
    border: none;
    isolation: isolate;
}

.plan-tabs .nav-link.plan-tab.active {
    border: none;
}

/* Tablet/Mobile - Full-width segmented control */
@media (max-width: 767.98px) {
    .plan-tabs {
        display: flex;
        width: 100%;
        height: auto;
        min-height: 44px;
    }

    .plan-tab {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
        padding: 0.5rem 0.25rem;
        min-height: 44px;
    }

    .plan-tab__label {
        font-size: 0.75rem;
    }

    .plan-tab__icon {
        font-size: 1rem;
    }
}

/* Bolt-on List (Compact Selection UI) */
.bolton-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
}

.bolton-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.bolton-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.bolton-item--selected {
    background: rgba(var(--cui-primary-rgb), 0.08);
    border-color: var(--cui-primary);
}

.bolton-item--universal {
    background: rgba(var(--cui-success-rgb), 0.08);
    border-color: rgba(var(--cui-success-rgb), 0.3);
}

.bolton-item__switch {
    flex: 1;
    min-width: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.bolton-item__switch .form-check-input {
    margin-top: 0;
}

.bolton-item__name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bolton-item__edit {
    color: #94a3b8;
    padding: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.bolton-item:hover .bolton-item__edit {
    opacity: 1;
}

.bolton-item__edit:hover {
    color: var(--cui-primary);
}

.bolton-container .form-check.form-switch {
    display: flex;
    align-items: center;
    padding-left: 2.5em;
    min-height: auto;
}

.bolton-container .form-check-label {
    margin-left: 0.5rem;
    line-height: 1;
}

.bg-primary-subtle {
    background-color: rgba(var(--cui-primary-rgb), 0.1) !important;
}

.bg-success-subtle {
    background-color: rgba(var(--cui-success-rgb), 0.1) !important;
}

/* ============================================
   Membership Plan - Checklist and Payment Card Styles
   ============================================ */

/* Checklist styling for Renewable Plans */
.mp-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mp-checklist-item {
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border-radius: 0.375rem;
    transition: background 0.15s ease;
}

.mp-checklist-item:hover {
    background: #e9ecef;
}

.mp-checklist-item .form-check {
    margin: 0;
    min-height: auto;
}

.mp-checklist-item .form-check-label {
    padding-left: 0.5rem;
}

.mp-checklist-item .form-check-label a {
    color: #495057;
    text-decoration: none;
}

.mp-checklist-item .form-check-label a:hover {
    color: #0d6efd;
    text-decoration: underline;
}

/* Payment Schedule styling */
.mp-payment-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mp-payment-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: var(--radius-md);
    overflow: hidden;
}

@keyframes mp-payment-card-added {
    0% { background-color: color-mix(in srgb, var(--admin-club-color, #667eea) 18%, #fff); border-color: var(--admin-club-color, #667eea); }
    100% { background-color: #fff; border-color: #dee2e6; }
}

.mp-payment-card--added {
    animation: mp-payment-card-added 1.5s ease-out;
}

.mp-payment-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.mp-payment-card-title {
    font-weight: 600;
    color: #495057;
}

.mp-payment-card-body {
    padding: 0.75rem 1rem;
}

.mp-payment-card-body > .row {
    margin-top: 0;
}

.mp-payment-card .form-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: #495057;
    margin-bottom: 0.375rem;
}

.mp-payment-card .form-text {
    font-size: 0.8125rem;
    color: #6c757d;
}

/* Inline switch with label */
.mp-inline-switch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.mp-inline-switch:last-child {
    border-bottom: none;
}

.mp-inline-switch .switch-label {
    font-weight: 500;
    color: #495057;
}

.mp-inline-switch .switch-description {
    font-size: 0.8125rem;
    color: #6c757d;
}

/* ============================================
   Plan Summary Panel - Sectioned Layout
   ============================================ */

.summary-panel {
    font-size: 0.875rem;
}

/* Section container */
.summary-section {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    background: #fff;
    overflow: hidden;
}

.summary-section:last-child {
    margin-bottom: 0;
}

/* Section header - collapsible or static */
.summary-section-header {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
    font-size: 0.8rem;
    color: #475569;
    gap: 0.5rem;
}

.summary-section-header i.section-icon {
    width: 16px;
    text-align: center;
    color: #64748b;
}

.summary-section-header .badge {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Collapsible section header */
.summary-section-header[data-coreui-toggle] {
    cursor: pointer;
    transition: background 0.15s ease;
}

.summary-section-header[data-coreui-toggle]:hover {
    background: #f1f5f9;
}

.summary-section-header .chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.summary-section-header[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

.summary-section-header .chevron + .badge {
    margin-left: 0.5rem;
}

/* Section body */
.summary-section-body {
    padding: 0.625rem 0.75rem;
}

/* Status rows - icon + text with color coding */
.summary-status-row {
    display: flex;
    align-items: center;
    padding: 0.25rem 0;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.summary-status-row i {
    width: 1.125rem;
    min-width: 1.125rem;
    text-align: center;
    flex-shrink: 0;
}

.summary-status-row--success i { color: #22c55e; }
.summary-status-row--warning i { color: #f59e0b; }
.summary-status-row--danger i { color: #ef4444; }
.summary-status-row--muted i { color: #94a3b8; }
.summary-status-row--info i { color: #3b82f6; }

.summary-status-row span {
    color: #475569;
}

.summary-status-row--muted span {
    color: #94a3b8;
}

/* Key-Value list */
.summary-kv-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-kv-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.8rem;
    padding: 0.125rem 0;
}

.summary-kv-item dt {
    color: #64748b;
    font-weight: 400;
    margin: 0;
}

.summary-kv-item dd {
    color: #1e293b;
    font-weight: 500;
    margin: 0;
    text-align: right;
}

.summary-kv-item dd.text-muted {
    color: #94a3b8;
    font-weight: 400;
}

.summary-kv-item--pills {
    align-items: flex-start;
}

.summary-kv-item--pills dd {
    flex: 1;
}

.summary-kv-item--pills .summary-pill-row {
    justify-content: flex-end;
    padding: 0;
}

/* Summary panel badge for override indicators */
.summary-kv-item .badge {
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    vertical-align: middle;
    font-weight: 500;
}

/* Payment method pills */
.summary-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.25rem 0;
}

.summary-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
    gap: 0.25rem;
}

.summary-pill--enabled {
    background: #dcfce7;
    color: #166534;
}

.summary-pill--disabled {
    background: #f1f5f9;
    color: #94a3b8;
    text-decoration: line-through;
}

.summary-pill--invalid {
    background: #fee2e2;
    color: #991b1b;
}

.summary-pill i {
    font-size: 0.75rem;
}

/* Compact alerts */
.summary-alert {
    display: flex;
    align-items: flex-start;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    margin-bottom: 0.625rem;
    gap: 0.5rem;
}

.summary-alert:last-child {
    margin-bottom: 0;
}

.summary-alert i {
    flex-shrink: 0;
    margin-top: 1px;
}

.summary-alert--danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.summary-alert--warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.summary-alert--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.summary-alert strong {
    font-weight: 600;
}

/* Compact scrollable lists for activities/bolt-ons/triggers */
.summary-compact-list {
    max-height: 120px;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    list-style: none;
}

.summary-compact-list li {
    padding: 0.25rem 0 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
}

.summary-compact-list li:last-child {
    border-bottom: none;
}

/* Empty state in lists */
.summary-empty {
    color: #94a3b8;
    font-size: 0.75rem;
    font-style: italic;
    padding: 0.25rem 0;
}

/* Schedule table - compact variant */
.summary-schedule-table {
    width: 100%;
    font-size: 0.75rem;
    border-collapse: collapse;
}

.summary-schedule-table thead th {
    background: #f8fafc;
    padding: 0.375rem 0.5rem;
    font-weight: 600;
    color: #475569;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.summary-schedule-table tbody td {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
}

.summary-schedule-table tbody tr:last-child td {
    border-bottom: none;
}

.summary-schedule-table tbody tr:hover {
    background: #f8fafc;
}

.summary-schedule-table .text-end {
    text-align: right;
}

/* Schedule info header */
.summary-schedule-info {
    text-align: center;
    padding: 0.5rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.75rem;
    color: #64748b;
}

.summary-schedule-info strong {
    color: #1e293b;
    font-weight: 600;
}

/* Payment summary banner */
.summary-payment-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.summary-payment-banner i {
    color: #3b82f6;
}

.summary-payment-banner span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e40af;
}

/* Divider between sections within a section body */
.summary-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 0.5rem 0;
}

/* Subsection grouping for categorized lists */
.summary-subsection {
    background: #f8fafc;
    border-radius: 0.375rem;
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.5rem;
}

.summary-subsection:last-child {
    margin-bottom: 0;
}

.summary-subsection-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.summary-subsection-label i {
    font-size: 0.75rem;
}

.summary-subsection-label--universal {
    color: #3b82f6;
}

.summary-subsection-label--optional {
    color: #22c55e;
}

.summary-subsection-label--info {
    color: #14b8a6;
}

.summary-subsection .summary-compact-list {
    margin: 0;
    padding-left: 0.25rem;
}

/* No payments message */
.summary-no-payments {
    text-align: center;
    padding: 1rem;
    color: #64748b;
    font-size: 0.8rem;
}

/* Warning action button variant */
.action-btn--warning {
    color: #b45309;
    background-color: #fef3c7;
    border-color: #fcd34d;
}

.action-btn--warning:hover {
    color: #92400e;
    background-color: #fde68a;
    border-color: #f59e0b;
}

/* Danger action button variant */
.action-btn--danger {
    color: #b91c1c;
    background-color: #fee2e2;
    border-color: #fca5a5;
}

.action-btn--danger:hover {
    color: #991b1b;
    background-color: #fecaca;
    border-color: #f87171;
}

/* --- Settings List --- */
/* Clean list component for simple settings pages (Member Groups, Marketing Sources, etc.) */
.settings-list {
    display: flex;
    flex-direction: column;
}

.settings-list__item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.15s;
}

.settings-list__item:last-child {
    border-bottom: none;
}

.settings-list__item:hover {
    background-color: #f8f9fa;
}

.settings-list__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 1rem;
    flex-shrink: 0;
}

.settings-list__content {
    flex: 1;
    min-width: 0;
}

.settings-list__name {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2px;
}

.settings-list__meta {
    font-size: 0.8125rem;
    color: #6b7280;
}

.settings-list__actions {
    display: flex;
    gap: 4px;
}

.settings-list__btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}

.settings-list__btn:hover {
    background-color: #e5e7eb;
    color: #374151;
}

.settings-list__btn--danger:hover {
    background-color: #fee2e2;
    color: #dc2626;
}

/* ========================================
   MEMBERS HUB
   ======================================== */

/* Summary Stats Bar */
.member-stats-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.member-stats-bar__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 0.75rem 1.25rem;
    flex: 1;
    min-width: 160px;
}

.member-stats-bar__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.member-stats-bar__item--clickable {
    cursor: pointer;
    transition: all 0.15s ease;
}

.member-stats-bar__item--clickable:hover {
    border-color: #6366f1;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
    transform: translateY(-1px);
}

.member-stats-bar__icon--active {
    background: #dcfce7;
    color: #16a34a;
}

.member-stats-bar__icon--new {
    background: #dbeafe;
    color: #2563eb;
}

.member-stats-bar__icon--atrisk {
    background: #fef3c7;
    color: #d97706;
}

.member-stats-bar__icon--expiring {
    background: #fee2e2;
    color: #dc2626;
}

.member-stats-bar__icon--unpaid {
    background: #fee2e2;
    color: #dc2626;
}

.member-stats-bar__icon--frozen {
    background: #dbeafe;
    color: #2563eb;
}

.member-stats-bar__icon--expired {
    background: #fef3c7;
    color: #d97706;
}

/* Conditional warning/danger states when count > 0 */
.member-stats-bar__item--ok .member-stats-bar__icon--unpaid,
.member-stats-bar__item--ok .member-stats-bar__icon--expired,
.member-stats-bar__item--ok .member-stats-bar__icon--atrisk {
    background: #dcfce7;
    color: #16a34a;
}

.member-stats-bar__value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #111827;
}

.member-stats-bar__label {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.2;
}

/* Member Table (list view) */
.member-table {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.member-table--embedded {
    border: none;
    border-radius: 0;
}

.card-body > .pagination {
    margin-top: 0;
    border-radius: 0;
}

/* Message recipients display */
.recipient-summary {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.recipient-summary__count {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

.recipient-summary__toggle {
    border: none;
    background: none;
    color: #6b7280;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.recipient-summary__toggle:hover,
.recipient-summary__toggle--active {
    color: #374151;
}

.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    width: 100%;
    margin-top: 0.25rem;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    line-height: 1.5;
    background: #f3f4f6;
    color: #374151;
}

.filter-pill--members {
    background: #eff6ff;
    color: #1e40af;
    font-weight: 600;
}

.filter-pill__label {
    color: #6b7280;
    font-weight: 500;
}

.member-table__head {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.member-table__row {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.1s;
}

.member-table__row:last-child {
    border-bottom: none;
}

.member-table__row:hover {
    background: #f9fafb;
}

.member-table__cell {
    min-width: 0;
}

/* Clickable sort headers on the contacts list (#40386). */
.member-table__cell--sortable {
    cursor: pointer;
    user-select: none;
}
.member-table__cell--sortable:hover {
    color: #111827;
}
.member-table__sort-icon {
    margin-left: 0.35rem;
    font-size: 0.75em;
    color: #9ca3af;
}
.member-table__cell--sortable--active {
    color: #111827;
}
.member-table__cell--sortable--active .member-table__sort-icon {
    color: #4f46e5;
}

.member-table__cell--photo {
    width: 48px;
    flex-shrink: 0;
    margin-right: 0.75rem;
    overflow: hidden;
}

.member-table__cell--photo img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.member-table__cell--name {
    flex: 1.5;
    min-width: 140px;
    padding-right: 1rem;
}

.member-table__cell--membership {
    flex: 1.8;
    min-width: 150px;
    padding-right: 1rem;
    overflow: hidden;
}

.member-table__cell--membership .member-status {
    max-width: 100%;
}

.member-table__cell--age {
    flex: 0 0 55px;
    text-align: center;
    padding-right: 0.5rem;
}

.member-table__cell--date {
    flex: 0.8;
    min-width: 90px;
    padding-right: 0.75rem;
}

.member-table__cell--extra {
    flex: 1.2;
    min-width: 100px;
    padding-right: 0.75rem;
}

/* #41957 — Terminal Details has 9 narrow columns; long NET2 URLs/usernames
   (e.g. https://localhost:8400) overflowed their cell and collided with the
   neighbouring column. Wrap long unbroken values in the extra cells so the
   full value stays readable. Scoped to the terminal table via the modifier so
   other member-table layouts are unaffected. */
.member-table--wrap-extra .member-table__cell--extra {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.member-table__cell--actions {
    width: 70px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.member-table__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    color: #9ca3af;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.member-table__action-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

/* Where the older MemberAvatarHtml.Render('tableImage') helper renders an
   avatar inside the new .member-table layout (e.g. /Member/Staff), bring it
   into line with the round avatars the rest of the table uses. Without this
   the staff list rendered rounded-square photos via the legacy --radius-md
   on .member-avatar.tableImage and looked off next to the round avatars
   elsewhere. (#40395) */
.member-table__cell--photo .member-avatar.tableImage {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 0.9rem;
}

.member-table__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.admin-club-logo {
    width: 64px;
    height: 64px;
    border-radius: 0;
    object-fit: contain;
}

/* ===== Admin clubs landing: favourite + recent quick-access ===== */
.admin-quick-access {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
}

.admin-quick-access__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.admin-quick-access__item:hover {
    background: #f3f4f6;
}

.admin-quick-access__logo {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

.admin-quick-access__logo--placeholder {
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    color: #6b7280;
}

.admin-quick-access__body {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-quick-access__name {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-quick-access__name:hover {
    text-decoration: underline;
}

.admin-quick-access__sub {
    font-size: 0.7rem;
    color: #6b7280;
    line-height: 1.3;
    word-break: break-all;
}

.admin-quick-access__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin-top: 2px;
    font-size: 0.7rem;
    color: #6b7280;
}

.admin-quick-access__meta .badge {
    font-size: 0.6rem;
}

.admin-quick-access__titlerow {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.admin-quick-access__titlerow .admin-quick-access__name {
    flex: 1 1 auto;
}

.admin-quick-access__time {
    flex-shrink: 0;
    color: #9ca3af;
    font-size: 0.68rem;
    white-space: nowrap;
}

.admin-quick-access__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.admin-quick-access__empty {
    font-size: 0.8rem;
    color: #6b7280;
    padding: 10px 8px;
}

/* Favourite star toggle (used on club rows and in the favourites section) */
.club-fav-star {
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    line-height: 1;
    font-size: 1rem;
    color: #cbd5e1;
}

.club-fav-star:hover {
    color: #f59e0b;
}

.club-fav-star--on {
    color: #f59e0b;
}

.club-fav-star:disabled {
    cursor: default;
    opacity: 0.6;
}

.member-table__cell--fav {
    width: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-table__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.member-table__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-table__subtext {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.3;
}

.member-table__date-text {
    font-size: 0.8rem;
    color: #374151;
}

/* Member Status Badges */
.member-status {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.member-status__plan {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    margin-left: 0.3em;
}

.member-status--active {
    background-color: #dcfce7;
    color: #166534;
}

.member-status--overdue {
    background-color: #fee2e2;
    color: #991b1b;
}

.member-status--frozen {
    background-color: #dbeafe;
    color: #1e40af;
}

.member-status--expired {
    background-color: #f3f4f6;
    color: #6b7280;
}

.member-status--cancelled {
    background-color: #fce7f3;
    color: #9d174d;
}

.member-status--prospect {
    background-color: #f5f3ff;
    color: #6d28d9;
}

.member-status--hotprospect {
    background-color: #ede9fe;
    color: #5b21b6;
}

.member-status--startingsoon {
    background-color: #e0f2fe;
    color: #0369a1;
}

.member-status--customer {
    background-color: #f3f4f6;
    color: #374151;
}

.member-status--none {
    background-color: #f3f4f6;
    color: #9ca3af;
}

.member-status--role {
    background-color: #ede9fe;
    color: #7c3aed;
}

/* Primary membership line — keeps the status pill and its detail (e.g.
   "(recurring)", "(21 days)") together as one connected unit on the same line. */
.member-status-line {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4em;
}

.member-status-detail {
    font-size: 0.72rem;
    line-height: 1.2;
    color: #6b7280;
}

/* Secondary memberships — subordinate sub-lines beneath the primary status pill.
   Deliberately quieter than .member-status: no filled background, smaller, muted,
   with a small colour-coded status dot so the primary membership stays the headline. */
.member-status-subs {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.3rem;
}

.member-status-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    line-height: 1.2;
    color: #6b7280;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.member-status-sub__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #9ca3af;
    flex: 0 0 auto;
    align-self: center;
}

.member-status-sub__label {
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7280;
    flex: 0 0 auto;
}

.member-status-sub__plan {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
    color: #4b5563;
}

.member-status-sub__detail {
    color: #9ca3af;
    flex: 0 0 auto;
}

.member-status-sub--active .member-status-sub__dot {
    background-color: #22c55e;
}

.member-status-sub--overdue .member-status-sub__dot {
    background-color: #ef4444;
}

.member-status-sub--frozen .member-status-sub__dot {
    background-color: #3b82f6;
}

.member-status-sub--startingsoon .member-status-sub__dot {
    background-color: #0ea5e9;
}

.member-status-sub--ending .member-status-sub__dot {
    background-color: #ec4899;
}

/* Joint membership badge */
.member-joint-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    background-color: #dbeafe;
    color: #1e40af;
    white-space: nowrap;
    vertical-align: middle;
}

.member-joint-badge--full {
    background-color: #f3f4f6;
    color: #6b7280;
}

/* #39569 — Joint-membership chip strip.
   Renders below the joint badge on the membership card (and at the top of
   the edit modal). One row of clickable chips so staff can see every linked
   member by name and jump to any of them in one click. */
.member-plan-card__joint-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.member-plan-card__joint-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 2px 10px 2px 2px;
    border-radius: var(--radius-pill, 999px);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #374151;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    max-width: 100%;
    transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
    cursor: pointer;
}

.member-plan-card__joint-chip:hover {
    background: #f9fafb;
    border-color: #cbd5e1;
    color: #111827;
    text-decoration: none;
    transform: translateY(-1px);
}

.member-plan-card__joint-chip--current {
    border-color: var(--club-color, #667eea);
    background: rgba(102, 126, 234, 0.06);
    color: #111827;
    cursor: default;
}

.member-plan-card__joint-chip--current:hover {
    transform: none;
    background: rgba(102, 126, 234, 0.06);
}

.member-plan-card__joint-chip-avatar {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: visible;
    background: #e5e7eb;
    color: #374151;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}

.member-plan-card__joint-chip-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.member-plan-card__joint-chip-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.member-plan-card__joint-chip-lead-icon {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.55rem;
    color: #f59e0b;
    background: #ffffff;
    border-radius: 50%;
    padding: 1px 2px;
    line-height: 1;
}

.member-plan-card__joint-chip-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.member-plan-card__joint-chip-tag {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: var(--radius-pill, 999px);
    background: var(--club-color, #667eea);
    color: #ffffff;
    margin-left: -0.1rem;
}

/* "Add member" CTA chip — sits at the end of the joint strip. Uses the
   admin brand orange as a clear "action" signal so it reads as a button
   rather than another member, and stays visually distinct from the
   club-coloured "current member" chip. No dashed border / fake avatar
   circle — those read as a 2010s placeholder, not a modern action. */
.member-plan-card__joint-chip--add {
    padding: 4px 12px;
    gap: 0.35rem;
    background: #fff7ed;
    border-color: #fed7aa;
    color: #c2410c;
    font-weight: 600;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.member-plan-card__joint-chip--add:hover {
    background: #e8651a;
    border-color: #e8651a;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(232, 101, 26, 0.25);
}

.member-plan-card__joint-chip--add-icon {
    font-size: 0.72rem;
}

/* Overdue card adjustments — keep chips readable on the dark hero */
.member-plan-card__main--overdue .member-plan-card__joint-chip {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

.member-plan-card__main--overdue .member-plan-card__joint-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.member-plan-card__main--overdue .member-plan-card__joint-chip--current {
    background: rgba(255, 255, 255, 0.08);
    border-color: #fca5a5;
    color: #ffffff;
}

.member-plan-card__main--overdue .member-plan-card__joint-chip-avatar {
    background: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

.member-plan-card__main--overdue .member-plan-card__joint-chip-lead-icon {
    background: #1e293b;
}

/* Keep the Add-member CTA readable on the overdue dark hero — slightly
   muted brand-orange tint so it doesn't get washed out by the generic
   overdue-chip rule above (which targets all chips on overdue cards). */
.member-plan-card__main--overdue .member-plan-card__joint-chip--add {
    background: rgba(232, 101, 26, 0.18);
    border-color: rgba(254, 215, 170, 0.4);
    color: #fed7aa;
}

.member-plan-card__main--overdue .member-plan-card__joint-chip--add:hover {
    background: #e8651a;
    border-color: #e8651a;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(232, 101, 26, 0.4);
}

/* Round member photo thumbnails */
.picture-card__thumbnail--round {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.picture-card__thumbnail--round img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.picture-card__thumbnail--round .picture-card__thumbnail--placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
}

/* Member card group badges */
.member-card__groups {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.member-card__group-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    background-color: #f3f4f6;
    color: #4b5563;
}

/* Member card date displays */
.member-card__date {
    font-size: 0.8rem;
    color: #6b7280;
}

.member-card__date strong {
    color: #374151;
}

/* #39095 — separator between Joined and Last seen on member tile cards. */
.member-card__date-sep {
    margin: 0 0.45rem;
    color: #cbd5e1;
}

/* When filters are open, toolbar connects to the panel below */
.toolbar--filters-open {
    border-radius: var(--radius-lg) 12px 0 0;
    margin-bottom: 0;
    border-bottom: 1px solid #c7d2fe;
}

/* Advanced Filters Panel */
.member-filters-panel {
    background: #f8f7ff;
    border: 1px solid #c7d2fe;
    border-top: none;
    border-radius: 0 0 12px 12px;
    margin-bottom: 1.25rem;
    position: relative;
}

.member-filters-panel__close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    color: #9ca3af;
    font-size: 0.85rem;
    transition: all 0.15s ease;
    z-index: 1;
}

.member-filters-panel__close:hover {
    background: #f3f4f6;
    color: #374151;
}

.member-filters-panel__header {
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.member-filters-panel__header:hover {
    background: #f3f4f6;
}

.member-filters-panel__title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.member-filters-panel__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #6366f1;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    min-width: 20px;
}

.member-filters-panel__toggle {
    color: #6b7280;
    transition: transform 0.3s;
}

.member-filters-panel__toggle--open {
    transform: rotate(180deg);
}

.member-filters-panel__body {
    padding: 0.75rem 1rem;
    display: none;
}

.member-filters-panel__body.show {
    display: block;
}

.member-filters-panel__row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.member-filters-panel__row--listboxes {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* Checkbox Dropdown Component */
.cb-dropdown {
    position: relative;
}

.cb-dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
    color: #374151;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cb-dropdown__trigger:hover {
    border-color: #adb5bd;
}

.cb-dropdown__trigger.open {
    border-color: #86b7fe;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

.cb-dropdown__trigger i {
    font-size: 0.75rem;
    color: #6b7280;
    margin-left: 0.5rem;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.cb-dropdown__trigger.open i {
    transform: rotate(180deg);
}

.cb-dropdown__menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    /* Ceiling only — tall enough to show the full Status list (10 options,
       ~420px) without an inner scrollbar. initCbDropdown() clamps this per-open
       to the space actually below the trigger so the menu never spills past the
       viewport on short screens; long lists (plans, staff, groups) then scroll
       inside the menu. (#40761) */
    max-height: 440px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 1050;
    overflow: hidden;
}

.cb-dropdown__menu.open {
    display: flex;
    flex-direction: column;
}

.cb-dropdown__search {
    padding: 0.5rem 0.65rem;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.8rem;
    outline: none;
    flex-shrink: 0;
}

.cb-dropdown__search::placeholder {
    color: #9ca3af;
}

.cb-dropdown__items {
    overflow-y: auto;
    padding: 0.25rem 0;
}

.cb-dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.85rem;
    color: #374151;
    cursor: pointer;
    transition: background 0.1s;
}

.cb-dropdown__item:hover {
    background: #f3f4f6;
}

.cb-dropdown__item input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    accent-color: #6366f1;
}

.cb-dropdown__item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cb-dropdown__count {
    background: #6366f1;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    margin-left: 0.35rem;
    flex-shrink: 0;
}

.member-filters-panel__row--dates {
    grid-template-columns: repeat(3, 1fr);
}

.member-filters-panel__row--bottom {
    grid-template-columns: 1fr 1fr 1fr;
}

.member-filters-panel__row + .member-filters-panel__row {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e9e5ff;
}

.member-filters-panel__field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.35rem;
}

/* Date range pair */
.filter-date-range {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.filter-date-range input {
    flex: 1;
    min-width: 0;
}

.filter-date-range__sep {
    font-size: 0.75rem;
    color: #9ca3af;
    flex-shrink: 0;
}

/* Age slider label */
.filter-age-label {
    font-weight: 400;
    color: #6366f1;
    margin-left: 0.5rem;
}

/* Dual-handle age range slider */
.filter-age-slider {
    position: relative;
    height: 36px;
    display: flex;
    align-items: center;
}

.filter-age-slider input[type="range"] {
    position: absolute;
    width: 100%;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 36px;
    margin: 0;
    padding: 0;
}

.filter-age-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
    border-radius: 2px;
}

.filter-age-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #6366f1;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    margin-top: -7px;
    position: relative;
    z-index: 2;
}

.filter-age-slider input[type="range"]::-moz-range-thumb {
    pointer-events: all;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #6366f1;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.filter-age-slider input[type="range"]::-moz-range-track {
    height: 4px;
    background: transparent;
}

.filter-age-slider__track {
    position: absolute;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
}

.filter-age-slider__track::after {
    content: '';
    position: absolute;
    height: 100%;
    background: #6366f1;
    border-radius: 2px;
    left: var(--range-left, 0%);
    right: var(--range-right, 0%);
}

.member-filters-panel__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e9e5ff;
    margin-top: 0.75rem;
}

.member-filters-panel__actions-right {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* Saved Filters Dropdown */
.saved-filters-dropdown {
    width: 340px;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.375rem 0;
}

.saved-filters-dropdown__loading {
    padding: 1.5rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.8125rem;
}

.saved-filters-dropdown__empty {
    padding: 1.5rem;
    text-align: center;
    color: #6b7280;
}

.saved-filters-dropdown__empty-icon {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 0.5rem;
    color: #9ca3af;
}

.saved-filters-dropdown__empty p {
    margin: 0 0 0.25rem 0;
    font-size: 0.8125rem;
}

.saved-filters-dropdown__item {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s;
    border-bottom: 1px solid #f3f4f6;
}

.saved-filters-dropdown__item:last-child {
    border-bottom: none;
}

.saved-filters-dropdown__item:hover {
    background-color: #f9fafb;
}

.saved-filters-dropdown__item--active {
    background-color: #eff6ff;
    border-left: 3px solid var(--club-color, #6366f1);
}

.saved-filters-dropdown__item-content {
    flex: 1;
    min-width: 0;
}

.saved-filters-dropdown__item-name {
    font-weight: 600;
    font-size: 0.8125rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saved-filters-dropdown__item-summary {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saved-filters-dropdown__item-delete {
    flex-shrink: 0;
    border: none;
    background: none;
    color: #d1d5db;
    padding: 0.25rem;
    margin-left: 0.5rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    font-size: 0.75rem;
}

.saved-filters-dropdown__item:hover .saved-filters-dropdown__item-delete {
    opacity: 1;
}

.saved-filters-dropdown__item-delete:hover {
    color: #ef4444;
    background-color: #fef2f2;
}

.saved-filters-dropdown__item-edit {
    flex-shrink: 0;
    border: none;
    background: none;
    color: #d1d5db;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    font-size: 0.75rem;
}

.saved-filters-dropdown__item:hover .saved-filters-dropdown__item-edit {
    opacity: 1;
}

.saved-filters-dropdown__item-edit:hover {
    color: #e8651a;
    background-color: #fef3ec;
}

/* Active Saved Filter Indicator */
.saved-filter-active {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
}

.saved-filter-active__clear {
    border: none;
    background: none;
    color: #93c5fd;
    cursor: pointer;
    padding: 0.125rem 0.25rem;
    margin-left: 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    transition: color 0.15s, background-color 0.15s;
}

.saved-filter-active__clear:hover {
    color: #1e40af;
    background-color: #dbeafe;
}

/* Member Group Card (Groups tab) */
.member-group-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}

.member-group-card:hover {
    border-color: #6366f1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
    transform: translateY(-2px);
}

.member-group-card__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f3f4f6;
}

.member-group-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.member-group-card__placeholder {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 50%, #a78bfa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.5);
}

.member-group-card__body {
    padding: 1rem 1.25rem 1.25rem;
}

.member-group-card__name {
    font-weight: 600;
    font-size: 1rem;
    color: #111827;
    margin: 0 0 0.5rem 0;
}

.member-group-card__count {
    font-size: 0.85rem;
    color: #6b7280;
}

.member-group-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.member-group-card__stat {
    font-size: 0.8rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.member-group-card__stat i {
    font-size: 0.75rem;
    color: #9ca3af;
}

.member-group-card__stat span {
    font-weight: 600;
    color: #374151;
}

/* Member Group Detail View */
.member-group-detail {
    margin-bottom: 1.5rem;
}

.member-group-detail__card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    display: flex;
    overflow: hidden;
}

.member-group-detail__image {
    width: 200px;
    min-height: 120px;
    flex-shrink: 0;
    background: #f3f4f6;
}

.member-group-detail__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.member-group-detail__image--placeholder {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 50%, #a78bfa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.4);
}

.member-group-detail__body {
    flex: 1;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.member-group-detail__info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.member-group-detail__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.member-group-detail__back {
    font-size: 0.9rem;
    color: #6366f1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
}

.member-group-detail__back:hover {
    text-decoration: underline;
}

/* Groups tab card grid */
.member-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* Filter count badge in toolbar */
.toolbar__filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dc2626;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 0.05rem 0.4rem;
    min-width: 16px;
    margin-left: 0.25rem;
}

/* Responsive adjustments for member stats bar */
@media (max-width: 768px) {
    .member-stats-bar {
        gap: 0.5rem;
    }

    .member-stats-bar__item {
        min-width: calc(50% - 0.5rem);
        padding: 0.5rem 0.75rem;
    }

    .member-stats-bar__value {
        font-size: 1.25rem;
    }

    .member-filters-panel__row {
        grid-template-columns: 1fr;
    }

    .member-groups-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .member-table__cell--extra {
        display: none;
    }

    .member-table__head .member-table__cell--extra {
        display: none;
    }

    .member-table__cell--age {
        display: none;
    }

    .member-table__head .member-table__cell--age {
        display: none;
    }
}

/* ============================================
   Members Hub - Analytics Dashboard Tab
   ============================================ */

.member-analytics {
    padding: 0;
}

.member-analytics__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.member-analytics__row--3col {
    grid-template-columns: 1fr 1fr 1fr;
}

/* KPI Trend Cards */
.member-kpi-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.member-kpi-card--link {
    cursor: pointer;
}
.member-kpi-card--link:hover {
    border-color: var(--admin-club-color, #667eea);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.member-kpi-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.member-kpi-card__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b7280;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.member-kpi-card__values {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.member-kpi-card__primary {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}

.member-kpi-card__secondary {
    font-size: 0.85rem;
    color: #9ca3af;
}

.member-kpi-card__trend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f3f4f6;
    font-size: 0.8rem;
}

.member-kpi-card__trend-value {
    font-weight: 600;
}

.member-kpi-card__trend-value--up {
    color: #16a34a;
}

.member-kpi-card__trend-value--down {
    color: #dc2626;
}

.member-kpi-card__trend-value--equal {
    color: #6b7280;
}

.member-kpi-card__trend-label {
    color: #9ca3af;
}

/* Chart Cards */
.member-chart-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
}

.member-chart-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 1rem 0;
}

.member-chart-card__canvas {
    position: relative;
    width: 100%;
    height: 280px;
}

/* Quick Lists */
.member-quick-list {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.member-quick-list__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.member-quick-list__title a {
    font-size: 0.8rem;
    font-weight: 500;
    color: #6366f1;
    text-decoration: none;
}

.member-quick-list__title a:hover {
    text-decoration: underline;
}

.member-quick-list__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.1s;
}

.member-quick-list__item:last-child {
    border-bottom: none;
}

.member-quick-list__item:hover {
    background: #f9fafb;
    margin: 0 -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: var(--radius-md);
}

.member-quick-list__photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.member-quick-list__photo-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.member-quick-list__info {
    flex: 1;
    min-width: 0;
}

.member-quick-list__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}

.member-quick-list__detail {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.3;
}

.member-quick-list__badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    flex-shrink: 0;
}

.member-quick-list__badge--warning {
    background: #fef3c7;
    color: #92400e;
}

.member-quick-list__badge--danger {
    background: #fee2e2;
    color: #991b1b;
}

.member-quick-list__empty {
    text-align: center;
    padding: 1.5rem 0;
    color: #9ca3af;
    font-size: 0.85rem;
}

/* Quick list info badge variant */
.member-quick-list__badge--info {
    background: #e0e7ff;
    color: #3730a3;
}

/* Period Selector */
.member-analytics__period-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.member-analytics__period-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #6b7280;
}

.member-analytics__period-pills {
    display: flex;
    gap: 0.25rem;
    background: #f3f4f6;
    border-radius: var(--radius-md);
    padding: 3px;
}

.member-analytics__period-pill {
    border: none;
    background: transparent;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
}

.member-analytics__period-pill:hover {
    color: #111827;
    background: rgba(255, 255, 255, 0.5);
}

.member-analytics__period-pill--active {
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.member-analytics__period-selector {
    flex-wrap: wrap;
}
.member-analytics__custom-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.member-analytics__custom-range input[type="date"] {
    max-width: 160px;
    font-size: 0.8rem;
}
.member-analytics__range-sep {
    font-size: 0.8rem;
    color: #6b7280;
}

/* 2-column KPI row for sleeping + retention */
.member-analytics__row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* KPI card link */
.member-kpi-card__link {
    font-size: 0.8rem;
    font-weight: 500;
    color: #6366f1;
    text-decoration: none;
}

.member-kpi-card__link:hover {
    text-decoration: underline;
}

/* Quick View Panel */
.quick-view-panel {
    width: 480px !important;
}

.quick-view-panel .offcanvas-header {
    border-bottom: none;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: #fff;
}

.quick-view-panel .offcanvas-header .offcanvas-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
}

.quick-view-panel .offcanvas-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* #38980 — "View full profile" CTA in the quick-view header. Sits between the
   member name and the close button so the route to the full profile is the
   first thing the user sees after the name. White-on-dark to match the header
   gradient; brightens on hover so it reads as primary, not decorative. */
.quick-view-panel__profile-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    margin-right: 0.85rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.quick-view-panel__profile-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
}
.quick-view-panel__profile-link i {
    font-size: 0.75rem;
}

.quick-view-panel .offcanvas-body {
    padding: 0;
    background: #f4f5f7;
}

/* Hero section - compact side-by-side layout */
.qv-hero {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
}

.qv-hero__photo {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 2px solid #fff;
    outline: 2px solid #e5e7eb;
}

.qv-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qv-hero__initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
}

.qv-hero__info {
    flex: 1;
    min-width: 0;
}

.qv-hero__meta {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.qv-hero__badges {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.qv-hero__plan {
    font-size: 0.78rem;
    font-weight: 500;
    color: #374151;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qv-hero__groups {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.qv-hero__pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.qv-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.qv-hero__pill i {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Stats strip */
.qv-stats {
    display: flex;
    justify-content: space-around;
    padding: 0;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

.qv-stats__item {
    text-align: center;
    flex: 1;
    padding: 0.7rem 0.5rem;
    position: relative;
}

.qv-stats__item + .qv-stats__item {
    border-left: 1px solid #f3f4f6;
}

.qv-stats__item:hover {
    background: #fafbfc;
}

.qv-stats__value {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.qv-stats__label {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.15rem;
}

/* In Club live status banner */
.qv-inclub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.25rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-bottom: 1px solid #bbf7d0;
}

.qv-inclub__info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #166534;
}

.qv-inclub__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
    animation: qv-pulse 2s ease-in-out infinite;
}

@keyframes qv-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
    50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.1); }
}

.qv-inclub__duration {
    color: #15803d;
    font-weight: 700;
    font-size: 0.82rem;
}

.qv-inclub__checkout-btn {
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid #22c55e;
    background: #fff;
    color: #166534;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.qv-inclub__checkout-btn:hover {
    background: #22c55e;
    color: #fff;
}

/* Overdue alert banner */
.qv-overdue {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
}

.qv-overdue__info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.qv-overdue__amount {
    font-size: 0.8rem;
    font-weight: 700;
    color: #dc2626;
    white-space: nowrap;
}

.qv-overdue__context {
    font-size: 0.72rem;
    color: #991b1b;
    line-height: 1.3;
}

.qv-overdue__last {
    font-size: 0.72rem;
    color: #7f1d1d;
    line-height: 1.3;
}

.qv-overdue__last--fail {
    font-weight: 600;
    color: #b91c1c;
}

.qv-overdue__last--fail i {
    margin-right: 0.15rem;
}

.qv-overdue__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.qv-overdue__action {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #991b1b;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #fca5a5;
    border-radius: 100px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.qv-overdue__action:hover {
    background: #fff;
    border-color: #ef4444;
    color: #dc2626;
    text-decoration: none;
}

.qv-overdue__action--dd {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}

.qv-overdue__action--dd:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.qv-overdue__action--collected {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
    cursor: default;
}

.qv-overdue__action--collected:hover {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

/* Action grid - 3 columns, properly sized tiles */
.qv-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    padding: 0.65rem 0.75rem;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

.qv-action-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.75rem 0.5rem;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: linear-gradient(180deg, #fff 0%, #f9fafb 100%);
    color: #374151;
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.qv-action-tile i {
    font-size: 1.15rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: #f3f4f6;
    color: #6b7280;
    transition: all 0.15s ease;
}

.qv-action-tile:hover {
    border-color: #d1d5db;
    color: #111827;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}

.qv-action-tile:hover i {
    color: #374151;
    background: #e5e7eb;
}

.qv-action-tile--primary {
    background: linear-gradient(135deg, #e8651a 0%, #d45a15 100%);
    border-color: #d45a15;
    color: #fff;
}

.qv-action-tile--primary i {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

.qv-action-tile--primary:hover {
    background: linear-gradient(135deg, #d45a15 0%, #c04f10 100%);
    border-color: #c04f10;
    color: #fff;
    box-shadow: 0 3px 10px rgba(232, 101, 26, 0.3);
}

.qv-action-tile--primary:hover i {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.qv-action-tile--checkin {
    background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #86efac;
    color: #166534;
}

.qv-action-tile--checkin i {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}

.qv-action-tile--checkin:hover {
    background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: #4ade80;
    box-shadow: 0 3px 10px rgba(34, 197, 94, 0.15);
}

.qv-action-tile--checkin:hover i {
    background: rgba(34, 197, 94, 0.2);
}

.qv-action-tile--checkout {
    background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #86efac;
    color: #166534;
}

.qv-action-tile--checkout i {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}

.qv-action-tile--checkout:hover {
    background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: #4ade80;
    box-shadow: 0 3px 10px rgba(34, 197, 94, 0.15);
}

.qv-action-tile--checkout:hover i {
    background: rgba(34, 197, 94, 0.2);
}

.qv-action-tile--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading state for any qv button */
.qv-loading {
    opacity: 0.7;
}

.qv-loading .fa-spinner {
    font-size: 1rem;
    color: inherit;
    background: none;
    /* 1em (not auto): Font Awesome SVG/JS mode renders the icon as an <svg> whose
       intrinsic size collapses to fill the tile (~175px) when height/width are auto.
       Pinning to 1em keeps the spinner icon-sized in both SVG and webfont modes. */
    width: 1em;
    height: 1em;
}

.qv-inclub__checkout-btn.qv-loading {
    min-width: 90px;
}

/* Sections */
.qv-section {
    padding: 0.85rem 1.25rem;
    background: #fff;
    margin: 0.4rem 0.5rem;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid #e8eaed;
}

.qv-section:first-child {
    margin-top: 0.5rem;
}

.qv-section__title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.qv-section__title i {
    font-size: 0.75rem;
}

/* #41845 — Active membership cards in the quick-view Memberships section. Small card with a
   body (plan + status + meta) and a full-width "Manage" footer, mirroring the dashboard card. */
.qv-membership-card {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.qv-membership-card:last-child {
    margin-bottom: 0;
}

.qv-membership-card__body {
    padding: 0.55rem 0.7rem;
}

.qv-membership-card__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.qv-membership-card__meta {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.2rem;
}

.qv-membership-card__footer {
    display: block;
    width: 100%;
    padding: 0.4rem;
    background: #f8f9fb;
    border: none;
    border-top: 1px solid #eef0f2;
    color: var(--club-colour, #2563eb);
    font-size: 0.76rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.qv-membership-card__footer:hover {
    background: var(--club-colour, #2563eb);
    color: #fff;
}

/* #41845 — "back to member" control in the quick-view manage panel header. A circular icon
   button that fills with the club colour on hover, nudging left to read as "back". */
.qvm-back-to-member {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-right: 0.65rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    color: #374151;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.qvm-back-to-member:hover {
    background: var(--club-colour, #2563eb);
    border-color: var(--club-colour, #2563eb);
    color: #fff;
    transform: translateX(-2px);
}

.qvm-back-to-member:active {
    transform: translateX(-2px) scale(0.94);
}

/* Booking items */
.qv-booking {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
}

.qv-booking__time {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e8651a;
    min-width: 42px;
}

.qv-booking__name {
    font-size: 0.85rem;
    color: #374151;
}

/* Comms & tasks */
.qv-comms__tasks {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    color: #92400e;
}

.qv-comms__tasks i {
    font-size: 0.85rem;
    color: #b45309;
}

.qv-comms__tasks-link {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: #b45309;
    text-decoration: none;
}

.qv-comms__tasks-link:hover {
    text-decoration: underline;
    color: #92400e;
}

.qv-comms__message {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0;
}

.qv-comms__message > i {
    font-size: 0.85rem;
    color: #9ca3af;
    margin-top: 0.15rem;
}

.qv-comms__message-detail {
    flex: 1;
    min-width: 0;
}

.qv-comms__message-subject {
    font-size: 0.82rem;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qv-comms__message-date {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Recent visits */
.qv-visit {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0;
}

.qv-visit + .qv-visit {
    border-top: 1px solid #f3f4f6;
}

.qv-visit__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.qv-visit__icon i {
    font-size: 0.75rem;
    color: #9ca3af;
}

.qv-visit__detail {
    flex: 1;
    min-width: 0;
}

.qv-visit__date {
    font-size: 0.78rem;
    font-weight: 500;
    color: #374151;
}

.qv-visit__time {
    font-size: 0.75rem;
    color: #6b7280;
}

.qv-visit__still-in {
    color: #22c55e;
    font-weight: 600;
    font-size: 0.75rem;
}

.qv-visit__duration {
    color: #9ca3af;
    font-size: 0.75rem;
    font-weight: 500;
    flex-shrink: 0;
}

/* Notes section */
.qv-notes-section {
    background: #fff;
}

.qv-quicknote {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}

.qv-quicknote__input {
    flex: 1;
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    resize: none;
    min-height: 38px;
    max-height: 100px;
    line-height: 1.4;
    background: #f9fafb;
}

.qv-quicknote__input:focus {
    border-color: #e8651a;
    box-shadow: 0 0 0 3px rgba(232, 101, 26, 0.08);
    background: #fff;
}

.qv-quicknote__input::placeholder {
    color: #d1d5db;
}

.qv-quicknote__save {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    border: none;
    background: #e8651a;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.qv-quicknote__save:hover {
    background: #d45a15;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(232, 101, 26, 0.3);
}

.qv-quicknote__save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Notes feed */
.qv-notes-feed {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.qv-notes-feed__empty {
    text-align: center;
    font-size: 0.8rem;
    color: #d1d5db;
    padding: 0.75rem 0;
    font-style: italic;
}

.qv-note-card {
    padding: 0.6rem 0.75rem;
    background: #f9fafb;
    border-radius: var(--radius-md);
    border-left: 3px solid #e5e7eb;
    transition: all 0.2s ease;
}

.qv-note-card--new {
    border-left-color: #e8651a;
    animation: qv-note-slide-in 0.3s ease;
}

@keyframes qv-note-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.qv-note-card__body {
    font-size: 0.82rem;
    color: #374151;
    line-height: 1.45;
    margin-bottom: 0.3rem;
    word-break: break-word;
}

.qv-note-card__footer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.75rem;
    color: #9ca3af;
}

.qv-note-card__author {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
}

.qv-note-card__author i {
    font-size: 0.75rem;
}

.qv-note-card__date {
    font-weight: 400;
}

/* Activity chart */
.qv-chart-section {
    padding-bottom: 0.5rem;
}

.qv-chart-wrap {
    height: 140px;
    position: relative;
    overflow: hidden;
}

.qv-chart-wrap canvas {
    width: 100% !important;
}

/* Trend indicator */
.qv-trend {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-pill);
    margin-left: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.qv-trend i {
    font-size: 0.75rem;
}

.qv-trend--up {
    background: #dcfce7;
    color: #166534;
}

.qv-trend--down {
    background: #fef2f2;
    color: #991b1b;
}

.qv-trend--flat {
    background: #f3f4f6;
    color: #6b7280;
}

@media (max-width: 480px) {
    .quick-view-panel { width: 100% !important; }
    .qv-actions-grid { grid-template-columns: repeat(2, 1fr); }
    .qv-stats { padding: 0.5rem 0.75rem; }
    .qv-hero { flex-direction: column; align-items: center; text-align: center; }
    .qv-hero__info { text-align: center; }
    .qv-hero__badges { justify-content: center; }
    .qv-hero__groups { justify-content: center; }
    .qv-hero__pills { justify-content: center; }
    .qv-inclub {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    .qv-overdue {
        flex-wrap: wrap;
    }
    .qv-overdue__actions {
        width: 100%;
        justify-content: center;
    }
    .qv-chart-wrap { height: 120px; }
}

/* Responsive: Analytics */
@media (max-width: 768px) {
    .member-analytics__row,
    .member-analytics__row--3col {
        grid-template-columns: 1fr;
    }

    .member-analytics__period-selector {
        flex-direction: column;
        align-items: flex-start;
    }

    .member-analytics__row--2col {
        grid-template-columns: 1fr;
    }

    .member-kpi-card__primary {
        font-size: 1.5rem;
    }

    .member-chart-card__canvas {
        height: 220px;
    }
}

/* ============================================
   Member Dashboard
   ============================================ */

/* Header bar */
.member-dashboard-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 0 0 12px 12px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.member-dashboard-header__photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    object-fit: cover;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s;
    /* Sized for the initials fallback (revealed when Gravatar 404s — see _MemberAvatar). */
    font-size: 1.4rem;
}

.member-dashboard-header__photo:hover {
    border-color: rgba(255, 255, 255, 0.7);
}

.member-dashboard-header__info {
    flex: 1;
    min-width: 0;
}

.member-dashboard-header__name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.member-dashboard-header__badges {
    display: inline-flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Separates identity/membership status (left) from flags & restrictions (right)
   so a "Booking ban active" doesn't read as a peer of the status badge. */
.member-dashboard-header__badge-divider {
    width: 1px;
    align-self: stretch;
    min-height: 1rem;
    margin: 0 0.125rem;
    background: rgba(148, 163, 184, 0.4);
}

.member-dashboard-header__subtitle {
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 0.125rem 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.member-dashboard-header__subtitle a {
    color: #94a3b8;
    text-decoration: none;
}

.member-dashboard-header__subtitle a:hover {
    color: #e2e8f0;
}

.member-dashboard-header__more-toggle {
    font-size: 0.85rem;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    transition: color 0.15s;
}

.member-dashboard-header__more-toggle:hover {
    color: #e2e8f0;
}

.member-dashboard-header__more-toggle .fa {
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.member-dashboard-header__more-toggle.active .fa {
    transform: rotate(180deg);
}

.member-dashboard-header__more {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 0.375rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.member-dashboard-header__tags {
    margin-top: 0.35rem;
}

.member-dashboard-header__tags .tagify {
    --tag-text-color: rgba(255, 255, 255, 0.72);
    --tag-remove-btn-color: rgba(255, 255, 255, 0.45);
    --tag-remove-bg: transparent;
    --placeholder-color: rgba(255, 255, 255, 0.45);
    --placeholder-color-focus: rgba(255, 255, 255, 0.35);
    --input-color: #e2e8f0;
    background: transparent;
    border: none;
    min-height: 0;
    padding: 0;
    gap: 4px;
    align-items: center; /* vertically centre chips with the "+" pill */
}

/* Member tags are quiet metadata, not buttons. Override the global club-colour
   --tag-bg (set with !important on .tagify__tag) with a faint translucent fill, and
   shrink the chip right down so it doesn't compete with the status badges above.
   The club-colour rule is !important, so these overrides must be too. */
.member-dashboard-header__tags .tagify__tag {
    --tag-bg: rgba(255, 255, 255, 0.10) !important;
    --tag-hover: rgba(255, 255, 255, 0.16) !important;
    margin: 0;
    border-radius: 6px;
}

.member-dashboard-header__tags .tagify__tag > div {
    padding: 1px 6px !important;
    font-size: 10.5px !important;
    line-height: 1.5 !important;
    white-space: nowrap !important; /* keep one line, incl. the click-to-edit state */
}

.member-dashboard-header__tags .tagify__tag > div > .tagify__tag-text {
    font-weight: 500;
    white-space: nowrap;
}

.member-dashboard-header__tags .tagify__tag__removeBtn {
    font-size: 11px;
    margin-left: 1px;
}

.member-dashboard-header__tags .tagify__tag__removeBtn:hover {
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
}

/* Faint dashed "+" pill instead of a prominent "Add tag…" field. Tagify hides its
   own placeholder once any tag exists, so render the "+" ourselves and force it
   visible (it's hidden while focused/typing). */
.member-dashboard-header__tags .tagify__input {
    min-width: 0;
    width: auto;
    font-size: 10.5px;
    text-align: center;
    padding: 1px 7px;
    border: 1px dashed rgba(255, 255, 255, 0.20);
    border-radius: 6px;
}

.member-dashboard-header__tags .tagify__input::before {
    content: '+' !important;
    opacity: 1 !important;
    position: static !important;
    display: inline !important;
    transform: none !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

.member-dashboard-header__tags .tagify__input:focus::before {
    content: '' !important;
}

.member-dashboard-header__tags .tagify__input:focus {
    border-color: rgba(232, 101, 26, 0.6);
    color: #fff;
}

.member-trainer-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
}

.member-trainer-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.member-trainer-card__icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.member-trainer-card__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.member-trainer-card__status {
    margin-left: auto;
    font-size: 0.75rem;
}

.member-trainer-card__select {
    font-size: 0.8rem;
    border-radius: var(--radius-md);
}

.member-dashboard-header__actions {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.member-header-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    padding: 0.3rem 0.625rem;
    transition: all 0.15s;
}

.member-header-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.member-header-btn--danger {
    color: #fca5a5;
}

.member-header-btn--danger:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

/* Icon-only header button (e.g. edit profile) — square padding, no label. */
.member-header-btn--icon {
    padding: 0.3rem 0.5rem;
    line-height: 1;
}

/* #40543 — member-page layout switch. On the classic (dark) header the "Try the
   new view" pill is promoted in the club accent so it reads as an invitation,
   not just another grey control. */
.member-viewswitch {
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
    font-weight: 600;
    transition: all 0.15s;
    white-space: nowrap;
}

.member-viewswitch--promote {
    background: var(--club-colour, var(--brand-orange, #e8651a));
    border: 1px solid var(--club-colour, var(--brand-orange, #e8651a));
    color: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.member-viewswitch--promote:hover {
    filter: brightness(1.08);
    color: #fff;
}

/* Stat strip with integrated actions */
.member-stat-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 0;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
}

.member-stat-strip__stats {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
}

.member-stat-strip__actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-left: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.member-stat-strip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    padding: 0.625rem 1rem;
    flex: 1;
    min-width: 0;
    text-align: center;
}

.member-stat-strip__divider {
    width: 1px;
    align-self: stretch;
    margin: 0.5rem 0;
    background: #e5e7eb;
    flex-shrink: 0;
}

.member-stat-strip__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    flex-shrink: 0;
    line-height: 1;
}

.member-stat-strip__label {
    font-size: 0.75rem;
    color: #6b7280;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    transition: color 0.15s;
}

.member-stat-strip__item--clickable {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-md);
    padding: 0.375rem 0.75rem;
    transition: background 0.15s, box-shadow 0.15s;
}

.member-stat-strip__item--clickable:hover {
    background: #f3f4f6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.member-stat-strip__item--clickable:hover .member-stat-strip__label {
    color: #374151;
}

.member-stat-strip__item--clickable:hover .member-stat-strip__label::after {
    content: ' ›';
    opacity: 0.6;
}

.member-stat-strip__value--ok {
    color: #22c55e;
}

.member-stat-strip__value--warn {
    color: #f59e0b;
}

/* Primary stats — larger, bolder (Lifetime Value, ParQ) */
.member-stat-strip__item--primary {
    flex: 1.4;
    padding: 0.75rem 1.25rem;
}

.member-stat-strip__item--primary .member-stat-strip__value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
}

/* State colours for primary tiles (e.g. PAR-Q). Must appear AFTER the rule above
   so they win on equal specificity — otherwise the green/amber state icons get
   flattened to #111827 and render as an ambiguous black circle. */
.member-stat-strip__item--primary .member-stat-strip__value--ok {
    color: #22c55e;
}

.member-stat-strip__item--primary .member-stat-strip__value--warn {
    color: #f59e0b;
}

.member-stat-strip__item--primary .member-stat-strip__label {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 600;
}

/* High-risk tile — red filled, white text, pulsing. Must appear AFTER the --primary rules so it wins on equal specificity */
.member-stat-strip__item--highrisk {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border-radius: var(--radius-md);
    animation: pulse-highrisk-tile 2.4s ease-in-out infinite;
}

.member-stat-strip__item--highrisk .member-stat-strip__value,
.member-stat-strip__item--highrisk .member-stat-strip__value--highrisk {
    color: #fff;
    font-size: 1.4rem;
}

.member-stat-strip__item--highrisk .member-stat-strip__label,
.member-stat-strip__item--highrisk .member-stat-strip__label--highrisk {
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

.member-stat-strip__item--highrisk:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
}

@keyframes pulse-highrisk-tile {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* Secondary stats — smaller, subdued (Visits, Check-ins, Classes, Referrals) */
.member-stat-strip__item--secondary .member-stat-strip__value {
    font-size: 1rem;
    font-weight: 600;
    color: #6b7280;
}

.member-stat-strip__item--secondary .member-stat-strip__label {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* ── Attention strip ───────────────────────────────────────────────────
   Replaces the old vanity stat row. Quiet "glance" numbers on the left so
   they stay available for reference, and a "needs attention" group of flags
   on the right so the page leads with what to act on rather than totals. */
.member-attention {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 0.5rem 0.875rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Command row — glance numbers (left) + actions (right) in one band. */
.member-command {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 0.5rem 0.875rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.member-command__glance {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    min-width: 0;
}

.member-command__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Buttons size to their content here (no stretch) — Check in stays prominent via
   its colour, not by being a full fifth of the page. */
.member-command__actions .member-action-btn {
    grid-column: auto;
    padding: 0.5rem 0.9rem;
}

/* Needs-attention flags — thin, left-aligned strip under the command row,
   only rendered when something needs doing. */
.member-flags-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

/* ══ Member 3-pane layout (CRM person-record pattern) ════════════════════
   Left summary rail · centre activity/focus · right action+glance rail. */
.member-grid {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(240px, 290px);
    gap: 1.25rem;
    align-items: start;
}

/* Two-column timeline variant: wide activity spine + context rail. */
.member-grid--timeline {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
}
.member-grid--timeline .member-grid__col--main { min-width: 0; }
@media (max-width: 991px) {
    .member-grid--timeline { grid-template-columns: 1fr; }
}

/* Activity timeline card (main column). */
.member-timeline-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.member-timeline-card__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 1rem; border-bottom: 1px solid #f1f5f9;
}
.member-timeline-card__title { font-size: 0.95rem; font-weight: 700; color: #111827; }
.member-timeline-card__title i { color: #6b7280; margin-right: 0.4rem; }
.member-timeline-card__compose {
    display: inline-flex; align-items: center; gap: 0.4rem;
    border: 1px solid #e5e7eb; background: #fff; border-radius: 999px;
    padding: 0.35rem 0.8rem; font-size: 0.8rem; font-weight: 600; color: #4f46e5; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.member-timeline-card__compose:hover { background: #f5f3ff; border-color: #c7d2fe; }

/* Inline filter tabs (reuses .comms-filter-tab look, but laid out for the card). */
.comms-filter-tabs--inline {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    padding: 0.6rem 1rem; border-bottom: 1px solid #f1f5f9; background: #fafafa;
}

/* Inline timeline body — cap height so the page doesn't run away; the feed
   scrolls within. Reuses .comms-item / .comms-day-group styling. */
.member-timeline {
    padding: 0.25rem 1rem 0.75rem;
    max-height: 70vh;
    overflow-y: auto;
}

.member-grid__col { min-width: 0; }
.member-grid__col--left { display: flex; flex-direction: column; gap: 0.875rem; }
.member-grid__col--right { display: flex; flex-direction: column; gap: 0.875rem; }

@media (max-width: 1199px) {
    /* Drop the right rail under the centre, keep the summary rail beside it. */
    .member-grid { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); }
    .member-grid__col--right { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .member-grid__col--right > * { flex: 1 1 260px; }
}

@media (max-width: 767px) {
    .member-grid { grid-template-columns: 1fr; }
    .member-grid__col--right { flex-direction: column; }
}

/* ── Left rail: plan + billing summary ──────────────────────────────── */
.member-summary-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 0.875rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.member-summary-card--overdue { border-color: #fecaca; background: #fffafa; }

.member-summary-card__head { display: flex; align-items: flex-start; gap: 0.625rem; }
.member-summary-card__icon {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 9px; display: flex; align-items: center; justify-content: center;
    background: #eef2ff; color: #4f46e5; font-size: 0.95rem;
}
.member-summary-card__title { font-size: 1rem; font-weight: 700; color: #111827; line-height: 1.2; }
.member-summary-card__title--muted { color: #9ca3af; font-weight: 600; }
.member-summary-card__meta {
    display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem;
    margin-top: 0.2rem; font-size: 0.78rem; color: #6b7280;
}
.member-summary-card__meta i { opacity: 0.6; margin-right: 0.2rem; }

.member-summary-card__billing {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 0.75rem; padding: 0.5rem 0.7rem;
    border-radius: 9px; font-size: 0.82rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
}
.member-summary-card__billing:hover { filter: brightness(0.98); text-decoration: none; }
.member-summary-card__billing--ok { background: #f0fdf4; color: #16a34a; }
.member-summary-card__billing--danger { background: #fef2f2; color: #dc2626; }
.member-summary-card__billing--info { background: #eff6ff; color: #2563eb; }

.member-summary-card__link, .member-summary-card__cta {
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    width: 100%; margin-top: 0.6rem; padding: 0.5rem;
    border: none; background: transparent; border-radius: 8px;
    font-size: 0.82rem; font-weight: 600; color: #4f46e5; cursor: pointer;
    transition: background 0.15s;
}
.member-summary-card__link { color: #374151; border: 1px solid #e5e7eb; }
.member-summary-card__link:hover { background: #f9fafb; }
.member-summary-card__cta { background: #4f46e5; color: #fff; }
.member-summary-card__cta:hover { background: #4338ca; }

.member-rail-add { align-self: flex-start; }

/* ── Left rail: key stats ───────────────────────────────────────────── */
.member-summary-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: #e5e7eb; border: 1px solid #e5e7eb; border-radius: var(--radius-lg);
    overflow: hidden;
}
.member-summary-stat {
    display: flex; flex-direction: column; gap: 0.1rem; align-items: flex-start;
    padding: 0.6rem 0.75rem; background: #fff; text-decoration: none; color: inherit;
}
a.member-summary-stat { cursor: pointer; }
a.member-summary-stat:hover { background: #f9fafb; }
.member-summary-stat__value { font-size: 1.05rem; font-weight: 700; color: #111827; line-height: 1; }
.member-summary-stat__label { font-size: 0.68rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }

/* ── Centre: Focus block ────────────────────────────────────────────── */
.member-focus {
    background: #fff; border: 1px solid #fde68a; border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); overflow: hidden; margin-bottom: 1rem;
}
.member-focus__head {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 0.875rem; background: #fffbeb; color: #b45309;
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    border-bottom: 1px solid #fef3c7;
}
.member-focus__list { display: flex; flex-direction: column; }
.member-focus__item {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 0.875rem; border: none; background: transparent; width: 100%;
    border-bottom: 1px solid #f3f4f6; text-align: left; text-decoration: none;
    color: #374151; font-size: 0.85rem; cursor: pointer; transition: background 0.15s;
}
.member-focus__item:last-child { border-bottom: none; }
.member-focus__item:hover { background: #f9fafb; text-decoration: none; }
.member-focus__item > i { flex-shrink: 0; width: 1rem; text-align: center; }
.member-focus__text { flex: 1; min-width: 0; }
.member-focus__cta {
    flex-shrink: 0; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.55rem;
    border-radius: 999px; background: #f1f5f9; color: #475569;
}
.member-focus__item--danger > i { color: #dc2626; }
.member-focus__item--danger .member-focus__cta { background: #fee2e2; color: #dc2626; }
.member-focus__item--warn > i { color: #d97706; }
.member-focus__item--warn .member-focus__cta { background: #fef3c7; color: #b45309; }
.member-focus__item--info > i { color: #2563eb; }

/* ── Right rail: quick actions stacked ──────────────────────────────── */
.member-quick-actions__grid--rail { display: flex; flex-direction: column; gap: 0.5rem; }
.member-quick-actions__grid--rail .member-action-btn { grid-column: auto; width: 100%; justify-content: flex-start; }
.member-quick-actions__grid--rail .member-action-btn--primary { justify-content: center; }

/* Brief highlight when a Focus item scrolls a card into view. */
.member-flash { animation: member-flash 1.4s ease; }
@keyframes member-flash {
    0%, 100% { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
    20%, 60% { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.35); }
}

.member-loyalty-note { margin-top: 0.75rem; font-size: 0.8rem; color: #6b7280; }
.member-loyalty-note i { color: #ea580c; margin-right: 0.25rem; }

/* ══ "Classic" view skin ═════════════════════════════════════════════════
   Scoped to body.member-classic (set by DashboardClassic.cshtml). Flattens the
   modern dashboard chrome into a more traditional, utilitarian admin look:
   square hairline panels, grey card headers, desaturated icons, flat buttons,
   and boxy underlined tabs instead of pills. Never touches the modern view. */
body.member-classic .member-stat-strip,
body.member-classic .member-dashboard-card,
body.member-classic .member-quick-actions,
body.member-classic .member-plan-card__main,
body.member-classic .member-info-strip__item {
    border-radius: 3px;
    box-shadow: none;
    border-color: #d1d5db;
}

/* Card headers read as section bars, not floating chrome. */
body.member-classic .member-dashboard-card__header {
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
}

/* Desaturate the colourful icon chips → plain grey squares. */
body.member-classic .member-dashboard-card__icon,
body.member-classic .member-info-strip__icon {
    background: #e5e7eb !important;
    color: #4b5563 !important;
    border-radius: 2px;
}

/* Flat buttons — drop the gradient + lift on the primary action. */
body.member-classic .member-action-btn {
    border-radius: 3px;
}
body.member-classic .member-action-btn--primary {
    background: #e8651a;
    box-shadow: none;
}
body.member-classic .member-action-btn--primary:hover {
    background: #d45a16;
    box-shadow: none;
    transform: none;
}
body.member-classic .member-action-btn:hover {
    box-shadow: none;
    transform: none;
}

/* Flatten the stat strip into a plain bordered bar. */
body.member-classic .member-stat-strip__value { font-weight: 600; }

/* Classic tabs use the standard pill segmented control (same pills as the rest
   of the member page / site) — no bespoke boxy override. */

/* ── Classic "record" elements: slim stats line, toolbar, panels, tables ── */
.member-classic-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.6rem 0.875rem;
    margin-bottom: 0.75rem;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    font-size: 0.85rem;
    color: #6b7280;
}
.member-classic-stats__item { color: #6b7280; text-decoration: none; }
.member-classic-stats__item:hover { color: #111827; }
.member-classic-stats__item strong { color: #111827; font-weight: 700; }
.member-classic-stats__sep { width: 1px; height: 1rem; background: #e5e7eb; }
.member-classic-stats__parq { text-decoration: none; font-weight: 600; margin-left: auto; }
.member-classic-stats__parq--ok { color: #16a34a; }
.member-classic-stats__parq--todo { color: #b45309; }
.member-classic-stats__parq--risk { color: #dc2626; }

.member-classic-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.member-classic-toolbar .member-action-btn { flex: 0 0 auto; }
.member-classic-toolbar__spacer { flex: 1 1 auto; }
.member-classic-toolbar .member-info-strip__item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

/* Action group tucked to the right of the tab bar. */
.member-classic-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.member-classic-actions .member-action-btn { padding: 0.4rem 0.7rem; font-size: 0.82rem; }
/* Sit the classic tab bar + actions on one row. */
body.member-classic .member-segment-row { align-items: center; margin-bottom: 1rem; }

/* Flat titled panel that wraps a table. */
.member-classic-panel {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    overflow: hidden;
}
.member-classic-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.875rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}
.member-classic-panel__title { font-size: 0.95rem; font-weight: 700; color: #111827; }

.member-classic-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.member-classic-table thead th {
    text-align: left;
    padding: 0.5rem 0.875rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
}
.member-classic-table tbody td {
    padding: 0.55rem 0.875rem;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
}
.member-classic-table tbody tr:last-child td { border-bottom: none; }
.member-classic-table tbody tr:hover { background: #f9fafb; }
.member-classic-table__row--click { cursor: pointer; }

.member-classic-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 600;
}
.member-classic-badge--ok { background: #dcfce7; color: #16a34a; }
.member-classic-badge--danger { background: #fee2e2; color: #dc2626; }
.member-classic-badge--muted { background: #e5e7eb; color: #4b5563; }

.member-classic-empty { padding: 1.5rem 0.875rem; text-align: center; color: #9ca3af; font-size: 0.85rem; }
.member-classic-section-note { padding: 0.6rem 0.875rem; font-size: 0.82rem; color: #6b7280; border-bottom: 1px solid #f1f5f9; }

.member-attention__glance {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    min-width: 0;
}

.member-glance-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.member-glance-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: inherit;
    text-decoration: none;
}

.member-glance-item__value {
    font-size: 1rem;
    font-weight: 700;
    color: #374151;
    line-height: 1;
}

.member-glance-item--primary .member-glance-item__value {
    font-size: 1.25rem;
    font-weight: 800;
    color: #111827;
}

.member-glance-item__label {
    font-size: 0.7rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-weight: 600;
}

.member-attention__flags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-left: auto;
}

.member-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s, background 0.15s;
}

.member-flag:hover { filter: brightness(0.97); text-decoration: none; }
.member-flag .fa { font-size: 0.8rem; }

.member-flag--ok { background: #f0fdf4; color: #16a34a; border-color: #dcfce7; cursor: default; }
.member-flag--ok:hover { filter: none; }
.member-flag--info { background: #eff6ff; color: #2563eb; border-color: #dbeafe; }
.member-flag--warn { background: #fffbeb; color: #b45309; border-color: #fef3c7; }
.member-flag--danger { background: #fef2f2; color: #dc2626; border-color: #fee2e2; }

.member-flag--pulse { animation: pulse-flag 2.4s ease-in-out infinite; }
@keyframes pulse-flag {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
    50% { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}

/* ── Segmented tab control ─────────────────────────────────────────────
   iOS-style pill segmented control that splits the member body into a few
   real "jobs" (Overview / Payments / Tasks). Count badges + dots surface
   where the action is so a tab is informative before it's even clicked. */
/* Tab row holds the segmented control on the left and the quiet "Add membership"
   action on the right, so that action no longer takes up a whole band of its own. */
.member-segment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.member-segment {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 4px;
    max-width: 100%;
    overflow-x: auto;
}

/* Add-membership button when it sits on the tab row rather than under the card. */
.member-plan-card__add--inline {
    margin: 0;
    flex-shrink: 0;
}

.member-segment__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}

.member-segment__tab .fa { font-size: 0.85rem; opacity: 0.85; }
.member-segment__tab:hover { color: #0f172a; }

.member-segment__tab--active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.member-segment__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.member-segment__tab--active .member-segment__count { background: #fef3c7; color: #b45309; }

.member-segment__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
}
.member-segment__dot--warn { background: #f59e0b; }
.member-segment__dot--danger { background: #dc2626; }

/* Tab panels — only the active one renders. Short fade so switching feels
   intentional rather than a hard cut. */
.member-tab-panel { display: none; }
.member-tab-panel--active { display: block; animation: member-tab-fade 0.18s ease; }

@keyframes member-tab-fade {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

.member-tab-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1rem;
    color: #9ca3af;
}
.member-tab-empty__icon { font-size: 1.75rem; opacity: 0.35; margin-bottom: 0.5rem; }
.member-tab-empty__text { font-size: 0.9rem; font-weight: 600; color: #6b7280; }
.member-tab-empty__sub { font-size: 0.8rem; margin-top: 0.15rem; }

/* Membership offcanvas */
.member-membership-offcanvas {
    width: 700px !important;
}

/* ── New Membership offcanvas ── */
.member-newmembership-offcanvas {
    width: 700px !important;
}

.member-newmembership-offcanvas .offcanvas-body {
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Limit reached state */
.nm-limit-reached {
    text-align: center;
    padding: 3rem 2rem;
}

.nm-limit-reached__icon {
    font-size: 2.5rem;
    color: #f59e0b;
    margin-bottom: 1rem;
}

.nm-limit-reached h5 {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.nm-limit-reached p {
    color: #6b7280;
    font-size: 0.9rem;
}

/* Section */
.nm-section {
    padding: 1rem 1.5rem;
}

.nm-section__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 0.75rem;
}

/* Plan search */
.nm-plan-search {
    position: relative;
    margin-bottom: 0.75rem;
}

.nm-plan-search__icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.8rem;
}

.nm-plan-search input {
    padding-left: 32px;
    font-size: 0.85rem;
    border-radius: var(--radius-md);
    border: 1px solid #e5e7eb;
}

.nm-plan-search input:focus {
    border-color: #e8651a;
    box-shadow: 0 0 0 3px rgba(232, 101, 26, 0.1);
}

/* Filter chips */
.nm-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.85rem;
    margin-bottom: 0.75rem;
    align-items: center;
}

.nm-filter-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.nm-filter-group__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin-right: 0.15rem;
}

.nm-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.nm-filter-chip:hover {
    border-color: #d1d5db;
    background: #f9fafb;
    color: #374151;
}

.nm-filter-chip--active {
    border-color: #e8651a;
    background: #fff7ed;
    color: #e8651a;
    font-weight: 600;
}

.nm-filter-divider {
    width: 1px;
    height: 18px;
    background: #e5e7eb;
    margin: 0 0.15rem;
}

.nm-no-results {
    text-align: center;
    padding: 1.5rem 1rem;
    color: #9ca3af;
    font-size: 0.85rem;
}

/* Plan grid */
.nm-plan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

/* Plan card */
.nm-plan-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #fff;
    position: relative;
    min-width: 0;
}

.nm-plan-card:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}

.nm-plan-card--selected {
    border-color: #e8651a;
    background: #fff7ed;
    box-shadow: 0 0 0 3px rgba(232, 101, 26, 0.12);
}

.nm-plan-card--selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.75rem;
    color: #fff;
    background: #e8651a;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nm-plan-card--hidden {
    display: none;
}

/* Plan card image */
.nm-plan-card__image {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.nm-plan-card__image--default {
    background: linear-gradient(135deg, #e8651a 0%, #1e293b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.9rem;
}

/* Plan card body */
.nm-plan-card__body {
    flex: 1;
    min-width: 0;
}

.nm-plan-card__name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #111827;
    overflow-wrap: break-word;
    word-break: break-word;
}

.nm-plan-card__price {
    font-size: 0.75rem;
    color: #e8651a;
    font-weight: 600;
}

/* Plan card badge */
.nm-plan-card__badge {
    font-size: 0.75rem;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Show all button */
.nm-show-all-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
    padding: 0.4rem;
    font-size: 0.8rem;
    color: #6b7280;
    background: none;
    border: 1px dashed #d1d5db;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.nm-show-all-btn:hover {
    color: #374151;
    border-color: #9ca3af;
    background: #f9fafb;
}

/* Config section */
.nm-config-section {
    border-top: 1px solid #e5e7eb;
}

.nm-config-section .form-control {
    font-size: 0.85rem;
    border-radius: var(--radius-md);
}

/* Summary card */
.nm-summary-card {
    margin: 0 1.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.nm-summary-card__header {
    background: #f9fafb;
    color: #374151;
    padding: 0.65rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #f1f5f9;
}

.nm-summary-card__body {
    padding: 0.75rem 1rem;
}

.nm-summary-card__row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    font-size: 0.82rem;
}

.nm-summary-card__row + .nm-summary-card__row {
    border-top: 1px solid #f3f4f6;
}

.nm-summary-card__label {
    color: #6b7280;
}

.nm-summary-card__value {
    font-weight: 600;
    color: #111827;
}

/* Advanced toggle */
.nm-summary-card__advanced {
    border-top: 1px solid #e5e7eb;
}

.nm-summary-card__toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
    color: #6b7280;
    background: #f9fafb;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.nm-summary-card__toggle:hover {
    color: #374151;
    background: #f3f4f6;
}

.nm-summary-card__chevron {
    transition: transform 0.2s ease;
    font-size: 0.75rem;
}

.nm-summary-card__toggle[aria-expanded="true"] .nm-summary-card__chevron {
    transform: rotate(180deg);
}

.nm-summary-card__advanced-body {
    padding: 1rem;
    background: #fafafa;
    border-top: 1px solid #e5e7eb;
}

/* Scale down the payment schedule editor inside the offcanvas */
.nm-summary-card__advanced-body .mp-payment-card {
    margin-bottom: 0.5rem;
}

.nm-summary-card__advanced-body .mp-payment-card-header {
    font-size: 0.78rem;
}

.nm-summary-card__advanced-body .form-label {
    font-size: 0.75rem;
}

.nm-summary-card__advanced-body .form-control,
.nm-summary-card__advanced-body .form-select {
    font-size: 0.78rem;
    padding: 0.3rem 0.5rem;
}

.nm-summary-card__advanced-body .input-group-text {
    font-size: 0.78rem;
    padding: 0.3rem 0.5rem;
}

/* Force payment card grid to a two-column layout in narrow offcanvas panel */
.nm-summary-card__advanced-body .mp-payment-card-body .row > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
}

/* Hide the empty spacer column */
.nm-summary-card__advanced-body .mp-payment-card-body .row > .noFrequency {
    display: none;
}

.nm-summary-card__advanced-body .form-text {
    font-size: 0.75rem;
}

/* Also force stacking for settings rows in the advanced/recurring/day-pass editors */
.nm-summary-card__advanced-body > div > .row > [class*="col-md-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

.nm-summary-card__advanced-body .form-check {
    font-size: 0.82rem;
}

.nm-summary-card__advanced-body .form-check .form-text {
    font-size: 0.75rem;
}

.nm-summary-card__advanced-body .card.bg-light .card-body {
    padding: 0.75rem;
}

.nm-summary-card__advanced-body .card.bg-light .form-control {
    max-width: 100% !important;
}

.nm-summary-card__advanced-body .action-btn,
.nm-summary-card__advanced-body #addPaymentSchedule {
    color: var(--cui-primary, #5856d6);
    border-color: var(--cui-primary, #5856d6);
}

.nm-summary-card__advanced-body .action-btn:hover,
.nm-summary-card__advanced-body #addPaymentSchedule:hover {
    background: var(--cui-primary, #5856d6);
    color: #fff;
}

/* Add-on toggle cards */
.nm-addon-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.nm-addon-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #fff;
    margin: 0;
}

.nm-addon-card:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}

.nm-addon-card__info {
    display: flex;
    flex-direction: column;
}

.nm-addon-card__name {
    font-size: 0.82rem;
    font-weight: 500;
    color: #111827;
}

.nm-addon-card__price {
    font-size: 0.75rem;
    color: #e8651a;
    font-weight: 500;
}

/* Toggle switch */
.nm-addon-card__toggle {
    position: relative;
    flex-shrink: 0;
}

.nm-addon-card__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.nm-addon-card__switch {
    display: block;
    width: 36px;
    height: 20px;
    background: #d1d5db;
    border-radius: 20px;
    position: relative;
    transition: background 0.2s ease;
}

.nm-addon-card__switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.nm-addon-card__input:checked + .nm-addon-card__switch {
    background: #e8651a;
}

.nm-addon-card__input:checked + .nm-addon-card__switch::after {
    transform: translateX(16px);
}

/* Active state for card when toggled on */
.nm-addon-card:has(.nm-addon-card__input:checked) {
    border-color: #e8651a;
    background: #fff7ed;
}

/* Add-ons intro (step 3) */
.nm-addons-intro {
    text-align: center;
    padding: 1.5rem 1rem 1rem;
}

.nm-addons-intro__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff7ed;
    color: #e8651a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.nm-addons-intro__icon--muted {
    background: #f3f4f6;
    color: #9ca3af;
}

.nm-addons-intro__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}

.nm-addons-intro__text {
    font-size: 0.82rem;
    color: #6b7280;
    margin-bottom: 0;
}

/* Sticky footer */
.nm-sticky-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 1rem 1.5rem;
    margin-top: auto;
    z-index: 5;
}

.nm-submit-btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem;
}

.nm-submit-loading {
    text-align: center;
    padding: 0.5rem;
    color: #6b7280;
    font-size: 0.85rem;
}

/* Multi-member section */
.nm-multimember {
    border-top: 1px solid #e5e7eb;
    padding-bottom: 5rem;
}

.nm-multimember__toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.6rem 0;
    font-size: 0.82rem;
    color: #6b7280;
    background: none;
    border: none;
    cursor: pointer;
}

.nm-multimember__toggle:hover {
    color: #374151;
}

.nm-multimember__list {
    margin-top: 0.5rem;
}

.nm-multimember__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.82rem;
}

.nm-multimember__info {
    color: #374151;
}

/* ── Wizard steps indicator ── */
.nm-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem 0.5rem;
    gap: 0;
}

/* Compact mode: numbers-only, used when there are too many steps to fit
   per-step labels horizontally. Pair with .nm-steps__caption below for the
   active step's title. */
.nm-steps--compact {
    padding-bottom: 0.25rem;
}

.nm-steps__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.nm-steps--compact .nm-steps__item {
    gap: 0;
}

.nm-steps--compact .nm-steps__label {
    display: none;
}

.nm-steps__caption {
    text-align: center;
    padding: 0.1rem 1.5rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 0.5rem;
}

.nm-steps__caption-progress {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.1rem;
}

.nm-steps__caption-title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

/* Short intro paragraph at the top of a step body — used now that the step
   title lives in the caption above the indicator strip. */
.nm-step__intro {
    font-size: 0.85rem;
    color: #6b7280;
    text-align: center;
    margin: 0.5rem 1.5rem 1.25rem;
    line-height: 1.5;
}

.nm-steps__item--active,
.nm-steps__item--done {
    opacity: 1;
}

.nm-steps__number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.nm-steps__item--active .nm-steps__number {
    background: #e8651a;
    color: #fff;
}

.nm-steps__item--done .nm-steps__number {
    background: #10b981;
    color: #fff;
}

.nm-steps__label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #6b7280;
}

.nm-steps__item--active .nm-steps__label {
    color: #111827;
    font-weight: 600;
}

.nm-steps__item--done .nm-steps__label {
    color: #374151;
}

.nm-steps__connector {
    flex: 0 0 32px;
    height: 2px;
    background: #e5e7eb;
    margin: 0 0.25rem;
}

/* ── Step content areas ── */
.nm-step {
    flex: 1;
    overflow-y: auto;
}

/* ── Selected plan hero (step 2) ── */
.nm-selected-plan {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 1.5rem 1rem;
    padding: 0.75rem 0.9rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #111827;
}

.nm-selected-plan__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: rgba(232, 101, 26, 0.12);
    color: #e8651a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.nm-selected-plan__info {
    flex: 1;
    min-width: 0;
}

.nm-selected-plan__name {
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nm-selected-plan__meta {
    font-size: 0.75rem;
    color: #6b7280;
}

.nm-selected-plan__change {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.nm-selected-plan__change:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

/* Change-plan hero (#38673). Sits at the top of Step 1 in change mode so the
   operator never loses sight of what plan the member is currently on. */
.nm-change-hero {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 1.5rem 1rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
    border-radius: 10px;
    color: #78350f;
}

.nm-change-hero__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: #fff;
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.nm-change-hero__copy { flex: 1; min-width: 0; }
.nm-change-hero__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #92400e;
}
.nm-change-hero__name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #78350f;
}
.nm-change-hero__meta {
    font-size: 0.78rem;
    color: #92400e;
    margin-top: 0.1rem;
}

/* Change-plan timing radios — Step 2 in change mode. */
.nm-timing-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nm-timing-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    background: #fff;
}

.nm-timing-option:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}

.nm-timing-option input[type="radio"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.nm-timing-option:has(input[type="radio"]:checked) {
    border-color: #e8651a;
    background: #fff7ed;
}

.nm-timing-option__title {
    font-weight: 600;
    font-size: 0.85rem;
    color: #111827;
}
.nm-timing-option__sub {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.1rem;
}

/* ── Confirmation step ── */
.nm-confirm {
    text-align: center;
    padding: 2rem 1.5rem 1rem;
}

.nm-confirm__icon {
    font-size: 2.5rem;
    color: #10b981;
    margin-bottom: 0.75rem;
}

.nm-confirm__title {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    color: #111827;
}

.nm-confirm__summary {
    text-align: left;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.nm-confirm__row {
    display: flex;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
}

.nm-confirm__row + .nm-confirm__row {
    border-top: 1px solid #e5e7eb;
}

.nm-confirm__row--group {
    padding-bottom: 0.25rem;
}

.nm-confirm__row--group .nm-confirm__label {
    font-weight: 600;
    color: #374151;
}

.nm-confirm__row--detail {
    padding-left: 1.5rem;
    font-size: 0.88rem;
}

.nm-confirm__row--detail + .nm-confirm__row--detail {
    border-top: 1px dashed #e5e7eb;
}

.nm-confirm__label {
    color: #6b7280;
}

.nm-confirm__value {
    font-weight: 600;
    color: #111827;
}

.nm-confirm__checklist {
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
}

.nm-confirm__checklist-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

.nm-confirm__checklist-items {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 0.75rem;
}

.nm-confirm__check {
    font-size: 0.82rem;
    color: #4b5563;
    display: flex;
    align-items: center;
}

.nm-parq-option .nm-addon-card__price {
    color: #6b7280;
    font-weight: 500;
}

/* ── Post-creation success screen ── */
.nm-creation-success {
    text-align: center;
    padding: 3rem 1.5rem 2rem;
}

.nm-creation-success__icon {
    font-size: 3rem;
    color: #22c55e;
    margin-bottom: 1rem;
}

.nm-creation-success__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.35rem;
}

.nm-creation-success__text {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
}

.nm-creation-success__summary {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    text-align: left;
    margin-bottom: 1.5rem;
}

.nm-creation-success__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    padding: 0.3rem 0;
}

.nm-creation-success__row + .nm-creation-success__row {
    border-top: 1px solid #f3f4f6;
}

.nm-creation-success__label {
    color: #6b7280;
}

.nm-creation-success__value {
    font-weight: 600;
    color: #111827;
}

.nm-creation-success__payment-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
    font-size: 0.82rem;
    color: #92400e;
    line-height: 1.4;
}

.nm-creation-success__payment-notice i {
    color: #d97706;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.nm-creation-success__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nm-creation-success__actions .btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem 1.25rem;
}

/* ── Footer buttons ── */
.nm-footer-buttons {
    display: flex;
    gap: 0.5rem;
}

.nm-footer-btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.55rem 1rem;
}

.nm-footer-btn--next {
    flex: 1;
}

/* Form inside offcanvas */
.member-newmembership-offcanvas form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Responsive */
@media (max-width: 991.98px) {
    .member-newmembership-offcanvas {
        width: 100% !important;
    }
}

@media (max-width: 600px) {
    .nm-plan-grid {
        grid-template-columns: 1fr;
    }

    .nm-steps__label {
        display: none;
    }

    .nm-filter-chips {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .nm-filter-group {
        width: 100%;
    }

    .nm-filter-divider {
        display: none;
    }
}

/* Membership panel — shared */
.ms-panel-section {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.85rem;
    margin-bottom: 0;
}

.ms-panel-divider {
    height: 0;
    margin: 0.5rem 0;
}

.ms-panel-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ms-panel-section-label i {
    color: #e8651a;
    font-size: 0.75rem;
}

.ms-panel-section-label--sub {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* ── Quiet (secondary) sections ── Members / Activity / Support are supplementary,
   so they drop the card chrome and sit flat. This leaves Payment + Schedule as the
   visually-primary cards, establishing a clear two-tier hierarchy in the panel. */
.ms-panel-section--quiet {
    background: transparent;
    border: none;
    padding: 0.5rem 0.25rem;
}

.ms-panel-section--quiet .ms-panel-section-label {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
    color: #9ca3af;
}

.ms-panel-section--quiet .ms-panel-section-label i {
    color: #9ca3af;
}

/* ── Dark hero ── */
.ms-panel-hero {
    background: #1e293b;
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem 0.9rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: 1rem;
}

.ms-panel-hero__status-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.ms-panel-hero__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ms-panel-hero__dot--green { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.5); }
.ms-panel-hero__dot--red { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
.ms-panel-hero__dot--amber { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }
.ms-panel-hero__dot--grey { background: #6b7280; }

.ms-panel-hero--overdue {
    background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
}
.ms-panel-hero__collect-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.ms-panel-hero__collect-actions .btn:not(.btn-warning):not(.btn-danger) {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 1);
    color: #1f2937;
    font-weight: 600;
}
.ms-panel-hero__collect-actions .btn:not(.btn-warning):not(.btn-danger):hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #111827;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* #40948 — "a re-try has already been requested" notice, shown in place of the
   Collect by DD button when a one-off DD retry is already in flight. */
.ms-panel-hero__retry-pending {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm, 6px);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
}
.ms-panel-hero--overdue .ms-panel-hero__plan-name { color: #fecaca; }
.ms-panel-hero--overdue .ms-panel-hero__strip-label { color: rgba(255, 255, 255, 0.6); }
.ms-panel-hero--overdue .ms-panel-hero__strip { border-top-color: rgba(255, 255, 255, 0.15); }

/* #42484 — "they can't get in" strip inside the hero. Sits on the dark/red hero background, so it
   is a light panel on a translucent white wash rather than the usual light-mode alert colours. */
.ms-panel-hero__blocked {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.12);
    border-left: 3px solid #fecaca;
    font-size: 0.8rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
}
.ms-panel-hero__blocked i {
    margin-top: 0.15rem;
    color: #fecaca;
    flex-shrink: 0;
}
.ms-panel-hero__blocked strong { color: #ffffff; }

/* #42508 — freeze status block. Sits alongside the access block rather than inside the hero
   sentence, because a membership can be overdue AND due to be frozen, and staff need both. Blue
   left-edge so it reads as information about what is coming, not as a further problem like the
   red access block. */
.ms-panel-hero__freeze-status {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.12);
    border-left: 3px solid #bfdbfe;
    font-size: 0.8rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
}
.ms-panel-hero__freeze-status > i {
    margin-top: 0.15rem;
    color: #bfdbfe;
    flex-shrink: 0;
}
.ms-panel-hero__freeze-status strong { color: #ffffff; }
.ms-panel-hero__freeze-status-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}
.ms-panel-hero__freeze-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.ms-panel-hero__freeze-actions .btn-outline-light {
    --bs-btn-padding-y: 0.15rem;
    --bs-btn-padding-x: 0.5rem;
    font-size: 0.75rem;
}
.ms-panel-hero__freeze-hint {
    font-size: 0.75rem;
    opacity: 0.85;
    font-style: italic;
}

/* #42508 — live schedule preview inside the freeze pane. Reuses the panel's own timeline classes so
   it reads as the same object staff already know, with the frozen rows struck through. */
.ms-schedule-timeline--preview {
    margin-top: 0.35rem;
    /* Fits ~10 rows, which covers the common monthly-plan case without scrolling. Longer schedules
       scroll rather than pushing the Freeze button off the bottom of the drawer. */
    max-height: 19rem;
    overflow-y: auto;
}
.ms-schedule-timeline__item--requested .ms-schedule-timeline__icon { color: #b45309; }
.ms-schedule-timeline__badge--requested {
    background: #fef3c7;
    color: #92400e;
}
/* Struck through, not hidden: staff need to see WHICH collections stop, not just how many. */
.ms-schedule-timeline__item.is-skipped .ms-schedule-timeline__date,
.ms-schedule-timeline__item.is-skipped .ms-schedule-timeline__amount {
    text-decoration: line-through;
    opacity: 0.6;
}
.ms-freeze-preview__summary {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle, #e5e7eb);
    font-size: 0.78rem;
    line-height: 1.45;
}
/* Sits directly beneath the "Already requested" rows, tucked under their indent so it reads as a
   note on those rows rather than a separate statement. */
.ms-freeze-preview__requested-note {
    margin: -0.1rem 0 0.35rem 1.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px dashed var(--border-subtle, #e5e7eb);
    font-size: 0.72rem;
    font-weight: 600;
    color: #92400e;
}

.ms-panel-hero--gap {
    background: linear-gradient(135deg, #92400e 0%, #78350f 100%);
}
.ms-panel-hero--gap .ms-panel-hero__plan-name { color: #fde68a; }
.ms-panel-hero--gap .ms-panel-hero__strip-label { color: rgba(255, 255, 255, 0.6); }
.ms-panel-hero--gap .ms-panel-hero__strip { border-top-color: rgba(255, 255, 255, 0.15); }

.ms-panel-hero__gap-prompt {
    margin-top: 0.75rem;
}
.ms-panel-hero__gap-text {
    font-size: 0.82rem;
    color: #fef3c7;
    margin-bottom: 0.5rem;
}

.ms-panel-hero__sentence {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}

.ms-panel-hero__plan-name {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
    margin-bottom: 0.85rem;
}

/* #42154 — quiet "previously frozen" history line under the hero plan name. */
.ms-panel-hero__freeze-note {
    font-size: 0.78rem;
    color: #94a3b8;
    margin: -0.5rem 0 0.85rem;
}
.ms-panel-hero__freeze-note .fa {
    margin-right: 0.3rem;
}

.ms-panel-hero__strip {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.ms-panel-hero__strip-value {
    font-size: 0.82rem;
    font-weight: 600;
    color: #e2e8f0;
}

.ms-panel-hero__strip-label {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

/* ── Hero edit link ── */
.ms-panel-hero__edit-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #64748b;
    background: none;
    border: none;
    padding: 0.4rem 0 0;
    cursor: pointer;
    transition: color 0.15s;
    text-decoration: none;
}
.ms-panel-hero__edit-link:hover { color: #e8651a; }
.ms-panel-hero__edit-link i { font-size: 0.75rem; }

/* ── Contract edit card ── */
.ms-panel-contract-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.85rem 1rem;
}
.ms-panel-contract-card__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}
.ms-panel-contract-card__row label {
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 500;
    margin: 0;
    min-width: 90px;
}
.ms-panel-contract-card__row .form-select-sm,
.ms-panel-contract-card__row .form-control-sm {
    font-size: 0.82rem;
}
.ms-panel-contract-card__actions {
    padding-top: 0.4rem;
    border-top: 1px solid #e5e7eb;
}

/* ── No payment method — prominent hero ── */
.ms-panel-no-payment-hero {
    background: linear-gradient(135deg, #92400e 0%, #78350f 100%);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
}
.ms-panel-no-payment-hero__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.ms-panel-no-payment-hero__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(251, 191, 36, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    color: #fbbf24;
}
.ms-panel-no-payment-hero__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
}
.ms-panel-no-payment-hero__subtitle {
    font-size: 0.75rem;
    color: #fde68a;
    margin-top: 0.15rem;
}
.ms-panel-no-payment-hero__label {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

/* ── No payment method — card-style options ── */
.ms-panel-no-payment-hero .ms-panel-payment-options {
    gap: 0.4rem;
}
.ms-panel-no-payment-hero .ms-panel-payment-option {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.3);
    padding: 0.55rem 0.75rem;
}
.ms-panel-no-payment-hero .ms-panel-payment-option:hover {
    background: #ffffff;
    border-color: #22c55e;
}

.ms-panel-payment-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ms-panel-payment-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
    cursor: pointer;
}
.ms-panel-payment-option:hover {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.04);
    text-decoration: none;
    color: inherit;
}

.ms-panel-payment-option__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
    color: #6b7280;
}
.ms-panel-payment-option:hover .ms-panel-payment-option__icon {
    background: #dcfce7;
    color: #16a34a;
}

.ms-panel-payment-option__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.ms-panel-payment-option__content strong {
    font-size: 0.85rem;
    color: #111827;
}
.ms-panel-payment-option__content span {
    font-size: 0.75rem;
    color: #6b7280;
}

.ms-panel-payment-option__arrow {
    font-size: 0.75rem;
    color: #9ca3af;
    flex-shrink: 0;
    transition: transform 0.15s;
}
.ms-panel-payment-option:hover .ms-panel-payment-option__arrow {
    color: #22c55e;
    transform: translateX(2px);
}

/* ── All payments collected ── */
.ms-panel-all-collected {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #16a34a;
    padding: 0.5rem 0;
}
.ms-panel-all-collected i {
    font-size: 0.9rem;
}

/* ── Setup hero (no active collection) ── */
.ms-panel-setup-hero {
    background: linear-gradient(135deg, #292524, #44403c);
    border-radius: 10px;
    padding: 1rem;
    margin-top: 0.25rem;
    position: relative;
}
.ms-panel-setup-hero__loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(41, 37, 36, 0.92);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    z-index: 2;
    color: #ffffff;
}
.ms-panel-setup-hero__loading-overlay i {
    font-size: 1.75rem;
    color: #e8651a;
}
.ms-panel-setup-hero__loading-overlay span {
    font-weight: 600;
    font-size: 0.9rem;
}

.ms-panel-payment-method--just-setup {
    animation: ms-panel-just-setup-pulse 1.8s ease-out 1;
    border-radius: 10px;
}
@keyframes ms-panel-just-setup-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); background: rgba(16, 185, 129, 0.12); }
    60%  { box-shadow: 0 0 0 14px rgba(16, 185, 129, 0); background: rgba(16, 185, 129, 0.04); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); background: transparent; }
}
.ms-panel-setup-hero__header {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}
.ms-panel-setup-hero__header > i {
    font-size: 1.1rem;
    color: #e8651a;
    margin-top: 0.15rem;
    flex-shrink: 0;
}
.ms-panel-setup-hero__title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #f8fafc;
}
.ms-panel-setup-hero__subtitle {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.1rem;
}
.ms-panel-setup-hero .ms-panel-payment-options {
    gap: 0.4rem;
}
.ms-panel-setup-hero .ms-panel-payment-option {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}
.ms-panel-setup-hero .ms-panel-payment-option:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}
.ms-panel-setup-hero .ms-panel-payment-option__content strong {
    color: #f1f5f9;
}
.ms-panel-setup-hero .ms-panel-payment-option__content span {
    color: #94a3b8;
}
.ms-panel-setup-hero .ms-panel-payment-option__icon {
    background: rgba(255, 255, 255, 0.1);
    color: #e8651a;
}
.ms-panel-setup-hero .ms-panel-payment-option__arrow {
    color: #64748b;
}
.ms-panel-setup-hero .ms-panel-payment-option:hover .ms-panel-payment-option__arrow {
    color: #e8651a;
}
.ms-panel-setup-hero .ms-panel-mandate-note {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.25);
    color: #fbbf24;
    margin-bottom: 0.6rem;
}
.ms-panel-setup-hero .ms-panel-mandate-note i {
    color: #fbbf24;
}
.ms-panel-setup-hero__footer {
    font-size: 0.75rem;
    color: #78716c;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-panel-mandate-note {
    font-size: 0.75rem;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    margin-top: 0.4rem;
}
.ms-panel-mandate-note i {
    color: #d97706;
    margin-right: 0.3rem;
}

/* ── Post-till payment setup picker (SweetAlert chips) ── */
.payment-setup-warning {
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    margin: 0.5rem 0 1rem;
    text-align: left;
}
.payment-setup-warning i {
    color: #d97706;
}
.payment-setup-chips {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.payment-setup-chip {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.payment-setup-chip:hover,
.payment-setup-chip:focus-visible {
    border-color: #e8651a;
    background: #fff7ed;
    box-shadow: 0 2px 8px rgba(232, 101, 26, 0.15);
    transform: translateY(-1px);
    outline: none;
}
.payment-setup-chip__icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: #f3f4f6;
    color: #4b5563;
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.payment-setup-chip:hover .payment-setup-chip__icon {
    background: #e8651a;
    color: #ffffff;
}
.payment-setup-chip--primary .payment-setup-chip__icon {
    background: #e8651a;
    color: #ffffff;
}
.payment-setup-chip__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}
.payment-setup-chip__title {
    font-weight: 600;
    color: #111827;
    font-size: 0.9rem;
}
.payment-setup-chip__subtitle {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.1rem;
}
.payment-setup-chip__arrow {
    color: #9ca3af;
    transition: transform 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.payment-setup-chip:hover .payment-setup-chip__arrow {
    color: #e8651a;
    transform: translateX(3px);
}

/* ── Payment method ── */
.ms-panel-payment-method {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0;
    font-size: 0.85rem;
    color: #374151;
}

.ms-panel-payment-method__icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.ms-panel-payment-method__icon--green {
    background: #dcfce7;
    color: #16a34a;
}

.ms-panel-payment-method__icon--amber {
    background: #fef3c7;
    color: #d97706;
}

.ms-panel-payment-method__icon--grey {
    background: #f3f4f6;
    color: #6b7280;
}

.ms-panel-payment-method__name {
    font-weight: 600;
    font-size: 0.85rem;
    color: #111827;
}

.ms-panel-payment-method__ref {
    font-size: 0.75rem;
    color: #9ca3af;
    font-family: monospace;
}

.ms-panel-payment-method__health {
    margin-left: auto;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ── Next payment ── */
.ms-panel-next-payment {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f0f9ff;
    border-left: 3px solid #3b82f6;
    border-radius: 0 12px 12px 0;
    font-size: 0.82rem;
    color: #1e40af;
    font-weight: 500;
}

.ms-panel-next-payment a {
    margin-left: auto;
    color: #3b82f6;
    font-weight: 600;
    font-size: 0.75rem;
    text-decoration: none;
}

.ms-panel-next-payment a:hover {
    text-decoration: underline;
}

/* ── Freeze / Cancel action panels ── */
.ms-action-panel {
    border-radius: 10px;
    padding: 1rem;
    scroll-margin-bottom: 7rem;
}

.ms-action-panel--freeze {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.ms-action-panel--cancel {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.ms-action-panel__title {
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.ms-action-panel--freeze .ms-action-panel__title {
    color: #1e40af;
}

.ms-action-panel--cancel .ms-action-panel__title {
    color: #991b1b;
}

.ms-action-panel__label {
    font-size: 0.82rem;
    white-space: nowrap;
}

.ms-action-panel__impact {
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-md);
    padding: 0.625rem 0.75rem;
}

.ms-action-panel__impact-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.375rem;
}

.ms-action-panel__impact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ms-action-panel__impact-list li {
    font-size: 0.78rem;
    color: #374151;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    line-height: 1.4;
}

.ms-action-panel__impact-list li i {
    margin-top: 0.15rem;
    flex-shrink: 0;
    font-size: 0.75rem;
}

/* ── Progress bar ── */
.ms-panel-progress {
    padding: 0.1rem 0;
}

.ms-panel-progress__label {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.3rem;
    display: flex;
    justify-content: space-between;
}

.ms-panel-progress__bar {
    height: 6px;
    background: #e5e7eb;
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.ms-panel-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: var(--radius-xs);
    transition: width 0.3s ease;
}

.ms-panel-progress__rolling {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.3rem;
    font-weight: 500;
}

/* ── Financial totals ── */
.ms-panel-financials {
    display: flex;
    gap: 0;
    font-size: 0.82rem;
    background: #f9fafb;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ms-panel-financials__item {
    flex: 1;
    text-align: center;
    padding: 0.55rem 0.25rem;
}

.ms-panel-financials__item:not(:last-child) {
    border-right: 1px solid #e5e7eb;
}

.ms-panel-financials__value {
    font-weight: 700;
    font-size: 0.88rem;
    color: #111827;
}

.ms-panel-financials__value--danger {
    color: #dc2626;
}

.ms-panel-financials__label {
    font-size: 0.75rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.1rem;
}

/* ── Collect payment callout ── */
/* ── Sticky collect bar ── */
.ms-panel-sticky-collect {
    position: sticky;
    bottom: -1rem;
    background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-top: 1rem;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    z-index: 10;
}
.ms-panel-sticky-collect__amount {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.ms-panel-sticky-collect__amount i { color: #fca5a5; }
.ms-panel-sticky-collect__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ms-panel-sticky-collect .btn-danger {
    background: #dc2626;
    border-color: #dc2626;
    font-weight: 600;
}
.ms-panel-sticky-collect .btn-outline-danger {
    color: #fecaca;
    border-color: rgba(254, 202, 202, 0.4);
    font-weight: 600;
}
.ms-panel-sticky-collect .btn-outline-danger:hover {
    background: rgba(254, 202, 202, 0.15);
    color: #ffffff;
    border-color: rgba(254, 202, 202, 0.6);
}

/* ── Collapse toggle ── */
.ms-panel-collapse-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #6b7280;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.25rem 0;
    transition: color 0.15s;
}

.ms-panel-collapse-toggle:hover {
    color: #e8651a;
}

.ms-panel-collapse-toggle i,
.ms-panel-collapse-toggle svg {
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.ms-panel-collapse-toggle[aria-expanded="true"] i,
.ms-panel-collapse-toggle[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

/* ── Context-aware schedule timeline ── */
.ms-schedule-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #fef2f2;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    font-weight: 600;
    color: #dc2626;
    margin-bottom: 0.75rem;
}
.ms-schedule-alert i { font-size: 0.9rem; }

.ms-schedule-alert--gap {
    background: #fffbeb;
    color: #92400e;
}

.ms-schedule-timeline {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.75rem;
}

.ms-schedule-timeline__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    border-left: 2px solid #e5e7eb;
    margin-left: 0.5rem;
}

.ms-schedule-timeline__item--paid { border-left-color: #22c55e; }
.ms-schedule-timeline__item--paid .ms-schedule-timeline__icon { color: #22c55e; }

.ms-schedule-timeline__item--overdue {
    border-left-color: #dc2626;
    background: #fef2f2;
    border-radius: 0 12px 12px 0;
}
.ms-schedule-timeline__item--overdue .ms-schedule-timeline__icon { color: #dc2626; }

.ms-schedule-timeline__item--gap {
    border-left-color: #f59e0b;
    background: #fffbeb;
    border-radius: 0 12px 12px 0;
}
.ms-schedule-timeline__item--gap .ms-schedule-timeline__icon { color: #f59e0b; }
.ms-schedule-timeline__item--gap .ms-schedule-timeline__amount { color: #92400e; }

/* #42484 — submitted to the bank but not cleared. Amber, deliberately NOT green: on this timeline
   green means the money actually landed, and a green row under a red Overdue hero reads as a bug. */
.ms-schedule-timeline__item--collecting {
    border-left-color: #f59e0b;
    background: #fffbeb;
    border-radius: 0 12px 12px 0;
}
.ms-schedule-timeline__item--collecting .ms-schedule-timeline__icon { color: #f59e0b; }
.ms-schedule-timeline__item--collecting .ms-schedule-timeline__amount { color: #92400e; }

.ms-schedule-timeline__item--frozen {
    border-left-color: #38bdf8;
    background: #f0f9ff;
    border-radius: 0 12px 12px 0;
}
.ms-schedule-timeline__item--frozen .ms-schedule-timeline__icon { color: #38bdf8; }
.ms-schedule-timeline__item--frozen .ms-schedule-timeline__amount { color: #64748b; text-decoration: line-through; }

.ms-schedule-timeline__item--future {
    border-left-color: #94a3b8;
    opacity: 0.6;
}
.ms-schedule-timeline__item--future .ms-schedule-timeline__icon { color: #94a3b8; }

.ms-schedule-timeline__icon {
    width: 16px;
    text-align: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.ms-schedule-timeline__date {
    min-width: 80px;
    color: #374151;
}

.ms-schedule-timeline__amount {
    font-weight: 600;
    min-width: 55px;
    color: #111827;
}
.ms-schedule-timeline__item--overdue .ms-schedule-timeline__amount { color: #dc2626; }

.ms-schedule-timeline__badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    margin-left: auto;
}
.ms-schedule-timeline__badge--paid { color: #16a34a; background: #f0fdf4; }
.ms-schedule-timeline__badge--overdue { color: #dc2626; background: rgba(220, 38, 38, 0.1); }
.ms-schedule-timeline__badge--gap { color: #92400e; background: #fef3c7; }
.ms-schedule-timeline__badge--collecting { color: #92400e; background: #fef3c7; }
.ms-schedule-timeline__badge--frozen { color: #0284c7; background: #e0f2fe; }
.ms-schedule-timeline__badge--future { color: #64748b; background: #f1f5f9; }

/* #42484 — sub-line under a Collecting row explaining the retry (attempt number + bank reason). */
.ms-schedule-timeline__note {
    padding: 0.15rem 0.75rem 0.35rem 1.65rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #92400e;
}

.ms-schedule-timeline__gap {
    padding: 0.25rem 0.75rem;
    margin-left: 0.5rem;
    border-left: 2px dashed #e5e7eb;
    font-size: 0.75rem;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ── Stats row ── */
.ms-panel-stats {
    display: flex;
    gap: 0.75rem;
}

.ms-panel-stats__item {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.ms-panel-stats__value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
}

.ms-panel-stats__label {
    font-size: 0.75rem;
    color: #6b7280;
}

/* ── Contract settings ── */
.ms-panel-contract {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    font-size: 0.82rem;
}

.ms-panel-contract label {
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}

/* ── Actions toggle ── */
/* ── Action toolbar ── */
.ms-panel-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}
.ms-panel-toolbar .btn {
    flex: 1 1 0;
    font-size: 0.78rem;
    padding: 0.4rem 0.5rem;
    text-align: center;
    white-space: nowrap;
}
.ms-panel-toolbar__cancel-info {
    flex: 1 1 0;
    font-size: 0.78rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.5rem;
}
.ms-panel-toolbar form {
    flex: 1 1 0;
    display: flex;
}
.ms-panel-toolbar form .btn {
    flex: 1;
}
.ms-panel-toolbar__limit-info {
    font-size: 0.82rem;
    color: #dc3545;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
}

/* ── Payment schedule table ── */
.member-membership-offcanvas .table {
    font-size: 0.78rem;
}

.member-membership-offcanvas .table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 600;
    white-space: nowrap;
}

.member-membership-offcanvas h4 {
    font-size: 0.95rem;
    font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .ms-panel-hero__strip {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .ms-panel-financials {
        flex-direction: column;
    }

    .ms-panel-financials__item {
        border-right: none !important;
        border-bottom: 1px solid #e5e7eb;
    }

    .ms-panel-financials__item:last-child {
        border-bottom: none;
    }

    .ms-panel-payment-method {
        flex-wrap: wrap;
    }

    .ms-panel-payment-method__health {
        margin-left: 0;
        width: 100%;
        margin-top: 0.25rem;
    }

    .ms-panel-stats {
        flex-direction: column;
        gap: 0.25rem;
    }

    .ms-panel-contract {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ══════════════════════════════════════════════════════════════════
   cls-*  —  Diary modal & View class screen components
   ══════════════════════════════════════════════════════════════════ */

/* ── Hero card (modal variant) ── */
.cls-hero {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem 0.9rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    margin-bottom: 1rem;
}

/* Page variant — wider padding for full-page context */
.cls-hero--page {
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem 1rem;
}

/* ── Status row (dot + sentence) ── */
.cls-hero__status-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.cls-hero__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cls-hero__dot--green  { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.5); }
.cls-hero__dot--red    { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
.cls-hero__dot--amber  { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }
.cls-hero__dot--grey   { background: #6b7280; }

.cls-hero__sentence {
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748b;
}

/* ── Class name ── */
.cls-hero__class-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.65rem;
    line-height: 1.3;
}

/* ── Info strip (4-col grid) ── */
.cls-hero__strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}
.cls-hero__strip-item { }
.cls-hero__strip-value {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
}
.cls-hero__strip-label {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

/* ── Hero actions ── */
.cls-hero__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.65rem;
    margin-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
}

.cls-hero__edit-link,
.cls-hero__view-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #64748b;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.15s;
    text-decoration: none;
}
.cls-hero__edit-link:hover,
.cls-hero__view-link:hover { color: #e8651a; text-decoration: none; }
.cls-hero__edit-link i,
.cls-hero__view-link i { font-size: 0.75rem; }

/* ── Deleted banner ── */
.cls-hero__deleted-banner {
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 0.35rem;
}

/* F9 — single banner shown once at the top of a past activity's panel (replaces
   the per-attendee-row repetition). Soft amber so it reads as a notice rather
   than an error. */
.cls-past-banner {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1rem 0;
    padding: 0.55rem 0.85rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-md);
    color: #78350f;
    font-size: 0.82rem;
    line-height: 1.4;
}
.cls-past-banner i {
    color: #b45309;
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* ── Section structure ── */
.cls-section {
    padding: 0.75rem 0;
}

.cls-section-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}
.cls-section-label i {
    color: #e8651a;
    font-size: 0.75rem;
}
.cls-section-label__count {
    font-weight: 700;
    color: #6b7280;
}

/* Panel loading states */
.cls-panel--loading {
    position: relative;
    min-height: 60px;
}
.cls-panel--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-md);
    z-index: 2;
}
.cls-panel--loading::before {
    content: '';
    position: absolute;
    top: calc(50% - 12px);
    left: calc(50% - 12px);
    width: 24px;
    height: 24px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--club-color, #6366f1);
    border-radius: 50%;
    animation: panel-spin 0.6s linear infinite;
    z-index: 3;
}
@keyframes panel-spin {
    to { transform: rotate(360deg); }
}

.cls-section-label__csv {
    margin-left: auto;
    font-size: 0.75rem;
    color: #6b7280;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    text-decoration: none;
}
.cls-section-label__csv:hover { color: #e8651a; }

/* ── Capacity bar ── */
.cls-capacity {
    margin-bottom: 0.6rem;
}
/* Capacity bar inline within section label */
.cls-section-label > .cls-capacity {
    flex: 1;
    margin-bottom: 0;
    min-width: 60px;
}
.cls-capacity__bar {
    height: 6px;
    background: #e5e7eb;
    border-radius: var(--radius-xs);
    overflow: hidden;
}
.cls-capacity__fill {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width 0.3s ease;
    background: #22c55e;
}
.cls-capacity__fill--amber { background: #f59e0b; }
.cls-capacity__fill--red   { background: #ef4444; }
.cls-capacity__text {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.2rem;
}

/* ── Pending bookings (awaiting payment) ── */
#pendingBookingsPanel:empty {
    display: none;
}
.cls-view-card--pending {
    border-radius: var(--radius-lg);
}
.cls-pending-section__header {
    background: #fffbeb;
    border-bottom-color: #fde68a;
}
.cls-pending-section__header i {
    color: #b45309;
}
.cls-pending-section__count {
    font-weight: 700;
    color: #92400e;
}
.cls-pending-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.55rem 0.65rem;
}
.cls-pending-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.55rem;
    background: #fffdf5;
    border-radius: 10px;
}
.cls-pending-row__photo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.cls-pending-row__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #9ca3af;
}
.cls-pending-row__info {
    flex: 1;
    min-width: 0;
}
.cls-pending-row__name {
    font-weight: 600;
    color: #111827;
    font-size: 0.9rem;
    line-height: 1.2;
}
.cls-pending-row__memberno {
    color: #9ca3af;
    font-weight: 400;
    font-size: 0.8rem;
    margin-left: 0.25rem;
}
.cls-pending-row__meta {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.cls-pending-row__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #fef3c7;
    color: #92400e;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.75rem;
}
.cls-pending-row__staff {
    color: #6b7280;
}
.cls-pending-row__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.cls-pending-row__amount {
    font-weight: 700;
    color: #111827;
    font-size: 0.95rem;
}

/* ── Attendee rows ── */
.cls-attendee {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    padding: 0.55rem 0;
}
.cls-attendee + .cls-attendee { border-top: 1px solid #f3f4f6; }

.cls-attendee__photo {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
}

.cls-attendee__info {
    flex: 1;
    min-width: 120px;
}
.cls-attendee__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
}
.cls-attendee__name:hover { color: #e8651a; text-decoration: none; }
.cls-attendee__memberno {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 400;
    margin-left: 0.25rem;
}
.cls-attendee__meta {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.1rem;
}
.cls-attendee__meta a { color: #6b7280; }
.cls-attendee__meta a:hover { color: #e8651a; }
.cls-add-regular-link {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--admin-club-color, #667eea) !important;
    border: 1px solid var(--admin-club-color, #667eea);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.cls-add-regular-link:hover {
    background: var(--admin-club-color, #667eea);
    color: #fff !important;
}

/* ── Payment badges ── */
.cls-attendee__pay-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 10px;
    white-space: nowrap;
    text-decoration: none;
}
.cls-attendee__pay-badge--paid {
    background: #dcfce7;
    color: #15803d;
}
.cls-attendee__pay-badge--unpaid {
    background: #fef3c7;
    color: #92400e;
}
.cls-attendee__pay-detail {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.1rem;
}
.cls-attendee__pay-detail-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 10rem;
}
.cls-attendee__attend-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 10px;
    white-space: nowrap;
    text-decoration: none;
}
.cls-attendee__attend-badge--attended {
    background: #dcfce7;
    color: #15803d;
}
.cls-attendee__attend-badge--missed {
    background: #fee2e2;
    color: #b91c1c;
}

/* ── Attendee actions ── */
.cls-attendee__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.cls-attendee__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}
.cls-attendee__btn:hover {
    border-color: #d1d5db;
    color: #374151;
    background: #f9fafb;
    text-decoration: none;
}
.cls-attendee__btn.disabled {
    opacity: 0.4;
    cursor: default;
}
.cls-attendee__btn--checkin {
    border-color: #d1d5db;
    color: #374151;
    font-size: 0.75rem;
    width: auto;
    padding: 0 0.55rem;
    gap: 0.25rem;
}
.cls-attendee__btn--checkin:hover {
    border-color: #22c55e;
    color: #16a34a;
    background: #f0fdf4;
}
.cls-attendee__btn--attended {
    border-color: #22c55e;
    background: #dcfce7;
    color: #16a34a;
    font-size: 0.75rem;
    width: auto;
    padding: 0 0.55rem;
    cursor: default;
}
.cls-attendee__btn--bookin {
    border-color: #22c55e;
    background: #22c55e;
    color: #fff;
    font-size: 0.75rem;
    width: auto;
    padding: 0 0.55rem;
}
.cls-attendee__btn--bookin:hover {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.cls-attendee__btn--pay {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #b45309;
    font-size: 0.75rem;
    width: auto;
    padding: 0 0.55rem;
    gap: 0.25rem;
}
.cls-attendee__btn--pay:hover {
    border-color: #f59e0b;
    background: #fef3c7;
    color: #92400e;
}
.cls-attendee__btn--danger:hover {
    border-color: #fca5a5;
    color: #dc2626;
    background: #fef2f2;
}

/* ── Waiting/previous row variants ── */
.cls-attendee--waiting .cls-attendee__name,
.cls-attendee--previous .cls-attendee__name {
    font-weight: 500;
}

/* ── High-risk PAR-Q attendee ── */
.cls-attendee--highrisk {
    background: #fffbeb;
    border-left: 3px solid #d97706;
    padding-left: 0.4rem;
    margin-left: -0.4rem;
    border-radius: var(--radius-sm) 0 0 4px;
}
.cls-attendee__highrisk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 0.35rem;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: #d97706;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    vertical-align: middle;
    white-space: nowrap;
}
.cls-attendee__highrisk i {
    font-size: 0.75rem;
}

/* ── Attendee group sub-labels (used inside AJAX response) ── */
.cls-attendee-group__label {
    display: none;
}
.cls-attendee-group__count {
    font-weight: 600;
    color: #9ca3af;
}


/* ============================================================
   Diary — Waiting List View (#40004)
   ────────────────────────────────────────────────────────────
   Compiled from src/ClubRight.UI/wwwroot/scss/diary/_waiting-list-view.scss
   Used by Views/Diary/_WaitingListView.cshtml and _WaitingListEventRow.cshtml.
   Mirrors the .cls-attendee/.cls-section-label visual language so the
   list-mode view feels native to the rest of the diary surface.
   ============================================================ */
.wlv-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wlv-day__header {
    position: sticky;
    top: 0;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e5e7eb;
    z-index: 10;
    margin-bottom: 0.5rem;
}

.wlv-row {
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    background: #fff;
}

.wlv-row__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.wlv-row__head-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.wlv-row__title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.wlv-row__time {
    font-weight: 700;
    font-size: 0.9rem;
    color: #111827;
    min-width: 3.25rem;
}

.wlv-row__name {
    font-weight: 600;
    color: #111827;
}

.wlv-row__meta {
    color: #6b7280;
    font-size: 0.8rem;
}

.wlv-row__open-btn {
    display: inline-block;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--admin-club-color, #667eea);
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--admin-club-color, #667eea);
    border-radius: var(--radius-sm);
    line-height: 1.4;
    transition: background 0.15s ease, color 0.15s ease;
}

    .wlv-row__open-btn:hover {
        background: var(--admin-club-color, #667eea);
        color: #fff;
        text-decoration: none;
    }

.wlv-row__capacity {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wlv-row__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.wlv-row__dot--green {
    background: #22c55e;
}

.wlv-row__dot--amber {
    background: #f59e0b;
}

.wlv-row__dot--red {
    background: #ef4444;
}

.wlv-row__dot--grey {
    background: #9ca3af;
}

.wlv-row__waitlist {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #e5e7eb;
}

.wlv-row__waitlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

.wlv-row__waitlist-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.wlv-row__waitlist-empty-text {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.8rem;
}

.wlv-row__waitlist--empty {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.wlv-row__members {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wlv-row__member {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    gap: 1rem;
}

    .wlv-row__member + .wlv-row__member {
        border-top: 1px solid #f3f4f6;
    }

.wlv-row__member-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.wlv-row__member-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
}

.wlv-row__member-payment {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.1rem;
}

.wlv-row__member-warning {
    font-size: 0.75rem;
    color: #dc2626;
    font-weight: 600;
    margin-top: 0.1rem;
}

.wlv-row__member-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.wlv-row__bookin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid #22c55e;
    background: #22c55e;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .wlv-row__bookin-btn:hover {
        background: #16a34a;
        border-color: #16a34a;
        color: #fff;
    }

    .wlv-row__bookin-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.wlv-row__add-btn,
.wlv-row__msg-btn,
.wlv-row__remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .wlv-row__add-btn:hover,
    .wlv-row__msg-btn:hover,
    .wlv-row__remove-btn:hover {
        background: #f9fafb;
        border-color: #d1d5db;
        color: #374151;
    }

.wlv-row__remove-btn {
    padding: 0.3rem 0.55rem;
}

    .wlv-row__remove-btn:hover {
        border-color: #fca5a5;
        color: #dc2626;
        background: #fef2f2;
    }

.wlv-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
}

    .wlv-empty i {
        display: block;
        margin-bottom: 1rem;
        color: #9ca3af;
    }

    .wlv-empty p {
        margin: 0 0 0.75rem;
        font-size: 0.9rem;
    }

@media (max-width: 768px) {
    .wlv-row {
        padding: 0.6rem 0.75rem;
    }

    .wlv-row__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .wlv-row__head-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .wlv-row__title {
        width: 100%;
    }

    .wlv-row__member {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .wlv-row__member-actions {
        align-self: stretch;
        justify-content: flex-end;
    }

    .wlv-row__waitlist-actions {
        flex-wrap: wrap;
    }

    .wlv-row__waitlist--empty {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
}

/* ── Search input ── */
.cls-search-input {
    margin-top: 0.5rem;
}
.cls-search-input input {
    font-size: 0.85rem;
    border-radius: var(--radius-md);
    border: 1px solid #e5e7eb;
    padding: 0.45rem 0.75rem;
}
.cls-search-input input:focus {
    border-color: #e8651a;
    box-shadow: 0 0 0 2px rgba(232, 101, 26, 0.12);
}

/* ── Booking flow button & modal ── */
.cls-book-action {
    padding: 0.85rem;
    border-top: 1px solid #f3f4f6;
}
.cls-view-card__body > .cls-book-action {
    padding: 0.85rem 0 0;
    margin-bottom: 0.1rem;
    border-top: 1px solid #f3f4f6;
}
.cls-book-btn {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--admin-club-color-contrast, #fff);
    background: var(--admin-club-color, #667eea);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: filter 0.15s ease;
    text-align: center;
    box-sizing: border-box;
    line-height: 1.5;
}
.cls-book-btn:hover {
    filter: brightness(0.9);
}
.cls-book-btn i {
    margin-right: 0.35rem;
}
.cls-book-btn--secondary {
    background: transparent;
    color: #374151;
    border: 1px solid #d1d5db;
}
.cls-book-btn--secondary:hover {
    background: #f3f4f6;
    color: #111827;
}
.cls-booking-search__label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0.5rem;
}
.cls-booking-hint {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 0.5rem;
}
/* #42445 — compact "the room is the real cap" chip shown beside the attendee count.
   Short visible label; the full explanation is in the hover tooltip (below). */
.cls-capacity-note {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #b45309;
    white-space: nowrap;
    vertical-align: middle;
}
/* Let this chip's tooltip wrap to a readable width instead of one long nowrap line, and
   open it DOWNWARD — the chip sits high in the panel, so an upward tooltip is clipped by the
   card/header edge. Opening below keeps the full message inside the card body. */
.cls-capacity-note.has-tooltip::after {
    white-space: normal;
    max-width: 260px;
    width: max-content;
    bottom: auto;
    top: calc(100% + 6px);
}
.cls-booking-back {
    display: inline-block;
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 1rem;
    text-decoration: none;
}
.cls-booking-back:hover {
    color: #374151;
}
.cls-booking-back i {
    margin-right: 0.25rem;
}

/* ── Booking Type Choice (regular vs one-off) ── */
.cls-booking-type-choice {
    text-align: left;
}
/* F14 — Activity echo line under the "How would you like to book…" heading. */
.cls-booking-type-context {
    margin-top: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-left: 3px solid var(--admin-club-color, #667eea);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    color: #475569;
}
.cls-booking-type-context .fa {
    margin-right: 0.35rem;
    color: var(--admin-club-color, #667eea);
}
.cls-booking-type-option {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    margin-top: 0.65rem;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.cls-booking-type-option:hover {
    border-color: #e8651a;
    background: #fef7f2;
    box-shadow: 0 0 0 1px #e8651a;
}
.cls-booking-type-option__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: #f3f4f6;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.cls-booking-type-option:hover .cls-booking-type-option__icon {
    background: rgba(232, 101, 26, 0.12);
    color: #e8651a;
}
.cls-booking-type-option__title {
    font-weight: 600;
    font-size: 0.85rem;
    color: #111827;
}
.cls-booking-type-option__desc {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 0.1rem;
}
.cls-booking-type-option--loading {
    border-color: #e8651a;
    background: #fef7f2;
}
.cls-booking-type-option--disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ── Booking Pay Options ── */
.cls-pay-member {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0;
    margin-bottom: 0.75rem;
}
.cls-pay-member__photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.cls-pay-member__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}
.cls-pay-member__memberno {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-left: 0.35rem;
}
.cls-pay-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    margin-bottom: 0.5rem;
}
.cls-pay-option:hover {
    border-color: var(--admin-club-color, #667eea);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--admin-club-color, #667eea) 12%, transparent);
}
.cls-pay-option__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 12%, transparent);
    color: var(--admin-club-color, #667eea);
}
.cls-pay-option__body {
    flex: 1;
    min-width: 0;
}
.cls-pay-option__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
}
.cls-pay-option__detail {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.1rem;
}

/* Setup-blocker variant — used when the class has no priced product, so the
   booking can't proceed and the till isn't a workaround either. Amber tint
   so it reads as "needs configuration", not "click me to pay". */
.cls-pay-option--blocked {
    background: #fffbeb;
    border-color: #fcd34d;
}
.cls-pay-option--blocked:hover {
    border-color: #fcd34d;
    box-shadow: none;
}
.cls-pay-option__icon--warn {
    background: #fef3c7;
    color: #b45309;
}
.cls-setup-steps {
    margin-top: 0.6rem;
    padding: 0.7rem 0.85rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    color: #374151;
}
.cls-setup-steps__title {
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.35rem;
}
.cls-setup-steps__list {
    margin: 0;
    padding-left: 1.1rem;
    line-height: 1.5;
}
.cls-setup-steps__list li {
    margin-bottom: 0.15rem;
}
.cls-setup-steps__list strong {
    color: #111827;
    font-weight: 600;
}
.cls-setup-steps__list a {
    color: var(--admin-club-color, #4f46e5);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cls-setup-steps__list a:hover {
    text-decoration-thickness: 2px;
}
.cls-pay-heading {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.5rem;
}
.cls-pay-desc {
    font-size: 0.82rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
}

/* ── QuickPay widget (in-context payment for diary, future sessions, memberships, appointments) ── */
.cls-quickpay {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 0.5rem;
}
.cls-quickpay__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.cls-quickpay__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 12%, transparent);
    color: var(--admin-club-color, #667eea);
}
.cls-quickpay__body {
    flex: 1 1 auto;
    min-width: 0;
}
.cls-quickpay__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.04em;
}
.cls-quickpay__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.25;
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cls-quickpay__amount {
    flex-shrink: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
}
.cls-quickpay__charge {
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
}
.cls-quickpay__charge[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}
.cls-quickpay__till {
    font-size: 0.85rem;
    text-decoration: none;
}
.cls-quickpay__till:hover {
    text-decoration: none;
}
.cls-quickpay__error {
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 0.82rem;
    border: 1px solid #fecaca;
}

/* ── Move Booking Activity Header ── */
.cls-move-activity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}
.cls-move-activity__image {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
}
.cls-move-activity__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-club-color, #667eea);
    color: #fff;
    font-size: 1.1rem;
}
.cls-move-activity__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}
.cls-move-activity__date {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 0.15rem;
}
.cls-move-activity__date i {
    margin-right: 0.2rem;
    font-size: 0.75rem;
}

.cls-pay-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.cls-pay-actions .cls-book-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
.cls-pay-actions .cls-book-btn:hover {
    color: var(--admin-club-color-contrast, #fff);
    text-decoration: none;
}
.cls-pay-actions .cls-book-btn--secondary:hover {
    color: #111827;
}
.cls-pay-basket-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    color: #166534;
    margin-bottom: 0.75rem;
}
.cls-pay-basket-notice i {
    font-size: 0.9rem;
}
.cls-pay-resources {
    margin-bottom: 0.75rem;
}
.cls-pay-resources label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.25rem;
}
.cls-pay-resources select {
    font-size: 0.82rem;
}

/* ── Inline booking-payment widget ──
   Replaces the old "Go to till" hand-off in the PayOptions modal so a single
   class booking can be priced + paid for + booked in one screen. The till is
   still reachable from the link at the bottom for combined sales.

   Layout is a stepped wizard — numbered sections so the staff can see at a
   glance where they are: 1. Sessions  →  2. Pick credit  →  3. Pay. */
.cls-inline-pay {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 0.25rem;
}
.cls-inline-pay__section {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f3f5;
}
.cls-inline-pay__section:first-child {
    padding-top: 0;
    border-top: 0;
}
.cls-inline-pay__section-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}
.cls-inline-pay__section-step {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cls-inline-pay__section-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
    letter-spacing: 0.01em;
}
.cls-inline-pay__step {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.cls-inline-pay__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}
/* Optional middle step (after product pick): visually less prominent than the
   numbered sections — it's a "do you want to add more?" prompt, not a required
   step. Reads as part of section 1 / 2 transition. */
.cls-inline-pay__add-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.25rem 0;
    border-top: 1px dashed #e5e7eb;
    border-bottom: 1px dashed #e5e7eb;
}
.cls-inline-pay__products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem;
}
.cls-inline-pay__product {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.7rem 0.65rem;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}
.cls-inline-pay__product:hover {
    border-color: var(--admin-club-color, #667eea);
    background: #f9fafb;
}
.cls-inline-pay__product.is-selected {
    border-color: var(--admin-club-color, #667eea);
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 8%, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-club-color, #667eea) 18%, transparent);
}
.cls-inline-pay__product-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
}
.cls-inline-pay__product-meta {
    font-size: 0.75rem;
    color: #6b7280;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem;
}
.cls-inline-pay__product-price {
    font-weight: 700;
    color: #111827;
}
.cls-inline-pay__methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.4rem;
}
.cls-inline-pay__method {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.82rem;
    color: #374151;
    text-align: left;
    transition: all 0.15s ease;
    position: relative;
}
.cls-inline-pay__method i {
    color: #6b7280;
    width: 1rem;
    text-align: center;
}
.cls-inline-pay__method:hover {
    border-color: var(--admin-club-color, #667eea);
    background: #f9fafb;
}
.cls-inline-pay__method.is-selected {
    border-color: var(--admin-club-color, #667eea);
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 8%, #fff);
    color: #111827;
    font-weight: 600;
}
.cls-inline-pay__method.is-selected i {
    color: var(--admin-club-color, #667eea);
}
.cls-inline-pay__method-badge {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.cls-inline-pay__error {
    padding: 0.55rem 0.7rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    color: #991b1b;
    font-size: 0.8rem;
}
.cls-inline-pay__till-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    margin-top: 0.1rem;
    font-size: 0.78rem;
    color: #6b7280;
    text-decoration: none;
    border-top: 1px dashed #e5e7eb;
}
.cls-inline-pay__till-link:hover {
    color: var(--admin-club-color, #667eea);
    text-decoration: none;
}
.cls-inline-pay__till-link-action {
    font-weight: 600;
    color: #374151;
}
.cls-inline-pay__till-link:hover .cls-inline-pay__till-link-action {
    color: var(--admin-club-color, #667eea);
}
.cls-inline-pay [data-inline-pay-go]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* #41217 inline card-entry panel — hosts the UniPaas embedded checkout in the booking modal. */
.cls-inline-pay__card-panel {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 0.6rem;
    margin-top: 0.1rem;
    border-top: 1px dashed #e5e7eb;
}

.cls-inline-pay__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cls-inline-pay__card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

    .cls-inline-pay__card-title i {
        margin-right: 0.35rem;
        color: var(--admin-club-color, #667eea);
    }

.cls-inline-pay__card-amount {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
}

.cls-inline-pay__card-mount {
    width: 100%;
    min-height: 3rem;
}

/* Phase 3 multi-class basket: anchor row is the originating event (locked),
   extra rows are sessions added via the picker. Pricing-relevant total is
   re-computed client-side in refreshGo() and verified server-side. */
.cls-inline-pay__basket {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.55rem 0.7rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
}
.cls-inline-pay__basket-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.82rem;
}
.cls-inline-pay__basket-row--anchor {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 8%, #fff);
    border-color: color-mix(in srgb, var(--admin-club-color, #667eea) 35%, #fff);
}
.cls-inline-pay__basket-row i {
    color: #6b7280;
    width: 1rem;
    text-align: center;
}
.cls-inline-pay__basket-row--anchor i {
    color: var(--admin-club-color, #667eea);
}
.cls-inline-pay__basket-name {
    font-weight: 600;
    color: #111827;
}
.cls-inline-pay__basket-when {
    margin-left: auto;
    color: #6b7280;
    font-size: 0.78rem;
}
.cls-inline-pay__basket-remove {
    margin-left: 0.3rem;
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    line-height: 1;
}
.cls-inline-pay__basket-remove:hover {
    background: #fee2e2;
    color: #b91c1c;
}
.cls-inline-pay__add-more {
    align-self: stretch;
    background: #fff;
    border: 1.5px dashed #cbd5e1;
    color: #475569;
    border-radius: var(--radius-md);
    padding: 0.55rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.cls-inline-pay__add-more:hover {
    border-color: var(--admin-club-color, #667eea);
    color: var(--admin-club-color, #667eea);
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 4%, #fff);
}
.cls-inline-pay__add-more i {
    margin-right: 0.3rem;
}
.cls-inline-pay__upcoming {
    margin-top: 0.25rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.4rem;
    max-height: 180px;
    overflow-y: auto;
}
.cls-inline-pay__upcoming-loading,
.cls-inline-pay__upcoming-empty {
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    color: #6b7280;
    text-align: center;
}
.cls-inline-pay__upcoming-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.cls-inline-pay__upcoming-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.55rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}
.cls-inline-pay__upcoming-row:hover {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 8%, #fff);
    border-color: var(--admin-club-color, #667eea);
}
.cls-inline-pay__upcoming-when {
    font-weight: 600;
    color: #111827;
    min-width: 130px;
}
.cls-inline-pay__upcoming-name {
    color: #6b7280;
    flex: 1;
    min-width: 0;
}
.cls-inline-pay__upcoming-add {
    color: #9ca3af;
}
.cls-inline-pay__upcoming-row:hover .cls-inline-pay__upcoming-add {
    color: var(--admin-club-color, #667eea);
}

/* ── Add-as-regular payment-plan picker ──
   Replaces the silent "AddFutureAttendee → defer payment" flow with an explicit
   choice of how the member will pay each week, so we don't quietly stack up
   weekly unpaid bookings. Plan rows look like clickable cards with an obvious
   "recommended" treatment for the auto-detected best path. */
.cls-regular-pay {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cls-regular-pay__intro {
    margin: 0.25rem 0 0.4rem;
}
.cls-regular-pay__intro-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
}
.cls-regular-pay__intro-detail {
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.4;
}
.cls-regular-pay__plan {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    width: 100%;
}
.cls-regular-pay__plan:hover {
    border-color: var(--admin-club-color, #667eea);
    background: #f9fafb;
}
.cls-regular-pay__plan.is-recommended {
    border-color: var(--admin-club-color, #667eea);
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 6%, #fff);
}
.cls-regular-pay__plan-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    flex-shrink: 0;
}
.cls-regular-pay__plan.is-recommended .cls-regular-pay__plan-icon {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 15%, #fff);
    color: var(--admin-club-color, #667eea);
}
.cls-regular-pay__plan-body {
    flex: 1;
    min-width: 0;
}
.cls-regular-pay__plan-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.cls-regular-pay__plan-detail {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.4;
    margin-top: 0.1rem;
}
.cls-regular-pay__plan-badge {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--admin-club-color, #667eea);
    color: #fff;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
}
.cls-regular-pay__plan-chev {
    color: #9ca3af;
    flex-shrink: 0;
}
.cls-regular-pay__plan--expandable {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    cursor: default;
}
.cls-regular-pay__plan--expandable.is-open {
    border-color: var(--admin-club-color, #667eea);
}
.cls-regular-pay__plan--expandable .cls-regular-pay__plan-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.15s;
}
.cls-regular-pay__plan--expandable .cls-regular-pay__plan-head:hover {
    background: #f9fafb;
}
.cls-regular-pay__plan--expandable.is-open .cls-regular-pay__plan-chev {
    transform: rotate(180deg);
    transition: transform 0.15s;
}
.cls-regular-pay__expand {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.5rem 0.85rem 0.85rem;
    border-top: 1px solid #f3f4f6;
}
.cls-regular-pay__simple-error {
    padding: 0.55rem 0.7rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    color: #991b1b;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* ── Action bar (message buttons row) ── */
.cls-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.cls-action-bar .btn {
    font-size: 0.78rem;
    padding: 0.3rem 0.65rem;
}

/* ── Divider ── */
.cls-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 0;
}

/* ── Edit card (compact form in collapse) ── */
.cls-edit-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-top: 0.5rem;
}
.cls-edit-card__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.cls-edit-card__row label {
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 500;
    margin: 0;
    min-width: 80px;
}
.cls-edit-card__row .form-select,
.cls-edit-card__row .form-control {
    font-size: 0.82rem;
    max-width: 250px;
}
.cls-edit-card__row textarea.form-control {
    max-width: 100%;
}
.cls-edit-card__actions {
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.cls-edit-card__info {
    font-size: 0.75rem;
    color: #6b7280;
}
.cls-edit-card__info a { color: #6b7280; cursor: pointer; }
.cls-edit-card__info a:hover { color: #e8651a; }

/* ── Collapse toggle ── */
.cls-collapse-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #6b7280;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.25rem 0;
    transition: color 0.15s;
}
.cls-collapse-toggle:hover { color: var(--admin-club-color, #667eea); }
.cls-collapse-toggle i.fa-chevron-right,
.cls-collapse-toggle i.fa-chevron-down {
    font-size: 0.75rem;
}

/* ── Zoom link in hero strip ── */
.cls-hero__zoom-link {
    color: #3b82f6;
    font-size: 0.78rem;
    text-decoration: none;
}
.cls-hero__zoom-link:hover { color: #2563eb; text-decoration: underline; }

/* ── Modal overrides for cls-hero inside modal ── */
.modal .cls-hero {
    border-radius: 0;
    margin: -1rem -1rem 1rem;
    padding: 1.1rem 1.25rem 0.9rem;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: none;
}

/* ── Notes in hero ── */
.cls-hero__notes {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.35rem;
    font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .cls-hero__strip {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }
    .cls-hero__actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
    .cls-attendee {
        flex-wrap: wrap;
    }
    .cls-attendee__actions {
        width: 100%;
        justify-content: flex-end;
        padding-top: 0.25rem;
    }
    .cls-edit-card__row {
        flex-direction: column;
        align-items: flex-start;
    }
    .cls-edit-card__row .form-select,
    .cls-edit-card__row .form-control {
        max-width: 100%;
        width: 100%;
    }
    .cls-action-bar {
        flex-direction: column;
    }
    .cls-action-bar .btn {
        width: 100%;
    }
}

/* ── Class View Page — Compact header + two-column layout ── */
.cls-page-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.cls-page-header--expanded {
    flex-direction: column;
    align-items: stretch;
    padding: 0.75rem 1rem 0.65rem;
}
.cls-page-header__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.cls-page-header__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.05);
    color: #64748b;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.15s;
    flex-shrink: 0;
}
.cls-page-header__back:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #1e293b;
}
.cls-page-header__image {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
}
.cls-page-header__info {
    flex: 1;
    min-width: 0;
}
.cls-page-header__details {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.2rem;
}
.cls-page-header__detail {
    font-size: 0.8rem;
    color: #475569;
    font-weight: 500;
}
.cls-page-header__detail i {
    color: #94a3b8;
    margin-right: 0.25rem;
    font-size: 0.75rem;
}
.cls-page-header__title {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cls-page-header__meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.3;
}
.cls-page-header__meta .cls-hero__dot {
    width: 7px;
    height: 7px;
}
.cls-page-header__save {
    flex-shrink: 0;
}
.cls-page-header__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.cls-page-header__action-btn {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.78rem;
}
.cls-page-header__action-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #1e293b;
    border-color: #cbd5e1;
}
.cls-page-header__notes {
    color: #64748b;
    font-size: 0.8rem;
    margin-top: 0.35rem;
    padding: 0.3rem 0.5rem;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 5px;
}
.cls-page-header__notes i {
    color: #f59e0b;
    margin-right: 0.3rem;
}
.cls-page-header__strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1.25rem;
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid #e2e8f0;
}
.cls-page-header__strip-item {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.78rem;
}
.cls-page-header__strip-label {
    color: #64748b;
    font-weight: 500;
}
.cls-page-header__strip-value {
    color: #1e293b;
    font-weight: 600;
}
.cls-page-header__link {
    color: #3b82f6;
    text-decoration: none;
    cursor: pointer;
}
.cls-page-header__link:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* ── Inline-editable fields ── */
.cls-field {
    padding: 0.3rem 0;
}
.cls-field__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    margin-bottom: 0.15rem;
}
.cls-field__display {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 26px;
}
.cls-field__value {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cls-field__value--empty {
    color: #94a3b8;
    font-weight: 400;
    font-style: italic;
}
.cls-field__edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.cls-field__edit-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #475569;
}
.cls-field__editor {
    display: none;
}
.cls-field--editing .cls-field__display {
    display: none;
}
.cls-field--editing .cls-field__editor {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.cls-field__editor .form-select,
.cls-field__editor .form-control {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    height: auto;
    min-height: 30px;
    flex: 1;
    min-width: 0;
}
.cls-field__editor textarea.form-control {
    min-height: 52px;
    resize: vertical;
}
.cls-field__save-btn,
.cls-field__cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: 1px solid transparent;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.12s;
    flex-shrink: 0;
    padding: 0;
}
.cls-field__save-btn {
    background: #22c55e;
    color: #fff;
    border-color: #16a34a;
}
.cls-field__save-btn:hover {
    background: #16a34a;
}
.cls-field__cancel-btn {
    background: #f1f5f9;
    color: #64748b;
    border-color: #e2e8f0;
}
.cls-field__cancel-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}
.cls-field--notes {
    flex: 1 1 0;
    min-width: 150px;
}
.cls-field--notes .cls-field__display {
    min-height: auto;
}
.cls-field--notes .cls-field__value {
    white-space: normal;
    word-break: break-word;
    font-weight: 400;
    font-size: 0.8rem;
    color: #475569;
}
.cls-field--notes .cls-field__label i {
    color: #f59e0b;
    margin-right: 0.2rem;
}
.cls-field--notes .cls-field__editor {
    align-items: flex-start;
    flex: 1;
}
.cls-field--notes .cls-field__editor textarea {
    width: 100%;
    min-height: 60px;
}
.cls-field--readonly .cls-field__value {
    color: #475569;
}

/* Column layout */
.cls-view-layout {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-top: 1rem;
}
.cls-view-layout--3col .cls-view-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* #41346 — Schedule view responsive rows. Replaces inline flex:0 0 320px which
   overrides media-query rules and causes box overlap on mobile viewports. */
.cls-schedule-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.cls-schedule-sidebar-card {
    flex: 0 0 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.cls-schedule-sidebar-col {
    flex: 0 0 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (max-width: 991px) {
    .cls-schedule-sidebar-card,
    .cls-schedule-sidebar-col {
        flex: 1 1 100%;
    }
}

/* Appointment two-column layout */
.cls-view-layout--appt {
    margin-top: 1rem;
}
.cls-view-layout--appt .cls-view-col--details {
    flex: 45 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.cls-view-layout--appt .cls-view-col--member {
    flex: 55 1 0%;
    min-width: 0;
}

/* Appointment details card — vertical field layout */
.cls-appt-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.85rem 1rem !important;
}
.cls-appt-details__image {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    object-fit: cover;
    margin-bottom: 0.5rem;
}
.cls-field--vertical {
    display: flex;
    flex-direction: column;
    padding: 0.45rem 0;
    border-bottom: 1px solid #f3f4f6;
}
.cls-field--vertical:last-child {
    border-bottom: none;
}
.cls-field--vertical .cls-field__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9ca3af;
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.cls-field--vertical .cls-field__display {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.cls-field--vertical .cls-field__value {
    font-size: 0.85rem;
    color: #1e293b;
}
.cls-field--vertical .cls-field__editor {
    display: none;
    margin-top: 0.3rem;
    gap: 0.35rem;
    align-items: center;
}
.cls-field--vertical.cls-field--editing .cls-field__display { display: none; }
.cls-field--vertical.cls-field--editing .cls-field__editor { display: flex; }

/* Rich appointment member card */
.cls-appt-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.5rem 0;
}
.cls-appt-member__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.cls-appt-member__photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f3f4f6;
}
.cls-appt-member__identity {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cls-appt-member__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    text-decoration: none;
}
.cls-appt-member__name:hover {
    color: #e8651a;
    text-decoration: none;
}
.cls-appt-member__memberno {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.1rem;
}
.cls-appt-member__contact {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    width: 100%;
}
.cls-appt-member__contact-row {
    font-size: 0.82rem;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.cls-appt-member__contact-row a {
    color: #64748b;
    text-decoration: none;
}
.cls-appt-member__contact-row a:hover {
    color: #e8651a;
}
.cls-appt-member__contact-row i {
    color: #9ca3af;
    font-size: 0.78rem;
}
.cls-appt-member__pay {
    margin-bottom: 0.75rem;
}
.cls-appt-member__pay .cls-attendee__pay-badge {
    font-size: 0.78rem;
    padding: 0.25rem 0.65rem;
}
.cls-appt-member__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.cls-appt-member__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.cls-appt-member__action-btn--checkin {
    background: #dcfce7;
    color: #15803d;
}
.cls-appt-member__action-btn--checkin:hover {
    background: #bbf7d0;
    color: #15803d;
    text-decoration: none;
}
.cls-appt-member__action-btn--attended {
    background: #f0fdf4;
    color: #16a34a;
    cursor: default;
}
.cls-appt-member__action-btn--pay {
    background: #fef3c7;
    color: #92400e;
}
.cls-appt-member__action-btn--pay:hover {
    background: #fde68a;
    color: #92400e;
    text-decoration: none;
}
.cls-appt-member__profile-link {
    font-size: 0.8rem;
    color: #64748b;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.cls-appt-member__profile-link:hover {
    color: #e8651a;
}

/* Details row — horizontal strip above columns */
.cls-details-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    /* #42445 — was overflow:hidden, which clipped the hover tooltips in this row (the room-limit
       chip, "(moved)", "(one-off)") at the card edge. Inner content is padded and wraps, so the
       rounded corners stay clean with overflow visible; only absolute hover tooltips escape now. */
    overflow: visible;
}
.cls-details-row__image {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
}
.cls-details-row__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1.5rem;
    flex: 1 1 0;
    min-width: 200px;
}
.cls-details-row__fields--spread {
    gap: 0.15rem 2.25rem;
}
.cls-details-row__fields .cls-field {
    margin-bottom: 0;
}


.cls-details-row__fields .cls-details-row__capacity {
    flex-basis: 100%;
    margin-top: 0.25rem;
    padding-top: 0.35rem;
    border-top: 1px solid #f1f5f9;
}
.cls-details-row__links {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    font-size: 0.8rem;
}
.cls-details-row__capacity {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    padding: 0.3rem 0;
}
.cls-details-row__capacity:empty {
    display: none;
}
#attendeesCapacity > i {
    display: none !important;
}
.cls-details-row__capacity .cls-section-label__count {
    font-weight: 600;
    color: #64748b;
}
.cls-details-row__capacity .cls-capacity {
    flex: 1;
    margin-bottom: 0;
    min-width: 60px;
}

/* Attendees dot in details row field */
#attendeesCapacity .cls-hero__dot {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.3rem;
}

/* Standalone actions toolbar below details row */
.cls-actions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem 0.25rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    padding: 0.4rem 0.75rem;
    margin-top: 1rem;
}
.cls-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.cls-action-link:hover {
    background: #f3f4f6;
    color: #111827;
    text-decoration: none;
}
.cls-action-link i {
    font-size: 0.75rem;
    color: #9ca3af;
}
.cls-action-link:hover i {
    color: #6b7280;
}
.cls-action-link--disabled {
    opacity: 0.4;
    pointer-events: none;
}

.cls-action-link--disabled.has-tooltip {
    pointer-events: auto;
    cursor: help;
    opacity: 1;
    color: rgba(100, 116, 139, 0.4);
}
.cls-action-link--danger {
    color: #dc2626;
}
.cls-action-link--danger i {
    color: #dc2626;
}
.cls-action-link--danger:hover {
    background: #fef2f2;
    color: #b91c1c;
}

/* F18 — destructive variant: filled red on hover, bordered at rest, set apart
   from neighbouring safe utilities like "View Audit Log" by a separator and its
   red styling. #41272 — previously used margin-left:auto to push it to the far
   right, but in a wrapping flex toolbar that forced Delete onto its own row; it
   now flows inline with the other actions. Visual weight still makes the
   consequence unambiguous. */
.cls-action-link--destructive {
    color: #b91c1c;
    border: 1px solid #fecaca;
    background: #fef2f2;
}
.cls-action-link--destructive i {
    color: #b91c1c;
}
.cls-action-link--destructive:hover {
    background: #dc2626;
    color: #fff;
    border-color: #b91c1c;
}
.cls-action-link--destructive:hover i {
    color: #fff;
}

/* Vertical separator between action groups */
.cls-action-sep {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: #e5e7eb;
    margin: 0 0.2rem;
    flex-shrink: 0;
}
/* F18 — strong separator before the destructive Delete action: thicker,
   higher contrast, and adds breathing room so the divider reads as a real
   boundary not a flourish. */
.cls-action-sep--strong {
    width: 2px;
    height: 22px;
    background: #d1d5db;
    margin: 0 0.55rem 0 0.4rem;
}

/* Capacity bar inside actions bar */
.cls-actions-capacity {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}
.cls-actions-capacity:empty {
    display: none;
}
.cls-actions-capacity > i {
    display: none !important;
}
.cls-actions-capacity .cls-section-label__count {
    font-weight: 600;
    color: #64748b;
}
.cls-actions-capacity .cls-capacity {
    min-width: 60px;
    max-width: 120px;
    flex: 1;
    margin-bottom: 0;
}

.cls-view-card__badge {
    font-weight: 600;
    font-size: 0.75rem;
    color: #9ca3af;
}

.cls-view-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#waitingListCol {
    flex: 0 0 280px;
    max-width: 280px;
}
.cls-future-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.8rem;
}
.cls-future-item:last-of-type {
    border-bottom: none;
}
.cls-future-scroll {
    max-height: 220px;
    overflow-y: auto;
}
.cls-future-spinner {
    text-align: center;
    padding: 0.5rem;
    color: #94a3b8;
    font-size: 0.85rem;
}
.cls-future-item__info {
    flex: 1;
    min-width: 0;
}
.cls-future-item__open {
    color: #94a3b8;
    font-size: 0.75rem;
    padding: 0.2rem;
    margin-left: 0.25rem;
    transition: color 0.15s;
}
.cls-future-item__open:hover {
    color: #1e293b;
}
.cls-future-item__date {
    line-height: 1.4;
}
.cls-future-item__day {
    font-weight: 600;
    color: #1e293b;
}
.cls-future-item__time {
    margin-left: 0.3rem;
    color: #64748b;
}
.cls-future-item__capacity {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #64748b;
    white-space: nowrap;
}
.cls-view-sidebar {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

/* Sidebar cards */
.cls-view-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}
.cls-view-card__header {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.55rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}
.cls-view-card__header i {
    color: #e8651a;
    margin-right: 0.35rem;
    opacity: 0.9;
}
.cls-view-card__body {
    padding: 0.75rem 0.85rem;
}
.cls-view-card__body--actions {
    padding: 0.4rem 0;
}
.cls-view-card__body--collapse {
    padding: 0.55rem 0.85rem;
}

/* Attendees / Waiting list columns — restyle partial section labels as card headers */
.cls-view-col .cls-view-card__body {
    padding: 0;
}
.cls-view-col .cls-section {
    padding: 0;
}
.cls-view-col .cls-section-label {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.55rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 0;
}
.cls-view-col .cls-section-label i {
    margin-right: 0.1rem;
}
.cls-view-col .cls-attendee {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}
.cls-view-col .cls-attendee:last-child {
    border-bottom: none;
}
.cls-view-col .cls-empty-state {
    padding: 2rem 1rem;
}
.cls-view-col .cls-search-input {
    padding: 0.75rem 0.85rem;
    border-top: 1px solid #f3f4f6;
}

/* Detail list (key-value pairs) */
.cls-detail-list__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.3rem 0;
    font-size: 0.82rem;
}
.cls-detail-list__item + .cls-detail-list__item {
    border-top: 1px solid #f3f4f6;
}
.cls-detail-list__label {
    color: #6b7280;
    font-weight: 500;
}
.cls-detail-list__value {
    color: #111827;
    font-weight: 600;
    text-align: right;
}

/* Sidebar action links */
.cls-sidebar-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    color: #374151;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s;
}
.cls-sidebar-action:hover {
    background: #f9fafb;
    color: #e8651a;
}
.cls-sidebar-action i {
    color: #9ca3af;
    width: 16px;
    text-align: center;
    font-size: 0.78rem;
}
.cls-sidebar-action:hover i {
    color: #e8651a;
}
/* Disabled variant for sidebar actions */
.cls-sidebar-action--disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* Divider variant for sidebar actions */
.cls-sidebar-action--divider {
    border-top: 1px solid #f3f4f6;
    margin-top: 0.15rem;
    padding-top: 0.55rem;
}

/* Standalone divider line between sidebar action groups */
.cls-sidebar-action--divider-line {
    border-top: 1px solid #f3f4f6;
    margin: 0.15rem 0;
}

/* Previous attendees section inside attendees card */
.cls-prev-attendees-section {
    border-top: 1px solid #f3f4f6;
    padding: 0.55rem 0.85rem;
}

.cls-sidebar-action--danger {
    color: #991b1b;
    border-top: 1px solid #f3f4f6;
    margin-top: 0.15rem;
    padding-top: 0.55rem;
}
.cls-sidebar-action--danger i {
    color: #dc2626;
}
.cls-sidebar-action--danger:hover {
    background: #fef2f2;
    color: #991b1b;
}
.cls-sidebar-action--danger:hover i {
    color: #dc2626;
}

/* Empty state for attendees / waiting list panels */
.cls-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
}
.cls-empty-state__icon {
    font-size: 1.8rem;
    color: #d1d5db;
    margin-bottom: 0.4rem;
}
.cls-empty-state__img {
    width: 48px;
    height: 48px;
    color: #d1d5db;
    margin-bottom: 0.5rem;
}
.cls-empty-state__text {
    font-size: 0.82rem;
    color: #9ca3af;
}

/* Responsive — tablet: stack to 2 columns then 1 */
@media (max-width: 1199px) {
    .cls-view-layout--3col {
        flex-wrap: wrap;
    }
    .cls-view-layout--3col .cls-view-col {
        flex: 1 1 calc(50% - 0.625rem);
        min-width: 200px;
    }
    #waitingListCol {
        flex: 1 1 calc(50% - 0.625rem);
        max-width: none;
    }
    .cls-view-layout--3col .cls-view-sidebar {
        width: 100%;
        flex-basis: 100%;
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}
@media (max-width: 991px) {
    .cls-view-layout {
        flex-direction: column;
        align-items: stretch;
    }
    .cls-view-layout--3col .cls-view-col {
        flex-basis: 100%;
    }
    .cls-view-layout--appt .cls-view-col--details,
    .cls-view-layout--appt .cls-view-col--member {
        flex: 1 1 100%;
    }
    .cls-view-sidebar {
        width: 100%;
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}
/* Responsive — mobile: header stacks */
@media (max-width: 767px) {
    .cls-page-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .cls-page-header__info {
        flex: 1 1 0;
        min-width: calc(100% - 48px);
    }
    .cls-page-header__save {
        width: 100%;
    }
    .cls-page-header__top {
        flex-wrap: wrap;
    }
    .cls-page-header__actions {
        width: 100%;
        justify-content: flex-start;
    }
    .cls-page-header__strip {
        gap: 0.1rem 0.75rem;
    }
}

/* Sidebar inside diary panel — disable sticky since panel scrolls independently */
.diary-detail .cls-view-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
}
/* Page header inside diary panel — compact with breathing room from main header */
.diary-detail .cls-page-header {
    margin: 0.5rem 0 0.75rem;
}

/* ═══════════════════════════════════════════════════════════
   DIARY — Inline Detail Panel, Event Cards, Filter Pills, Mini Calendar
   ═══════════════════════════════════════════════════════════ */

/* ── Inline detail panel (replaces modal) ── */
.diary-detail {
    animation: diaryFadeIn 0.15s ease;
}
/* #41345 — On mobile the 3 columns stack vertically so the waiting list card
   sits at the very bottom of the detail panel. The diary sidebar brand (club
   logo) is position:fixed with its right edge at x=0; iOS WKWebView GPU
   compositing can cause it to bleed and overlap the last button. Extra bottom
   padding ensures the button clears any fixed element at the bottom of the
   viewport (native tab bar, home indicator, sidebar bleed). */
@media (max-width: 991px) {
    .diary-detail {
        padding-bottom: 60px;
    }
}
.diary-detail .btn-close {
    display: none;
}
@keyframes diaryFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.diary-detail .cls-hero {
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}
.diary-detail .modal-header {
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem 1.25rem;
}
.diary-detail .modal-body {
    padding: 1rem 1.25rem;
}
.diary-detail .modal-footer {
    border-top: 1px solid #e5e7eb;
    padding: 0.75rem 1.25rem;
}

/* Back button at top of inline panel */
.diary-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    margin-bottom: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}
.diary-detail__back:hover {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #cbd5e1;
}

/* ── Event card — stacked layout (Proton-style) ── */
.fc-timegrid-event .fc-event-main { overflow: hidden; }

.diary-event {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0;
    overflow: hidden;
    line-height: 1.3;
}
.diary-event__title {
    font-weight: 600;
    font-size: 0.82em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.diary-event__icon {
    font-size: 0.7em;
    margin-right: 3px;
    opacity: 0.7;
}
.diary-event__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: 0.72em;
    opacity: 0.8;
    white-space: nowrap;
}
.diary-event__time {
    font-size: 0.72em;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.diary-event__meta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72em;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fc-timegrid-event-short .diary-event__time {
    display: none;
}

/* Status dots */
.diary-event__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.diary-event__dot--green { background: #22c55e; }
.diary-event__dot--amber { background: #f59e0b; }
.diary-event__dot--red   { background: #ef4444; }

/* Micro capacity bar (inline in meta row) */
.diary-event__bar {
    display: inline-block;
    height: 3px;
    width: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}
.diary-event__bar-fill {
    display: block;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 2px;
}
.diary-event__bar-fill--amber { background: #f59e0b; }
.diary-event__bar-fill--red   { background: #ef4444; }

/* Compact mode (very short events, <= 30 min) */
.diary-event--compact {
    padding: 1px 0;
    gap: 0;
}
.diary-event--compact .diary-event__title {
    font-size: 0.75em;
}

/* Medium mode (31-50 min events) */
.diary-event--medium {
    padding: 1px 0;
    gap: 0;
}

/* Inline capacity for compact single-line mode */
.diary-event__inline-meta {
    margin-left: 4px;
    font-weight: 400;
    opacity: 0.85;
    font-size: 0.88em;
}
.diary-event__inline-meta .diary-event__dot {
    width: 5px;
    height: 5px;
    vertical-align: middle;
}

/* On mobile, always stack title + capacity in a column, regardless of event duration */
@media (max-width: 764px) {
    .diary-event__inline-meta {
        display: block;
        margin-left: 0;
        margin-top: 1px;
    }
}

/* ── Filter dropdown improvements ── */
.diary-filter-dropdown {
    min-width: 300px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #e5e7eb;
}

/* ── Mini calendar polish ── */
.miniCal {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.miniCal .flatpickr-calendar {
    border: none !important;
    box-shadow: none !important;
    border-radius: var(--radius-md);
}
.miniCal .flatpickr-day:hover {
    background: #f1f5f9;
}
/* Range highlight band — full club colour, view-aware (month/week/day) */
.miniCal .flatpickr-day.week-highlight {
    background: var(--admin-club-color, #667eea);
    color: var(--admin-club-color-contrast, #fff);
    border-color: var(--admin-club-color, #667eea);
    border-radius: 0;
    box-shadow: 0 0 0 1px var(--admin-club-color, #667eea);
}
.miniCal .flatpickr-day.week-highlight:hover {
    background: var(--admin-club-color, #667eea);
    color: var(--admin-club-color-contrast, #fff);
    border-color: var(--admin-club-color, #667eea);
}
.miniCal .flatpickr-day.week-highlight.range-tl {
    border-top-left-radius: 12px;
}
.miniCal .flatpickr-day.week-highlight.range-tr {
    border-top-right-radius: 12px;
}
.miniCal .flatpickr-day.week-highlight.range-bl {
    border-bottom-left-radius: 12px;
}
.miniCal .flatpickr-day.week-highlight.range-br {
    border-bottom-right-radius: 12px;
}
/* Suppress flatpickr default selected/today styling — range highlight is the only indicator */
.miniCal .flatpickr-day.selected,
.miniCal .flatpickr-day.selected:hover,
.miniCal .flatpickr-day.selected:focus {
    background: transparent;
    border-color: transparent;
    color: inherit;
    font-weight: inherit;
    box-shadow: none;
}
.miniCal .flatpickr-day.week-highlight.selected,
.miniCal .flatpickr-day.week-highlight.selected:hover {
    background: var(--admin-club-color, #667eea);
    color: var(--admin-club-color-contrast, #fff);
    border-color: var(--admin-club-color, #667eea);
    border-radius: 0;
    box-shadow: 0 0 0 1px var(--admin-club-color, #667eea);
}
.miniCal .flatpickr-day.week-highlight.selected.range-tl,
.miniCal .flatpickr-day.week-highlight.selected.range-tl:hover {
    border-top-left-radius: 12px;
}
.miniCal .flatpickr-day.week-highlight.selected.range-tr,
.miniCal .flatpickr-day.week-highlight.selected.range-tr:hover {
    border-top-right-radius: 12px;
}
.miniCal .flatpickr-day.week-highlight.selected.range-bl,
.miniCal .flatpickr-day.week-highlight.selected.range-bl:hover {
    border-bottom-left-radius: 12px;
}
.miniCal .flatpickr-day.week-highlight.selected.range-br,
.miniCal .flatpickr-day.week-highlight.selected.range-br:hover {
    border-bottom-right-radius: 12px;
}
.miniCal .flatpickr-day.today {
    border-color: transparent;
}
/* Flatpickr header: arrows inline with month/year */
.diary-sidebar .flatpickr-months {
    display: flex;
    align-items: center;
    position: relative;
    height: 32px;
}
.diary-sidebar .flatpickr-months .flatpickr-month {
    height: 32px;
    flex: 0 1 auto;
    overflow: visible;
    order: -1;
}
.diary-sidebar .flatpickr-months .flatpickr-prev-month,
.diary-sidebar .flatpickr-months .flatpickr-next-month {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
}
.diary-sidebar .flatpickr-months .flatpickr-prev-month {
    margin-left: auto;
}
.diary-sidebar .flatpickr-months .flatpickr-prev-month:hover,
.diary-sidebar .flatpickr-months .flatpickr-next-month:hover {
    background: #e5e7eb;
    color: inherit;
}
.diary-sidebar .flatpickr-months .flatpickr-prev-month:hover svg,
.diary-sidebar .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--admin-club-color, #667eea);
}
.diary-sidebar .flatpickr-current-month {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 0;
    width: auto;
    left: auto;
    font-size: 0.85rem;
}
/* Hide month dropdown, year input, and year arrows — replaced by plain text label */
.diary-sidebar .flatpickr-current-month .flatpickr-monthDropdown-months,
.diary-sidebar .flatpickr-current-month .numInputWrapper {
    display: none;
}
/* Plain text month/year label */
.diary-sidebar .flatpickr-current-month .minical-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    margin-left: 6px;
}

/* ══════════════════════════════════════════════════════════════════
   End cls-* diary components
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   Diary Sidebar Layout (Proton Calendar style)
   ══════════════════════════════════════════════════════════════════ */

/* ── Fixed sidebar (mirrors main nav pattern) ── */
.diary-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 290px;
    z-index: 1025;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    padding: 16px 14px;
    overflow-y: auto;
    box-shadow: 1px 0 8px rgba(0, 0, 0, 0.06);
}
/* Brand row — logo + club name + hamburger */
.diary-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}
.diary-sidebar__brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    min-width: 0;
    flex: 1;
}
.diary-sidebar__brand-img {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid color-mix(in srgb, var(--admin-club-color, #667eea) 20%, transparent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.diary-sidebar__brand-name {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.diary-sidebar__menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: #6b7280;
    font-size: 1rem;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}
.diary-sidebar__menu-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

/* Diary wrapper offset now handled by media queries in the sidebar section above */
.diary-sidebar__section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    padding: 14px 4px 0;
    margin: 8px 0 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.miniCal + .diary-sidebar__section-label {
    border-top: none;
    margin-top: 0;
}
.diary-sidebar__clear-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0;
}
.diary-sidebar__clear-btn:hover {
    color: #ef4444;
}

/* View items (vertical list) */
.diary-sidebar__view-item {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    margin-bottom: 2px;
}
.diary-sidebar__view-item:hover {
    background: #f3f4f6;
}
.diary-sidebar__view-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.diary-sidebar__view-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    color: #6b7280;
    width: 100%;
}
.diary-sidebar__view-label i {
    width: 18px;
    text-align: center;
    font-size: 0.85rem;
    color: #9ca3af;
}
.diary-sidebar__view-item:has(:checked) {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 8%, transparent);
}
.diary-sidebar__view-item:has(:checked) .diary-sidebar__view-label {
    color: var(--admin-club-color, #667eea);
}
.diary-sidebar__view-item:has(:checked) .diary-sidebar__view-label i {
    color: var(--admin-club-color, #667eea);
}
.diary-sidebar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: var(--admin-club-color, #667eea);
    border-radius: 9px;
    margin-left: auto;
}
.diary-sidebar__badge--muted {
    background: #9ca3af;
}
.diary-sidebar__view-item:has(:checked) .diary-sidebar__badge,
.diary-sidebar__view-item:has(:checked) .diary-sidebar__badge--muted {
    background: var(--admin-club-color, #667eea);
}

/* Filters in sidebar */
.diary-sidebar__filter-group {
    margin-bottom: 10px;
    padding: 0 4px;
}
.diary-sidebar__filter-group .form-label {
    font-weight: 500;
}

/* Diary Insight Toolbar — horizontal date filter above report content */
.diary-insight-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    gap: 12px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.diary-insight-toolbar__dates {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.diary-insight-toolbar__period {
    width: auto;
    min-width: 140px;
    font-size: 0.85rem;
}
.diary-insight-toolbar__range {
    display: flex;
    align-items: center;
    gap: 4px;
}
.diary-insight-toolbar__label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
}
.diary-insight-toolbar__input {
    width: auto;
    min-width: 130px;
    font-size: 0.85rem;
}
@media (max-width: 576px) {
    .diary-insight-toolbar__dates {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .diary-insight-toolbar__period,
    .diary-insight-toolbar__input {
        width: 100%;
    }
}

/* Diary Report KPI cards — icon + value + label format */
.diary-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 991.98px) {
    .diary-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .diary-kpi-row { grid-template-columns: 1fr; }
}
.diary-kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
}
.diary-kpi__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.diary-kpi__icon--blue   { background: rgba(59, 130, 246, 0.1);  color: #3b82f6; }
.diary-kpi__icon--green  { background: rgba(22, 163, 74, 0.1);   color: #16a34a; }
.diary-kpi__icon--purple { background: rgba(139, 92, 246, 0.1);  color: #8b5cf6; }
.diary-kpi__icon--amber  { background: rgba(245, 158, 11, 0.1);  color: #f59e0b; }
.diary-kpi__icon--red    { background: rgba(220, 38, 38, 0.1);   color: #dc2626; }
.diary-kpi__value {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}
.diary-kpi__pct {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}
.diary-kpi__label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

/* Utility links at bottom */
.diary-sidebar__utils {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.diary-sidebar__utils a {
    font-size: 0.78rem;
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px;
    border-radius: var(--radius-sm);
    transition: color 0.12s, background 0.12s;
}
.diary-sidebar__utils a:hover {
    color: #374151;
    background: #f3f4f6;
}
.diary-sidebar__utils a i {
    width: 16px;
    text-align: center;
    font-size: 0.8rem;
}

.diary-sidebar__horizon-note {
    font-size: 0.75rem;
    color: #9ca3af;
    padding: 8px 6px;
    line-height: 1.4;
}
.diary-sidebar__horizon-note i {
    margin-right: 4px;
}
/* Navigation items in sidebar */
.diary-sidebar__nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    margin-bottom: 2px;
    font-size: 0.84rem;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
}
.diary-sidebar__nav-item:hover {
    background: #f3f4f6;
    color: #374151;
    text-decoration: none;
}
.diary-sidebar__nav-item i {
    width: 18px;
    text-align: center;
    font-size: 0.85rem;
    color: #9ca3af;
}
.diary-sidebar__nav-item:hover i {
    color: #6b7280;
}
.diary-sidebar__nav-item--active {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 8%, transparent);
    color: var(--admin-club-color, #667eea);
}
.diary-sidebar__nav-item--active i {
    color: var(--admin-club-color, #667eea);
}

/* Override old miniCal absolute positioning inside sidebar */
.diary-sidebar .miniCal {
    position: static;
    float: none;
    left: auto;
    top: auto;
    font-size: inherit;
    margin-top: 10px;
    cursor: default;
}

/* Flatpickr inline in sidebar — fit all 7 days */
.diary-sidebar .flatpickr-calendar {
    position: static !important;
    display: block !important;
    width: 100%;
    max-width: 100%;
}
.diary-sidebar .flatpickr-calendar .flatpickr-days,
.diary-sidebar .flatpickr-calendar .dayContainer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}
.miniCal .flatpickr-innerContainer,
.miniCal .flatpickr-rContainer {
    overflow: visible;
}
.diary-sidebar .flatpickr-calendar .flatpickr-day {
    max-width: 34px;
    height: 34px;
    line-height: 34px;
}
.diary-sidebar .miniCal .flatpickr-calendar {
    font-size: 0.82rem;
}

/* ── Main area ── */
/* Prevent page-level scrollbar — calendar height is calculated to fit */
body.diary-page-active .body.flex-grow-1 {
    overflow: hidden;
}
/* Tighter horizontal padding for calendar content — diary has its own sidebar so maximise calendar space */
@media (min-width: 768px) {
    body.diary-page-active .diary-main {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
}
/* Compact spacing between diary header and calendar controls */
body.diary-page-active .page-header {
    margin-bottom: 0;
}
.diary-main .fc .fc-toolbar.fc-header-toolbar {
    padding-top: 10px;
    margin-bottom: 10px;
}

/* ── FullCalendar toolbar buttons — match toolbar__filter-btn style ── */
.diary-main .fc .fc-button {
    background: #fff;
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.35rem 0.7rem;
    text-transform: none;
    box-shadow: none;
    transition: all 0.15s ease;
}
.diary-main .fc .fc-button:hover {
    background: #e9ecef;
    border-color: #ced4da;
    color: #495057;
}
.diary-main .fc .fc-button:focus {
    box-shadow: none;
}
.diary-main .fc .fc-button:disabled {
    opacity: 0.5;
}
/* Active view button */
.diary-main .fc .fc-button-active,
.diary-main .fc .fc-button-active:hover {
    background: #212529;
    color: #fff;
    border-color: #212529;
}
/* Today button */
.diary-main .fc .fc-today-button {
    border-radius: var(--radius-md);
}
/* Prev/next button group — joined pill shape */
.diary-main .fc .fc-button-group {
    gap: 0;
}
.diary-main .fc .fc-button-group > .fc-button {
    border-radius: 0;
}
.diary-main .fc .fc-button-group > .fc-button:first-child {
    border-radius: var(--radius-md) 0 0 8px;
}
.diary-main .fc .fc-button-group > .fc-button:last-child {
    border-radius: 0 8px 8px 0;
}
.diary-main .fc .fc-button-group > .fc-button + .fc-button {
    margin-left: -1px;
}
/* Prev/next arrow buttons — match Today button height */
.diary-main .fc .fc-prev-button,
.diary-main .fc .fc-next-button {
    padding: 0.35rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Rota view: space-aware staff-name headers (#42104) ──
   Each resource column carries full name / first name / initials (see
   resourceLabelContent in Diary/Index.cshtml); a container query on the column
   width shows the largest that fits, so labels adapt to real space rather than a
   fixed staff-count threshold. The container is the sync-inner div (its width
   equals one column) — container-type on the <th> itself is unreliable. Full
   name on hover comes from the resourceLabelDidMount tooltip. */
.diary-main .fc .fc-col-header-cell.fc-resource .fc-scrollgrid-sync-inner {
    container-type: inline-size;
    container-name: rota-staff;
}
.diary-main .fc .fc-col-header-cell.fc-resource .fc-col-header-cell-cushion {
    display: block;
    max-width: 100%;
    padding: 4px 2px;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;      /* safety net: an over-long full name ellipsizes, never overlaps */
}
/* default (narrowest column): initials only */
.diary-main .fc .fc-col-header-cell.fc-resource .rota-staff-name__full,
.diary-main .fc .fc-col-header-cell.fc-resource .rota-staff-name__first {
    display: none;
}
.diary-main .fc .fc-col-header-cell.fc-resource .rota-staff-name__initials {
    display: inline;
}
/* medium column: first name */
@container rota-staff (min-width: 72px) {
    .diary-main .fc .fc-col-header-cell.fc-resource .rota-staff-name__initials {
        display: none;
    }
    .diary-main .fc .fc-col-header-cell.fc-resource .rota-staff-name__first {
        display: inline;
    }
}
/* wide column: full name */
@container rota-staff (min-width: 120px) {
    .diary-main .fc .fc-col-header-cell.fc-resource .rota-staff-name__first {
        display: none;
    }
    .diary-main .fc .fc-col-header-cell.fc-resource .rota-staff-name__full {
        display: inline;
    }
}


/* ══════════════════════════════════════════════════════════════════
   End Diary Sidebar Layout
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   Members Sidebar Layout
   ══════════════════════════════════════════════════════════════════ */

/* ── Fixed sidebar ── */
.members-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px;
    z-index: 1025;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    padding: 16px 14px;
    overflow-y: auto;
    box-shadow: 1px 0 8px rgba(0, 0, 0, 0.06);
}

/* Brand row */
.members-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}
.members-sidebar__brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    min-width: 0;
    flex: 1;
}
.members-sidebar__brand-img {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid color-mix(in srgb, var(--admin-club-color, #667eea) 20%, transparent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.members-sidebar__brand-name {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Section labels */
.members-sidebar__section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    padding: 14px 4px 0;
    margin: 8px 0 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.members-sidebar__brand + .members-sidebar__section-label {
    border-top: none;
    margin-top: 0;
    padding-top: 6px;
}
.members-sidebar__subgroup {
    margin-top: 2px;
}
.members-sidebar__subgroup-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #b0b5bd;
    padding: 6px 4px;
    margin: 0;
    cursor: pointer;
    border-radius: var(--radius-sm);
    user-select: none;
}
.members-sidebar__subgroup-label:hover {
    color: #9ca3af;
    background: rgba(0, 0, 0, 0.03);
}
.members-sidebar__subgroup-chevron {
    font-size: 0.75rem;
    margin-left: auto;
    transition: transform 0.2s ease;
    color: #d1d5db;
}
.members-sidebar__subgroup-label[aria-expanded="true"] .members-sidebar__subgroup-chevron {
    transform: rotate(180deg);
}
.members-sidebar__subgroup-body {
    overflow: hidden;
}
.members-sidebar__subgroup-body--collapsed {
    display: none;
}
.members-sidebar__subgroup-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: #ef4444;
    background: #fef2f2;
    border-radius: var(--radius-md);
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}
.members-sidebar__clear-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0;
    margin-left: auto;
}
.members-sidebar__clear-btn:hover {
    color: #ef4444;
}

/* Nav items (entity navigation) */
.members-sidebar__nav-item {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    margin-bottom: 2px;
    text-decoration: none;
    color: inherit;
}
.members-sidebar__nav-item:hover {
    background: #f3f4f6;
    text-decoration: none;
    color: inherit;
}
.members-sidebar__nav-item--active {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 8%, transparent);
}
.members-sidebar__nav-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    color: #6b7280;
    flex: 1;
}
.members-sidebar__nav-label i {
    width: 18px;
    text-align: center;
    font-size: 0.85rem;
    color: #9ca3af;
}
.members-sidebar__nav-item--active .members-sidebar__nav-label {
    color: var(--admin-club-color, #667eea);
}
.members-sidebar__nav-item--active .members-sidebar__nav-label i {
    color: var(--admin-club-color, #667eea);
}
.members-sidebar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: #9ca3af;
    border-radius: 9px;
    margin-left: auto;
}
.members-sidebar__nav-item--active .members-sidebar__badge {
    background: var(--admin-club-color, #667eea);
}

/* Contacts master/detail list (profile mode) */
.members-sidebar__contacts-search {
    position: relative;
    margin: 0 0 8px;
}
.members-sidebar__contacts-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: #9ca3af;
    pointer-events: none;
}
.members-sidebar__contacts-search-input {
    width: 100%;
    padding: 7px 10px 7px 30px;
    font-size: 0.82rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #111827;
}
.members-sidebar__contacts-search-input:focus {
    outline: none;
    border-color: var(--admin-club-color, #667eea);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--admin-club-color, #667eea) 15%, transparent);
}
.members-sidebar__contacts-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.members-sidebar__contact {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}
.members-sidebar__contact:hover {
    background: #f3f4f6;
    text-decoration: none;
    color: inherit;
}
.members-sidebar__contact--active {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 10%, transparent);
    box-shadow: inset 2px 0 0 var(--admin-club-color, #667eea);
}
.members-sidebar__contact-avatar {
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
}
.members-sidebar__contact-avatar-img,
.members-sidebar__contact-avatar-initials {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}
.members-sidebar__contact-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
}
.members-sidebar__contact-body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.members-sidebar__contact-name {
    font-size: 0.84rem;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.members-sidebar__contact--active .members-sidebar__contact-name {
    color: var(--admin-club-color, #667eea);
    font-weight: 600;
}
.members-sidebar__contact-status {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6b7280;
}
.members-sidebar__contact-status--active { color: #16a34a; }
.members-sidebar__contact-status--overdue { color: #dc2626; }
.members-sidebar__contact-status--frozen { color: #0ea5e9; }
.members-sidebar__contact-status--expired { color: #d97706; }
.members-sidebar__contact-status--cancelled { color: #9ca3af; }
.members-sidebar__contact-status--prospect,
.members-sidebar__contact-status--hotprospect { color: #8b5cf6; }
.members-sidebar__contact-status--role { color: #4338ca; }
.members-sidebar__contacts-loading,
.members-sidebar__contacts-empty {
    padding: 16px 8px;
    text-align: center;
    font-size: 0.8rem;
    color: #9ca3af;
}
.members-sidebar__contacts-viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    padding: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--admin-club-color, #667eea);
    text-decoration: none;
    border-top: 1px solid #f1f5f9;
}
.members-sidebar__contacts-viewall:hover {
    text-decoration: underline;
    color: var(--admin-club-color, #667eea);
}

/* Filter items (status filters) */
.members-sidebar__filter-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    margin-bottom: 2px;
}
.members-sidebar__filter-item:hover {
    background: #f3f4f6;
}
.members-sidebar__filter-item--active {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 8%, transparent);
}
.members-sidebar__filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    font-weight: 500;
    color: #6b7280;
    flex: 1;
    text-align: left;
}
.members-sidebar__filter-item--active .members-sidebar__filter-label {
    color: var(--admin-club-color, #667eea);
}
.members-sidebar__filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: #6b7280;
    background: #e5e7eb;
    border-radius: 9px;
    margin-left: auto;
}
.members-sidebar__filter-item--active .members-sidebar__filter-badge {
    color: #fff;
    background: var(--admin-club-color, #667eea);
}
.members-sidebar__filter-badge--green {
    color: #fff;
    background: #16a34a;
}
.members-sidebar__filter-badge--red {
    color: #fff;
    background: #dc2626;
}
.members-sidebar__filter-badge--amber {
    color: #fff;
    background: #f59e0b;
}
.members-sidebar__filter-badge--blue {
    color: #fff;
    background: #0ea5e9;
}

.members-sidebar__filter-item--highrisk .members-sidebar__filter-label i {
    color: #d97706;
}
.members-sidebar__filter-item--highrisk:hover {
    background: #fffbeb;
}
.members-sidebar__filter-item--highrisk-active,
.members-sidebar__filter-item--highrisk-active:hover {
    background: #d97706;
}
.members-sidebar__filter-item--highrisk-active .members-sidebar__filter-label,
.members-sidebar__filter-item--highrisk-active .members-sidebar__filter-label i {
    color: #fff;
}

/* ── Member Report ── */
/* Flat layout matching the rest of the Members section — no card wrapper */
.member-report-card {
    background: transparent;
}

/* Toolbar-style header matching .toolbar pattern */
.member-report-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: var(--radius-lg);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.member-report-card__info {
    min-width: 0;
}
.member-report-card__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.member-report-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
    line-height: 1.3;
}
.member-report-card__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 12%, #fff);
    color: var(--admin-club-color, #667eea);
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}
.member-report-card__subtitle {
    font-size: 0.78rem;
    color: #6b7280;
    margin: 2px 0 0;
    line-height: 1.4;
}

/* Filter controls in header */
.member-report-card__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Period pills — matches .member-analytics__period-pills */
.member-report-card__period-pills {
    display: flex;
    gap: 0.25rem;
    background: #f3f4f6;
    border-radius: var(--radius-md);
    padding: 3px;
}
.member-report-card__period-pill {
    border: none;
    background: transparent;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
}
.member-report-card__period-pill:hover {
    color: #111827;
    background: rgba(255, 255, 255, 0.5);
}
.member-report-card__period-pill--active {
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Custom date range inputs */
.member-report-card__custom-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.member-report-card__custom-range input[type="date"] {
    max-width: 150px;
    font-size: 0.78rem;
}
.member-report-card__range-sep {
    font-size: 0.78rem;
    color: #6b7280;
}

/* Plan filter */
.member-report-card__plan-filter {
    display: flex;
    align-items: center;
    gap: 6px;
}
.member-report-card__plan-filter label {
    font-size: 0.76rem;
    font-weight: 500;
    color: #6b7280;
    margin: 0;
    white-space: nowrap;
}
.member-report-card__plan-filter select {
    max-width: 200px;
}

/* Print action — restores the print button lost when reports (e.g. Label Print)
   moved out of the Reporting hub into the Members hub (#41958). Shown only for
   reports flagged canPrint in filterReportMap. */
.member-report-card__print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
}
.member-report-card__print-btn:hover {
    color: #111827;
    background: #f9fafb;
    border-color: #d1d5db;
}

/* #41958 — when printing a Members-hub report (e.g. Label Print), print only the
   report content. Two things fight us here:
     1. Paper width sits below the lg (992px) breakpoint, so Chrome lays out print
        at paper width and Bootstrap flips the hub to its MOBILE layout. We force
        the desktop label layout (which carries the .onlyprint grid) to print and
        hide the mobile one.
     2. The outer app sidebar force-shows via `#sidebar.admin-sidebar{display:flex
        !important}`, which outranks the generic `.noprint` rule — so it needs an
        equally specific override here.
   The label grid itself prints via the .onlyprint layout in _LabelPrint.cshtml. */
@media print {
    .members-desktop-view {
        display: block !important;
    }
    .members-mobile-view {
        display: none !important;
    }
    #sidebar.admin-sidebar.noprint,
    .members-sidebar,
    .members-sidebar-toggle,
    .members-main .page-header,
    .member-report-card__header {
        display: none !important;
    }
    .members-main {
        margin: 0 !important;
        padding: 0 !important;
    }
    .member-report-card {
        border: 0 !important;
        box-shadow: none !important;
    }
}

/* Report body (report content injected here) */
.member-report-card__body {
    min-height: 200px;
}

/* Hide the partial's own H2 heading (redundant with toolbar title) */
.member-report-card__body > h2,
.member-report-card__body > h2:first-of-type {
    display: none !important;
}
/* Hide the description <p> immediately after the H2 (moved to toolbar subtitle) */
.member-report-card__body > h2 + p {
    display: none !important;
}

/* Hide the inline email modal trigger from Amber/Red Alert partials */
.member-report-card__body > .float-end {
    display: none !important;
}

/* Remove Bootstrap table-striped */
.member-report-card__body .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent;
}
.member-report-card__body .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: transparent;
}

/* Table container — matches .member-table pattern */
.member-report-card__body .table-responsive {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 0 0 1rem;
}
.member-report-card__body .table-responsive:last-child {
    margin-bottom: 0;
}
.member-report-card__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    border: none;
}
.member-report-card__body table.table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
}
/* Table header — matches .member-table__head */
.member-report-card__body table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.6rem 1rem;
    border-bottom: 2px solid #e5e7eb;
    background: #f9fafb;
    text-align: left;
    white-space: nowrap;
}
/* Table rows — matches .member-table__row */
.member-report-card__body table tbody td {
    font-size: 0.84rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
    vertical-align: middle;
}
.member-report-card__body table tbody tr:hover td {
    background: #f9fafb;
}
.member-report-card__body table tbody tr:last-child td {
    border-bottom: none;
}

/* Links in report tables */
.member-report-card__body table a {
    color: var(--admin-club-color, #667eea);
    text-decoration: none;
    font-weight: 500;
}
.member-report-card__body table a:hover {
    text-decoration: underline;
}

/* Plan grouping headers (e.g. ExpiredMembers grouped by plan) */
.member-report-card__body h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
    padding: 1rem 0 0.5rem;
}
.member-report-card__body h4:first-child {
    padding-top: 0;
}

/* Action buttons (Open Till, Add to DD, collection options, etc.) */
.member-report-card__body .btn {
    font-size: 0.78rem;
    border-radius: var(--radius-sm);
    padding: 4px 10px;
}
.member-report-card__body .btn-success {
    background: var(--admin-club-color, #667eea);
    border-color: var(--admin-club-color, #667eea);
}
.member-report-card__body .btn-success:hover {
    filter: brightness(0.9);
}

/* Export links */
.member-report-card__body .text-end:last-child {
    padding: 0.75rem 0 0;
}
.member-report-card__body [onclick*="exportVisibleReportToCSV"],
.member-report-card__body .exportLink {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    padding: 5px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    transition: all 0.12s;
    cursor: pointer;
}
.member-report-card__body [onclick*="exportVisibleReportToCSV"]:hover,
.member-report-card__body .exportLink:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

/* Empty state (no data) */
.member-report-card__body .alert {
    margin: 16px 0;
    border-radius: 10px;
    font-size: 0.88rem;
}
.member-report-card__body .alert-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
    text-align: center;
}

/* Badge in headings (restyled) */
.member-report-card__body .badge {
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
}

/* Loader */
.member-report-card__body .loader-wrap {
    padding: 48px 16px;
}

/* Modals triggered from reports */
.member-report-card__body .modal {
    font-size: 0.88rem;
}

/* Small text in report partials */
.member-report-card__body small {
    font-size: 0.78rem;
    color: #6b7280;
}

/* ── Responsive: report on mobile ── */
@media (max-width: 768px) {
    .member-report-card__header {
        flex-direction: column;
        gap: 12px;
        padding: 0.6rem 0.75rem;
    }
    .member-report-card__actions {
        width: 100%;
    }
    .member-report-card__period-pills {
        flex-wrap: wrap;
    }
    .member-report-card__custom-range input[type="date"] {
        max-width: 130px;
    }
    .member-report-card__body table thead th,
    .member-report-card__body table tbody td {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* ── Awards report (#41955) — segmented Due/All filter + richer rows ──────────
   Rendered into .member-report-card__body via /Reporting/Awards. The segmented
   control defaults to the review-due subset so the "Awards to Review" KPI tile
   lands on exactly what it counts, rather than a flat list of every award. */
.awards-report__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.awards-report__segments {
    display: inline-flex;
    gap: 0.25rem;
    background: #f3f4f6;
    border-radius: var(--radius-md);
    padding: 3px;
}
.awards-report__seg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
}
.awards-report__seg:hover {
    color: #111827;
}
.awards-report__seg--active {
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.awards-report__seg-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 600;
}
.awards-report__seg--active .awards-report__seg-count {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 14%, #fff);
    color: var(--admin-club-color, #667eea);
}
/* The "due" backlog reads as an amber call to action. */
.awards-report__seg[data-award-scope="due"] .awards-report__seg-count {
    background: #fef3c7;
    color: #92400e;
}

/* Scope filtering — hide the rows that don't match the active segment. */
.awards-report__table[data-scope="due"] .awards-report__row[data-review-due="false"] {
    display: none;
}
.awards-report__table[data-scope="all"] .awards-report__empty-row {
    display: none;
}
/* Amber accent down the left edge of a due row draws the eye. */
.awards-report__row[data-review-due="true"] > td:first-of-type {
    box-shadow: inset 3px 0 0 #f59e0b;
}

/* Member identity cell */
.awards-report__member {
    display: flex;
    align-items: center;
    gap: 10px;
}
.awards-report__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.awards-report__identity {
    min-width: 0;
}
.awards-report__name {
    font-size: 0.86rem;
    font-weight: 600;
}
.awards-report__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin-top: 1px;
    font-size: 0.72rem;
    color: #9ca3af;
}

/* Award cell */
.awards-report__award-name {
    font-weight: 500;
    color: #374151;
}
.awards-report__award-icon {
    color: #f59e0b;
    margin-right: 6px;
}
.awards-report__award-date {
    margin-left: 8px;
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
}

/* Review cell */
.awards-report__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 12px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.73rem;
    font-weight: 600;
    white-space: nowrap;
}
.awards-report__review-reason {
    display: block;
    margin-top: 4px;
    font-size: 0.76rem;
    color: #6b7280;
}
.awards-report__review--none {
    font-size: 0.8rem;
    color: #9ca3af;
}

/* "All caught up" empty state (shown in the Due scope when nothing is due) */
.awards-report__empty-row > td {
    text-align: center;
    padding: 2.5rem 1rem !important;
    background: #f0fdf4;
    color: #166534;
    font-size: 0.9rem;
    font-weight: 500;
}
.awards-report__empty-row .fa {
    margin-right: 6px;
}

/* ── Mobile sidebar toggle ── */
.members-sidebar-toggle {
    display: none;
}
.members-sidebar-overlay {
    display: none;
}

@media (max-width: 767.98px) {
    .members-sidebar {
        display: none;
        width: 280px;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }
    .members-sidebar.show {
        display: flex;
        z-index: 1050; /* sit above the dim overlay (1049) so the drawer is tappable on mobile */
    }
    body.members-page-active .wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .members-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        /* #41300 — the Intercom launcher is pinned bottom-right (~80px tall incl.
           its margin, taller with an unread badge) and can't be moved, so sit this
           filter FAB well above it instead of on top of it. */
        bottom: 150px;
        right: 16px;
        z-index: 1040;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--admin-club-color, #667eea);
        color: #fff;
        border: none;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
        cursor: pointer;
    }
    .members-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1049;
    }
    .members-sidebar-overlay.show {
        display: block;
    }
}
@media (min-width: 768px) {
    .members-sidebar-toggle,
    .members-sidebar-overlay {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   End Members Sidebar Layout
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   Messaging Sidebar Layout
   ══════════════════════════════════════════════════════════════════ */

.messaging-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    z-index: 1025;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    padding: 16px 14px;
    overflow-y: auto;
    box-shadow: 1px 0 8px rgba(0, 0, 0, 0.06);
}

/* Brand row */
.messaging-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}
.messaging-sidebar__brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    min-width: 0;
    flex: 1;
}
.messaging-sidebar__brand-img {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid color-mix(in srgb, var(--admin-club-color, #667eea) 20%, transparent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.messaging-sidebar__brand-name {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Section labels */
.messaging-sidebar__section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    padding: 14px 4px 0;
    margin: 8px 0 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.messaging-sidebar__brand + .messaging-sidebar__section-label {
    border-top: none;
    margin-top: 0;
    padding-top: 6px;
}

/* Nav items */
.messaging-sidebar__nav-item {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    margin-bottom: 2px;
    text-decoration: none;
    color: inherit;
}
.messaging-sidebar__nav-item:hover {
    background: #f3f4f6;
    text-decoration: none;
    color: inherit;
}
.messaging-sidebar__nav-item--active {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 8%, transparent);
}
.messaging-sidebar__nav-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    color: #6b7280;
    flex: 1;
}
.messaging-sidebar__nav-label i {
    width: 18px;
    text-align: center;
    font-size: 0.85rem;
    color: #9ca3af;
}
.messaging-sidebar__nav-item--active .messaging-sidebar__nav-label {
    color: var(--admin-club-color, #667eea);
}
.messaging-sidebar__nav-item--active .messaging-sidebar__nav-label i {
    color: var(--admin-club-color, #667eea);
}
.messaging-sidebar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: #9ca3af;
    border-radius: 9px;
    margin-left: auto;
}
.messaging-sidebar__nav-item--active .messaging-sidebar__badge {
    background: var(--admin-club-color, #667eea);
}

/* Filter items */
.messaging-sidebar__filter-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    margin-bottom: 2px;
    overflow: hidden;
    min-width: 0;
}
.messaging-sidebar__filter-item:hover {
    background: #f3f4f6;
}
.messaging-sidebar__filter-item--active {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 8%, transparent);
}
.messaging-sidebar__filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    font-weight: 500;
    color: #6b7280;
    flex: 1;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
}
.messaging-sidebar__filter-label > i {
    flex-shrink: 0;
}
.messaging-sidebar__filter-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.messaging-sidebar__filter-item--active .messaging-sidebar__filter-label {
    color: var(--admin-club-color, #667eea);
}
.messaging-sidebar__filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: #6b7280;
    background: #e5e7eb;
    border-radius: 9px;
    margin-left: auto;
}
.messaging-sidebar__filter-item--active .messaging-sidebar__filter-badge {
    color: #fff;
    background: var(--admin-club-color, #667eea);
}

/* Star and waiting badges */
.inbox-list-item-star-btn {
    background: none;
    border: none;
    color: #d1d5db;
    cursor: pointer;
    transition: color 0.15s;
    padding: 2px 4px;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-right: 2px;
}
.inbox-list-item-star-btn:hover {
    color: #f59e0b;
}
.inbox-list-item-star-btn.starred {
    color: #f59e0b;
}
.inbox-waiting-icon {
    display: inline-flex;
    align-items: center;
    color: #92400e;
    font-size: 0.85rem;
    flex-shrink: 0;
    padding: 2px 2px 2px 6px;
    cursor: default;
}
.inbox-waiting-icon .inbox-clear-waiting-x {
    margin-left: 1px;
}

/* Mobile sidebar toggle */
.messaging-sidebar-toggle {
    display: none;
}
.messaging-sidebar-overlay {
    display: none;
}

@media (max-width: 767.98px) {
    .messaging-sidebar {
        display: none;
        width: 260px;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }
    .messaging-sidebar.show {
        display: flex;
        z-index: 1050; /* sit above the dim overlay (1049) so the drawer is tappable on mobile */
    }
    body.messaging-page-active .wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .messaging-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 80px;
        right: 16px;
        z-index: 1040;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--admin-club-color, #667eea);
        color: #fff;
        border: none;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
        cursor: pointer;
    }
    .messaging-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1049;
    }
    .messaging-sidebar-overlay.show {
        display: block;
    }
}
@media (min-width: 768px) {
    .messaging-sidebar-toggle,
    .messaging-sidebar-overlay {
        display: none !important;
    }
}

/* Clear waiting "x" button in conversation list */
.inbox-clear-waiting-x {
    background: none;
    border: none;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    padding: 0 0 0 4px;
    cursor: pointer;
    opacity: 0.6;
}
.inbox-clear-waiting-x:hover {
    opacity: 1;
}

/* Highlight animation for scrolled-to conversation */
.inbox-list-highlight {
    animation: inbox-highlight-pulse 2s ease;
}
@keyframes inbox-highlight-pulse {
    0%, 100% { background-color: transparent; }
    20%, 60% { background-color: rgba(59, 130, 246, 0.1); }
}

/* SweetAlert member search results list (shared by Diary booking + Communication new convo) */
.swal-member-results {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 0.75rem;
}
.swal-member-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s;
}
.swal-member-result:hover {
    background: #f3f4f6;
}
.swal-member-result__icon {
    width: 32px;
    height: 32px;
    background: #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.swal-member-result__icon .fa {
    color: #9ca3af;
    font-size: 14px;
}
.swal-member-result__name {
    font-weight: 500;
    font-size: 13px;
}

/* F13 — richer search rows: avatar + name/memberno + status chips. Used by the
   "Book a Member" / "Add to Waiting List" SweetAlert flows in the diary panel. */
.swal-member-result__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    color: #475569;
    letter-spacing: 0.02em;
}
.swal-member-result__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swal-member-result__avatar--initials {
    background: var(--admin-club-color, #667eea);
    color: #fff;
}
.swal-member-result__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}
.swal-member-result__top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.swal-member-result__memberno {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}
.swal-member-result__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.swal-member-result__chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.swal-member-result__chip--active   { background: #dcfce7; color: #166534; }
.swal-member-result__chip--frozen   { background: #dbeafe; color: #1e40af; }
.swal-member-result__chip--prospect { background: #fef3c7; color: #92400e; }
.swal-member-result__chip--expired  { background: #fee2e2; color: #991b1b; }
.swal-member-result__chip--none     { background: #f1f5f9; color: #475569; }
.swal-member-result__chip--risk     { background: #fef3c7; color: #92400e; text-transform: none; letter-spacing: 0; }

/* ══════════════════════════════════════════════════════════════════
   End Messaging Sidebar Layout
   ══════════════════════════════════════════════════════════════════ */

/* Comms offcanvas */
.member-comms-offcanvas {
    width: 550px !important;
}

/* Comms offcanvas items */
.comms-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: var(--radius-md);
    background: #f9fafb;
    transition: background 0.15s;
}

.comms-item:hover {
    background: #f3f4f6;
}

.comms-item__icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.comms-item__icon--message { background: #dbeafe; color: #2563eb; }
.comms-item__icon--note { background: #fef3c7; color: #d97706; }
.comms-item__icon--system { background: #f3f4f6; color: #6b7280; }
.comms-item__icon--visit { background: #dcfce7; color: #16a34a; }
.comms-item__icon--booking { background: #e0e7ff; color: #4f46e5; }
.comms-item__icon--payment { background: #ccfbf1; color: #0d9488; }
.comms-item__icon--lifecycle { background: #f3e8ff; color: #7c3aed; }
.comms-item__icon--task { background: #f3e8ff; color: #7c3aed; }

.comms-item__body {
    flex: 1;
    min-width: 0;
}

.comms-item__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2px;
}

.comms-item__title {
    font-size: 0.85rem;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.comms-item__badge {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.comms-item__badge--message { background: #dbeafe; color: #1d4ed8; }
.comms-item__badge--note { background: #fef3c7; color: #b45309; }
.comms-item__badge--system { background: #f3f4f6; color: #6b7280; }

.comms-item__snippet {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 2px 0 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.comms-item__date {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Comms card items (dashboard preview) */
.comms-card-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.1rem;
    border-bottom: 1px solid #f3f4f6;
}

.comms-card-item:last-child {
    border-bottom: none;
}

.comms-card-item__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.comms-card-item__icon--message { background: #dbeafe; color: #2563eb; }
.comms-card-item__icon--note { background: #fef3c7; color: #d97706; }
.comms-card-item__icon--system { background: #f3f4f6; color: #6b7280; }

.comms-card-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.comms-card-item__title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 1.3;
}

.comms-card-item__meta {
    font-size: 0.75rem;
    color: #9ca3af;
    display: block;
    line-height: 1.35;
}

.comms-card-item__type {
    font-weight: 600;
    color: #6b7280;
}

/* Inline status chip inside the meta row */
.comms-card-item__meta .comms-status {
    margin-left: 0.35rem;
    vertical-align: middle;
}

/* Comms hub: context header */
.comms-context-header {
    padding: 0.5rem 1.5rem;
    background: #f9fafb;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 32px;
}

.comms-context-header--ok { color: #059669; }
.comms-context-header--warn { color: #d97706; }
.comms-context-header--danger { color: #dc2626; font-weight: 600; }

.comms-context-header__failed {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: #dc2626;
}

/* Override the global .card overflow:hidden so CSS tooltips are not clipped */
.mpe-form-card {
    overflow: visible;
    margin-bottom: 1.5rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Fade inactive sections when scroll-spy is active. Originally 0.45 but
   that read as "disabled" — operators thought the section was locked
   and missed that they could scroll down to fill it in (#40460). 0.85
   keeps a subtle "secondary focus" feel without dimming the form
   controls into looking unavailable. */
.mpe-form-card--dimmed {
    opacity: 0.85;
}

.mpe-form-card--active {
    opacity: 1;
}

.mpe-form-card > .card-body {
    padding-top: 0.75rem;
}

.mpe-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1f2937;
    padding: 0.75rem 1.25rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
}

.mpe-card-header__icon {
    font-size: 0.8rem;
    color: #6b7280;
}

/* Subsection headers inside "What's included?" — lightweight alternative to nested cards */
.mpe-includes-subsection {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.mpe-includes-subsection:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.mpe-includes-subsection__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.mpe-includes-subsection__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #374151;
}

.mpe-includes-subsection__title i {
    color: #6c757d;
    width: 1.25rem;
    text-align: center;
}

/* ======================================================
   Membership Plan Edit — Progress Bar + Wizard Layout
   ====================================================== */

/* Scroll target offset for sections */
.mpe-scroll-target {
    scroll-margin-top: 140px;
}

/* Step progress bar (based on wizard's mpw-progress but freely clickable) */
.mpe-progress {
    margin-bottom: 1.5rem;
    position: sticky;
    top: 56px;
    z-index: 10;
    background: transparent;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.mpe-progress--stuck {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mpe-progress--stuck::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 24px;
    background: linear-gradient(to bottom, #fff, transparent);
    pointer-events: none;
}

.mpe-progress-track {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

.mpe-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    cursor: pointer;
    text-decoration: none;
}

.mpe-progress-step:hover {
    text-decoration: none;
}

.mpe-progress-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.mpe-progress-step.active .mpe-progress-circle {
    background: #7c3aed;
    color: white;
}

.mpe-progress-step:hover .mpe-progress-circle {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.mpe-progress-label {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.5rem;
    text-align: center;
    white-space: nowrap;
}

.mpe-progress-step.active .mpe-progress-label {
    color: #7c3aed;
    font-weight: 500;
}

.mpe-progress-step:hover .mpe-progress-label {
    color: #7c3aed;
}

.mpe-progress-line {
    width: 40px;
    height: 3px;
    background: #e5e7eb;
    margin: 0 0.25rem;
    margin-bottom: 1.5rem;
}

/* Radio card selector (either/or choices) */
.mpe-radio-cards {
    display: flex;
    gap: 0.75rem;
}

.mpe-radio-card {
    flex: 1;
    border: 2px solid #dee2e6;
    border-radius: var(--radius-lg);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
}

.mpe-radio-card:hover {
    border-color: color-mix(in srgb, var(--club-colour, #6366f1) 40%, #dee2e6);
}

.mpe-radio-card.selected {
    border-color: var(--club-colour, #6366f1);
    background: color-mix(in srgb, var(--club-colour, #6366f1) 5%, white);
}

.mpe-radio-card input[type="radio"] {
    display: none;
}


.mpe-radio-card__content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mpe-radio-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #6c757d;
    font-size: 1rem;
}

.mpe-radio-card__icon i {
    font-size: 1rem;
}

.mpe-radio-card.selected .mpe-radio-card__icon {
    background: var(--club-colour, #6366f1);
    color: var(--club-colour-contrast, white);
}

.mpe-radio-card__text {
    display: flex;
    flex-direction: column;
}

.mpe-radio-card__text strong {
    font-size: 0.95rem;
}

.mpe-radio-card__text span {
    font-size: 0.85rem;
    color: #6c757d;
}


/* Duration control (contract length input + unit dropdown) */
.mpe-duration-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.mpe-duration-control .mpe-duration-input {
    width: 80px !important;
    flex: 0 0 80px;
}
.mpe-duration-control .mpe-duration-unit {
    width: auto;
    flex: 0 0 auto;
}

/* Payment method cards */
.mpe-payment-methods {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mpe-payment-method {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid #dee2e6;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mpe-payment-method:hover {
    border-color: color-mix(in srgb, var(--club-colour, #6366f1) 40%, #dee2e6);
}

.mpe-payment-method.selected {
    border-color: var(--club-colour, #6366f1);
    background: color-mix(in srgb, var(--club-colour, #6366f1) 5%, white);
}

.mpe-payment-method input[type="checkbox"] {
    display: none;
}

.mpe-payment-method__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #6c757d;
    font-size: 1rem;
}

.mpe-payment-method__icon i {
    font-size: 1rem;
}

.mpe-payment-method.selected .mpe-payment-method__icon {
    background: var(--club-colour, #6366f1);
    color: var(--club-colour-contrast, white);
}

.mpe-payment-method__content {
    display: flex;
    flex-direction: column;
}

.mpe-payment-method__content strong {
    font-size: 0.95rem;
}

.mpe-payment-method__content span {
    font-size: 0.85rem;
    color: #6c757d;
}

@media (max-width: 575.98px) {
    .mpe-radio-cards {
        flex-direction: column;
    }
}

@media (max-width: 991.98px) {
    .mpe-progress-label {
        font-size: 0.75rem;
    }

    .mpe-progress-line {
        width: 20px;
    }
}

.mpe-payment-summary {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: #495057;
    margin-bottom: 1rem;
}

.mpe-payment-summary i {
    color: #6c757d;
    margin-top: 2px;
}

/* ── Plan Details: wizard-style inputs ── */
.mpe-input {
    border-radius: var(--radius-md);
    border: 1px solid #d1d5db;
    padding: 0.625rem 0.875rem;
}

/* Apply modern input styling to all form controls within plan editor cards */
.mpe-form-card .form-control,
.mpe-form-card .form-select {
    border-radius: var(--radius-md);
    border: 1px solid #d1d5db;
}

.mpe-form-card .input-group > .form-control,
.mpe-form-card .input-group > .form-select {
    border-radius: var(--radius-md);
}

.mpe-form-card .input-group > .input-group-text {
    border-radius: var(--radius-md) 0 0 8px;
    border: 1px solid #d1d5db;
}

.mpe-form-card .input-group > .input-group-text + .form-control,
.mpe-form-card .input-group > .input-group-text + .form-select {
    border-radius: 0 8px 8px 0;
}

/* Summernote modern skin inside plan editor */
.mpe-form-card .note-editor.note-frame {
    border: 1px solid #d1d5db;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.mpe-form-card .note-editor .note-toolbar {
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
    border-radius: var(--radius-md) 8px 0 0;
    padding: 0.375rem 0.5rem;
}

.mpe-form-card .note-editor .note-editing-area .note-editable {
    padding: 0.625rem 0.875rem;
    border-radius: 0 0 8px 8px;
}

.mpe-form-card .note-editor .note-statusbar {
    border-top: 1px solid #e5e7eb;
    background: #f8f9fa;
    border-radius: 0 0 8px 8px;
}

/* ── Plan Details: Featured toggle ── */
.mpe-featured-toggle {
    display: block;
    border: 2px solid #dee2e6;
    border-radius: var(--radius-md);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    background: #fff;
}

.mpe-featured-toggle:hover {
    border-color: #ffc107;
    background: #fffbeb;
}

.mpe-featured-toggle.selected {
    border-color: #ffc107;
    background: #fff9e6;
}

.mpe-featured-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.mpe-featured-toggle-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mpe-featured-toggle-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mpe-featured-toggle-icon i {
    font-size: 1.25rem;
    color: #6c757d;
}

.mpe-featured-toggle.selected .mpe-featured-toggle-icon {
    background: #ffc107;
}

.mpe-featured-toggle.selected .mpe-featured-toggle-icon i {
    color: #fff;
}

.mpe-featured-toggle-text {
    flex: 1;
}

.mpe-featured-toggle-text strong {
    display: block;
    margin-bottom: 0.25rem;
}

.mpe-featured-toggle-text span {
    font-size: 0.875rem;
    color: #6c757d;
}

.mpe-featured-toggle-check {
    font-size: 1.5rem;
    color: #dee2e6;
}

.mpe-featured-toggle.selected .mpe-featured-toggle-check {
    color: #ffc107;
}

/* ── Plan Edit: Image upload ── */
.mpe-image-upload {
    margin-bottom: 1rem;
}

.mpe-image-input {
    display: none;
}

.mpe-image-preview {
    width: 200px;
    height: 150px;
    border: 2px dashed #dee2e6;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.15s ease-in-out;
    background: #f8f9fa;
}

.mpe-image-preview:hover {
    border-color: #0d6efd;
    background: #fff;
}

.mpe-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Wide variant (#42371/#42538 products, #42556 plans): previews the 2.6:1 banner frame
   (products recommend 650×250, plans 1040×400 — same shape). The renderers this guide
   makes a promise about are all fluid-width, so there is no single crop — the ratio
   varies with the member's screen:
     · product shop cards (MemberArea/_ProductList, ×2 grids) — 140px tall, in
       repeat(auto-fill, minmax(280px, 1fr)) + 16px gap → column 280px up to
       2×280+16−1 = 575px (one column just under the two-column threshold) → 2:1 … ~4.1:1
     · product signup add-ons (MemberArea/SelectMembership) — same grid, 120px tall
       → 2.3:1 … ~4.8:1
     · product joining offers (MemberArea/MembershipComplete) — stacked card in a
       600px-max wrapper, 120px tall → up to 5:1
     · plan browse cards (MemberArea/SelectMembership plans grid) — same 140px grid as
       the shop → 2:1 … ~4.1:1
     · plan detail modal hero (.membership-modal-hero, membersarea.css) — 180px tall ×
       modal width (≤500px) → 2:1 … ~2.8:1 (below a ~376px viewport the modal dips
       slightly squarer than 2:1 and shaves a few % more off the sides — accepted)
   Plan images ALSO render in framings no banner promise can cover — the featured-plan
   card (~1:1–2:1), MyMemberships side-thumbs/banners (0.9:1–6:1) and the full-viewport
   .public-hero wallpapers — which is why the plan hint copy says "keep key content near
   the centre" instead of stretching this envelope (see #42556 for the inventory).
   The box shows the 2.6:1 frame (exactly what a 364px shop column displays); the ::after
   guide marks the region that survives EVERY promised renderer at EVERY width — narrow
   columns shave the sides (worst 2:1), wide cards shave the top/bottom (worst 5:1). The
   custom properties below mirror those view literals and the guide insets are derived
   from them; tests/harnesses/42538-product-image-crop-guide.js fails if either side
   drifts, so change them together. */
.mpe-image-preview--wide,
.mpw-image-preview--wide {
    --pv-ratio: calc(650 / 250); /* recommended upload shape (650×250 / 1040×400 hints) */
    --pv-col-min: 280;           /* grid minmax() lower bound (px); narrowest crop with… */
    --pv-card-h-max: 140;        /* …the tallest card (shop): 280/140 = 2:1 */
    --pv-card-w-max: 600;        /* joining-offers wrapper cap (px); widest crop with… */
    --pv-card-h-min: 120;        /* …the shortest card (signup/offers): 600/120 = 5:1 */
    position: relative;
    width: 364px; /* --pv-card-h-max × --pv-ratio */
    max-width: 100%;
    height: 140px; /* --pv-card-h-max */
}

/* Always-visible safe area: dashed rect over the image with the crop-risk bands dimmed
   (the 999px shadow spread is clipped by the base class's overflow: hidden). A
   pseudo-element so the upload JS's .html() swaps can't strip it; :has(img) keeps it
   off the "Click to add image" placeholder. (.mpw-* is the plan-wizard clone of the
   same upload widget — #42556.) */
.mpe-image-preview--wide:has(img)::after,
.mpw-image-preview--wide:has(img)::after {
    content: '';
    position: absolute;
    inset: calc(50% * (1 - var(--pv-ratio) * var(--pv-card-h-min) / var(--pv-card-w-max)))
           calc(50% * (1 - var(--pv-col-min) / (var(--pv-card-h-max) * var(--pv-ratio))));
    border: 1px dashed rgba(255, 255, 255, 0.9);
    border-radius: 2px;
    box-shadow: 0 0 0 999px rgba(15, 23, 42, 0.28);
    pointer-events: none;
}

.mpe-image-placeholder {
    text-align: center;
    color: #9ca3af;
}

.mpe-image-placeholder i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.mpe-image-placeholder span {
    font-size: 0.75rem;
}

.mpe-image-actions {
    margin-top: 0.5rem;
}

/* ======================================================
   Membership Plan Edit — Sidebar Section Nav
   ====================================================== */

.settings-sidebar--sticky {
    border-radius: 0;
    margin-right: 0;
}

.mpe-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mpe-sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: #4b5563;
    text-decoration: none;
    border-radius: 6px;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.mpe-sidebar-item:hover {
    background: #f3f4f6;
    color: #111827;
    text-decoration: none;
}

.mpe-sidebar-item.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 600;
    border-left-color: #2563eb;
}

.mpe-sidebar-item.active:hover {
    background: #dbeafe;
    color: #2563eb;
}

.mpe-sidebar-item__icon {
    width: 1rem;
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.6;
    flex-shrink: 0;
    margin-top: 2px;
}

.mpe-sidebar-item.active .mpe-sidebar-item__icon {
    opacity: 1;
}

.mpe-sidebar-item__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mpe-sidebar-item__name {
    line-height: 1.3;
}

.mpe-sidebar-item__subtitle {
    font-size: 0.75rem;
    color: #9ca3af;
    line-height: 1.3;
    font-weight: 400;
}

.mpe-sidebar-item__match {
    font-size: 0.75rem;
    color: #e8651a;
    line-height: 1.3;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mpe-sidebar-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4b5563;
    text-decoration: none;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid #e5e7eb;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mpe-sidebar-back i {
    font-size: 0.75rem;
    color: #9ca3af;
    transition: transform 0.15s, color 0.15s;
}

.mpe-sidebar-back:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #111827;
    text-decoration: none;
}

.mpe-sidebar-back:hover i {
    transform: translateX(-2px);
    color: #6b7280;
}

/* Section divider between form sections */
.mpe-section-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 2rem 0;
}

/* Mobile section nav for plan edit */
/* Mobile section tabs for plan edit — extends .tabs */
.mpe-tabs {
    display: none;
}

@media (max-width: 991.98px) {
    .mpe-tabs {
        display: flex;
        width: 100%;
        height: 36px;
        min-height: 36px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        position: sticky;
        top: calc(42px + var(--sticky-header-height, 78px));
        z-index: 10;
        background: #f1f3f5;
    }

    .mpe-scroll-target {
        scroll-margin-top: 200px;
    }

    .mpe-tabs::-webkit-scrollbar {
        display: none;
    }

    .mpe-tabs .tab {
        flex: 0 0 auto;
        flex-direction: row;
        height: 36px;
        min-height: 36px;
        padding: 0 0.75rem;
    }
}

/* Phone frame preview for membership plan editor */
.mpe-phone-preview {
    text-align: center;
}

.mpe-phone-frame {
    width: 400px;
    height: 800px;
    background: #1a1a1a;
    border-radius: 32px;
    padding: 10px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
    transform-origin: top center;
}

#mpeRow > .col-lg-4 > .sticky-top {
    z-index: 5;
}

.mpe-preview-hidden > .col-lg-4 { display: none !important; }
.mpe-preview-hidden > .col-lg-8 { flex: 0 0 100%; width: 100%; max-width: 100%; }

.mpe-phone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 18px;
    background: #1a1a1a;
    border-radius: 0 0 12px 12px;
    z-index: 10;
}

.mpe-phone-screen {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 24px;
    background: #fff;
    overflow: hidden;
}

/* Collapsible schedule card */
.mpe-schedule-card .mpe-schedule-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.mpe-schedule-toggle .mpe-schedule-chevron {
    transition: transform 0.2s;
}

.mpe-schedule-toggle[aria-expanded="false"] .mpe-schedule-chevron {
    transform: rotate(-90deg);
}

/* Schedule preview panel (inline in Pricing section) */
.mpe-schedule-preview-wrapper {
    margin: 1.5rem 0 0;
}

/* Remove column top margin from rows in pricing partials and toggle cards */
#section-pricing .row > [class*="col-"],
.card.bg-light > .card-body > .row > [class*="col-"] {
    margin-top: 0;
}

.mpe-schedule-preview-header {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.mpe-schedule-preview {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 1rem;
}

.mpe-schedule-preview .summary-panel {
    font-size: 0.8125rem;
}

/* Comms hub: filter tabs */
.comms-filter-tabs {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}

.comms-filter-tab {
    background: none;
    border: none;
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: #6b7280;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.comms-filter-tab:hover { background: #f3f4f6; color: #111827; }
.comms-filter-tab--active { background: #e8651a; color: #fff; }
.comms-filter-tab--active:hover { background: #d4580f; color: #fff; }

/* Comms hub: status badges */
.comms-status {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}

.comms-status--success { background: #d1fae5; color: #065f46; }
.comms-status--warning { background: #fef3c7; color: #92400e; }
.comms-status--danger { background: #fee2e2; color: #991b1b; }
.comms-status--info { background: #dbeafe; color: #1e40af; }

/* Comms hub: day group headers — aligned with .comms-item padding (0.75rem) */
.comms-day-group {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    padding: 0.45rem 0.75rem;
    margin: 0.75rem 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e5e7eb;
}

.comms-day-group:first-child { margin-top: 0; }

/* Comms hub: expandable items */
.comms-item--expandable { cursor: pointer; }

.comms-item--expanded {
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.comms-item__full-body {
    display: none;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f3f4f6;
    font-size: 0.8rem;
    color: #374151;
    line-height: 1.5;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.comms-item--expanded .comms-item__full-body { display: block; }
.comms-item--expanded .comms-item__snippet { display: none; }

/* Comms hub: pin indicator */
.comms-item__pin {
    cursor: pointer;
    margin-left: 0.35rem;
    color: #d1d5db;
    font-size: 0.75rem;
    transition: color 0.15s, background 0.15s;
    background: transparent;
    border: none;
    padding: 4px 6px;
    border-radius: 6px;
    line-height: 1;
}

.comms-item__pin:hover { color: #d97706; background: #fef3c7; }
.comms-item__pin:focus { outline: none; }
.comms-item__pin:focus-visible { box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.3); }
.comms-item__pin--active { color: #d97706; }

/* Load-older footer button in the offcanvas timeline */
.comms-load-more {
    display: flex;
    justify-content: center;
    padding: 1rem 0 0.5rem;
}

.comms-load-more__btn {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
    border-radius: var(--radius-pill);
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.comms-load-more__btn:hover:not(:disabled) {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #111827;
}

.comms-load-more__btn:disabled { opacity: 0.7; cursor: default; }

/* Message detail offcanvas — sits to the LEFT of the messaging offcanvas (which is 600px wide via .member-detail-offcanvas, right-anchored).
   Show/hide is managed manually in JS (toggling .showing/.show/.hiding) so CoreUI's data-api doesn't dismiss
   the messaging panel when we open this one. */
.member-detail-offcanvas.member-comms-item-offcanvas {
    width: 520px !important;
    right: 600px !important;
    left: auto !important;
    z-index: 1044; /* one below the messaging offcanvas so it slides out from behind */
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.member-detail-offcanvas.member-comms-item-offcanvas.showing,
.member-detail-offcanvas.member-comms-item-offcanvas.show,
.member-detail-offcanvas.member-comms-item-offcanvas.hiding {
    visibility: visible;
}

.member-detail-offcanvas.member-comms-item-offcanvas.show {
    transform: none;
}

.member-detail-offcanvas.member-comms-item-offcanvas.hiding,
.member-detail-offcanvas.member-comms-item-offcanvas.showing {
    transform: translateX(100%);
}

/* #42369 — opened without the messaging drawer behind it (eg. from the member
   dashboard's inline Activity timeline), the right:600px "second stage" position
   left the panel floating mid-screen. Solo mode anchors it to the right edge. */
.member-detail-offcanvas.member-comms-item-offcanvas.comms-item-offcanvas--solo {
    right: 0 !important;
    z-index: 1051;
}

/* Narrow viewports: fall back to a single stacked panel */
@media (max-width: 1200px) {
    .member-detail-offcanvas.member-comms-item-offcanvas {
        right: 0 !important;
        z-index: 1051; /* one above the messaging offcanvas so it covers it on narrow viewports (#41579) */
    }
}

/* Phones: the 520px drawer overflows the viewport — go full width (mirrors the membership detail drawer) */
@media (max-width: 767px) {
    .member-detail-offcanvas.member-comms-item-offcanvas {
        width: 100% !important;
    }
}

/* ── Membership secondary slide-out ── sits to the LEFT of the 700px membership
   offcanvas; same manual show/hide mechanism as the message-detail drawer above. */
.member-detail-offcanvas.member-membership-detail-offcanvas {
    width: 560px !important;
    right: 600px !important; /* flush against the membership offcanvas, which is 600px wide
                                (.member-detail-offcanvas base width wins over the dead 700px rule) */
    left: auto !important;
    z-index: 1049; /* one below the membership offcanvas (1050) so it slides out from behind */
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.member-detail-offcanvas.member-membership-detail-offcanvas.showing,
.member-detail-offcanvas.member-membership-detail-offcanvas.show,
.member-detail-offcanvas.member-membership-detail-offcanvas.hiding {
    visibility: visible;
}

.member-detail-offcanvas.member-membership-detail-offcanvas.show {
    transform: none;
}

.member-detail-offcanvas.member-membership-detail-offcanvas.hiding,
.member-detail-offcanvas.member-membership-detail-offcanvas.showing {
    transform: translateX(100%);
}

/* Not enough room for panel (600) + drawer (560): cover the panel instead of sitting beside it. */
@media (max-width: 1200px) {
    .member-detail-offcanvas.member-membership-detail-offcanvas {
        width: 600px !important;
        right: 0 !important;
        z-index: 1051; /* above the membership offcanvas (1050) so it covers it */
    }
}

@media (max-width: 767px) {
    .member-detail-offcanvas.member-membership-detail-offcanvas {
        width: 100% !important;
    }
}

/* Tucked-behind depth cue: while a detail pane is open, the membership panel (in front,
   z-index 1050) casts a soft shadow leftward onto the drawer (behind, z-index 1049) so the
   drawer reads as tucked underneath rather than as an equal side-by-side panel. */
.member-detail-offcanvas.member-membership-offcanvas.ms-has-detail {
    border-left: none !important; /* drop CoreUI's 1px divider so the seam reads as depth, not a border */
    box-shadow: -7px 0 14px -2px rgba(0, 0, 0, 0.30), -22px 0 44px -6px rgba(0, 0, 0, 0.22) !important;
}

/* Detail panes: only the active one shows inside the drawer. */
.ms-detail-pane { display: none; }
.ms-detail-pane.ms-detail-pane--active { display: block; }

.ms-detail__header {
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.ms-detail__back {
    background: transparent;
    border: none;
    color: #6b7280;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ms-detail__back:hover { background: #f3f4f6; color: #111827; }

.ms-detail__title {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-detail__body { padding: 1rem 1.1rem; }

.comms-detail__header {
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.comms-detail__back {
    background: transparent;
    border: none;
    color: #6b7280;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comms-detail__back:hover { background: #f3f4f6; color: #111827; }

/* #41681 — Archive-conversation button in the Messaging drawer footer, sitting
   beside "Add a note" so staff can reply-and-archive without opening the full
   Messages inbox. Matches the footer note-button weight (small, quiet text
   button); hover tints red as a soft "this clears it from the inbox" cue. */
.comms-archive-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.comms-archive-btn i { font-size: 0.8rem; }
.comms-archive-btn:hover { background: #fff; color: #b91c1c; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.comms-archive-btn:active { background: #f3f4f6; }
.comms-archive-btn:disabled { opacity: 0.5; cursor: default; background: transparent; box-shadow: none; color: #9ca3af; }

/* #41681 — Footer actions row: keeps "Add a note" and "Archive this conversation"
   side by side. The parent .comms-compose-bar is a flex column (reply bar stacked
   above), so the two buttons need their own row wrapper to sit next to each other. */
.comms-compose-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.comms-detail__title-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.comms-detail__title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.comms-detail__type {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.comms-detail__type--email { color: #1d4ed8; }
.comms-detail__type--sms { color: #059669; }
.comms-detail__type--note { color: #b45309; }
.comms-detail__type--system { color: #6b7280; }
.comms-detail__type--conversation { color: #1d4ed8; }

.comms-detail__meta {
    padding: 0.65rem 1rem;
    background: #f9fafb;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.78rem;
    color: #4b5563;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.comms-detail__meta-row {
    display: flex;
    gap: 0.5rem;
}

.comms-detail__meta-label {
    min-width: 56px;
    color: #9ca3af;
    font-weight: 500;
}

.comms-detail__meta-value { color: #111827; word-break: break-word; }

/* #40402 — linked meta value variant; renders when we know the related member
   ID so From/To/By can tap-through to the profile. */
a.comms-detail__meta-value--linked {
    text-decoration: none;
    cursor: pointer;
}
a.comms-detail__meta-value--linked:hover,
a.comms-detail__meta-value--linked:focus {
    color: #1d4ed8;
    text-decoration: underline;
}

.comms-detail__body {
    padding: 1rem 1.25rem;
    font-size: 0.88rem;
    color: #111827;
    line-height: 1.5;
}

.comms-detail__body--html img,
.comms-detail__body--html table { max-width: 100%; height: auto; }
.comms-detail__body--html a { color: #2563eb; }
.comms-detail__body--plain { white-space: pre-wrap; word-break: break-word; }
.comms-detail__body--muted { color: #6b7280; font-style: italic; }

.comms-detail__attachments {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.comms-detail__attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    background: #f3f4f6;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    color: #374151;
}

.comms-detail__actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #e5e7eb;
    background: #fafbfc;
}

.comms-detail__action {
    flex: 1;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.comms-detail__action:hover {
    background: #f3f4f6;
    color: #111827;
    border-color: #9ca3af;
}

.comms-detail__action--primary {
    background: linear-gradient(135deg, #e8651a 0%, #f59e0b 100%);
    color: #fff;
    border-color: transparent;
}

.comms-detail__action--primary:hover {
    background: linear-gradient(135deg, #d35a17 0%, #e0900a 100%);
    color: #fff;
    border-color: transparent;
}

.comms-detail__action--danger {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fff;
}

.comms-detail__action--danger:hover {
    background: #fee2e2;
    color: #7f1d1d;
    border-color: #fca5a5;
}

/* Hint the comms item row is clickable */
.comms-item { cursor: pointer; }
.comms-item__pin { cursor: pointer; } /* pin button overrides row cursor */

.comms-item--pinned {
    border-left: 3px solid #d97706;
    padding-left: calc(0.75rem - 3px);
}

/* Comms hub: sender info */
.comms-item__sender {
    font-size: 0.75rem;
    color: #6b7280;
}

/* #40402 — linked sender variant (renders when we know the sender's member ID
   so we can navigate to their profile on click). Neutral by default to match
   the existing badge styling, blue on hover so the link affordance reads. */
a.comms-item__sender--linked {
    text-decoration: none;
    cursor: pointer;
}
a.comms-item__sender--linked:hover,
a.comms-item__sender--linked:focus {
    color: #1d4ed8;
    text-decoration: underline;
}

/* Comms hub: quick note input */
.comms-quick-note {
    padding: 0.75rem 1rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}

.comms-quick-note__form {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.comms-quick-note__input {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-md);
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    resize: none;
    transition: border-color 0.15s;
    font-family: inherit;
    line-height: 1.4;
    min-height: 36px;
    max-height: 100px;
    overflow-y: auto;
}

.comms-quick-note__input:focus {
    outline: none;
    border-color: #e8651a;
    box-shadow: 0 0 0 2px rgba(232, 101, 26, 0.1);
}

.comms-quick-note__send {
    background: linear-gradient(135deg, #e8651a 0%, #f59e0b 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
    flex-shrink: 0;
}

.comms-quick-note__send:hover { transform: scale(1.05); }
.comms-quick-note__send:active { transform: scale(0.97); }
.comms-quick-note__send:disabled { opacity: 0.5; cursor: default; transform: none; }

.comms-quick-note__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Compose mode switcher (Note / Email / SMS) */
.comms-mode-switcher {
    display: inline-flex;
    gap: 0.125rem;
    padding: 0.125rem;
    background: #f3f4f6;
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
}

.comms-mode-switcher__btn {
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.comms-mode-switcher__btn:hover { color: #111827; }
.comms-mode-switcher__btn.active {
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.comms-mode-switcher__btn.active[data-mode="email"] { color: #2563eb; }
.comms-mode-switcher__btn.active[data-mode="sms"] { color: #059669; }
.comms-mode-switcher__btn.active[data-mode="note"] { color: #d97706; }

/* A note is a separate action, not a message channel — sits apart from the Email/SMS toggle. */
.comms-mode-switcher__note {
    border: none;
    background: transparent;
    color: #d97706;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.5rem;
    border-left: 1px solid #e5e7eb;
    padding-left: 0.75rem;
}
.comms-mode-switcher__note:hover { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

/* Expand-to-full-editor icon button on the composer */
.comms-quick-note__expand {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #6b7280;
    border-radius: var(--radius-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.comms-quick-note__expand:hover {
    color: #111827;
    border-color: #9ca3af;
    background: #f9fafb;
}

/* Composer input placeholder colour per mode */
.comms-quick-note__form[data-mode="email"] .comms-quick-note__input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1); }
.comms-quick-note__form[data-mode="sms"] .comms-quick-note__input:focus { border-color: #059669; box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.1); }

/* Comms hub: card context strip (in dashboard card) */
.comms-card-context {
    padding: 0.375rem 1.25rem;
    font-size: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.comms-card-context--ok { color: #059669; }
.comms-card-context--warn { color: #d97706; }
.comms-card-context--danger { color: #dc2626; font-weight: 600; }

.comms-card-prefs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
    background: #fafbfc;
    font-size: 0.8rem;
    color: #374151;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.comms-card-prefs:hover {
    background: #f3f4f6;
    color: #111827;
    text-decoration: none;
}

.comms-card-prefs__label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.comms-card-prefs__status {
    font-weight: 600;
}

.comms-card-prefs__status--on { color: #059669; }
.comms-card-prefs__status--off { color: #dc2626; }

.comms-card-prefs__consents {
    color: #6b7280;
}

.comms-card-prefs__action {
    color: #6b7280;
    font-weight: 500;
}

.comms-card-prefs__chevron {
    color: #9ca3af;
    font-size: 0.75rem;
}

/* Header-level quick actions (cog for prefs + chevron to full view) */
.comms-card-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.comms-card-header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    color: #6b7280;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    font-size: 0.85rem;
}

.comms-card-header-action:hover {
    background: #f3f4f6;
    color: #111827;
    text-decoration: none;
}

.comms-card-header-action--expand {
    color: #9ca3af;
    font-size: 0.75rem;
}

/* "Messaging is off" warning dot next to title */
.comms-card-prefs-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 0.5rem;
}

.comms-card-prefs-dot--off {
    background: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* CTA strip under the preview list — prompts staff to open the offcanvas to write */
.comms-card-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.5rem -1.25rem -0.5rem;
    padding: 0.6rem 1.25rem;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
    color: #4b5563;
    font-size: 0.78rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.member-dashboard-card--clickable:hover .comms-card-cta {
    background: #f3f4f6;
    color: #111827;
}

.comms-card-cta__chev {
    color: #9ca3af;
    font-size: 0.75rem;
}

/* Dashboard cards */
.member-dashboard-card {
    background: #fff;
    border: none;
    border-radius: var(--radius-xl);
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s, transform 0.2s;
}

.member-dashboard-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
}

.member-dashboard-card--clickable {
    cursor: pointer;
}

.member-dashboard-card--clickable:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.member-dashboard-card--alerts-active {
    border-left: 4px solid #d97706;
}

.member-dashboard-card--alerts-critical {
    border-left: 4px solid #dc2626;
    animation: pulse-alerts-critical 2.4s ease-in-out infinite;
}

@keyframes pulse-alerts-critical {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.3); }
    50% { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}

.alerts-preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.alerts-preview__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    line-height: 1.3;
}

.alerts-preview__icon {
    margin-top: 2px;
    flex: 0 0 auto;
}

.alerts-preview__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.alerts-preview__item--critical {
    background: #fef2f2;
    color: #7f1d1d;
}
.alerts-preview__item--critical .alerts-preview__icon {
    color: #dc2626;
}

.alerts-preview__item--warning {
    background: #fffbeb;
    color: #92400e;
}
.alerts-preview__item--warning .alerts-preview__icon {
    color: #d97706;
}

.alerts-preview__item--info {
    background: #eff6ff;
    color: #1e40af;
}
.alerts-preview__item--info .alerts-preview__icon {
    color: #0d6efd;
}

.alerts-preview__more {
    font-size: 0.75rem;
    color: #6b7280;
    text-align: center;
    margin-top: 2px;
}

.member-dashboard-card__chevron {
    color: #9ca3af;
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.member-dashboard-card--clickable:hover .member-dashboard-card__chevron {
    color: #6b7280;
    transform: translateX(2px);
}

.member-dashboard-card__header {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.member-dashboard-card__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #374151;
    margin: 0;
    letter-spacing: -0.01em;
}

.member-dashboard-card__body {
    padding: 1rem 1.25rem;
}

.member-dashboard-card__footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Card type accents — no left borders, just subtle header tint */

/* Card header icons */
.member-dashboard-card__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.member-dashboard-card__icon--blue { background: #dbeafe; color: #2563eb; }
.member-dashboard-card__icon--indigo { background: #e0e7ff; color: #4f46e5; }
.member-dashboard-card__icon--amber { background: #fef3c7; color: #d97706; }
.member-dashboard-card__icon--green { background: #dcfce7; color: #16a34a; }
.member-dashboard-card__icon--red { background: #fee2e2; color: #dc2626; }
.member-dashboard-card__icon--purple { background: #f3e8ff; color: #7c3aed; }
.member-dashboard-card__icon--orange { background: #ffedd5; color: #ea580c; }
.member-dashboard-card__icon--teal { background: #ccfbf1; color: #0d9488; }
.member-dashboard-card__icon--slate { background: #f1f5f9; color: #475569; }

/* Tasks card — emphasis treatment */
.member-dashboard-card--tasks .member-dashboard-card__header {
    border-bottom: 2px solid #fef3c7;
}

/* Detail offcanvas panels */
.member-detail-offcanvas {
    width: 600px !important;
}

.member-detail-offcanvas .offcanvas-header {
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem 1.5rem;
}

.member-detail-offcanvas .offcanvas-body {
    padding: 1.5rem;
    padding-top: 0rem;
}

.member-detail-offcanvas__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: #9ca3af;
    font-size: 0.9rem;
}

/* ParQ answer rows */
.parq-answer-row {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.parq-answer-row:last-child {
    border-bottom: none;
}

.parq-answer-row__question {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.25rem;
}

.parq-answer-row__answer {
    font-size: 0.85rem;
    color: #111827;
}

.parq-answer-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: #fef2f2;
    border-left: 4px solid #dc2626;
    border-radius: 6px;
    color: #7f1d1d;
}
.parq-answer-banner__icon {
    font-size: 1.1rem;
    color: #dc2626;
    margin-top: 2px;
}
.parq-answer-banner__sub {
    font-size: 0.78rem;
    color: #991b1b;
    margin-top: 2px;
}

.parq-answer-row--highrisk {
    background: #fffbeb;
    border-left: 4px solid #d97706;
    padding: 0.75rem 12px;
    margin: 0 0 6px;
    border-bottom: none;
    border-radius: 0 6px 6px 0;
}
.parq-answer-row--highrisk .parq-answer-row__question,
.parq-answer-row--highrisk .parq-answer-row__answer {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
}
.parq-answer-row__highrisk-icon {
    color: #d97706;
    flex: 0 0 auto;
    font-size: 0.85rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.parq-answer-row__question-text,
.parq-answer-row__answer-text {
    line-height: 1.3;
}
.parq-answer-row__highrisk-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: #d97706;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    height: 18px;
}

.parq-answer-row__detail {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* #42558 — credits report: include-used toggle and the per-credit session drill-down. */
.credits-report__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    margin-bottom: 0.75rem;
}

.credits-report__hint {
    font-size: 0.8rem;
    color: #6b7280;
}

.credits-report__chevron {
    margin-right: 0.35rem;
    transition: transform 0.15s ease;
}

.credits-report__chevron--open {
    transform: rotate(90deg);
}

.credits-report__sessions {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
}

.credits-report__sessions li {
    padding: 0.1rem 0;
}

/* Section heading used inside offcanvas activity panel */
.activity-panel-section__title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
    padding-bottom: 0.5rem;
    /* #42558 — the offcanvas body sets padding-top: 0, which left this title mashed
       against the panel header. Space it here rather than changing the shared
       offcanvas padding, which would reflow the other member panels too. */
    margin: 0.85rem 0 0.25rem;
    border-bottom: 1px solid #e5e7eb;
}
.activity-panel-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0 0 0.5rem;
}
.activity-panel-summary--good {
    color: #15803d;
    font-weight: 600;
}
.activity-panel-summary--bad {
    color: #b91c1c;
    font-weight: 600;
}
.activity-panel-summary--warn {
    color: #92400e;
    font-weight: 600;
}

/* #42558 — icon key for the bookings/visits feed. A booking and the visit it
   produced are separate rows, so clubs read the feed as duplicated without a key. */
.activity-panel-key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    padding: 0.4rem 0 0.5rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid #f3f4f6;
}

/* Each key entry is also a filter chip — click to show only that kind of row. */
.activity-panel-key__item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: #6b7280;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 0.15rem 0.5rem 0.15rem 0.2rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.activity-panel-key__item:hover {
    border-color: #9ca3af;
    color: #374151;
}

.activity-panel-key__item--active {
    background: #eef2ff;
    border-color: #6366f1;
    color: #4338ca;
    font-weight: 600;
}

.activity-panel-key__count {
    font-variant-numeric: tabular-nums;
    color: #9ca3af;
}

.activity-panel-key__item--active .activity-panel-key__count {
    color: #6366f1;
}

.activity-panel-key__icon {
    width: 1.1rem;
    height: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.6rem;
}

.activity-panel-key__item--active .activity-panel-key__icon {
    background: #6366f1;
    color: #fff;
}

/* Panel list items (bookings, purchases, awards) */
.panel-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.panel-list-item:last-child {
    border-bottom: none;
}

/* #40543 — "now" marker between upcoming bookings and past activity in the
   merged bookings/visits feed. A centred label on a hairline so the single
   list still reads as one timeline with a clear today boundary. */
.panel-list-divider {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.5rem 0 0.25rem;
    color: #9ca3af;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.panel-list-divider::before,
.panel-list-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #f3f4f6;
}

/* Clickable rows (e.g. purchases drill into sale detail, #40828) */
.panel-list-item--clickable {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.panel-list-item--clickable:hover {
    background-color: #f9fafb;
}

.panel-list-item--clickable:focus-visible {
    outline: 2px solid var(--cui-nav-link-color, #4f46e5);
    outline-offset: -2px;
}

.panel-list-item__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    background: #f3f4f6;
    color: #6b7280;
}

.panel-list-item__content {
    flex: 1;
    min-width: 0;
}

.panel-list-item__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.panel-list-item__subtitle {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
}

/* #42558 — what paid for a booking (credit pack or membership), restoring the
   "Credit used" column lost when Member/Edit was retired (#38736). */
.panel-list-item__paidwith {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: #6b7280;
    margin: 0.15rem 0 0;
    min-width: 0;
}

.panel-list-item__paidwith-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-list-item__paidwith--credit {
    color: #7c3aed;
}

.panel-list-item__badge {
    flex-shrink: 0;
}

button.panel-list-item__badge {
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
}

button.panel-list-item__badge:hover {
    opacity: 0.8;
}

/* #42420 — expandable booking detail. Restores the legacy Member/Edit bookings-tab
   columns (instructor, payment method · credit/plan) as a chevron-toggled block
   under each booking row in the merged bookings/visits feed. */
.panel-list-item__expand {
    flex-shrink: 0;
    align-self: center;
    border: none;
    background: transparent;
    color: #9ca3af;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.panel-list-item__expand:hover {
    color: #4b5563;
    background-color: #f3f4f6;
}

.panel-list-item__expand i {
    transition: transform 0.15s ease;
}

.panel-list-item__expand--open i {
    transform: rotate(180deg);
}

/* Expanded row hands its bottom border to the detail block so the pair reads
   as one bordered item. */
.panel-list-item--expanded {
    border-bottom: none;
}

/* A booking row followed by its (collapsed) detail div is no longer :last-child,
   so restate the last-item border removal for that shape. */
.panel-list-item:has(+ .panel-list-item__detail:last-child) {
    border-bottom: none;
}

.panel-list-item__detail {
    border-bottom: 1px solid #f3f4f6;
    /* Left inset lines the detail up under the row content: 32px icon + 0.75rem gap. */
    padding: 0 0 0.625rem 2.75rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.panel-list-item__detail:last-child {
    border-bottom: none;
}

.panel-list-item__detail-row {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.125rem;
}

.panel-list-item__detail-label {
    color: #9ca3af;
    min-width: 72px;
    flex-shrink: 0;
}

/* Payment method row in panel */
.payment-method-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
}

.payment-method-row:last-child {
    margin-bottom: 0;
}

.payment-method-row__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dcfce7;
    color: #16a34a;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.payment-method-row__info {
    flex: 1;
}

.payment-method-row__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
}

.payment-method-row__detail {
    font-size: 0.8rem;
    color: #6b7280;
}

/* "Send card request" empty-state CTA in the Payment Methods card (#40942).
   Teal tones mirror the card's header icon so the prompt reads as part of it. */
.payment-method-request {
    text-align: center;
    padding: 0.5rem 0.25rem 0.25rem;
}

.payment-method-request--separated {
    margin-top: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f1f3;
}

.payment-method-request__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ccfbf1;
    color: #0d9488;
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
}

.payment-method-request__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.15rem;
}

.payment-method-request__text {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0 auto 0.85rem;
    max-width: 260px;
    line-height: 1.4;
}

/* Award cards in training panel */
.award-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #7c3aed;
    border-radius: 10px;
    overflow: hidden;
}

.award-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.award-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3e8ff;
    color: #7c3aed;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.award-card__info {
    flex: 1;
    min-width: 0;
}

.award-card__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}

.award-card__date {
    font-size: 0.8rem;
    color: #6b7280;
}

.award-card__actions {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}

.award-card__review {
    padding: 0.5rem 1rem;
    border-top: 1px solid #f3f4f6;
    font-size: 0.8rem;
    color: #6b7280;
    background: #faf5ff;
}

/* Membership row */
.member-membership-row {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.member-membership-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.member-membership-row:first-child {
    padding-top: 0;
}

/* Activity timeline */
.member-activity-list {
    max-height: 320px;
    overflow-y: auto;
}

.member-activity-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid #f9fafb;
}

.member-activity-item:last-child {
    border-bottom: none;
}

.member-activity-item__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.member-activity-item__icon--message {
    background: #dbeafe;
    color: #2563eb;
}

.member-activity-item__icon--note {
    background: #fef3c7;
    color: #d97706;
}

.member-activity-item__icon--task {
    background: #f3e8ff;
    color: #7c3aed;
}

.member-activity-item__icon--system {
    background: #f3f4f6;
    color: #6b7280;
}

.member-activity-item__icon--payment {
    background: #dcfce7;
    color: #16a34a;
}

.member-activity-item__content {
    flex: 1;
    min-width: 0;
}

.member-activity-item__title {
    font-size: 0.85rem;
    color: #111827;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-activity-item__date {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Trend indicators */
.member-trend-up {
    color: #16a34a;
}

.member-trend-down {
    color: #dc2626;
}

.member-trend-flat {
    color: #9ca3af;
}

/* Action pills bar */
.member-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.member-action-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.125rem;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    background: #fff;
    color: #374151;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

.member-action-pill:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #111827;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.member-action-pill--primary {
    background: linear-gradient(135deg, #e8651a 0%, #f59e0b 100%);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(232, 101, 26, 0.3);
}

.member-action-pill--primary:hover {
    background: linear-gradient(135deg, #d45a16 0%, #d97706 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(232, 101, 26, 0.4);
    transform: translateY(-1px);
}

/* Quick actions sidebar card */
.member-quick-actions {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-xl);
    padding: 0.875rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.member-quick-actions__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

/* Pinned action bar — actions laid out in a single full-width row (Check in a
   touch wider) now that the membership card has moved into Overview. */
.member-quick-actions__grid--bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.member-quick-actions__grid--bar .member-action-btn {
    flex: 1 1 120px;
}

.member-quick-actions__grid--bar .member-action-btn--primary {
    grid-column: auto; /* override the full-width span used in the stacked layout */
    flex: 1.4 1 150px;
}

/* "Add membership" sits quietly to the right under the Overview membership card. */
.member-overview-addplan {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.member-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

.member-action-btn i {
    font-size: 0.95rem;
}

.member-action-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #111827;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.member-action-btn--primary {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #e8651a 0%, #f59e0b 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 12px rgba(232, 101, 26, 0.25);
    padding: 0.75rem;
    font-size: 0.9rem;
}

.member-action-btn--primary:hover {
    background: linear-gradient(135deg, #d45a16 0%, #d97706 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(232, 101, 26, 0.4);
    transform: translateY(-1px);
}

/* Member info strip — sits inside the quick-actions box on the dashboard
   so it doesn't leave a visual gap below the membership card. */
.member-info-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.member-quick-actions .member-info-strip {
    margin: 0.625rem 0 0;
    padding-top: 0.625rem;
    border-top: 1px solid #f3f4f6;
}

/* Info strip relocated under Member activity in the Overview tab — stack the
   chips vertically so they read as a tidy full-width list in the narrow
   right-hand column rather than wrapping awkwardly. */
.member-info-strip--activity {
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.75rem 0 0;
}

.member-info-strip--activity .member-info-strip__item {
    background: #f9fafb;
    border-color: #f3f4f6;
    justify-content: flex-start;
    width: 100%;
}

.member-info-strip--activity a.member-info-strip__item:hover {
    background: #fff;
    border-color: #d1d5db;
}

.member-quick-actions .member-info-strip__item {
    background: #f9fafb;
    border-color: #f3f4f6;
    /* Stretch chips to share the row width — keeps the strip from leaving a
       gap on the right when only a couple of chips are present. */
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
}

.member-quick-actions a.member-info-strip__item:hover {
    background: #fff;
    border-color: #d1d5db;
}

.member-info-strip__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.8rem;
    color: #374151;
    text-decoration: none;
    transition: all 0.15s ease;
}

a.member-info-strip__item {
    cursor: pointer;
}

a.member-info-strip__item:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #111827;
    text-decoration: none;
}

.member-info-strip__icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.member-info-strip__icon--purple {
    background: #f3e8ff;
    color: #7c3aed;
}

.member-info-strip__icon--slate {
    background: #f1f5f9;
    color: #475569;
}

.member-info-strip__text {
    font-weight: 500;
    white-space: nowrap;
}

.member-info-strip__select {
    border: none;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
    background: transparent;
    cursor: pointer;
    height: auto;
    min-height: unset;
    line-height: 1.4;
}

.member-info-strip__select:focus {
    box-shadow: none;
    border: none;
}

@media (max-width: 991px) {
    .member-action-btn {
        padding: 0.55rem 0.5rem;
        font-size: 0.8rem;
    }
    .member-action-btn i {
        font-size: 0.85rem;
    }
}

/* Task list items */
.member-task-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.member-task-item:last-child {
    border-bottom: none;
}

.member-task-item--overdue {
    border-left: 3px solid #dc2626;
    padding-left: 0.75rem;
}

.member-task-item__content {
    flex: 1;
    min-width: 0;
}

.member-task-item__text {
    font-size: 0.875rem;
    color: #374151;
    margin: 0;
    line-height: 1.4;
}

.member-task-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.member-task-item__due--overdue {
    color: #dc2626;
    font-weight: 600;
}

.member-task-item__actions {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    flex-shrink: 0;
}

.member-task-item__delete,
.member-task-item__complete {
    background: none;
    border: none;
    color: #d1d5db;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 0.9rem;
    line-height: 1;
    margin-top: 1px;
    transition: color 0.15s ease;
    flex-shrink: 0;
}

.member-task-item__delete:hover {
    color: #dc2626;
}

.member-task-item__complete:hover {
    color: #198754;
}

.member-task-item__complete:disabled {
    cursor: default;
    opacity: 0.5;
}

.member-task-item--completing {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.member-task-item--completing .member-task-item__text,
.member-task-item--completed .member-task-item__text {
    text-decoration: line-through;
}

.member-task-item--completed {
    opacity: 0.6;
}

/* #41171 / #41318 — completed-task history inside the Tasks card. #41171 first
   restored it behind a hidden "Show completed" disclosure; #41318 shows it inline
   and expanded by default (static heading, no toggle) so clubs see what's been
   actioned at a glance, like the old member profile.
   #41803 — increased margin-top so the border-top doesn't collide with the
   last outstanding task item's border-bottom (double-divider fix). */
.member-task-history {
    margin-top: 0.75rem;
    padding-top: 0.25rem;
}

.member-task-history__heading {
    padding: 0.5rem 0 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.member-task-history__list {
    border-top: 1px dashed #e5e7eb;
    margin-top: 0.25rem;
}

/* Add Task modal overrides (dashboard) */
#addTaskModal .modal-body > .row {
    flex-direction: column;
}

#addTaskModal .modal-body > .row > .col-md-7,
#addTaskModal .modal-body > .row > .col-md-5 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

#addTaskModal .modal-body > .row > .col-md-7 > .row:first-child {
    display: none;
}

#addTaskModal .modal-body .col-form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    padding-bottom: 0.25rem;
}

#addTaskModal .modal-body textarea.form-control {
    border-radius: var(--radius-md);
    border-color: #e5e7eb;
    font-size: 0.9rem;
    rows: 3;
    resize: vertical;
    min-height: 80px;
}

#addTaskModal .modal-body textarea.form-control:focus {
    border-color: #e8651a;
    box-shadow: 0 0 0 3px rgba(232, 101, 26, 0.08);
}

#addTaskModal .modal-body .form-control,
#addTaskModal .modal-body .form-select {
    border-radius: var(--radius-md);
    border-color: #e5e7eb;
    font-size: 0.9rem;
}

#addTaskModal .modal-body .form-control:focus,
#addTaskModal .modal-body .form-select:focus {
    border-color: #e8651a;
    box-shadow: 0 0 0 3px rgba(232, 101, 26, 0.08);
}

#addTaskModal .modal-body > .row > .col-md-5 > .row:last-child {
    display: none;
}

/* Profile offcanvas */
.member-profile-offcanvas {
    width: 500px !important;
    display: flex;
    flex-direction: column;
}

.member-profile-offcanvas .offcanvas-header {
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem 1.5rem;
    flex-shrink: 0;
}

.member-profile-offcanvas .offcanvas-body {
    padding: 1.5rem;
    flex: 1;
    overflow-y: auto;
}

.member-profile-offcanvas .offcanvas-footer {
    flex-shrink: 0;
}

.member-profile-offcanvas .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.25rem;
}

/* Alerts bar */
.member-dashboard-alerts {
    margin-bottom: 1rem;
}

.member-dashboard-alerts .alert {
    border-radius: 10px;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

/* Badge helpers for status in header */
.member-dashboard-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.member-dashboard-badge--active {
    background: rgba(22, 163, 74, 0.15);
    color: #4ade80;
}

.member-dashboard-badge--overdue {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
}

.member-dashboard-badge--frozen {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.member-dashboard-badge--expired {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
}

.member-dashboard-badge--prospect {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.member-dashboard-badge--cancelled {
    background: rgba(244, 63, 94, 0.15);
    color: #fb7185;
}

.member-dashboard-badge--role {
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
}

.member-dashboard-badge--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.member-dashboard-badge--danger {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    font-weight: 600;
    animation: pulse-danger 2s ease-in-out infinite;
    cursor: pointer;
}

.member-dashboard-badge--danger:hover {
    background: rgba(239, 68, 68, 0.35);
    color: #fecaca;
}

.member-dashboard-badge--highrisk {
    background: rgba(217, 119, 6, 0.85);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    animation: pulse-highrisk 2.4s ease-in-out infinite;
}
.member-dashboard-badge--highrisk:hover {
    background: #b45309;
    color: #fff;
}
@keyframes pulse-highrisk {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.5); }
    50% { box-shadow: 0 0 0 4px rgba(217, 119, 6, 0); }
}

@keyframes pulse-danger {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

/* Attendance chart container */
.member-attendance-chart {
    height: 140px;
    position: relative;
}

/* Activity empty state (dashboard card) */
.member-activity-empty {
    text-align: center;
    padding: 1.5rem 1rem;
}

.member-activity-empty__icon {
    font-size: 1.5rem;
    color: #d1d5db;
    margin-bottom: 0.5rem;
}

.member-activity-empty__text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.member-activity-empty__subtext {
    font-size: 0.78rem;
    color: #9ca3af;
    line-height: 1.4;
}

/* Activity empty state (quick view) */
.qv-activity-empty {
    text-align: center;
    padding: 1rem 0.75rem;
}

.qv-activity-empty__icon {
    font-size: 1.25rem;
    color: #d1d5db;
    margin-bottom: 0.35rem;
}

.qv-activity-empty__text {
    font-size: 0.78rem;
    color: #9ca3af;
}

/* Membership hero card */
/* Combined plan + billing card */
.member-plan-card {
    margin-bottom: 1.25rem;
}

.member-plan-card__main {
    /* Grid so the banner can span the full card height (rows 1+2) while the
       "View schedule & details" footer sits under the info+billing columns
       on the right. The previous flex-wrap layout pushed the footer below
       the banner, leaving the banner short and the right side gap-y. */
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 280px;
    background: #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s, transform 0.15s ease;
    cursor: pointer;
}

.member-plan-card__view-details {
    grid-column: 2 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    border-top: 1px solid #e5e7eb;
    transition: color 0.15s, background-color 0.15s;
}

.member-plan-card__main:hover .member-plan-card__view-details {
    color: #111827;
    background-color: rgba(0, 0, 0, 0.04);
}

.member-plan-card__main:last-child {
    margin-bottom: 0;
}

.member-plan-card__main:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

/* "+ Add another membership" — a second plan is uncommon, so this is a small,
   quiet secondary action rather than a full-width tile competing with the live
   plan. Shrinks to its content and sits unobtrusively under the card. */
.member-plan-card__add {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: auto;
    padding: 0.35rem 0.75rem;
    margin: 0.6rem 0 0;
    background: transparent;
    border: 1px dashed #d1d5db;
    border-radius: 999px;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.member-plan-card__add:hover,
.member-plan-card__add:focus-visible {
    border-color: var(--cui-nav-link-color, #4f46e5);
    color: var(--cui-nav-link-color, #4f46e5);
    background-color: rgba(79, 70, 229, 0.04);
    outline: none;
}

.member-plan-card__add:last-child {
    margin-bottom: 0;
}

.member-plan-card__add i {
    font-size: 0.75rem;
}

/* Overdue membership — danger hero treatment */
.member-plan-card__main--overdue {
    background: linear-gradient(135deg, #1c1017 0%, #2d1520 50%, #1e293b 100%);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
    border: none;
}

.member-plan-card__main--overdue .member-plan-card__info {
    border-right-color: rgba(255, 255, 255, 0.08);
}

.member-plan-card__main--overdue .member-plan-card__name {
    color: #ffffff;
}

.member-plan-card__main--overdue .member-plan-card__status--danger {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.member-plan-card__main--overdue .member-plan-card__meta {
    color: #94a3b8;
}

.member-plan-card__main--overdue .member-plan-card__meta i {
    opacity: 0.5;
}

.member-plan-card__main--overdue .member-plan-card__billing {
    background: transparent;
}

.member-plan-card__main--overdue .member-plan-card__billing-alert--danger {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.member-plan-card__main--overdue .member-plan-card__billing-amount {
    color: #f87171;
    font-size: 1.4rem;
}

.member-plan-card__main--overdue .member-plan-card__billing-sublabel {
    color: #fca5a5;
}

.member-plan-card__main--overdue .member-plan-card__billing-next {
    color: #94a3b8;
}

.member-plan-card__main--overdue .member-plan-card__pay-badge {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}

.member-plan-card__main--overdue .member-plan-card__pay-badge i {
    color: #94a3b8;
}

.member-plan-card__main--overdue .member-plan-card__billing-action {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.member-plan-card__main--overdue .member-plan-card__billing-action:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

.member-plan-card__main--overdue:hover {
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.25);
}

/* #39389 — keep "View schedule & details" link legible on the dark overdue card */
.member-plan-card__main--overdue .member-plan-card__view-details {
    color: #e2e8f0;
    border-top-color: rgba(255, 255, 255, 0.08);
}

.member-plan-card__main--overdue:hover .member-plan-card__view-details {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.06);
    filter: none;
}

/* Banner/image — spans rows 1-2 (info+billing on top row, view-details below)
   so the imagery covers the full card height instead of leaving a strip
   under it. */
.member-plan-card__banner {
    grid-column: 1;
    grid-row: 1 / 3;
    min-height: 120px;
    background-size: cover;
    background-position: center;
}

.member-plan-card__banner--gradient {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 2.5rem;
}

/* Plan info section */
.member-plan-card__info {
    flex: 1;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.375rem;
    min-width: 0;
    border-right: 1px solid #f3f4f6;
}

.member-plan-card__plan {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.member-plan-card__name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.member-plan-card__status {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.member-plan-card__status--success { background: #dcfce7; color: #15803d; }
.member-plan-card__status--danger { background: #fee2e2; color: #dc2626; }
.member-plan-card__status--info { background: #dbeafe; color: #1d4ed8; }
.member-plan-card__status--warning { background: #fef3c7; color: #92400e; }

.member-plan-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    font-size: 0.78rem;
    color: #6b7280;
}

.member-plan-card__meta i {
    width: 14px;
    text-align: center;
    opacity: 0.6;
}

.member-plan-card__manage {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    padding: 0;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4f46e5;
    cursor: pointer;
    transition: color 0.15s;
}

.member-plan-card__manage:hover {
    color: #3730a3;
}

.member-plan-card__manage i {
    font-size: 0.75rem;
    transition: transform 0.15s;
}

.member-plan-card__manage:hover i {
    transform: translateX(2px);
}

/* Billing section (right side of plan card) */
.member-plan-card__billing {
    width: 280px;
    flex-shrink: 0;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    background: #fafafa;
}

.member-plan-card__billing-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
}

.member-plan-card__billing-alert--ok {
    background: #f0fdf4;
    color: #15803d;
}

.member-plan-card__billing-alert--ok i {
    font-size: 1rem;
    color: #22c55e;
}

.member-plan-card__no-collection {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    background: #fef2f2;
    color: #991b1b;
}
.member-plan-card__no-collection i {
    font-size: 1rem;
    color: #dc2626;
}
.member-plan-card__billing-alert--danger {
    background: #fef2f2;
    color: #991b1b;
    flex-wrap: wrap;
}

/* "Due today" alert — softer than the red overdue alert. Used on day zero so a
   first-payment-due-today member doesn't visually look like a debtor. */
.member-plan-card__billing-alert--warning {
    background: #fffbeb;
    color: #92400e;
    flex-wrap: wrap;
}
.member-plan-card__billing-alert--warning .member-plan-card__billing-amount {
    color: #b45309;
}
.member-plan-card__billing-alert--warning .member-plan-card__billing-sublabel {
    color: #92400e;
}
.member-plan-card__billing-alert--warning .member-plan-card__billing-action {
    border-color: #fcd34d;
    color: #92400e;
}

.member-plan-card__billing-amount {
    font-size: 1.25rem;
    font-weight: 800;
    color: #dc2626;
}

.member-plan-card__billing-sublabel {
    font-size: 0.75rem;
    color: #991b1b;
    flex: 1;
}

/* #42382 — why it's overdue, next to the amount. Quieter than the figure (the money is still the
   headline) but readable, because this is the line that stops staff opening the schedule or
   ringing CS. Breaks to its own row so a long reason can't squash the Collect button. */
.member-plan-card__billing-reason {
    flex-basis: 100%;
    order: 10;
    font-size: 0.7rem;
    font-weight: 600;
    color: #991b1b;
    opacity: 0.85;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-plan-card__main--overdue .member-plan-card__billing-reason { color: #fca5a5; }

.member-plan-card__billing-action {
    background: none;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #dc2626;
    cursor: pointer;
    transition: all 0.15s;
}

.member-plan-card__billing-action:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}

.member-plan-card__billing-next {
    font-size: 0.78rem;
    color: #6b7280;
}

.member-plan-card__billing-next i {
    width: 14px;
    text-align: center;
    opacity: 0.5;
}

.member-plan-card__billing-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.member-plan-card__pay-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #374151;
}

.member-plan-card__pay-badge i {
    color: #22c55e;
    font-size: 0.75rem;
}

.member-plan-card__billing-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s;
}

.member-plan-card__billing-link:hover {
    color: #111827;
}

.member-plan-card__billing-link i {
    font-size: 0.75rem;
}

/* Billing side panel (for no-membership state) */
.member-plan-card__billing-side {
    width: 200px;
    flex-shrink: 0;
    padding: 1.5rem 1.25rem;
    background: #fafafa;
    border-left: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}

.member-plan-card__billing-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Empty state — dark hero treatment for prospects */
.member-plan-card__empty {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: 1.75rem 2rem;
    gap: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.member-plan-card__empty-visual {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(232, 101, 26, 0.15);
    border-radius: 14px;
    font-size: 1.4rem;
    color: #e8651a;
}

.member-plan-card__empty-content {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.member-plan-card__empty-content h5 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.35rem 0;
}

.member-plan-card__empty-content p {
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 0 0 0.85rem 0;
    max-width: 400px;
    line-height: 1.5;
}

.member-plan-card__empty .btn-primary {
    background: #e8651a;
    border-color: #e8651a;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(232, 101, 26, 0.3);
}

.member-plan-card__empty .btn-primary:hover {
    background: #d45a16;
    border-color: #d45a16;
    box-shadow: 0 4px 12px rgba(232, 101, 26, 0.4);
}

/* Billing sidebar within dark hero */
.member-plan-card__empty .member-plan-card__billing-side {
    background: transparent;
    border-left-color: rgba(255, 255, 255, 0.1);
    padding: 0 0 0 1.5rem;
}

.member-plan-card__empty .member-plan-card__billing-label {
    color: #94a3b8;
}

.member-plan-card__empty .member-plan-card__billing-link {
    color: #e8651a;
}

.member-plan-card__empty .member-plan-card__billing-link:hover {
    color: #f59e0b;
}

.member-plan-card__empty .text-muted {
    color: #64748b !important;
}

.member-plan-card__empty .member-plan-card__pay-badge {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}

/* Membership history (past/cancelled) */
.member-plan-card__history {
    margin-top: 0.75rem;
    text-align: center;
}

.member-plan-card__history--prominent {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 0.5rem;
}

.member-plan-card__history-notice {
    font-size: 0.78rem;
    font-weight: 500;
    color: #dc2626;
    background: #fef2f2;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.member-plan-card__history-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    margin-left: 0.25rem;
}

.member-plan-card__history-toggle {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.member-plan-card__history-toggle:hover {
    color: #1e293b;
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.member-plan-card__history-chevron {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.member-plan-card__history-toggle[aria-expanded="true"] .member-plan-card__history-chevron {
    transform: rotate(180deg);
}

.member-plan-card__history-list {
    margin-top: 0.5rem;
}

.member-plan-card__history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.member-plan-card__history-item:hover {
    background: #f8fafc;
}

.member-plan-card__history-item-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.member-plan-card__history-item-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: #334155;
}

.member-plan-card__history-item-status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
}

.member-plan-card__history-item-status--muted {
    background: #f1f5f9;
    color: #64748b;
}

.member-plan-card__history-item-status--info {
    background: #e0f2fe;
    color: #0369a1;
}

.member-plan-card__history-item-dates {
    font-size: 0.75rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.member-plan-card__history-item-dates i {
    font-size: 0.75rem;
}

/* Booking items in classes card */
.member-booking-item {
    display: flex;
    gap: 0.625rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f9fafb;
    align-items: center;
}

.member-booking-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.member-booking-item:first-child {
    padding-top: 0;
}

.member-booking-item__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    background: #dbeafe;
    color: #2563eb;
    flex-shrink: 0;
}

.member-booking-item__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.member-booking-item__name {
    font-size: 0.85rem;
    font-weight: 500;
    color: #111827;
}

.member-booking-item__time {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Award icon */
.member-award-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fef3c7;
    color: #d97706;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Integration badges */
.member-integration-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #f3f4f6;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    color: #374151;
}

/* Sales funnel pipeline */
.member-funnel-pipeline {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #7c3aed;
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.member-funnel-pipeline__header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.member-funnel-pipeline__header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.member-funnel-pipeline__header-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.member-funnel-pipeline__history-btn {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
}

.member-funnel-pipeline__history-btn:hover {
    color: #111827;
    border-color: #d1d5db;
    background: #f9fafb;
}

.member-funnel-pipeline__heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}

.member-funnel-pipeline__heading i {
    font-size: 0.85rem;
    color: #7c3aed;
}

.member-funnel-pipeline__subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.4;
}

.member-funnel-pipeline__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.member-funnel-pipeline__stages {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.member-funnel-stage {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: #f9fafb;
    font-size: 0.8rem;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.member-funnel-stage:hover {
    background: #fff;
    border-color: var(--stage-colour, #7c3aed);
    color: #111827;
    transform: translateY(-1px);
    outline: 2px solid var(--stage-colour, #7c3aed);
    outline-offset: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.member-funnel-stage:focus-visible {
    outline: 2px solid var(--stage-colour, #7c3aed);
    outline-offset: 2px;
}

.member-funnel-stage__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.member-funnel-stage__name {
    font-weight: 500;
}

.member-funnel-stage--active {
    background: var(--stage-colour, #7c3aed);
    border-color: var(--stage-colour, #7c3aed);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.member-funnel-stage--active .member-funnel-stage__dot {
    background: #fff !important; /* override inline stage colour on active pill */
}

.member-funnel-stage--active:hover {
    background: var(--stage-colour, #7c3aed);
    border-color: var(--stage-colour, #7c3aed);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.member-funnel-stage--past {
    background: #fff;
    border-color: var(--stage-colour, #7c3aed);
    color: #374151;
}

.member-funnel-pipeline__clear {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #6b7280;
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.member-funnel-pipeline__clear:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* Quick view funnel pipeline — matches .qv-section styling */
.qv-funnel {
    padding: 0.85rem 1.25rem;
    background: #fff;
    margin: 0.4rem 0.5rem;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid #e8eaed;
    border-left: 1px solid #e8eaed; /* override the purple left border from .member-funnel-pipeline */
}

.qv-funnel .member-funnel-pipeline__heading { font-size: 0.9rem; color: #9ca3af; }
.qv-funnel .member-funnel-pipeline__heading i { color: #9ca3af; }
.qv-funnel .member-funnel-pipeline__subtitle { font-size: 0.75rem; }
.qv-funnel .member-funnel-stage { font-size: 0.75rem; padding: 0.35rem 0.65rem; }
.qv-funnel .member-funnel-stage:hover { outline: none; }
.qv-funnel .member-funnel-stage:focus-visible { outline: none; }
.qv-funnel .member-funnel-pipeline__row { gap: 0.4rem; }
.qv-funnel .member-funnel-pipeline__stages { flex-wrap: nowrap; overflow-x: auto; padding: 0.35rem 0; }

/* Billing amount owed */
.member-billing-owed {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #fef2f2;
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
}

.member-billing-owed__amount {
    font-size: 1.125rem;
    font-weight: 700;
    color: #dc2626;
}

.member-billing-owed__label {
    font-size: 0.8rem;
    color: #991b1b;
}

.member-billing-next {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.85rem;
    color: #374151;
    margin-bottom: 0.5rem;
}

.member-billing-next i {
    color: #9ca3af;
    width: 16px;
    text-align: center;
}

/* Outstanding tasks callout */
.member-tasks-callout {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #fffbeb;
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #92400e;
}

.member-tasks-callout__count {
    font-weight: 700;
}

.member-last-message {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.member-last-message__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #3b82f6;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.member-last-message__content {
    min-width: 0;
    flex: 1;
}

.member-last-message__subject {
    font-size: 0.85rem;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-last-message__date {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Medium screens — tighten membership billing in narrower col */
@media (min-width: 992px) and (max-width: 1399px) {
    .member-plan-card__main {
        grid-template-columns: 90px minmax(0, 1fr) 220px;
    }

    .member-plan-card__billing {
        width: auto;
    }

    .member-plan-card__banner {
        min-height: 90px;
    }

    .member-plan-card__banner--gradient i {
        font-size: 1.5rem;
    }
}

/* Responsive */
@media (max-width: 991.98px) {
    .member-profile-offcanvas,
    .member-detail-offcanvas {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .member-dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem;
    }

    .member-dashboard-header__actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .member-stat-strip {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
    }

    .member-stat-strip__stats {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .member-stat-strip__item {
        flex: 0 0 calc(50% - 0.5rem);
        padding: 0.375rem 0.5rem;
    }

    .member-stat-strip__item--primary {
        flex: 0 0 calc(50% - 0.5rem);
    }

    .member-stat-strip__divider {
        display: none;
    }

    .member-stat-strip__value {
        font-size: 1rem;
    }

    .member-stat-strip__actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.375rem;
        width: 100%;
    }

    .member-funnel-pipeline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
    }

    .member-funnel-pipeline__stages {
        width: 100%;
    }

    .member-plan-card__main {
        grid-template-columns: 1fr;
    }

    .member-plan-card__banner {
        grid-column: 1;
        grid-row: auto;
        height: 80px;
        min-height: 80px;
    }

    .member-plan-card__info,
    .member-plan-card__billing,
    .member-plan-card__view-details {
        grid-column: 1;
    }

    .member-plan-card__info {
        border-right: none;
        border-bottom: 1px solid #f3f4f6;
    }

    .member-plan-card__billing {
        width: 100%;
    }

    .member-plan-card__empty {
        flex-direction: column;
        padding: 1.25rem;
        gap: 1rem;
    }

    .member-plan-card__empty-visual {
        width: 48px;
        height: 48px;
    }

    .member-plan-card__billing-side,
    .member-plan-card__empty .member-plan-card__billing-side {
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 1rem 0 0 0;
    }

    .member-actions-bar {
        gap: 0.375rem;
    }

    .member-action-pill {
        font-size: 0.75rem;
        padding: 0.35rem 0.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* Message Members Page                                                    */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Message type icons in history table */
.msg-type-icons {
    white-space: nowrap;
}
.msg-type-icons i {
    margin-right: 2px;
    font-size: 0.85rem;
}
.msg-type-icons .text-purple {
    color: #7c3aed;
}

/* Compose page - Consent cards */
.compose-consent-card {
    border: 2px solid var(--cui-border-color, #d8dbe0);
    border-radius: var(--radius-md);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    height: 100%;
}
.compose-consent-card:hover {
    border-color: var(--cui-primary, #321fdb);
    background: var(--cui-tertiary-bg, #f8f9fa);
}
.compose-consent-card--selected {
    border-color: var(--cui-primary, #321fdb);
    background: rgba(50, 31, 219, 0.05);
    box-shadow: 0 0 0 1px var(--cui-primary, #321fdb);
}
.compose-consent-card__icon {
    font-size: 1.5rem;
    color: var(--cui-primary, #321fdb);
    margin-bottom: 0.5rem;
}
.compose-consent-card__name {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}
.compose-consent-card__desc {
    font-size: 0.75rem;
    color: var(--cui-body-color-secondary, #6c757d);
}

/* Compose page - Message type selection */
.compose-message-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.compose-message-type {
    position: relative;
}
.compose-message-type input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.compose-message-type__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: 2px solid var(--cui-border-color, #d8dbe0);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 500;
    user-select: none;
}
.compose-message-type__label:hover {
    border-color: var(--cui-primary, #321fdb);
}
.compose-message-type input:checked + .compose-message-type__label {
    border-color: var(--cui-primary, #321fdb);
    background: rgba(50, 31, 219, 0.05);
    color: var(--cui-primary, #321fdb);
}
.compose-message-type__label i {
    font-size: 1.1rem;
}

/* Compose page - Preview panels */
.compose-preview {
    background: var(--cui-tertiary-bg, #f0f0f0);
    border-radius: var(--radius-md);
    padding: 1rem;
}
.compose-preview__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}
.compose-preview--sms {
    background: #e8f4fd;
}
.compose-preview__sms-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Compose page - Status pills (multi-select toggleable buttons) */
.compose-status-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.compose-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #495057;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.compose-status-pill:hover {
    background: #e9ecef;
    border-color: #ced4da;
}
.compose-status-pill.active {
    background: #212529;
    color: #fff;
    border-color: #212529;
}

/* Compose page - Step transitions */
.compose-step {
    animation: composeStepFadeIn 0.2s ease;
}
@keyframes composeStepFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Compose page - Sidebar recap */
.compose-sidebar-recap__count {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--cui-primary, #321fdb);
    line-height: 1;
}
.compose-sidebar-recap__label {
    font-size: 0.875rem;
    color: var(--cui-body-color-secondary, #6c757d);
    margin-top: 0.25rem;
}

/* #42426 — push eligibility. Informational when everyone's covered, amber when some are
   signed out, red when nobody will get it. Never blocks the send. */
.compose-push-eligibility {
    margin-top: 0.6rem;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.35;
    border: 1px solid transparent;
}

.compose-push-eligibility.is-info { background: #eef7ee; border-color: #cfe6cf; color: #2f6f3b; }
.compose-push-eligibility.is-partial { background: #fff8e6; border-color: #f3e0a8; color: #7a5c00; }
.compose-push-eligibility.is-warn { background: #fdeceb; border-color: #f5c2c0; color: #8a2420; }

.compose-push-eligibility__toggle { color: inherit; text-decoration: underline; white-space: nowrap; }
.compose-push-eligibility__toggle:hover { color: inherit; }

/* The names behind the number — scrolls rather than pushing the send button off screen. */
.compose-push-eligibility__list {
    list-style: none;
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid currentColor;
    max-height: 190px;
    overflow-y: auto;
}

.compose-push-eligibility__list li { padding: 2px 0; display: flex; align-items: center; gap: 6px; }
.compose-push-eligibility__list i { width: 14px; opacity: 0.7; }

.compose-push-eligibility__tag {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
    margin-left: auto;
}

/* #42426 — member profile: can push reach them? */
.member-push-state { font-size: 0.78rem; display: inline-flex; align-items: center; gap: 5px; }
.member-push-state--on { color: #2f6f3b; }
.member-push-state--off { color: var(--co-ink-mute, #6c757d); }

/* Compose page - Sidebar channel badges */
.compose-sidebar-channel-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cui-primary, #321fdb);
    background: rgba(50, 31, 219, 0.08);
    border-radius: var(--radius-lg);
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}
.compose-sidebar-channel-badge i {
    font-size: 0.75rem;
}

/* Compose page - Small pill variant (for gender etc in More Filters) */
.compose-status-pill--sm {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
}

/* Compose page - Delivery channel cards */
.compose-delivery-card {
    position: relative;
    border: 2px solid var(--cui-border-color, #d8dbe0);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
    height: 100%;
}
.compose-delivery-card:hover {
    border-color: var(--cui-primary, #321fdb);
    background: var(--cui-tertiary-bg, #f8f9fa);
}
.compose-delivery-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.compose-delivery-card input:checked ~ label {
    color: var(--cui-primary, #321fdb);
}
.compose-delivery-card:has(input:checked) {
    border-color: var(--cui-primary, #321fdb);
    background: rgba(50, 31, 219, 0.05);
    box-shadow: 0 0 0 1px var(--cui-primary, #321fdb);
}
.compose-delivery-card label {
    cursor: pointer;
    display: block;
    margin: 0;
}
.compose-delivery-card__icon {
    font-size: 1.5rem;
    color: var(--cui-primary, #321fdb);
    margin-bottom: 0.5rem;
}
.compose-delivery-card__name {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}
.compose-delivery-card__desc {
    font-size: 0.78rem;
    color: var(--cui-body-color-secondary, #6c757d);
    line-height: 1.35;
}

/* Compose page - Editor sections (email / sms blocks on compose step) */
.compose-editor-section {
    border: 1px solid var(--cui-border-color, #d8dbe0);
    border-radius: var(--radius-lg);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.compose-editor-section__header {
    background: var(--cui-tertiary-bg, #f8f9fa);
    padding: 0.625rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
    border-bottom: 1px solid var(--cui-border-color, #d8dbe0);
}
.compose-editor-section__body {
    padding: 1rem;
}

/* Compose wizard responsive */
@media (max-width: 991.98px) {
    .compose-status-pills {
        gap: 0.375rem;
    }
    .compose-status-pill {
        padding: 0.3rem 0.65rem;
        font-size: 0.75rem;
    }
    .compose-delivery-card {
        padding: 1rem;
    }
}

/* =============================================
   Membership Plan Summary — Overview Panel
   ============================================= */

.mps-overview {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.mps-overview .card-body {
    padding: 0;
}

/* ── Overview hero (image + stats side by side) ── */
.mps-overview-hero {
    display: flex;
}

.mps-overview-hero__image {
    position: relative;
    width: 260px;
    min-width: 260px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mps-overview-hero__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   Inbox / Message Center
   ============================================ */
.inbox-panels {
    display: flex;
    /* #41404 — use dvh (tracks the actually-visible viewport) so short laptop viewports /
       display scaling are handled.
       #41421 — no longer a hard cap: the section is at least one viewport tall but grows
       with a long conversation so the whole inbox page-scrolls down to the reply bar,
       instead of locking to the viewport and scrolling inside the reply box. flex-start
       stops the two columns stretching to each other's height. (Mobile re-fixes the
       height in the responsive block below.) */
    align-items: flex-start;
    min-height: calc(100dvh - 260px);
}

.inbox-list-panel {
    width: 400px;
    min-width: 300px;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
}
.inbox-resize-handle {
    width: 5px;
    cursor: col-resize;
    background: transparent;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    margin-left: -3px;
    margin-right: -2px;
}
.inbox-resize-handle:hover,
.inbox-resize-handle.dragging {
    background: var(--admin-club-color, #667eea);
    opacity: 0.4;
}

.inbox-list-scroll {
    flex: 1;
    overflow-y: auto;
}

.inbox-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background-color 0.15s;
}

.inbox-list-item:hover {
    background-color: #f9fafb;
}

.inbox-list-active {
    background-color: #f0f4ff;
    border-left: 3px solid var(--club-color, #667eea);
    padding-left: 9px;
}

.inbox-unread {
    background-color: #e5e7eb;
}
.inbox-unread.inbox-waiting {
    background-color: #fffbeb;
}

.inbox-unread .inbox-list-item-name {
    font-weight: 700;
}

.inbox-list-item-avatar {
    flex-shrink: 0;
}

.inbox-list-item-avatar__circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 0.78rem;
}

.inbox-member-bar__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.75rem;
    vertical-align: middle;
}

.inbox-list-item-content {
    flex: 1;
    min-width: 0;
}

.inbox-list-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2px;
}

.inbox-list-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-list-item-date {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
    margin-left: auto;
}

.inbox-list-item-preview {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background-color: #2563eb;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1;
}

.inbox-detail-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inbox-detail-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inbox-member-bar {
    background: #f9fafb;
    min-height: 0;
}

/* #41169 — the member name in the conversation header is the route to the
   profile, but it was styled as plain dark text so staff didn't realise it was
   clickable. Make it read as a link (club colour, hover underline, profile icon). */
.inbox-member-bar__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--club-colour, #4f46e5);
    text-decoration: none;
    cursor: pointer;
}

.inbox-member-bar__name:hover {
    color: var(--club-colour, #4f46e5);
    text-decoration: underline;
}

.inbox-member-bar__name-icon {
    font-size: 10px;
    opacity: 0.7;
    margin-left: 2px;
}

#inboxConversation {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* #41421 — desktop: let the open conversation grow past the viewport so the whole inbox
   page-scrolls down to the reply bar, while the message list keeps a generous fixed
   height with its own scroll. The convo-root / message-panel inline styles come from the
   shared _Conversation.cshtml (also used by the member-area full-height chat), so they're
   overridden here for the admin inbox only. */
@media (min-width: 768px) {
    .inbox-list-panel {
        height: calc(100dvh - 260px);
    }
    .inbox-detail-panel {
        overflow: visible;
    }
    #inboxConversation {
        overflow: visible;
    }
    #inboxConversation .convo-root {
        height: auto !important;
    }
    #inboxConversation #viewMessagePanel {
        flex: 0 0 auto !important;
        /* keep the message thread the generous height it had, scrolling within itself;
           the reply bar sits below at its natural height and the page scrolls to it */
        height: max(240px, calc((100dvh - 260px) * 0.55));
    }
}

/* Message type label in conversation list */
.inbox-list-item-type {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
}

.inbox-list-item-type i {
    margin-right: 2px;
}

/* ── Inbox Task Items ────────────────────────────── */

/* #38930: invisible sentinel inside the tasks list. IntersectionObserver in
   inbox.js watches it; when it scrolls into view (or within ~200px below the
   viewport) the next page of tasks is fetched and appended. Zero visual weight
   — it just needs DOM presence to be observable. */
.inbox-tasks-sentinel {
    height: 1px;
    width: 100%;
    visibility: hidden;
}

.inbox-task-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.inbox-task-item:last-child {
    border-bottom: none;
}

.inbox-task-item--overdue {
    border-left: 3px solid #dc2626;
    padding-left: 0.75rem;
}

.inbox-task-item__icon {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 1rem;
    color: #6b7280;
}

.inbox-task-item__icon .typeurgent { color: #dc2626; }
.inbox-task-item__icon .typehigh { color: #f59e0b; }
.inbox-task-item__icon .typenormal { color: #6b7280; }
.inbox-task-item__icon .typelow { color: #9ca3af; }

.inbox-task-item__content {
    flex: 1;
    min-width: 0;
}

.inbox-task-item__text {
    font-size: 0.875rem;
    color: #374151;
    text-decoration: none;
    line-height: 1.4;
    display: block;
}

.inbox-task-item__text:hover {
    color: #111827;
}

.inbox-task-item__text strong {
    font-weight: 600;
}

.inbox-task-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.inbox-task-item__due {
    color: #6b7280;
}

.inbox-task-item__due--overdue {
    color: #dc2626;
    font-weight: 600;
}

.inbox-task-item__assigned {
    color: #6b7280;
}

/* ── #40999 Multi-select task dismiss (Owner-only) ── */
.inbox-tasks-bulkbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0 0.75rem 0;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.inbox-tasks-bulkbar__selectall {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.85rem;
    color: #374151;
    cursor: pointer;
}

.inbox-tasks-bulkbar__selectall input {
    cursor: pointer;
}

.inbox-tasks-bulkbar__count {
    font-size: 0.8rem;
    color: #6b7280;
}

.inbox-tasks-bulkbar__actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.inbox-task-item__check {
    flex-shrink: 0;
    margin: 2px 0 0 0;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
}

.inbox-task-item__check input {
    cursor: pointer;
}

/* ── Inbox Notification Items ────────────────────── */
.inbox-notification-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.inbox-notification-item:last-child {
    border-bottom: none;
}

.inbox-notification-item--shortterm {
    background-color: #fffbeb;
    border-left: 3px solid #f59e0b;
    padding-left: 0.75rem;
    margin-left: -0.75rem;
    padding-right: 0.75rem;
}

.inbox-notification-item__content {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.5;
}

.inbox-notification-item__content a {
    color: #374151;
    text-decoration: none;
    font-weight: 600;
}

.inbox-notification-item__content a:hover {
    text-decoration: underline;
}

.inbox-notification-item__date {
    display: block;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 0.25rem;
}

.inbox-notification-item__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* #42532 — refresh icons spin exactly two full turns then stop. Previously the spin
   was tied to the request lifecycle (add fa-spin on click, remove in the completion
   callback), which left the icon spinning forever whenever the in-flight fetch was
   aborted — fetchTaskPage's error handler early-returns on 'abort' before firing the
   completion callbacks, so the one that removed fa-spin never ran. A fixed-iteration
   animation is decorative-only and can't get stuck. */
@keyframes cr-refresh-spin {
    to { transform: rotate(360deg); }
}

.cr-refresh-spin {
    animation: cr-refresh-spin 0.6s linear 2;
}

/* #42532 — date partition heading inside the tasks list (Overdue / Today / Tomorrow /
   This week / <Month> / No due date). Sticky so the group stays identifiable while
   scrolling a long list. */
.inbox-task-partition {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.4rem 0 0.3rem;
    margin-top: 0.35rem;
    background: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    border-bottom: 1px solid #f3f4f6;
}

.inbox-task-partition:first-child { margin-top: 0; }

/* #42532 — "N due beyond X months — Show" pill at the end of the Upcoming list. */
.inbox-tasks-beyond {
    display: flex;
    justify-content: center;
    padding: 0.75rem 0 0.25rem;
}

.inbox-tasks-beyond__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.inbox-tasks-beyond__btn:hover {
    background: #eef2ff;
    border-color: #a5b4fc;
    color: #3730a3;
}

.inbox-tasks-beyond__cta {
    font-weight: 700;
    text-decoration: underline;
}

/* #42532 (usability extra) — refined dismiss control. The old btn-neutral was a heavy
   grey slab repeated on every row, so the actions out-shouted the notification text
   they belong to. This is a quiet outline pill that only firms up on hover, letting
   the rows read as content first, actions second. Neutral rather than green because
   the icon is a cross — "clear this" — matching the Front Desk row dismiss. */
.inbox-notification-item__dismiss {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    color: #6b7280;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-pill, 999px);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.inbox-notification-item__dismiss:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #334155;
    text-decoration: none;
}

.inbox-notification-item__dismiss i { font-size: 0.7rem; }

/* ── Notification Category Accents ────────────── */
.inbox-notification-item--payment {
    border-left: 3px solid #dc2626;
    padding-left: 0.75rem;
}

.inbox-notification-item--new-member {
    border-left: 3px solid #10b981;
    padding-left: 0.75rem;
}

.inbox-notification-item--request {
    border-left: 3px solid #8b5cf6;
    padding-left: 0.75rem;
}

.inbox-notification-item--system {
    border-left: 3px solid #f59e0b;
    padding-left: 0.75rem;
}

/* #42400 — leading severity icon. Coloured to match the notification's own accent
   (the category left-border colour); important overrides to red. Glyph is chosen in
   JS: exclamation for important, bell for general. */
.inbox-notification-item__icon {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.5;
    margin-top: 0.05rem;
    color: #9ca3af; /* fallback for uncategorised, non-important rows */
}
.inbox-notification-item--payment    .inbox-notification-item__icon { color: #dc2626; }
.inbox-notification-item--new-member .inbox-notification-item__icon { color: #10b981; }
.inbox-notification-item--request    .inbox-notification-item__icon { color: #8b5cf6; }
.inbox-notification-item--system     .inbox-notification-item__icon { color: #f59e0b; }
/* Important last so it wins for cross-category cases (Terminal is a "request"). */
.inbox-notification-item--important  .inbox-notification-item__icon { color: #dc2626; }

/* Important rows get the red left accent regardless of category (Terminal is a
   "request", PaymentMethodRemoved has no category) so importance reads consistently. */
.inbox-notification-item--important {
    border-left: 3px solid #dc2626;
    padding-left: 0.75rem;
}

/* ── Task Alert Accents ──────────────────────── */
.inbox-task-item--alert:not(.inbox-task-item--overdue) {
    border-left: 3px solid #f59e0b;
    padding-left: 0.75rem;
}

.inbox-task-item--alert-expired:not(.inbox-task-item--overdue) {
    border-left: 3px solid #dc2626;
    padding-left: 0.75rem;
}

/* #42532 (clarity extra) — green line for tasks due today. Rows already carried red
   (overdue) and amber (membership alert) accents, so "due today" was the one urgent
   state with no visual marker — it looked identical to an undated task. Completing
   the set means the left edge alone tells you the deadline state. Deliberately the
   LOWEST precedence of the three: an overdue or alert row keeps its more urgent
   colour rather than being softened to green. */
.inbox-task-item--due-today:not(.inbox-task-item--overdue):not(.inbox-task-item--alert):not(.inbox-task-item--alert-expired) {
    border-left: 3px solid #16a34a;
    padding-left: 0.75rem;
}

/* Mobile responsive */
@media (max-width: 767.98px) {
    /* #41740 — on mobile the conversation thread collapsed to almost nothing: the
       desktop offset (260px) plus the reply bar left the flex:1 message thread with
       ~0px on a phone-height viewport. Give the panel near-full height using the
       dynamic viewport unit (handles the mobile address bar; vh fallback first),
       floor the thread so it can't be crushed, and cap the reply bar so a tall email
       composer can't crowd it out. */
    .inbox-panels {
        height: calc(100vh - 130px);
        height: calc(100dvh - 130px);
    }

    .inbox-detail-panel #viewMessagePanel {
        min-height: 160px;
    }

    .inbox-detail-panel #replyArea {
        max-height: 50%;
        overflow-y: auto;
    }

    .inbox-list-panel {
        width: 100% !important;
        min-width: 100%;
        /* list view keeps its own viewport-height scroll */
        height: calc(100vh - 260px);
    }

    .inbox-resize-handle {
        display: none;
    }

    .inbox-detail-panel {
        display: none;
        width: 100%;
    }

    .inbox-list-panel.inbox-mobile-hidden {
        display: none;
    }

    .inbox-detail-panel.inbox-mobile-visible {
        display: flex;
        /* let the opened conversation grow so the page scrolls to the reply bar */
        overflow: visible;
    }

    /* the message thread keeps a generous height with its own scroll; the reply bar sits
       below at natural height and the page scrolls to it. Overrides the inline
       height:100%/flex:1 from the shared _Conversation.cshtml for the open mobile thread. */
    .inbox-detail-panel.inbox-mobile-visible #inboxConversation {
        overflow: visible;
    }
    .inbox-detail-panel.inbox-mobile-visible .convo-root {
        height: auto !important;
    }
    .inbox-detail-panel.inbox-mobile-visible #viewMessagePanel {
        flex: 0 0 auto !important;
        height: max(240px, calc((100vh - 260px) * 0.55));
    }
}

/* ========================================
   Modern Dashboard Widgets
   ======================================== */

/* Prevent dashboard horizontal overflow */
#dashboard.grid-stack {
    overflow: hidden;
    /* Guarantee a drop target even when the grid has no children (blank canvas). */
    min-height: 240px;
}

/* Grid cell content — fill the grid-stack-item with 4px gap.
   Use !important to override any inline styles GridStack JS may set. */
#dashboard.grid-stack > .grid-stack-item > .grid-stack-item-content {
    top: 4px !important;
    right: 4px !important;
    bottom: 4px !important;
    left: 4px !important;
    width: auto !important;
    overflow: hidden;
}

/* Base dashboard card — clean white with subtle border and resting shadow.
   Shadow at rest gives tiles visible separation from the light page bg
   (#f2f2f2) so they don't read as white-on-white. */
.dash-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #d1d5db;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.dash-card:hover {
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

/* ---- Hero KPI Cards — clean white cards with colour used only as accent ---- */
.dash-hero {
    --dash-accent: #4f46e5;
    --dash-accent-tint: rgba(79, 70, 229, 0.1);
    border-radius: 14px;
    padding: clamp(0.7rem, 2.5%, 1.15rem);
    display: flex;
    align-items: center;
    gap: clamp(0.6rem, 2%, 1rem);
    height: 100%;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dash-hero:hover {
    border-color: #94a3b8;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

/* Accent strip on the left edge, colour is tonal */
.dash-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--dash-accent);
    opacity: 0.85;
}

.dash-hero--green  { --dash-accent: #16a34a; --dash-accent-tint: rgba(22, 163, 74, 0.1); }
.dash-hero--red    { --dash-accent: #dc2626; --dash-accent-tint: rgba(220, 38, 38, 0.1); }
.dash-hero--amber  { --dash-accent: #d97706; --dash-accent-tint: rgba(217, 119, 6, 0.1); }
.dash-hero--slate  { --dash-accent: #475569; --dash-accent-tint: rgba(71, 85, 105, 0.1); }
.dash-hero--teal   { --dash-accent: #0d9488; --dash-accent-tint: rgba(13, 148, 136, 0.1); }
.dash-hero--blue   { --dash-accent: #2563eb; --dash-accent-tint: rgba(37, 99, 235, 0.1); }
.dash-hero--orange { --dash-accent: #ea580c; --dash-accent-tint: rgba(234, 88, 12, 0.1); }
.dash-hero--purple { --dash-accent: #7c3aed; --dash-accent-tint: rgba(124, 58, 237, 0.1); }
.dash-hero--calm   { --dash-accent: #64748b; --dash-accent-tint: rgba(100, 116, 139, 0.08); }

.dash-hero__icon {
    width: clamp(36px, 4vw, 44px);
    height: clamp(36px, 4vw, 44px);
    border-radius: 10px;
    background: var(--dash-accent-tint);
    color: var(--dash-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    flex-shrink: 0;
}

.dash-hero__body { flex: 1; min-width: 0; }

.dash-hero__value {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 700;
    line-height: 1.05;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.dash-hero__label {
    font-size: clamp(0.7rem, 0.9vw, 0.82rem);
    font-weight: 500;
    color: #64748b;
    margin-top: 3px;
}

.dash-hero__detail {
    font-size: clamp(0.6rem, 0.8vw, 0.72rem);
    color: #94a3b8;
    margin-top: 2px;
}

/* Text-sized value for navigation/action cards (no numeric value, just a label) */
.dash-hero__value--text {
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    font-weight: 700;
    color: var(--dash-accent);
}

/* ---- Action button cards — clean white cards with tinted icon chip ---- */
.dash-action {
    --a-accent: #4f46e5;
    --a-accent-tint: rgba(79, 70, 229, 0.1);
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 2%, 0.85rem);
    padding: clamp(0.5rem, 2%, 1rem) clamp(0.6rem, 2.5%, 1.15rem);
    height: 100%;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    text-decoration: none;
}

.dash-action:hover {
    border-color: var(--a-accent);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
    color: #0f172a;
    text-decoration: none;
}

.dash-action--blue   { --a-accent: #2563eb; --a-accent-tint: rgba(37, 99, 235, 0.1); }
.dash-action--purple { --a-accent: #7c3aed; --a-accent-tint: rgba(124, 58, 237, 0.1); }
.dash-action--teal   { --a-accent: #0d9488; --a-accent-tint: rgba(13, 148, 136, 0.1); }
.dash-action--green  { --a-accent: #16a34a; --a-accent-tint: rgba(22, 163, 74, 0.1); }
.dash-action--orange { --a-accent: #ea580c; --a-accent-tint: rgba(234, 88, 12, 0.1); }

.dash-action__icon {
    width: clamp(36px, 4vw, 42px);
    height: clamp(36px, 4vw, 42px);
    border-radius: 10px;
    background: var(--a-accent-tint);
    color: var(--a-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.9rem, 1.3vw, 1.1rem);
    flex-shrink: 0;
}

.dash-action__label {
    font-weight: 600;
    font-size: clamp(0.82rem, 1vw, 0.92rem);
    color: #0f172a;
}

.dash-action__arrow {
    margin-left: auto;
    color: #cbd5e1;
    font-size: 0.75rem;
    transition: transform 0.15s ease, color 0.15s ease;
}

.dash-action:hover .dash-action__arrow {
    color: var(--a-accent);
    transform: translateX(3px);
}

/* Legacy nav classes (kept for DB-defined widgets) */
.dash-nav {
    text-align: center;
    padding: clamp(0.4rem, 2%, 1rem) 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.25rem, 1.5%, 0.5rem);
    height: 100%;
    text-decoration: none !important;
    color: inherit !important;
}
.dash-nav__icon {
    width: clamp(40px, 5vw, 56px);
    height: clamp(40px, 5vw, 56px);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease;
}
.dash-card:hover .dash-nav__icon {
    transform: scale(1.08);
}
.dash-nav__label {
    font-weight: 700;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    color: #374151;
    line-height: 1.2;
}

/* KPI stat cards */
.dash-kpi {
    padding: clamp(0.5rem, 2%, 1rem);
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1.5%, 0.75rem);
    height: 100%;
}
.dash-kpi__icon {
    width: clamp(30px, 3.5vw, 42px);
    height: clamp(30px, 3.5vw, 42px);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.8rem, 1vw, 1rem);
    flex-shrink: 0;
}
.dash-kpi__body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.dash-kpi__value {
    font-size: clamp(1.2rem, 2vw, 1.75rem);
    font-weight: 700;
    line-height: 1;
    color: #111827;
}
.dash-kpi__label {
    font-size: clamp(0.68rem, 0.85vw, 0.8rem);
    color: #6b7280;
    margin-top: 2px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-kpi__detail {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 1px;
}

/* Icon color variants — solid vibrant backgrounds with white icon */
.dash-icon--blue { background: linear-gradient(135deg, #3b82f6, #60a5fa); color: #fff; }
.dash-icon--green { background: linear-gradient(135deg, #16a34a, #4ade80); color: #fff; }
.dash-icon--red { background: linear-gradient(135deg, #dc2626, #f87171); color: #fff; }
.dash-icon--orange { background: linear-gradient(135deg, #e8651a, #fb923c); color: #fff; }
.dash-icon--purple { background: linear-gradient(135deg, #7c3aed, #a78bfa); color: #fff; }
.dash-icon--amber { background: linear-gradient(135deg, #d97706, #fbbf24); color: #fff; }
.dash-icon--teal { background: linear-gradient(135deg, #0d9488, #2dd4bf); color: #fff; }
.dash-icon--slate { background: linear-gradient(135deg, #475569, #94a3b8); color: #fff; }

/* KPI alert state — left accent border for attention items */
.dash-card--alert {
    border-left: 3px solid #ef4444;
}
.dash-card--warn {
    border-left: 3px solid #f59e0b;
}
.dash-card--good {
    border-left: 3px solid #22c55e;
}

/* Summary count cards (Tasks, Messages, Notifications) */
.dash-summary {
    padding: clamp(0.5rem, 2%, 1rem);
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1.5%, 0.75rem);
    height: 100%;
    text-decoration: none !important;
    color: inherit !important;
}
.dash-summary__icon {
    width: clamp(34px, 4vw, 48px);
    height: clamp(34px, 4vw, 48px);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.9rem, 1.1vw, 1.15rem);
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}
.dash-summary__body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.dash-summary__count {
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 700;
    line-height: 1;
    color: #111827;
}
.dash-summary__label {
    font-size: clamp(0.68rem, 0.85vw, 0.8rem);
    color: #6b7280;
    margin-top: 2px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-summary__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 6px;
}
.dash-summary__badge--warn {
    background: #fef2f2;
    color: #dc2626;
}
.dash-summary__badge--info {
    background: #eff6ff;
    color: #2563eb;
}

/* Graph widget cards — borderless header */
.dash-graph {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dash-graph__header {
    padding: 0.5rem 0.85rem 0.4rem;
    font-size: clamp(0.75rem, 0.9vw, 0.85rem);
    font-weight: 700;
    color: #374151;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.dash-graph__header i {
    color: #e8651a;
    margin-right: 6px;
}
.dash-graph__body {
    flex: 1;
    padding: 0.35rem;
    position: relative;
    min-height: 0;
    overflow: hidden;
}
.dash-graph__body canvas {
    width: 100% !important;
    height: 100% !important;
}
.dash-graph__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(255, 255, 255, 0.85);
}

/* Empty-state shown inside a dash-graph__body when the widget has no data
   yet (brand-new clubs). Replaces the canvas/grid so we don't render blank
   chart axes that read as broken. Sized to fit any widget cell. */
.dash-graph__empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem 1rem;
    gap: 0.35rem;
    color: #6b7280;
}
/* Variant for widgets that render the empty-state at template time inside a
   normal flow container (rather than being injected into a positioned graph
   body). Used by Sales Funnel Summary widgets. */
.dash-graph__empty-state--static {
    position: static;
    inset: auto;
}
.dash-graph__empty-state-icon {
    font-size: 1.6rem;
    color: #d1d5db;
    margin-bottom: 0.15rem;
    line-height: 1;
}
.dash-graph__empty-state-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;
}
.dash-graph__empty-state-text {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.4;
    max-width: 28ch;
}

/* #40518 — on mobile the dash graph cards size to a short fixed height and the
   empty-state copy (icon + headline + lead text) gets clipped by the body's
   overflow:hidden. On phones we drop the body's height clamp so the card
   grows to fit the empty state and the full description stays readable. */
@media screen and (max-width: 992px) {
    .dash-graph__body:has(> .dash-graph__empty-state) {
        overflow: visible;
        min-height: 160px;
    }
    .dash-graph__empty-state {
        position: static;
        inset: auto;
        height: 100%;
    }
}

/* #40519 — mobile-only Classes/Appointments/Waitlist switcher. On phones the
   diary sidebar (which holds the canonical radio toggle) sits behind the
   hamburger so members couldn't find appointments at all. These pills sit
   directly above the calendar list so the toggle is the first thing you see. */
.diary-mobile-views {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.diary-mobile-views__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 0.85rem;
    color: #374151;
    white-space: nowrap;
    cursor: pointer;
}
.diary-mobile-views__btn i {
    color: #6b7280;
}
.diary-mobile-views__btn--active {
    background: var(--club-colour, #6366f1);
    border-color: var(--club-colour, #6366f1);
    color: #fff;
}
.diary-mobile-views__btn--active i {
    color: #fff;
}

.dash-heatmap {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0.5rem;
}
.dash-heatmap__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 0.75rem;
    table-layout: fixed;
}
.dash-heatmap__table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    padding: 2px 0;
    background: transparent;
    border: none;
}
.dash-heatmap__table tbody th {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    text-align: right;
    padding-right: 6px;
    width: 34px;
    background: transparent;
    border: none;
}
.dash-heatmap__table td {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    padding: 4px 2px;
    border-radius: var(--radius-xs);
    cursor: default;
    min-width: 20px;
}
.dash-heatmap__table td.dash-heatmap__empty {
    background: #f9fafb;
    color: transparent;
}

.mps-overview-hero__initials {
    font-size: 2.5rem;
    font-weight: 700;
    color: #d1d5db;
    letter-spacing: 0.05em;
    user-select: none;
}

.mps-overview-hero__image .picture-card__featured-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 1;
}

.mps-overview-hero__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mps-overview-hero__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.mps-overview-hero__tagline {
    font-size: 0.8rem;
    color: #6b7280;
    font-style: italic;
}

@media (max-width: 767px) {
    .mps-overview-hero {
        flex-direction: column;
    }
    .mps-overview-hero__image {
        width: 100%;
        min-width: unset;
        height: 140px;
    }
}

/* ── Overview grid ── */
.mps-overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    flex: 1;
    align-content: start;
}

@media (min-width: 768px) {
    .mps-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mps-overview-group {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.8rem;
}

.mps-overview-group:last-child {
    border-bottom: none;
}

@media (min-width: 768px) {
    .mps-overview-group {
        border-right: 1px solid #f0f0f0;
    }
    .mps-overview-group:nth-child(2n) {
        border-right: none;
    }
    .mps-overview-group:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        border-right: none;
    }
}

.mps-overview-group__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9ca3af;
    font-weight: 600;
    white-space: nowrap;
    min-width: 70px;
}

.mps-overview-group__label i {
    color: #e8651a;
    width: 14px;
    text-align: center;
    margin-right: 3px;
    font-size: 0.75rem;
}

.mps-overview-group__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

/* ── Inline stat items ── */
.mps-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

.mps-stat__label {
    color: #64748b;
    font-weight: 400;
}

.mps-stat__value {
    color: #1e293b;
    font-weight: 600;
}

.mps-stat__value--intro {
    color: #e8651a;
}

.mps-stat--muted {
    color: #9ca3af;
    font-style: italic;
    font-weight: 400;
}

/* Flag-style stats (featured, image, promo) */
.mps-stat--flag {
    color: #64748b;
    font-weight: 500;
}

.mps-stat--flag i {
    color: #e8651a;
    font-size: 0.75rem;
}

/* Mini payment-method pills */
.mps-stat--pills {
    gap: 3px;
}

.mps-mp {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    font-size: 0.75rem;
    font-weight: 600;
}

.mps-mp--on {
    background: #dcfce7;
    color: #166534;
}

.mps-mp--off {
    background: #f1f5f9;
    color: #b0b8c4;
    text-decoration: line-through;
}

.mps-nav-heading {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin: 0 0 12px 2px;
}

.mps-nav-heading i {
    color: #e8651a;
    margin-right: 5px;
    font-size: 0.75rem;
}

/* =============================================
   Membership Plan Summary — Hero Nav Cards
   ============================================= */

.mps-nav-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) {
    .mps-nav-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mps-nav-card {
    display: flex;
    align-items: center;
    padding: 28px 28px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    gap: 16px;
}

.mps-nav-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    transform: translateY(-1px);
}

.mps-nav-card__icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: var(--club-colour, #6366f1);
    color: var(--club-colour-contrast, white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
}

.mps-nav-card:hover .mps-nav-card__icon {
    opacity: 0.85;
}

.mps-nav-card__icon i {
    color: inherit;
    font-size: 1.1rem;
}

.mps-nav-card__body {
    flex: 1;
    min-width: 0;
}

.mps-nav-card__title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #111827;
    line-height: 1.3;
}

.mps-nav-card__desc {
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.4;
    margin-top: 2px;
}

.mps-nav-card__arrow {
    color: var(--club-colour, #6366f1);
    font-size: 0.8rem;
    transition: opacity 0.15s ease, transform 0.15s ease;
    opacity: 0.5;
}

.mps-nav-card:hover .mps-nav-card__arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* Sessions widget — live check-in panel */
.dash-sessions {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dash-sessions__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.85rem;
    background: #1e293b;
    color: #fff;
    flex-shrink: 0;
}
.dash-sessions__title {
    font-size: clamp(0.75rem, 0.9vw, 0.85rem);
    font-weight: 700;
}
.dash-sessions__title i {
    margin-right: 6px;
    opacity: 0.8;
}
.dash-sessions__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.dash-sessions__actions a {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
    transition: color 0.15s;
}
.dash-sessions__actions a:hover {
    color: #fff;
}
.dash-sessions__stats {
    display: flex;
    gap: 0.75rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.75rem;
    color: #6b7280;
    background: #f8fafc;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}
.dash-sessions__stat {
    display: flex;
    align-items: center;
    gap: 4px;
}
.dash-sessions__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dash-sessions__dot--green { background: #22c55e; }
.dash-sessions__dot--blue { background: #3b82f6; }
.dash-sessions__dot--amber { background: #f59e0b; }
.dash-sessions__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.4rem;
    scrollbar-width: thin;
}
.dash-sessions .sessionList {
    border: none !important;
}
.dash-sessions__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.5rem;
    color: #9ca3af;
    font-size: 0.82rem;
}
.dash-sessions__empty i {
    font-size: 1.5rem;
    opacity: 0.5;
}
.dash-sessions__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.dash-sessions__member {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    transition: background 0.15s, box-shadow 0.15s;
    cursor: pointer;
    flex: 1 1 200px;
    min-width: 0;
    max-width: 100%;
}
.dash-sessions__member:hover {
    background: #f8fafc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.dash-sessions__member--alert {
    background: #fef2f2;
    border-color: #fecaca;
}
.dash-sessions__member--alert:hover {
    background: #fee2e2;
}
.dash-sessions__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.dash-sessions__info {
    flex: 1;
    min-width: 0;
}
.dash-sessions__name {
    font-weight: 600;
    font-size: 0.8rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-sessions__time {
    font-size: 0.75rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-sessions__time span {
    font-weight: 600;
}
/* #41553 — actual scan-in clock time per row (CCTV cross-reference) */
.dash-sessions__scanin {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}
.dash-sessions__scanin i {
    margin-right: 3px;
    font-weight: 400;
    color: #6b7280;
}
.dash-sessions__badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    line-height: 1.4;
}
.dash-sessions__badge--danger {
    background: #fee2e2;
    color: #dc2626;
}
.dash-sessions__badge--warning {
    background: #fef3c7;
    color: #d97706;
}
.dash-sessions__badge--highrisk {
    background: #d97706;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.dash-sessions__badge--highrisk i {
    margin-right: 3px;
}
.dash-sessions__time .arriving {
    color: #f59e0b;
    font-weight: 600;
}
.dash-sessions__time .inclub {
    color: #22c55e;
    font-weight: 600;
}
.dash-sessions__time .inclubactivity {
    color: #3b82f6;
    font-weight: 600;
}
.dash-sessions__member--alert .dash-sessions__time > span {
    color: #dc2626;
    font-weight: 600;
}
.dash-sessions__member--highrisk {
    background: #fffbeb;
    border-color: #fde68a;
}
.dash-sessions__member--highrisk:hover {
    background: #fef3c7;
}
.dash-sessions__highrisk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: #d97706;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* Live Sessions — member modal */
.swal-member-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0 16px;
}
.swal-member-card__photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.swal-member-card__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.swal-member-card__name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--club-colour);
}
.swal-member-card__duration {
    font-size: 0.9rem;
    color: var(--club-colour);
    opacity: 0.8;
}

/* Upcoming Classes widget */
.dash-classes {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dash-classes__header {
    padding: 0.5rem 0.85rem;
    font-size: clamp(0.75rem, 0.9vw, 0.85rem);
    font-weight: 700;
    color: #374151;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.dash-classes__header i {
    color: #e8651a;
    margin-right: 6px;
}
.dash-classes__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.4rem;
    scrollbar-width: thin;
}
.dash-classes__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.5rem;
    color: #9ca3af;
    font-size: 0.82rem;
}
.dash-classes__empty i {
    font-size: 1.5rem;
    opacity: 0.5;
}
.dash-class-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    border-left: 4px solid transparent;
    background: #f9fafb;
    margin-bottom: 0.4rem;
}
/* Traffic-light capacity tiles — same tints as settings-status-badge so
   the dashboard reads at a glance. */
.dash-class-item--full {
    background: #dcfce7;
    border-left-color: #22c55e;
}
.dash-class-item--low {
    background: #fee2e2;
    border-left-color: #ef4444;
}
.dash-class-item--ok {
    background: #fef3c7;
    border-left-color: #f59e0b;
}
.dash-class-item__name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #111827;
}.dash-class-item__waiting {
    font-size: 0.75rem;
    font-weight: 500;
    color: #9ca3af;
    margin-left: 6px;
}
.dash-class-item__detail {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
}
.dash-class-item__meta {
    text-align: right;
    flex-shrink: 0;
    margin-left: 1rem;
}
.dash-class-item__time {
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
}
.dash-class-item__count {
    font-size: 0.75rem;
    color: #6b7280;
}
.dash-class-item__action {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #e8651a;
    text-decoration: none;
    margin-top: 2px;
}
.dash-class-item__action:hover {
    text-decoration: underline;
}

/* Dashboard upgrade hero banner — dark slate matching style guide heroes */
.dash-upgrade-hero {
    background: linear-gradient(135deg, #1e293b, #334155);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.dash-upgrade-hero__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: rgba(232, 101, 26, 0.15);
    color: #e8651a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.dash-upgrade-hero__body {
    flex: 1;
    min-width: 0;
}
.dash-upgrade-hero__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}
.dash-upgrade-hero__desc {
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.4;
}
.dash-upgrade-hero__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.25rem;
    background: linear-gradient(135deg, #e8651a, #f06522);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.dash-upgrade-hero__cta:hover {
    box-shadow: 0 4px 16px rgba(232, 101, 26, 0.35);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

/* ── Widget Picker Modal ───────────────────── */
.dash-widget-picker__group { margin-bottom: 2rem; }
.dash-widget-picker__group-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border-radius: var(--radius-md);
    border-left: 4px solid #6366f1;
}
.dash-widget-picker__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    overflow: hidden;
}
@media (max-width: 768px) {
    .dash-widget-picker__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .dash-widget-picker__grid { grid-template-columns: 1fr; }
}
.dash-widget-picker__card {
    display: block;
    padding: 0;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
    text-align: left;
    width: 100%;
    max-height: 120px;
    overflow: hidden;
}
.dash-widget-picker__card:hover:not([disabled]) {
    border-color: #a5b4fc;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
}
.dash-widget-picker__card[disabled] {
    display: none;
}
/* Hero KPI cards — no border, gradient fills the card */
.dash-widget-picker__card--hero {
    border: none;
    background: transparent;
}
.dash-widget-picker__card--hero .dash-hero {
    height: 100%;
    pointer-events: none;
}
/* Action button cards — borderless, disable inner hover */
.dash-widget-picker__card--action {
    border: none;
    background: transparent;
}
.dash-widget-picker__card--action .dash-action {
    pointer-events: none;
}
.dash-widget-picker__card--action .dash-action::before,
.dash-widget-picker__card--action .dash-action::after { display: none; }
/* Chart / graph preview cards */
.dash-widget-picker__card--chart {
    max-height: 130px;
}
.dash-widget-picker__card--chart .dash-graph {
    pointer-events: none;
    height: 100%;
}
/* Neutralise inner .dash-card borders when inside picker (partials render their own wrappers) */
.dash-widget-picker__card .dash-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    height: auto;
}
.dash-widget-picker__card .dash-card:hover {
    box-shadow: none;
    transform: none;
}
/* Inner widgets: disable hover effects and pointer events inside picker */
.dash-widget-picker__card .dash-hero { border-radius: 14px; pointer-events: none; }
.dash-widget-picker__card .dash-hero:hover { box-shadow: none; transform: none; }
.dash-widget-picker__card .dash-summary,
.dash-widget-picker__card .dash-nav,
.dash-widget-picker__card .dash-graph {
    pointer-events: none;
}
.dash-widget-picker__card .dash-summary { padding: 0.75rem; }
.dash-widget-picker__card .dash-nav { padding: 0.75rem; height: 100%; }
/* SVG chart preview for graph widget cards */
.dash-widget-picker__chart-preview {
    display: flex;
    align-items: flex-end;
    padding: 0.25rem 0.5rem 0;
    min-height: 50px;
    color: #6366f1;
}
.dash-widget-picker__chart-preview svg {
    width: 100%;
    height: 50px;
}
/* Colour variants for chart SVG previews */
.dash-widget-picker__chart-preview--teal { color: #14b8a6; }
.dash-widget-picker__chart-preview--purple { color: #8b5cf6; }
.dash-widget-picker__chart-preview--green { color: #22c55e; }
.dash-widget-picker__chart-preview--blue { color: #6366f1; }
.dash-widget-picker__chart-preview--amber { color: #f59e0b; }
.dash-widget-picker__chart-preview--slate { color: #64748b; }
.dash-widget-picker__chart-preview--red { color: #ef4444; }
.dash-widget-picker__chart-preview--orange { color: #f97316; }
/* Static icon card (for widgets that can't be rendered or charted) */
.dash-widget-picker__static {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem 0.75rem;
    height: 100%;
    min-height: 90px;
}
.dash-widget-picker__static-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 0.5rem;
}
.dash-widget-picker__static-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}
.dash-widget-picker__static-desc {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.3;
    margin-top: 0.15rem;
}

/* Unified widget library card — every widget renders as the same shape. */
.dash-lib-card {
    display: flex;
    flex-direction: column;
    max-height: none;
    min-height: 96px;
    padding: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dash-lib-card:hover {
    transform: translateY(-2px);
    border-color: #a5b4fc;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.15);
}

.dash-lib-card--chart {
    min-height: 132px;
}

.dash-lib-card__chart {
    height: 48px;
    padding: 6px 10px 0 10px;
    display: flex;
    align-items: flex-end;
    color: #6366f1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.04) 0%, rgba(99, 102, 241, 0) 100%);
}

.dash-lib-card__chart svg {
    width: 100%;
    height: 42px;
}

.dash-lib-card__body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px 12px 12px;
    flex: 1;
}

.dash-lib-card__icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.dash-lib-card__text {
    flex: 1;
    min-width: 0;
}

.dash-lib-card__title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.dash-lib-card__desc {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.dash-lib-card[disabled] {
    opacity: 0.4;
    pointer-events: none;
}

/* Dashboard tab bar refinements */
#dashboardTabs .nav-link {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-md);
}
#dashboardTabs .nav-link.active {
    font-weight: 600;
}
.dashboard-actions {
    opacity: 0;
    transition: opacity 0.15s;
}
#dashboardTabs .nav-link:hover .dashboard-actions {
    opacity: 1;
}

/* Time period selector refinements */
#timePeriodSelector .btn {
    font-size: 0.78rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-sm);
}

/* Fix size chain: grid-stack-item-content → .h-100 → a.widgetAction → card/dash-card */
.grid-stack-item-content > .h-100 {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/* Child selector so we only target the OUTER widgetAction wrapper, not the inner KPI report link */
.grid-stack-item-content > .h-100 > .widgetAction {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

@media (max-width: 768px) {
    .dash-hero { padding: 0.5rem; }
    .dash-hero__value { font-size: 1.3rem; }
    .dash-hero__icon { width: 32px; height: 32px; font-size: 0.9rem; }
    .dash-kpi { padding: 0.5rem; }
    .dash-kpi__value { font-size: 1.2rem; }
    .dash-kpi__icon { width: 28px; height: 28px; font-size: 0.8rem; }
    .dash-action__icon { width: 32px; height: 32px; font-size: 0.85rem; }
    .dash-action__label { font-size: 0.75rem; }
    .dash-action__arrow { display: none; }
    .dash-nav__icon { width: 34px; height: 34px; font-size: 0.9rem; }
    .dash-nav__label { font-size: 0.75rem; }
    .dash-summary__icon { width: 30px; height: 30px; font-size: 0.85rem; }
    .dash-summary__count { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════
   SCHEDULE WIZARD (sw-*) & SCHEDULE VIEW (sch-*)
   ═══════════════════════════════════════════════════════ */

/* ── Wizard Container & Steps ── */
.sw-wizard {
    padding: 0 0.25rem;
}
.sw-step {
    display: none;
    animation: swFadeIn 0.25s ease;
}
.sw-step--active {
    display: block;
}
@keyframes swFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Progress Indicator ── */
.sw-progress {
    margin-bottom: 1.25rem;
    padding: 0 1rem;
}
.sw-progress-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.sw-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}
.sw-progress-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}
.sw-progress-step.active .sw-progress-circle {
    background: var(--admin-club-color, #667eea);
    color: #fff;
}
.sw-progress-step.completed .sw-progress-circle {
    background: #22c55e;
    color: #fff;
}
.sw-progress-label {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.4rem;
    text-align: center;
    white-space: nowrap;
}
.sw-progress-step.active .sw-progress-label {
    color: var(--admin-club-color, #667eea);
    font-weight: 600;
}
.sw-progress-step.completed .sw-progress-label {
    color: #22c55e;
    font-weight: 500;
}
.sw-progress-line {
    width: 36px;
    height: 3px;
    background: #e5e7eb;
    margin: 0 0.25rem;
    margin-bottom: 1.25rem;
    border-radius: 2px;
    transition: background 0.2s ease;
}
.sw-progress-line.completed {
    background: #22c55e;
}
.sw-progress-step.clickable {
    cursor: pointer;
}
.sw-progress-step.clickable:hover .sw-progress-circle {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* ── Template Cards (hero choice) ── */
.sw-template-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0;
}
.sw-template-card {
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 1.15rem 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    min-height: 80px;
}
.sw-template-card:hover {
    border-color: var(--admin-club-color, #667eea);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.sw-template-card.selected {
    border-color: var(--admin-club-color, #667eea);
    background: rgba(102, 126, 234, 0.04);
}
.sw-template-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.sw-template-icon i {
    font-size: 1.15rem;
    color: #6b7280;
    transition: color 0.2s ease;
}
.sw-template-card.selected .sw-template-icon {
    background: var(--admin-club-color, #667eea);
}
.sw-template-card.selected .sw-template-icon i {
    color: #fff;
}
.sw-template-content {
    flex: 1;
    min-width: 0;
}
.sw-template-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.2rem;
}
.sw-template-desc {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}
.sw-template-check {
    color: var(--admin-club-color, #667eea);
    font-size: 1.15rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}
.sw-template-card.selected .sw-template-check {
    opacity: 1;
}

/* ── Step Header ── */
.sw-step-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: #1e293b;
    margin-bottom: 0.35rem;
}
.sw-step-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1.25rem;
}

.sw-step-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Form Fields (wizard context) ── */
.sw-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.sw-field-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.sw-field-row > * {
    flex: 1;
    min-width: 160px;
}
.sw-field {
    display: flex;
    flex-direction: column;
}
.sw-field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.3rem;
}
.sw-field label .text-muted {
    font-weight: 400;
}
.sw-field .form-select,
.sw-field .form-control {
    font-size: 0.85rem;
}
.sw-field .is-invalid {
    border-color: #ef4444;
}
.sw-field .invalid-feedback {
    display: block;
    font-size: 0.75rem;
    color: #ef4444;
    margin-top: 0.2rem;
}
.sw-field__hint-link {
    font-size: 0.75rem;
    margin-top: 0.35rem;
    color: #6366f1;
    text-decoration: none;
}
.sw-field__hint-link:hover {
    text-decoration: underline;
}

/* ── Day-of-Week Toggle Pills ── */
.sw-dow-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.sw-dow-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 2px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.sw-dow-toggle:hover {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.05);
}
.sw-dow-toggle.active {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
}
.sw-dow-error {
    font-size: 0.75rem;
    color: #ef4444;
    margin-top: 0.35rem;
    display: none;
}
.sw-dow-error.show {
    display: block;
}

/* ── Schedule Ends Options ── */
.sch-ends-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.sch-ends-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #374151;
}

.sch-ends-option .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.sch-ends-label {
    min-width: 42px;
}

.sch-ends-option .form-control {
    font-size: 0.875rem;
}

.sch-ends-suffix {
    font-size: 0.82rem;
    color: #6b7280;
}

/* ── Capacity Summary ── */
.sch-capacity__content {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.sch-capacity__ring-wrap {
    position: relative;
    flex-shrink: 0;
}
.sch-capacity__ring-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}
.sch-capacity__ring-fill--green { stroke: #22c55e; }
.sch-capacity__ring-fill--amber { stroke: #f59e0b; }
.sch-capacity__ring-fill--red { stroke: #ef4444; }
.sch-capacity__stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.sch-capacity__stat-value {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e293b;
}
.sch-capacity__stat-label {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
}
.sch-capacity__content--stacked {
    flex-direction: column;
    text-align: center;
}
.sch-capacity__content--stacked .sch-capacity__stats {
    flex-direction: row;
    gap: 1.25rem;
    justify-content: center;
}
.sch-capacity__content--stacked .sch-capacity__stat {
    text-align: center;
}

/* ── Peak vs Quiet ── */
.sch-peak-quiet {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.sch-peak-quiet__row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    background: #f8fafc;
}
.sch-peak-quiet__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.sch-peak-quiet__row--peak .sch-peak-quiet__icon {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}
.sch-peak-quiet__row--quiet .sch-peak-quiet__icon {
    background: rgba(239, 68, 68, 0.10);
    color: #dc2626;
}
.sch-peak-quiet__info {
    flex: 1;
    min-width: 0;
}
.sch-peak-quiet__value {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e293b;
}
.sch-peak-quiet__label {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
}
.sch-peak-quiet__tag {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.sch-peak-quiet__tag--peak {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}
.sch-peak-quiet__tag--quiet {
    background: rgba(239, 68, 68, 0.10);
    color: #dc2626;
}

/* ── Schedule Metrics Filter Toolbar ── */
.sch-metrics-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}
.sch-metrics-toolbar__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.sch-metrics-filter {
    display: flex;
    gap: 0;
    background: #f3f4f6;
    border-radius: 6px;
    padding: 2px;
}
.sch-metrics-filter__btn {
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.sch-metrics-filter__btn:hover {
    color: #374151;
    background: rgba(255, 255, 255, 0.6);
}
.sch-metrics-filter__btn--active {
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.sch-metrics-filter__btn--active:hover {
    background: #fff;
    color: #111827;
}
[data-metric-target] {
    transition: opacity 0.15s ease;
}
.sch-metric--loading {
    opacity: 0.4;
    pointer-events: none;
}
.sch-attendance__period {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 500;
}

/* ── Wizard Schedule Pattern ── */
.sw-pattern-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.75rem;
}
.sw-pattern-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.sw-pattern-row > label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
}
.sw-ends-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sw-ends-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #374151;
}
.sw-ends-option input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
}
.sw-ends-option label {
    font-weight: 400;
    min-width: 42px;
    margin: 0;
}

/* ── Summary Sentence ── */
.sw-summary {
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    font-size: 0.82rem;
    color: #15803d;
    margin-top: 0.75rem;
    line-height: 1.5;
}
.sw-summary i {
    margin-right: 0.35rem;
}

/* ── Review Card ── */
.sw-review-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.sw-review-card__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.sw-review-card__title i {
    color: var(--admin-club-color, #667eea);
}
.sw-review-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.3rem 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.82rem;
}
.sw-review-row:last-child {
    border-bottom: none;
}
.sw-review-row__label {
    color: #64748b;
    font-weight: 500;
}
.sw-review-row__value {
    color: #1e293b;
    font-weight: 600;
    text-align: right;
}

/* ── Review Dates Preview ── */
.sw-review-dates {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
}
.sw-review-dates__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 0.4rem;
}
.sw-review-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.8rem;
    color: #374151;
}
.sw-review-date i {
    color: #22c55e;
    font-size: 0.75rem;
}

/* ── Wizard Navigation ── */
.sw-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid #e5e7eb;
}
.sw-nav-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: #64748b;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    transition: all 0.15s;
}
.sw-nav-back:hover {
    color: #1e293b;
    background: #f3f4f6;
}
.sw-nav-back i {
    font-size: 0.75rem;
}
.sw-nav-next {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: var(--admin-club-color, #667eea);
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    cursor: pointer;
    transition: filter 0.15s;
}
.sw-nav-next:hover {
    filter: brightness(0.9);
}
.sw-nav-next i {
    font-size: 0.75rem;
}
.sw-nav-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.sw-nav-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: #22c55e;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: filter 0.15s;
}
.sw-nav-submit:hover {
    filter: brightness(0.92);
}
.sw-nav-submit i {
    font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════
   SCHEDULE VIEW (sch-*) — Edit schedule redesign
   ═══════════════════════════════════════════════════════ */

/* ── Schedule Hero ── */
.sch-hero {
    padding: 1rem 1.25rem 0.85rem;
    border-bottom: 1px solid #e2e8f0;
}
.sch-hero__status-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}
.sch-hero__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}
.sch-hero__dot--deleted {
    background: #6b7280;
    box-shadow: none;
}
.sch-hero__freq {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
}
.sch-hero__class-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.sch-hero__strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding-top: 0.65rem;
    border-top: 1px solid #e2e8f0;
}
.sch-hero__strip-item {
    text-align: center;
}
.sch-hero__strip-value {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
}
.sch-hero__strip-label {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.sch-hero__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.6rem;
    margin-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
}
.sch-hero__edit-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #64748b;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.15s;
    text-decoration: none;
}
.sch-hero__edit-link:hover {
    color: var(--admin-club-color, #667eea);
    text-decoration: none;
}
.sch-hero__edit-link i {
    font-size: 0.75rem;
    transition: transform 0.2s;
}
.sch-hero__deleted-banner {
    font-size: 0.82rem;
    color: #dc2626;
    background: #fef2f2;
    border-radius: 6px;
    padding: 0.4rem 0.65rem;
    margin-bottom: 0.5rem;
}

/* ── Schedule Edit Section ── */
.sch-edit {
    padding: 1rem 1.25rem;
}
.sch-edit-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 2rem;
    margin-bottom: 1rem;
}
.sch-edit-fields .cls-field {
    margin-bottom: 0;
}

/* ── Bulk Actions Card ── */
.sch-bulk-card {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-top: 0.75rem;
}
.sch-bulk-card__title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.sch-bulk-card__title i {
    color: #f59e0b;
}
.sch-bulk-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.35rem 0;
}
.sch-bulk-option input[type="checkbox"] {
    margin-top: 0.15rem;
    flex-shrink: 0;
}
.sch-bulk-option__text {
    font-size: 0.82rem;
    color: #374151;
}
.sch-bulk-option__text strong {
    font-weight: 600;
}
.sch-bulk-option__desc {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.1rem;
}
.sch-bulk-warning {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: #dc2626;
    background: #fef2f2;
    border-radius: 6px;
    padding: 0.45rem 0.65rem;
    margin-top: 0.5rem;
}
.sch-bulk-warning i {
    flex-shrink: 0;
}

/* ── Schedule Future List ── */
.sch-future-item--deleted {
    opacity: 0.45;
}
.sch-future-item--deleted .cls-future-item__day {
    text-decoration: line-through;
}
.sch-future-item--deleted .cls-future-item__time {
    text-decoration: line-through;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .sw-template-cards {
        max-width: 100%;
    }
    .sw-field-row {
        flex-direction: column;
    }
    .sw-field-row > * {
        min-width: 100%;
    }
    .sw-nav {
        gap: 0.5rem;
    }
    .sw-progress-label {
        font-size: 0.75rem;
    }
    .sw-progress-line {
        width: 24px;
    }
    .sw-progress-circle {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    .sch-hero__strip {
        gap: 0.75rem;
    }
    .sch-edit-fields {
        gap: 0.15rem 1rem;
    }
}

/* ── Schedule List (Manage Schedules panel) ── */
.sch-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.sch-list__day-group {
    display: flex;
    flex-direction: column;
}
.sch-list__day-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    padding: 0 0 0.4rem 0.25rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0.25rem;
}
.sch-list__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}
.sch-list__item:hover {
    background: #f3f4f6;
    color: inherit;
    text-decoration: none;
}
.sch-list__colour {
    width: 4px;
    min-height: 32px;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
    align-self: stretch;
}
.sch-list__info {
    flex: 1;
    min-width: 0;
}
.sch-list__name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sch-list__meta {
    display: flex;
    gap: 1rem;
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 0.1rem;
}
.sch-list__meta i {
    margin-right: 0.25rem;
    opacity: 0.6;
}
.sch-list__arrow {
    color: #cbd5e1;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: color 0.12s;
}
.sch-list__item:hover .sch-list__arrow {
    color: #64748b;
}

/* ── Schedule Dashboard (day-tab layout) ── */
.sch-dash {
    padding: 1rem 1.25rem;
}
.sch-dash__empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
}
.sch-dash__empty i {
    margin-bottom: 0.75rem;
    opacity: 0.4;
}
.sch-dash__empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
}
.sch-dash__empty-desc {
    font-size: 0.85rem;
    margin-top: 0.25rem;
}
.sch-dash__tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 1rem;
}
.sch-dash__tab {
    flex: 1;
    text-align: center;
    padding: 0.5rem 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.sch-dash__tab:hover {
    color: #374151;
}
.sch-dash__tab--active {
    color: var(--admin-club-color, #667eea);
    border-bottom-color: var(--admin-club-color, #667eea);
}
.sch-dash__tab-badge {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    border-radius: 9px;
    background: #e5e7eb;
    color: #374151;
    margin-left: 0.2rem;
}
.sch-dash__tab--active .sch-dash__tab-badge {
    background: var(--admin-club-color, #667eea);
    color: #fff;
}
.sch-dash__panel {
    display: none;
}
.sch-dash__panel--active {
    display: block;
}
.sch-dash__day-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #9ca3af;
    font-size: 0.88rem;
}
.sch-dash__day-empty i {
    margin-right: 0.35rem;
}
.sch-dash__card-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sch-dash__card-schedule {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
}
.sch-dash__card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.12s, border-color 0.12s;
}
.sch-dash__card:hover {
    border-color: #d1d5db;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    color: inherit;
    text-decoration: none;
}
.sch-dash__card-colour {
    width: 4px;
    min-height: 36px;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
    align-self: stretch;
}
.sch-dash__card-body {
    flex: 1;
    min-width: 0;
}
.sch-dash__card-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.sch-dash__card-time {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 0.1rem;
}
.sch-dash__card-time i {
    margin-right: 0.2rem;
    opacity: 0.6;
}
.sch-dash__card-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.3rem;
}
.sch-dash__stat {
    font-size: 0.75rem;
    color: #6b7280;
}
.sch-dash__stat i {
    margin-right: 0.2rem;
    opacity: 0.5;
}
.sch-dash__trend {
    font-size: 0.75rem;
    font-weight: 700;
}
.sch-dash__trend--up { color: #16a34a; }
.sch-dash__trend--down { color: #dc2626; }
.sch-dash__trend--flat { color: #9ca3af; }
.sch-dash__card-arrow {
    color: #cbd5e1;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: color 0.12s;
}
.sch-dash__card:hover .sch-dash__card-arrow {
    color: #64748b;
}

/* ── Schedule Regulars ── */
#schRegularsCard {
    overflow: visible;
    align-self: start;
}
#schRegularsCard > .cls-view-card__header {
    border-radius: 10px 10px 0 0;
}
#schRegularsCard > .cls-book-action {
    border-radius: 0 0 10px 10px;
}
#schRegularsContainer {
    padding: 0;
}
.sch-regular-list .cls-attendee {
    padding: 0.55rem 0.85rem;
}

/* ── Schedule Attendance ── */
.sch-attendance__empty {
    text-align: center;
    padding: 1.25rem 0.85rem;
    color: #9ca3af;
    font-size: 0.82rem;
}
.sch-attendance__empty i {
    margin-right: 0.3rem;
}
.sch-attendance__summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.sch-attendance__avg {
    font-size: 0.88rem;
    font-weight: 600;
    color: #111827;
}
.sch-attendance__trend {
    font-size: 0.78rem;
    font-weight: 600;
}
.sch-attendance__trend--up { color: #16a34a; }
.sch-attendance__trend--down { color: #dc2626; }
.sch-attendance__trend--flat { color: #9ca3af; }
.sch-attendance__bars {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    min-height: 60px;
    padding-bottom: 1.8rem;
    position: relative;
    overflow-x: auto;
}
.sch-bar-tooltip {
    position: fixed;
    background: #1f2937;
    color: #fff;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.1s ease;
}
.sch-bar-tooltip--visible {
    opacity: 1;
}
.sch-attendance__bar-wrap {
    flex: 1 0 18px;
    min-width: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}
.sch-attendance__bar {
    width: 100%;
    min-height: 2px;
    border-radius: var(--radius-xs) 3px 0 0;
    transition: height 0.3s;
}
.sch-attendance__bar--green { background: #22c55e; }
.sch-attendance__bar--amber { background: #f59e0b; }
.sch-attendance__bar--red { background: #ef4444; }
.sch-attendance__bar-label {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.2rem;
    white-space: nowrap;
    transform: rotate(-45deg);
    transform-origin: center top;
}

/* ── #38373: future / upcoming variants ──────────────────────────────
   Forward-looking bars render with a dashed top edge and reduced opacity
   so the user can see at a glance that they're projections (pre-booked
   members only — no drop-ins counted). Same colour palette otherwise so
   trends are readable across the now-divider. */
.sch-attendance__bar-wrap--future .sch-attendance__bar {
    opacity: 0.55;
    border-top: 2px dashed rgba(255, 255, 255, 0.85);
}
.sch-attendance__bar-wrap--future .sch-attendance__bar-label {
    font-style: italic;
    color: #6b7280;
}
.sch-attendance__now-divider {
    flex: 0 0 1px;
    min-width: 1px;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        #9ca3af 0, #9ca3af 4px, transparent 4px, transparent 8px
    );
    position: relative;
    margin: 0 6px;
}
.sch-attendance__now-divider span {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    background: #fff;
    padding: 0 4px;
    white-space: nowrap;
}

/* Summary row: the small "upcoming …" pill next to the trend label */
.sch-attendance__upcoming {
    font-size: 0.78rem;
    color: #6b7280;
    margin-left: 0.35rem;
}

/* ── #38373: side-by-side past/upcoming capacity rings ────────────── */
.sch-capacity-pair {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.sch-capacity-pair__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.25rem;
    border-right: 1px solid #e5e7eb;
}
.sch-capacity-pair__col:last-child { border-right: none; }
.sch-capacity-pair__col--empty { opacity: 0.65; }
.sch-capacity-pair__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sch-capacity-pair__stats {
    text-align: center;
    font-size: 0.78rem;
    color: #4b5563;
    line-height: 1.35;
}
.sch-capacity__ring-wrap--future {
    opacity: 0.9;
}

/* ── #38373: compact empty state inside split cards ──────────────── */
.sch-attendance__empty--compact {
    font-size: 0.78rem;
    padding: 1.25rem 0.5rem;
    text-align: center;
    color: #9ca3af;
}

/* ── #38373: Peak vs Quiet upcoming rows ─────────────────────────── */
.sch-peak-quiet__row--future {
    opacity: 0.85;
    background: linear-gradient(to right, rgba(59, 130, 246, 0.04), transparent 60%);
}
.sch-peak-quiet__tag--future {
    font-style: italic;
    opacity: 0.9;
}

/* ── #38373: Upcoming Signals card ──────────────────────────────── */
.sch-signals {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sch-signals__row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.4rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}
.sch-signals__row--alert {
    background: #fef3c7;
    border-color: #f59e0b;
}
.sch-signals__icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #6b7280;
    font-size: 0.9rem;
}
.sch-signals__row--alert .sch-signals__icon {
    color: #b45309;
    background: #fff;
}
.sch-signals__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sch-signals__value {
    font-weight: 600;
    font-size: 0.88rem;
    color: #1f2937;
}
.sch-signals__label {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.3;
}

/* ============================================
   Smart Automations
   ============================================ */

/* ── Index: empty state ── */
.automation-empty-state {
    text-align: center;
    padding: 80px 20px 60px;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 2px dashed #d1d5db;
}
.automation-empty-state__illustration { margin-bottom: 28px; }
.automation-empty-state__icon-flow {
    display: inline-flex; align-items: center; gap: 0;
}
.automation-empty-state__flow-node {
    width: 48px; height: 48px; border-radius: var(--radius-lg);
    background: rgba(232, 101, 26, 0.10); color: #e8651a;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.automation-empty-state__flow-line {
    width: 32px; height: 2px; background: #d1d5db;
}
.automation-empty-state h4 { color: #111827; margin-bottom: 10px; font-weight: 700; }
.automation-empty-state p { max-width: 460px; margin: 0 auto 24px; font-size: 0.92rem; line-height: 1.6; }
.automation-empty-state .btn-lg { font-size: 0.95rem; padding: 10px 28px; }

/* ── Index: card list ── */
.automation-list {
    display: flex; flex-direction: column; gap: 12px;
}
.automation-card {
    display: block; background: #fff; border-radius: 10px;
    padding: 16px 20px; border: 1px solid #e5e7eb;
    text-decoration: none; color: inherit; transition: box-shadow 0.15s, border-color 0.15s;
}
.automation-card:hover {
    border-color: #e8651a; box-shadow: 0 2px 12px rgba(232, 101, 26, 0.10);
    text-decoration: none; color: inherit;
}
.automation-card__header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
}
.automation-card__name { font-weight: 600; font-size: 1rem; color: #111827; }
.automation-card__badge {
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 8px; border-radius: var(--radius-pill);
}
.automation-card__badge--active  { background: #dcfce7; color: #166534; }
.automation-card__badge--draft   { background: #f3f4f6; color: #6b7280; }
.automation-card__badge--paused  { background: #fef3c7; color: #92400e; }
.automation-card__badge--archived{ background: #f3f4f6; color: #9ca3af; }
.automation-card__trigger {
    font-size: 0.85rem; color: #6b7280; margin-bottom: 8px;
}
.automation-card__trigger i { color: #d97706; margin-right: 4px; }
.automation-card__pipeline {
    display: flex; align-items: center; gap: 0; flex-wrap: wrap; row-gap: 4px; margin-bottom: 8px;
}
.automation-card__pipeline-step {
    font-size: 0.75rem; color: #475569; background: #f1f5f9; border-radius: var(--radius-pill);
    padding: 2px 10px; white-space: nowrap;
}
.automation-card__pipeline-step i { color: #94a3b8; margin-right: 3px; font-size: 0.75rem; }
.automation-card__pipeline-arrow { font-size: 0.75rem; color: #cbd5e1; margin: 0 4px; }
.automation-card__stats {
    display: flex; gap: 16px; font-size: 0.8rem; color: #9ca3af;
}
.automation-card__stats i { margin-right: 3px; }

/* ── Templates ── */
.automation-template-group-title {
    font-weight: 600; color: #374151; margin: 24px 0 12px; font-size: 0.95rem;
}
.automation-template-grid {
    display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;
}
.automation-template-card {
    display: flex; align-items: center; gap: 16px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 20px;
}
.automation-template-card__icon {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px;
    background: rgba(232, 101, 26, 0.12); color: #e8651a;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.automation-template-card__body { flex: 1; }
.automation-template-card__body h6 { margin: 0 0 2px; font-size: 0.95rem; color: #111827; }
.automation-template-card__body p { margin: 0 0 8px; font-size: 0.82rem; color: #6b7280; }
.automation-template-card__steps { display: flex; flex-wrap: wrap; gap: 4px; }
.automation-template-card__step-badge {
    font-size: 0.75rem; padding: 2px 7px; border-radius: var(--radius-pill); font-weight: 500;
    display: inline-flex; align-items: center; gap: 3px;
}
.automation-template-card__step-badge--wait        { background: #ede9fe; color: #6366f1; }
.automation-template-card__step-badge--sendmessage { background: #d1fae5; color: #059669; }
.automation-template-card__step-badge--createtask  { background: #fef3c7; color: #d97706; }
.automation-template-card__step-badge--condition   { background: #ffedd5; color: #ea580c; }
.automation-template-card__action { flex-shrink: 0; }

/* ── Template picker modal ── */
.automation-picker__section {
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 16px;
}
.automation-picker__section:last-child { border-bottom: none; }
.automation-picker__group-label {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: #9ca3af; padding: 0 8px; margin-bottom: 4px;
}
.automation-picker__form { margin: 0; }
.automation-picker__item {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 12px 8px; border-radius: var(--radius-md); border: none; background: none;
    text-decoration: none; color: inherit; cursor: pointer;
    transition: background 0.12s;
    text-align: left;
}
.automation-picker__item:hover {
    background: #f8f5f2; text-decoration: none; color: inherit;
}
.automation-picker__item-icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
    background: rgba(232, 101, 26, 0.10); color: #e8651a;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.automation-picker__item-icon--blank {
    background: #f1f5f9; color: #64748b;
}
.automation-picker__item-body { flex: 1; min-width: 0; }
.automation-picker__item-body h6 { margin: 0 0 2px; font-size: 0.9rem; color: #111827; font-weight: 600; }
.automation-picker__item-body p { margin: 0; font-size: 0.8rem; color: #6b7280; line-height: 1.4; }
.automation-picker__item-steps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.automation-picker__item-arrow { flex-shrink: 0; color: #cbd5e1; font-size: 0.75rem; }
.automation-picker__item:hover .automation-picker__item-arrow { color: #94a3b8; }
.automation-picker__item--blank {
    border: 1px dashed #d1d5db; border-radius: var(--radius-md);
}
.automation-picker__item--blank:hover { border-color: #94a3b8; }
#newWorkflowModal .modal-body { max-height: 70vh; overflow-y: auto; }

/* ── Edit: top bar ── */
.automation-edit__topbar {
    display: flex; justify-content: space-between; align-items: center;
    background: #1e293b; color: #fff; padding: 10px 20px; border-radius: 10px;
    margin-bottom: 4px;
}
.automation-edit__name-input {
    background: transparent; border: none; color: #fff; font-size: 1.1rem;
    font-weight: 600; outline: none; width: 300px;
    border-bottom: 2px solid transparent; padding: 2px 4px; transition: border-color 0.2s;
}
.automation-edit__name-input:focus { border-bottom-color: #e8651a; }
.automation-edit__topbar-actions { display: flex; align-items: center; gap: 8px; }
.automation-edit__status-badge {
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 3px 10px; border-radius: var(--radius-pill);
}
.automation-edit__status-badge--active  { background: #166534; color: #dcfce7; }
.automation-edit__status-badge--draft   { background: #374151; color: #d1d5db; }
.automation-edit__status-badge--paused  { background: #92400e; color: #fef3c7; }
.automation-edit__status-badge--archived{ background: #4b5563; color: #9ca3af; }

/* ── Flow: the visual pipeline ── */
.automation-flow {
    display: flex; flex-direction: column; align-items: center; padding: 8px 0 24px;
}

/* Connector line + arrow between nodes */
.automation-flow__connector {
    display: flex; flex-direction: column; align-items: center;
}
.automation-flow__connector-line {
    width: 2px; height: 28px; background: #cbd5e1;
}
.automation-flow__connector-arrow {
    color: #94a3b8; font-size: 0.75rem; line-height: 1; margin: -2px 0;
}

/* Nodes */
.automation-flow__node {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 2px solid #e5e7eb; border-radius: var(--radius-lg);
    padding: 12px 16px; min-width: 320px; max-width: 480px; width: 100%;
    cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
}
.automation-flow__node:hover {
    border-color: #94a3b8; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.automation-flow__node--trigger { border-color: #d97706; }
.automation-flow__node--trigger .automation-flow__node-icon { background: #d97706; }
.automation-flow__node--end { border-color: #6b7280; border-style: dashed; opacity: 0.7; }
.automation-flow__node--end .automation-flow__node-icon { background: #6b7280; }

.automation-flow__node-icon {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.9rem;
}
.automation-flow__node-body { flex: 1; min-width: 0; }
.automation-flow__node-label {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: #9ca3af; margin-bottom: 1px;
}
.automation-flow__node-title {
    font-size: 0.9rem; font-weight: 500; color: #111827;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.automation-flow__node-edit {
    color: #9ca3af; font-size: 0.8rem; cursor: pointer; padding: 4px;
}
.automation-flow__node-edit:hover { color: #374151; }

.automation-flow__node-actions {
    display: flex; gap: 4px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    opacity: 0; transition: opacity 0.15s;
}
.automation-flow__node:hover .automation-flow__node-actions { opacity: 1; }
.automation-flow__node-btn {
    background: none; border: none; color: #9ca3af; cursor: pointer;
    width: 28px; height: 28px; border-radius: 6px; display: flex;
    align-items: center; justify-content: center; font-size: 0.75rem;
    transition: background 0.15s, color 0.15s;
}
.automation-flow__node-btn:hover { background: #f3f4f6; color: #374151; }
.automation-flow__node-btn--delete:hover { background: #fef2f2; color: #dc2626; }

/* Add step button */
.automation-flow__add-step {
    background: #fff; border: 2px dashed #cbd5e1; border-radius: 10px;
    padding: 10px 24px; color: #6b7280; font-weight: 500; font-size: 0.85rem;
    cursor: pointer; transition: border-color 0.15s, color 0.15s;
    display: flex; align-items: center; gap: 6px;
}
.automation-flow__add-step:hover {
    border-color: #e8651a; color: #e8651a;
}

/* Condition fork — Yes continues down, No exits right */
.automation-flow__condition-fork {
    display: flex; flex-direction: column; align-items: center;
    position: relative; padding: 4px 0;
}
.automation-flow__condition-fork-line {
    width: 2px; height: 36px; background: #cbd5e1;
}
.automation-flow__condition-fork-yes {
    font-size: 0.75rem; font-weight: 600; color: #166534;
    background: #dcfce7; border: 1px solid #bbf7d0; border-radius: var(--radius-pill);
    padding: 1px 10px; position: relative; z-index: 1;
}
.automation-flow__condition-fork-no {
    position: absolute; top: 10px; left: 50%;
    display: flex; align-items: center;
}
.automation-flow__condition-fork-no-line {
    display: block; width: 28px; height: 2px; background: #fecaca;
}
.automation-flow__condition-fork-no-text {
    font-size: 0.75rem; font-weight: 600; color: #991b1b;
    background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-pill);
    padding: 1px 10px; white-space: nowrap;
}

/* ── Step wrapper (for drag-and-drop sorting) ── */
.automation-flow__step-wrap {
    display: flex; flex-direction: column; align-items: center; width: 100%;
}

/* Drag handle */
.automation-flow__drag-handle {
    cursor: grab; color: #d1d5db; font-size: 0.75rem;
    padding: 4px 2px; margin-left: -4px; margin-right: -2px;
    opacity: 0; transition: opacity 0.15s, color 0.15s;
}
.automation-flow__node:hover .automation-flow__drag-handle { opacity: 1; }
.automation-flow__drag-handle:hover { color: #6b7280; }
.automation-flow__drag-handle:active { cursor: grabbing; }

/* Drag ghost (placeholder left behind) */
.automation-flow__step-wrap--ghost {
    opacity: 0.3;
}
.automation-flow__step-wrap--ghost .automation-flow__connector {
    visibility: hidden; height: 0; overflow: hidden;
}

/* Insert-between button on connectors */
.automation-flow__insert-btn {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px dashed #cbd5e1; background: #fff;
    color: #94a3b8; font-size: 0.75rem; cursor: pointer;
    opacity: 0; transition: opacity 0.2s, border-color 0.15s, color 0.15s, transform 0.15s;
    margin: -4px 0;
}
.automation-flow__connector--insertable:hover .automation-flow__insert-btn { opacity: 1; }
.automation-flow__insert-btn:hover {
    border-color: #e8651a; border-style: solid; color: #e8651a; transform: scale(1.2);
}

/* Hide drag/insert UI in readonly mode */
.automation-flow--readonly .automation-flow__drag-handle,
.automation-flow--readonly .automation-flow__insert-btn { display: none; }

/* ── Sidebar stats ── */
.automation-stat-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center;
}
.automation-stat__value { font-size: 1.4rem; font-weight: 700; color: #111827; }
.automation-stat__label { font-size: 0.75rem; color: #6b7280; }

/* ── Step picker modal ── */
.automation-step-picker__group-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 6px;
}
.automation-step-picker {
    display: flex; flex-direction: column; gap: 6px;
}
.automation-step-picker__item {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 12px 16px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
    text-align: left; width: 100%;
}
.automation-step-picker__item:hover {
    border-color: #e8651a; box-shadow: 0 2px 8px rgba(232, 101, 26, 0.08);
}
.automation-step-picker__icon {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.85rem; flex-shrink: 0;
}
.automation-step-picker__icon--wait      { background: #6366f1; }
.automation-step-picker__icon--message   { background: #059669; }
.automation-step-picker__icon--task      { background: #d97706; }
.automation-step-picker__icon--award     { background: #dc2626; }
.automation-step-picker__icon--note      { background: #0891b2; }
.automation-step-picker__icon--condition { background: #ea580c; }
.automation-step-picker__icon--funnel    { background: #7c3aed; }

/* ── Edit: description row ── */
.automation-edit__description-row .form-control {
    border-color: #e5e7eb; font-size: 0.9rem; color: #6b7280;
}

/* ── Enrolled members panel ── */
a.automation-enrolled-member,
.automation-enrolled-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.1s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.automation-enrolled-member:last-child { border-bottom: none; }
.automation-enrolled-member:hover { background: #f8f5f2; }

.automation-enrolled-member__avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 600; color: #6b7280;
    flex-shrink: 0;
}

.automation-enrolled-member__info { flex: 1; min-width: 0; }
.automation-enrolled-member__name {
    font-size: 0.85rem; font-weight: 600; color: #111827;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.automation-enrolled-member__step {
    font-size: 0.75rem; color: #6b7280;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.automation-enrolled-member__status {
    font-size: 0.75rem; font-weight: 600; padding: 2px 8px;
    border-radius: 10px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.03em;
}
.automation-enrolled-member__status--active  { background: #dcfce7; color: #166534; }
.automation-enrolled-member__status--waiting  { background: #dbeafe; color: #1e40af; }
.automation-enrolled-member__status--completed { background: #f3f4f6; color: #6b7280; }
.automation-enrolled-member__status--exited   { background: #fef2f2; color: #991b1b; }

.automation-enrolled-member__progress {
    width: 48px; flex-shrink: 0; text-align: right;
}
.automation-enrolled-member__progress-text {
    font-size: 0.75rem; color: #9ca3af; font-weight: 500;
}
.automation-enrolled-member__progress-bar {
    height: 3px; background: #e5e7eb; border-radius: 2px; margin-top: 3px; overflow: hidden;
}
.automation-enrolled-member__progress-fill {
    height: 100%; background: #059669; border-radius: 2px; transition: width 0.3s ease;
}

.automation-enrolled-empty {
    padding: 24px 16px; text-align: center; color: #9ca3af; font-size: 0.85rem;
}
.automation-enrolled-empty i { font-size: 1.5rem; display: block; margin-bottom: 8px; opacity: 0.5; }

/* ── Matching members ── */
.automation-matching-summary { display: flex; align-items: center; gap: 8px; }
.automation-matching-count {
    font-size: 1.5rem; font-weight: 700; color: #e8651a;
}
.automation-matching-list {
    max-height: 200px; overflow-y: auto;
    border: 1px solid #e5e7eb; border-radius: var(--radius-md); background: #fafafa;
}
.automation-matching-list__item {
    padding: 6px 12px; font-size: 0.82rem; color: #374151;
    border-bottom: 1px solid #f3f4f6;
}
.automation-matching-list__item:last-child { border-bottom: none; }

/* ── Matching member row (enhanced with info + enrol) ── */
.automation-matching-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.1s ease;
}
.automation-matching-member:last-child { border-bottom: none; }
.automation-matching-member:hover { background: #fff; }

.automation-matching-member__avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 600; color: #6b7280;
    flex-shrink: 0;
}

.automation-matching-member__info { flex: 1; min-width: 0; }
.automation-matching-member__name {
    font-size: 0.82rem; font-weight: 600; color: #111827;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.automation-matching-member__meta {
    font-size: 0.75rem; color: #9ca3af;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.automation-matching-member__meta span + span::before {
    content: '\00b7'; margin: 0 4px;
}
.automation-matching-member__badge {
    font-size: 0.75rem; font-weight: 600; padding: 1px 6px;
    border-radius: var(--radius-md); text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0;
}
.automation-matching-member__badge--prospect { background: #dbeafe; color: #1e40af; }
.automation-matching-member__badge--member   { background: #dcfce7; color: #166534; }

.automation-matching-member__enrol {
    flex-shrink: 0;
}
.automation-matching-member__enrol .btn { padding: 2px 10px; font-size: 0.75rem; }

/* ── Inline config (expands below nodes) ── */
.automation-flow__inline-config {
    overflow: hidden;
}
.automation-flow__inline-config-inner {
    margin: 8px 0 4px 0;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}
.automation-flow__inline-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.85rem;
}
.automation-flow__inline-config-close {
    border: none;
    background: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}
.automation-flow__inline-config-close:hover {
    background: #e5e7eb;
    color: #374151;
}
.automation-flow__inline-config-body {
    padding: 16px;
}
.automation-flow__node--editing {
    border-color: #e8651a !important;
    box-shadow: 0 0 0 3px rgba(232, 101, 26, 0.12) !important;
}

/* ── Trigger card picker ── */
.automation-trigger-group {
    margin-bottom: 16px;
}
.automation-trigger-group:last-child { margin-bottom: 0; }
.automation-trigger-group__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin-bottom: 6px;
    padding-left: 2px;
}
.automation-trigger-group__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.automation-trigger-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-md);
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
    position: relative;
}
.automation-trigger-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.automation-trigger-card--selected {
    border-color: #e8651a;
    background: #fff7f3;
    box-shadow: 0 0 0 2px rgba(232, 101, 26, 0.1);
}
.automation-trigger-card__icon {
    width: 32px; height: 32px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.75rem; flex-shrink: 0;
}
.automation-trigger-card__text { flex: 1; min-width: 0; }
.automation-trigger-card__label {
    font-size: 0.82rem; font-weight: 600; color: #111827;
}
.automation-trigger-card__desc {
    font-size: 0.75rem; color: #9ca3af; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.automation-trigger-card__check {
    color: #e8651a; font-size: 0.9rem; flex-shrink: 0;
}

/* ── Condition card picker ── */
.automation-condition-cards {
    display: flex;
    flex-direction: column;
}
.automation-condition-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-md);
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
}
.automation-condition-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.automation-condition-card--selected {
    border-color: #ea580c;
    background: #fff7f3;
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.1);
}
.automation-condition-card__icon {
    width: 32px; height: 32px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.75rem; flex-shrink: 0;
}
.automation-condition-card__text { flex: 1; min-width: 0; }
.automation-condition-card__label {
    font-size: 0.82rem; font-weight: 600; color: #111827;
}
.automation-condition-card__desc {
    font-size: 0.75rem; color: #9ca3af; line-height: 1.3;
}
.automation-condition-card__check {
    color: #ea580c; font-size: 0.9rem; flex-shrink: 0;
}
.automation-condition-card-wrap {
    margin-bottom: 6px;
}
.automation-condition-card-params {
    padding: 10px 12px 4px 54px;
}
.automation-condition-card-params:empty {
    display: none;
}

/* ── Channel toggle buttons (Email/SMS/Push) ── */
.automation-channel-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-md);
    background: #fff;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.15s;
    user-select: none;
}
.automation-channel-toggle input { display: none; }
.automation-channel-toggle:hover { border-color: #d1d5db; }
.automation-channel-toggle--active {
    border-color: #059669;
    background: #ecfdf5;
    color: #059669;
}

/* ── Consent cards ── */
.automation-consent-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.automation-consent-card {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-md);
    background: #fff;
    cursor: pointer;
    font-size: 0.82rem;
    color: #374151;
    transition: all 0.15s;
}
.automation-consent-card:hover { border-color: #d1d5db; }
.automation-consent-card--selected {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1e40af;
}
.automation-consent-card--selected .fa-check-circle { color: #2563eb; }

/* ── Option cards (awards, funnel stages) ── */
.automation-option-cards {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.automation-option-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-md);
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.82rem;
    font-weight: 500;
    color: #374151;
    text-align: left;
    width: 100%;
}
.automation-option-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.automation-option-card--selected {
    border-color: #e8651a;
    background: #fff7f3;
}
.automation-option-card__icon {
    width: 28px; height: 28px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.75rem; flex-shrink: 0;
}
.automation-option-card__check {
    color: #e8651a; font-size: 0.9rem; flex-shrink: 0; margin-left: auto;
}

/* ── Read-only flow (active mode) ── */
.automation-flow--readonly {
    padding: 12px 16px 24px;
}
.automation-flow--readonly .automation-flow__node {
    cursor: default;
    min-width: 0;
    align-self: stretch;
}
.automation-flow--readonly .automation-flow__node:hover {
    border-color: #e5e7eb;
    box-shadow: none;
}
.automation-flow--readonly .automation-flow__node-actions,
.automation-flow--readonly .automation-flow__node-edit,
.automation-flow--readonly .automation-flow__add-step {
    display: none !important;
}
.automation-flow--readonly .automation-flow__node-body {
    cursor: default;
}

/* ═══════════════════════════════════════════════════
   Modern styled modals (.modal-styled)
   Applied app-wide wherever modal-styled is used
   ═══════════════════════════════════════════════════ */
.modal-styled .modal-content {
    border: none;
    border-radius: 14px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.modal-styled .modal-header {
    background: #fff !important;
    border-bottom: 1px solid #eee;
    padding: 20px 24px;
    color: #1e293b !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.modal-styled .modal-title {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.modal-styled .modal-header .btn-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    opacity: 0.4;
    transition: opacity 0.15s;
}
.modal-styled .modal-header .btn-close:hover {
    opacity: 0.8;
}
.modal-styled .modal-body {
    padding: 24px;
}
.modal-styled .modal-footer {
    background: #fafafa;
    border-top: 1px solid #eee;
    padding: 14px 24px;
    justify-content: center;
}
.modal-styled .form-label {
    font-weight: 500;
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 4px;
}
.modal-styled .form-control,
.modal-styled .form-select {
    border: 1px solid #d1d5db;
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.modal-styled .form-control:focus,
.modal-styled .form-select:focus {
    border-color: #e8651a;
    box-shadow: 0 0 0 3px rgba(232, 101, 26, 0.1);
}
.modal-styled .input-group .form-control,
.modal-styled .input-group .form-select {
    border-radius: var(--radius-md);
}
.modal-styled .input-group > :not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.modal-styled .input-group > :not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.modal-styled textarea.form-control {
    border-radius: var(--radius-md);
}

/* ═══════════════════════════════════════════════════
   Sale detail lines (_ViewSale modal) — #41092
   Self-contained flex rows so long payment type names
   (DiscountFixed, DiscountPercent, CardPresent…) wrap
   instead of overflowing the narrow type column and
   overlapping the status text. Replaces the fragile
   Bootstrap col-2/col-7/col-3 grid in the modal.
   ═══════════════════════════════════════════════════ */
.sale-line {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 4px;
}
.sale-line + .sale-line {
    border-top: 1px solid #f1f1f1;
}
.sale-line__type {
    flex: 0 0 30%;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 500;
}
.sale-line__detail {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.sale-line__amount {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.sale-line__detail small {
    color: #64748b;
}
.sale-line--failed {
    padding: 6px 8px;
    margin-bottom: 4px;
    border-top: none;
}

/* ── Step config modal icon ── */
.automation-step-modal-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    margin-bottom: 8px;
}

/* ── Form field widths ── */
.automation-field--narrow { max-width: 140px; }
.automation-field--medium { max-width: 280px; }

/* ── Enrolled member detail text ── */
.automation-enrolled-member__detail-hint { font-size: 0.75rem; }

/* ── Condition config description ── */
.automation-condition-desc { font-size: 0.85rem; }

/* ── Header ghost buttons (translucent on coloured header bar) ── */
.btn-header-ghost {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.btn-header-ghost:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* ── Modal helpers ── */
.automation-step-modal-icon {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.9rem; flex-shrink: 0;
}
.automation-step-modal-icon--trigger { background: #d97706; }
.automation-step-modal-icon--add { background: #e8651a; }
.automation-modal-subtitle { font-size: 0.82rem; }
.automation-hint { font-size: 0.75rem; }

/* ── Node sub-line (trigger plan filter, end-of-workflow note) ── */
.automation-flow__node-sub {
    display: block; font-size: 0.75rem; font-weight: 400;
    color: #6b7280; margin-top: 2px;
    white-space: normal; line-height: 1.35;
}
/* A marker node is purely informational — never looks clickable */
.automation-flow__node--marker { cursor: default; }
.automation-flow__node--marker:hover {
    border-color: #6b7280; box-shadow: none;
}

/* ── Trigger plan include/exclude filter ── */
.automation-planfilter { margin-top: 6px; }
.automation-planfilter__modes {
    display: flex; gap: 6px; margin-bottom: 10px;
}
.automation-planfilter__mode {
    flex: 1; padding: 7px 10px; font-size: 0.82rem; font-weight: 600;
    background: #fff; color: #4b5563;
    border: 1px solid #d1d5db; border-radius: var(--radius-sm);
    cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.automation-planfilter__mode:hover { border-color: #9ca3af; }
.automation-planfilter__mode--active {
    background: var(--cui-nav-link-color, #4f46e5); color: #fff;
    border-color: var(--cui-nav-link-color, #4f46e5);
}
.automation-planfilter__list {
    max-height: 220px; overflow-y: auto;
    border: 1px solid #e5e7eb; border-radius: var(--radius-sm);
    padding: 4px;
}
.automation-planfilter__item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: var(--radius-sm);
    font-size: 0.875rem; color: #111827; cursor: pointer; margin: 0;
}
.automation-planfilter__item:hover { background: #f8fafc; }
.automation-planfilter__cb { margin: 0; }
.automation-planfilter__summary {
    margin: 8px 0 2px; font-size: 0.82rem; font-weight: 600; color: #374151;
}
.automation-planfilter__empty { font-size: 0.85rem; margin: 8px 0; }

/* ── Send timing (Immediately vs After a delay) ── */
.automation-sendtiming { display: flex; gap: 6px; margin-bottom: 6px; }
.automation-sendtiming__opt {
    flex: 1; padding: 8px 10px; font-size: 0.85rem; font-weight: 600;
    background: #fff; color: #4b5563;
    border: 1px solid #d1d5db; border-radius: var(--radius-sm);
    cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.automation-sendtiming__opt:hover { border-color: #9ca3af; }
.automation-sendtiming__opt--active {
    background: var(--cui-nav-link-color, #4f46e5); color: #fff;
    border-color: var(--cui-nav-link-color, #4f46e5);
}
.automation-sendtiming__delay { margin: 8px 0; }
.automation-sendtiming__note { display: block; margin-top: 4px; }

/* ── Member activity (#42381) ── */
.automation-activity__intro { font-size: 12px; color: #6b7280; margin-bottom: 14px; }
.automation-activity__member {
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 12px;
}
.automation-activity__member-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.automation-activity__member-name { font-weight: 600; }
.automation-activity__joined { font-size: 12px; color: #6b7280; margin-left: auto; }
.automation-activity__status {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    background: #f3f4f6;
    color: #374151;
}
.automation-activity__status--active,
.automation-activity__status--waiting { background: #ecfdf5; color: #047857; }
.automation-activity__status--completed { background: #eff6ff; color: #1d4ed8; }
.automation-activity__status--exited { background: #fef2f2; color: #b91c1c; }
.automation-activity__exit,
.automation-activity__pending { font-size: 12px; color: #6b7280; margin: 0 0 8px; }
.automation-activity__steps { font-size: 13px; margin-bottom: 0; }
.automation-activity__steps th { font-size: 11px; text-transform: uppercase; color: #6b7280; }
.automation-activity__ok { color: #047857; }
.automation-activity__fail { color: #b91c1c; }
.automation-activity__empty { text-align: center; padding: 32px 12px; color: #6b7280; }
.automation-activity__empty > i { font-size: 28px; margin-bottom: 12px; display: block; opacity: 0.5; }
.automation-activity__empty-hint { font-size: 12px; }

/* ── Per-channel message sections (#42381) ── */
.automation-msgsection {
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    padding: 14px 16px 2px;
    margin-bottom: 16px;
}
.automation-msgsection__title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin: 0 0 12px;
}

/* ── SMS / push text (#42381) ── */
.automation-plaintext__counter {
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
    text-align: right;
}
.automation-plaintext__counter--over { color: #d97706; }

/* ── Test send ── */
/* Lives in the modal footer (see Automations/Edit.cshtml), which draws its own top border and
   spacing — so the divider the block carried as the last item in the body would double up. */
.automation-testsend {
    text-align: left;
}
/* Test send on the left, Done on the right, on one row: .modal-footer wraps by default and the
   hint is long enough to push Done onto a line of its own. */
.automation-step-modal-footer {
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
}
.automation-step-modal-footer #stepConfigTestSendSlot {
    min-width: 0;
}
/* The hint takes the slack; Done keeps its size rather than being squeezed onto two lines. */
.automation-step-modal-footer > .btn {
    flex-shrink: 0;
    white-space: nowrap;
}
/* modal-dialog-scrollable caps the dialog height so the body scrolls and the footer stays put, but
   this project's own `.modal-dialog { height: auto }` sits after Bootstrap's
   `.modal-dialog-scrollable { height: calc(100% - 1rem) }` at equal specificity and wins on source
   order — so the cap never applied and a tall step editor ran past the bottom of the window, taking
   Done with it. Re-assert it here, allowing for .modal-dialog's 1.75rem top and bottom margin.
   Scoped to this modal rather than fixed globally: other scrollable modals have the same latent
   problem, but changing their height is not this change's job. */
#stepConfigModal .modal-dialog-scrollable {
    height: calc(100% - 3.5rem);
}
/* ...and this project's `.modal-content { display: block; overflow: hidden auto; max-height: none }`
   replaces Bootstrap's flex column with one block that scrolls in its entirety — footer and all.
   That is what carries Done off the bottom. Put the flex column back for this modal so the body is
   the only part that scrolls and the footer holds its place. */
#stepConfigModal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
}
#stepConfigModal .modal-body {
    overflow-y: auto;
}
/* .action-btn is styled for the dark page header (white text, transparent
   background). The step editor is a white modal, so it needs the same
   light-surface treatment as .mp-settings-card .action-btn — without it the
   button renders white-on-white and reads as missing. */
.automation-testsend .action-btn {
    color: #495057;
    background: #fff;
    border-color: #dee2e6;
}
.automation-testsend .action-btn:hover {
    color: #212529;
    background: #f8f9fa;
    border-color: #adb5bd;
}
.automation-testsend__hint { display: block; margin-top: 6px; }

/* ── Readiness panel ── */
.automation-readiness__list { list-style: none; margin: 0 0 10px; padding: 0; }
.automation-readiness__item {
    font-size: 0.875rem; padding: 4px 0; display: flex; align-items: center;
}
.automation-readiness__item--ok { color: var(--status-success-fg); }
.automation-readiness__item--todo { color: var(--status-warning-fg); }
.automation-readiness__status {
    margin: 0; padding: 10px 12px; font-size: 0.82rem;
    border-radius: var(--radius-sm); line-height: 1.4;
}
.automation-readiness__status--ready {
    background: var(--status-success-bg); color: var(--status-success-fg);
}
.automation-readiness__status--notready {
    background: var(--status-info-bg); color: var(--status-info-fg);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .automation-edit__topbar { flex-direction: column; gap: 10px; align-items: stretch; }
    .automation-edit__name-input { width: 100%; }
    .automation-flow__node { min-width: unset; }
}

/* ═══════════════════════════════════════════════════════════════
   Browser Check-in Page
   ═══════════════════════════════════════════════════════════════ */

/* Event picker in header */
.checkin-event-picker {
    min-width: 280px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.85rem;
}
.checkin-event-picker:focus {
    background: #fff;
    color: #1e293b;
    border-color: #e8651a;
}
.checkin-event-picker option { color: #1e293b; }

/* Events container */
.checkin-events { margin-top: 20px; }

/* Individual event section */
.checkin-event {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
    overflow: hidden;
}

/* Event header bar */
.checkin-event__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    color: #111827;
    font-size: 0.95rem;
}
.checkin-event__icon {
    color: #e8651a;
    font-size: 1rem;
    opacity: 0.9;
}
.checkin-event__count {
    margin-left: auto;
    font-weight: 400;
    font-size: 0.82rem;
    color: #6b7280;
}

/* Member tile grid */
.checkin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    padding: 20px;
}

/* Individual member tile */
.checkin-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    padding: 16px 8px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    transition: all 0.15s ease;
}
.checkin-member:hover {
    border-color: #e8651a;
    box-shadow: 0 4px 12px rgba(232, 101, 26, 0.15);
    transform: translateY(-2px);
}
.checkin-member:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(232, 101, 26, 0.2);
}

/* Photo */
.checkin-member__photo-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.checkin-member__photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f0f2f5;
}
.checkin-member:hover .checkin-member__photo {
    border-color: rgba(232, 101, 26, 0.3);
}

/* Unpaid badge */
.checkin-member__badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.checkin-member__badge--unpaid {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}
.checkin-member__badge--alert {
    background: #fee2e2;
    color: #7f1d1d;
    border: 1px solid #fca5a5;
}

/* Name */
.checkin-member__name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.3;
    word-break: break-word;
}

/* Empty state */
.checkin-empty {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}
.checkin-empty i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}
.checkin-empty p {
    font-size: 0.95rem;
    margin: 0;
}

/* Responsive: larger tiles on bigger screens */
@media (min-width: 1200px) {
    .checkin-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 576px) {
    .checkin-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 10px;
        padding: 12px;
    }
    .checkin-member { padding: 12px 6px 10px; }
    .checkin-member__photo-wrap { width: 64px; height: 64px; }
    .checkin-member__photo { width: 64px; height: 64px; }
    .checkin-event-picker { min-width: unset; width: 100%; }
}

/* ============================================
   Finance Hub
   ============================================ */

/* ── Finance Sidebar ── */
.finance-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    z-index: 1025;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    padding: 16px 14px;
    overflow-y: auto;
    box-shadow: 1px 0 8px rgba(0, 0, 0, 0.06);
}

.finance-main {
    padding: 20px 24px;
}

.finance-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}
.finance-sidebar__brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    min-width: 0;
    flex: 1;
}
.finance-sidebar__brand-img {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid color-mix(in srgb, var(--admin-club-color, #667eea) 20%, transparent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.finance-sidebar__brand-name {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finance-sidebar__section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    padding: 14px 4px 0;
    margin: 8px 0 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.finance-sidebar__brand + .finance-sidebar__section-label {
    border-top: none;
    margin-top: 0;
    padding-top: 6px;
}

.finance-sidebar__nav-item {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    margin-bottom: 2px;
    text-decoration: none;
    color: inherit;
}
.finance-sidebar__nav-item:hover {
    background: #f3f4f6;
    text-decoration: none;
    color: inherit;
}
.finance-sidebar__nav-item--active {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 8%, transparent);
}
.finance-sidebar__nav-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    color: #6b7280;
    flex: 1;
}
.finance-sidebar__nav-label i {
    width: 18px;
    text-align: center;
    font-size: 0.85rem;
    color: #9ca3af;
}
.finance-sidebar__nav-item--active .finance-sidebar__nav-label {
    color: var(--admin-club-color, #667eea);
}
.finance-sidebar__nav-item--active .finance-sidebar__nav-label i {
    color: var(--admin-club-color, #667eea);
}
.finance-sidebar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: #9ca3af;
    border-radius: 9px;
    margin-left: auto;
}
.finance-sidebar__nav-item--active .finance-sidebar__badge {
    background: var(--admin-club-color, #667eea);
}
.finance-sidebar__badge--red {
    background: #dc2626;
}

.finance-sidebar-toggle {
    display: none;
}
.finance-sidebar-overlay {
    display: none;
}

@media (max-width: 767.98px) {
    .finance-sidebar {
        display: none;
        width: 260px;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }
    .finance-sidebar.show {
        display: flex;
    }
    body.finance-page-active .wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .finance-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 80px;
        right: 16px;
        z-index: 1040;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--admin-club-color, #667eea);
        color: #fff;
        border: none;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
        cursor: pointer;
    }
    .finance-sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1024;
    }
    .finance-sidebar-overlay.show {
        display: block;
    }
    .finance-sidebar-toggle,
    .finance-sidebar-overlay {
        display: none;
    }
    body.finance-page-active .finance-sidebar-toggle {
        display: flex;
    }
}

/* ── Summary Cards ── */
.finance-summary-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.15s;
}
.finance-summary-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}
.finance-summary-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.finance-summary-card__icon--green { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.finance-summary-card__icon--red { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.finance-summary-card__icon--amber { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.finance-summary-card__icon--blue { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.finance-summary-card__icon--brand { background: rgba(232, 101, 26, 0.1); color: var(--brand-orange); }
.finance-summary-card__value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}
.finance-summary-card__label {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 1px;
}
.finance-summary-card__trend {
    font-size: 0.75rem;
    margin-top: 2px;
}

/* ── Chart Containers ── */
.finance-chart-container {
    position: relative;
    height: 280px;
}
.finance-chart-container--small {
    height: 240px;
}
.finance-chart-container--short {
    height: 180px;
}

/* ── Collections Calendar ── */
.finance-calendar-day--today {
    background: rgba(232, 101, 26, 0.06) !important;
}
.finance-calendar-day--past {
    opacity: 0.75;
}
.finance-calendar-day--future {
    /* default styling */
}

/* ── Provider Cards ── */
.finance-provider-card {
    border: 1px solid #e5e7eb;
    transition: box-shadow 0.15s ease;
}
.finance-provider-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.finance-provider-card .card-header {
    background: #fafbfc;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.65rem 1rem;
}
.finance-provider-card .card-body {
    min-height: 120px;
}
.finance-provider-card__data .table {
    font-size: 0.82rem;
}
.finance-provider-card__data .table th {
    border-top: none;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .finance-summary-card__value { font-size: 1.1rem; }
    .finance-chart-container { height: 220px; }
    .finance-chart-container--small { height: 200px; }
    .finance-chart-container--short { height: 160px; }
}

/* ── Balance & Activity ── */
.finance-balance-summary {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.finance-balance-summary__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    min-width: 180px;
    flex: 1;
}
.finance-balance-summary__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.finance-balance-summary__card--available .finance-balance-summary__icon {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}
.finance-balance-summary__card--pending .finance-balance-summary__icon {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}
.finance-balance-summary__card--mandates .finance-balance-summary__icon {
    background: rgba(0, 180, 216, 0.1);
    color: #00b4d8;
}
.finance-balance-summary__value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}
.finance-balance-summary__label {
    font-size: 0.75rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 1px;
}

.finance-balance-summary__breakdown {
    font-size: 0.75rem;
    margin-top: 2px;
    line-height: 1.3;
}

.finance-activity-row:hover {
    background-color: #f0f7ff !important;
}

.finance-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.finance-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.finance-pill {
    cursor: pointer;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 0.8rem;
    color: #374151;
    transition: all 0.15s;
    user-select: none;
}
.finance-pill:hover {
    background: #f9fafb;
}
.finance-pill--active {
    background: #1e293b;
    color: #fff;
    border-color: #1e293b;
}
.finance-pill-separator {
    color: #d1d5db;
    font-size: 0.85rem;
    user-select: none;
}

.finance-activity-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: 0.03em;
    border-bottom-width: 2px;
}
.finance-activity-table td {
    font-size: 0.85rem;
    vertical-align: middle;
}
.finance-activity-table .finance-provider-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.finance-date-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.finance-date-bar__periods {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.finance-date-btn {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.finance-date-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}
.finance-date-btn--active {
    background: #1e293b;
    color: #fff;
    border-color: #1e293b;
}
.finance-date-bar__custom {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.finance-date-bar__custom .form-control {
    width: 130px;
}

@media (max-width: 767.98px) {
    .finance-balance-summary { flex-direction: column; }
    .finance-balance-summary__card { min-width: 100%; }
    .finance-filter-bar { flex-direction: column; align-items: flex-start; }
    .finance-date-bar { flex-direction: column; align-items: flex-start; }
    .finance-date-bar__custom { margin-left: 0; }
}

/* ── Finance Table Summary Bar ── */
.finance-table-summary__count {
    font-size: 0.92rem;
    color: #6b7280;
}
.finance-table-summary__total {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
}
.finance-table-summary--danger {
    background: #fef2f2;
}
.finance-table-summary--danger .finance-table-summary__total {
    color: #dc2626;
}
.finance-table-summary--success {
    background: #f0fdf4;
}
.finance-table-summary--success .finance-table-summary__total {
    color: #16a34a;
}

/* ── Finance Table Row Spacing ── */
.finance-table td {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    vertical-align: middle;
}
.finance-table th {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/* ── Finance Off-Canvas Detail Panel ── */
.finance-detail-offcanvas {
    width: 500px !important;
    border-left: 1px solid #e5e7eb;
}
.finance-detail-offcanvas .offcanvas-header {
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem 1.5rem;
}
.finance-detail-offcanvas .offcanvas-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}
.finance-detail-offcanvas .offcanvas-body {
    padding: 0;
    background: #f8f9fa;
}
.finance-detail-offcanvas__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: #9ca3af;
    font-size: 0.9rem;
}
.finance-detail__section {
    padding: 1.25rem;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}
.finance-detail__heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 0.75rem;
}
.finance-detail__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.finance-detail__grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.finance-detail__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}
.finance-detail__label {
    font-size: 0.8rem;
    color: #6b7280;
}
.finance-detail__value {
    font-size: 0.85rem;
    color: #1e293b;
}
@media (max-width: 991.98px) {
    .finance-detail-offcanvas {
        width: 100% !important;
    }
}

/* ── Finance Chart Container Variants ── */
.finance-chart-container--medium {
    height: 300px;
}

/* ── Finance Member Value Tier Badges ── */
.finance-tier-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.finance-tier-badge--high {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}
.finance-tier-badge--medium {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}
.finance-tier-badge--low {
    background: rgba(156, 163, 175, 0.12);
    color: #6b7280;
}

/* ── Finance Attention Card (DD Management) ── */
.finance-attention-card {
    border: 1px solid #fecaca;
    background: #fef2f2;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
.finance-attention-card__header {
    color: #dc2626;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 0.75rem;
}

/* ── Finance Action Buttons ── */
.finance-action-btn {
    font-size: 0.78rem;
    padding: 3px 10px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    line-height: 1.5;
}
.finance-action-btn--chase {
    background: #f59e0b;
    color: #fff;
    border: none;
}
.finance-action-btn--chase:hover {
    background: #d97706;
    color: #fff;
}
.finance-action-btn--renew {
    background: #22c55e;
    color: #fff;
    border: none;
}
.finance-action-btn--renew:hover {
    background: #16a34a;
    color: #fff;
}
.finance-action-btn--export {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
}
.finance-action-btn--export:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

/* ── Finance At-Risk Row Highlight ── */
.finance-atrisk-row {
    border-left: 3px solid #f59e0b;
}
.finance-atrisk-row--critical {
    border-left-color: #dc2626;
}

/* ── Finance Clickable Row ── */
.finance-clickable-row {
    cursor: pointer;
}
.finance-clickable-row:hover {
    background: #f0f7ff !important;
}

/* ── Finance Expandable Group ── */
.finance-group-header {
    background: #f9fafb;
    cursor: pointer;
    font-weight: 600;
}
.finance-group-header:hover {
    background: #f3f4f6;
}
.finance-group-header .fa-chevron-right {
    transition: transform 0.2s;
    font-size: 0.75rem;
}
.finance-group-header.expanded .fa-chevron-right {
    transform: rotate(90deg);
}
.finance-group-child {
    display: none;
}
.finance-group-child.show {
    display: table-row;
}

/* Bulk Email Detail (Communication) */
.outbound-msg-row[data-status="Success"] {
    cursor: pointer;
}
.outbound-msg-row[data-status="Success"]:hover {
    background: #f0f7ff;
}
.bulk-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.bulk-detail .card {
    margin-bottom: 0;
}
.bulk-detail__kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
@media (max-width: 991.98px) {
    .bulk-detail__kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
    .bulk-detail__kpi-row { grid-template-columns: repeat(2, 1fr); }
}
.bulk-detail__kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
}
.bulk-detail__kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.bulk-detail__kpi-icon--sent { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.bulk-detail__kpi-icon--opened { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.bulk-detail__kpi-icon--clicked { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.bulk-detail__kpi-icon--unsub { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.bulk-detail__kpi-icon--bounced { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.bulk-detail__kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}
.bulk-detail__kpi-pct {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}
.bulk-detail__kpi-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

/* Three-column, two-row grid: Preview spans rows, Charts stacked, Timeline spans rows */
.bulk-detail__main-grid {
    display: grid;
    grid-template-columns: 3fr 5fr 220px;
    grid-template-rows: auto auto;
    gap: 16px;
    align-items: stretch;
}
.bulk-detail__main-grid > .card {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.bulk-detail__card-preview {
    grid-column: 1;
    grid-row: 1 / 3;
}
.bulk-detail__card-chart {
    grid-column: 2;
    grid-row: 1;
    max-height: 300px;
}
.bulk-detail__card-timeline {
    grid-column: 3;
    grid-row: 1 / 3;
}
.bulk-detail__card-breakdown {
    grid-column: 2;
    grid-row: 2;
}
@media (max-width: 1199.98px) {
    .bulk-detail__main-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }
    .bulk-detail__card-preview { grid-column: 1 / -1; grid-row: 1; }
    .bulk-detail__card-chart { grid-column: 1; grid-row: 2; }
    .bulk-detail__card-timeline { grid-column: 2; grid-row: 2 / 4; }
    .bulk-detail__card-breakdown { grid-column: 1; grid-row: 3; }
}
@media (max-width: 767.98px) {
    .bulk-detail__main-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .bulk-detail__card-preview { grid-column: 1; grid-row: auto; }
    .bulk-detail__card-chart { grid-column: 1; grid-row: auto; }
    .bulk-detail__card-timeline { grid-column: 1; grid-row: auto; }
    .bulk-detail__card-breakdown { grid-column: 1; grid-row: auto; }
}

.bulk-detail__card-header {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    padding: 10px 16px;
}
.bulk-detail__card-header i {
    color: #6b7280;
}
.bulk-detail__email-iframe {
    width: 100%;
    flex: 1;
    min-height: 240px;
    border: none;
    display: block;
}
.bulk-detail__chart-body {
    padding: 12px;
    position: relative;
    flex: 1;
    min-height: 200px;
    overflow: hidden;
}
.bulk-detail__chart-body canvas {
    position: absolute;
    top: 12px;
    left: 12px;
    width: calc(100% - 24px) !important;
    height: calc(100% - 24px) !important;
}
.bulk-detail__chart-body--short {
    min-height: 0;
    flex: 0 0 120px;
}
.bulk-detail__timeline {
    font-size: 13px;
    padding: 12px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bulk-detail__timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}
.bulk-detail__timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d1d5db;
    margin-top: 4px;
    flex-shrink: 0;
}
.bulk-detail__timeline-dot--complete {
    background: #22c55e;
}
.bulk-detail__timeline-label {
    font-weight: 500;
    color: #374151;
}
.bulk-detail__timeline-date {
    color: #6b7280;
    font-size: 12px;
}
.bulk-detail__recent-activity {
    max-height: none;
    overflow-y: auto;
    flex: 1;
}
.bulk-detail__recent-item {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
}
.bulk-detail__recent-item:last-child {
    border-bottom: none;
}

/* Unified activity table */
.member-table__name-link {
    color: #1f2937;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
}
.member-table__name-link:hover {
    color: #3b82f6;
}
.bulk-detail__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 500;
}
.bulk-detail__badge--opened {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}
.bulk-detail__badge--clicked {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
}
.bulk-detail__badge--unsub {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}
.bulk-detail__badge--sent {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}
.bulk-detail__badge--failed {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}
.bulk-detail__sort-col {
    cursor: pointer;
    user-select: none;
}
.bulk-detail__sort-col:hover {
    color: #1e293b;
}
.bulk-detail__sort-col i {
    margin-left: 4px;
    font-size: 10px;
    color: #9ca3af;
}
.bulk-detail__badge--none {
    color: #d1d5db;
    font-size: 13px;
}

/* Add member to sales funnel modal */
.add-funnel-member__results {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
}

.add-funnel-member__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.12s ease;
}

.add-funnel-member__row:hover {
    background: #f9fafb;
}

.add-funnel-member__row.is-selected {
    background: #eef2ff;
}

.add-funnel-member__row:last-child {
    border-bottom: none;
}

.add-funnel-member__photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.add-funnel-member__name {
    font-weight: 500;
    color: #111827;
    font-size: 0.85rem;
}

.add-funnel-member__sub {
    font-size: 0.75rem;
    color: #6b7280;
}

.add-funnel-member__current-stage {
    margin-left: auto;
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-pill);
    color: #fff;
    white-space: nowrap;
    font-weight: 500;
}

.add-funnel-member__empty {
    padding: 1rem;
    text-align: center;
    color: #9ca3af;
    font-size: 0.85rem;
}

/* =======================================================
   Add Member Modal
   ======================================================= */
.add-member__grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 575.98px) {
    .add-member__grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

.add-member__photo {
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    letter-spacing: 0.05em;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.add-member__photo:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.add-member__photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.add-member__photo-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 8px;
    background: rgba(17, 24, 39, 0.65);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.add-member__photo-hint i {
    font-size: 0.8rem;
}

/* #41647 — webcam capture in the New Contact modal (parity with edit-profile) */
.add-member__camera-toggle {
    display: block;
    width: 160px;
    margin-top: 8px;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md, 8px);
    color: #374151;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.add-member__camera-toggle:hover {
    background: #f9fafb;
    border-color: #cbd5e1;
}

.add-member__camera-panel {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md, 8px);
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.add-member__camera-view {
    width: 320px;
    max-width: 100%;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: #111827;
    line-height: 0;
}

/* Webcam.js sizes the <video> to the capture resolution (640px) and scales it
   down to the 320px display via a CSS transform. The global responsive
   `video { max-width: 100% !important }` clamps that 640px to the container and
   breaks the scale, rendering the feed at half-size — so opt this one out.
   !important is required only to beat that existing !important (#41647). */
.add-member__camera-view video {
    max-width: none !important;
}

.add-member__camera-actions {
    display: flex;
    gap: 8px;
}

.add-member__fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.add-member__field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 575.98px) {
    .add-member__field-row {
        grid-template-columns: 1fr;
    }
}

/* ---- Success state ---- */
.add-member__success {
    text-align: center;
    padding: 8px 4px 4px;
}

.add-member__success-avatar {
    width: 96px;
    height: 96px;
    margin: 0 auto 14px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    position: relative;
}

.add-member__success-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.add-member__success-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2px;
}

.add-member__success-email {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 20px;
}

.add-member__actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

@media (max-width: 575.98px) {
    .add-member__actions {
        grid-template-columns: 1fr;
    }
}

.add-member__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #111827;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}

.add-member__action:hover {
    background: #fff;
    border-color: #cbd5e1;
    color: #111827;
    text-decoration: none;
}

.add-member__action:active {
    transform: translateY(1px);
}

.add-member__action-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
}

.add-member__secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.875rem;
    color: #6b7280;
}

.add-member__secondary button {
    background: none;
    border: none;
    padding: 2px 6px;
    color: #4338ca;
    font-weight: 500;
    cursor: pointer;
}

.add-member__secondary button:hover {
    text-decoration: underline;
}

.add-member__secondary-sep {
    color: #d1d5db;
}

/* ══════════════════════════════════════════════════════════════════
   Till multi-view flow (Empty / Building / Paying)
   ══════════════════════════════════════════════════════════════════ */

.till-flow__view[hidden] { display: none; }

.till-flow__back-link {
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
}
.till-flow__back-link:hover {
    color: var(--admin-club-color, #667eea);
    text-decoration: underline !important;
}

/* ── Shared panel chrome ── */
.till-empty__panel,
.till-paying__panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.till-empty__panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 460px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.till-empty__panel--compact {
    min-height: 0;
    flex: 0 0 auto;
}
.till-empty__panel--compact .till-empty__panel-body {
    gap: 0.75rem;
}
.till-empty__panel--compact .till-empty__search,
.till-empty__panel--compact .till-empty__member-results,
.till-empty__panel--compact .till-empty__divider {
    margin: 0;
}
.till-empty__panel--compact .till-empty__member-results:empty {
    display: none;
}
.till-empty__panel--recent {
    flex: 1 1 auto;
    min-height: 220px;
}
.till-empty__panel .till-empty__panel-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* ── "X or Y" choice layout (Empty view) ── */
.till-empty {
    display: flex;
    flex-direction: column;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    padding: 0.5rem 0 2rem;
    min-height: calc(100vh - 260px);
}
.till-empty__intro {
    text-align: center;
    margin: 1rem 0 1.75rem;
}
.till-empty__prompt {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.4rem 0;
}
.till-empty__subtitle {
    margin: 0;
    color: #6b7280;
    font-size: 0.95rem;
}
.till-empty__choice-row {
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
    flex: 1 1 auto;
}
.till-empty__choice {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}
.till-empty__choice--stacked {
    flex-direction: column;
    gap: 0.5rem;
}
.till-empty__or {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.till-empty__or span {
    background: var(--admin-club-color, #667eea);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    border: 3px solid #fff;
    z-index: 2;
}
@media (max-width: 991.98px) {
    .till-empty__choice-row {
        flex-direction: column;
    }
    .till-empty__or {
        padding: 0.25rem 0;
    }
    .till-empty__or span {
        width: auto;
        height: auto;
        padding: 0.4rem 1.25rem;
        border-radius: var(--radius-pill);
    }
}

.till-empty__panel-header,
.till-paying__panel-header {
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3.5rem;
}
.till-empty__panel-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
}
.till-empty__panel-body,
.till-paying__panel-body {
    padding: 1rem;
}

/* ══════════════════════════════════════════════════════════════════
   EMPTY VIEW
   ══════════════════════════════════════════════════════════════════ */

.till-empty__tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
}
.till-empty__tab-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.till-empty__tab-btn:hover {
    background: #f3f4f6;
    color: #1e293b;
}
.till-empty__tab-btn.active {
    background: var(--admin-club-color, #667eea);
    color: #fff;
}
.till-empty__tab-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}
.till-empty__tab-btn.active .till-empty__tab-count {
    background: rgba(255, 255, 255, 0.25);
}

.till-empty__search {
    margin-bottom: 0.75rem;
}

.till-empty__active-list {
    flex: 1 1 auto;
    min-height: 280px;
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.till-empty__active-list > .cls-empty-state {
    flex: 1 1 auto;
    justify-content: center;
}
.till-empty__active-list.d-none { display: none; }

.till-empty__loading {
    text-align: center;
    color: #6b7280;
    padding: 1.5rem 0.5rem;
    font-size: 0.85rem;
}

.till-empty__active-sale-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.5rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.till-empty__active-sale-row:hover {
    background: #fff;
    border-color: var(--admin-club-color, #667eea);
}
.till-empty__active-sale-row:active { transform: scale(0.99); }
.till-empty__active-sale-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.till-empty__active-sale-info {
    flex-grow: 1;
    min-width: 0;
}
.till-empty__active-sale-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.till-empty__active-sale-detail {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0.1rem 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.till-empty__active-sale-amount {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--admin-club-color, #667eea);
    flex-shrink: 0;
}
.till-empty__active-sale-void {
    background: transparent;
    border: none;
    color: #9ca3af;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    transition: background 0.12s, color 0.12s;
}
.till-empty__active-sale-void:hover {
    background: #fee2e2;
    color: #dc2626;
}

.till-empty__member-results {
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 0.75rem;
}
.till-empty__member-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.5rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
}
.till-empty__member-result:hover {
    background: #fff;
    border-color: var(--admin-club-color, #667eea);
}
.till-empty__member-result-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.till-empty__member-result-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
}
.till-empty__member-result-detail {
    font-size: 0.75rem;
    color: #6b7280;
}

.till-empty__recent-list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.till-empty__recent-list > .cls-empty-state {
    flex: 1 1 auto;
    justify-content: center;
}

.till-empty__section-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

/* Empty-state inside the Till empty view: scaled up so the panels don't
   feel sparse when there are no active sales / no recent members yet. */
.till-empty .cls-empty-state {
    padding: 2.5rem 1rem;
}
.till-empty .cls-empty-state__icon {
    font-size: 2.4rem;
    margin-bottom: 0.75rem;
}
.till-empty .cls-empty-state__img {
    width: 64px;
    height: 64px;
    margin-bottom: 0.85rem;
}
.till-empty .cls-empty-state__text {
    font-size: 0.95rem;
    color: #6b7280;
}

.till-empty__divider {
    text-align: center;
    margin: 0.75rem 0;
    position: relative;
    color: #9ca3af;
    font-size: 0.75rem;
}
.till-empty__divider::before,
.till-empty__divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 1.5rem);
    height: 1px;
    background: #e5e7eb;
}
.till-empty__divider::before { left: 0; }
.till-empty__divider::after { right: 0; }

/* ══════════════════════════════════════════════════════════════════
   BUILDING VIEW (top bar additions; rest reuses existing .till-* classes)
   ══════════════════════════════════════════════════════════════════ */

.till-building__top-bar,
.till-paying__top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.till-building__top-member,
.till-paying__top-member {
    font-size: 0.875rem;
    color: #6b7280;
}
.till-building__top-member strong,
.till-paying__top-member strong {
    color: #1e293b;
}

/* ══════════════════════════════════════════════════════════════════
   PAYING VIEW
   ══════════════════════════════════════════════════════════════════ */

/* The shared `.tillTotal` rule (site.css:629) has legacy asymmetric
   margins (`margin-left: 1%; margin-right: 2%`) that, combined with
   `.tillTotal.value { width: 100% }`, shift the amount box right and
   push its right edge 1% past the panel — misaligning it with the
   keypad grid below. The payment modal already overrides this
   (#paymentModal .tillTotal at site.css:1430); do the same inside
   the paying panel so the amount box sits flush with the keypad. */
#payingKeypadPanel .tillTotal {
    margin-left: 0;
    margin-right: 0;
}

.till-paying__order-mirror {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.till-paying__state {
    margin-bottom: 0.75rem;
}

/* ── Payments card (right column, sits below the order card) ──
   Wraps the synced payments list + totals in a white card so nothing
   floats on the grey page background. Structure mirrors the order card:
   header → body → optional change-due footer.

   flex-shrink: 0 is load-bearing: the right column has a fixed flex
   height (`calc(100vh - 220px)`), so when Order + Payments natural
   content exceeds that, the flex algorithm has to shrink something.
   We want the Order card (which already has an internal scrollbar)
   to absorb all shrinkage so the Payments card can always show every
   row including the Remaining total. Without this, the card's
   `overflow: hidden` forces min-height:auto → 0 and the Remaining
   row gets clipped, producing the "odd bottom padding" effect. */
.till-paying__payments-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* The 55% cap only makes sense when the right column has a hard height
   (tall desktop). On short/mobile viewports the column grows naturally
   and capping the Payments card would leave a long payments list stuck
   behind an internal scrollbar for no reason. */
@media (min-width: 768px) and (min-height: 850px) {
    .till-paying__payments-card { max-height: 55%; }
}
.till-paying__payments-card-header {
    padding: 0.5rem 1rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.till-paying__payments-card-body {
    padding: 0.75rem 1rem;
    /* When the card hits its max-height with many payments, the body
       scrolls while the header + change-due footer stay pinned. */
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
}
.till-paying__payments-card-body .till-payments-table {
    margin-bottom: 0.25rem;
}
/* Strip Bootstrap's default .table cell borders so the payments table
   doesn't create a thicker divider on top of the thin .till-summary__divider. */
.till-paying__payments-card-body .till-payments-table,
.till-paying__payments-card-body .till-payments-table > :not(caption) > * > * {
    border: 0;
}
/* Align payment rows with the Remaining row below: no horizontal cell padding
   so the remove button's left edge sits in line with "Remaining" and the
   amount's right edge sits in line with the Remaining amount. */
.till-paying__payments-card-body .till-payments-table td {
    padding-left: 0;
    padding-right: 0;
}
/* Inline remove button on a payment row — matches .till-order-line__remove:
   small neutral circle that reddens on hover. */
.till-paying__payments-card-body .removePaymentButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0 !important;
    background: transparent;
    border: 1px solid #e5e7eb;
    color: #9ca3af;
    font-size: 0.75rem !important;
    line-height: 1;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.till-paying__payments-card-body .removePaymentButton:hover {
    color: #dc3545;
    background: #fef2f2;
    border-color: #fecaca;
}
.till-paying__payments-card-body .removePaymentButton .fa {
    font-size: 0.75rem;
}
/* The synced .till-summary normally renders as its own bordered card —
   strip that here so it sits flush within the payments card body.
   Sticky-bottom so the Remaining row is always visible when the body
   scrolls (many payments case). */
.till-paying__payments-card-body .till-summary {
    background: #fff;
    border: none;
    border-radius: 0;
    padding: 0.25rem 0 0;
    margin: 0;
    position: sticky;
    bottom: 0;
    z-index: 1;
}
.till-paying__payments-card-body .till-summary__divider {
    border-top: 1px solid #f1f5f9;
    margin: 0.4rem 0;
}
.till-paying__payments-empty {
    color: #6b7280;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.5rem 0;
}

.till-paying__change-due {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #ecfdf5;
    border-top: 1px solid #a7f3d0;
    flex-shrink: 0;
}
.till-paying__change-due-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #047857;
    display: inline-flex;
    align-items: center;
}
.till-paying__change-due-amount {
    font-size: 1.15rem;
    font-weight: 700;
    color: #047857;
}

.till-paying__discounts {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
}

.till-paying__card-entry {
    margin-bottom: 1rem;
}

/* ── Read-only order lines (Paying view's mirror) ──
   Mirrors the two-row layout but with plain text — no stepper or
   click-to-edit chrome, since the line is locked once payment starts. */
.till-order-line--readonly .till-order-line__price-ro,
.till-order-line--readonly .till-order-line__qty-ro {
    font-size: 0.85rem;
    font-weight: 500;
    color: #4b5563;
    font-variant-numeric: tabular-nums;
}
.till-order-line--readonly .till-order-line__fields {
    gap: 8px;
}

/* ══════════════════════════════════════════════════════════════════
   Discount modal — touch-friendly £/% toggle + keypad + summary
   ══════════════════════════════════════════════════════════════════ */

.till-discount-modal .modal-body {
    padding: 1rem 1.25rem;
}
.till-discount-modal__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}
.till-discount-modal__label + .till-discount-modal__label,
.till-discount-modal__chips + .till-discount-modal__label {
    margin-top: 1rem;
}

.till-discount-modal__chips {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}
.till-discount-modal__chip {
    flex: 1 1 0;
    min-height: 80px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.08s;
    color: #374151;
}
.till-discount-modal__chip:hover {
    border-color: var(--admin-club-color, #667eea);
}
.till-discount-modal__chip:active { transform: scale(0.98); }
.till-discount-modal__chip.active {
    background: var(--admin-club-color, #667eea);
    border-color: var(--admin-club-color, #667eea);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.till-discount-modal__chip-icon {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}
.till-discount-modal__chip-label {
    font-size: 0.8rem;
    font-weight: 600;
}

.till-discount-modal__amount {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 0.75rem;
}
.till-discount-modal__amount-prefix {
    font-size: 1.3rem;
    font-weight: 600;
    color: #6b7280;
}
.till-discount-modal__amount-value {
    flex: 1 1 auto;
    font-size: 1.8rem;
    font-weight: 700;
    color: #111827;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.till-discount-modal__clear {
    background: transparent;
    border: none;
    color: #9ca3af;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background 0.12s, color 0.12s;
}
.till-discount-modal__clear:hover {
    background: #fee2e2;
    color: #dc2626;
}

.till-discount-modal__keypad {
    margin-bottom: 1rem;
}
.till-discount-modal__keypad .tillButton {
    min-height: 54px;
    font-size: 1.25rem;
}

.till-discount-modal__summary {
    text-align: center;
    font-size: 0.95rem;
    color: #4b5563;
    padding: 0.65rem 0.85rem;
    background: #f3f4f6;
    border-radius: var(--radius-md);
}
.till-discount-modal__summary strong {
    color: var(--admin-club-color, #667eea);
}

/* ══════════════════════════════════════════════════════════════════
   OPERATOR PICKER MODAL (#tillStaffModal)
   Replaces the old inline catalog swap — staff are picked from a
   grid of avatar tiles inside a modal so the operator can be changed
   from any till view without wiping the product grid.
   ══════════════════════════════════════════════════════════════════ */
.till-staff-modal__hint {
    font-size: 0.875rem;
    color: #6b7280;
}

.till-staff-modal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 2px;
}

.till-staff-modal__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #111827;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.08s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.till-staff-modal__item:hover {
    background: #f9fafb;
    border-color: #cbd5e1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
.till-staff-modal__item:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
.till-staff-modal__item--active {
    border-color: #e8651a;
    background: #fff7ed;
    box-shadow: 0 0 0 2px rgba(232, 101, 26, 0.15);
}

.till-staff-modal__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.till-staff-modal__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.till-staff-modal__name {
    line-height: 1.25;
    word-break: break-word;
}

.till-staff-modal__check {
    position: absolute;
    top: 6px;
    right: 8px;
    color: #e8651a;
    font-size: 0.95rem;
}

/* =========================================================================
   Club Overview — the admin entry page
   ========================================================================= */

.club-overview {
    --co-bg: #1f2937;
    --co-text: #ffffff;
    --co-accent: #4f46e5;
    --co-surface: #ffffff;
    --co-ink: #0f172a;
    --co-ink-soft: #475569;
    --co-ink-mute: #94a3b8;
    --co-line: #e2e8f0;
    --co-line-soft: #eef2f7;
    --co-ok: #16a34a;
    --co-warn: #f59e0b;
    --co-danger: #dc2626;
    padding-bottom: 32px;
}

/* Hide the admin sidebar on the Club Overview — the tiles ARE the nav here. */
/* Sidebar reappears on all other pages; its "Home" link returns to this view. */
/* User can still reveal it temporarily by clicking the hamburger in the top header. */
/* Note: selector mirrors (and beats) the existing 1200px+ "keep sidebar visible" rule. */
html:not([dir="rtl"]) body:has(.club-overview) #sidebar.admin-sidebar.sidebar-self-hiding:not(.show):not(.sidebar-end) {
    margin-left: calc(-1 * (15.5rem + 2px)) !important;
}

/* Extra specificity — matches the existing 1200px+ sidebar-push rule then adds :has(.club-overview) on top. */
/* Only remove the wrapper margin when the sidebar is HIDDEN — when the user toggles it open, */
/* fall through to the default rule so content gets pushed right instead of being covered. */
body:has(.club-overview):has(#sidebar.admin-sidebar:not(.show)) .wrapper {
    margin-left: 0 !important;
    width: 100% !important;
}

/* -- Hero -- */
.club-overview__hero {
    position: relative;
    color: var(--co-text);
    overflow: hidden;
    padding: 32px 0 40px;
    min-height: 280px;
    border-radius: 0;
    background: var(--co-bg);
    /* Break out of container padding so the hero spans the viewport edge-to-edge. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -16px;
}

.club-overview__hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--co-bg);
    z-index: 0;
}

.club-overview__hero-image--gradient {
    background: radial-gradient(1000px 500px at 0% 0%, rgba(255, 255, 255, 0.12), transparent 60%),
                radial-gradient(800px 400px at 100% 100%, rgba(255, 255, 255, 0.08), transparent 60%),
                linear-gradient(135deg, var(--co-bg) 0%, color-mix(in srgb, var(--co-bg) 70%, black) 100%);
}

.club-overview__hero-veil {
    position: absolute;
    inset: 0;
    /* #39977 — twin-gradient scrim sized for the worst case: a bright/white
       club photo (snowy exterior, pool with sun, white-walled studio). The
       horizontal gradient stays heavy until ~60% so the text block sits over
       a guaranteed-dark zone; the vertical gradient keeps the lower strip
       dark for the headline tiles. */
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.78) 0%, rgba(15, 23, 42, 0.55) 60%, rgba(15, 23, 42, 0.18) 100%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.30) 0%, rgba(15, 23, 42, 0.55) 60%, rgba(15, 23, 42, 0.85) 100%);
    z-index: 1;
}

/* #39977 — when a hero photo is in play, force white text and stack a
   multi-layer dark halo so glyph edges always have a dark outline. This is
   the belt-and-braces layer for bright/light photos: even if a club uploads
   a near-white image, the halo gives every letter its own ~3px dark border
   and the heavier scrim above guarantees a dark backdrop in the text zone. */
.club-overview__hero:has(.club-overview__hero-image:not(.club-overview__hero-image--gradient)) .club-overview__hero-text,
.club-overview__hero:has(.club-overview__hero-image:not(.club-overview__hero-image--gradient)) .club-overview__hero-eyebrow,
.club-overview__hero:has(.club-overview__hero-image:not(.club-overview__hero-image--gradient)) .club-overview__hero-title,
.club-overview__hero:has(.club-overview__hero-image:not(.club-overview__hero-image--gradient)) .club-overview__hero-status {
    color: #ffffff;
    text-shadow:
        0 0 2px rgba(0, 0, 0, 0.85),
        0 0 6px rgba(0, 0, 0, 0.7),
        0 1px 3px rgba(0, 0, 0, 0.6),
        0 2px 18px rgba(0, 0, 0, 0.35);
}

.club-overview__menu-btn {
    position: absolute;
    top: 20px;
    left: clamp(20px, 2.5vw, 36px);
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    /* #41298 — follow --co-text (the contrast colour computed for the club
       background) instead of a hardcoded white. The old white icon vanished
       against light club schemes in the gradient (no-photo) hero; --co-text is
       dark on light backgrounds and light on dark ones, so it stays visible. */
    background: color-mix(in srgb, var(--co-text) 14%, transparent);
    color: var(--co-text);
    font-size: 0.85rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    opacity: 0.85;
}

.club-overview__menu-btn:hover {
    background: color-mix(in srgb, var(--co-text) 26%, transparent);
    color: var(--co-text);
    opacity: 1;
}

/* #41298 — with a hero photo the text is forced white over the dark scrim
   (see the hero-text rule above); the menu button sits over that same scrim,
   so force it white too rather than following --co-text (which tracks the club
   background colour, not the photo). */
.club-overview__hero:has(.club-overview__hero-image:not(.club-overview__hero-image--gradient)) .club-overview__menu-btn {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.club-overview__hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    max-width: 1760px;
    margin: 0 auto;
    padding: 20px clamp(16px, 2.5vw, 32px) 0;
}

.club-overview__hero-text {
    flex: 1 1 340px;
    /* #39977 — keep the text block in the dark left zone of the scrim so
       bright/light photos don't bleed under the right edge of the status line. */
    max-width: min(640px, 60%);
}

.club-overview__hero-eyebrow {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.club-overview__hero-title {
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 12px 0;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

.club-overview__hero-status {
    font-size: 1.05rem;
    line-height: 1.5;
    max-width: 62ch;
    margin: 0;
    opacity: 0.95;
}

.club-overview__hero-logo {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    background: #fff;
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    display: grid;
    place-items: center;
}

.club-overview__hero-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* -- Headlines (inside hero) -- */
/* Match the hero-content horizontal padding so the tile row lines up with */
/* the eyebrow/title text on the left and spans the full hero width. */
/* KPI row wraps the sparkline tiles + the operational metric chips so they
   sit side-by-side at the bottom of the hero. Tiles take the bulk of the
   width; chips are a compact supporting rail on the right. */
.club-overview__kpi-row {
    position: relative;
    z-index: 2;
    margin: 28px auto 0 auto;
    max-width: 1760px;
    padding: 0 clamp(16px, 2.5vw, 32px);
    display: grid;
    /* #41883 — give the metrics a wide band so 5 chips fit per row (→ at most 2
       rows for the usual 7–10 chips). The trend tiles take the flexible
       remainder. */
    grid-template-columns: minmax(0, 1fr) minmax(560px, 680px);
    gap: 16px;
    align-items: stretch;
}

.club-overview__headlines,
.club-overview__metrics {
    align-self: stretch;
}

@media (max-width: 1100px) {
    .club-overview__kpi-row {
        grid-template-columns: 1fr;
    }
}

.club-overview__headlines {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    min-width: 0;
}

.club-overview__headline {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: 12px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--co-ink);
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    backdrop-filter: blur(4px);
}

.club-overview__headline:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.24);
    color: var(--co-ink);
    text-decoration: none;
}

.club-overview__headline-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--co-accent) 12%, white);
    color: var(--co-accent);
    font-size: 1rem;
}

.club-overview__headline--warning .club-overview__headline-icon { background: #fef3c7; color: #b45309; }
.club-overview__headline--danger  .club-overview__headline-icon { background: #fee2e2; color: #b91c1c; }
.club-overview__headline--positive .club-overview__headline-icon { background: #dcfce7; color: #15803d; }

.club-overview__headline-body {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.club-overview__headline-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--co-ink);
}

.club-overview__headline-label {
    font-size: 0.78rem;
    color: var(--co-ink-soft);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.club-overview__headline-subtitle {
    font-size: 0.72rem;
    color: var(--co-ink-mute, var(--co-ink-soft));
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

/* Sparkline lives in row 2 of the headline tile grid, spanning the full
   width below the icon + body row. Only rendered for tiles that have a
   trend; min-height on the tile keeps the strip visually consistent
   whether or not a sparkline is present. align-self: end pushes the
   sparkline to the bottom of the row even when the tile is taller than
   its natural content. */
.club-overview__headline-spark {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
    margin-top: 4px;
    height: 30px;
    width: 100%;
    position: relative;
}

.club-overview__headline-spark-canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

/* Subtle fill under the line for the warning/danger variants so the trend
   reads against the warmer tile background. Without this the default accent
   stroke is the only colour and the sparkline can disappear visually. */
.club-overview__headline--with-trend {
    overflow: hidden;
}

/* -- Operational metric chips (right side of the hero KPI row) --
   Compact, lower-contrast counterparts to the headline sparkline tiles,
   tinted by accent so things-to-chase (danger/warning) jump out from the
   watchlist neutrals. #41883: a left-packing wrap (not a fixed-column grid)
   so any count — 5, 6, 7 chips, or a gated subset — fills tidily with a
   ragged-right toolbar edge rather than a lone orphan or an empty cell. */
.club-overview__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
}

.club-overview__metrics .club-overview__metric {
    /* #41883 — target ~1/5 of the row so the second row holds up to 5 chips,
       while a short row still grows to fill flush (flex-grow distributes the
       slack). Row 1's 4 key chips therefore grow to ~25% each. No lone
       full-width banner, no sparse trailing cells. */
    flex: 1 1 calc(20% - 6px);
    min-width: 108px;
}

/* Zero-height full-width flex break: forces the chips after the 4 key ones onto
   a second row so the rail is always at most two rows (4 on top, up to 5 below). */
.club-overview__metrics-break {
    flex: 0 0 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

/* Reduced (staff) view keeps the same packing; kept as an explicit hook for
   any future tweaks to the no-headlines layout. */
.club-overview__metrics--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.club-overview__metric {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--co-ink);
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.12s ease;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.club-overview__metric:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    color: var(--co-ink);
    text-decoration: none;
}

.club-overview__metric-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.78rem;
    flex: none;
}

.club-overview__metric--warning .club-overview__metric-icon { background: #fef3c7; color: #b45309; }
.club-overview__metric--danger  .club-overview__metric-icon { background: #fee2e2; color: #b91c1c; }
.club-overview__metric--positive .club-overview__metric-icon { background: #dcfce7; color: #15803d; }
.club-overview__metric--info     .club-overview__metric-icon { background: #dbeafe; color: #1d4ed8; }

.club-overview__metric-body {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.club-overview__metric-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--co-ink);
    font-variant-numeric: tabular-nums;
}

.club-overview__metric-label {
    font-size: 0.7rem;
    color: var(--co-ink-soft);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Optional third line — used by the Overdue chip to show the £ owed under
   the count. Only the featured chip carries one today. */
.club-overview__metric-subtitle {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--co-ink-soft);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- Featured chip (Overdue) --
   A filled treatment so the money-to-chase signal stands out among the
   lighter watchlist chips, echoing the classic dashboard's red Unpaid tile,
   without being promoted to a full headline tile. Red = money outstanding,
   green = all paid up. */
.club-overview__metric--featured.club-overview__metric--danger {
    background: #dc2626;
    border-color: #dc2626;
}

.club-overview__metric--featured.club-overview__metric--danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

.club-overview__metric--featured.club-overview__metric--positive {
    background: #16a34a;
    border-color: #16a34a;
}

.club-overview__metric--featured.club-overview__metric--positive:hover {
    background: #15803d;
    border-color: #15803d;
}

.club-overview__metric--featured.club-overview__metric--danger .club-overview__metric-value,
.club-overview__metric--featured.club-overview__metric--danger .club-overview__metric-label,
.club-overview__metric--featured.club-overview__metric--danger .club-overview__metric-subtitle,
.club-overview__metric--featured.club-overview__metric--positive .club-overview__metric-value,
.club-overview__metric--featured.club-overview__metric--positive .club-overview__metric-label,
.club-overview__metric--featured.club-overview__metric--positive .club-overview__metric-subtitle {
    color: #fff;
}

.club-overview__metric--featured .club-overview__metric-icon {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* -- Live activity ticker (collapsed by default) --
   Single-line strip showing the most-recent event + count; clicking the
   strip expands the full feed inline. Replaces the always-on Recent
   activity panel which was pushing the worklists off the page. */
.co-ticker {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.co-ticker--empty {
    background: #f8fafc;
    border-style: dashed;
}

/* Bar wrapper holds the toggle button on the left and any siblings (e.g. the
   alerts chip) on the right so they share the row without nesting buttons. */
.co-ticker__bar {
    display: flex;
    align-items: stretch;
}

.co-ticker__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--co-ink);
    font: inherit;
    transition: background 0.12s ease;
}

.co-ticker__head:hover {
    background: rgba(15, 23, 42, 0.03);
}

.co-ticker--empty .co-ticker__head {
    cursor: default;
}

.co-ticker--empty .co-ticker__head:hover {
    background: transparent;
}

.co-ticker__pulse {
    position: relative;
    width: 10px;
    height: 10px;
    flex: none;
}

.co-ticker__pulse-dot {
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
    animation: co-ticker-pulse 1.6s ease-out infinite;
}

.co-ticker--empty .co-ticker__pulse-dot {
    background: #cbd5e1;
    animation: none;
    box-shadow: none;
}

@keyframes co-ticker-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.co-ticker__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--co-ink);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: none;
}

.co-ticker__latest {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--co-ink-soft);
}

.co-ticker__latest-time {
    color: #94a3b8;
    margin-left: 4px;
}

.co-ticker__count {
    flex: none;
    background: #f1f5f9;
    color: #475569;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.co-ticker__chevron {
    flex: none;
    color: #94a3b8;
    font-size: 0.8rem;
    transition: transform 0.18s ease;
}

.co-ticker[data-co-ticker-open] .co-ticker__chevron {
    transform: rotate(180deg);
}

.co-ticker[data-co-ticker-open] .co-ticker__head {
    border-bottom: 1px solid #f1f5f9;
}

.co-ticker__feed {
    padding: 4px 16px 14px;
    max-height: 360px;
    overflow-y: auto;
}

.co-ticker__feed .co-stream__list {
    margin: 0;
    padding: 0;
    /* #41934 — the feed wrapper (.co-ticker__feed) is already the scroll container
       (max-height + overflow-y:auto). The standalone .co-stream__list also caps its
       own height and scrolls, so inside the ticker the two nested scrollers showed a
       double scrollbar. Let the wrapper be the only scroller here. */
    max-height: none;
    overflow: visible;
}

/* Tighten the Tasks / Messages panel scroll caps so a long task list
   doesn't push the Messages panel below the fold. ~340px is roughly four
   rows visible — the rest is one scroll inside the panel. */
.club-overview__cols .front-desk__tasks-list,
.club-overview__cols .front-desk__messages-list {
    max-height: 340px;
}

/* -- Body grid: tiles down the left full-height; right area split into two rows
   Top right row hosts the In-Club members pane (capped height, scrolls).
   Bottom right row holds stream | graphs. Classes "happening next" lives at
   the top of the stream column rather than the live pane — keeps it adjacent
   to the activity feed it relates to and frees the live pane for at-a-glance
   member presence only. */
.club-overview__body {
    padding: 24px clamp(16px, 2.5vw, 32px) 0;
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    max-width: 1760px;
    margin: 0 auto;
}

.club-overview__side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Children of the side column manage their own spacing via margin-bottom
   defaults (.co-panel, .beta-banner). Zero those out so the only gap is
   the flex gap above — keeps the rhythm consistent with the main column. */
.club-overview__side > .co-panel,
.club-overview__side > .beta-banner {
    margin-bottom: 0;
}

/* Classes-happening-next is now narrow (in the side column). Tighten the
   slot rows so time + name + count fit on one line without wrapping. */
.club-overview__side .co-slot__time {
    font-size: 0.72rem;
}
.club-overview__side .co-slot__name {
    font-size: 0.85rem;
    min-width: 0;
}
.club-overview__side .co-slot__count {
    font-size: 0.72rem;
}

.club-overview__main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* The panel default sets margin-bottom: 14px which stacks on top of the
   flex gap above and gives a visually inconsistent gap between rows. Zero
   it out inside the main column so the only spacing is the flex gap. */
.club-overview__main > .co-panel {
    margin-bottom: 0;
}

/* Two-column inner grid for the main column: Classes/activity (col 1) +
   Tasks/Messages (col 2). Each column flows top-down with the same gap. */
.club-overview__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.club-overview__col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.club-overview__col > .co-panel {
    margin-bottom: 0;
}

/* Medium: collapse the inner two-column to a single column */
@media (max-width: 1100px) {
    .club-overview__cols {
        grid-template-columns: 1fr;
    }
}

/* Narrow: stack side + main */
@media (max-width: 900px) {
    .club-overview__body {
        grid-template-columns: 1fr;
    }
}


/* -- Tiles -- */
.club-overview-tiles {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.club-overview-tiles__primary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.co-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: block;
}

.co-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.22);
    color: #fff;
    text-decoration: none;
}

.co-tile__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.co-tile:hover .co-tile__image {
    transform: scale(1.06);
}

.co-tile__image--fallback {
    background: linear-gradient(135deg, var(--co-accent) 0%, color-mix(in srgb, var(--co-accent) 60%, #0f172a) 100%);
}

.co-tile__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.55) 70%, rgba(15, 23, 42, 0.85) 100%);
}

.co-tile__body {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px 14px 14px;
    gap: 2px;
}

.co-tile__icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    font-size: 0.95rem;
}

.co-tile__title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.co-tile__subtitle {
    font-size: 0.78rem;
    opacity: 0.85;
}

/* -- Mini tiles (secondary) -- */
.club-overview-tiles__secondary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
}

.co-mini-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    border-radius: var(--radius-lg);
    background: var(--co-surface);
    color: var(--co-ink-soft);
    text-decoration: none;
    border: 1px solid var(--co-line);
    transition: all 0.15s ease;
    min-height: 74px;
}

.co-mini-tile:hover {
    border-color: var(--co-accent);
    color: var(--co-accent);
    transform: translateY(-1px);
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.co-mini-tile__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--co-accent) 10%, white);
    color: var(--co-accent);
}

.co-mini-tile__label {
    font-size: 0.78rem;
    font-weight: 500;
}

/* -- Notifications drawer (Alerts mini-tile) -- */
.notifications-drawer { width: 420px; max-width: 100%; }
.notifications-drawer__header {
    align-items: flex-start;
    border-bottom: 1px solid var(--co-line, #e5e7eb);
}
.notifications-drawer__header-text { flex: 1; }
.notifications-drawer__title { display: flex; align-items: center; gap: 8px; margin: 0; }
.notifications-drawer__title .fa { color: var(--status-warning-fg, #f59e0b); }
.notifications-drawer__subtitle {
    font-size: 0.78rem;
    color: var(--co-ink-soft, #6b7280);
    margin-top: 2px;
}
.notifications-drawer__body { padding: 0; }
.notifications-drawer__list { display: flex; flex-direction: column; }
.notifications-drawer__row {
    padding: 12px 16px;
    border-bottom: 1px solid var(--co-line, #f1f5f9);
    transition: opacity 0.15s ease;
}
.notifications-drawer__row--going { opacity: 0.4; }
.notifications-drawer__row--short { background: color-mix(in srgb, var(--status-success-bg, #16a34a) 8%, transparent); }
.notifications-drawer__row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.notifications-drawer__row-date { font-size: 0.72rem; color: var(--co-ink-soft, #6b7280); }
.notifications-drawer__row-member { font-size: 0.78rem; font-weight: 600; }
.notifications-drawer__row-message { font-size: 0.88rem; line-height: 1.35; margin-bottom: 8px; }

/* #40402 — when the notification references a member, the message body becomes
   a tap target. Keep the visual neutral so the toast still reads like a toast,
   but cue interactivity on hover. */
a.notifications-drawer__row-message {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
a.notifications-drawer__row-message:hover,
a.notifications-drawer__row-message:focus {
    color: #1d4ed8;
    text-decoration: underline;
}
.notifications-drawer__row-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.notifications-drawer__footer {
    padding: 12px 16px;
    border-top: 1px solid var(--co-line, #e5e7eb);
    display: flex;
    justify-content: flex-end;
}
.notifications-drawer__empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--co-ink-soft, #6b7280);
}
.notifications-drawer__empty .fa { font-size: 2rem; color: var(--status-success-fg, #16a34a); margin-bottom: 8px; }
.notifications-drawer__empty-title { font-weight: 600; margin-bottom: 2px; }
.notifications-drawer__empty-text { font-size: 0.85rem; }
.notifications-drawer__error {
    padding: 16px;
    color: var(--status-danger-fg, #dc3545);
    font-size: 0.88rem;
}

/* -- Dashboards block (per-dashboard tiles) -- */
.co-dashboards {
    margin-top: 4px;
}

.co-dashboards__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 8px 4px;
}

.co-dashboards__title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--co-ink-soft);
}

/* #39957 — "+ Create dashboard" affordance. The bare red plus square read as
   a placeholder so we now show an icon + label pill that names the action. */
.co-dashboards__add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--co-accent) 12%, white);
    color: var(--co-accent);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}

.co-dashboards__add i {
    font-size: 0.7rem;
}

.co-dashboards__add:hover {
    background: var(--co-accent);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Dashboard cards: name + icon + link only — no inline actions. Editing,
   adding tiles, and setting defaults live on the dashboard page itself. */
.co-dash-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 8px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    background: var(--co-surface);
    border: 1px solid var(--co-line);
    text-align: center;
    text-decoration: none;
    color: var(--co-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.co-dash-card:hover {
    border-color: var(--co-accent);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--co-ink);
}

.co-dash-card--default {
    border-color: color-mix(in srgb, var(--co-accent) 35%, var(--co-line));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--co-accent) 20%, transparent);
}

.co-dash-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.1);
}

.co-dash-card__title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--co-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1.2;
    min-width: 0;
}

.co-dash-card__star {
    color: #f59e0b;
    font-size: 0.7rem;
}

.co-dashboards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.co-dash-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 6px;
    border-radius: var(--radius-lg);
    background: var(--co-surface);
    color: var(--co-ink-soft);
    text-decoration: none;
    border: 1px solid var(--co-line);
    transition: all 0.15s ease;
    min-height: 78px;
    position: relative;
}

.co-dash-tile:hover {
    border-color: var(--co-accent);
    color: var(--co-accent);
    transform: translateY(-1px);
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.co-dash-tile__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    border-radius: 10px;
    background: var(--co-accent);
    color: #fff;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.1);
}

.co-dash-tile__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--co-ink);
    text-align: center;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.co-dash-tile__default {
    position: absolute;
    top: 6px;
    right: 6px;
    color: #f59e0b;
    font-size: 0.75rem;
}

.co-dashboards__empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--co-surface);
    border: 1px dashed var(--co-line);
    color: var(--co-ink);
    text-decoration: none;
    transition: all 0.15s ease;
}

.co-dashboards__empty:hover {
    border-color: var(--co-accent);
    border-style: solid;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
    color: var(--co-ink);
    text-decoration: none;
    transform: translateY(-1px);
}

.co-dashboards__empty-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--co-accent) 12%, white);
    color: var(--co-accent);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.co-dashboards__empty-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.co-dashboards__empty-title {
    font-size: 0.95rem;
    font-weight: 600;
}

.co-dashboards__empty-hint {
    font-size: 0.78rem;
    color: var(--co-ink-soft);
    margin-top: 2px;
}

.co-dashboards__empty-chevron {
    color: var(--co-ink-mute);
    flex-shrink: 0;
}

/* -- Separate panels for In-club / Classes / Activity -- */
.co-panel {
    background: var(--co-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--co-line);
    padding: 14px 16px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    margin-bottom: 14px;
}

.co-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 10px;
}

.co-panel__label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--co-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.co-panel__label i {
    color: var(--co-accent);
    font-size: 0.85rem;
}

.co-panel__count {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: rgba(15, 23, 42, 0.06);
    color: var(--co-ink-soft);
    font-size: 0.78rem;
    font-weight: 600;
    margin-left: 6px;
}

.co-panel__link {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--co-ink-soft);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.co-panel__link:hover {
    color: var(--co-accent);
    text-decoration: none;
}

/* #41239 — Welcome screen / Open Gate panel (home page). Mirrors the old
   dashboard _Terminal widget: online/recent/offline status + a prominent
   Open Gate action when the screen is online. Colours come from the shared
   co- status tokens; the gate button uses the club accent. */
.co-welcome__state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--co-ink-soft);
}

.co-welcome__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--co-ink-soft);
}

.co-welcome--online .co-welcome__state {
    color: var(--co-ok);
}

.co-welcome--online .co-welcome__dot {
    background: var(--co-ok);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
    animation: co-pulse 1.6s ease-out infinite;
}

.co-welcome--recent .co-welcome__state {
    color: var(--co-warn);
}

.co-welcome--recent .co-welcome__dot {
    background: var(--co-warn);
}

.co-welcome--offline .co-welcome__state {
    color: var(--co-danger);
}

.co-welcome--offline .co-welcome__dot {
    background: var(--co-danger);
}

.co-welcome__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.co-welcome__seen,
.co-welcome__hint {
    margin: 0;
    font-size: 0.78rem;
    color: var(--co-ink-soft);
}

.co-welcome__gate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--co-accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.co-welcome__gate:hover {
    filter: brightness(0.95);
}

.co-welcome__gate:disabled {
    opacity: 0.6;
    cursor: default;
}

.co-welcome__msg {
    margin-top: 2px;
}

.co-welcome__msg:empty {
    display: none;
}

/* In-club panel — subtle warm accent */
.co-panel--in-club {
    background: linear-gradient(180deg, #fffaf3 0%, #ffffff 60%);
    border-color: #fde9c9;
}

/* When the in-club panel sits in the live pane (top-right area of the body grid)
   we cap its height so it shows ~2.5 rows of cards and scrolls — mirrors the old
   dashboard widget rather than letting the panel grow indefinitely and push the
   stream + graphs row off screen. */
.co-panel--in-club-pane {
    display: flex;
    flex-direction: column;
    max-height: 310px;
}

.co-panel--in-club-pane .co-live-cards--scroll {
    overflow-y: auto;
    padding-right: 4px;
    /* Show roughly 2.5 rows before scrolling — at minmax(220px, 1fr) and
       100px card height + 10px gap, that's ~3 rows of cards visible. */
    flex: 1 1 auto;
}

.co-panel--in-club .co-panel__label i {
    color: #c2410c;
}

/* Classes panel — diary blue accent */
.co-panel--classes {
    background: linear-gradient(180deg, #eef4ff 0%, #ffffff 60%);
    border-color: #c7d9fb;
}

.co-panel--classes .co-panel__label i {
    color: #2563eb;
}

/* Wrapping grid of in-club member cards. Auto-fills the available width so the
   panel reads as a "wall of attendance" — see who's on-site at a glance instead
   of a horizontal scroll that hides anyone past card 3. */
.co-live-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    padding: 2px 2px 4px;
}

.co-live-card {
    min-height: 100px;
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #fde9c9;
    color: var(--co-ink);
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.co-live-cards__more {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    background: transparent;
    border: 1px dashed #fde9c9;
    color: var(--co-ink-soft);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: border-color 0.12s ease, color 0.12s ease;
}

.co-live-cards__more:hover {
    border-color: var(--co-accent);
    color: var(--co-accent);
    text-decoration: none;
}

/* Empty state shown inside the in-club pane when nobody's checked in. Keeps the
   pane present at a consistent size so the layout doesn't shift when the first
   member checks in. */
.co-live-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    color: var(--co-ink-soft);
    flex: 1 1 auto;
}

.co-live-empty__icon {
    font-size: 1.8rem;
    color: #c2410c;
    margin-bottom: 10px;
    opacity: 0.7;
}

.co-live-empty__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--co-ink);
    margin-bottom: 4px;
}

.co-live-empty__hint {
    font-size: 0.8rem;
    color: var(--co-ink-soft);
}

/* #39959 — toggle chips that filter the live in-club list. Sit just below the
   panel header, above the wrapping card grid. Visual language matches the
   small filter pills used elsewhere in the admin (rounded-pill, tinted bg
   when active) so the affordance reads instantly. */
.co-live-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 2px 8px;
}

/* #39997 — When the filter chips are rendered inline with the panel heading
   (Front Desk variant), drop the bottom padding and pull the chip group to
   the right so it sits between the heading and "View all". */
.co-panel__header--with-filters {
    flex-wrap: wrap;
    gap: 8px;
}

.co-panel__header--with-filters .co-live-filters {
    padding: 0;
    margin-left: auto;
}

.co-live-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--co-line);
    background: var(--co-surface);
    color: var(--co-ink-soft);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}

.co-live-filter i {
    font-size: 0.75rem;
}

.co-live-filter__count {
    background: rgba(15, 23, 42, 0.08);
    color: var(--co-ink);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 0.7rem;
    font-weight: 700;
}

.co-live-filter:hover {
    color: var(--co-accent);
    border-color: var(--co-accent);
}

.co-live-filter--active {
    background: color-mix(in srgb, var(--co-accent) 12%, white);
    border-color: var(--co-accent);
    color: var(--co-accent);
}

.co-live-filter--active .co-live-filter__count {
    background: var(--co-accent);
    color: #fff;
}

.co-live-filter--danger {
    color: #b91c1c;
}

.co-live-filter--danger:hover,
.co-live-filter--danger.co-live-filter--active {
    background: #fef2f2;
    border-color: #dc2626;
    color: #b91c1c;
}

.co-live-filter--danger.co-live-filter--active .co-live-filter__count {
    background: #dc2626;
    color: #fff;
}

.co-live-empty--filtered {
    padding: 16px 20px;
}

.co-live-card:hover {
    text-decoration: none;
    color: var(--co-ink);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.co-live-card--warn {
    background: #fffaf0;
    border-color: #fde68a;
}

.co-live-card--danger {
    background: #fff5f5;
    border-color: #fecaca;
}

.co-live-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--co-accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.co-live-card__avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* On Gravatar 404 the inline onerror handler removes this element, exposing
       the initials underneath. */
}

.co-live-card__initials {
    /* Sat in the same grid cell as the <img>; image covers it when it loads. */
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.co-live-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.25;
}

.co-live-card__name {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--co-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.co-live-card__flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 2px 0;
}

.co-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.co-flag--danger {
    background: #fee2e2;
    color: #b91c1c;
}

.co-flag--warn {
    background: #fef3c7;
    color: #b45309;
}

.co-live-card__time {
    font-size: 0.78rem;
    color: var(--co-ink-soft);
}
/* #41553 — actual scan-in clock time per card (CCTV cross-reference) */
.co-live-card__scanin {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--co-ink);
}
.co-live-card__scanin i {
    margin-right: 3px;
    font-weight: 400;
    color: var(--co-ink-soft);
}

.co-live-card__status {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.co-live-card__status--leave {
    color: #b91c1c;
}

.co-live-card__message {
    font-size: 0.75rem;
    color: var(--co-ink-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
}

.co-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: var(--radius-pill);
    background: #f1f5f9;
    color: var(--co-ink);
    text-decoration: none;
    border: 1px solid transparent;
    font-size: 0.78rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    max-width: 100%;
}

.co-chip:hover {
    text-decoration: none;
    color: var(--co-ink);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.co-chip--warn {
    background: #fef3c7;
    border-color: #fde68a;
}

.co-chip--danger {
    background: #fee2e2;
    border-color: #fecaca;
}

.co-chip__avatar {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--co-accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}

.co-chip__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.co-chip__flag {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--co-danger);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    border: 1.5px solid #fff;
}

.co-chip--warn .co-chip__flag { background: var(--co-warn); }

.co-chip__body {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
    max-width: 120px;
}

.co-chip__name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.co-chip__time {
    font-size: 0.75rem;
    color: var(--co-ink-soft);
}

.co-chip__alert {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--co-danger);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.co-chip--warn .co-chip__alert { color: #b45309; }

.co-chip--overflow {
    background: transparent;
    border: 1px dashed var(--co-line);
    color: var(--co-ink-soft);
}

.co-chip--overflow .co-chip__avatar {
    background: var(--co-line);
    color: var(--co-ink-soft);
    font-size: 0.75rem;
}

/* Class slots (inside .co-panel--classes) */
.co-slots {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.co-slot a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--co-ink);
    text-decoration: none;
    transition: background-color 0.12s ease;
    font-size: 0.82rem;
    border: 1px solid #e4edff;
}

.co-slot a:hover {
    background: #f4f8ff;
    color: var(--co-ink);
    text-decoration: none;
    border-color: #c7d9fb;
}

.co-slot--live a {
    background: rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.22);
}

.co-slot__time {
    flex-shrink: 0;
    width: 90px;
    font-weight: 600;
    color: var(--co-ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
}

.co-slot__live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--co-ok);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
    animation: co-pulse 1.6s ease-out infinite;
}

.co-slot--live .co-slot__time {
    color: var(--co-ok);
}

.co-slot__name {
    flex: 1;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.co-slot__flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.co-slot__flag--danger {
    background: #fee2e2;
    color: #b91c1c;
}

.co-slot__flag--warn {
    background: #fef3c7;
    color: #b45309;
}

.co-slot__count {
    font-size: 0.75rem;
    flex-shrink: 0;
    text-align: right;
    min-width: 120px;
}

.co-slot__count-primary {
    color: var(--co-ink);
    font-weight: 600;
}

.co-slot__count-muted {
    color: var(--co-ink-mute);
    font-style: italic;
}

.co-slot__chevron {
    color: var(--co-ink-mute);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.co-slot a:hover .co-slot__chevron {
    color: #2563eb;
}

.co-stream__divider {
    margin: 14px 0 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--co-ink-mute);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    position: relative;
    padding-left: 10px;
}

.co-stream__divider::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--co-line);
    transform: translateY(-50%);
}

/* -- Activity stream -- */
.co-stream {
    background: var(--co-surface);
    border-radius: 18px;
    border: 1px solid var(--co-line);
    padding: 18px 20px 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.co-stream__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.co-stream__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--co-ink);
    display: flex;
    align-items: center;
    gap: 10px;
}

.co-stream__title-icon {
    color: var(--co-accent);
    font-size: 0.95rem;
}

.co-stream__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--co-ok);
    background: #dcfce7;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.co-stream__live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--co-ok);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
    animation: co-pulse 1.6s ease-out infinite;
}

@keyframes co-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.co-stream__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 520px;
    overflow-y: auto;
    overflow-x: hidden;
}

.co-stream-item-wrap {
    list-style: none;
}

.co-stream-item-wrap:last-child .co-stream-item {
    border-bottom: none;
}

.co-stream-item {
    display: flex;
    gap: 12px;
    padding: 12px 10px;
    margin: 0 -10px;
    border-bottom: 1px solid var(--co-line-soft);
    align-items: flex-start;
    border-radius: 10px;
    color: var(--co-ink);
    text-decoration: none;
    transition: background-color 0.12s ease, transform 0.12s ease;
}

.co-stream-item--linked {
    cursor: pointer;
}

.co-stream-item--linked:hover {
    background: #f8fafc;
    color: var(--co-ink);
    text-decoration: none;
}

.co-stream-item--linked:hover .co-stream-item__action {
    transform: translateX(2px);
}

.co-stream-item__visual {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--co-accent) 10%, white);
    color: var(--co-accent);
    overflow: hidden;
}

.co-stream-item--warning .co-stream-item__visual { background: #fef3c7; color: #b45309; }
.co-stream-item--danger  .co-stream-item__visual { background: #fee2e2; color: #b91c1c; }

.co-stream-item--positive .co-stream-item__visual { background: #dcfce7; color: #15803d; }

/* #42400 — important notifications (DD/mandate cancels, entry refused, payment
   method removed) keep a red cue once dismissed and demoted into the timeline,
   matching the red treatment in the "needs attention" band above. */
.co-stream-item--important { box-shadow: inset 3px 0 0 var(--status-danger-fg, #dc2626); }
.co-stream-item--important .co-stream-item__visual { background: var(--status-danger-bg, #fee2e2); color: #b91c1c; }
.co-stream-item--celebratory .co-stream-item__visual { background: linear-gradient(135deg, #fde68a, #f472b6); color: #7c2d12; }

.co-stream-item__avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.co-stream-item__initials {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.co-stream-item__icon {
    font-size: 1rem;
}

.co-stream-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.co-stream-item__title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--co-ink);
    line-height: 1.3;
}

.co-stream-item__subtitle {
    font-size: 0.82rem;
    color: var(--co-ink-soft);
    line-height: 1.3;
}

.co-stream-item__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.co-stream-item__time {
    font-size: 0.75rem;
    color: var(--co-ink-mute);
    letter-spacing: 0.01em;
}

.co-stream-item__action {
    font-size: 0.78rem;
    color: var(--co-accent);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: transform 0.12s ease;
}

/* #42182b — REFUSED AT THE DOOR, inside the "in the club right now" pane.
   Red, not amber: this is the one thing on the page with a human waiting on it.
   The admin alerts below stay amber, so the two never compete. */
.co-door-refusals {
    border-top: 1px solid var(--co-line-soft);
    background: #fef2f2;
    margin: 12px -16px -16px;
    padding: 10px 16px 12px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.co-door-refusals__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.co-door-refusals__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b91c1c;
}

.co-door-refusals__count {
    background: #dc2626;
    color: #fff;
    border-radius: 999px;
    min-width: 18px;
    padding: 0 6px;
    text-align: center;
    font-size: 0.68rem;
    line-height: 18px;
}

.co-door-refusals__window { font-size: 0.7rem; color: #b91c1c; opacity: 0.75; }

.co-door-refusals__list { margin: 0; padding: 0; list-style: none; }

.co-door-refusal {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #fee2e2;
}

.co-door-refusal:last-child { border-bottom: none; }

.co-door-refusal__visual {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #fecaca;
}

.co-door-refusal__initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #991b1b;
}

.co-door-refusal__avatar {
    position: relative;
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
}

.co-door-refusal__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.co-door-refusal__title {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--co-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The reason carries the weight — it's the thing being diagnosed. */
.co-door-refusal__reason {
    font-size: 0.8rem;
    font-weight: 500;
    color: #b91c1c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.co-door-refusal__meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.co-door-refusal__time { font-size: 0.72rem; color: var(--co-ink-mute); white-space: nowrap; }

.co-door-refusal__cta,
.co-door-refusal__open {
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 3px 10px;
    white-space: nowrap;
    text-decoration: none;
}

.co-door-refusal__cta { color: #fff; background: #dc2626; border: 1px solid #dc2626; }
.co-door-refusal__cta:hover { background: #b91c1c; color: #fff; text-decoration: none; }
.co-door-refusal__open { color: #991b1b; background: #fff; border: 1px solid #fecaca; }
.co-door-refusal__open:hover { background: #fee2e2; color: #991b1b; text-decoration: none; }

/* Dismiss. Quiet until you go for it — clearing a refusal shouldn't compete for attention
   with the refusal itself, which is the thing that actually needs reading. */
.co-door-refusal__dismiss {
    background: none;
    border: none;
    color: #b91c1c;
    opacity: 0.45;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
}

.co-door-refusal__dismiss:hover { opacity: 1; background: #fee2e2; }
.co-door-refusal__dismiss:disabled { opacity: 0.25; cursor: default; }

/* Fade the row out rather than snatching it away, so the eye can follow what left. */
.co-door-refusal { transition: opacity 0.16s ease, transform 0.16s ease; }
.co-door-refusal--going { opacity: 0; transform: translateX(8px); }

@media (prefers-reduced-motion: reduce) {
    .co-door-refusal { transition: none; }
}

@media (max-width: 640px) {
    .co-door-refusal { flex-wrap: wrap; }
    .co-door-refusal__meta { width: 100%; justify-content: flex-start; padding-left: 42px; }
}

/* The refusal pop-up. Auto-closes after 10s and is replaced (never stacked) by the next
   refusal — a member who scans five times must not produce five modals. ClubOverview only:
   the desk screen, not the Till mid-payment. */
.co-refusal-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.co-refusal-modal--open { opacity: 1; pointer-events: auto; }

.co-refusal-modal__card {
    width: min(460px, calc(100vw - 32px));
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.16s ease;
}

.co-refusal-modal--open .co-refusal-modal__card { transform: none; }

.co-refusal-modal__head {
    background: #dc2626;
    color: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.co-refusal-modal__close {
    background: none;
    border: none;
    color: #fff;
    opacity: 0.85;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 2px 4px;
}

.co-refusal-modal__close:hover { opacity: 1; }

.co-refusal-modal__body { padding: 18px 16px; display: flex; gap: 14px; align-items: center; }

.co-refusal-modal__visual {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: #fee2e2;
    flex-shrink: 0;
}

.co-refusal-modal__initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #991b1b;
}

.co-refusal-modal__avatar { position: relative; width: 60px; height: 60px; object-fit: cover; }
.co-refusal-modal__name { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }

.co-refusal-modal__reason {
    font-size: 0.95rem;
    color: #b91c1c;
    font-weight: 600;
    margin-top: 2px;
}

.co-refusal-modal__meta { font-size: 0.76rem; color: var(--co-ink-mute); margin-top: 4px; }

.co-refusal-modal__actions {
    display: flex;
    gap: 8px;
    padding: 0 16px 14px;
}

.co-refusal-modal__btn {
    flex: 1;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
}

.co-refusal-modal__btn--primary { background: #dc2626; color: #fff; border: 1px solid #dc2626; }
.co-refusal-modal__btn--primary:hover { background: #b91c1c; color: #fff; text-decoration: none; }
.co-refusal-modal__btn--ghost { background: #fff; color: var(--co-ink); border: 1px solid var(--co-line-soft); }
.co-refusal-modal__btn--ghost:hover { background: #f8fafc; color: var(--co-ink); text-decoration: none; }

/* Shown once, then never again — a modal explaining a modal would be its own joke. */
/* Label takes the slack so the countdown sits next to the ✕ — the two ways out of the
   pop-up, together, rather than the countdown stranded in the middle of the bar. */
.co-refusal-modal__head > span:first-child { margin-right: auto; }

.co-refusal-modal__countdown {
    font-variant-numeric: tabular-nums; /* stop the text jiggling as 10 -> 9 */
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    opacity: 0.9;
    margin-right: 10px;
}

.co-refusal-modal__foot {
    border-top: 1px solid var(--co-line-soft);
    padding: 9px 16px;
    font-size: 0.74rem;
    color: var(--co-ink-mute);
    background: #f8fafc;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: baseline;
}

.co-refusal-modal__off { color: var(--co-accent); }

/* Countdown to the auto-close, so it doesn't just vanish unexplained. */
.co-refusal-modal__timer { height: 3px; background: rgba(255, 255, 255, 0.35); }
.co-refusal-modal__timer-bar { height: 100%; background: #fff; width: 100%; }
.co-refusal-modal--open .co-refusal-modal__timer-bar { animation: coRefusalCountdown 10s linear forwards; }

@keyframes coRefusalCountdown { from { width: 100%; } to { width: 0%; } }

@media (prefers-reduced-motion: reduce) {
    .co-refusal-modal, .co-refusal-modal__card { transition: none; }
    .co-refusal-modal--open .co-refusal-modal__timer-bar { animation: none; width: 100%; }
}

/* #42182b — the "needs attention" group at the head of Live Activity.
   The weight lives on the GROUP, not each row: one rule, one tint, one label.
   The first cut badged and tinted every row, which said "attention" four times
   and read as a wall of yellow — so nothing stood out and the action still sat
   marooned on the far right. */
.co-alerts {
    border: 1px solid #fcd34d;
    border-left: 3px solid #f59e0b;
    background: #fffbeb;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}

.co-alerts__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid #fde68a;
}

.co-alerts__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b45309;
}

.co-alerts__count {
    background: #f59e0b;
    color: #fff;
    border-radius: 999px;
    padding: 0 6px;
    min-width: 18px;
    text-align: center;
    font-size: 0.68rem;
    line-height: 18px;
}

.co-alerts__dismiss-all {
    background: none;
    border: none;
    padding: 2px 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #92400e;
    cursor: pointer;
    border-radius: 6px;
}

.co-alerts__dismiss-all:hover { background: #fef3c7; }

/* #42400 — "View all" (→ notifications page) sits beside "Dismiss all". */
.co-alerts__actions { display: inline-flex; align-items: center; gap: 10px; }

/* #42532 (usability extra) — "View all" was a plain underlined link sitting beside a
   button, so the panel's two actions had no visual hierarchy and the route OUT of the
   panel was the easiest thing to miss. It's now a button of the same shape/size as
   "Dismiss all" but filled in the panel's own amber (.co-alerts__count), so it reads
   as the primary action while "Dismiss all" stays a quiet text button. */
.co-alerts__view-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    background: #f59e0b;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.co-alerts__view-all:hover {
    background: #d97706;
    color: #fff;
    text-decoration: none;
}
.co-alerts__view-all i { font-size: 0.6rem; }

.co-alerts__list { margin: 0; padding: 0; list-style: none; }

/* Two lines, ~44px — roughly half the first attempt, so ~6 events fit where 3 did,
   matching the density of the "in the club right now" cards above. */
.co-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border-bottom: 1px solid #fef3c7;
}

.co-alert:last-child { border-bottom: none; }
.co-alert:hover { background: #fef3c7; }

/* #42400 — a red left rule + red title marks an important notification (payment
   cover breaking, entry refused) apart from the amber "needs attention" default,
   restoring the old panel's "red drew my attention" cue (#41934). */
.co-alert--important { border-left: 3px solid var(--status-danger-fg, #dc2626); padding-left: 9px; }
.co-alert--important:hover { background: #fef2f2; }
.co-alert--important .co-alert__title { color: #b91c1c; }

/* #42400 — small leading severity icon on each "needs attention" row (smaller than
   the notifications-page icon): amber for general, red for important. */
.co-alert__icon {
    flex-shrink: 0;
    width: 14px;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1;
    color: #d97706;
}
.co-alert--important .co-alert__icon { color: #dc2626; }

.co-alert__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    color: var(--co-ink);
    text-decoration: none;
}

.co-alert__body:hover { color: var(--co-ink); text-decoration: none; }

.co-alert__title {
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.co-alert__detail {
    font-size: 0.78rem;
    color: var(--co-ink-soft);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The width the old design wasted: time, the actual action, and dismiss. */
.co-alert__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.co-alert__time {
    font-size: 0.72rem;
    color: var(--co-ink-mute);
    white-space: nowrap;
}

.co-alert__cta {
    font-size: 0.75rem;
    font-weight: 600;
    color: #92400e;
    background: #fff;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 3px 10px;
    white-space: nowrap;
    text-decoration: none;
}

.co-alert__cta:hover { background: #fef3c7; color: #92400e; text-decoration: none; }

.co-alert__dismiss {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--co-ink-mute);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
}

.co-alert__dismiss:hover { background: #fff; color: var(--co-ink); }
.co-alert__dismiss:disabled { opacity: 0.45; cursor: default; }

.co-alert--going { opacity: 0; transform: translateX(8px); transition: opacity 0.18s ease, transform 0.18s ease; }

@media (max-width: 640px) {
    .co-alert { flex-wrap: wrap; }
    .co-alert__meta { width: 100%; justify-content: flex-start; padding-top: 4px; }
}

.co-stream__empty {
    text-align: center;
    padding: 40px 20px;
}

.co-stream__empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--co-accent) 10%, white);
    color: var(--co-accent);
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    font-size: 1.4rem;
}

.co-stream__empty-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--co-ink);
    margin-bottom: 6px;
}

.co-stream__empty-hint {
    font-size: 0.85rem;
    color: var(--co-ink-soft);
    max-width: 44ch;
    margin: 0 auto;
    line-height: 1.4;
}

/* -- Graphs -- */
.co-graphs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 1280px) {
    .co-graphs {
        grid-template-columns: 1fr 1fr;
    }
    .co-graph:first-child {
        grid-column: 1 / -1;
    }
}

.co-graph {
    background: var(--co-surface);
    border-radius: 18px;
    border: 1px solid var(--co-line);
    padding: 16px 18px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
}

.co-graph__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.co-graph__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--co-ink);
}

.co-graph__subtitle {
    margin: 3px 0 0 0;
    font-size: 0.82rem;
    color: var(--co-ink-soft);
}

.co-graph__link {
    font-size: 0.78rem;
    color: var(--co-accent);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: transform 0.15s ease;
}

.co-graph__link:hover {
    text-decoration: none;
    color: var(--co-accent);
    transform: translateX(2px);
}

.co-graph__body {
    position: relative;
    height: 160px;
    max-height: 160px;
    /* Chart.js draws hover tooltips relative to the canvas's pixel rect; without
       clipping here the tooltip can render outside the card on data points near
       the chart's top/bottom edge (it extends in both directions to stay attached
       to the data point). Card already has rounded corners, so clipping inside
       the body is the right boundary. */
    overflow: hidden;
}

.co-graph__body canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.co-graph--empty .co-graph__body {
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #fafbff 0%, #f4f6fb 100%);
    border-radius: var(--radius-lg);
    padding: 16px;
    height: 140px;
    max-height: 140px;
}

.co-graph__empty {
    text-align: center;
    max-width: 44ch;
}

.co-graph__empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--co-accent) 12%, white);
    color: var(--co-accent);
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
    font-size: 1.2rem;
}

.co-graph__empty-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--co-ink);
    margin-bottom: 4px;
}

.co-graph__empty-hint {
    font-size: 0.82rem;
    color: var(--co-ink-soft);
    line-height: 1.4;
}

.co-graph__empty-hint a {
    color: var(--co-accent);
    font-weight: 500;
    text-decoration: none;
}

.co-graph__empty-hint a:hover {
    text-decoration: underline;
}

/* -- Mobile adjustments -- */
@media (max-width: 640px) {
    .club-overview__hero {
        padding: 22px 16px 28px;
        min-height: auto;
    }

    .club-overview__hero-logo {
        width: 64px;
        height: 64px;
        border-radius: 14px;
    }

    .club-overview__headlines {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 16px;
    }

    .club-overview-tiles__primary {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* end Club Overview */

/* =========================================================================
   My Dashboards — template gallery (Create New Dashboard page)
   ========================================================================= */
.template-gallery .template-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    height: 100%;
    padding: 14px 14px 16px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    text-align: left;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.template-gallery .template-card:hover {
    transform: translateY(-2px);
    border-color: var(--admin-club-color, #4f46e5);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

.template-gallery .template-card__preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.template-gallery .template-card__preview-icon {
    position: absolute;
    right: -6px;
    bottom: -18px;
    font-size: 5.5rem;
    opacity: 0.28;
    transform: rotate(-10deg);
    pointer-events: none;
}

.template-gallery .template-card__preview[data-theme="owner-default"] {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
}
.template-gallery .template-card__preview[data-theme="owner-default"] .template-card__preview-icon { color: #4f46e5; }

.template-gallery .template-card__preview[data-theme="staff-default"] {
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
}
.template-gallery .template-card__preview[data-theme="staff-default"] .template-card__preview-icon { color: #0891b2; }

.template-gallery .template-card__preview[data-theme="financial"] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}
.template-gallery .template-card__preview[data-theme="financial"] .template-card__preview-icon { color: #059669; }

.template-gallery .template-card__preview[data-theme="retention"] {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
}
.template-gallery .template-card__preview[data-theme="retention"] .template-card__preview-icon { color: #e11d48; }

.template-gallery .template-card__preview[data-theme="front-desk"] {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}
.template-gallery .template-card__preview[data-theme="front-desk"] .template-card__preview-icon { color: #d97706; }

.template-gallery .template-card__preview[data-theme="sales-growth"] {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
}
.template-gallery .template-card__preview[data-theme="sales-growth"] .template-card__preview-icon { color: #9333ea; }

.template-gallery .template-card__preview--blank {
    background: transparent;
    border: 1.5px dashed #cbd5e1;
    display: grid;
    place-items: center;
}

.template-gallery .template-card__preview--blank::before {
    content: '+';
    font-size: 2.2rem;
    color: #94a3b8;
    font-weight: 300;
    line-height: 1;
}

.template-gallery .template-card__body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}

.template-gallery .template-card__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.template-gallery .template-card__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    background: color-mix(in srgb, var(--admin-club-color, #4f46e5) 12%, white);
    color: var(--admin-club-color, #4f46e5);
}

.template-gallery .template-card__name {
    font-weight: 700;
    font-size: 1rem;
    color: #0f172a;
    line-height: 1.2;
}

.template-gallery .template-card__desc {
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.4;
}

.template-gallery .template-card__cta {
    margin-top: auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--admin-club-color, #4f46e5);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: transform 0.15s ease;
}

.template-gallery .template-card:hover .template-card__cta {
    transform: translateX(3px);
}

.template-gallery .template-card--blank {
    background: #f8fafc;
    border-style: dashed;
}

.template-gallery .template-card--blank .template-card__preview {
    background: transparent;
    border-color: transparent;
}

.template-gallery .template-card--blank .template-card__icon {
    background: #e2e8f0;
    color: #475569;
}


/* My Dashboards — tighten the gap between the header strip and the tabs */
.page-header + .row .nav-pills {
    margin-top: 4px;
}
/* end My Dashboards */

/* =========================================================================
   Sidebar Dashboards — flat list siblings of Home, with a "+" action
   button tucked on the right of the Home row so it's always reachable
   without consuming its own row.
   ========================================================================= */
#sidebar.admin-sidebar .nav-item--has-action {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 8px;
}

#sidebar.admin-sidebar .nav-item--has-action > .nav-link {
    flex: 1 1 auto;
    min-width: 0;
}

#sidebar.admin-sidebar .nav-item__action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    font-size: 0.75rem;
    color: #9ca3af;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#sidebar.admin-sidebar .nav-item__action:hover,
#sidebar.admin-sidebar .nav-item__action:focus {
    background: color-mix(in srgb, var(--admin-club-color, #667eea) 12%, #f9fafb);
    color: var(--admin-club-color, #667eea);
}

#sidebar.admin-sidebar .nav-link .fa-star.nav-icon {
    color: #f59e0b;
}
/* end Sidebar Dashboards */

/* =========================================================================
   My Dashboards — dashboard page chrome
   ========================================================================= */
.mdash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 4px 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid #eef0f3;
}

.mdash-header__main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.mdash-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--admin-club-color, #4f46e5);
    border: 1px solid color-mix(in srgb, var(--admin-club-color, #4f46e5) 35%, #e2e8f0);
    font-size: 0.9rem;
    flex-shrink: 0;
    padding: 0;
    cursor: default;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mdash-header__icon--editable {
    cursor: pointer;
}

.mdash-header__icon--editable:hover {
    background: color-mix(in srgb, var(--admin-club-color, #4f46e5) 10%, #ffffff);
    border-color: var(--admin-club-color, #4f46e5);
}

.mdash-header__title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 1px;
}

.mdash-header__titlerow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.mdash-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.mdash-name--editable {
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 0 3px;
    margin: 0 -3px;
    transition: background-color 0.15s ease;
}

.mdash-name--editable:hover {
    background: #f1f5f9;
}

.mdash-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
    font-size: 0.9rem;
}

.mdash-star:hover {
    color: #f59e0b;
    background: #fef3c7;
    text-decoration: none;
}

.mdash-star--active {
    color: #f59e0b;
}

/* --- Editable header icon + name --- */
.mdash-header__icon--editable {
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mdash-header__icon--editable:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
}

.mdash-header__icon--editable::after {
    content: "\f303";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    font-size: 8px;
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    color: #4f46e5;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.mdash-header__icon--editable:hover::after {
    opacity: 1;
}

.mdash-name--editable {
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    margin-left: -6px;
    transition: background 0.15s ease;
}

.mdash-name--editable:hover {
    background: rgba(79, 70, 229, 0.08);
}

/* --- Appearance picker modal --- */
.mdash-appearance__preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 18px;
    border-radius: var(--radius-lg);
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.mdash-appearance__preview-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--admin-club-color, #4f46e5);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.mdash-appearance__preview-label {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.mdash-appearance__section-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 700;
    margin: 14px 0 8px 0;
}

.mdash-appearance__colours {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mdash-appearance__swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
    box-shadow: inset 0 0 0 2px #fff;
}

.mdash-appearance__swatch:hover {
    transform: scale(1.08);
}

.mdash-appearance__swatch.is-selected {
    border-color: #0f172a;
    transform: scale(1.1);
}

.mdash-appearance__icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.mdash-appearance__icon {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.12s ease;
}

.mdash-appearance__icon:hover {
    border-color: var(--admin-club-color, #4f46e5);
    color: var(--admin-club-color, #4f46e5);
    transform: translateY(-1px);
}

.mdash-appearance__icon.is-selected {
    background: var(--admin-club-color, #4f46e5);
    border-color: var(--admin-club-color, #4f46e5);
    color: #fff;
}

.mdash-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.4;
}

.mdash-meta__item {
    white-space: nowrap;
}

.mdash-meta__item + .mdash-meta__item::before {
    content: "·";
    margin: 0 7px;
    color: #cbd5e1;
}

.mdash-meta__item--template {
    color: color-mix(in srgb, var(--admin-club-color, #4f46e5) 75%, #475569);
    font-weight: 600;
}

.mdash-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mdash-timerange {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 2px 4px 2px 10px;
    height: 36px;
}

.mdash-timerange__label {
    font-size: 0.78rem;
    color: #6b7280;
    margin: 0;
    white-space: nowrap;
}

.mdash-timerange__select {
    border: none;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f172a;
    padding: 4px 24px 4px 4px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

.mdash-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.mdash-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.mdash-btn--edit:hover {
    border-color: var(--admin-club-color, #4f46e5);
    color: var(--admin-club-color, #4f46e5);
}

.mdash-btn--done {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

.mdash-btn--done:hover {
    background: #15803d;
    border-color: #15803d;
    color: #ffffff;
}

.mdash-btn--primary {
    background: var(--admin-club-color, #4f46e5);
    border-color: var(--admin-club-color, #4f46e5);
    color: #ffffff;
}

.mdash-btn--primary:hover {
    filter: brightness(0.95);
    color: #ffffff;
}

.mdash-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.mdash-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.mdash-btn--icon {
    width: 36px;
    padding: 0;
    justify-content: center;
    color: #6b7280;
}

/* Reset is a secondary destructive action — neutral at rest, red on hover so
   the destructive intent is signalled without dominating the header. */
.mdash-btn--reset {
    color: #475569;
}

.mdash-btn--reset:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}

/* Auto-save confirmation pill — fades in briefly after each save so users
   know their layout changes have been persisted. */
.mdash-saved {
    position: fixed;
    top: 90px;
    right: 18px;
    z-index: 1080;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
    border: 1px solid rgba(21, 128, 61, 0.15);
    font-size: 0.78rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

.mdash-saved--visible {
    opacity: 1;
    transform: translateY(0);
}

.mdash-overflow .dropdown-menu {
    min-width: 220px;
}

/* Edit-mode bar sits in the dashboard flow and slides down from the top edge when entering edit mode. */
.mdash-editbar {
    background: #0f172a;
    color: #ffffff;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15);
    font-size: 0.85rem;
    flex-wrap: wrap;
    border-radius: 10px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.2s ease, margin 0.2s ease;
    margin: 0 0 0 0;
}

body.dashboard-editing .mdash-editbar {
    max-height: 80px;
    opacity: 1;
    padding: 14px 22px;
    margin: -4px 0 18px;
}

/* Hide distractions that compete with the edit bar at the bottom-right. */
body.dashboard-editing #basketFab,
body.dashboard-editing .intercom-lightweight-app,
body.dashboard-editing #intercom-container {
    display: none !important;
}

/* Widget skeleton — shown briefly while the page reloads to render the real widget.
   Uses a shimmer gradient and ghosted placeholder shapes so the user sees the
   widget-in-progress rather than a dashed box with a spinner. */
.mdash-widget-skeleton .grid-stack-item-content {
    background: #ffffff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    animation: mdash-skeleton-pop 0.25s ease-out;
}

.mdash-widget-skeleton .grid-stack-item-content::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 35%,
        color-mix(in srgb, var(--admin-club-color, #4f46e5) 10%, rgba(255, 255, 255, 0.7)) 50%,
        rgba(255, 255, 255, 0) 65%,
        rgba(255, 255, 255, 0) 100%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: mdash-skeleton-shimmer 1.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

.mdash-widget-skeleton__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px;
    position: relative;
    z-index: 1;
}

/* Ghost-shape placeholders — a badge for the icon, then two lines of text,
   pulsing softly so the tile feels alive even before the shimmer sweeps. */
.mdash-widget-skeleton__inner::before {
    content: '';
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: #eef2f7;
    animation: mdash-skeleton-pulse 1.6s ease-in-out infinite;
}

.mdash-widget-skeleton__inner::after {
    content: '';
    height: 10px;
    border-radius: 5px;
    background: #eef2f7;
    width: 60%;
    margin-top: auto;
    animation: mdash-skeleton-pulse 1.6s ease-in-out infinite;
    animation-delay: 0.15s;
}

/* Kill the old spinner + label; the shimmer tells the story now. */
.mdash-widget-skeleton__spinner,
.mdash-widget-skeleton__label {
    display: none;
}

@keyframes mdash-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -120% 0; }
}

@keyframes mdash-skeleton-pulse {
    0%, 100% { background-color: #eef2f7; }
    50% { background-color: #e0e7ef; }
}

@keyframes mdash-skeleton-pop {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* Dashboard toast — used for widget-add errors and other ambient feedback.
   Self-contained (no SweetAlert), positioned top-right, slides in, no backdrop. */
.mdash-toast-host {
    position: fixed;
    top: 72px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10050;
    pointer-events: none;
    max-width: calc(100vw - 40px);
}

.mdash-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 280px;
    max-width: 380px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #94a3b8;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
    transform: translateX(24px);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.mdash-toast.is-visible {
    transform: translateX(0);
    opacity: 1;
}

/* ============================================
   Modal action tiles
   ────────────────────────────────────────────
   Used inside modals (Exports, etc.) where a short list of high-level
   actions needs to be presented. Replaces the legacy .sub-option-btn
   chunky outlined buttons with a tile pattern matching the brand
   ("calm + restrained"): icon + title + description, subtle hover.
   ============================================ */
.modal-action-tile-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-action-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.modal-action-tile:hover {
    border-color: var(--cui-nav-link-color, #4f46e5);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.modal-action-tile:focus-visible {
    outline: 2px solid var(--cui-nav-link-color, #4f46e5);
    outline-offset: 2px;
}

.modal-action-tile:active {
    transform: translateY(1px);
}

.modal-action-tile__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: #f3f4f6;
    color: var(--cui-nav-link-color, #4f46e5);
    font-size: 1.05rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.modal-action-tile:hover .modal-action-tile__icon {
    background: var(--cui-nav-link-color, #4f46e5);
    color: #ffffff;
}

.modal-action-tile__body {
    flex: 1 1 auto;
    min-width: 0;
}

.modal-action-tile__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    margin: 0;
}

.modal-action-tile__desc {
    font-size: 0.825rem;
    color: #6b7280;
    margin: 2px 0 0 0;
    line-height: 1.4;
}

.modal-action-tile__chevron {
    flex: 0 0 auto;
    color: #cbd2da;
    font-size: 0.875rem;
    transition: color 0.15s ease, transform 0.15s ease;
}

.modal-action-tile:hover .modal-action-tile__chevron {
    color: var(--cui-nav-link-color, #4f46e5);
    transform: translateX(2px);
}

/* ============================================
   Recent activity card (in-modal table)
   ────────────────────────────────────────────
   Lightweight in-modal "recent items" surface — currently used for the
   bulk exports list, but generic enough for any modal that wants to
   show a recent-activity table without the heavy .ui-datatable chrome.
   ============================================ */
.recent-activity-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.recent-activity-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.recent-activity-card__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.recent-activity-card__body {
    padding: 0;
}

.recent-activity-card__footer {
    padding: 8px 14px;
    font-size: 0.78rem;
    color: #6b7280;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.recent-activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin: 0;
}

.recent-activity-table thead th {
    text-align: left;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    padding: 10px 14px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.recent-activity-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
    vertical-align: middle;
}

.recent-activity-table tbody tr:last-child td {
    border-bottom: none;
}

.recent-activity-table tbody tr:hover {
    background: #fafbfc;
}

.recent-activity-table__primary {
    color: #111827;
    font-weight: 500;
    margin: 0 0 2px 0;
}

.recent-activity-table__filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    color: #6b7280;
    font-size: 0.78rem;
    cursor: pointer;
}

.recent-activity-table__filter-toggle:hover {
    color: var(--cui-nav-link-color, #4f46e5);
}

.recent-activity-table__filter-toggle .fa,
.recent-activity-table__filter-toggle .svg-inline--fa {
    transition: transform 0.15s ease;
}

.recent-activity-table__filter-toggle[aria-expanded="true"] .fa,
.recent-activity-table__filter-toggle[aria-expanded="true"] .svg-inline--fa {
    transform: rotate(90deg);
}

.recent-activity-table__filter-details {
    margin-top: 6px;
    padding: 8px 10px;
    background: #f9fafb;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.5;
}

.recent-activity-table__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.recent-activity-table__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.recent-activity-table__icon-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #111827;
}

.recent-activity-table__icon-btn--danger:hover {
    background: var(--status-danger-bg);
    border-color: var(--status-danger-fg);
    color: var(--status-danger-fg);
}

.recent-activity-table__download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: filter 0.15s ease;
}

.recent-activity-table__download-btn:hover {
    filter: brightness(0.96);
    color: var(--status-success-fg);
    text-decoration: none;
}

.mdash-toast--error { border-left-color: #dc2626; }
.mdash-toast--success { border-left-color: #16a34a; }
.mdash-toast--info { border-left-color: var(--admin-club-color, #4f46e5); }

.mdash-toast__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin-top: 1px;
}

.mdash-toast--error .mdash-toast__icon {
    background: #fee2e2;
    color: #b91c1c;
}

.mdash-toast--success .mdash-toast__icon {
    background: #dcfce7;
    color: #15803d;
}

.mdash-toast--info .mdash-toast__icon {
    background: color-mix(in srgb, var(--admin-club-color, #4f46e5) 14%, #ffffff);
    color: var(--admin-club-color, #4f46e5);
}

.mdash-toast__body {
    flex: 1;
    min-width: 0;
}

.mdash-toast__title {
    font-size: 0.87rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
}

.mdash-toast__detail {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.4;
    word-wrap: break-word;
}

.mdash-toast__close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mdash-toast__close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.mdash-editbar__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0.9;
}

.mdash-editbar__status i {
    color: #fbbf24;
}

.mdash-editbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* When editing, widgets get a subtle outline and show drag affordance */
body.dashboard-editing .grid-stack-item-content {
    outline: 1px dashed #cbd5e1;
    outline-offset: -2px;
    cursor: move;
}

/* Disable pointer events on everything INSIDE .grid-stack-item-content
   while in edit mode. In view mode, widgets are wrapped in an .h-100 div
   (sometimes containing an <a class="widgetAction">) and interactive inner
   UI — all of which fight GridStack's native DnD for the mousedown event
   on the content element. Making descendants transparent routes the
   mousedown straight to .grid-stack-item-content where GridStack listens.
   The .deleteIcon button is a SIBLING of .grid-stack-item-content (not a
   descendant), so it keeps working. The widget cannot be clicked-to-
   navigate in edit mode, which is exactly what we want.                  */
body.dashboard-editing .grid-stack-item-content * {
    pointer-events: none;
}

body.dashboard-editing .grid-stack-item:hover .grid-stack-item-content {
    outline-color: var(--admin-club-color, #4f46e5);
}

/* Give the dashboard grid breathing room above the fixed bar */
body.dashboard-editing {
    padding-bottom: 72px;
}

@media (max-width: 768px) {
    .mdash-header {
        flex-direction: column;
        align-items: stretch;
    }
    .mdash-header__actions {
        flex-wrap: wrap;
    }
    .mdash-editbar {
        left: 0 !important;
        padding: 10px 12px;
    }
}
/* end My Dashboards — dashboard page chrome */

/* =========================================================================
   Widget library — right-side slide-out panel (replaces centred modal)
   Reuses the existing Bootstrap modal plumbing but positions it on the right.
   ========================================================================= */
#addWidgetModal.mdash-widget-panel {
    pointer-events: none;
}

#addWidgetModal.mdash-widget-panel .modal-dialog {
    margin: 0 !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 460px;
    max-width: 94vw;
    height: 100vh;
    transform: translateX(100%) !important;
    transition: transform 0.28s ease !important;
    pointer-events: auto;
    max-height: 100vh;
}

/* When the widget library panel is open, squeeze the main content to the
   left so widgets on the right side of the grid remain visible and
   droppable. The panel is 460px wide (capped at 94vw) — on very narrow
   viewports the panel covers everything anyway, so skip the squeeze.
   !important is required to override Bootstrap utilities like .px-3 which
   set padding-right with !important on the same element. */
body.widget-panel-open .body.flex-grow-1 {
    padding-right: 476px !important;
    transition: padding-right 0.28s ease;
}

/* The widget panel is an in-page slide-out, not a true modal — the user
   still needs to scroll the dashboard while editing. CoreUI's modal logic
   sets overflow:hidden + padding-right on .modal-open by default, which
   locks the page. Reverse it while we're in dashboard edit mode. */
body.dashboard-editing.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}

.body.flex-grow-1 {
    transition: padding-right 0.28s ease;
}

@media (max-width: 767px) {
    body.widget-panel-open .body.flex-grow-1 {
        padding-right: 1rem !important;
    }
}

#addWidgetModal.mdash-widget-panel.show .modal-dialog {
    transform: translateX(0) !important;
}

#addWidgetModal.mdash-widget-panel .modal-content {
    height: 100vh;
    border-radius: 0;
    border: none;
    border-left: 1px solid #e2e8f0;
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
}

#addWidgetModal.mdash-widget-panel .modal-header {
    padding: 14px 18px;
    border-bottom: 1px solid #eef0f3;
    align-items: center;
    gap: 12px;
}

#addWidgetModal.mdash-widget-panel .modal-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.mdash-widget-panel__titleblock {
    flex: 1;
    min-width: 0;
}

.mdash-widget-panel__done {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #16a34a;
    color: #ffffff;
    border: 1px solid #16a34a;
    border-radius: var(--radius-md);
    font-weight: 600;
    padding: 6px 14px;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mdash-widget-panel__done:hover,
.mdash-widget-panel__done:focus {
    background: #15803d;
    border-color: #15803d;
    color: #ffffff;
}

.mdash-widget-panel__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 18px;
    border-bottom: 1px solid #eef0f3;
    background: #f8fafc;
}

.mdash-widget-panel__toolbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.mdash-widget-panel__toolbtn i {
    font-size: 0.75rem;
    color: #64748b;
}

.mdash-widget-panel__toolbtn:hover {
    border-color: var(--admin-club-color, #4f46e5);
    color: var(--admin-club-color, #4f46e5);
}

.mdash-widget-panel__toolbtn:hover i {
    color: var(--admin-club-color, #4f46e5);
}

.mdash-widget-panel__toolbtn--danger {
    color: #b91c1c;
}

.mdash-widget-panel__toolbtn--danger i {
    color: #b91c1c;
}

.mdash-widget-panel__toolbtn--danger:hover {
    border-color: #dc2626;
    background: #fef2f2;
    color: #991b1b;
}

.mdash-widget-panel__toolbtn--danger:hover i {
    color: #991b1b;
}

#addWidgetModal.mdash-widget-panel .modal-body {
    flex: 1;
    overflow-y: auto;
    max-height: none !important;
    padding: 14px 18px !important;
}

/* Tighten the widget picker grid for the narrower panel */
#addWidgetModal.mdash-widget-panel .dash-widget-picker__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#addWidgetModal.mdash-widget-panel .dash-widget-picker__group + .dash-widget-picker__group {
    margin-top: 18px;
}

#addWidgetModal.mdash-widget-panel .dash-widget-picker__group-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin: 0 0 8px 0;
    font-weight: 700;
}

@media (max-width: 560px) {
    #addWidgetModal.mdash-widget-panel .modal-dialog {
        width: 100vw;
    }
}
/* end Widget library panel */

/* Drag feedback when dragging a widget card onto the grid */
.widget-library-card[draggable="true"] { cursor: grab; }
.widget-library-card--dragging { opacity: 0.55; }
.grid-stack--drop-target {
    outline: 2px dashed var(--admin-club-color, #4f46e5);
    outline-offset: 4px;
    background: color-mix(in srgb, var(--admin-club-color, #4f46e5) 4%, transparent);
    border-radius: 14px;
    transition: outline 0.1s ease, background 0.1s ease;
}

/* =========================================================================
   Club Overview widgets — can be placed on any user dashboard
   ========================================================================= */

/* --- Hero widget --- */
.widget-hero {
    position: relative;
    height: 100%;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    color: #fff;
    background: var(--wh-bg, #1f2937);
}
.widget-hero__image {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.widget-hero__image--gradient {
    background: radial-gradient(1000px 500px at 0% 0%, rgba(255, 255, 255, 0.12), transparent 60%),
                radial-gradient(800px 400px at 100% 100%, rgba(255, 255, 255, 0.08), transparent 60%),
                linear-gradient(135deg, var(--wh-bg, #1f2937) 0%, color-mix(in srgb, var(--wh-bg, #1f2937) 70%, black) 100%);
}
.widget-hero__veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.55) 60%, rgba(15, 23, 42, 0.8) 100%);
    z-index: 1;
}
.widget-hero__content {
    position: relative; z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
}
.widget-hero__text { flex: 1; min-width: 0; }
.widget-hero__eyebrow { font-size: 0.82rem; opacity: 0.85; margin-bottom: 4px; }
.widget-hero__title { font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }
.widget-hero__status { margin-top: 8px; font-size: 0.92rem; opacity: 0.92; max-width: 60ch; }
.widget-hero__logo {
    width: 72px; height: 72px; background: #fff; border-radius: 14px; padding: 8px;
    display: grid; place-items: center; flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.widget-hero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* --- Headline KPIs widget --- */
.widget-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    padding: 12px;
    height: 100%;
    overflow: auto;
}
.widget-kpi {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #0f172a;
    text-decoration: none;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.widget-kpi:hover {
    transform: translateY(-1px);
    border-color: #cbd5e1;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
    color: #0f172a;
    text-decoration: none;
}
.widget-kpi__icon {
    width: 34px; height: 34px; border-radius: 9px;
    background: #eef2ff; color: #4f46e5;
    display: grid; place-items: center;
    font-size: 0.9rem; flex-shrink: 0;
}
.widget-kpi--warning .widget-kpi__icon { background: #fef3c7; color: #b45309; }
.widget-kpi--danger  .widget-kpi__icon { background: #fee2e2; color: #b91c1c; }
.widget-kpi--positive .widget-kpi__icon { background: #dcfce7; color: #15803d; }
.widget-kpi__body { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.widget-kpi__value { font-size: 1.15rem; font-weight: 700; }
.widget-kpi__label { font-size: 0.75rem; color: #64748b; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-kpi__subtitle { font-size: 0.7rem; color: #94a3b8; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

/* --- Nav tiles widget --- */
.widget-nav-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    height: 100%;
    padding: 10px;
}
.widget-nav-tile {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 110px;
    display: block;
}
.widget-nav-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
    color: #fff;
    text-decoration: none;
}
.widget-nav-tile__image {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}
.widget-nav-tile:hover .widget-nav-tile__image { transform: scale(1.06); }
.widget-nav-tile__veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.55) 70%, rgba(15, 23, 42, 0.85) 100%);
}
.widget-nav-tile__body {
    position: relative;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    gap: 1px;
}
.widget-nav-tile__icon {
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    display: grid; place-items: center;
    font-size: 0.8rem;
}
.widget-nav-tile__title { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; }
.widget-nav-tile__subtitle { font-size: 0.75rem; opacity: 0.85; }

/* --- Recent activity widget --- */
.widget-activity {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.widget-activity__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #eef0f3;
    flex-shrink: 0;
}
.widget-activity__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
    display: inline-flex; align-items: center; gap: 8px;
}
.widget-activity__title i { color: #4f46e5; }
.widget-activity__live {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.75rem; font-weight: 700;
    color: #15803d; background: #dcfce7;
    padding: 3px 8px; border-radius: var(--radius-pill);
    letter-spacing: 0.04em; text-transform: uppercase;
}
.widget-activity__dot {
    width: 7px; height: 7px; border-radius: 50%; background: #16a34a;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
    animation: widget-activity-pulse 1.6s ease-out infinite;
}
@keyframes widget-activity-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.widget-activity__list {
    list-style: none; margin: 0; padding: 4px 10px;
    overflow-y: auto;
    flex: 1;
}
.widget-activity__list li { list-style: none; }
.widget-activity-item {
    display: flex;
    gap: 10px;
    padding: 9px 8px;
    border-radius: var(--radius-md);
    color: #0f172a;
    text-decoration: none;
    transition: background 0.12s ease;
}
.widget-activity-item:hover {
    background: #f8fafc;
    color: #0f172a;
    text-decoration: none;
}
.widget-activity-item__visual {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: #eef2ff;
    color: #4f46e5;
    display: grid; place-items: center;
    overflow: hidden;
    font-size: 0.85rem;
}
.widget-activity-item--warning .widget-activity-item__visual { background: #fef3c7; color: #b45309; }
.widget-activity-item--danger  .widget-activity-item__visual { background: #fee2e2; color: #b91c1c; }
.widget-activity-item--positive .widget-activity-item__visual { background: #dcfce7; color: #15803d; }
.widget-activity-item--celebratory .widget-activity-item__visual { background: linear-gradient(135deg, #fde68a, #f472b6); color: #7c2d12; }
.widget-activity-item__avatar { width: 100%; height: 100%; object-fit: cover; }
.widget-activity-item__initials { font-size: 0.75rem; font-weight: 700; }
.widget-activity-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.widget-activity-item__title { font-size: 0.82rem; font-weight: 600; color: #0f172a; }
.widget-activity-item__subtitle { font-size: 0.75rem; color: #64748b; }
.widget-activity-item__time { font-size: 0.75rem; color: #94a3b8; margin-top: 2px; }

.widget-activity__empty {
    padding: 30px 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.85rem;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.widget-activity__empty i { font-size: 1.5rem; color: #cbd5e1; }

/* end Club Overview widgets */

/* ══════════════════════════════════════════════════════════════════
   TILL — responsive layout for short and mobile viewports
   ══════════════════════════════════════════════════════════════════
   The primary rules at site.css:900 assume a tall desktop: both
   columns get `calc(100vh - 220px)` so nothing scrolls. On shorter
   viewports (laptops with DevTools, task-bar eating pixels) and on
   mobile, that clamp crushes the keypad into clipped text. These
   blocks drop the clamp and let the page scroll naturally, while
   keeping buttons at touch-friendly floor sizes. */

/* Short desktop / wide-but-short: gate 768px width but viewport height
   is too short for the tall-desktop block to apply. Let the columns
   grow naturally; cap order + payments list heights with vh-relative
   scrollers so no single section dominates. */
@media (min-width: 768px) and (max-height: 849.98px) {
    .till-transaction {
        position: static;
        max-height: none;
        height: auto;
    }
    .till-paying__keypad-col {
        max-height: none;
        height: auto;
    }
    .till-paying__keypad-col > .till-paying__panel {
        overflow: visible;
    }
    .till-transaction__order {
        max-height: 40vh;
    }
    .till-paying__payments-card-body {
        max-height: 30vh;
    }
}

/* Mobile: columns stack (Bootstrap col-md-* default), drop every
   clamp/sticky/internal-scroll rule from the desktop block, and
   override the legacy `.tillButton { width: 31%; float: left }` with
   an explicit CSS grid so buttons are properly sized for touch. */
@media (max-width: 767.98px) {
    .till-transaction {
        position: static;
        height: auto;
        max-height: none;
        display: block;
    }
    .till-paying__keypad-col {
        height: auto;
        max-height: none;
        display: block;
    }

    .till-paying .tillTotal.value {
        font-size: 2.4rem;
        padding: 18px 20px;
    }

    #payingKeypadPanel .till-keypad {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        overflow: visible;
    }
    #payingKeypadPanel .till-keypad .tillButton {
        float: none;
        width: auto;
        margin: 0;
        min-height: 64px;
        display: flex;
        align-items: stretch;
    }
    #payingKeypadPanel .till-keypad .tillButton span {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        padding: 0;
    }

    .till-pay-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .till-pay-btn {
        min-height: 64px;
        font-size: 1.25rem;
    }

    .till-transaction__card {
        overflow: visible;
    }
    .till-transaction__order {
        overflow: visible;
        max-height: none;
    }

    .till-paying__payments-card {
        max-height: none;
    }
    .till-paying__payments-card-body {
        max-height: none;
        overflow: visible;
    }

    .till-paying__summary {
        margin-top: 1rem;
    }

    .till-discount-modal__keypad .tillButton {
        min-height: 56px;
    }
}

/* end Till responsive */

/* ==========================================================================
   Beta banner (Club Overview "Try the beta" invite + on-beta feedback prompt)
   ========================================================================== */
.beta-banner {
    --beta-banner-accent: var(--cui-nav-link-color, var(--club-color, #4f46e5));
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 16px;
    border-radius: var(--radius-lg);
    color: #fff;
    background: linear-gradient(135deg, var(--beta-banner-accent) 0%, rgba(0, 0, 0, 0.35) 160%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.beta-banner--onbeta {
    --beta-banner-accent: #0d9488;
}

/* #41196 — "Switch to ClubRight Classic" go-live fallback widget. Calm slate
   accent to read as a quiet fallback, not a promo. Reuses the beta-banner
   component shell. */
.beta-banner--classic {
    --beta-banner-accent: #475569;
}

.beta-banner--column {
    flex-wrap: wrap;
    padding: 12px 14px;
    gap: 10px;
}

.beta-banner--column .beta-banner__icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.beta-banner--column .beta-banner__content {
    flex: 1 1 calc(100% - 80px);
    min-width: 0;
}

.beta-banner--column .beta-banner__headline {
    font-size: 0.95rem;
}

.beta-banner--column .beta-banner__body {
    font-size: 0.8rem;
}

.beta-banner--column .beta-banner__cta {
    flex: 1 1 100%;
    justify-content: center;
    order: 3;
    padding: 6px 14px;
    font-size: 0.85rem;
}

.beta-banner--column .beta-banner__close {
    width: 24px;
    height: 24px;
    font-size: 16px;
    flex: 0 0 auto;
    margin-left: auto;
}

.beta-banner::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.beta-banner__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
}

.beta-banner__content {
    flex: 1 1 auto;
    min-width: 0;
}

.beta-banner__headline {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
}

.beta-banner__body {
    font-size: 0.875rem;
    opacity: 0.92;
    line-height: 1.35;
}

.beta-banner__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--beta-banner-accent);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.beta-banner__cta:hover,
.beta-banner__cta:focus {
    color: var(--beta-banner-accent);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.beta-banner__close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.beta-banner__close:hover,
.beta-banner__close:focus {
    background: rgba(255, 255, 255, 0.3);
}

.beta-banner--preview .beta-banner__cta {
    cursor: default;
}

@media (max-width: 640px) {
    .beta-banner {
        flex-wrap: wrap;
    }

    .beta-banner__content {
        flex: 1 1 100%;
        order: 2;
    }

    .beta-banner__icon {
        order: 1;
    }

    .beta-banner__close {
        order: 1;
        margin-left: auto;
    }

    .beta-banner__cta {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}

/* #41059 Full-width site-wide invite bar variant — rendered at the top of every
   page from _Layout. Square-edged and full-bleed (vs the rounded club-overview
   card), and forced to the ClubRight launch-orange gradient so it stands out
   from the club-coloured chrome rather than blending into it. */
.beta-banner--bar {
    --beta-banner-accent: #e8651a;
    margin: 0;
    padding: 16px 24px;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(135deg, #e8651a 0%, #d4590f 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.beta-banner__countdown {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.22);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .beta-banner--bar {
        padding: 14px 16px;
    }

    .beta-banner__countdown {
        margin-left: 0;
        margin-top: 4px;
    }
}

.beta-club-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    padding: 8px 12px;
}

.beta-club-list__item {
    padding: 4px 0;
}

/* ══════════════════════════════════════════════════════════════════
   PAYING VIEW v2 — methods-first layout. The amount-to-collect banner
   sits in the panel header so it's always visible without giving the
   keypad top billing. The keypad lives in a collapsed split-payment
   section below the tiles.
   ══════════════════════════════════════════════════════════════════ */

.till-paying__due-banner {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    color: #fff;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-md);
}
.till-paying__due-banner-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}
.till-paying__due-banner-amount {
    font-size: 1.05rem;
    font-weight: 700;
}

.till-pay-grid--tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}
@media (min-width: 1280px) {
    .till-pay-grid--tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Paying view only: the basket card sits in the left column purely as
   confirmation context — there's no button anchored to the bottom of it
   (Complete Sale lives in the right action column). Size it to content
   so Total sits immediately under the last order line, with no void of
   white card extending past it. The Building view keeps its column-
   filling card because Take Payment lives at the bottom of that card. */
.till-paying .till-transaction__card {
    flex: 0 1 auto;
}
.till-paying .till-transaction__order {
    max-height: 320px;
    overflow-y: auto;
    flex: 0 1 auto;
}
@media (min-height: 900px) {
    .till-paying .till-transaction__order { max-height: 480px; }
}
/* Touch-tall method tiles in the action column. */
.till-paying__keypad-col .till-pay-tile {
    min-height: 64px;
}

.till-pay-tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}
.till-pay-tile:hover {
    border-color: #6366f1;
    background: #f5f3ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.12);
}
.till-pay-tile--disabled,
.till-pay-tile--disabled:hover {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
    background: #fafafa;
    border-color: #e5e7eb;
}

.till-pay-tile__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eef2ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.till-pay-tile__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.till-pay-tile__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
}
/* The legacy .cardButton span styling adds padding/border/box-shadow to every
   inner <span>. That ruins the tile layout, so reset spans inside the new tiles. */
.till-pay-tile span,
.till-pay-tile span:hover,
.till-pay-tile span:active {
    all: unset;
    color: inherit;
    font: inherit;
}
/* `all: unset` above strips the span's own position:relative + overflow:hidden,
   but it does NOT remove the legacy .till-pay-btn::before accent bar pseudo-
   element. With the span no longer clipping it, that bar escapes and bleeds past
   the tile's rounded corners (#41388). The tile design shows the per-method
   colour cue on the icon background (see below), so suppress the legacy bar. */
.till-pay-tile .till-pay-btn::before {
    display: none;
}
.till-pay-tile__name span {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}
.till-pay-tile__detail {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.3;
}
.till-pay-tile__amount {
    font-weight: 600;
    color: #374151;
}
/* Card-payment colour accents on the name span. The .till-pay-btn--cash etc
   classes set a left-border colour in the legacy layout; here we use them as
   small colour cues on the icon background. */
.till-pay-tile[data-method="Cash"] .till-pay-tile__icon { background: #ecfdf5; color: #059669; }
.till-pay-tile[data-method="PDQ"] .till-pay-tile__icon { background: #fef3c7; color: #b45309; }
.till-pay-tile[data-method="Card"] .till-pay-tile__icon { background: #fee2e2; color: #b91c1c; }
.till-pay-tile[data-method="Cheque"] .till-pay-tile__icon { background: #f3f4f6; color: #4b5563; }
.till-pay-tile[data-method="ePoints"] .till-pay-tile__icon { background: #ede9fe; color: #6d28d9; }
.till-pay-tile#tillDiscountBtn .till-pay-tile__icon { background: #fce7f3; color: #be185d; }
/* #41288 — the Stripe Terminal reader tile also carries the legacy .readerPayButton
   class (for the online/offline background cues), whose column/centre layout fought
   the .till-pay-tile row layout and pushed the icon + label out of line with the
   other method tiles. Pin it back to the shared icon-left row layout. */
.till-pay-tile.readerPayButton {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 0.75rem 0.85rem;
}

/* Split-payment toggle */
.till-paying__split {
    margin-top: 1rem;
    border-top: 1px dashed #e5e7eb;
    padding-top: 0.75rem;
}
.till-paying__split-toggle {
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
}
.till-paying__split-toggle:hover {
    background: #f3f4f6;
    color: #111827;
}
.till-paying__split-toggle[aria-expanded="true"] .till-paying__split-chev {
    transform: rotate(180deg);
}
.till-paying__split-chev {
    transition: transform 0.18s ease;
    font-size: 0.75rem;
}
.till-paying__split-body {
    margin-top: 0.75rem;
    padding: 0.85rem;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}
.till-paying__split-hint {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 0.6rem;
    line-height: 1.4;
}
.till-paying__split-hint-icon {
    margin-right: 0.35rem;
    color: #4f46e5;
}
.till-paying__split-hint-amount {
    font-weight: 700;
    color: #111827;
}
.till-paying__split-hint-meta {
    display: block;
    font-size: 0.78rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}
/* Ready state — once an amount is typed, the hint glows so the operator
   knows action is needed (now go tap a method above). */
.till-paying__split-hint--ready {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #1e1b4b;
    border-radius: var(--radius-md);
    padding: 0.6rem 0.75rem;
    font-weight: 500;
}
.till-paying__split-hint--ready .till-paying__split-hint-icon {
    color: #4338ca;
}

/* Take Payment button — three-part layout: icon, action label, amount.
   Amount sits on the right with a subtle pill-style background so it
   reads as "this is what's about to be charged". */
.till-take-payment-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 1.1rem;
    font-size: 1.1rem;
    font-weight: 600;
}
.till-take-payment-btn .fa {
    font-size: 1.15rem;
}
.till-take-payment-btn__label {
    flex: 0 0 auto;
}
.till-take-payment-btn__amount {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.18);
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}
.till-take-payment-btn:disabled .till-take-payment-btn__amount {
    background: rgba(255, 255, 255, 0.1);
}

/* ---- Shared member avatar (initials fallback) ----------------------------
   Used by _MemberAvatar.cshtml. Sizing/border-radius/object-fit comes from
   the per-context class passed via ExtraCssClass (e.g. cls-attendee__photo,
   modern-header-avatar, etc.) so existing layouts keep working. The wrapper
   only needs to provide the initials surface that shows when an <img>
   inside fails to load (Gravatar 404 for members without a profile photo).
*/
.member-avatar {
    /* Fixed slate gradient — kept independent of the club brand colour so
       that avatars stay neutral against brand-coloured pills/badges and
       look identical across the till, member lists, attendees, etc. */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #475569 0%, #1e293b 100%);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}

.member-avatar__img {
    /* Sits on top of the initials, covering them while it loads successfully.
       When the load fails (e.g. Gravatar 404) the inline onerror removes the
       <img>, revealing the initials underneath. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.member-avatar__initials {
    /* Sized by the parent — wrappers set their own width/height. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    letter-spacing: 0.02em;
    user-select: none;
}

/* #40992 — opt-in click-to-enlarge avatars (MemberAvatarModel.EnableEnlarge).
   The wrapper triggers #memberAvatarEnlargeModal, which shows Member.GetPhoto()
   at full size. Cursor + subtle shadow affordance signal clickability. */
.member-avatar--enlargeable {
    cursor: pointer;
}

.member-avatar--enlargeable:hover {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

/* #41397 — Consistent click-to-enlarge magnifier hint. Shown on EVERY surface
   where a member photo can be enlarged so the affordance reads the same
   everywhere staff confirm identity:
     - .member-avatar--enlargeable          (the shared _MemberAvatar partial)
     - .co-live-card__avatar--enlargeable   ("In the club right now" dashboard)
     - .qv-hero__photo                       (member QuickView drawer)
     - .member-table__cell--photo            (member list table — real photo only)
     - .visits-hub__row-photo--enlargeable  (visit / access log rows)
   These match the trigger selectors in _MemberAvatarEnlargeModal; new enlarge
   points should be added here AND there together.
   (The member profile/header photos double as the upload trigger, so they use a
   distinct .member-photo-zoom button instead of this whole-photo scrim.)
   A magnifying-glass glyph fades in over the photo on hover (dark scrim), and
   stays on as a small corner badge on touch devices where hover is unavailable.
   Rendered via ::after, so the targets must be non-replaced wrappers (the
   member-table img is targeted via its cell, which is gated with :has() so the
   hint only appears when a real <img> photo is present, not an initials block). */
.co-live-card__avatar--enlargeable {
    cursor: pointer;
}

.member-avatar--enlargeable,
.co-live-card__avatar--enlargeable,
.qv-hero__photo:has(img),
.member-table__cell--photo:has(img.member-table__avatar),
.visits-hub__row-photo--enlargeable {
    position: relative;
}

.member-avatar--enlargeable::after,
.co-live-card__avatar--enlargeable::after,
.qv-hero__photo:has(img)::after,
.member-table__cell--photo:has(img.member-table__avatar)::after,
.visits-hub__row-photo--enlargeable::after {
    content: "\f002"; /* fa-search (magnifying glass). NB: fa-search-plus (\f00e) isn't in the project's FA subset and renders as tofu — fa-search (\f002) is used widely and ships. */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    background: rgba(15, 23, 42, 0.45);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.member-avatar--enlargeable:hover::after,
.co-live-card__avatar--enlargeable:hover::after,
.qv-hero__photo:has(img):hover::after,
.member-table__cell--photo:has(img.member-table__avatar):hover::after,
.visits-hub__row-photo--enlargeable:hover::after {
    opacity: 1;
}

/* The member-table photo lives left-aligned in a wider square cell, so size the
   scrim to the 40px round avatar rather than filling the whole cell. */
.member-table__cell--photo:has(img.member-table__avatar)::after {
    inset: 0 auto auto 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* Touch devices (no hover): keep a small always-visible magnifier badge in the
   corner so the action stays discoverable without a hover state. */
@media (hover: none) {
    .member-avatar--enlargeable::after,
    .co-live-card__avatar--enlargeable::after,
    .qv-hero__photo:has(img)::after,
    .member-table__cell--photo:has(img.member-table__avatar)::after,
    .visits-hub__row-photo--enlargeable::after {
        content: "\f002";
        inset: auto 1px 1px auto;
        width: 15px;
        height: 15px;
        font-size: 0.55rem;
        border-radius: 50%;
        background: rgba(15, 23, 42, 0.7);
        opacity: 1;
    }
}

/* #41397 — Enlarge button for the member profile/header photos. Those photos are
   the upload trigger (click body → upload modal), so enlarge can't take the whole
   photo. Instead a magnifier bar sits across the bottom of the circle: clicking it
   opens the lightbox (nearest CoreUI toggle wins over the upload toggle on the
   wrapper) while a click elsewhere still opens upload. Fades in on hover; stays on
   for touch. Same fa-search-plus glyph as the scrim hint, so the cue is consistent. */
.member-photo-zoom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 3px;
    color: #fff;
    font-size: 0.8rem;
    line-height: 1;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.62), rgba(15, 23, 42, 0));
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 2;
}

.member-dashboard-header__photo:hover .member-photo-zoom,
.member-profile-photo__avatar:hover .member-photo-zoom,
.member-photo-zoom:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    .member-photo-zoom {
        opacity: 1;
    }
}

.member-avatar-enlarge-modal__img {
    max-width: 100%;
    max-height: 70vh;
    border-radius: var(--radius-md);
    object-fit: contain;
}

/* Per-context wrappers for _MemberAvatar — sizing for places that previously
   used inline styles or had no per-context class set up for the partial. */
.referral-panel-avatar-md {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.95rem;
}

.referral-panel-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.8rem;
}

/* _MemberPanel.cshtml — keeps the previous .col-2 column proportional shape. */
.member-panel-avatar {
    width: 100%;
    aspect-ratio: 1 / 1;
    font-size: 1.6rem;
}

/* Profile edit offcanvas — clickable avatar with initials fallback. */
.profile-panel-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #e5e7eb;
    font-size: 1.6rem;
}

/* DataCheck profile photo — clickable avatar with initials fallback. */
.member-avatar.datacheck-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid;
    font-size: 2.4rem;
}

/* ══════════════════════════════════════════════════════════════════
   Mobile audit fixes — Apr 2026
   Targeted CSS-only fixes for visual issues found at 390x844 viewport.
   Each block is self-contained and notes the bug it addresses.
   ══════════════════════════════════════════════════════════════════ */

/* ── Bug 1 & 3 deferred: see coordinator note. Folding page sub-nav into
   the global drawer is a Razor/JS change tracked separately; don't move
   the sliders FAB here in the meantime. */

/* ── Bug 2: ClubOverview "Day Ticket" title squished to one letter ──
   .co-slot a is a flex row with .co-slot__time (90px) + .co-slot__name
   (flex:1) + .co-slot__count (min-width:120px). The name has overflow
   ellipsis but no min-width:0, so flex's default min-width:auto lets
   inner content (e.g. PAR-Q badge) push it past the available space and
   it truncates to ~1 character. Forcing min-width:0 lets it shrink and
   ellipsis correctly. Tighten the count column on narrow viewports so
   the name has more room. */
.co-slot__name {
    min-width: 0;
}
@media (max-width: 480px) {
    .co-slot__time {
        width: auto;
        min-width: 64px;
    }
    .co-slot__count {
        min-width: 0;
        flex-shrink: 0;
    }
}

/* ── Bug 4: Reporting period dropdown shows "Toda" cut off ──
   #defined-periods sits in a .col with the other date filters. On 390px
   the column is too narrow for "Today" / "Yesterday" / etc. Let the
   period dropdown column take the full row width on mobile so the
   longest option fits. Other filters already wrap below it via Bootstrap
   .col flow. */
@media (max-width: 575.98px) {
    .reporting-filters .reportFilter.dateFilter:first-child {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .reporting-filters #defined-periods {
        width: 100%;
    }
    /* #40665 — prevent date text wrapping/overflow on small screens */
    .reporting-filters .dateFilter input {
        font-size: 0.8rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
}

/* ── Bug 5: Reporting top tab strip clips last tab with no scroll cue ──
   .settings-mobile-nav already has overflow-x:auto + nowrap, but offers
   no visual indicator that more tabs exist to the right. Add scroll-snap
   for tactile feel and a faint right-edge gradient that fades when the
   user has scrolled to the end. */
@media (max-width: 991.98px) {
    .settings-mobile-nav {
        position: relative;
        scroll-snap-type: x proximity;
    }
    .settings-mobile-nav::after {
        content: "";
        position: sticky;
        top: 0;
        right: 0;
        float: right;
        width: 28px;
        height: 100%;
        margin-left: -28px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
        pointer-events: none;
    }
    .settings-mobile-nav-item {
        scroll-snap-align: start;
    }
}

/* ── Bug 6a: Communication conversation preview hard-cut mid-character ──
   .inbox-list-item-preview is a flex row with three children: an unread
   badge, a type label span, then the unnamed preview <span>. The flex
   container has overflow:hidden + ellipsis, but ellipsis only applies
   when the text node lives directly on the styled element — flex items
   don't inherit it. Make the unnamed last span take the remaining width
   with its own ellipsis so the preview truncates cleanly with "…". */
.inbox-list-item-preview > span:last-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bug 6b originally forced the inbound filters to nowrap because the tab was
   a two-button "All / Unread Only" segmented pill that looked wrong wrapping.
   The tab has since grown to four buttons — All, Incoming Only (#40146),
   Unread Only and the wide "Show system messages" toggle (#41421) — so nowrap
   now forces ~510px of buttons plus the search + Refresh onto one row and
   overflows the toolbar on narrower desktops (the ≤768px override at ~L14118
   hid it below phone width). Allow wrapping: the buttons drop to a second row
   when space is tight instead of running off the right edge. #41439 */
[data-toolbar-tab="inbound-panel"] .toolbar__filters {
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════
   PAYING VIEW v3 — state-driven action column.
   Right column reorders sections via flex `order:` so whatever the
   operator needs to tap next is at the top: methods when something's
   owed, Complete when fully paid. The basket sits on the left as
   settled context — it doesn't change while taking payment.
   ══════════════════════════════════════════════════════════════════ */

.till-paying__action-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Default order — covers data-pay-state="unpaid" (no payments yet) and
   any partial-pay state (some payments taken but more is owed). The
   methods grid is the dominant CTA; Complete sits dim at the bottom. */
.till-paying__status   { order: 1; }
.till-paying__methods  { order: 2; }
.till-paying__payments-card { order: 3; }
.till-paying__complete { order: 4; }

/* Fully paid — review-then-confirm flow. Status → payments collected
   (operator scans down to verify) → Complete. Methods are out of the
   picture entirely; if staff need to add more they can remove a payment
   from the list and the column will revert to the unpaid layout. */
[data-pay-state="fullypaid"] .till-paying__status   { order: 1; }
[data-pay-state="fullypaid"] .till-paying__payments-card { order: 2; }
[data-pay-state="fullypaid"] .till-paying__complete { order: 3; }
[data-pay-state="fullypaid"] .till-paying__methods  { display: none; }

/* Overpaid (cash > total) — same as fullypaid; the status banner shows
   the change-due reminder, methods recede entirely. */
[data-pay-state="overpaid"] .till-paying__status   { order: 1; }
[data-pay-state="overpaid"] .till-paying__payments-card { order: 2; }
[data-pay-state="overpaid"] .till-paying__complete { order: 3; }
[data-pay-state="overpaid"] .till-paying__methods  { display: none; }

/* ── Status banner (top of the action column) ────────────────────────
   One pane visible at a time. Big, single number — operator's anchor. */
.till-paying__status {
    border-radius: 14px;
    overflow: hidden;
}
.till-paying__status-pane {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
}

/* Collect (unpaid / partial) — neutral dark background, bold amount */
.till-paying__status-pane--collect {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    color: #fff;
    justify-content: space-between;
}
.till-paying__status-collect-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}
.till-paying__status-collect-amount {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

/* Paid — green success banner */
.till-paying__status-pane--paid {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #6ee7b7;
    color: #065f46;
}
.till-paying__status-paid-icon {
    font-size: 1.8rem;
    color: #059669;
}
.till-paying__status-paid-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
}
.till-paying__status-paid-sub {
    font-size: 0.85rem;
    color: #047857;
}

/* Change due — amber */
.till-paying__status-pane--change {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fbbf24;
    color: #78350f;
}
.till-paying__status-change-icon {
    font-size: 1.8rem;
    color: #d97706;
}
.till-paying__status-change-title {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #92400e;
}
.till-paying__status-change-amount {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: #78350f;
}

/* ── Methods card ──────────────────────────────────────────────────
   No `overflow: hidden` here. The methods-body grid stretches both
   columns to the row height (= max of tiles and split panel), so the
   card sizes to whichever is taller. Overflow:hidden was risking
   keypad clipping on shorter viewports / different font rendering. */
.till-paying__methods {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    transition: opacity 0.18s ease;
}
.till-paying__methods-header {
    padding: 0.55rem 0.85rem 0.55rem 1rem;
    background: #f9fafb;
    border-bottom: 1px solid #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.till-paying__methods-body {
    padding: 0.85rem;
}

/* ── Split mode — methods grid (left) + keypad panel (right) ─────────
   Triggered by data-split-mode="split" on .till-paying__methods. Flex
   row with `align-items: flex-start` so each side sizes to its own
   natural content height — the methods card grows to fit whichever is
   taller (usually the keypad panel). Stretch was risky when something
   else (overflow / nested constraints) capped the row to the shorter
   child and clipped the other. Tiles compact in this mode (description
   line hidden) so the per-tile width can shrink without wrapping. */
.till-paying__methods[data-split-mode="split"] .till-paying__methods-body {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.till-paying__methods[data-split-mode="split"] .till-pay-grid--tiles {
    flex: 1 1 55%;
    min-width: 0;
}
.till-paying__methods[data-split-mode="split"] .till-paying__split-panel {
    flex: 1 1 45%;
    min-width: 0;
}
.till-paying__methods[data-split-mode="split"] .till-pay-tile__detail {
    display: none;
}
.till-paying__methods[data-split-mode="split"] .till-pay-tile {
    padding: 0.6rem 0.7rem;
    min-height: 60px;
}

/* ── Split toggle (header pill) ───────────────────────────────────── */
.till-paying__split-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-pill);
    color: #4b5563;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.till-paying__split-toggle:hover {
    background: #f3f4f6;
    color: #111827;
}
.till-paying__split-toggle[aria-expanded="true"] {
    background: #4f46e5;
    border-color: #4338ca;
    color: #fff;
}
.till-paying__split-toggle .fa {
    font-size: 0.85rem;
}

/* ── Split panel (right side of the methods card in split mode) ─────
   Compact-but-still-touchable. The shared .tillTotal.value style is
   sized for a full-screen calculator (2rem font, 14px padding) — way
   too loud for typical till amounts. Override inside the split panel
   so a £3.12 entry doesn't scream like a £799 cash drop.

   `min-height` is set explicitly to the natural content height so that
   any parent that's accidentally capping flex-child height (a known
   trap with `align-items: stretch`/`flex-shrink` on short viewports)
   can't crush the keypad to zero. Hint + amount + 4 button rows + gaps
   ≈ 320px; we round up so a slightly taller font on iPad still fits. */
.till-paying__split-panel {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    min-height: 340px;
    flex-shrink: 0;
}
.till-paying__split-panel .tillTotal {
    margin: 0 0 0.25rem;
}
.till-paying__split-panel .tillTotal.value {
    padding: 0.55rem 0.85rem;
    font-size: 1.45rem;
    border-radius: var(--radius-md);
}
.till-paying__split-panel .clearButton {
    padding-left: 4px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
}
.till-paying__split-panel .clearButton__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}
.till-paying__split-panel .till-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
}
.till-paying__split-panel .till-keypad .tillButton {
    float: none;
    width: auto;
    margin: 0;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.till-paying__split-panel .till-keypad .tillButton span {
    width: auto;
    padding: 0;
    font-size: 0.95rem;
}
/* #41715 — the split keypad lives inside the height-capped split panel, but the
   tall-desktop rule "#payingKeypadPanel .till-keypad" (flex:1 1 0 + grid-auto-rows
   minmax(56px,1fr)) squeezes the 4-row grid into the panel and clips the bottom
   "0 . 00" row (no decimal/zero keys). That rule was written when the keypad filled
   a full column; here it must size to its content. Higher specificity (extra class)
   so it wins over the ID rule; the split panel (align-items:flex-start) grows to fit. */
#payingKeypadPanel .till-paying__split-panel .till-keypad {
    flex: 0 0 auto;
    grid-auto-rows: auto;
    min-height: auto;
}

/* Touch targets in the action column */
.till-paying__action-col .till-pay-tile {
    min-height: 64px;
}

/* ── Complete section ──────────────────────────────────────────────
   Single CTA. Receipt delivery is decided post-sale, so this button
   is the only thing the operator needs to tap when fully paid. */
.till-paying__complete {
    display: flex;
    flex-direction: column;
}

.completeButton--primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.18s ease;
}
.completeButton--primary:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.4);
}
.completeButton--primary .fa {
    font-size: 1.1rem;
}

/* Bigger / glowier when it's the dominant CTA (fully paid / overpaid). */
[data-pay-state="fullypaid"] .completeButton--primary,
[data-pay-state="overpaid"] .completeButton--primary {
    padding: 1.3rem 1.5rem;
    font-size: 1.35rem;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35);
}

/* While disabled (remaining > 0) make Complete obviously inactive but
   still discoverable so operators know where it'll appear. */
.till-paying__complete .completeButton.disabled {
    opacity: 0.4;
    pointer-events: none;
    background: #d1d5db;
    box-shadow: none;
}

/* ── Post-sale receipt prompt (rendered inside SweetAlert by _Success) ── */
.receipt-prompt__lead {
    margin: 0 0 1rem;
    color: #4b5563;
    font-size: 0.95rem;
}
.receipt-prompt__options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.receipt-prompt__option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 1.25rem;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-lg);
    background: #fff;
    color: #111827;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.receipt-prompt__option:hover {
    border-color: #4f46e5;
    background: #eef2ff;
    color: #3730a3;
    transform: translateY(-1px);
}
.receipt-prompt__option:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.receipt-prompt__option--primary {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    border-color: #4338ca;
    color: #fff;
}
.receipt-prompt__option--primary:hover {
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}
.receipt-prompt__option-icon {
    font-size: 1.1rem;
}

/* Email-step input + actions inside the prompt.
   Override .swal2-input's default `margin: 1em 2em 3px` — the 2em horizontal
   margin combined with `width: 100%` was pushing the input ~64px wider than
   the swal content area, causing a horizontal scrollbar below the Send
   button and making the button look misaligned with the input. (#40447) */
.receipt-prompt__input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.receipt-prompt__input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.receipt-prompt__input--error {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.receipt-prompt__error {
    margin-top: 0.5rem;
    padding: 0.55rem 0.75rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #b91c1c;
    font-size: 0.875rem;
    text-align: left;
}
.receipt-prompt__email-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
}
.receipt-prompt__spinner {
    font-size: 2rem;
    color: #4f46e5;
}

/* === Locate-member redesign — Apr 2026 ===
   Mobile /Member result-card list. Replaces the old square-photo-on-card
   layout with a compact row: small circular avatar (initials fallback),
   name + status, meta strip (phone / email / last visit), unpaid chip.
   Plus type-ahead search input + result-count header with "Add member" pill.
   Scoped to .locate-* classes so it doesn't affect the desktop /Member page. */

.locate-search {
    display: flex;
    align-items: center;
    gap: 8px;
}

.locate-search__input-wrap {
    position: relative;
    flex: 1;
}

.locate-search__filter-btn {
    flex-shrink: 0;
    height: 46px;
}

/* #42003 — #advancedFilters sits below invisible desktop content in DOM
   order, so on mobile it'd render below the results. Make it a full-screen
   sheet instead, so DOM position doesn't matter. */
@media (max-width: 991.98px) {
    #advancedFilters {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        margin-bottom: 0;
        border-radius: 0;
        overflow-y: auto;
    }
}

.locate-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.95rem;
    pointer-events: none;
}

.locate-search__input.form-control {
    padding-left: 38px;
    padding-right: 38px;
    height: 46px;
    border-radius: var(--radius-lg);
    font-size: 1rem;
}

.locate-search__clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #9ca3af;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.locate-search__clear:hover { color: #374151; background: #f3f4f6; }

/* Result-count header sits above the cards; it's also where the "+ Add new
   member" pill lives so users can create from the empty/no-match state. */
.locate-results__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 2px 10px;
    flex-wrap: wrap;
}

.locate-results__count {
    font-size: 0.875rem;
    color: #4b5563;
    font-weight: 500;
}

.locate-results__count--empty {
    color: #6b7280;
    font-style: italic;
}

.locate-results__add {
    border: 0;
    background: var(--admin-club-color, #4f46e5);
    color: #fff;
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.locate-results__add:hover {
    filter: brightness(1.05);
}
.locate-results__add .fa { font-size: 0.75rem; }

/* Card row — avatar | body. Fixed left column for the avatar so multiple
   cards align cleanly down the column. */
.locate-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.locate-card:hover,
.locate-card:active {
    border-color: var(--admin-club-color, #4f46e5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.locate-card__avatar-wrap {
    flex: 0 0 auto;
}

/* Avatar sizing applied via the ExtraCssClass passed to _MemberAvatar. */
.locate-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 1.25rem;
}

.locate-card__body {
    flex: 1 1 auto;
    min-width: 0; /* allow text truncation in flex children */
}

.locate-card__name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.locate-card__name {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* The status column hosts the existing membership-status badges produced
   by GetMemberships — keep them readable but don't let them push the name
   off the card. */
.locate-card__status {
    flex: 0 0 auto;
    text-align: right;
    font-size: 0.75rem;
    line-height: 1.2;
}
.locate-card__status .badge {
    font-size: 0.75rem;
    padding: 3px 6px;
}
.locate-card__status br { display: none; }

.locate-card__meta {
    margin-top: 4px;
    font-size: 0.8125rem;
    color: #6b7280;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.locate-card__meta-sep {
    margin: 0 6px;
    color: #d1d5db;
}

.locate-card__alerts {
    margin-top: 6px;
}

.locate-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    line-height: 1.2;
}

.locate-card__chip--unpaid {
    background: #fee2e2;
    color: #b91c1c;
}

/* #42151 — Collect button on unpaid rows + the Collect sheet (mobile) + paid/dd row states. */
.locate-card__chip--paid {
    background: #dcfce7;
    color: #15803d;
}

.locate-card__chip--dd {
    background: #dbeafe;
    color: #1d4ed8;
    margin-left: 6px;
}

.locate-card--paid {
    opacity: 0.72;
}

.locate-card__collect {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    min-height: 34px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: var(--club-colour, #16a34a);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.locate-card__collect:active {
    opacity: 0.85;
}

.qc-offcanvas {
    height: auto;
    max-height: 85vh;
}

.qc-offcanvas .offcanvas-body {
    padding: 12px 16px 24px;
}

.qc-sheet__empty {
    text-align: center;
    padding: 24px 12px;
    color: #6b7280;
}

.qc-sheet__empty i {
    font-size: 2rem;
    color: #16a34a;
    margin-bottom: 8px;
    display: block;
}

.qc-sheet__summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.qc-sheet__total {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
}

.qc-sheet__total-label {
    color: #6b7280;
    font-size: 0.9rem;
}

.qc-row {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.qc-row__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.qc-row__plan {
    font-weight: 700;
    color: #111827;
}

.qc-row__amount {
    font-weight: 800;
}

.qc-row__amount--overdue {
    color: #b91c1c;
}

.qc-row__note {
    font-size: 0.8rem;
    color: #b45309;
    margin-bottom: 8px;
}

.qc-row__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qc-row__charge {
    margin: 0;
}

/* #42280 — a settled row stays on screen so staff can see what they just took, but retires visually
   so the rows still needing action read as the outstanding work. */
.qc-row--settled {
    opacity: 0.7;
}

.qc-row--paid {
    border-color: #86efac;
    background: #f0fdf4;
}

.qc-row--requested {
    border-color: #fcd34d;
    background: #fffbeb;
}

.qc-row__settled {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #166534;
}

.qc-row--requested .qc-row__settled {
    color: #92400e;
}

.qc-btn {
    width: 100%;
    min-height: 46px;
    justify-content: center;
}

.qc-sheet__till {
    border-top: 1px solid #e5e7eb;
    margin-top: 4px;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qc-sheet__till-label {
    font-size: 0.8rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

/* === Reporting tables + locate-card chip overflow — Apr 2026 ===
   Two narrowly-scoped mobile fixes:
   1. /Reporting tables (4-6 cols) get clipped on a 390px viewport because
      Bootstrap's .table is width:100% and the parent .table-responsive only
      activates overflow-x:auto when the table is wider than its container.
      We give the inner .table a min-width so horizontal scroll actually
      kicks in, and add a sticky right-edge gradient as a scroll cue (same
      pattern as .settings-mobile-nav::after above).
   2. The new /Member locate-card OVERDUE/STARTING SOON badges live in
      .locate-card__status, which sits in a flex row with the member name.
      When a member has multiple long badges they overflow the card edge.
      We let the status column shrink and wrap its badges to a second line.
   Follow-up: Till Totals + Operating & Performance would read better as
   2-col stacked cards on phone — see audit task #13. ============================ */
@media (max-width: 767.98px) {
    /* 1. Reporting tables — make horizontal scroll actually trigger */
    #reportBody .table-responsive {
        position: relative;
        -webkit-overflow-scrolling: touch;
    }
    #reportBody .table-responsive > .table {
        min-width: 560px; /* ~6 columns of legible content; lets overflow-x:auto activate */
    }
    /* Right-edge gradient cue so the user knows there's more to scroll */
    #reportBody .table-responsive::after {
        content: "";
        position: sticky;
        top: 0;
        right: 0;
        float: right;
        width: 24px;
        height: 100%;
        margin-left: -24px;
        margin-top: -1px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
        pointer-events: none;
    }
}

/* 2. Locate-card status badges — wrap to a second line instead of clipping.
   .locate-card__status is a <span> rendered with raw HTML containing one or
   more <span class="badge ...">…</span> elements. Switch to inline-flex with
   wrap so multiple badges stack neatly and the row never overflows the card. */
.locate-card__name-row {
    flex-wrap: wrap; /* allow status block to drop below name when crowded */
}
.locate-card__status {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}
.locate-card__status .badge {
    max-width: 100%;
    white-space: normal; /* let long plan names wrap inside the badge */
    word-break: break-word;
}

/* ══════════════════════════════════════════════════════════════════
   2-panel mobile drawer — global nav + page sub-nav side-by-side
   (Apr 2026 mobile audit)

   On desktop (>=992px) the page sub-nav (.diary-sidebar / .members-sidebar
   / .messaging-sidebar / .finance-sidebar) sits inline next to the icon
   rail — that layout is untouched.

   On mobile (<992px) the page sub-nav is hidden by default so it does
   not float over the page content. Tapping the global hamburger fires
   `show.coreui.sidebar`; JS in _DashboardLayout adds
   `body.drawer-with-pagemenu` if a page sub-nav exists, and rules below
   slide it in immediately to the right of the global drawer so both
   panels are visible together. Tapping a link or changing a filter
   inside the page sub-nav closes the global drawer (handled in JS),
   which removes the body class and lets both slide back out.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    /* Default state on mobile: page sub-nav is pre-positioned where it
       will end up (`left: 15.5rem`, right of the global drawer) but
       translated fully off-screen — by its own width PLUS the drawer
       width — so when the drawer-with-pagemenu state animates the
       transform back to 0, it slides through the drawer's territory and
       emerges to the right of it. With a delay matching the drawer's
       own slide-in, the sub-nav appears to peel out from behind it. */
    .diary-sidebar,
    .members-sidebar,
    .messaging-sidebar,
    .finance-sidebar {
        /* Existing rules at @media (max-width: 767.98px) set
           `display: none` on members/messaging/finance asides. We need
           the element to be rendered (just translated off-screen)
           otherwise the open transition can't run — `display` is not
           transitionable, and the element pops in instead of sliding. */
        display: flex !important;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 15.5rem !important;               /* override desktop body.X-page-active rules at <992 */
        width: calc(100vw - 15.5rem) !important;
        max-width: 18rem;
        transform: translateX(calc(-100% - 15.5rem));
        /* No transition by default — added via body.transitions-ready below
           after DOMContentLoaded — otherwise the initial off-screen positioning
           animates from the desktop default during page load (FOUC). */
        z-index: 1030;                          /* above overlay (1029), under #sidebar (1031) */
        background: #f9fafb;
        border-right: 1px solid #e5e7eb;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
        overflow-y: auto;
        padding: 16px 14px;
    }

    body.transitions-ready .diary-sidebar,
    body.transitions-ready .members-sidebar,
    body.transitions-ready .messaging-sidebar,
    body.transitions-ready .finance-sidebar {
        transition: transform 0.28s ease;
    }

    body.drawer-with-pagemenu .diary-sidebar,
    body.drawer-with-pagemenu .members-sidebar,
    body.drawer-with-pagemenu .messaging-sidebar,
    body.drawer-with-pagemenu .finance-sidebar {
        transform: translateX(0);
        /* Delay the slide so the global drawer arrives first; the sub-nav
           then appears to emerge from behind it. CoreUI's sidebar transition
           is ~250ms, so we hold for 200ms before starting our 280ms slide. */
        transition: transform 0.28s ease 0.2s;
    }

    /* The page-specific FAB toggle becomes redundant while the 2-panel
       drawer is open — hide it so the user has one clear path. */
    body.drawer-with-pagemenu .diary-sidebar-toggle,
    body.drawer-with-pagemenu .members-sidebar-toggle,
    body.drawer-with-pagemenu .messaging-sidebar-toggle,
    body.drawer-with-pagemenu .finance-sidebar-toggle {
        display: none !important;
    }

    /* The page sub-nav repeats the club brand at the top — the global
       drawer next to it already shows the same logo + name, so suppress
       the duplicate while the 2-panel drawer is open. */
    body.drawer-with-pagemenu .diary-sidebar__brand,
    body.drawer-with-pagemenu .members-sidebar__brand,
    body.drawer-with-pagemenu .messaging-sidebar__brand,
    body.drawer-with-pagemenu .finance-sidebar__brand {
        display: none;
    }
}

/* ── #41323 — Diary mobile filter button ─────────────────────────────────────
   The diary overhaul (beta, 0c412c81c / 1928a3786, live swap/2026061610 on
   16/06/2026) shipped a mobile filter toggle (#diarySidebarToggle, only shown
   <768px via d-md-none) whose click handler toggles `.show` on #diarySidebar +
   #diarySidebarOverlay (Index.cshtml) — but no CSS responded to it, and the
   2-panel drawer rules above park the sidebar off-screen at <992px (only the
   global hamburger's `body.drawer-with-pagemenu` slid it back). Net result: the
   filter button did nothing on phones. Style the toggle and let it open the
   filters as a left-anchored drawer with a dim tap-to-close overlay. */
.diary-sidebar-toggle {
    display: flex;                      /* overridden to none >=768px by d-md-none */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 10px 12px 0;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-md, 8px);
    background: #fff;
    color: #374151;
    font-size: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}
.diary-sidebar-toggle:hover {
    background: #f3f4f6;
    color: var(--admin-club-color, #667eea);
}

@media (max-width: 767.98px) {
    /* `.diary-sidebar.show` (0,2,0) beats the drawer rule's `.diary-sidebar`
       (0,1,0) for transform; left/width carry !important to beat the drawer's
       own !important. Anchors the drawer to the left edge (no global drawer is
       open in this path, so the 15.5rem offset would leave a dead gap). */
    .diary-sidebar.show {
        left: 0 !important;
        width: 290px !important;
        max-width: 85vw;
        transform: translateX(0);
        z-index: 1030;
    }
    .diary-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1029;                  /* under the sidebar (1030), over content */
    }
    .diary-sidebar-overlay.show {
        display: block;
    }
}

/* ---- Diary booking-mode panel (#39840 phase 3) ------------------------------
   Right-side panel shown while booking is in progress. Replaces an earlier
   horizontal banner that scrolled out of view and competed with the Schedule
   Class CTA on narrow viewports. On desktop the panel floats fixed against the
   right edge so the calendar grid can scroll independently behind it; the
   diary content gets right padding via body.diary-booking-active so tiles are
   never hidden behind the panel. On mobile the panel collapses to a stacked
   card above the calendar with a tap-to-collapse body. */
.diary-booking-panel {
    background: #fff;
    border: 1px solid #c7d6f5;
    border-radius: 0.6rem;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0 0.75rem 1rem;
}

.diary-booking-panel__header {
    background: linear-gradient(135deg, #eef4ff 0%, #e3edff 100%);
    border-bottom: 1px solid #d7e2f5;
    padding: 0.55rem 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.diary-booking-panel__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1e3a8a;
}

.diary-booking-panel__eyebrow .fa {
    margin-right: 0.3rem;
}

.diary-booking-panel__collapse {
    background: transparent;
    border: 0;
    color: #475569;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    line-height: 1;
}

.diary-booking-panel__collapse:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #1e293b;
}

.diary-booking-panel--collapsed .diary-booking-panel__body {
    display: none;
}

.diary-booking-panel--collapsed .diary-booking-panel__collapse .fa {
    transform: rotate(180deg);
}

.diary-booking-panel__body {
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.diary-booking-panel__member {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.diary-booking-panel__avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    font-size: 0.95rem;
}

.diary-booking-panel__avatar .member-avatar__img,
.diary-booking-panel__avatar .member-avatar__initials {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.diary-booking-panel__avatar .member-avatar__img {
    object-fit: cover;
}

.diary-booking-panel__member-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.diary-booking-panel__name {
    font-weight: 700;
    color: #111827;
    text-decoration: none;
    word-break: break-word;
}

.diary-booking-panel__name:hover {
    text-decoration: underline;
    color: #111827;
}

.diary-booking-panel__hint {
    font-size: 0.78rem;
    color: #475569;
    margin-top: 0.1rem;
}

.diary-booking-panel__section {
    border-top: 1px solid #f1f5f9;
    padding-top: 0.7rem;
}

.diary-booking-panel__section--warn {
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    font-size: 0.78rem;
}

.diary-booking-panel__section--warn .fa {
    margin-right: 0.35rem;
    color: #d97706;
}

.diary-booking-panel__section--muted {
    color: #6b7280;
    font-size: 0.78rem;
}

.diary-booking-panel__section-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 0.4rem;
}

.diary-booking-panel__pills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.diary-booking-panel__pill {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: var(--radius-pill);
    background: #f3f4f6;
    color: #1f2937;
    font-size: 0.75rem;
    font-weight: 500;
}

.diary-booking-panel__access {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 9.2rem;
    overflow-y: auto;
    font-size: 0.8rem;
    color: #1f2937;
}

.diary-booking-panel__access li {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.15rem 0;
}

.diary-booking-panel__access li .fa {
    color: var(--club-colour, #10b981);
    font-size: 0.75rem;
}

/* Phase 4: just-booked toast inside the side panel. Sits above the member info
   so it's the first thing the eye lands on after a booking succeeds. Stays
   visible across subsequent bookings — title updates and the flash animation
   re-fires so staff get a confirmation each time without having to dismiss. */
.diary-booking-panel__just-booked {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-radius: var(--radius-md);
    color: #065f46;
}

.diary-booking-panel__just-booked-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    margin-top: 0.05rem;
}

.diary-booking-panel__just-booked-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    font-size: 0.82rem;
    min-width: 0;
}

.diary-booking-panel__just-booked-title strong {
    font-weight: 700;
    color: #064e3b;
    word-break: break-word;
}

.diary-booking-panel__just-booked-hint {
    font-size: 0.75rem;
    color: #047857;
    margin-top: 0.1rem;
}

.diary-booking-panel__just-booked-action {
    display: inline-block;
    margin-top: 0.45rem;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    border: 1px solid #fcd34d;
    background: #fff;
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    align-self: flex-start;
}

.diary-booking-panel__just-booked-action:hover {
    background: #fef3c7;
    border-color: #d97706;
}

.diary-booking-panel__just-booked-action:focus {
    outline: 2px solid #d97706;
    outline-offset: 1px;
}

.diary-booking-panel__just-booked--flash {
    animation: diary-booking-just-booked-flash 0.7s ease-out;
}

@keyframes diary-booking-just-booked-flash {
    0%   { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    40%  { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Error variant — same shape, amber palette so it doesn't read as a success.
   Used for "out of plan", "full", "already booked", and AJAX failures. */
.diary-booking-panel__just-booked--error {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #78350f;
}

.diary-booking-panel__just-booked--error .diary-booking-panel__just-booked-icon {
    background: #d97706;
    color: #fff;
    font-weight: 700;
}

.diary-booking-panel__just-booked--error .diary-booking-panel__just-booked-title strong {
    color: #78350f;
}

.diary-booking-panel__just-booked--error .diary-booking-panel__just-booked-hint {
    color: #92400e;
}

.diary-booking-panel__footer {
    border-top: 1px solid #f1f5f9;
    padding-top: 0.75rem;
}

/* Desktop: panel floats fixed against the right edge so the calendar can
   scroll behind it. body.diary-booking-active reserves a right gutter on
   .diary-main so tiles never sit underneath the panel. */
@media (min-width: 992px) {
    body.diary-booking-active .diary-main {
        padding-right: 19.5rem;
    }

    .diary-booking-panel {
        position: fixed;
        top: 5.5rem;
        right: 0.75rem;
        bottom: 1rem;
        width: 18rem;
        margin: 0;
        z-index: 1020;
    }

    .diary-booking-panel__collapse {
        display: none;
    }

    .diary-booking-panel__body {
        overflow-y: auto;
    }
}

/* ---- Start-booking picker (#39840 phase 1) ----------------------------------
   "What are you booking?" interstitial shown when staff click Book on a member
   profile in a club that has appointments enabled. Two big choices, member
   identity at the top so staff confirm they're booking the right person before
   they land on the diary. */
.start-booking-picker {
    max-width: 560px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.start-booking-picker__card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    padding: 1.5rem;
}

.start-booking-picker__member {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.start-booking-picker__avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    font-size: 0.95rem;
}

.start-booking-picker__avatar .member-avatar__img,
.start-booking-picker__avatar .member-avatar__initials {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.start-booking-picker__avatar .member-avatar__img {
    object-fit: cover;
}

.start-booking-picker__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.start-booking-picker__name {
    font-weight: 700;
    font-size: 1rem;
    color: #111827;
}

.start-booking-picker__heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 1rem 0;
}

.start-booking-picker__choices {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.start-booking-picker__choice {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}

.start-booking-picker__choice:hover {
    border-color: var(--club-colour, #e8651a);
    background: #fafaf9;
    color: #111827;
    text-decoration: none;
}

.start-booking-picker__choice:active {
    transform: translateY(1px);
}

.start-booking-picker__choice-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: #f3f4f6;
    color: var(--club-colour, #e8651a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.start-booking-picker__choice-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.start-booking-picker__choice-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #111827;
}

.start-booking-picker__choice-sub {
    font-size: 0.8rem;
    color: #6b7280;
}

.start-booking-picker__choice-arrow {
    color: #9ca3af;
    flex: 0 0 auto;
}

.start-booking-picker__footer {
    margin-top: 1rem;
    text-align: center;
}

/* ---- Diary booking-mode event states (#39840 phase 2) -----------------------
   Decorations applied to FullCalendar event tiles when the diary is in booking
   mode for a held member. Server-side decoration in DiaryController stamps each
   event with one of these classes so staff can see at a glance what's bookable
   for this member, what's out of their plan, what's already booked, and what's
   full. We deliberately don't touch backgroundColor (set inline per Class
   colour) — instead we use opacity, filters, outlines, and corner badges so the
   underlying class branding is still legible. */

/* Bookable: strong club-coloured outline + soft glow draws the eye. */
.fc .fc-event.diary-event--bookable,
.fc-event.diary-event--bookable {
    box-shadow: 0 0 0 2px var(--club-colour, #e8651a), 0 0 8px rgba(232, 101, 26, 0.35);
    cursor: pointer;
}

.fc .fc-event.diary-event--bookable:hover,
.fc-event.diary-event--bookable:hover {
    box-shadow: 0 0 0 3px var(--club-colour, #e8651a), 0 0 12px rgba(232, 101, 26, 0.55);
    transform: scale(1.02);
    z-index: 5;
}

/* Full: dimmed and desaturated so it visibly drops back. The title2 "FULL"
   badge already labels it so we don't need a separate "full" overlay. */
.fc .fc-event.diary-event--full,
.fc-event.diary-event--full {
    opacity: 0.4;
    filter: grayscale(0.6);
}

/* Out of plan: dimmed with a dashed outline so it reads as "not an option"
   rather than just "low priority". A small lock icon on the corner
   disambiguates from "full". */
.fc .fc-event.diary-event--out-of-plan,
.fc-event.diary-event--out-of-plan {
    opacity: 0.4;
    filter: grayscale(0.7);
    outline: 1px dashed rgba(15, 23, 42, 0.5);
    outline-offset: -1px;
    position: relative;
}

.fc .fc-event.diary-event--out-of-plan::before,
.fc-event.diary-event--out-of-plan::before {
    /* Plain unicode glyph — Font Awesome on this site renders via SVG
       replacement, not a webfont, so its private-use-area codepoints
       can't be used in pseudo-element content. */
    content: "\D7"; /* multiplication sign × — reads as "not available" */
    position: absolute;
    top: 1px;
    right: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(15, 23, 42, 0.65);
    z-index: 2;
}

/* Already booked: green check badge in the corner so staff see at a glance
   that this member is already in. Tile stays at full opacity — it's still
   meaningful information. */
.fc .fc-event.diary-event--already-booked,
.fc-event.diary-event--already-booked {
    box-shadow: 0 0 0 2px #10b981;
    position: relative;
}

.fc .fc-event.diary-event--already-booked::after,
.fc-event.diary-event--already-booked::after {
    /* Plain unicode checkmark — see out-of-plan note above for why we
       can't use Font Awesome's private-use codepoints here. */
    content: "\2713"; /* ✓ */
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    background: #10b981;
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    z-index: 2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ─────────────────────────────────────────────────────────────────────
   Consistency: modal submit buttons render in the club's brand colour,
   not bootstrap green. Historically modals used .btn-success for the
   primary submit, which made "save" actions different colour from every
   other primary action in the system. Visual override only — markup
   unchanged so existing JS targeting .btn-success keeps working.
   ───────────────────────────────────────────────────────────────────── */
.modal-styled .modal-footer .btn-success,
.modal-styled .modal-footer .btn.btn-success,
.modal-styled .add-member__footer .btn-success {
    background-color: var(--cui-nav-link-color, #4f46e5);
    border-color: var(--cui-nav-link-color, #4f46e5);
    color: var(--cui-nav-link-color-text, #fff);
}

.modal-styled .modal-footer .btn-success:hover,
.modal-styled .modal-footer .btn.btn-success:hover,
.modal-styled .add-member__footer .btn-success:hover {
    filter: brightness(0.92);
    background-color: var(--cui-nav-link-color, #4f46e5);
    border-color: var(--cui-nav-link-color, #4f46e5);
    color: var(--cui-nav-link-color-text, #fff);
}

.modal-styled .modal-footer .btn-success:focus,
.modal-styled .modal-footer .btn-success:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
}

/* #41347 — On mobile the .modal-styled modal content can be taller than the
   viewport (e.g. Message All Attendees with channel picker, fields, and the
   personalisation strip). overflow:hidden on .modal-content clips without
   giving a scroll path. On mobile only, switch to overflow-y:auto and cap at
   the dynamic viewport height so the user can scroll to all content. */
@media (max-width: 767.98px) {
    .modal-styled .modal-content {
        overflow-y: auto;
        max-height: calc(100dvh - 2rem);
    }
}

/* ─────────────────────────────────────────────────────────────────────
   .btn-neutral — single-class equivalent of `btn-light btn-outline-dark`.

   The doubled-up `btn-light btn-outline-dark` pair was acting as a generic
   "neutral utility button" across ~247 occurrences (Cancel buttons, Submit
   buttons, pagination, navigation, dismissals — all sharing the same look
   despite different semantics). The two-class hybrid was awkward to read
   and meant any visual update had to be applied via two unrelated Bootstrap
   classes. .btn-neutral renders identically and is a single source of truth.

   The original two-class pair still works (Bootstrap classes unchanged) so
   any unmigrated markup keeps rendering correctly.
   ───────────────────────────────────────────────────────────────────── */
.btn.btn-neutral {
    color: #1f2937;
    background-color: #f8f9fa;
    border-color: #1f2937;
}

.btn.btn-neutral:hover {
    color: #fff;
    background-color: #1f2937;
    border-color: #1f2937;
}

.btn.btn-neutral:focus,
.btn.btn-neutral:focus-visible {
    color: #1f2937;
    background-color: #f8f9fa;
    border-color: #1f2937;
    box-shadow: 0 0 0 0.25rem rgba(31, 41, 55, 0.25);
}

.btn.btn-neutral:active,
.btn.btn-neutral.active {
    color: #fff;
    background-color: #1f2937;
    border-color: #1f2937;
}

.btn.btn-neutral:disabled,
.btn.btn-neutral.disabled {
    color: #1f2937;
    background-color: #f8f9fa;
    border-color: #1f2937;
    opacity: 0.65;
}

/* ─────────────────────────────────────────────────────────────────────
   System banners — top-of-screen status / announcement strips.
   Migrated 2026-05-01 from inline styles in _Layout.cshtml so the
   maintenance + announcement bars match the rest of the system's CSS
   architecture and any visual update happens in one place.
   ───────────────────────────────────────────────────────────────────── */
.system-banner {
    padding: 8px 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    position: relative;
    z-index: 9998;
}

.system-banner--maintenance {
    background: #dc3545;
    color: #fff;
    z-index: 9999;
}

.system-banner--announcement {
    background: #fff3cd;
    color: #856404;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px solid #ffc107;
}

.system-banner__link {
    color: #664d03;
    text-decoration: underline;
    margin-left: 8px;
}

.system-banner__link:hover {
    color: #664d03;
}

.system-banner__dismiss {
    background: none;
    border: none;
    color: #856404;
    font-size: 18px;
    cursor: pointer;
    margin-left: 12px;
    vertical-align: middle;
    line-height: 1;
}

.system-banner__dismiss:hover {
    color: #664d03;
}

/* ─────────────────────────────────────────────────────────────────────
   Sidebar / nav badges + utility — migrated 2026-05-01 from inline
   styles in _DashboardLayout.cshtml. .badge-beta is reused on a couple
   of "beta" pill markers; .sidebar-inbox-badge sets the small numeric
   inbox count pill; .sidebar-user-trigger__icon sets the admin
   toolbox icon styling. The previous inline `style="background: orange"`
   override on the Assistant beta badge is dropped — that override fought
   .bg-warning and produced the "two ambers on one screen" symptom called
   out in the consistency audit. Now both beta pills use the canonical
   soft amber.
   ───────────────────────────────────────────────────────────────────── */
.sidebar-inbox-badge {
    font-size: 10px;
    padding: 2px 6px;
}

.badge-beta {
    font-size: 9px;
    padding: 3px 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Bootstrap's default .badge padding is too tight in the sidebar nav, where
   the numeric count chips sit next to a label — text ends up touching the
   pill edge. Bumping horizontal padding so they breathe. */
.sidebar-nav .nav-link > .badge {
    padding: 3px 8px;
}

.sidebar-user-trigger__icon {
    font-size: 1.05rem;
    color: #9ca3af;
    flex: 0 0 1.25rem;
    width: 1.25rem;
    text-align: center;
}

/* ============================================
   #38997 Track B - per-user accessibility preferences
   ============================================ */

/* Reduce-motion: collapses every animation/transition. Triggered by the
   account preference, not the OS prefers-reduced-motion media query (we
   want manual override either way). The codebase has 600+ transition
   declarations so a global suppression is the only sane way. */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* Account preferences page (/Account/Preferences) */
.account-prefs-card {
    max-width: 640px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.account-prefs-group {
    border: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}
.account-prefs-group__legend {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
    padding: 0;
}
.account-prefs-group__hint {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.875rem;
}
.account-prefs-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (max-width: 767px) {
    .account-prefs-options { grid-template-columns: minmax(0, 1fr); }
}
.account-prefs-option {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.account-prefs-option:hover {
    border-color: #c7d2fe;
    background: #f9fafb;
}
.account-prefs-option:has(input:checked) {
    border-color: var(--admin-club-color, #6366f1);
    background: color-mix(in srgb, var(--admin-club-color, #6366f1) 6%, #fff);
}
.account-prefs-option input[type="radio"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
}
.account-prefs-option__title {
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}
.account-prefs-sample {
    font-size: 0.875rem;
    color: #6b7280;
}
.account-prefs-sample--large { font-size: 1rem; }
.account-prefs-sample--larger { font-size: 1.125rem; }

.account-prefs-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}
.account-prefs-toggle input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
}
.account-prefs-toggle__label {
    font-weight: 500;
    color: #111827;
}

.account-prefs-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

/* ==========================================================================
   Canary (Sanity Check Report) — admin-only system-bug surface
   ========================================================================== */

.canary-hero {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
}
.canary-hero__image {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 768px) {
    .canary-hero {
        grid-template-columns: 1fr;
    }
    .canary-hero__image {
        max-width: 240px;
        margin: 0 auto;
    }
}

.canary-hero__meta {
    color: #6b7280;
    font-size: 0.85rem;
    margin-bottom: 12px;
}
.canary-hero__meta code {
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    color: #374151;
}

.canary-banner {
    border-radius: var(--radius-md);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.canary-banner__big {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}
.canary-banner__label {
    font-size: 0.95rem;
    font-weight: 600;
}
.canary-banner__sub {
    font-size: 0.85rem;
    margin-top: 2px;
}
.canary-banner--ok {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}
.canary-banner--violations {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
}

.canary-section-title {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin: 28px 0 12px;
}

.invariant-card {
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    padding: 18px 20px;
    margin-bottom: 12px;
    background: #fff;
    transition: border-color 0.15s ease;
}
.invariant-card--violated {
    border-color: #fecaca;
    background: linear-gradient(180deg, #fff 0%, #fef2f2 100%);
}
.invariant-card--violated:hover {
    border-color: #f87171;
}
.invariant-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}
.invariant-card__name {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}
.invariant-card__name--violated {
    color: #991b1b;
}
.invariant-card__counts {
    display: flex;
    gap: 24px;
    align-items: baseline;
    flex-shrink: 0;
}
.invariant-card__count {
    text-align: right;
}
.invariant-card__count-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: #6b7280;
}
.invariant-card__count-value--violated {
    color: #dc2626;
}
.invariant-card__count-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin-top: 4px;
}
.invariant-card__description {
    font-size: 0.85rem;
    color: #4b5563;
    margin: 0 0 8px;
    line-height: 1.5;
}
.invariant-card__catches {
    font-size: 0.78rem;
    color: #6b7280;
    margin: 0;
}
.invariant-card__catches strong {
    color: #4b5563;
    font-weight: 600;
}
.invariant-card__footer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.invariant-card__footer--violated {
    border-top-color: #fecaca;
}
.invariant-card__drill {
    background: var(--cui-nav-link-color, #4f46e5);
    color: var(--cui-nav-link-color-text, #fff);
    border: 0;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.invariant-card__drill:hover {
    color: var(--cui-nav-link-color-text, #fff);
    opacity: 0.9;
    text-decoration: none;
}

.invariant-card--healthy {
    padding: 12px 16px;
    margin-bottom: 6px;
}
.invariant-card--healthy .invariant-card__header {
    margin-bottom: 0;
    align-items: center;
}
.invariant-card--healthy .invariant-card__name {
    font-weight: 500;
    font-size: 0.9rem;
    color: #4b5563;
}
.invariant-card--healthy .invariant-card__counts {
    gap: 16px;
}
.invariant-card--healthy .invariant-card__count-value {
    font-size: 1rem;
    color: #15803d;
}
.invariant-card--healthy .invariant-card__count-label {
    display: none;
}

.invariant-card__historical-note {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-left: 8px;
}

/* =========================================================================
   Visits Hub — dedicated /Visits page (live attendance + visit insights)
   ========================================================================= */

/* Inherit the same design tokens as ClubOverview's live panel so .co-live-*
   classes (which reference these vars) render correctly outside the
   .club-overview scope. We do NOT use .club-overview directly because that
   class has page-level side effects (hides the admin sidebar, etc.). */
.visits-hub {
    --co-accent: #4f46e5;
    --co-surface: #ffffff;
    --co-ink: #0f172a;
    --co-ink-soft: #475569;
    --co-ink-mute: #94a3b8;
    --co-line: #e2e8f0;
    --co-line-soft: #eef2f7;
    --co-ok: #16a34a;
    --co-warn: #f59e0b;
    --co-danger: #dc2626;
    --radius-lg: 12px;
}

/* Live panel container — same warm card styling as the dashboard widget. */
.visits-hub__live {
    background: linear-gradient(180deg, #fff8eb 0%, #fffdf6 100%);
    border: 1px solid #fde9c9;
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    margin-bottom: 20px;
}

.visits-hub__live .co-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.visits-hub__live .co-panel__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #b45309;
    font-weight: 700;
    font-size: 1rem;
}

.visits-hub__live .co-panel__count {
    background: #b45309;
    color: #fff;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.78rem;
    font-weight: 700;
}

.visits-hub__refresh {
    color: var(--co-ink-soft);
    font-size: 0.78rem;
    background: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.visits-hub__refresh:hover {
    color: var(--co-accent);
}

.visits-hub__refresh i {
    font-size: 0.75rem;
}

/* Range pills (7/30/90 days) */
.visits-hub__range {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.visits-hub__range-btn {
    background: transparent;
    border: 0;
    color: var(--co-ink-soft);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.visits-hub__range-btn:hover {
    color: var(--co-ink);
}

.visits-hub__range-btn.is-active {
    background: #fff;
    color: var(--co-ink);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* KPI strip — bigger, bolder than member-kpi-card to anchor the page. */
.visits-hub__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.visits-hub__kpi {
    background: #fff;
    border: 1px solid var(--co-line);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.visits-hub__kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--co-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.visits-hub__kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--co-ink);
    line-height: 1.1;
}

.visits-hub__kpi-sub {
    font-size: 0.78rem;
    color: var(--co-ink-soft);
}

/* Chart cards row */
.visits-hub__charts {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 992px) {
    .visits-hub__charts {
        grid-template-columns: 1fr;
    }
}

.visits-hub__chart-card {
    background: #fff;
    border: 1px solid var(--co-line);
    border-radius: var(--radius-lg);
    padding: 18px;
}

.visits-hub__chart-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--co-ink);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.visits-hub__chart-body {
    position: relative;
    height: 240px;
}

.visits-hub__charts-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .visits-hub__charts-secondary {
        grid-template-columns: 1fr;
    }
}

/* #40431 — full-width chart card row for Visit Frequency. */
.visits-hub__chart-card--wide {
    margin-bottom: 20px;
}

.visits-hub__chart-card--wide .visits-hub__chart-body {
    height: 220px;
}

.visits-hub__chart-subtitle {
    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--co-ink-soft);
    text-transform: none;
    letter-spacing: 0;
}

.visits-hub__chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--co-ink-soft);
    padding: 12px;
}

.visits-hub__chart-empty i {
    font-size: 1.6rem;
    margin-bottom: 8px;
    color: var(--co-ink-soft);
    opacity: 0.6;
}

.visits-hub__chart-empty-title {
    font-weight: 600;
    color: var(--co-ink);
    margin-bottom: 4px;
}

.visits-hub__chart-empty-sub {
    font-size: 0.78rem;
}

/* #40431 — Busiest/Quietest hour insights split by weekday vs weekend. */
.visits-hub__insight-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.visits-hub__insight-split-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--co-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.visits-hub__insight-split .visits-hub__insight-value {
    font-size: 1.1rem;
}

/* Detail table card */
.visits-hub__detail {
    background: #fff;
    border: 1px solid var(--co-line);
    border-radius: var(--radius-lg);
    padding: 18px;
}

.visits-hub__detail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.visits-hub__detail-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--co-ink);
}

.visits-hub__detail-controls {
    display: flex;
    flex-wrap: wrap; /* 220px search + filter select wrap instead of overflowing a phone */
    gap: 8px;
    align-items: center;
}

.visits-hub__detail-titlewrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Summary / Day list segmented toggle */
.visits-hub__view-toggle {
    display: inline-flex;
    background: var(--co-line-soft);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 2px;
    align-self: flex-start;
}

.visits-hub__view-btn {
    border: 0;
    background: transparent;
    color: var(--co-ink-soft);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: calc(var(--radius-md) - 3px);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.visits-hub__view-btn:hover {
    color: var(--co-ink);
}

.visits-hub__view-btn.is-active {
    background: #fff;
    color: var(--co-ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Day list stacks into per-visit cards on phones — a table that scrolls
   sideways is unusable in the app's WebView (#41785). */
@media (max-width: 575.98px) {
    .visits-hub__daylist-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .visits-hub__daylist-table,
    .visits-hub__daylist-table tbody,
    .visits-hub__daylist-table tr,
    .visits-hub__daylist-table td {
        display: block;
        width: 100%;
    }

    .visits-hub__daylist-table tr.visits-hub__day-row {
        border: 1px solid var(--co-line);
        border-radius: var(--radius-md);
        padding: 10px 12px;
        margin-bottom: 10px;
    }

    .visits-hub__daylist-table td {
        border: 0 !important;
        padding: 3px 0 !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        font-size: 0.9rem;
    }

    .visits-hub__daylist-table td::before {
        content: attr(data-label);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--co-ink-soft);
        font-weight: 600;
        flex-shrink: 0;
    }

    /* Member is the card heading — full-width, no label */
    .visits-hub__daylist-table td[data-label="Member"] {
        justify-content: flex-start;
        padding-bottom: 8px !important;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--co-line-soft) !important;
    }

    .visits-hub__daylist-table td[data-label="Member"]::before {
        display: none;
    }
}

.visits-hub__detail table {
    width: 100%;
    margin-bottom: 0;
}

.visits-hub__detail th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--co-ink-soft);
    border-bottom: 1px solid var(--co-line);
    padding: 8px 10px;
    font-weight: 600;
}

.visits-hub__detail td {
    padding: 10px;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--co-line-soft);
    vertical-align: middle;
}

.visits-hub__detail tr:last-child td {
    border-bottom: 0;
}

.visits-hub__row-photo {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--co-accent);
    color: #fff;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    margin-right: 10px;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
    vertical-align: middle;
}

.visits-hub__row-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visits-hub__row-name {
    display: inline-flex;
    align-items: center;
}

.visits-hub__row-name a {
    color: var(--co-ink);
    text-decoration: none;
    font-weight: 500;
}

.visits-hub__row-name a:hover {
    color: var(--co-accent);
    text-decoration: underline;
}

.visits-hub__pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    font-size: 0.82rem;
    color: var(--co-ink-soft);
}

.visits-hub__pager-buttons {
    display: flex;
    gap: 4px;
}

.visits-hub__pager-btn {
    border: 1px solid var(--co-line);
    background: #fff;
    color: var(--co-ink-soft);
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
}

.visits-hub__pager-btn:hover:not(:disabled) {
    border-color: var(--co-accent);
    color: var(--co-accent);
}

.visits-hub__pager-btn.is-active {
    background: var(--co-ink);
    color: #fff;
    border-color: var(--co-ink);
}

.visits-hub__pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.visits-hub__type-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}

.visits-hub__type-badge--self {
    background: #dbeafe;
    color: #1e40af;
}

.visits-hub__type-badge--staff {
    background: #f1f5f9;
    color: var(--co-ink-soft);
}

.visits-hub__type-badge--class {
    background: #ede9fe;
    color: #5b21b6;
}

.visits-hub__loader {
    text-align: center;
    color: var(--co-ink-soft);
    padding: 40px 0;
}

/* Auto-refresh ticker */
.visits-hub__live-meta {
    font-size: 0.72rem;
    color: var(--co-ink-soft);
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.visits-hub__insights {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 0;
}

.visits-hub__insight-label {
    font-size: 0.72rem;
    color: var(--co-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    font-weight: 600;
}

.visits-hub__insight-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--co-ink);
    line-height: 1.1;
}

.visits-hub__insight-sub {
    font-size: 0.78rem;
    color: var(--co-ink-soft);
    margin-top: 2px;
}

/* #41319 — custom date range + per-member Attendance Summary with drill-down. */
.visits-hub__range-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.visits-hub__range-custom {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    background: #fff;
    border: 1px solid var(--co-line);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.visits-hub__range-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--co-ink-soft);
}

.visits-hub__range-field .input-group {
    width: 160px;
}

.visits-hub__range-field .timepicker {
    width: 110px;
}

.visits-hub__range-custom {
    flex-wrap: wrap;
}

.visits-hub__range-field .form-control {
    font-size: 0.85rem;
    padding: 5px 8px;
    color: var(--co-ink);
}

.visits-hub__range-field .input-group-text {
    padding: 5px 10px;
    cursor: pointer;
}

.visits-hub__range-apply {
    background: var(--cui-nav-link-color, #4f46e5);
    color: var(--cui-nav-link-color-text, #fff);
    border: 0;
    border-radius: var(--radius-sm);
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.visits-hub__detail-subtitle {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--co-ink-soft);
    margin-top: 2px;
}

.visits-hub__search {
    min-width: 220px;
}

.visits-hub__type-filter {
    width: auto;
    font-size: 0.85rem;
}

.visits-hub__export {
    border: 1px solid var(--co-line);
    background: #fff;
    color: var(--co-ink-soft);
    padding: 6px 13px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.visits-hub__export:hover {
    border-color: var(--co-accent);
    color: var(--co-accent);
}

.visits-hub__drill-cell {
    width: 36px;
    text-align: center;
}

.visits-hub__drill-toggle {
    border: 0;
    background: transparent;
    color: var(--co-ink-soft);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: color 0.12s ease, background 0.12s ease;
}

.visits-hub__drill-toggle:hover {
    color: var(--co-accent);
    background: #f1f5f9;
}

/* Rotate the chevron on expand. Targets both <i> and <svg> because Font Awesome
   runs in SVG/JS mode and swaps the <i> for an <svg> at runtime. */
.visits-hub__drill-toggle i,
.visits-hub__drill-toggle svg {
    transition: transform 0.15s ease;
}

.visits-hub__drill-toggle.is-open i,
.visits-hub__drill-toggle.is-open svg {
    transform: rotate(90deg);
}

.visits-hub__summary-row.is-expanded {
    background: #f8fafc;
}

.visits-hub__summary-count {
    font-weight: 700;
    color: var(--co-ink);
}

/* Range-level totals row (Club / Class / Total across all members). */
.visits-hub__summary-totals td {
    font-weight: 700;
    color: var(--co-ink);
    border-top: 2px solid var(--co-line);
    background: #f8fafc;
}

.visits-hub__drill-row > td {
    padding: 0 10px 12px 46px;
    background: #f8fafc;
}

.visits-hub__drill-loading,
.visits-hub__drill-empty {
    font-size: 0.82rem;
    color: var(--co-ink-soft);
    padding: 8px 0;
}

.visits-hub__drill-table {
    width: 100%;
    margin: 4px 0 0;
    background: #fff;
    border: 1px solid var(--co-line-soft);
    border-radius: var(--radius-sm);
}

.visits-hub__drill-table th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--co-ink-soft);
    padding: 6px 10px;
    border-bottom: 1px solid var(--co-line-soft);
    font-weight: 600;
}

.visits-hub__drill-table td {
    padding: 6px 10px;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--co-line-soft);
}

.visits-hub__drill-table tr:last-child td {
    border-bottom: 0;
}

/* Access/check-in message in the drill-down. Failed/denied entries stand out so
   clubs can scan for access problems (restores the old Visits report behaviour). */
.visits-hub__visit-msg {
    color: var(--co-ink-soft);
}

.visits-hub__visit-msg.is-fail {
    color: var(--cui-danger, #e55353);
    font-weight: 600;
}

/* #39997 — Front Desk view layout. Reuses Owner Overview partials but lays them
   out with Tasks/Messages as the operational core, narrower hero strip, and an
   action-queue slot at the bottom. */
.front-desk__body {
    padding: 24px clamp(16px, 2.5vw, 32px) 24px;
    max-width: 1760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.front-desk__tiles .club-overview-tiles__primary {
    /* Front Desk uses primary tiles as a compact action bar — 4 across, short,
       no 1:1 aspect — so Tasks/Messages/Live can dominate the fold instead of
       the full-bleed Owner-Overview-style hero tiles. */
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.front-desk__tiles .co-tile {
    aspect-ratio: auto;
    min-height: 0;
    height: 84px;
}

.front-desk__tiles .co-tile__body {
    padding: 10px 12px;
    justify-content: center;
}

.front-desk__tiles .co-tile__icon {
    font-size: 1.1rem;
    margin-bottom: 2px;
}

.front-desk__tiles .co-tile__title {
    font-size: 0.95rem;
    font-weight: 600;
}

.front-desk__tiles .co-tile__subtitle {
    display: none;
}

@media (max-width: 900px) {
    .front-desk__tiles .club-overview-tiles__primary {
        grid-template-columns: repeat(2, 1fr);
    }
}

.front-desk__work,
.front-desk__bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.front-desk__live {
    min-width: 0;
}

.front-desk__panel {
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.front-desk__placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--co-ink-soft, #6b7280);
    font-size: 0.875rem;
    text-align: center;
    background: repeating-linear-gradient(
        45deg,
        rgba(0,0,0,0.02),
        rgba(0,0,0,0.02) 10px,
        rgba(0,0,0,0.04) 10px,
        rgba(0,0,0,0.04) 20px
    );
    border-radius: 8px;
    margin: 12px;
}

@media (max-width: 900px) {
    .front-desk__work,
    .front-desk__bottom {
        grid-template-columns: 1fr;
    }
}

/* #39997 — Front Desk Tasks panel + quick-add button */
.front-desk__panel-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.front-desk__panel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 0.825rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.front-desk__panel-btn--primary {
    background: var(--co-accent);
    color: #fff;
}

.front-desk__panel-btn--primary:hover {
    filter: brightness(1.08);
}

/* #42355 — compact icon-only variant (tooltip carries the label). */
.front-desk__panel-btn--icon {
    padding: 6px 9px;
    justify-content: center;
}

/* #42355 — nudge the add-task button a little further from the "Tasks" heading
   (on top of the co-panel__label gap). */
.co-panel__label .front-desk__panel-btn--icon {
    margin-left: 6px;
}

/* #42355 — "Due now / Upcoming" task scope toggle. Shared segmented control used
   on the Dashboard tasks widget, the Front Desk tasks panel and the Communication
   tasks toolbar so the three surfaces read as one consistent control. */
.task-scope-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--status-neutral-bg, #eef1f5);
    border-radius: var(--radius-pill, 999px);
    vertical-align: middle;
}

.task-scope-toggle__btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    padding: 5px 12px;
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.task-scope-toggle__btn:hover:not(.task-scope-toggle__btn--active) {
    color: #1e293b;
}

.task-scope-toggle__btn--active {
    background: var(--cui-nav-link-color, #4f46e5);
    color: var(--cui-nav-link-color-text, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.task-scope-toggle--loading {
    opacity: 0.6;
    pointer-events: none;
}

/* #42355 — per-scope total shown next to each toggle label (view-all tasks tab).
   margin-left gives the "little space" between the label and the count. */
.task-scope-toggle__count {
    margin-left: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.85;
}

.front-desk__tasks-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    max-height: 480px;
}

.front-desk__task {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease, opacity 0.2s ease;
}

.front-desk__task:hover {
    background: #f8fafc;
}

.front-desk__task--completing {
    opacity: 0.4;
    pointer-events: none;
}

.front-desk__task--overdue {
    border-left: 3px solid #ef4444;
    padding-left: 13px;
}

.front-desk__task--warn {
    border-left: 3px solid #f59e0b;
    padding-left: 13px;
}

.front-desk__task--alert {
    border-left: 3px solid #dc2626;
    padding-left: 13px;
}

.front-desk__task-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eef2ff;
    color: var(--co-accent);
    font-size: 0.875rem;
    margin-top: 2px;
}

.front-desk__task--warn .front-desk__task-icon {
    background: #fef3c7;
    color: #b45309;
}

.front-desk__task--alert .front-desk__task-icon {
    background: #fee2e2;
    color: #b91c1c;
}

.front-desk__task-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.front-desk__task-details {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 0.875rem;
    line-height: 1.4;
}

.front-desk__task-member {
    font-weight: 600;
    color: #111827;
    text-decoration: none;
}

.front-desk__task-member:hover {
    color: var(--co-accent);
    text-decoration: underline;
}

.front-desk__task-sep {
    color: #9ca3af;
}

.front-desk__task-text {
    color: #374151;
    text-decoration: none;
    flex: 1;
    min-width: 0;
}

.front-desk__task-text:hover {
    color: var(--co-accent);
}

.front-desk__task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.75rem;
    color: #6b7280;
}

.front-desk__task-due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.front-desk__task-due--overdue {
    color: #dc2626;
    font-weight: 600;
}

.front-desk__task-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 10px;
    font-size: 0.7rem;
}

.front-desk__task-pill--me {
    background: #dbeafe;
    color: #1e40af;
}

.front-desk__task-pill--muted {
    background: transparent;
    color: #9ca3af;
    font-style: italic;
}

.front-desk__task-complete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.front-desk__task-complete:hover {
    border-color: #10b981;
    background: #10b981;
    color: #fff;
}

.front-desk__task-complete:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.front-desk__tasks-footer {
    padding: 12px 16px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.8125rem;
    color: #6b7280;
    text-align: center;
}

.front-desk__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    color: #6b7280;
}

.front-desk__empty-icon {
    font-size: 2rem;
    color: #10b981;
    margin-bottom: 12px;
}

.front-desk__empty-title {
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.front-desk__empty-hint {
    font-size: 0.8125rem;
}

.front-desk__form-error {
    padding: 10px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 0.875rem;
}

/* #39997 — Front Desk Messages panel */
.co-panel__count--alert {
    background: #fee2e2;
    color: #b91c1c;
}

/* #41600 — Inbox/Outbox tab bar. CSS-only toggle: the visually-hidden radios drive
   both the active tab and which pane shows, via :checked sibling selectors (no
   inline JS). Mimics the retired Message Centre's Inbox/Outbox tabs. */
.front-desk__msg-tabradio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.front-desk__msg-tabbar {
    display: flex;
    gap: 4px;
    padding: 0 12px;
    border-bottom: 1px solid #e5e7eb;
}

.front-desk__msg-tab {
    margin: 0;
    padding: 10px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    user-select: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.front-desk__msg-tab i {
    margin-right: 5px;
    opacity: 0.85;
}

.front-desk__msg-tab:hover {
    color: #334155;
}

/* Active tab — prominent: club-colour label + underline. */
#fd-msg-tab-inbox:checked ~ .front-desk__msg-tabbar .front-desk__msg-tab--inbox,
#fd-msg-tab-outbox:checked ~ .front-desk__msg-tabbar .front-desk__msg-tab--outbox {
    color: var(--cui-nav-link-color, #4f46e5);
    border-bottom-color: var(--cui-nav-link-color, #4f46e5);
}

.front-desk__msg-pane {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

#fd-msg-tab-inbox:checked ~ .front-desk__msg-pane--inbox,
#fd-msg-tab-outbox:checked ~ .front-desk__msg-pane--outbox {
    display: flex;
}

/* #41910 — caption clarifying the inbox pane is filtered to replies owed. */
.front-desk__msg-note {
    margin: 0;
    padding: 8px 16px;
    font-size: 0.78rem;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}

.front-desk__msg-note a {
    color: var(--club-colour, #2563eb);
    font-weight: 600;
}

.front-desk__messages-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    max-height: 480px;
}

.front-desk__message {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease;
}

.front-desk__message:hover {
    background: #f8fafc;
}

.front-desk__message--unread {
    background: #f0f9ff;
}

.front-desk__message--unread:hover {
    background: #e0f2fe;
}

.front-desk__message--waiting {
    border-left: 3px solid #f59e0b;
}

.front-desk__message--unread.front-desk__message--waiting {
    border-left-color: #2563eb;
}

.front-desk__message-link {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 12px 16px;
    color: inherit;
    text-decoration: none;
    align-items: start;
}

.front-desk__message-link:hover {
    text-decoration: none;
    color: inherit;
}

.front-desk__message-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--co-accent), color-mix(in srgb, var(--co-accent) 70%, #000));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.825rem;
    overflow: hidden;
    flex-shrink: 0;
}

.front-desk__message-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.front-desk__message-initials {
    position: relative;
    z-index: 0;
}

.front-desk__message-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.front-desk__message-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.front-desk__message-name {
    font-weight: 600;
    color: #111827;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.front-desk__message--unread .front-desk__message-name {
    color: #1e3a8a;
}

.front-desk__message-date {
    color: #9ca3af;
    font-size: 0.75rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.front-desk__message-preview {
    color: #6b7280;
    font-size: 0.8125rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.front-desk__message--unread .front-desk__message-preview {
    color: #374151;
}

.front-desk__message-flags {
    display: flex;
    gap: 6px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.front-desk__message-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
}

.front-desk__message-pill--unread {
    background: #dbeafe;
    color: #1e40af;
}

.front-desk__message-pill--waiting {
    background: #fef3c7;
    color: #92400e;
}

.front-desk__empty-icon--neutral {
    color: #9ca3af;
}

/* #42162 — inline Archive action on Inbox message rows. The row becomes a flex
   container so the archive button sits as a full-height trailing column to the
   right of the conversation link (mirrors the Tasks panel's complete tick). */
.front-desk__message {
    display: flex;
    align-items: stretch;
}

.front-desk__message-link {
    flex: 1 1 auto;
    min-width: 0;
}

.front-desk__message-archive {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    border: none;
    border-left: 1px solid #f1f5f9;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.front-desk__message-archive:hover {
    background: #fff7ed;
    color: #c2410c;
}

.front-desk__message-archive:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Row fades out on archive, matching the Tasks panel's complete animation. */
.front-desk__message--archiving {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* #42162 — Front Desk Alerts panel. Inline notifications list with per-row
   Dismiss, restoring the old dashboard's Notifications widget on the home
   screen (previously only reachable via the Live Activity alerts drawer). */
.front-desk__alerts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    max-height: 360px;
}

.front-desk__alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    border-left: 3px solid #f59e0b;
    transition: background 0.15s ease;
}

.front-desk__alert:hover {
    background: #fffbeb;
}

/* #41934 — high-value alerts (entry refusals, DD/mandate cancellations, payment
   failures) get a red row treatment so they stand out from the general amber
   stream, restoring the old dashboard's "red drew my attention" cue. Overrides
   the amber left-border, icon colour and hover tint from the base rules above. */
.front-desk__alert--important {
    border-left-color: var(--status-danger-fg);
}

.front-desk__alert--important:hover {
    background: var(--status-danger-bg);
}

.front-desk__alert--important .front-desk__alert-icon {
    color: var(--status-danger-fg);
}

.front-desk__alert--going {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.front-desk__alert-icon {
    color: #f59e0b;
    font-size: 0.95rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.front-desk__alert-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.front-desk__alert-top {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: #9ca3af;
}

.front-desk__alert-member {
    font-weight: 600;
    color: #b45309;
    text-decoration: none;
}

.front-desk__alert-member:hover {
    text-decoration: underline;
    color: #92400e;
}

.front-desk__alert-sep {
    color: #d1d5db;
}

.front-desk__alert-message {
    color: #374151;
    font-size: 0.8125rem;
    line-height: 1.4;
    text-decoration: none;
}

a.front-desk__alert-message:hover {
    text-decoration: underline;
    color: #111827;
}

.front-desk__alert-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.front-desk__alert-action {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: #f3f4f6;
    color: #374151;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.front-desk__alert-action:hover {
    background: #e5e7eb;
    color: #111827;
    text-decoration: none;
}

.front-desk__alert-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.front-desk__alert-dismiss:hover {
    border-color: #6b7280;
    background: #6b7280;
    color: #fff;
}

.front-desk__alert-dismiss:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.front-desk__alerts-footer {
    padding: 12px 16px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.8125rem;
    color: #6b7280;
    text-align: center;
}

.front-desk__alerts-footer a {
    color: var(--club-colour, #2563eb);
    font-weight: 600;
}

/* #39997 — Single-screen Front Desk console.
   Slim header, 2x2 panel grid, narrow nav rail. Each panel can be promoted to
   a full-screen overlay via the expand button (focus mode). */
.fd {
    display: flex;
    flex-direction: column;
    /* Fill remaining viewport: subtract global sticky header (~78px), the
       page-header strip (~88px including its 24px bottom margin), and a small
       allowance for the footer (~36px) so nothing overflows. */
    height: calc(100vh - var(--sticky-header-height, 78px) - 124px);
    min-height: 480px;
    margin: -8px -16px 0;
    background: #f3f4f6;
    overflow: hidden;
}

.fd__bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    background: var(--co-bg, #1f2937);
    color: var(--co-text, #fff);
}

.fd__menu {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: inherit;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.fd__menu:hover {
    background: rgba(255, 255, 255, 0.2);
}

.fd__brand {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fd__greeting {
    font-size: 0.75rem;
    opacity: 0.7;
    line-height: 1;
    margin-bottom: 2px;
}

.fd__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fd__logo {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    background: #fff;
}

.fd__layout {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 12px;
    padding: 12px;
    min-height: 0;
}

.fd__grid {
    /* Row 1 = "In the club right now" full width — the live snapshot reads as
       a single horizontal strip of member chips. Row 2 splits into thirds:
       Classes | Tasks | Messages — each is a worklist that benefits from
       column height over column width. */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: minmax(180px, 0.45fr) 1fr;
    grid-template-areas:
        "live live live"
        "classes tasks messages";
    gap: 12px;
    min-height: 0;
    min-width: 0;
}

.fd__panel-shell--live { grid-area: live; }
.fd__panel-shell--classes { grid-area: classes; }
.fd__panel-shell--tasks { grid-area: tasks; }
.fd__panel-shell--messages { grid-area: messages; }

.fd__panel-shell {
    position: relative;
    display: flex;
    min-height: 0;
    min-width: 0;
}

.fd__panel-shell > .co-panel,
.fd__panel-shell > section.co-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    margin: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.fd__panel-shell .co-panel__header {
    flex: 0 0 auto;
    padding-right: 44px; /* leave room for the expand button */
}

/* Anything inside a co-panel that holds the body content scrolls internally
   so the panel itself never grows the page. The selector list mirrors the
   actual partials we render — live cards, class slots, task list. */
.fd__panel-shell .co-live-cards,
.fd__panel-shell .co-slots,
.fd__panel-shell .front-desk__tasks-list,
.fd__panel-shell .front-desk__placeholder,
.fd__panel-shell .co-live-empty {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Live-member chips on Front Desk: prevent the grid from stretching rows to
   fill the panel when there are few members, while keeping every chip in a
   given row uniform height (default align-items: stretch on grid items takes
   care of intra-row equalisation). align-content: start packs rows at the top
   instead of distributing them down the panel; grid-auto-rows: min-content
   sizes each row to the tallest card it contains — no further. */
.fd__panel-shell .co-live-cards {
    align-content: start;
    grid-auto-rows: min-content;
}

.fd__expand {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(15, 23, 42, 0.04);
    color: #6b7280;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.fd__expand:hover {
    background: rgba(15, 23, 42, 0.1);
    color: #111827;
}

/* Operational metrics rail — replaces the duplicate nav rail. Cards are
   actionable counts (Members at risk, Overdue) that deep-link to the matching
   action list. The accent variants surface urgency (warning/danger/positive)
   without leaning on raw colour. */
.fd__metrics {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    min-height: 0;
    padding-right: 2px;
}

.fd__metric {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #111827;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.fd__metric:hover {
    border-color: var(--co-accent, #4f46e5);
    text-decoration: none;
    color: #111827;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.fd__metric-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--co-accent, #4f46e5) 12%, transparent);
    color: var(--co-accent, #4f46e5);
    font-size: 0.95rem;
}

.fd__metric--warning .fd__metric-icon {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.fd__metric--danger .fd__metric-icon {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
}

.fd__metric--positive .fd__metric-icon {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.fd__metric-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fd__metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.05;
    color: #111827;
}

.fd__metric-label {
    font-size: 0.8rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.fd__metric-subtitle {
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
    margin-top: 4px;
}

/* Focus mode: promote one panel to fill the viewport, hide the rest. */
body.fd-focus-mode {
    overflow: hidden;
}

body.fd-focus-mode .fd__panel-shell:not(.fd__panel-shell--focused) {
    visibility: hidden;
}

body.fd-focus-mode .fd__rail,
body.fd-focus-mode .fd__bar {
    pointer-events: none;
    opacity: 0.4;
}

.fd__panel-shell--focused {
    position: fixed !important;
    inset: 16px;
    z-index: 1050;
}

.fd__panel-shell--focused > .co-panel {
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);
}

.fd__panel-shell--focused .fd__expand {
    display: none;
}

.fd__focus-close {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1060;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #111827;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.32);
}

body.fd-focus-mode .fd__focus-close {
    display: inline-flex;
}

@media (max-width: 1100px) {
    /* Below ~1100px the metric cards hold their width; nothing to collapse. */
}

@media (max-width: 800px) {
    .fd__grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(220px, 1fr));
        grid-template-areas:
            "live"
            "tasks"
            "messages"
            "classes";
    }

    .fd__layout {
        grid-template-columns: 1fr;
    }

    .fd__metrics {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .fd__metric {
        flex: 1 1 calc(50% - 5px);
    }
}


/* #39997 — Search-everywhere typeahead on the Front Desk page header.
   Sits inside .page-header, expanding to fill remaining width on the right.
   Results dropdown is positioned absolutely below the input, capped in
   height with internal scroll so it doesn't push page content. */
.fd-search {
    position: relative;
    flex: 1;
    max-width: 480px;
    margin-left: auto;
    z-index: 5;
}

.fd-search__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 0 14px 0 38px;
    height: 36px;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.fd-search__input-wrap:focus-within {
    background: #fff;
    border-color: var(--co-accent, #4f46e5);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--co-accent, #4f46e5) 20%, transparent);
}

.fd-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 0.85rem;
}

.fd-search__input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.875rem;
    color: #111827;
    height: 100%;
    min-width: 0;
}

.fd-search__input::placeholder {
    color: #9ca3af;
}

.fd-search__clear {
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 50%;
    line-height: 1;
}

.fd-search__clear:hover {
    background: #f3f4f6;
    color: #111827;
}

.fd-search__results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    border: 1px solid #e5e7eb;
    max-height: 460px;
    overflow-y: auto;
    padding: 8px 0;
}

.fd-search__group + .fd-search__group {
    border-top: 1px solid #f3f4f6;
    margin-top: 6px;
    padding-top: 6px;
}

.fd-search__group-title {
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.fd-search__group-title i {
    margin-right: 6px;
    color: #9ca3af;
}

.fd-search__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: #111827;
    text-decoration: none;
    transition: background 0.1s ease;
}

.fd-search__item:hover,
.fd-search__item--active {
    background: #f9fafb;
    text-decoration: none;
    color: #111827;
}

.fd-search__avatar {
    position: relative;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: color-mix(in srgb, var(--co-accent, #4f46e5) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fd-search__avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.fd-search__avatar-initials {
    color: var(--co-accent, #4f46e5);
    font-size: 0.75rem;
    font-weight: 700;
}

.fd-search__avatar--icon {
    color: var(--co-accent, #4f46e5);
}

.fd-search__item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fd-search__item-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-search__item-sublabel {
    font-size: 0.75rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-search__empty {
    padding: 18px 14px;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

/* #39997 — Front Desk quick-list drawer. Opens via window.openFdQuickList(scope). */
.fd-ql {
    width: 480px;
    max-width: 92vw;
    background: #ffffff;
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.08);
}

.fd-ql__header {
    border-bottom: 1px solid #e5e7eb;
    padding: 16px 20px;
    align-items: flex-start;
}

.fd-ql__header-text {
    flex: 1 1 auto;
    min-width: 0;
}

.fd-ql__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.25;
}

.fd-ql__subtitle {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 2px;
}

.fd-ql__body {
    padding: 12px 0;
    overflow-y: auto;
    flex: 1 1 auto;
}

.fd-ql__list {
    display: flex;
    flex-direction: column;
}

.fd-ql__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.12s ease;
}

.fd-ql__row:hover {
    background-color: #f8fafc;
    text-decoration: none;
    color: inherit;
}

.fd-ql__avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #475569 0%, #1e293b 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
}

.fd-ql__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fd-ql__avatar-initials {
    line-height: 1;
}

.fd-ql__row-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fd-ql__row-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-ql__row-sublabel {
    font-size: 0.78rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-ql__badge {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: #e5e7eb;
    color: #374151;
    white-space: nowrap;
}

.fd-ql__badge--danger {
    background: #fee2e2;
    color: #b91c1c;
}

.fd-ql__badge--warning {
    background: #fef3c7;
    color: #92400e;
}

.fd-ql__badge--info {
    background: #dbeafe;
    color: #1e40af;
}

.fd-ql__badge--positive {
    background: #dcfce7;
    color: #166534;
}

.fd-ql__empty {
    padding: 32px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

.fd-ql__footer {
    border-top: 1px solid #e5e7eb;
    padding: 12px 20px;
    background: #f8fafc;
}

.fd-ql__full-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1f2937;
    text-decoration: none;
}

.fd-ql__full-link:hover {
    color: #0f172a;
    text-decoration: underline;
}

/* #39997 — Front Desk task edit/create drawer. Opens via window.openFdTaskDrawer
   (existing) and window.openFdNewTaskDrawer (new). Mirrors .fd-ql visual. */
.fd-task {
    width: 480px;
    max-width: 92vw;
    background: #ffffff;
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.08);
}

.fd-task__header {
    border-bottom: 1px solid #e5e7eb;
    padding: 16px 20px;
    align-items: flex-start;
}

.fd-task__header-text {
    flex: 1 1 auto;
    min-width: 0;
}

.fd-task__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.25;
}

.fd-task__subtitle {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 2px;
}

.fd-task__body {
    padding: 18px 20px 8px;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fd-task__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fd-task__field--check {
    flex-direction: row;
    align-items: center;
}

.fd-task__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin: 0;
}

.fd-task__details {
    resize: vertical;
    min-height: 90px;
}

.fd-task__avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #475569 0%, #1e293b 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
}

.fd-task__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fd-task__avatar-initials {
    line-height: 1;
}

.fd-task__member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.fd-task__member:hover {
    background: #f1f5f9;
}

.fd-task__member-name {
    font-weight: 600;
    color: #0f172a;
    font-size: 0.9rem;
}

.fd-task__picker {
    position: relative;
}

.fd-task__picker-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    max-height: 280px;
    overflow-y: auto;
}

.fd-task__picker-row {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
}

.fd-task__picker-row:hover {
    background: #f8fafc;
}

.fd-task__picker-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fd-task__picker-name {
    font-weight: 600;
    color: #0f172a;
    font-size: 0.9rem;
}

.fd-task__picker-sublabel {
    font-size: 0.75rem;
    color: #6b7280;
}

.fd-task__picker-empty {
    padding: 14px;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

.fd-task__check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}

.fd-task__check-label {
    font-size: 0.9rem;
    color: #374151;
}

.fd-task__collect {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fd-task__error {
    padding: 18px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 0.875rem;
}

.fd-task__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

/* #39997 — QuickView outstanding-tasks list. Each row opens the Front Desk
   task drawer (window.openFdTaskDrawer) instead of routing to /Member. */
.qv-tasks__list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qv-tasks__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.qv-tasks__row:hover {
    background: #f1f5f9;
}

.qv-tasks__row--overdue {
    border-color: #fecaca;
    background: #fef2f2;
}

.qv-tasks__details {
    font-size: 0.85rem;
    color: #0f172a;
}

.qv-tasks__due {
    font-size: 0.7rem;
    color: #6b7280;
}

.qv-tasks__row--overdue .qv-tasks__due {
    color: #b91c1c;
    font-weight: 600;
}

.qv-tasks__add {
    border: 0;
    background: transparent;
    color: var(--co-accent, #2563eb);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 6px;
}

.qv-tasks__add:hover {
    text-decoration: underline;
}
/* ------------------------------------------------------------------
   Website builder — Branding panel (read-only)
   Surfaces the current club logo + brand colour at the top of the
   builder so users can see what their public site is using. Editing
   happens under Club Info — this panel is informational and links there.
   ------------------------------------------------------------------ */
.website-branding {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    flex-wrap: wrap;
}

.website-branding__logo {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.website-branding__body {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.website-branding__section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.website-branding__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #6b7280;
}

.website-branding__swatches {
    display: flex;
    align-items: center;
    gap: 8px;
}

.website-branding__swatch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 0.78rem;
    color: #374151;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.website-branding__swatch-chip {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.12);
    flex-shrink: 0;
    background-color: var(--brand-swatch, #667eea);
}

.website-branding__note {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
}

.website-branding__edit {
    margin-left: auto;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .website-branding__edit {
        margin-left: 0;
        width: 100%;
    }

    .website-branding__edit .btn {
        width: 100%;
    }
}

/* Website Builder selects render as flat boxes (.form-control on a <select>
   has no caret), so users don't realise they're dropdowns. Add the standard
   chevron. Scoped to the editor so the rest of the admin is untouched. */
.website-editor select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

/* Preview-bar controls: device toggle + back-to-homepage sit together. */
.website-editor__preview-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Soften the frame corners when previewing the phone-width layout so it
   reads as a mobile device rather than a cropped desktop. */
.website-editor__preview-frame--mobile {
    border-radius: 16px;
}

/* ============================================================
   Staff settings — Permissions tab (capability toggles)
   See PERMISSIONS.md for the capability model.
   ============================================================ */
.staff-permissions__intro,
.staff-permissions__alert {
    font-size: 0.85rem;
}

.staff-permissions__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.staff-permissions__row:last-of-type {
    border-bottom: 0;
}

.staff-permissions__label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}

.staff-permissions__description {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
}

.staff-permissions__default {
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
    padding-top: 4px;
}

/* ============================================================
   Club Overview hero — quick actions row (#41115)
   Shown to users whose capabilities hide the KPI strip; gives
   desk staff the prominent Locate / Add / Book / Pay actions.
   ============================================================ */
.club-overview__quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.club-overview__quick-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    color: #1f2937;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.club-overview__quick-action:hover,
.club-overview__quick-action:focus-visible {
    background: #ffffff;
    color: #111827;
}

.club-overview__quick-action i {
    color: var(--club-colour, #6d28d9);
}

/* ============================================================
   Member page — identity header rework (#40543 round 2)
   Beta feedback: bigger identity, real contrast, standing line,
   flat contact essentials (no disclosure), actions in the header.
   ============================================================ */
.member-dashboard-header__photo {
    width: 72px;
    height: 72px;
}

/* The header sits on the dark slate gradient — every text element must hold
   AA contrast against #1e293b (Tristan, 10 Jun: grey-on-dark was unreadable). */
.member-dashboard-header__name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

.member-dashboard-header__standing {
    margin: 2px 0 4px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #f1f5f9;
}

.member-dashboard-header__standing--overdue {
    color: #fca5a5;
}

.member-dashboard-header__subtitle,
.member-dashboard-header__subtitle a {
    color: #cbd5e1;
}

.member-dashboard-header__subtitle a:hover {
    color: #ffffff;
}

.member-dashboard-header__subtitle {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.member-dashboard-header__actionbar {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.member-dashboard-header__actionbar .member-action-btn {
    flex: 0 0 auto;
    padding: 8px 16px;
}

.member-action-btn--edit {
    border: 1px solid #d1d5db;
    font-weight: 600;
}

/* ── Contact card — edit in place ── */
.member-contact-card__edit-all {
    background: none;
    border: 0;
    color: #6b7280;
    font-size: 0.78rem;
    padding: 0;
}

.member-contact-card__edit-all:hover {
    color: #111827;
}

.member-contact-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #f3f4f6;
    border-radius: 6px;
}

.member-contact-card__body .member-contact-row:last-child {
    border-bottom: 0;
}

.member-contact-row__icon {
    width: 20px;
    text-align: center;
    color: #9ca3af;
    font-size: 0.8rem;
    flex: 0 0 auto;
}

.member-contact-row__label {
    flex: 0 0 110px;
    font-size: 0.78rem;
    color: #6b7280;
}

.member-contact-row__value {
    flex: 1 1 auto;
    font-size: 0.85rem;
    color: #111827;
    text-decoration: none;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.member-contact-row--static .member-contact-row__value {
    cursor: default;
}

a.member-contact-row__value:hover {
    text-decoration: underline;
}

.member-contact-row__value--empty {
    color: #9ca3af;
    font-style: italic;
}

.member-contact-row__pencil {
    color: #d1d5db;
    font-size: 0.7rem;
    opacity: 0;
    cursor: pointer;
}

.member-contact-row:hover .member-contact-row__pencil {
    opacity: 1;
}

.member-contact-row__input {
    flex: 1 1 auto;
    font-size: 0.85rem;
    padding: 3px 8px;
    border: 1px solid #6d28d9;
    border-radius: var(--radius-md);
    outline: none;
}

.member-contact-row__empty {
    background: none;
    border: 1px dashed #d1d5db;
    border-radius: var(--radius-md);
    color: #6b7280;
    font-size: 0.75rem;
    padding: 2px 10px;
}

.member-contact-row--saved {
    background: #ecfdf5;
}

.member-contact-row--error {
    background: #fef2f2;
}

/* ── Records — full-width on-page tables ── */
.member-records {
    margin-top: 18px;
}

.member-records__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.member-records__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 9px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

.member-records__tab:hover {
    border-color: #c7cdd6;
}

.member-records__tab--active {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

.member-records__count {
    background: #eef1f5;
    color: #374151;
    border-radius: 999px;
    padding: 0 8px;
    font-size: 0.72rem;
}

.member-records__tab--active .member-records__count {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.member-records__panel {
    margin-top: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-xl);
    padding: 16px;
}

.member-records__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.member-records__table th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    padding: 6px 10px;
    border-bottom: 1px solid #e5e7eb;
}

.member-records__table td {
    padding: 10px;
    border-bottom: 1px solid #f3f4f6;
    color: #1f2937;
}

.member-records__table tbody tr {
    cursor: pointer;
}

.member-records__table tbody tr:hover td {
    background: #f8fafc;
}

.member-records__open {
    text-align: right;
    color: #6b7280;
    font-size: 0.78rem;
    white-space: nowrap;
}

.member-records__status {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #4b5563;
}

.member-records__status--active { background: #ecfdf5; color: #047857; }
.member-records__status--overdue { background: #fef2f2; color: #b91c1c; }
.member-records__status--frozen { background: #eff6ff; color: #1d4ed8; }
.member-records__status--starting-soon { background: #fffbeb; color: #b45309; }

.member-records__empty {
    margin: 0;
    padding: 8px 4px;
    color: #6b7280;
    font-size: 0.85rem;
}

/* ============================================================
   Member page reweighting (12 Jun): billing in the main column,
   activity compact by default, rail consolidated to four blocks.
   ============================================================ */
.member-billing-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
}

@media (max-width: 991px) {
    .member-billing-band {
        grid-template-columns: 1fr;
    }
}

/* Compact activity: filters hidden, feed clamped with a fade; View all expands. */
.member-timeline-card--compact .comms-filter-tabs {
    display: none;
}

.member-timeline-card--compact .member-timeline {
    max-height: 430px;
    overflow: hidden;
    position: relative;
}

.member-timeline-card--compact .member-timeline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
    pointer-events: none;
}

.member-timeline-card__head-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.member-timeline-card__expand {
    background: none;
    border: 0;
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0;
}

.member-timeline-card__expand:hover {
    color: #111827;
}

/* Header action link on cards that used to be one big click target. */
.member-dashboard-card__header-link {
    background: none;
    border: 0;
    color: #6b7280;
    font-size: 0.78rem;
    padding: 0;
}

.member-dashboard-card__header-link:hover {
    color: #111827;
}

/* Stats row living inside the Engagement card rather than as its own block. */
.member-summary-stats--in-card {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
}

.member-engagement__meta {
    font-size: 0.85rem;
}

/* ============================================================
   Member page — "one sheet" grammar (12 Jun, third pass).
   The wall-of-cards feel came from every block being a bordered,
   shadowed white box with an icon chip. The page is now a single
   white surface; sections are made by spacing, hairline rules and
   small uppercase labels. Only Needs Attention keeps a box — it's
   an alert and earns it. Scoped to .member-grid--timeline so the
   shared card components are untouched elsewhere.
   ============================================================ */
.member-grid--timeline {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    padding: 20px 24px;
}

/* Vertical hairline between the working column and the context rail. */
.member-grid--timeline .member-grid__col--right {
    border-left: 1px solid #f1f5f9;
    padding-left: 24px;
}

@media (max-width: 991px) {
    .member-grid--timeline .member-grid__col--right {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid #f1f5f9;
        padding-top: 18px;
        margin-top: 18px;
    }
}

/* Flatten every boxed component inside the sheet. */
.member-grid--timeline .member-dashboard-card,
.member-grid--timeline .member-summary-card,
.member-grid--timeline .member-contact-card,
.member-grid--timeline .member-timeline-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
    overflow: visible;
}

.member-grid--timeline .member-dashboard-card__body {
    padding-left: 0;
    padding-right: 0;
}

/* Card headers become quiet section labels. */
.member-grid--timeline .member-dashboard-card__header,
.member-grid--timeline .member-timeline-card__head {
    background: transparent;
    border: 0;
    padding-left: 0;
    padding-right: 0;
}

.member-grid--timeline .member-dashboard-card__title,
.member-grid--timeline .member-timeline-card__title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}

.member-grid--timeline .member-timeline-card__title i {
    display: none;
}

/* Icon chips read as widget furniture — drop them inside the sheet. */
.member-grid--timeline .member-dashboard-card__icon {
    display: none;
}

/* Sections separate by rules + air instead of card edges. */
.member-grid--timeline .member-grid__col--right > * + *,
.member-grid--timeline .member-grid__col--main > * + * {
    border-top: 1px solid #f1f5f9;
    padding-top: 16px;
    margin-top: 16px;
}

/* The alert strip is the exception — it keeps its box. */
.member-grid--timeline .member-focus {
    border-top: 0;
}

/* Billing band: two flat halves divided by a hairline, not two boxes. */
.member-billing-band {
    gap: 0;
}

.member-billing-band__col + .member-billing-band__col {
    border-left: 1px solid #f1f5f9;
    padding-left: 20px;
    margin-left: 20px;
}

@media (max-width: 991px) {
    .member-billing-band__col + .member-billing-band__col {
        border-left: 0;
        padding-left: 0;
        margin-left: 0;
        border-top: 1px solid #f1f5f9;
        padding-top: 14px;
        margin-top: 14px;
    }
}

/* Plan summary loses its tinted panel look inside the sheet. */
.member-grid--timeline .member-summary-card {
    padding: 0;
}

/* Assignments strip: flat rows instead of a boxed strip. */
.member-grid--timeline .member-info-strip {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.member-grid--timeline .member-info-strip__item {
    background: transparent;
    border: 0;
    padding-left: 0;
}

/* The timeline card's own internal padding collapses to the sheet rhythm. */
.member-grid--timeline .member-timeline {
    padding-left: 0;
    padding-right: 0;
}

/* Stat cells flatten inside the sheet — numbers and labels, no mini-boxes. */
.member-grid--timeline .member-summary-stats {
    display: flex;
    gap: 22px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.member-grid--timeline .member-summary-stat {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

/* ============================================================
   Member page v3 — pills + panels (Summary default, designed
   detail views). Pills reuse the .member-records__tab styling.
   ============================================================ */
.member-page-tabs {
    margin: 0 0 14px;
}

.member-page-panel--sheet {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    padding: 20px 24px;
}

.member-page-panel__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.member-page-panel__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}

/* Needs Attention pulled above the pills keeps its box; trim its margin. */
.member-focus--page {
    margin-bottom: 14px;
}

/* Inside the Activity panel the feed is always full — no expand control. */
#pagePanel-activity .member-timeline-card__expand {
    display: none;
}

#pagePanel-activity .member-timeline-card {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Memberships panel — designed rows, not a table. */
.member-memberships-list {
    display: flex;
    flex-direction: column;
}

.member-memberships-list__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 10px;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    color: #1f2937;
    border-radius: var(--radius-md);
}

.member-memberships-list__row:hover {
    background: #f8fafc;
}

.member-memberships-list__row--live .member-memberships-list__name {
    font-weight: 700;
}

.member-memberships-list__icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: #eef1f5;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.member-memberships-list__main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.member-memberships-list__name {
    font-size: 0.92rem;
    font-weight: 600;
    color: #111827;
}

.member-memberships-list__dates {
    font-size: 0.78rem;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.member-memberships-list__open {
    font-size: 0.78rem;
    color: #6b7280;
    white-space: nowrap;
}

/* ============================================================
   Member page v4 — pills-as-tabs at full parity (13 Jun reset).
   Every functional area is its own inline tab; server-rendered
   drawers are mounted in place (offcanvas positioning neutralised).
   ============================================================ */
/* Comms (default) landing: activity timeline + context rail. */
.member-comms-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1100px) {
    .member-comms-grid { grid-template-columns: 1fr; }
}

.member-comms-grid__main { min-width: 0; }

.member-comms-grid__rail {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* A mounted drawer becomes a plain inline block. !important is warranted here:
   we are overriding CoreUI's third-party .offcanvas component (fixed position,
   transforms, visibility) so the same markup can live inline in a tab panel. */
.member-drawer-inline {
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: auto !important;
}

.member-drawer-inline .offcanvas-header {
    padding: 0 0 12px 0;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 14px;
}

.member-drawer-inline .offcanvas-header .btn-close { display: none; }

.member-drawer-inline .offcanvas-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}

.member-drawer-inline .offcanvas-body {
    padding: 0;
    overflow: visible;
}

.member-drawer-inline .offcanvas-footer {
    position: static;
    padding: 16px 0 0 0;
    border-top: 1px solid #f1f5f9;
    margin-top: 16px;
    background: transparent;
}

.member-drawer-inline .offcanvas-footer .d-grid { max-width: 260px; }

/* The pill bar now carries up to a dozen tabs — let it wrap cleanly. */
#memberPageTabs.member-records__tabs { row-gap: 8px; }

/* ============================================================
   Member page v5 (13 Jun) — 5 grouped tabs + sub-tabs, action
   cluster top-right of the header, compact Needs-Attention chips.
   ============================================================ */
/* Daily actions sit top-right of the dark identity header. */
.member-dashboard-header__cluster {
    margin-left: auto;
    align-self: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: 62%;
}

.member-dashboard-header__cluster .member-action-btn {
    padding: 7px 13px;
    font-size: 0.83rem;
}

@media (max-width: 991px) {
    .member-dashboard-header__cluster {
        margin-left: 0;
        max-width: 100%;
        width: 100%;
        justify-content: flex-start;
        margin-top: 10px;
    }
}

/* Detail tabs use a LEFT sub-nav (the settings-page pattern) — Paul chose this
   13 Jun after horizontal sub-tabs kept reading as missable. The sub-nav is a
   navigation column attached to its content; for single-view groups (Overview/
   Bookings) the column collapses and the content goes full width. */
.member-detail-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.member-detail-layout--full { grid-template-columns: 1fr; }
.member-detail-layout--full .member-detail-layout__nav { display: none; }

.member-detail-layout__content { min-width: 0; }

.member-detail-layout__nav { position: sticky; top: 12px; }

.member-subtabs { margin: 0; }

.member-subtabs__set {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.member-subtab {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #5b6472;
}

.member-subtab:hover { background: #f3f4f6; color: #111827; }

.member-subtab--active,
.member-subtab--active:hover {
    background: #eef2f7;
    color: var(--club-colour, #6d28d9);
    border-left-color: var(--club-colour, #6d28d9);
}

/* Narrow screens / app webview: sub-nav becomes a horizontal row above content. */
@media (max-width: 900px) {
    .member-detail-layout { grid-template-columns: 1fr; }
    .member-detail-layout__nav { position: static; }
    .member-subtabs__set { flex-direction: row; flex-wrap: wrap; }
    .member-subtab {
        width: auto;
        border-left: 0;
        border-bottom: 3px solid transparent;
        border-radius: 8px;
    }
    .member-subtab--active { border-left: 0; border-bottom-color: var(--club-colour, #6d28d9); }
}

/* Profile = details (left) + preferences (right). */
.member-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.member-profile-grid__side {
    border-left: 1px solid #f1f5f9;
    padding-left: 28px;
}

@media (max-width: 1100px) {
    .member-profile-grid { grid-template-columns: 1fr; gap: 20px; }
    .member-profile-grid__side {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid #f1f5f9;
        padding-top: 20px;
    }
}

/* Needs-attention compact chips (Overview landing). */
.member-focus-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.member-focus-chips__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b45309;
}

.member-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
}

.member-chip__cta {
    font-weight: 700;
    opacity: 0.8;
    padding-left: 4px;
}

.member-chip--danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.member-chip--warn { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.member-chip--info { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.member-chip:hover { filter: brightness(0.97); }

/* Profile photo — top of the right column (Paul, 13 Jun: was centred in the
   form leaving a lot of blank space). */
.member-profile-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #f1f5f9;
}

.member-profile-photo__avatar {
    width: 110px;
    height: 110px;
    font-size: 2rem;
}

.member-profile-photo__change {
    font-size: 0.8rem;
    color: #6b7280;
    text-decoration: none;
}

.member-profile-photo__change:hover { color: #111827; }

/* Breathing room between the primary group tabs and the content below
   (Paul, 14 Jun: felt too close). */
#memberGroupTabs { margin-bottom: 18px; row-gap: 8px; }

/* Keep forms a readable width inside the wide content sheet rather than
   stretching edge to edge. */
.member-drawer-inline > form,
.member-profile-grid__main .member-drawer-inline { max-width: 760px; }

/* ════════════════════════════════════════════════════════════════════════
   #41431 Mobile: keep admin data tables INSIDE their card/container on phones
   instead of widening the whole page. Three table flavours are covered:
     1. Bare Bootstrap <table class="table"> (not already in .table-responsive)
     2. jQuery DataTables (.dataTables_wrapper)
     3. Flex ".member-table" lists (base rule clips with overflow:hidden)
   Scoped to <=767.98px so desktop layout is completely unchanged.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Unwrapped Bootstrap tables: make the table itself a horizontal scroller.
       Excludes DataTables (handled below) and tables already inside a
       .table-responsive wrapper (which already scroll). */
    .card-body table.table:not(.dataTable):not(.table-responsive table) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* jQuery DataTables have their own non-responsive chrome — let the wrapper
       scroll sideways rather than push the page wider than the viewport. */
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* #41439 — DataTables paging + info bar on phones. NOTE: DataTables' pagination
       is a <ul class="pagination">, which collides with this app's custom
       .pagination component — whose mobile rule (~L14678) sets flex-direction:column
       + align-items:stretch, so the page buttons were stacking FULL-WIDTH. Reset the
       DataTables list back to a normal centred, wrapping horizontal row and strip the
       component's pill background/padding it inherited. */
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dataTables_info {
        float: none;
        text-align: center;
    }
    .dataTables_wrapper .dataTables_paginate ul.pagination {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0;
        margin: 8px 0 0;
        padding: 0;
        background: none;
        border-radius: 0;
    }
    .dataTables_wrapper .dataTables_paginate ul.pagination .page-item {
        align-self: center;
    }
    .dataTables_wrapper .dataTables_paginate .page-link,
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 4px 9px;
        min-width: 0;
    }
    /* Flex "member-table" lists clip overflowing columns (base overflow:hidden),
       which makes the right-hand Status/Actions cells unreachable on a phone.
       Scroll horizontally instead so every column is reachable. */
    .member-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   #41437 Mobile: give small action buttons a usable vertical tap target on
   phones. Height-only so text-button widths/alignment are untouched. Covers
   the sub-44px row-action buttons flagged across Finance, Tasks, Source,
   SalesFunnel, MembershipPlan, Diary and the outbound message list.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .btn-sm,
    .btn-group-sm > .btn {
        min-height: 40px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   #41436 Mobile: the Reporting filter bar is 8 bare Bootstrap .col items
   (flex-basis:0), so they cram into a single unusable row instead of
   stacking. Force a readable 2-up on phones, 1-up on very small screens.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .reporting-filters .row > .col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (max-width: 480px) {
    .reporting-filters .row > .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* #41436 Mobile: the Franchise dashboard date filter is a single-row layout
   <table id="filterBox"> with width=% cells that never stack. Stack the cells
   vertically and make the buttons full width on phones. */
@media (max-width: 767.98px) {
    #filterBox { float: none !important; width: 100% !important; }
    #filterBox tbody,
    #filterBox tr,
    #filterBox td { display: block; width: 100% !important; }
    #filterBox td { margin-bottom: 8px; }
    #filterBox td .btn { margin-left: 0 !important; width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   #41440 Mobile: keep canvas-based charts/sparklines within the viewport.
   Fixed-buffer canvases (the 320x48 Data Integrity sparkline, Chart.js bar
   charts) overflowed their card on phones — cap width, and let the sparkline
   scale to its aspect ratio.
   ════════════════════════════════════════════════════════════════════════ */
.di-spark {
    max-width: 100%;
    height: auto;
}
@media (max-width: 767.98px) {
    canvas {
        max-width: 100%;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   #41444 Mobile TAP-BLOCKING: the fixed chat launcher (.intercomLauncher,
   bottom:50px right:20px, 60x60) sits in the bottom-right corner and was
   (a) colliding with the page-filter FABs and (b) covering the bottom controls
   of open drawers / full-width offcanvas panels. Fixes, phone-scoped:
     1. Lift the Messaging & Finance FABs clear of the launcher, matching the
        proven Members #41300 clearance (bottom:150px).
     2. The FABs are z-index:1040 — BELOW their own dim overlay (1049) — so they
        were untappable while the drawer was open. Hide each FAB while its drawer
        is open (the overlay tap / in-drawer close handles dismissal).
     3. Hide the chat launcher whenever a page drawer or a full-width member
        offcanvas is open, so it can't cover their controls (mirrors the existing
        Reporting rule at the top of this file).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .messaging-sidebar-toggle,
    .finance-sidebar-toggle {
        bottom: 150px !important;
    }
    body:has(.members-sidebar.show) .members-sidebar-toggle,
    body:has(.messaging-sidebar.show) .messaging-sidebar-toggle,
    body:has(.finance-sidebar.show) .finance-sidebar-toggle {
        display: none !important;
    }
    body:has(.members-sidebar.show) .intercomLauncher,
    body:has(.messaging-sidebar.show) .intercomLauncher,
    body:has(.finance-sidebar.show) .intercomLauncher,
    body:has(.member-detail-offcanvas.show) .intercomLauncher {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   #41444 Mobile critical re-audit — high-value navigation/polish wins:
   - drop sticky page-headers on phones (the slim global header already pins;
     the second sticky page-header double-pinned and ate 100px+, worst on
     Reporting where it pushed the report well below the fold)
   - settings-hub rows to a 44px tap target
   - trim Finance section padding (~24px) to reclaim cramped table width
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .page-header--sticky,
    .page-header.reporting-page-header {
        position: static;
    }
    .settings-hub-config-item {
        min-height: 44px;
    }
    .finance-main {
        padding: 12px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   #41445 Mobile re-audit batch 2 — messy clusters / cramped tab strips:
   - Member dashboard action cluster: a ragged wrapping wall of 7 buttons ->
     tidy 2-up grid of equal tiles
   - Till header "back" buttons: full-width 44px (they're the mobile nav spine)
   - Diary schedule day-tabs: 7 equal tabs too tight at 390px -> horizontal scroll
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .member-dashboard-header__cluster {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .member-dashboard-header__cluster .member-action-btn {
        justify-content: center;
    }
    .page-header__actions .till-header-back {
        flex: 1 1 100%;
        justify-content: center;
        min-height: 44px;
    }
    .sch-dash__tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sch-dash__tabs > * {
        flex: 0 0 auto;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   #41445 Mobile re-audit batch 3 — Till POS flow:
   - Member hero: name + Switch/Void crammed on one nowrap row -> wrap, with the
     actions on a full-width 44px row below
   - Split-payment mode: 55/45 side-by-side can't fit 390px -> stack vertically
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .till-member-hero {
        flex-wrap: wrap;
    }
    .till-member-hero__actions {
        flex: 1 0 100%;
        margin-top: 8px;
    }
    .till-member-hero__actions > * {
        flex: 1;
        min-height: 44px;
    }
    .till-paying__methods[data-split-mode="split"] .till-paying__methods-body {
        flex-direction: column;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   #41445 Mobile re-audit batch 4 — ClubOverview / Finance polish:
   - hero quick-actions: ragged wrap staircase -> clean 2x2 grid
   - my-dashboards: 3-col cramps names in ~110px cards -> 2-col
   - activity ticker: drop the static label so the latest-event text keeps width
   - finance status-pill "|" separators orphan at wrapped line ends -> hide
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .club-overview__quick-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .co-dashboards__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .co-ticker__label {
        display: none;
    }
    .finance-pill-separator {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   #41445 Mobile re-audit batch 5 — Reporting filters + Member timeline tabs:
   - Reporting filter controls were <16px so iOS zoomed-on-focus -> 16px
   - Member timeline inline filter tabs wrapped to 3 rows -> horizontal scroll
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .reporting-filters .form-select,
    .reporting-filters #fromDate,
    .reporting-filters #toDate {
        font-size: 16px;
    }
    .comms-filter-tabs--inline {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .comms-filter-tabs--inline > * {
        flex: 0 0 auto;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   #41445 Mobile re-audit batch 6 — dense touch rows:
   - Diary attendee actions sat ~5.6px apart (destructive Remove next to Move) ->
     wider gap + 40px hit areas
   - Till operator strip couldn't wrap the "Swap operator" pill -> allow wrap
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .cls-attendee__actions {
        gap: 0.5rem;
    }
    .cls-attendee__actions a,
    .cls-attendee__actions button {
        min-width: 40px;
        min-height: 40px;
    }
    .till-operator-strip {
        flex-wrap: wrap;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   #41445 Mobile re-audit batch 7 — Finance filter inputs + preview sidebars:
   - Finance filter search boxes were a hard inline 220px that detached from the
     record count when the bar stacked -> full width (!important beats the inline)
   - Compose / plan-wizard preview card is sticky(top:80px) but pointless once it
     stacks below the form on a phone -> sit static
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .finance-filter-bar .form-control-sm {
        width: 100% !important;
    }
    .mpw-preview-card.sticky-top {
        position: static !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   #41445 Mobile re-audit batch 8 — Debtors table -> phone CARD layout.
   A 9-column table where the Chase / Add-to-DD / Take-payment actions fell off
   the right edge. On phones each member becomes a card: header = name, labelled
   key/value rows, and a full-width actions row. Scoped to .finance-table--cards
   data rows (.debtor-detail-row) so the injected detail panel + row-click + bulk
   mode are untouched, and so the other finance tables are unaffected. Desktop
   keeps the normal table.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .finance-table--cards thead {
        display: none;
    }
    .finance-table--cards,
    .finance-table--cards tbody,
    .finance-table--cards tr,
    .finance-table--cards td {
        display: block;
        width: 100%;
    }
    .finance-table--cards tr.debtor-detail-row {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 10px;
        background: #fff;
        padding-bottom: 6px;
    }
    .finance-table--cards tr.debtor-detail-row td {
        border: 0;
        padding: 6px 12px;
        text-align: left;
    }
    .finance-table--cards tr.debtor-detail-row td[data-label] {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        text-align: right;
    }
    .finance-table--cards tr.debtor-detail-row td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        text-align: left;
        flex: 0 0 auto;
    }
    /* Member cell = card title */
    .finance-table--cards tr.debtor-detail-row td:first-child {
        font-weight: 700;
        background: #f8fafc;
        border-radius: 8px 8px 0 0;
    }
    /* Actions cell = full-width button row, so Chase/Add-to-DD are reachable */
    .finance-table--cards tr.debtor-detail-row td:last-child .btn-group {
        width: 100%;
    }
    .finance-table--cards tr.debtor-detail-row td:last-child .btn-group .btn {
        flex: 1 1 auto;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   #41445 Mobile re-audit batch 9 — other finance tables: pin the last (action)
   column so the off-screen-right Link / action stays reachable while the rest of
   the row scrolls. (The Debtors table uses the fuller card layout above; the
   simpler provider/card-payment tables get a sticky action column instead.)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .finance-table:not(.finance-table--cards):not(.finance-activity-table) th:last-child,
    .finance-table:not(.finance-table--cards):not(.finance-activity-table) td:last-child {
        position: sticky;
        right: 0;
        background: #fff;
        box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.12);
    }
}

/* ════════════════════════════════════════════════════════════════════════
   #41445 Mobile re-audit — Balance & Activity (9-col reconciliation table,
   JS-rendered) -> phone CARD layout. CSS-only via fixed cell order; the colspan
   loading/empty rows (single :only-child td) stay as plain blocks. Each
   transaction becomes a labelled card; the truncated Reference is unclamped so
   the full value is readable.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .finance-activity-table thead {
        display: none;
    }
    .finance-activity-table,
    .finance-activity-table tbody,
    .finance-activity-table tr,
    .finance-activity-table td {
        display: block;
        width: 100%;
    }
    .finance-activity-table tbody tr:has(td:not(:only-child)) {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 10px;
        background: #fff;
        padding: 4px 0;
    }
    .finance-activity-table td:not(:only-child) {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        text-align: right;
        padding: 6px 12px;
        border: 0;
        max-width: none !important;
        white-space: normal;
        word-break: break-word;
    }
    .finance-activity-table td:not(:only-child)::before {
        font-weight: 600;
        color: #6b7280;
        text-align: left;
        flex: 0 0 auto;
    }
    .finance-activity-table td:nth-child(1):not(:only-child)::before { content: "Date"; }
    .finance-activity-table td:nth-child(2):not(:only-child)::before { content: "Reference"; }
    .finance-activity-table td:nth-child(3):not(:only-child)::before { content: "Customer"; }
    .finance-activity-table td:nth-child(4):not(:only-child)::before { content: "Method"; }
    .finance-activity-table td:nth-child(5):not(:only-child)::before { content: "Gross"; }
    .finance-activity-table td:nth-child(6):not(:only-child)::before { content: "Fee"; }
    .finance-activity-table td:nth-child(7):not(:only-child)::before { content: "Net"; }
    .finance-activity-table td:nth-child(8):not(:only-child)::before { content: "Status"; }
    .finance-activity-table td:nth-child(9):not(:only-child)::before { content: "Provider"; }
}

/* ════════════════════════════════════════════════════════════════════════
   #41445 Mobile re-audit batch 10 — Communication "Group Messages" outbound list
   (a 710px flex .member-table) -> phone CARD layout. CSS-only (works for both the
   server-rendered and JS-rendered rows): hide the head, stack each row, override
   the inline flex/min-width, and label the ambiguous fields via fixed cell order.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    #outboundMessagesTable .member-table__head {
        display: none;
    }
    #outboundMessagesTable .outbound-msg-row {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 8px 10px;
    }
    #outboundMessagesTable .outbound-msg-row .member-table__cell {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100%;
        padding: 2px 0;
        text-align: left;
    }
    /* Subject = card title */
    #outboundMessagesTable .outbound-msg-row .member-table__cell:nth-child(2) {
        font-weight: 600;
        font-size: 0.95rem;
    }
    /* Label the otherwise-ambiguous fields (cell order is fixed in both render paths) */
    #outboundMessagesTable .outbound-msg-row .member-table__cell:nth-child(3)::before {
        content: "Recipients: ";
        color: #6b7280;
        font-weight: 600;
    }
    #outboundMessagesTable .outbound-msg-row .member-table__cell:nth-child(4)::before {
        content: "Sent by: ";
        color: #6b7280;
        font-weight: 600;
    }
    #outboundMessagesTable .outbound-msg-row .member-table__cell:nth-child(5)::before {
        content: "Date: ";
        color: #6b7280;
        font-weight: 600;
    }
    #outboundMessagesTable .outbound-msg-row .member-table__cell:nth-child(7) {
        padding-top: 6px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   #41439 Mobile: the Bulk-email Recipients table (_BulkEmailDetail.cshtml) is a
   6-column flex .member-table (~660px of min-widths). Give it the same phone
   CARD layout as its sibling outbound list (#41445 above) rather than leaving it
   on the horizontal-scroll fallback: hide the head, stack each row, drop the
   inline flex/min-widths, and label the metric cells (cell order is fixed in the
   JS render path: Name, Sent, Opened, Clicked, Unsubscribed, Bounced). CSS-only.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .member-table--bulk-recipients .member-table__head {
        display: none;
    }
    .member-table--bulk-recipients .member-table__row {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 8px 10px;
    }
    .member-table--bulk-recipients .member-table__row .member-table__cell {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100%;
        padding: 2px 0;
        text-align: left;
    }
    /* Name = card title */
    .member-table--bulk-recipients .member-table__row .member-table__cell--recipient-name {
        font-weight: 600;
        font-size: 0.95rem;
    }
    /* Label the metric columns so the badges aren't ambiguous once stacked. */
    .member-table--bulk-recipients .member-table__row .member-table__cell--metric::before {
        color: #6b7280;
        font-weight: 600;
        margin-right: 4px;
    }
    .member-table--bulk-recipients .member-table__cell--metric:nth-child(2)::before { content: "Sent: "; }
    .member-table--bulk-recipients .member-table__cell--metric:nth-child(3)::before { content: "Opened: "; }
    .member-table--bulk-recipients .member-table__cell--metric:nth-child(4)::before { content: "Clicked: "; }
    .member-table--bulk-recipients .member-table__cell--metric:nth-child(5)::before { content: "Unsubscribed: "; }
    .member-table--bulk-recipients .member-table__cell--metric:nth-child(6)::before { content: "Bounced: "; }
    /* Recipients card header: on phones stack the title above a full-width
       controls row, so the search box + "Tag Members" button don't cram against
       the title (the header is a justify-between flex row that didn't wrap). */
    .bulk-detail__card-header.d-flex {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .bulk-detail__card-header.d-flex > .d-flex {
        width: 100%;
        flex-wrap: wrap;
    }
    /* Search now shares the controls row with the Tag Members button (wrapping if
       tight) instead of the fixed 220px basis. */
    .bulk-detail__search {
        flex: 1 1 160px;
        min-width: 0;
    }
}

/* #41439 — subscription notice indicator + toast, migrated out of the inline
   <style> block in _DashboardLayout.cshtml (CSS-GUIDE: no <style> blocks). The
   toast was min-width:320px pinned 20px from the right, so it overflowed phones
   under ~360px; a mobile rule now lets it span the viewport with a gutter. */
.sidebar-subscription-notice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: 8px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(245, 158, 11, 0.7);
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    cursor: pointer;
    transition: box-shadow 200ms ease, transform 200ms ease, background 200ms ease;
}
.sidebar-subscription-notice:hover {
    background: rgba(245, 158, 11, 0.25);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.6);
    transform: scale(1.08);
}
.subscription-notice-icon__pulse { animation: subscriptionNoticePulse 1.6s ease-in-out infinite; }
@keyframes subscriptionNoticePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
    .subscription-notice-icon__pulse { animation: none; }
}
.subscription-notice-toast {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1090;
    max-width: 420px;
    min-width: 320px;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.35);
    border-radius: 12px;
    animation: subscriptionNoticeToastIn 220ms ease-out;
}
@keyframes subscriptionNoticeToastIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 400px) {
    .subscription-notice-toast {
        left: 12px;
        right: 12px;
        min-width: 0;
        max-width: none;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   #41445 Mobile filter-FAB drawers: the sub-sidebars are pushed off-screen at
   <=991.98px (transform: translateX(calc(-100% - 15.5rem))) and only slide back
   via body.drawer-with-pagemenu. The filter FAB only toggles .X-sidebar.show
   (+ the dim overlay), so the drawer stayed OFF-SCREEN -> "grey screen, nothing
   opens". Make .show bring the drawer on-screen too. (Pairs with the #41433
   z-index fix so the drawer sits above its overlay.)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .diary-sidebar.show,
    .members-sidebar.show,
    .messaging-sidebar.show,
    .finance-sidebar.show {
        transform: translateX(0) !important;
        /* also reset the desktop 15.5rem offset + the calc(100% - 15.5rem) width so
           the drawer slides in from the left as a proper mobile drawer, not a
           ~173px right stub */
        left: 0 !important;
        right: auto !important;
        width: 86vw !important;
        max-width: 340px !important;
    }
}

/* ==========================================================================
   #41439 — styles migrated out of in-page <style> blocks (CSS-GUIDE: no
   inline styles / <style> blocks in views).
   ========================================================================== */

/* Finance → Debtors: bulk-action bar, hidden until rows are selected.
   Replaces an inline display:none. (Views/Finance/_Debtors.cshtml) */
.debtor-bulk-hidden {
    display: none;
}

/* Reporting → Product Purchase Detail: keep the status filter dropdown from
   adding page scrollbars. (Views/Reporting/_ProductPurchaseDetail.cshtml) */
.product-purchase-status .filter-multi-select > .dropdown-menu {
    width: 100%;
    max-width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.product-purchase-status .filter-multi-select > .dropdown-menu.show {
    overflow-y: auto;
    overflow-x: hidden;
}

.product-purchase-status .filter-multi-select > .viewbar {
    overflow-x: auto;
    overflow-y: hidden;
}

/* Tagify tag-input overrides. lib/tagify/tagify.css is bundled ahead of
   site.css (Program.cs), so these win wherever Tagify is used — except on
   Member/Dashboard(+Classic), which re-link tagify.css in @section scripts;
   that was already true of the old in-page block, so behaviour is unchanged.
   (was in Views/Shared/_DashboardLayout.cshtml) */
.tagify {
    display: inline-flex;
    margin: 0px;
    padding: 0px;
}

.tagify__tag {
    font-size: small;
    border-radius: 4px;
    padding: 0px 20px 3px 6px;
}

.tagify__tag__removeBtn {
    font-size: small !important;
    padding-top: 2px !important;
}

/* --------------------------------------------------------------------------
   Product Groups (/ProductGroup) — was a 122-line in-page <style> block.
   --pg-club (the club brand colour) is supplied as an inline custom property
   on .pg-tree and .pg-panel by the view, so it stays dynamic per club.

   NOTE: the page's ghost / small / danger button modifiers are deliberately
   namespaced .pg-btn--* rather than .action-btn--*. The in-page block used to
   redefine .action-btn--danger (white) over the global one (#fee2e2 pink);
   that was harmless while page-scoped, but lifting it verbatim into site.css
   would have restyled every danger button in the admin UI. These modifiers sit
   after .action-btn in source order, so they still override the base.
   -------------------------------------------------------------------------- */
.pg-tree { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 6px; min-height: 300px; }
.pg-node { user-select: none; }
.pg-node__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; position: relative; transition: background-color 120ms ease; }
.pg-node__row:hover { background: #f8fafc; }
.pg-node__row.is-drop-target { background: #e0f2fe; outline: 2px dashed #0ea5e9; outline-offset: -2px; }
.pg-node__row.is-dragging { opacity: 0.4; }
.pg-node__row.is-match { background: #fef9c3; }
.pg-node__handle { color: #cbd5e1; cursor: grab; width: 16px; text-align: center; opacity: 0; transition: opacity 120ms ease; }
.pg-node__row:hover .pg-node__handle { opacity: 1; }
.pg-node__chevron { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: #64748b; transition: transform 150ms ease; flex-shrink: 0; }
.pg-node__chevron.is-empty { visibility: hidden; }
.pg-node.is-expanded > .pg-node__row .pg-node__chevron { transform: rotate(90deg); }
.pg-node__thumb { width: 32px; height: 32px; border-radius: 6px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.6875rem; flex-shrink: 0; position: relative; }
.pg-node__swatch { position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.pg-node__name { font-weight: 600; color: #111827; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-node__meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pg-node__count { font-size: 0.8rem; color: #64748b; background: #f1f5f9; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
.pg-node__count.is-zero { opacity: 0.5; font-style: italic; }
a.pg-node__count--link { text-decoration: none; transition: all 120ms ease; }
a.pg-node__count--link:hover { background: var(--pg-club); color: #fff; }
.pg-node__lock { color: #94a3b8; font-size: 0.85rem; }
.pg-node__lock[title]:hover { color: #475569; }
.pg-node__actions { display: flex; gap: 4px; opacity: 0; transition: opacity 120ms ease; }
.pg-node__row:hover .pg-node__actions { opacity: 1; }

/* Touch devices have no hover, so the drag handle + row actions were unreachable.
   Always reveal them on touch / small screens, and give them a 44px tap target. */
@media (hover: none), (max-width: 767.98px) {
    .pg-node__handle, .pg-node__actions { opacity: 1 !important; }
    .pg-node__action { min-height: 44px; min-width: 44px; }
}

/* #41439 Mobile: keep the tree inside the viewport. The row's meta cluster
   (product-count badge + add-subgroup button) was flex-shrink:0, and every
   nesting level adds 42px of indent, so deep branches marched off the right
   edge on phones. Tighten the indent, let the meta give way, truncate the
   count, and add an overflow-x safety net so the tree can never widen the page. */
@media (max-width: 767.98px) {
    .pg-tree {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pg-node__children {
        margin-left: 12px;
        padding-left: 10px;
    }
    .pg-node__meta {
        flex-shrink: 1;
        min-width: 0;
    }
    .pg-node__count {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Trim the fixed decorative widths a touch so more room goes to the name. */
    .pg-node__thumb {
        width: 28px;
        height: 28px;
    }
}

.pg-node__action { background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; color: #64748b; font-size: 0.8rem; cursor: pointer; transition: all 120ms ease; }
.pg-node__action:hover { background: #fff; border-color: #e2e8f0; color: #0f172a; }
.pg-node__action--add:hover { color: var(--pg-club); border-color: var(--pg-club); }
.pg-node__children { display: none; margin-left: 28px; padding-left: 14px; border-left: 1px dashed #e2e8f0; }
.pg-node.is-expanded > .pg-node__children { display: block; }
.pg-inline-add { display: flex; gap: 8px; padding: 6px 10px 6px 38px; background: #f0f9ff; border: 1px dashed #7dd3fc; border-radius: 8px; margin: 4px 0; }
.pg-inline-add input { flex: 1; border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 10px; font-size: 0.9rem; }
.pg-inline-add input:focus { outline: none; border-color: var(--pg-club); box-shadow: 0 0 0 3px rgba(56, 166, 224, 0.15); }
.pg-empty { padding: 60px 24px; text-align: center; }
.pg-empty__icon { font-size: 3rem; color: #cbd5e1; margin-bottom: 12px; }
.pg-empty__title { font-size: 1.1rem; font-weight: 600; color: #334155; margin-bottom: 6px; }
.pg-empty__text { color: #64748b; margin-bottom: 16px; }
.pg-panel-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.35); opacity: 0; pointer-events: none; transition: opacity 200ms ease; z-index: 1040; }
.pg-panel-backdrop.is-open { opacity: 1; pointer-events: auto; }
.pg-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; background: #fff; box-shadow: -8px 0 24px rgba(15, 23, 42, 0.15); transform: translateX(100%); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); z-index: 1050; display: flex; flex-direction: column; }
.pg-panel.is-open { transform: translateX(0); }
.pg-panel__header { padding: 16px 20px; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pg-panel__title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pg-panel__swatch { width: 28px; height: 28px; border-radius: 6px; background: var(--pg-club); flex-shrink: 0; }
.pg-panel__title { margin: 0; font-size: 1.1rem; font-weight: 600; }
.pg-panel__close { background: transparent; border: none; font-size: 1.2rem; color: #64748b; width: 32px; height: 32px; border-radius: 6px; cursor: pointer; }
.pg-panel__close:hover { background: #f1f5f9; color: #0f172a; }
.pg-panel__body { padding: 20px; overflow-y: auto; flex: 1; }
.pg-field { margin-bottom: 18px; }
.pg-field__label { display: block; font-weight: 600; font-size: 0.85rem; color: #334155; margin-bottom: 6px; }
.pg-colour-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.pg-colour-picker__swatch { width: 32px; height: 32px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: transform 100ms ease; }
.pg-colour-picker__swatch:hover { transform: scale(1.1); }
.pg-colour-picker__swatch.is-selected { border-color: #0f172a; }
.pg-image-uploader { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px dashed #cbd5e1; border-radius: 10px; background: #fafbfc; cursor: pointer; transition: all 120ms ease; }
.pg-image-uploader:hover { border-color: var(--pg-club); background: #f0f9ff; }
.pg-image-uploader.has-image { border-style: solid; background: #fff; }
.pg-image-uploader.is-uploading { opacity: 0.6; pointer-events: none; }
.pg-image-uploader__preview { width: 64px; height: 64px; border-radius: 8px; background: #e2e8f0; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: #94a3b8; flex-shrink: 0; }
.pg-image-uploader.has-image .pg-image-uploader__preview { background-color: transparent; }
.pg-image-uploader__hint { display: flex; flex-direction: column; gap: 2px; color: #64748b; font-size: 0.875rem; line-height: 1.3; }
.pg-image-uploader__hint .fa { color: var(--pg-club); margin-bottom: 2px; }
.pg-image-uploader__sub { font-size: 0.75rem; color: #94a3b8; }
.pg-image-uploader.has-image .pg-image-uploader__hint { display: none; }
.pg-image-uploader__remove { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(15, 23, 42, 0.55); color: #fff; cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 0.75rem; padding: 0; }
.pg-image-uploader__remove:hover { background: #b91c1c; }
.pg-image-uploader.has-image .pg-image-uploader__remove { display: flex; }
.pg-image-uploader__note { font-size: 0.75rem; color: #64748b; margin-top: 6px; }
.pg-image-uploader__note.is-error { color: #b91c1c; }
.pg-toggle { display: flex; gap: 12px; cursor: pointer; align-items: flex-start; }
.pg-toggle input { display: none; }
.pg-toggle__slider { width: 40px; height: 22px; background: #cbd5e1; border-radius: 11px; position: relative; flex-shrink: 0; transition: background 150ms ease; margin-top: 2px; }
.pg-toggle__slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 150ms ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.pg-toggle input:checked + .pg-toggle__slider { background: var(--pg-club); }
.pg-toggle input:checked + .pg-toggle__slider::after { transform: translateX(18px); }
.pg-toggle__label { display: flex; flex-direction: column; gap: 2px; }
.pg-toggle__hint { font-size: 0.8rem; color: #64748b; }
.pg-count { background: #e2e8f0; color: #475569; font-size: 0.75rem; padding: 1px 8px; border-radius: 10px; margin-left: 4px; font-weight: 500; }
.pg-field__label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pg-field__label-row .pg-field__label { margin-bottom: 0; }
.pg-field__label-actions { display: flex; gap: 4px; }
.pg-product-picker { background: #fff; border: 1px solid var(--pg-club); border-radius: 8px; margin-bottom: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); }
.pg-product-picker__input-wrap { display: flex; align-items: center; padding: 8px 10px; gap: 8px; border-bottom: 1px solid #f1f5f9; }
.pg-product-picker__icon { color: #94a3b8; font-size: 0.85rem; }
.pg-product-picker__input { flex: 1; border: none; outline: none; font-size: 0.9rem; padding: 4px 0; background: transparent; }
.pg-product-picker__close { background: transparent; border: none; color: #94a3b8; cursor: pointer; padding: 2px 6px; border-radius: 4px; font-size: 0.8rem; }
.pg-product-picker__close:hover { background: #f1f5f9; color: #0f172a; }
.pg-product-picker__results { max-height: 240px; overflow-y: auto; }
.pg-product-picker__hint { padding: 12px; text-align: center; color: #94a3b8; font-size: 0.85rem; }
.pg-product-picker__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; transition: background 100ms ease; border-bottom: 1px solid #f8fafc; }
.pg-product-picker__row:last-child { border-bottom: none; }
.pg-product-picker__row:hover { background: #f0f9ff; }
.pg-product-picker__row.is-busy { opacity: 0.5; pointer-events: none; }
.pg-product-picker__row-main { flex: 1; min-width: 0; }
.pg-product-picker__row-name { font-weight: 500; color: #0f172a; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-product-picker__row-meta { font-size: 0.75rem; color: #64748b; display: flex; gap: 6px; align-items: center; }
.pg-product-picker__row-meta-tag { background: #f1f5f9; padding: 1px 6px; border-radius: 8px; }
.pg-product-picker__row-action { color: var(--pg-club); font-size: 0.85rem; font-weight: 500; }
.pg-btn--ghost { background: transparent; border-color: transparent; color: var(--pg-club); }
.pg-btn--ghost:hover { background: #f1f5f9; }
.pg-btn--sm { padding: 4px 10px; font-size: 0.8rem; }
.pg-products { background: #f8fafc; border-radius: 8px; padding: 6px; max-height: 220px; overflow-y: auto; border: 1px solid #f1f5f9; }
.pg-products__empty { padding: 10px; text-align: center; color: #94a3b8; font-size: 0.875rem; }
.pg-products__loading { padding: 14px; text-align: center; color: #94a3b8; font-size: 0.85rem; }
.pg-product-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 6px; font-size: 0.875rem; gap: 8px; text-decoration: none; color: inherit; }
.pg-product-row:hover { background: #fff; color: inherit; }
.pg-product-row__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-product-row__price { color: #64748b; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pg-products__view-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.8rem; color: var(--pg-club); text-decoration: none; }
.pg-products__view-all:hover { text-decoration: underline; color: var(--pg-club); }
.pg-panel__footer { padding: 14px 20px; border-top: 1px solid #e5e7eb; display: flex; justify-content: space-between; gap: 8px; }
.pg-panel__footer-right { display: flex; gap: 8px; }
.pg-btn--danger { color: #b91c1c; border-color: #fecaca; background: #fff; }
.pg-btn--danger:hover { background: #fef2f2; }

/* --------------------------------------------------------------------------
   Communication (/Communication, New Broadcast) — was ~76 inline style=""
   attributes across Index, _MessagingSidebar, _BulkEmailDetail and
   _NewBroadcastPanel (CSS-GUIDE: no inline styles).

   NOT migrated on purpose: the display:none flags on JS-toggled elements
   (compose panel, wizard steps, sidebar badges). They are visibility STATE,
   carry no fixed widths, and jQuery show()/hide() drives them — leaving them
   inline keeps that contract explicit. Razor-conditional styles also stay.
   -------------------------------------------------------------------------- */

/* Group Messages table columns (Index.cshtml — server-rendered rows and the
   JS-built row templates both use these). NOTE: the Date and Actions columns
   are namespaced --msg-date / --msg-actions, NOT the generic member-table
   --date / --actions (which already exist above at ~L18920 for the members /
   contacts / terminal tables). Reusing those names would (a) override those
   tables globally via later source order, and (b) drag the generic --actions
   display:flex / justify-content:flex-end onto this table, defeating the
   centred single action below. */
.member-table__cell--type { flex: 0 0 50px; }
.member-table__cell--subject { flex: 2; min-width: 140px; }
.member-table__cell--recipients { flex: 1.5; min-width: 120px; }
.member-table__cell--sender { flex: 1; min-width: 100px; }
.member-table__cell--msg-date { flex: 1; min-width: 120px; }
.member-table__cell--status { flex: 0 0 100px; }
.member-table__cell--msg-actions { flex: 0 0 80px; text-align: center; }

/* Bulk email recipients table (_BulkEmailDetail.cshtml). */
.member-table__cell--recipient-name { flex: 2; min-width: 160px; }
.member-table__cell--metric { flex: 1; min-width: 100px; }
.bulk-detail__body { min-height: 0; }
.bulk-detail__search { flex: 0 1 220px; margin: 0; }

/* Conversations pane: loading + "Select a conversation" empty state. */
.msg-loading__text { font-size: 0.8125rem; }
.msg-empty { text-align: center; padding: 40px 20px; }

.msg-empty__icon-wrap {
    width: 56px;
    height: 56px;
    background: #f3f4f6;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msg-empty__icon { font-size: 1.5rem; color: #9ca3af; }
.msg-empty__title { font-weight: 600; color: #1f2937; font-size: 0.9375rem; }
.msg-empty__text { color: #6b7280; font-size: 0.8125rem; margin: 0; }

/* Conversation detail pane. display:none stays inline — inbox.js reveals it
   with .css('display','flex'), so the initial state must remain an inline
   declaration it can override. */
.msg-inbox-detail { flex-direction: column; flex: 1; min-height: 0; }

/* Group Messages "no messages sent yet" empty state. */
.msg-outbound-empty__icon { opacity: 0.4; }
.msg-outbound-empty__text { max-width: 400px; margin-left: auto; margin-right: auto; }
.msg-small-text { font-size: 0.85rem; }

/* Messaging sidebar filter icons. */
.messaging-sidebar__filter-icon--starred,
.messaging-sidebar__filter-icon--membership,
.messaging-sidebar__filter-icon--system { color: #f59e0b; }
.messaging-sidebar__filter-icon--waiting { color: #92400e; }
.messaging-sidebar__filter-icon--assigned,
.messaging-sidebar__filter-icon--group { color: #6366f1; }
.messaging-sidebar__filter-icon--upcoming { color: #0ea5e9; }
.messaging-sidebar__filter-icon--requests,
.messaging-sidebar__filter-icon--saved { color: #8b5cf6; }

/* New Broadcast: sticky preview card + live-preview placeholder text. */
.mpw-preview-card--sticky { top: 80px; }
.msgc-pv-placeholder { color: #cbd5e1; }
.msgc-pv-placeholder--muted { color: #94a3b8; }
.msgc-pv-placeholder--faint { opacity: .6; }

/* ==========================================================================
   Themed Summernote skin — every rich-text editor (message / email composer,
   note editor, template editors) now matches the admin theme: a rounded frame,
   a soft toolbar, and club-coloured active + focus states. Accents use the
   per-club brand colour (--cui-nav-link-color, set on <body> in _Layout), with
   the product-neutral indigo #4f46e5 / rgb(79,70,229) as fallback so it still
   looks intentional if the club colour is absent. Base-level selectors only,
   so the .mpe-form-card plan-editor skin (more specific) still wins there.

   #42393 — this global reskin was added alongside the #41439 CSS migration. QA
   flagged it as out of scope; kept deliberately as a small admin-wide styling
   upgrade (decision: Anna), not reverted. Applies to every Summernote editor.
   ========================================================================== */
.note-editor.note-frame {
    border: 1px solid #d1d5db;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Summernote adds no focus class, so light up the frame while the caret is in
   the editable area — mirrors the site's .form-control / .action-btn focus ring. */
.note-editor.note-frame:focus-within {
    border-color: var(--cui-nav-link-color, #4f46e5);
    box-shadow: 0 0 0 3px rgba(var(--club-color-rgb, 79, 70, 229), 0.15);
}

.note-editor.note-frame .note-toolbar {
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.375rem 0.5rem;
    gap: 1px;
}

/* Toolbar buttons — flat, rounded, themed hover/active (bold/italic etc. show
   their "on" state in the club colour instead of the default grey inset). */
.note-editor.note-frame .note-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: #475569;
    padding: 0.25rem 0.5rem;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.note-editor.note-frame .note-btn:hover {
    background: #eef2f7;
    color: #0f172a;
    border-color: #e2e8f0;
}

.note-editor.note-frame .note-btn.active,
.note-editor.note-frame .note-btn:active {
    background: var(--cui-nav-link-color, #4f46e5);
    border-color: var(--cui-nav-link-color, #4f46e5);
    color: var(--cui-nav-link-color-text, #ffffff);
}

.note-editor.note-frame .note-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--club-color-rgb, 79, 70, 229), 0.3);
}

/* Summernote dropdown buttons (font size, paragraph, colour, table…) already
   render their own caret via .note-icon-caret; Bootstrap's .dropdown-toggle::after
   adds a SECOND triangle, so each dropdown showed two side arrows. Hide the
   Bootstrap one (same suppression this codebase uses on picture-/colour-cards). */
.note-editor.note-frame .note-btn.dropdown-toggle::after,
.note-editor.note-frame .dropdown-toggle::after {
    display: none;
}

.note-editor.note-frame .note-editing-area .note-editable {
    padding: 0.75rem 0.95rem;
    line-height: 1.55;
    color: #1f2937;
}

.note-editor.note-frame .note-statusbar {
    border-top: 1px solid #e5e7eb;
    background: #f8f9fa;
}

/* Toolbar dropdowns (font size, paragraph, colour picker) — themed panel. */
.note-editor.note-frame .note-dropdown-menu {
    border-radius: var(--radius-md);
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.note-editor.note-frame .note-dropdown-item:hover,
.note-editor.note-frame .note-dropdown-menu a:hover {
    background: #eef2f7;
}

/* ==========================================================================
   #41439 — Bulk-email report "Opened By / Clicked / Unsubscribed / Recipients"
   lists. Replaced the old jQuery DataTables (which broke on mobile — full-width
   stacked pagination, escaped name tags) with a simple themed list + "Show more".
   ========================================================================== */
.bulkreport-list {
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    background: #fff;
    overflow: hidden;
    margin-top: 8px;
}

.bulkreport-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
}

.bulkreport-list__row:last-child {
    border-bottom: none;
}

.bulkreport-list__row:hover {
    background: #f9fafb;
}

.bulkreport-list__name {
    font-weight: 500;
    color: #111827;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulkreport-list__name a,
.bulkreport-list__link {
    color: var(--cui-nav-link-color, #2563eb);
    text-decoration: none;
}

.bulkreport-list__name a:hover,
.bulkreport-list__link:hover {
    text-decoration: underline;
}

.bulkreport-list__meta {
    color: #6b7280;
    font-size: 0.8125rem;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
}

.bulkreport-list__empty {
    padding: 16px;
    text-align: center;
    color: #9ca3af;
    font-size: 0.875rem;
}

.bulkreport-list__more-wrap {
    text-align: center;
    margin: 10px 0 4px;
}

.bulkreport-list__more {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    color: #374151;
    padding: 6px 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bulkreport-list__more:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

.bulkreport-recent {
    margin-bottom: 10px;
}

/* On phones stack the name over the date so nothing is cramped. */
@media (max-width: 575.98px) {
    .bulkreport-list__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .bulkreport-list__meta {
        text-align: left;
    }
}

@font-face {
    font-family: 'TStarMonoRoundBold';
    src: url('fonts/TStarMonoRoundBold.woff?v=2DKlDlXjY5CYyRxkMV4q4uDwtFU') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #fff;
    font-size: 1rem;
}

div {
    background-position: center;
}

a.logo {
    padding: 5px 0;
    color: #ffffff;
}

/* < sm */
@media (max-width:575px) {
    a.logo img {
        width: 100% !important;
        max-width: 100px !important;
        max-height: 70px !important;
    }
}
/* sm - md */
@media (min-width:576px) and (max-width:767px) {
    a.logo img {
        width: 100% !important;
        max-width: 125px !important;
        max-height: 70px !important;
    }
}
/* >= md */
@media (min-width:768px) {
    a.logo img {
        width: 100% !important;
        max-width: 179px !important;
        max-height: 70px !important;
    }
}

.nav ul li {
    float: right;
    margin-left: 30px;
    line-height: 30px;
    list-style: none;
}

.membership-panel {
    background: url(../img/membership.jpeg?v=2DKlDlXjY5CYyRxkMV4q4uDwtFU) no-repeat center top;
    text-align: center; 
    background-position: center center;
    background-size: cover;
}

.class-panel {
    background: url(../img/class.jpeg?v=2DKlDlXjY5CYyRxkMV4q4uDwtFU) no-repeat center top;
    text-align: center;
    background-position: center center;
    background-size: cover;
}

.about-panel {
    text-align: center;
    background-position: center center;
    background-size: cover;
}

.vcenter {
    display: flex;
    align-items: center;
    font-size: 2em;
    justify-content: center;
    cursor: pointer;
}

    .vcenter p {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 10px;
    }

        .vcenter p a, .vcenter p a:hover {
            color: #393939;
        }

.modal-body h2 {
    text-align: center;
}


.nohorizontalmargin {
    margin-top: 0px;
}

.btn.btn-success {
    background: #e95a0c;
    color: #fff;
    position: relative;
    font-size: 17.25px;
    line-height: 70px;
    display: inline-block;
    padding: 0 20px;
    border-radius: 0;
    margin: 0 0 30px;
    letter-spacing: 2px;
    border: none;
    max-width: 100%;
}

.btn.btn-primary {
    background: #e95a0c;
    color: #fff !important;
    position: relative;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 10px 0 0px;
    max-width: 100%;
    border-radius: 0;
    border: none;
}

.panel {
    border: 2px solid #bbbdbf;
    margin: 0 0 50px;
    height: 100%;
    padding: 30px 35px;
    background: #fff;
}


.cart-summary {
    font-size: 18px;
}

.btn {
    white-space: normal;
    padding: 6px 6px;
}

video {
    width: 100% !important;
    height: auto !important;
}




/*/ / Small devices (landscape phones, 576px and up)*/ @media (max-width: 576px) {
    h1 {
        font-size: 26px;
    }

    h2, .h2 {
        font-size: 30px;
    }

    .panel {
        border: 0;
        margin: 0;
        padding: 0;
        background: #fff;
    }

    .panel-body {
        padding: 0;
    }

    .calendarDay.monthly {
        width: 100% !important;
        margin-left: 0px !important;
    }
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
}

/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
}

.swal2-popup {
    font-size: 1.2rem !important;
}

.note-editor {
    padding: 0px;
}

.saleBooking {
    display: flex;
    border: solid 1px #555;
}

    .saleBooking .pn {
        height: 100%;
        min-height: 150px;
        box-shadow: none;
    }

        .saleBooking .pn:hover {
            box-shadow: none;
        }

    .saleBooking .mb {
        margin-bottom: 0px;
        padding: 0;
    }

    .saleBooking .bookingDetails {
        padding: 10px;
        text-align: left;
    }


.attendeeList input {
    margin-bottom: 10px;
}

.editContentLink, .saveContentLink {
    margin-left: 5px !important;
}

.ondemandSections p a {
    border: solid 1px #337ab7;
    padding: 5px;
    width: 100%;
    display: block;
}

.cartBolton {
    clear: both;
    margin-top: 6px;
}

    .cartBolton .input-group {
        width: 100px;
        float: left;
        margin-right: 10px;
    }

    .cartBolton span.input-group-label {
        padding-top: 2px;
        display: inline-block;
    }

.link {
    cursor: pointer;
}


#awardsModalPanel {
    padding: 20px;
    text-align: center;
}

    #awardsModalPanel .col-md-4 {
        padding-bottom: 20px;
    }

.tile, .tile-w {
    cursor: pointer !important;
}

.card { 
    background-size: cover;
}

    .card a {
        color: #000;
        text-decoration: none;
    }
    
.clubOpen {
    background-color: rgb(46, 184, 92);
}

.clubClosed {
    background-color: rgb(229, 83, 83); 
}

#clubPhoto {
    max-height: 22vw;
}

.diarytile {
    border: solid 1px #ddd;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 10px;
    opacity: 0.95;
    cursor: pointer;
}

    .diarytile:hover {
        opacity: 1;
        border-color: #000;
    }

.classImage {
    background-size: cover;
}

.activity, .appointment, .location, .instructor {
    opacity: 0.5;
    cursor: pointer !important;
    border: solid 2px #fff !important;
}

    .activity:hover, .appointment:hover, .location:hover, .instructor:hover {
        opacity: 0.8;
        border: solid 2px #000 !important;
    }

    .activity.selected, .appointment.selected, .location.selected, .instructor.selected {
        opacity: 1;
        border: solid 2px #000 !important;
    }

html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding {
    margin-left: -16rem;
}

.sidebar.sidebar-self-hiding:not(.sidebar-end) ~ * {
    --cui-sidebar-occupy-start: 0;
}

.sidebar.sidebar-self-hiding ~ .wrapper {
    padding-left: 0 !important;
}

.sidebar-nav .nav-link {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    display: inline-block;
    padding-left: 40px;
    padding-right: 15px;
}

    .sidebar-nav .nav-link .nav-icon {
        margin-right: 10px;
    }

.accordion-button, .accordion-flush .accordion-item .accordion-button {
    font-size: 2.5rem;
    background: none;
    color: #000;
}

.unread-message {
    background-color: #03a5fc;
    margin-left: 5px;
    width: 8px;
    border-radius: 50%;
}

.booking {
    border: solid 1px #ccc !important;
}

.badgeover {
    position: relative;
    cursor: pointer;
}

    .badgeover[badge-danger]:after {
        position: absolute;
        top: -2px;
        right: -5px;
        font-size: 80%;
        padding: .3em;
        border-radius: 999px;
        line-height: 0.5em;
        color: white;
        background: #000;
        text-align: center;
        min-width: 1em;
        font-weight: normal;
        background-color: rgb(229, 0, 0);
        content: attr(badge-danger);
    }

.tab-content > .active {
  display: block !important;
}

/* ========================================
   Switch Club Page Styles
   ======================================== */
.switch-club-header {
    padding: 32px 20px;
    margin: -16px -16px 24px -16px;
    text-align: center;
}

.switch-club-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

.switch-club-subtitle {
    font-size: 14px;
    opacity: 0.95;
    margin-top: 8px;
}

.club-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 2px solid transparent;
}

.club-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    text-decoration: none;
}

.club-card:active {
    transform: scale(0.98);
}

.club-logo-container {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.club-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.club-info {
    flex: 1;
    min-width: 0;
}

.club-name {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 4px 0;
}

.club-membership {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.club-arrow {
    color: #9ca3af;
    font-size: 24px;
    transition: all 0.3s;
}

.club-card:hover .club-arrow {
    transform: translateX(4px);
}

.section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin: 32px 0 16px 0;
}

.no-clubs-message {
    background: #f3f4f6;
    border-radius: 16px;
    padding: 32px 20px;
    text-align: center;
    color: #6b7280;
    margin-top: 24px;
}

/* ========================================
   Club Info Page Styles
   ======================================== */
.clubinfo-header {
    padding: 32px 20px;
    margin: -16px -16px 24px -16px;
    text-align: center;
}

.clubinfo-logo {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    object-fit: cover;
    background: white;
    padding: 8px;
    margin: 0 auto 16px;
    display: block;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.clubinfo-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

.clubinfo-content {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.info-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.info-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}

.content-tile {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    display: block;
    position: relative;
    min-height: 120px;
}

.content-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    text-decoration: none;
}

.content-tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

.content-tile-title {
    font-size: 18px;
    font-weight: 700;
}

/* Quick Action Tiles */
.qa-tile {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.2s;
    aspect-ratio: 1/1;
    text-decoration: none;
    display: block;
}

.qa-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-decoration: none;
}

.qa-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qa-tile-text {
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.qa-tile-text-wrap {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.qa-tile-text-clamp2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.qa-tile-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

/* Size variants */
.qa-size-small .qa-tile-text { font-size: 11px; }
.qa-size-small .qa-tile-overlay { padding: 6px; }
.qa-size-small .qa-tile-icon { max-width: 32px; max-height: 32px; margin-bottom: 4px; }
.qa-size-small.qa-tile-icon-text { padding: 6px; }

.qa-size-medium .qa-tile-text { font-size: 13px; }
.qa-size-medium .qa-tile-overlay { padding: 10px; }
.qa-size-medium .qa-tile-icon { max-width: 40px; max-height: 40px; margin-bottom: 6px; }
.qa-size-medium.qa-tile-icon-text { padding: 10px; }

.qa-size-large .qa-tile-text { font-size: 15px; }
.qa-size-large .qa-tile-overlay { padding: 12px; }
.qa-size-large .qa-tile-icon { max-width: 48px; max-height: 48px; margin-bottom: 8px; }
.qa-size-large.qa-tile-icon-text { padding: 12px; }

.qa-size-xlarge .qa-tile-text { font-size: 16px; }
.qa-size-xlarge .qa-tile-overlay { padding: 14px; }
.qa-size-xlarge .qa-tile-icon { max-width: 64px; max-height: 64px; margin-bottom: 12px; }
.qa-size-xlarge.qa-tile-icon-text { padding: 20px; }

/* Alert Cards */
.alert-card a,
.alert-card a:hover,
.alert-card a:visited {
    color: white;
    text-decoration: none;
}

.alert-card a p {
    color: white;
}

/* Hero Logo - Members Area Header */
.hero-logo {
    width: auto;
    height: 120px;
    max-width: 200px;
    border-radius: 12px;
    object-fit: contain;
    background: white;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* ========================================
   CART & CHECKOUT STYLES
   ======================================== */

.cart-container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
}

.cart-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-header-icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-header-icon i {
    color: white;
    font-size: 18px;
}

.cart-header-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.cart-header-badge {
    background: rgba(255,255,255,0.25);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.cart-body {
    padding: 20px;
}

.cart-section {
    margin-bottom: 20px;
}

.cart-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.cart-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.cart-section-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.cart-items-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-items-stack-sm {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cart-items-stack-md {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cart-item-row {
    background: #f9fafb;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-item-info {
    flex: 1;
}

.cart-item-name {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}

.cart-item-meta {
    font-size: 13px;
    color: #6b7280;
}

.cart-item-price {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    min-width: 80px;
    text-align: right;
}

.cart-item-quantity {
    font-size: 14px;
    color: #6b7280;
}

.cart-total {
    border-top: 2px solid #e5e7eb;
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-total-label {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.cart-total-value {
    font-size: 24px;
    font-weight: 700;
}

.cart-empty {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 40px 24px;
    text-align: center;
    margin-top: 24px;
}

.cart-empty-icon {
    width: 64px;
    height: 64px;
    background: #f3f4f6;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-empty-icon i {
    font-size: 24px;
    color: #9ca3af;
}

.cart-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 8px;
}

.cart-empty-text {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.cart-actions {
    margin-top: 20px;
}

.cart-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #10b981;
    color: white;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.cart-btn-primary:hover {
    background: #059669;
    color: white;
    text-decoration: none;
}

.cart-btn-primary:disabled,
.cart-btn-primary.disabled {
    background: #d1fae5;
    color: #065f46;
    cursor: not-allowed;
}

.cart-payment-panel {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.cart-payment-text {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 16px;
    text-align: center;
}

/* ========================================
   BOOKING CARD STYLES
   ======================================== */

.booking-card {
    background: #f9fafb;
    border-radius: 12px;
    overflow: hidden;
    flex-direction: column;
}

/* Status line — icon + label, shared by booked and waiting cards (#42164) */
.booking-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.booking-status i {
    font-size: 14px;
}

.booking-status--booked {
    color: #166534;
}

.booking-status--past {
    color: #6b7280;
}

.booking-status--waiting {
    color: #3730a3;
    align-items: center;
}

.booking-status__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.booking-status__title {
    font-weight: 700;
}

.booking-status__sub {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.85;
}

/* Waiting-list booking — slim card: small thumb, class name on top, status + Leave below (#42164) */
.booking-card--waiting {
    cursor: help;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.booking-card__waiting-thumb {
    width: 56px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

.booking-card__waiting-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.booking-card__waiting-thumb--placeholder i {
    font-size: 18px;
    opacity: 0.7;
}

.booking-card__waiting-content {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
}

.booking-card__waiting-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.booking-card__waiting-class {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

.booking-card__waiting-time {
    font-size: 12px;
    color: #6b7280;
}

.booking-card__waiting-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

.booking-card__waiting-hint {
    font-size: 11px;
    color: #6366f1;
    opacity: 0.8;
}

.booking-card__waiting-leave {
    flex-shrink: 0;
    background: #f3f4f6;
    color: #6b7280;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.booking-card-header {
    display: flex;
    align-items: stretch;
}

.booking-thumb {
    width: 80px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

.booking-thumb-placeholder {
    width: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.booking-thumb-placeholder i {
    font-size: 24px;
    color: white;
    opacity: 0.7;
}

.booking-info {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.booking-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.booking-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-datetime {
    font-size: 13px;
    color: #6b7280;
}

.booking-separator {
    color: #d1d5db;
    margin: 0 4px;
}

.booking-badge-online {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}

.booking-section {
    border-top: 1px solid #e5e7eb;
    padding: 12px;
    background: white;
}

.booking-resource {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #374151;
}

.booking-resource i {
    font-size: 10px;
}

.booking-resource-link {
    text-decoration: none;
    font-weight: 500;
    margin-left: 2px;
}

.booking-resource-link:hover {
    text-decoration: underline;
}

/* ========================================
   FORM CONTROLS
   ======================================== */

.qty-input {
    width: 60px;
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
}

.qty-input-sm {
    width: 36px;
    text-align: center;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 4px;
    font-size: 13px;
    background: white;
}

.qty-btn {
    width: 28px;
    height: 28px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:hover {
    background: #f9fafb;
}

.qty-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.qty-btn i {
    font-size: 9px;
    color: #6b7280;
}

.qty-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.btn-remove {
    background: #fee2e2;
    color: #dc2626;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

.btn-remove:hover {
    background: #fecaca;
}

.btn-remove-circle {
    background: #fee2e2;
    color: #dc2626;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove-circle:hover {
    background: #fecaca;
}

.btn-remove-circle i {
    font-size: 13px;
}

.btn-remove-icon {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    flex-shrink: 0;
}

.btn-remove-icon:hover {
    color: #6b7280;
}

.btn-add-text {
    margin-top: 8px;
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-add-text i {
    font-size: 10px;
}

.attendee-input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
}

.attendee-display {
    padding: 8px 10px;
    background: #f9fafb;
    border-radius: 6px;
    font-size: 13px;
    color: #374151;
}

.input-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.input-row-md {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-row-lg {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ========================================
   PRODUCT/TICKET LIST STYLES
   ======================================== */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.product-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.product-image {
    height: 140px;
    background-size: cover;
    background-position: center;
}

.product-image-placeholder {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image-placeholder i {
    font-size: 32px;
    color: white;
    opacity: 0.5;
}

.product-body {
    padding: 16px;
}

.product-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 12px;
}

.product-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 16px;
}

.product-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-meta-row i {
    color: #9ca3af;
    width: 16px;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-price {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
}

.product-add-btn {
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

/* ========================================
   BOLT-ON STYLES
   ======================================== */

.bolton-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    background: #f9fafb;
    border-radius: 6px;
}

.bolton-info {
    flex: 1;
    min-width: 0;
}

.bolton-name {
    font-size: 13px;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bolton-price {
    font-size: 13px;
    color: #6b7280;
}

.bolton-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: #f9fafb;
    border-radius: 6px;
}

.bolton-summary-name {
    font-size: 13px;
    color: #1f2937;
}

.bolton-summary-total {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}

/* ========================================
   EPOINTS PANEL
   ======================================== */

.epoints-panel {
    background: #fef3c7;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.epoints-applied {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.epoints-applied i {
    color: #f59e0b;
}

.epoints-applied span {
    font-weight: 600;
    color: #92400e;
}

.epoints-available {
    text-align: center;
}

.epoints-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.epoints-message i {
    color: #f59e0b;
}

.epoints-message span {
    font-weight: 600;
    color: #92400e;
}

.epoints-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f59e0b;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.epoints-btn:hover {
    background: #d97706;
    color: white;
    text-decoration: none;
}

/* ========================================
   PAYMENT SCHEDULE
   ======================================== */

.payment-schedule {
    background: #f9fafb;
    border-radius: 8px;
    overflow: hidden;
}

.payment-schedule-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.payment-schedule-item:last-child {
    border-bottom: none;
}

.payment-schedule-name {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}

.payment-schedule-method {
    font-size: 13px;
    color: #6b7280;
}

.payment-schedule-amount {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.payment-schedule-date {
    font-size: 13px;
    color: #6b7280;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.flex-center {
    display: flex;
    align-items: center;
}

.gap-12 {
    gap: 12px;
}

.mt-6 {
    margin-top: 6px;
}

/* ========================================
   PAGE HEADER STYLES
   ======================================== */

.page-header {
    margin-bottom: 20px;
    padding: 0 16px;
}

.page-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-header-icon i {
    font-size: 20px;
    color: white;
}

.page-header-title {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.page-header-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 4px 0 0;
}

/* ========================================
   ACTIVITY CARD STYLES
   ======================================== */

.activity-section {
    margin-bottom: 32px;
    padding: 0 16px;
}

.activity-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 8px;
}

.activity-section-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 16px;
}

.activity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (min-width: 640px) {
    .activity-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .activity-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.activity-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.activity-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    text-decoration: none;
}

.activity-card-locked {
    opacity: 0.8;
}

.activity-card-image {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
}

.activity-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-card-placeholder i {
    font-size: 32px;
    color: white;
    opacity: 0.7;
}

.activity-card-content {
    padding: 12px;
    flex: 1;
}

.activity-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px;
    line-height: 1.3;
}

.activity-card-desc {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.activity-card-footer {
    padding: 0 12px 12px;
}

.activity-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: white;
}

.activity-card-badge i {
    font-size: 10px;
}

.activity-card-badge-locked {
    background: #9ca3af;
}

/* ========================================
   PAGE WIDTH CONSTRAINTS
   ======================================== */

.wrapper {
    background-color: #f5f5f5;
}
/* Global page width constraint for member area - applies to all pages */
.memberarea .page-wrapper {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   DESKTOP RESPONSIVE STYLES
   ======================================== */

/* Desktop improvements - only constrain specific elements */
@media (min-width: 768px) {
    .cart-container {
        max-width: 800px;
        margin: 0 auto;
    }

    .cart-items-stack {
        gap: 16px;
    }

    .booking-card {
        border: 1px solid #e5e7eb;
    }

    .booking-card-header {
        align-items: center;
    }

    .booking-thumb {
        width: 100px;
        min-height: 80px;
    }

    .booking-info {
        padding: 16px;
    }

    .booking-attendees {
        padding: 12px 16px;
    }

    .cart-body {
        padding: 24px;
    }

    .cart-header {
        padding: 20px 24px;
    }

    .page-header-content {
        gap: 16px;
    }

    .page-header-icon {
        width: 56px;
        height: 56px;
    }

    .page-header-icon i {
        font-size: 24px;
    }

    .page-header-title {
        font-size: 28px;
    }
}

@media (min-width: 1024px) {
    .cart-container {
        max-width: 900px;
    }

    .booking-thumb {
        width: 120px;
        min-height: 90px;
    }
}

/* ========================================
   MODERN SIDEBAR STYLES
   ======================================== */

.modern-sidebar {
    background: #ffffff !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12) !important;
    width: 300px !important;
    padding-top: 0 !important;
    z-index: 1030 !important;
    overflow: visible !important;
}

.modern-sidebar .sidebar-top {
    position: relative;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f3f4f6;
}

.modern-sidebar .sidebar-close {
    position: absolute;
    top: 20px;
    right: -40px !important;
    width: 40px;
    height: 40px;
    border-radius: 0 8px 8px 0;
    background: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #6b7280;
    box-shadow: 6px 4px 12px rgba(0, 0, 0, 0.15);
    clip-path: inset(-20px -20px -20px 0);
    transition: all 0.2s ease;
    z-index: 10;
}

.modern-sidebar .sidebar-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.modern-sidebar .sidebar-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 40px;
}

.modern-sidebar .sidebar-profile-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 1.3rem;
}

.modern-sidebar .sidebar-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modern-sidebar .sidebar-profile-info {
    flex: 1;
    min-width: 0;
}

.modern-sidebar .sidebar-profile-name {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-sidebar .sidebar-profile-email {
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-sidebar .sidebar-club-name {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 12px;
}

.modern-sidebar .modern-nav {
    padding: 0 12px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.modern-sidebar .nav-divider {
    height: 1px;
    background: #f3f4f6;
    margin: 12px 12px;
    list-style: none;
}

.modern-sidebar .nav-section-title {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 12px 6px;
    list-style: none;
}

.modern-sidebar .nav-item {
    list-style: none;
}

.modern-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #374151 !important;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    margin: 2px 0;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.modern-sidebar .nav-link:hover {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
}

.modern-sidebar .nav-link.active {
    background: transparent !important;
    color: #374151 !important;
}

.modern-sidebar .nav-link .nav-icon {
    width: 20px;
    font-size: 16px;
    text-align: center;
    color: #6b7280 !important;
    transition: color 0.2s ease;
}

.modern-sidebar .nav-link:hover .nav-icon {
    color: #374151 !important;
}

.modern-sidebar .nav-link.active .nav-icon {
    color: #6b7280 !important;
}

.modern-sidebar .nav-link-logout {
    color: #dc2626 !important;
}

.modern-sidebar .nav-link-logout .nav-icon {
    color: #dc2626 !important;
}

.modern-sidebar .nav-link-logout:hover {
    background: #fef2f2 !important;
}

.modern-sidebar .sidebar-badge {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: auto;
    min-width: 22px;
    text-align: center;
}

.modern-sidebar .sidebar-footer {
    margin-top: auto;
    padding: 16px 24px;
    font-size: 11px;
    color: #9ca3af;
    border-top: 1px solid #f3f4f6;
}

/* Override CoreUI sidebar variables for light theme */
.sidebar.sidebar-light.modern-sidebar {
    --cui-sidebar-bg: #ffffff;
    --cui-sidebar-header-bg: #ffffff;
    --cui-sidebar-footer-bg: #ffffff;
    --cui-sidebar-nav-link-color: #374151;
    --cui-sidebar-nav-link-icon-color: #6b7280;
    --cui-sidebar-nav-link-active-color: #374151;
    --cui-sidebar-nav-link-active-icon-color: #6b7280;
    --cui-sidebar-nav-link-active-bg: transparent;
    --cui-sidebar-nav-link-hover-color: #1f2937;
    --cui-sidebar-nav-link-hover-bg: #f3f4f6;
    --cui-sidebar-brand-color: #1f2937;
    --cui-sidebar-brand-bg: #ffffff;
}

/* Ensure sidebar properly hides when closed - override CoreUI's 16rem margin */
html:not([dir=rtl]) .sidebar:not(.show).sidebar-self-hiding.modern-sidebar:not(.sidebar-end) {
    margin-left: -300px !important;
}

*[dir=rtl] .sidebar:not(.show).sidebar-self-hiding.modern-sidebar:not(.sidebar-end) {
    margin-right: -300px !important;
}

.modern-sidebar.hide {
    margin-left: -300px !important;
}

/* Ensure clean transition */
.modern-sidebar {
    transition: margin-left 0.3s ease, margin-right 0.3s ease, visibility 0.3s ease;
}

.modern-sidebar:not(.show) {
    visibility: hidden;
}

.modern-sidebar.show {
    visibility: visible;
}

/* Hide CoreUI sidebar-backdrop completely - we use our own .sidebar-overlay instead */
.sidebar-backdrop,
.sidebar-backdrop.show,
.sidebar-backdrop.fade.show {
    display: none !important;
}

/* Sidebar overlay - blurs page content when sidebar is open */
/* z-index must be lower than mobile-bottom-nav (1040) so nav stays on top */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1020;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: pointer;
}

.sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   ADDRESS LOOKUP STYLES
   ======================================== */

.address-lookup {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.address-lookup-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.address-lookup-header i {
    color: #6b7280;
}

.address-lookup-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.address-lookup-input {
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    width: 100%;
}

.address-lookup-manual {
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    text-decoration: none;
}

.address-lookup-manual:hover {
    color: #374151;
    text-decoration: underline;
}

.address-lookup-manual i {
    font-size: 13px;
}

.address-lookup-manual.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.address-lookup-manual.enabled {
    pointer-events: auto;
    opacity: 1;
}

/* Date of Birth Picker */
.dob-picker-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.dob-select {
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 15px;
}

@media (max-width: 480px) {
    .dob-picker-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.dob-display {
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: #f9fafb;
    color: #374151;
}

.dob-not-set {
    color: #9ca3af;
}

/* Profile Form - Mobile-friendly layout */
.profile-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-form-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.profile-form-input {
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 15px;
    width: 100%;
}

.profile-form-input:disabled {
    background: #f9fafb;
}

.profile-form-input-readonly {
    background: #f9fafb;
}

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

@media (max-width: 480px) {
    .profile-form-row {
        grid-template-columns: 1fr;
    }
}

.profile-section-header {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    margin: 0 0 16px;
}

.profile-section-divider {
    border-top: 1px solid #e5e7eb;
    padding-top: 16px;
    margin-top: 8px;
}

.profile-checkbox {
    width: 20px;
    height: 20px;
}

.profile-form-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* MEMBERSHIP MODAL REDESIGN */

/* The 180px hero height feeds the admin plan-image preview's crop guide
   (.mpe-image-preview--wide in site.css, harness 42538) — change it there too. #42556 */
.membership-modal-hero {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
}

.membership-modal-content {
    padding: 20px 24px 24px;
}

.membership-modal-price {
    text-align: center;
    margin-bottom: 16px;
}

.membership-price-amount {
    font-size: 28px;
    font-weight: 700;
}

.membership-price-age {
    font-size: 16px;
    color: #6b7280;
    margin-left: 4px;
}

.membership-modal-summary {
    font-size: 15px;
    color: #6b7280;
    margin-bottom: 16px;
    line-height: 1.5;
    text-align: center;
}

.membership-modal-description {
    font-size: 14px;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 20px;
}

.membership-modal-description img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.membership-modal-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.membership-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}

.membership-cta-btn:hover {
    opacity: 0.9;
    text-decoration: none;
}

.membership-cta-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f3f4f6;
    color: #1f2937;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
}

.membership-cta-btn-secondary:hover {
    background: #e5e7eb;
    text-decoration: none;
    color: #1f2937;
}

.membership-modal-linked-text {
    font-size: 13px;
    color: #6b7280;
    text-align: center;
    margin: 8px 0;
}

/* Compact Feature Tags */
.membership-feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 16px 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
}

.membership-feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f3f4f6;
    color: #4b5563;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.membership-feature-tag i {
    font-size: 13px;
    opacity: 0.7;
}

/* Payment Schedule */
.membership-payment-schedule {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
}

.membership-payment-header {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.membership-payment-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
}

.membership-payment-row:last-child {
    border-bottom: none;
}

.membership-payment-row span:first-child {
    font-weight: 500;
    color: #1f2937;
}

.membership-payment-row span:last-child {
    color: #1f2937;
}

.membership-payment-row.membership-payment-ellipsis {
    justify-content: center;
    font-style: italic;
}

.membership-payment-row.membership-payment-ellipsis span {
    color: #9ca3af;
    font-weight: 400;
}