/*!
 * Start Bootstrap - SB Admin 2 v4.1.4 (https://startbootstrap.com/theme/sb-admin-2)
 * Copyright 2013-2021 Start Bootstrap
 * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin-2/blob/master/LICENSE)
 */

/*!
 * Bootstrap v4.6.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
  --blue: #4e73df;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #e74a3b;
  --orange: #fd7e14;
  --yellow: #f6c23e;
  --green: #1cc88a;
  --teal: #20c9a6;
  --cyan: #36b9cc;
  --white: #fff;
  --gray: #858796;
  --gray-dark: #5a5c69;
  --primary: #4e73df;
  --secondary: #858796;
  --success: #1cc88a;
  --info: #36b9cc;
  --warning: #f6c23e;
  --danger: #e74a3b;
  --light: #f8f9fc;
  --dark: #5a5c69;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

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

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #858796;
  text-align: left;
  background-color: #fff;
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

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

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

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

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

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

dt {
  font-weight: 700;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

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

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  color: #4e73df;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #224abe;
  text-decoration: underline;
}

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

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

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #858796;
  text-align: left;
  caption-side: bottom;
}

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

label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

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,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[role="button"] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}

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;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

textarea {
  overflow: auto;
  resize: vertical;
}

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

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

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

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

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

output {
  display: inline-block;
}

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

template {
  display: none;
}

[hidden] {
  display: none !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-weight: 400;
  line-height: 1.2;
}

h1, .h1 {
  font-size: 2.5rem;
}

h2, .h2 {
  font-size: 2rem;
}

h3, .h3 {
  font-size: 1.75rem;
}

h4, .h4 {
  font-size: 1.5rem;
}

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

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

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

.display-1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-2 {
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-3 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

small,
.small {
  font-size: 80%;
  font-weight: 400;
}

mark,
.mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}

.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}

.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.blockquote-footer {
  display: block;
  font-size: 80%;
  color: #858796;
}

.blockquote-footer::before {
  content: "\2014\00A0";
}

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

.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dddfeb;
  border-radius: 0.35rem;
  max-width: 100%;
  height: auto;
}

.figure {
  display: inline-block;
}

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

.figure-caption {
  font-size: 90%;
  color: #858796;
}

code {
  font-size: 87.5%;
  color: #e83e8c;
  word-wrap: break-word;
}

a > code {
  color: inherit;
}

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 87.5%;
  color: #fff;
  background-color: #3a3b45;
  border-radius: 0.2rem;
}

kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: 700;
}

pre {
  display: block;
  font-size: 87.5%;
  color: #3a3b45;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container, .container-sm {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container, .container-sm, .container-md {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

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

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

.row-cols-3 > * {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

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

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

.row-cols-6 > * {
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
}

.col-2 {
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.col-5 {
  flex: 0 0 41.66667%;
  max-width: 41.66667%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  flex: 0 0 58.33333%;
  max-width: 58.33333%;
}

.col-8 {
  flex: 0 0 66.66667%;
  max-width: 66.66667%;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.33333%;
  max-width: 83.33333%;
}

.col-11 {
  flex: 0 0 91.66667%;
  max-width: 91.66667%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.order-first {
  order: -1;
}

.order-last {
  order: 13;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-9 {
  order: 9;
}

.order-10 {
  order: 10;
}

.order-11 {
  order: 11;
}

.order-12 {
  order: 12;
}

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 576px) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-sm-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .col-sm-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .col-sm-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .col-sm-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .col-sm-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-sm-first {
    order: -1;
  }
  .order-sm-last {
    order: 13;
  }
  .order-sm-0 {
    order: 0;
  }
  .order-sm-1 {
    order: 1;
  }
  .order-sm-2 {
    order: 2;
  }
  .order-sm-3 {
    order: 3;
  }
  .order-sm-4 {
    order: 4;
  }
  .order-sm-5 {
    order: 5;
  }
  .order-sm-6 {
    order: 6;
  }
  .order-sm-7 {
    order: 7;
  }
  .order-sm-8 {
    order: 8;
  }
  .order-sm-9 {
    order: 9;
  }
  .order-sm-10 {
    order: 10;
  }
  .order-sm-11 {
    order: 11;
  }
  .order-sm-12 {
    order: 12;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333%;
  }
  .offset-sm-2 {
    margin-left: 16.66667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333%;
  }
  .offset-sm-5 {
    margin-left: 41.66667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.33333%;
  }
  .offset-sm-8 {
    margin-left: 66.66667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333%;
  }
  .offset-sm-11 {
    margin-left: 91.66667%;
  }
}

@media (min-width: 768px) {
  .col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-md-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-md-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .col-md-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .col-md-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .col-md-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .col-md-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-md-first {
    order: -1;
  }
  .order-md-last {
    order: 13;
  }
  .order-md-0 {
    order: 0;
  }
  .order-md-1 {
    order: 1;
  }
  .order-md-2 {
    order: 2;
  }
  .order-md-3 {
    order: 3;
  }
  .order-md-4 {
    order: 4;
  }
  .order-md-5 {
    order: 5;
  }
  .order-md-6 {
    order: 6;
  }
  .order-md-7 {
    order: 7;
  }
  .order-md-8 {
    order: 8;
  }
  .order-md-9 {
    order: 9;
  }
  .order-md-10 {
    order: 10;
  }
  .order-md-11 {
    order: 11;
  }
  .order-md-12 {
    order: 12;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.33333%;
  }
  .offset-md-2 {
    margin-left: 16.66667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.33333%;
  }
  .offset-md-5 {
    margin-left: 41.66667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.33333%;
  }
  .offset-md-8 {
    margin-left: 66.66667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.33333%;
  }
  .offset-md-11 {
    margin-left: 91.66667%;
  }
}

@media (min-width: 992px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-lg-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .col-lg-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .col-lg-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .col-lg-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .col-lg-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-lg-first {
    order: -1;
  }
  .order-lg-last {
    order: 13;
  }
  .order-lg-0 {
    order: 0;
  }
  .order-lg-1 {
    order: 1;
  }
  .order-lg-2 {
    order: 2;
  }
  .order-lg-3 {
    order: 3;
  }
  .order-lg-4 {
    order: 4;
  }
  .order-lg-5 {
    order: 5;
  }
  .order-lg-6 {
    order: 6;
  }
  .order-lg-7 {
    order: 7;
  }
  .order-lg-8 {
    order: 8;
  }
  .order-lg-9 {
    order: 9;
  }
  .order-lg-10 {
    order: 10;
  }
  .order-lg-11 {
    order: 11;
  }
  .order-lg-12 {
    order: 12;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.33333%;
  }
  .offset-lg-2 {
    margin-left: 16.66667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.33333%;
  }
  .offset-lg-5 {
    margin-left: 41.66667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.33333%;
  }
  .offset-lg-8 {
    margin-left: 66.66667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.33333%;
  }
  .offset-lg-11 {
    margin-left: 91.66667%;
  }
}

@media (min-width: 1200px) {
  .col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-xl-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-xl-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-xl-3 > * {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .row-cols-xl-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-xl-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-xl-6 > * {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-xl-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .col-xl-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .col-xl-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .col-xl-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .col-xl-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-xl-first {
    order: -1;
  }
  .order-xl-last {
    order: 13;
  }
  .order-xl-0 {
    order: 0;
  }
  .order-xl-1 {
    order: 1;
  }
  .order-xl-2 {
    order: 2;
  }
  .order-xl-3 {
    order: 3;
  }
  .order-xl-4 {
    order: 4;
  }
  .order-xl-5 {
    order: 5;
  }
  .order-xl-6 {
    order: 6;
  }
  .order-xl-7 {
    order: 7;
  }
  .order-xl-8 {
    order: 8;
  }
  .order-xl-9 {
    order: 9;
  }
  .order-xl-10 {
    order: 10;
  }
  .order-xl-11 {
    order: 11;
  }
  .order-xl-12 {
    order: 12;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.33333%;
  }
  .offset-xl-2 {
    margin-left: 16.66667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.33333%;
  }
  .offset-xl-5 {
    margin-left: 41.66667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.33333%;
  }
  .offset-xl-8 {
    margin-left: 66.66667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.33333%;
  }
  .offset-xl-11 {
    margin-left: 91.66667%;
  }
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #858796;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #e3e6f0;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #e3e6f0;
}

.table tbody + tbody {
  border-top: 2px solid #e3e6f0;
}

.table-sm th,
.table-sm td {
  padding: 0.3rem;
}

.table-bordered {
  border: 1px solid #e3e6f0;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #e3e6f0;
}

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.table-hover tbody tr:hover {
  color: #858796;
  background-color: rgba(0, 0, 0, 0.075);
}

.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: #cdd8f6;
}

.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
  border-color: #a3b6ee;
}

.table-hover .table-primary:hover {
  background-color: #b7c7f2;
}

.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
  background-color: #b7c7f2;
}

.table-secondary,
.table-secondary > th,
.table-secondary > td {
  background-color: #dddde2;
}

.table-secondary th,
.table-secondary td,
.table-secondary thead th,
.table-secondary tbody + tbody {
  border-color: #c0c1c8;
}

.table-hover .table-secondary:hover {
  background-color: #cfcfd6;
}

.table-hover .table-secondary:hover > td,
.table-hover .table-secondary:hover > th {
  background-color: #cfcfd6;
}

.table-success,
.table-success > th,
.table-success > td {
  background-color: #bff0de;
}

.table-success th,
.table-success td,
.table-success thead th,
.table-success tbody + tbody {
  border-color: #89e2c2;
}

.table-hover .table-success:hover {
  background-color: #aaebd3;
}

.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
  background-color: #aaebd3;
}

.table-info,
.table-info > th,
.table-info > td {
  background-color: #c7ebf1;
}

.table-info th,
.table-info td,
.table-info thead th,
.table-info tbody + tbody {
  border-color: #96dbe4;
}

.table-hover .table-info:hover {
  background-color: #b3e4ec;
}

.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
  background-color: #b3e4ec;
}

.table-warning,
.table-warning > th,
.table-warning > td {
  background-color: #fceec9;
}

.table-warning th,
.table-warning td,
.table-warning thead th,
.table-warning tbody + tbody {
  border-color: #fadf9b;
}

.table-hover .table-warning:hover {
  background-color: #fbe6b1;
}

.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
  background-color: #fbe6b1;
}

.table-danger,
.table-danger > th,
.table-danger > td {
  background-color: #f8ccc8;
}

.table-danger th,
.table-danger td,
.table-danger thead th,
.table-danger tbody + tbody {
  border-color: #f3a199;
}

.table-hover .table-danger:hover {
  background-color: #f5b7b1;
}

.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
  background-color: #f5b7b1;
}

.table-light,
.table-light > th,
.table-light > td {
  background-color: #fdfdfe;
}

.table-light th,
.table-light td,
.table-light thead th,
.table-light tbody + tbody {
  border-color: #fbfcfd;
}

.table-hover .table-light:hover {
  background-color: #ececf6;
}

.table-hover .table-light:hover > td,
.table-hover .table-light:hover > th {
  background-color: #ececf6;
}

.table-dark,
.table-dark > th,
.table-dark > td {
  background-color: #d1d1d5;
}

.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody + tbody {
  border-color: #a9aab1;
}

.table-hover .table-dark:hover {
  background-color: #c4c4c9;
}

.table-hover .table-dark:hover > td,
.table-hover .table-dark:hover > th {
  background-color: #c4c4c9;
}

.table-active,
.table-active > th,
.table-active > td {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
  background-color: rgba(0, 0, 0, 0.075);
}

.table .thead-dark th {
  color: #fff;
  background-color: #5a5c69;
  border-color: #6c6e7e;
}

.table .thead-light th {
  color: #6e707e;
  background-color: #eaecf4;
  border-color: #e3e6f0;
}

.table-dark {
  color: #fff;
  background-color: #5a5c69;
}

.table-dark th,
.table-dark td,
.table-dark thead th {
  border-color: #6c6e7e;
}

.table-dark.table-bordered {
  border: 0;
}

.table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

.table-dark.table-hover tbody tr:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.075);
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-sm > .table-bordered {
    border: 0;
  }
}

@media (max-width: 767.98px) {
  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-md > .table-bordered {
    border: 0;
  }
}

@media (max-width: 991.98px) {
  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-lg > .table-bordered {
    border: 0;
  }
}

@media (max-width: 1199.98px) {
  .table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-xl > .table-bordered {
    border: 0;
  }
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table-bordered {
  border: 0;
}

.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #6e707e;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #d1d3e2;
  border-radius: 0.35rem;
  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::-ms-expand {
  background-color: transparent;
  border: 0;
}

.form-control:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #6e707e;
}

.form-control:focus {
  color: #6e707e;
  background-color: #fff;
  border-color: #bac8f3;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.form-control::-webkit-input-placeholder {
  color: #858796;
  opacity: 1;
}

.form-control::-moz-placeholder {
  color: #858796;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #858796;
  opacity: 1;
}

.form-control::-ms-input-placeholder {
  color: #858796;
  opacity: 1;
}

.form-control::placeholder {
  color: #858796;
  opacity: 1;
}

.form-control:disabled, .form-control[readonly] {
  background-color: #eaecf4;
  opacity: 1;
}

input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.form-control:focus::-ms-value {
  color: #6e707e;
  background-color: #fff;
}

.form-control-file,
.form-control-range {
  display: block;
  width: 100%;
}

.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;
  line-height: 1.5;
}

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

.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #858796;
  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 {
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.form-control-lg {
  height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

select.form-control[size], select.form-control[multiple] {
  height: auto;
}

textarea.form-control {
  height: auto;
}

.form-group {
  margin-bottom: 1rem;
}

.form-text {
  display: block;
  margin-top: 0.25rem;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row > .col,
.form-row > [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

.form-check {
  position: relative;
  display: block;
  padding-left: 1.25rem;
}

.form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.25rem;
}

.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label {
  color: #858796;
}

.form-check-label {
  margin-bottom: 0;
}

.form-check-inline {
  display: inline-flex;
  align-items: center;
  padding-left: 0;
  margin-right: 0.75rem;
}

.form-check-inline .form-check-input {
  position: static;
  margin-top: 0;
  margin-right: 0.3125rem;
  margin-left: 0;
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #1cc88a;
}

.valid-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: .1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(28, 200, 138, 0.9);
  border-radius: 0.35rem;
}

.form-row > .col > .valid-tooltip,
.form-row > [class*="col-"] > .valid-tooltip {
  left: 5px;
}

.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: #1cc88a;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%231cc88a' 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);
}

.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
  border-color: #1cc88a;
  box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
}

.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .custom-select:valid, .custom-select.is-valid {
  border-color: #1cc88a;
  padding-right: calc(0.75em + 2.3125rem);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%235a5c69' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%231cc88a' 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") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
}

.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
  border-color: #1cc88a;
  box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
}

.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: #1cc88a;
}

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

.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
  color: #1cc88a;
}

.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
  border-color: #1cc88a;
}

.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
  border-color: #34e3a4;
  background-color: #34e3a4;
}

.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
}

.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #1cc88a;
}

.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
  border-color: #1cc88a;
}

.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
  border-color: #1cc88a;
  box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
}

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

.invalid-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: .1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(231, 74, 59, 0.9);
  border-radius: 0.35rem;
}

.form-row > .col > .invalid-tooltip,
.form-row > [class*="col-"] > .invalid-tooltip {
  left: 5px;
}

.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: #e74a3b;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e74a3b' viewBox='0 0 12 12'%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='%23e74a3b' 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);
}

.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  border-color: #e74a3b;
  box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
}

.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .custom-select:invalid, .custom-select.is-invalid {
  border-color: #e74a3b;
  padding-right: calc(0.75em + 2.3125rem);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%235a5c69' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e74a3b' viewBox='0 0 12 12'%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='%23e74a3b' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
}

.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
  border-color: #e74a3b;
  box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
}

.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
  color: #e74a3b;
}

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

.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
  color: #e74a3b;
}

.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
  border-color: #e74a3b;
}

.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
  border-color: #ed7468;
  background-color: #ed7468;
}

.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
}

.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #e74a3b;
}

.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
  border-color: #e74a3b;
}

.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
  border-color: #e74a3b;
  box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
}

.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.form-inline .form-check {
  width: 100%;
}

@media (min-width: 576px) {
  .form-inline label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .form-inline .form-group {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 0;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline .form-control-plaintext {
    display: inline-block;
  }
  .form-inline .input-group,
  .form-inline .custom-select {
    width: auto;
  }
  .form-inline .form-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding-left: 0;
  }
  .form-inline .form-check-input {
    position: relative;
    flex-shrink: 0;
    margin-top: 0;
    margin-right: 0.25rem;
    margin-left: 0;
  }
  .form-inline .custom-control {
    align-items: center;
    justify-content: center;
  }
  .form-inline .custom-control-label {
    margin-bottom: 0;
  }
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #858796;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.35rem;
  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: #858796;
  text-decoration: none;
}

.btn:focus, .btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.btn.disabled, .btn:disabled {
  opacity: 0.65;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}

.btn-primary {
  color: #fff;
  background-color: #4e73df;
  border-color: #4e73df;
}

.btn-primary:hover {
  color: #fff;
  background-color: #2e59d9;
  border-color: #2653d4;
}

.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: #2e59d9;
  border-color: #2653d4;
  box-shadow: 0 0 0 0.2rem rgba(105, 136, 228, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #4e73df;
  border-color: #4e73df;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #2653d4;
  border-color: #244ec9;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(105, 136, 228, 0.5);
}

.btn-secondary {
  color: #fff;
  background-color: #858796;
  border-color: #858796;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #717384;
  border-color: #6b6d7d;
}

.btn-secondary:focus, .btn-secondary.focus {
  color: #fff;
  background-color: #717384;
  border-color: #6b6d7d;
  box-shadow: 0 0 0 0.2rem rgba(151, 153, 166, 0.5);
}

.btn-secondary.disabled, .btn-secondary:disabled {
  color: #fff;
  background-color: #858796;
  border-color: #858796;
}

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #6b6d7d;
  border-color: #656776;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(151, 153, 166, 0.5);
}

.btn-success {
  color: #fff;
  background-color: #1cc88a;
  border-color: #1cc88a;
}

.btn-success:hover {
  color: #fff;
  background-color: #17a673;
  border-color: #169b6b;
}

.btn-success:focus, .btn-success.focus {
  color: #fff;
  background-color: #17a673;
  border-color: #169b6b;
  box-shadow: 0 0 0 0.2rem rgba(62, 208, 156, 0.5);
}

.btn-success.disabled, .btn-success:disabled {
  color: #fff;
  background-color: #1cc88a;
  border-color: #1cc88a;
}

.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #169b6b;
  border-color: #149063;
}

.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(62, 208, 156, 0.5);
}

.btn-info {
  color: #fff;
  background-color: #36b9cc;
  border-color: #36b9cc;
}

.btn-info:hover {
  color: #fff;
  background-color: #2c9faf;
  border-color: #2a96a5;
}

.btn-info:focus, .btn-info.focus {
  color: #fff;
  background-color: #2c9faf;
  border-color: #2a96a5;
  box-shadow: 0 0 0 0.2rem rgba(84, 196, 212, 0.5);
}

.btn-info.disabled, .btn-info:disabled {
  color: #fff;
  background-color: #36b9cc;
  border-color: #36b9cc;
}

.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
  color: #fff;
  background-color: #2a96a5;
  border-color: #278c9b;
}

.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(84, 196, 212, 0.5);
}

.btn-warning {
  color: #fff;
  background-color: #f6c23e;
  border-color: #f6c23e;
}

.btn-warning:hover {
  color: #fff;
  background-color: #f4b619;
  border-color: #f4b30d;
}

.btn-warning:focus, .btn-warning.focus {
  color: #fff;
  background-color: #f4b619;
  border-color: #f4b30d;
  box-shadow: 0 0 0 0.2rem rgba(247, 203, 91, 0.5);
}

.btn-warning.disabled, .btn-warning:disabled {
  color: #fff;
  background-color: #f6c23e;
  border-color: #f6c23e;
}

.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
  color: #fff;
  background-color: #f4b30d;
  border-color: #e9aa0b;
}

.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(247, 203, 91, 0.5);
}

.btn-danger {
  color: #fff;
  background-color: #e74a3b;
  border-color: #e74a3b;
}

.btn-danger:hover {
  color: #fff;
  background-color: #e02d1b;
  border-color: #d52a1a;
}

.btn-danger:focus, .btn-danger.focus {
  color: #fff;
  background-color: #e02d1b;
  border-color: #d52a1a;
  box-shadow: 0 0 0 0.2rem rgba(235, 101, 88, 0.5);
}

.btn-danger.disabled, .btn-danger:disabled {
  color: #fff;
  background-color: #e74a3b;
  border-color: #e74a3b;
}

.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #d52a1a;
  border-color: #ca2819;
}

.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(235, 101, 88, 0.5);
}

.btn-light {
  color: #3a3b45;
  background-color: #f8f9fc;
  border-color: #f8f9fc;
}

.btn-light:hover {
  color: #3a3b45;
  background-color: #dde2f1;
  border-color: #d4daed;
}

.btn-light:focus, .btn-light.focus {
  color: #3a3b45;
  background-color: #dde2f1;
  border-color: #d4daed;
  box-shadow: 0 0 0 0.2rem rgba(220, 221, 225, 0.5);
}

.btn-light.disabled, .btn-light:disabled {
  color: #3a3b45;
  background-color: #f8f9fc;
  border-color: #f8f9fc;
}

.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle {
  color: #3a3b45;
  background-color: #d4daed;
  border-color: #cbd3e9;
}

.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 221, 225, 0.5);
}

.btn-dark {
  color: #fff;
  background-color: #5a5c69;
  border-color: #5a5c69;
}

.btn-dark:hover {
  color: #fff;
  background-color: #484a54;
  border-color: #42444e;
}

.btn-dark:focus, .btn-dark.focus {
  color: #fff;
  background-color: #484a54;
  border-color: #42444e;
  box-shadow: 0 0 0 0.2rem rgba(115, 116, 128, 0.5);
}

.btn-dark.disabled, .btn-dark:disabled {
  color: #fff;
  background-color: #5a5c69;
  border-color: #5a5c69;
}

.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
.show > .btn-dark.dropdown-toggle {
  color: #fff;
  background-color: #42444e;
  border-color: #3d3e47;
}

.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(115, 116, 128, 0.5);
}

.btn-outline-primary {
  color: #4e73df;
  border-color: #4e73df;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #4e73df;
  border-color: #4e73df;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.5);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #4e73df;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #4e73df;
  border-color: #4e73df;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.5);
}

.btn-outline-secondary {
  color: #858796;
  border-color: #858796;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #858796;
  border-color: #858796;
}

.btn-outline-secondary:focus, .btn-outline-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(133, 135, 150, 0.5);
}

.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
  color: #858796;
  background-color: transparent;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: #fff;
  background-color: #858796;
  border-color: #858796;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(133, 135, 150, 0.5);
}

.btn-outline-success {
  color: #1cc88a;
  border-color: #1cc88a;
}

.btn-outline-success:hover {
  color: #fff;
  background-color: #1cc88a;
  border-color: #1cc88a;
}

.btn-outline-success:focus, .btn-outline-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.5);
}

.btn-outline-success.disabled, .btn-outline-success:disabled {
  color: #1cc88a;
  background-color: transparent;
}

.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle {
  color: #fff;
  background-color: #1cc88a;
  border-color: #1cc88a;
}

.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.5);
}

.btn-outline-info {
  color: #36b9cc;
  border-color: #36b9cc;
}

.btn-outline-info:hover {
  color: #fff;
  background-color: #36b9cc;
  border-color: #36b9cc;
}

.btn-outline-info:focus, .btn-outline-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(54, 185, 204, 0.5);
}

.btn-outline-info.disabled, .btn-outline-info:disabled {
  color: #36b9cc;
  background-color: transparent;
}

.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
.show > .btn-outline-info.dropdown-toggle {
  color: #fff;
  background-color: #36b9cc;
  border-color: #36b9cc;
}

.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(54, 185, 204, 0.5);
}

.btn-outline-warning {
  color: #f6c23e;
  border-color: #f6c23e;
}

.btn-outline-warning:hover {
  color: #fff;
  background-color: #f6c23e;
  border-color: #f6c23e;
}

.btn-outline-warning:focus, .btn-outline-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(246, 194, 62, 0.5);
}

.btn-outline-warning.disabled, .btn-outline-warning:disabled {
  color: #f6c23e;
  background-color: transparent;
}

.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
  color: #fff;
  background-color: #f6c23e;
  border-color: #f6c23e;
}

.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(246, 194, 62, 0.5);
}

.btn-outline-danger {
  color: #e74a3b;
  border-color: #e74a3b;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #e74a3b;
  border-color: #e74a3b;
}

.btn-outline-danger:focus, .btn-outline-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.5);
}

.btn-outline-danger.disabled, .btn-outline-danger:disabled {
  color: #e74a3b;
  background-color: transparent;
}

.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
  color: #fff;
  background-color: #e74a3b;
  border-color: #e74a3b;
}

.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.5);
}

.btn-outline-light {
  color: #f8f9fc;
  border-color: #f8f9fc;
}

.btn-outline-light:hover {
  color: #3a3b45;
  background-color: #f8f9fc;
  border-color: #f8f9fc;
}

.btn-outline-light:focus, .btn-outline-light.focus {
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 252, 0.5);
}

.btn-outline-light.disabled, .btn-outline-light:disabled {
  color: #f8f9fc;
  background-color: transparent;
}

.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active,
.show > .btn-outline-light.dropdown-toggle {
  color: #3a3b45;
  background-color: #f8f9fc;
  border-color: #f8f9fc;
}

.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 252, 0.5);
}

.btn-outline-dark {
  color: #5a5c69;
  border-color: #5a5c69;
}

.btn-outline-dark:hover {
  color: #fff;
  background-color: #5a5c69;
  border-color: #5a5c69;
}

.btn-outline-dark:focus, .btn-outline-dark.focus {
  box-shadow: 0 0 0 0.2rem rgba(90, 92, 105, 0.5);
}

.btn-outline-dark.disabled, .btn-outline-dark:disabled {
  color: #5a5c69;
  background-color: transparent;
}

.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active,
.show > .btn-outline-dark.dropdown-toggle {
  color: #fff;
  background-color: #5a5c69;
  border-color: #5a5c69;
}

.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(90, 92, 105, 0.5);
}

.btn-link {
  font-weight: 400;
  color: #4e73df;
  text-decoration: none;
}

.btn-link:hover {
  color: #224abe;
  text-decoration: underline;
}

.btn-link:focus, .btn-link.focus {
  text-decoration: underline;
}

.btn-link:disabled, .btn-link.disabled {
  color: #858796;
  pointer-events: none;
}

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

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

.btn-block {
  display: block;
  width: 100%;
}

.btn-block + .btn-block {
  margin-top: 0.5rem;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}

.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 {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}

.dropup,
.dropright,
.dropdown,
.dropleft {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  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;
}

.dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 0.85rem;
  color: #858796;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #e3e6f0;
  border-radius: 0.35rem;
}

.dropdown-menu-left {
  right: auto;
  left: 0;
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}

@media (min-width: 576px) {
  .dropdown-menu-sm-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-sm-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 768px) {
  .dropdown-menu-md-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-md-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 992px) {
  .dropdown-menu-lg-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-lg-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 1200px) {
  .dropdown-menu-xl-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xl-right {
    right: 0;
    left: auto;
  }
}

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
}

.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  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;
}

.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 0.125rem;
}

.dropright .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  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;
}

.dropright .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-toggle::after {
  vertical-align: 0;
}

.dropleft .dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 0.125rem;
}

.dropleft .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}

.dropleft .dropdown-toggle::after {
  display: none;
}

.dropleft .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}

.dropleft .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropleft .dropdown-toggle::before {
  vertical-align: 0;
}

.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] {
  right: auto;
  bottom: auto;
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid #eaecf4;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #3a3b45;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item:hover, .dropdown-item:focus {
  color: #2e2f37;
  text-decoration: none;
  background-color: #eaecf4;
}

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #4e73df;
}

.dropdown-item.disabled, .dropdown-item:disabled {
  color: #b7b9cc;
  pointer-events: none;
  background-color: transparent;
}

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

.dropdown-header {
  display: block;
  padding: 0.5rem 1.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #858796;
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: 0.25rem 1.5rem;
  color: #3a3b45;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  flex: 1 1 auto;
}

.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover {
  z-index: 1;
}

.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
  z-index: 1;
}

.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.btn-toolbar .input-group {
  width: auto;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) {
  margin-left: -1px;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dropdown-toggle-split {
  padding-right: 0.5625rem;
  padding-left: 0.5625rem;
}

.dropdown-toggle-split::after,
.dropup .dropdown-toggle-split::after,
.dropright .dropdown-toggle-split::after {
  margin-left: 0;
}

.dropleft .dropdown-toggle-split::before {
  margin-right: 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 {
  flex-direction: column;
  align-items: flex-start;
  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:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.btn-group-toggle > .btn,
.btn-group-toggle > .btn-group > .btn {
  margin-bottom: 0;
}

.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn input[type="checkbox"],
.btn-group-toggle > .btn-group > .btn input[type="radio"],
.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control,
.input-group > .form-control-plaintext,
.input-group > .custom-select,
.input-group > .custom-file {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  margin-bottom: 0;
}

.input-group > .form-control + .form-control,
.input-group > .form-control + .custom-select,
.input-group > .form-control + .custom-file,
.input-group > .form-control-plaintext + .form-control,
.input-group > .form-control-plaintext + .custom-select,
.input-group > .form-control-plaintext + .custom-file,
.input-group > .custom-select + .form-control,
.input-group > .custom-select + .custom-select,
.input-group > .custom-select + .custom-file,
.input-group > .custom-file + .form-control,
.input-group > .custom-file + .custom-select,
.input-group > .custom-file + .custom-file {
  margin-left: -1px;
}

.input-group > .form-control:focus,
.input-group > .custom-select:focus,
.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label {
  z-index: 3;
}

.input-group > .custom-file .custom-file-input:focus {
  z-index: 4;
}

.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .custom-file {
  display: flex;
  align-items: center;
}

.input-group > .custom-file:not(:last-child) .custom-file-label,
.input-group > .custom-file:not(:first-child) .custom-file-label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group:not(.has-validation) > .form-control:not(:last-child),
.input-group:not(.has-validation) > .custom-select:not(:last-child),
.input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group.has-validation > .form-control:nth-last-child(n + 3),
.input-group.has-validation > .custom-select:nth-last-child(n + 3),
.input-group.has-validation > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group-prepend,
.input-group-append {
  display: flex;
}

.input-group-prepend .btn,
.input-group-append .btn {
  position: relative;
  z-index: 2;
}

.input-group-prepend .btn:focus,
.input-group-append .btn:focus {
  z-index: 3;
}

.input-group-prepend .btn + .btn,
.input-group-prepend .btn + .input-group-text,
.input-group-prepend .input-group-text + .input-group-text,
.input-group-prepend .input-group-text + .btn,
.input-group-append .btn + .btn,
.input-group-append .btn + .input-group-text,
.input-group-append .input-group-text + .input-group-text,
.input-group-append .input-group-text + .btn {
  margin-left: -1px;
}

.input-group-prepend {
  margin-right: -1px;
}

.input-group-append {
  margin-left: -1px;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #6e707e;
  text-align: center;
  white-space: nowrap;
  background-color: #eaecf4;
  border: 1px solid #d1d3e2;
  border-radius: 0.35rem;
}

.input-group-text input[type="radio"],
.input-group-text input[type="checkbox"] {
  margin-top: 0;
}

.input-group-lg > .form-control:not(textarea),
.input-group-lg > .custom-select {
  height: calc(1.5em + 1rem + 2px);
}

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

.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
  height: calc(1.5em + 0.5rem + 2px);
}

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

.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
  padding-right: 1.75rem;
}

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.custom-control {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

.custom-control-inline {
  display: inline-flex;
  margin-right: 1rem;
}

.custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #4e73df;
  background-color: #4e73df;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #bac8f3;
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  color: #fff;
  background-color: #e5ebfa;
  border-color: #e5ebfa;
}

.custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
  color: #858796;
}

.custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
  background-color: #eaecf4;
}

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}

.custom-control-label::before {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #b7b9cc solid 1px;
}

.custom-control-label::after {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background: 50% / 50% 50% no-repeat;
}

.custom-checkbox .custom-control-label::before {
  border-radius: 0.35rem;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #4e73df;
  background-color: #4e73df;
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(78, 115, 223, 0.5);
}

.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(78, 115, 223, 0.5);
}

.custom-radio .custom-control-label::before {
  border-radius: 50%;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(78, 115, 223, 0.5);
}

.custom-switch {
  padding-left: 2.25rem;
}

.custom-switch .custom-control-label::before {
  left: -2.25rem;
  width: 1.75rem;
  pointer-events: all;
  border-radius: 0.5rem;
}

.custom-switch .custom-control-label::after {
  top: calc(0.25rem + 2px);
  left: calc(-2.25rem + 2px);
  width: calc(1rem - 4px);
  height: calc(1rem - 4px);
  background-color: #b7b9cc;
  border-radius: 0.5rem;
  transition: transform 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) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff;
  transform: translateX(0.75rem);
}

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(78, 115, 223, 0.5);
}

.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #6e707e;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%235a5c69' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat;
  border: 1px solid #d1d3e2;
  border-radius: 0.35rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-select:focus {
  border-color: #bac8f3;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.custom-select:focus::-ms-value {
  color: #6e707e;
  background-color: #fff;
}

.custom-select[multiple], .custom-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 0.75rem;
  background-image: none;
}

.custom-select:disabled {
  color: #858796;
  background-color: #eaecf4;
}

.custom-select::-ms-expand {
  display: none;
}

.custom-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #6e707e;
}

.custom-select-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
}

.custom-select-lg {
  height: calc(1.5em + 1rem + 2px);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
}

.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin-bottom: 0;
}

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin: 0;
  overflow: hidden;
  opacity: 0;
}

.custom-file-input:focus ~ .custom-file-label {
  border-color: #bac8f3;
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.custom-file-input[disabled] ~ .custom-file-label,
.custom-file-input:disabled ~ .custom-file-label {
  background-color: #eaecf4;
}

.custom-file-input:lang(en) ~ .custom-file-label::after {
  content: "Browse";
}

.custom-file-input ~ .custom-file-label[data-browse]::after {
  content: attr(data-browse);
}

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  overflow: hidden;
  font-weight: 400;
  line-height: 1.5;
  color: #6e707e;
  background-color: #fff;
  border: 1px solid #d1d3e2;
  border-radius: 0.35rem;
}

.custom-file-label::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  height: calc(1.5em + 0.75rem);
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  color: #6e707e;
  content: "Browse";
  background-color: #eaecf4;
  border-left: inherit;
  border-radius: 0 0.35rem 0.35rem 0;
}

.custom-range {
  width: 100%;
  height: 1.4rem;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-range:focus {
  outline: 0;
}

.custom-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.custom-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.custom-range:focus::-ms-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.custom-range::-moz-focus-outer {
  border: 0;
}

.custom-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: #4e73df;
  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) {
  .custom-range::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none;
  }
}

.custom-range::-webkit-slider-thumb:active {
  background-color: #e5ebfa;
}

.custom-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dddfeb;
  border-color: transparent;
  border-radius: 1rem;
}

.custom-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #4e73df;
  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) {
  .custom-range::-moz-range-thumb {
    -moz-transition: none;
    transition: none;
  }
}

.custom-range::-moz-range-thumb:active {
  background-color: #e5ebfa;
}

.custom-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dddfeb;
  border-color: transparent;
  border-radius: 1rem;
}

.custom-range::-ms-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  margin-right: 0.2rem;
  margin-left: 0.2rem;
  background-color: #4e73df;
  border: 0;
  border-radius: 1rem;
  -ms-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;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-ms-thumb {
    -ms-transition: none;
    transition: none;
  }
}

.custom-range::-ms-thumb:active {
  background-color: #e5ebfa;
}

.custom-range::-ms-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: 0.5rem;
}

.custom-range::-ms-fill-lower {
  background-color: #dddfeb;
  border-radius: 1rem;
}

.custom-range::-ms-fill-upper {
  margin-right: 15px;
  background-color: #dddfeb;
  border-radius: 1rem;
}

.custom-range:disabled::-webkit-slider-thumb {
  background-color: #b7b9cc;
}

.custom-range:disabled::-webkit-slider-runnable-track {
  cursor: default;
}

.custom-range:disabled::-moz-range-thumb {
  background-color: #b7b9cc;
}

.custom-range:disabled::-moz-range-track {
  cursor: default;
}

.custom-range:disabled::-ms-thumb {
  background-color: #b7b9cc;
}

.custom-control-label::before,
.custom-file-label,
.custom-select {
  transition: 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) {
  .custom-control-label::before,
  .custom-file-label,
  .custom-select {
    transition: none;
  }
}

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}

.nav-link:hover, .nav-link:focus {
  text-decoration: none;
}

.nav-link.disabled {
  color: #858796;
  pointer-events: none;
  cursor: default;
}

.nav-tabs {
  border-bottom: 1px solid #dddfeb;
}

.nav-tabs .nav-link {
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-top-left-radius: 0.35rem;
  border-top-right-radius: 0.35rem;
}

.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  border-color: #eaecf4 #eaecf4 #dddfeb;
}

.nav-tabs .nav-link.disabled {
  color: #858796;
  background-color: transparent;
  border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #6e707e;
  background-color: #fff;
  border-color: #dddfeb #dddfeb #fff;
}

.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-pills .nav-link {
  border-radius: 0.35rem;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #4e73df;
}

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

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

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

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

.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

.navbar .container,
.navbar .container-fluid, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-brand:hover, .navbar-brand:focus {
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}

.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}

.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

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

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.35rem;
}

.navbar-toggler:hover, .navbar-toggler:focus {
  text-decoration: none;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: 50% / 100% 100% no-repeat;
}

.navbar-nav-scroll {
  max-height: 75vh;
  overflow-y: auto;
}

@media (max-width: 575.98px) {
  .navbar-expand-sm > .container,
  .navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    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 > .container,
  .navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl {
    flex-wrap: nowrap;
  }
  .navbar-expand-sm .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .navbar-expand-md > .container,
  .navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .navbar-expand-md {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    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 > .container,
  .navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl {
    flex-wrap: nowrap;
  }
  .navbar-expand-md .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    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 > .container,
  .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl {
    flex-wrap: nowrap;
  }
  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  .navbar-expand-xl > .container,
  .navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    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 > .container,
  .navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl {
    flex-wrap: nowrap;
  }
  .navbar-expand-xl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
}

.navbar-expand {
  flex-flow: row nowrap;
  justify-content: flex-start;
}

.navbar-expand > .container,
.navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl {
  padding-right: 0;
  padding-left: 0;
}

.navbar-expand .navbar-nav {
  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 > .container,
.navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl {
  flex-wrap: nowrap;
}

.navbar-expand .navbar-nav-scroll {
  overflow: visible;
}

.navbar-expand .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}

.navbar-expand .navbar-toggler {
  display: none;
}

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.5);
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.7);
}

.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
}

.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-text {
  color: rgba(0, 0, 0, 0.5);
}

.navbar-light .navbar-text a {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-dark .navbar-brand {
  color: #fff;
}

.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.75);
}

.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}

.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}

.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

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

.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-text a {
  color: #fff;
}

.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
  color: #fff;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e3e6f0;
  border-radius: 0.35rem;
}

.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.35rem - 1px);
  border-top-right-radius: calc(0.35rem - 1px);
}

.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: calc(0.35rem - 1px);
  border-bottom-left-radius: calc(0.35rem - 1px);
}

.card > .card-header + .list-group,
.card > .list-group + .card-footer {
  border-top: 0;
}

.card-body {
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
}

.card-title {
  margin-bottom: 0.75rem;
}

.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}

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

.card-link:hover {
  text-decoration: none;
}

.card-link + .card-link {
  margin-left: 1.25rem;
}

.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: #f8f9fc;
  border-bottom: 1px solid #e3e6f0;
}

.card-header:first-child {
  border-radius: calc(0.35rem - 1px) calc(0.35rem - 1px) 0 0;
}

.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: #f8f9fc;
  border-top: 1px solid #e3e6f0;
}

.card-footer:last-child {
  border-radius: 0 0 calc(0.35rem - 1px) calc(0.35rem - 1px);
}

.card-header-tabs {
  margin-right: -0.625rem;
  margin-bottom: -0.75rem;
  margin-left: -0.625rem;
  border-bottom: 0;
}

.card-header-pills {
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

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

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

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

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

.card-deck .card {
  margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
  .card-deck {
    display: flex;
    flex-flow: row wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
  }
  .card-deck .card {
    flex: 1 0 0%;
    margin-right: 0.75rem;
    margin-bottom: 0;
    margin-left: 0.75rem;
  }
}

.card-group > .card {
  margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
  .card-group {
    display: flex;
    flex-flow: row wrap;
  }
  .card-group > .card {
    flex: 1 0 0%;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-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;
  }
  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-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;
  }
}

.card-columns .card {
  margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
  .card-columns {
    -moz-column-count: 3;
    column-count: 3;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }
  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

.accordion {
  overflow-anchor: none;
}

.accordion > .card {
  overflow: hidden;
}

.accordion > .card:not(:last-of-type) {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion > .card:not(:first-of-type) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.accordion > .card > .card-header {
  border-radius: 0;
  margin-bottom: -1px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #eaecf4;
  border-radius: 0.35rem;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: 0.5rem;
  color: #858796;
  content: "/";
}

.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: underline;
}

.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #858796;
}

.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.35rem;
}

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #4e73df;
  background-color: #fff;
  border: 1px solid #dddfeb;
}

.page-link:hover {
  z-index: 2;
  color: #224abe;
  text-decoration: none;
  background-color: #eaecf4;
  border-color: #dddfeb;
}

.page-link:focus {
  z-index: 3;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.35rem;
  border-bottom-left-radius: 0.35rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0.35rem;
  border-bottom-right-radius: 0.35rem;
}

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #4e73df;
  border-color: #4e73df;
}

.page-item.disabled .page-link {
  color: #858796;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #dddfeb;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}

.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}

.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.35rem;
  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) {
  .badge {
    transition: none;
  }
}

a.badge:hover, a.badge:focus {
  text-decoration: none;
}

.badge:empty {
  display: none;
}

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

.badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}

.badge-primary {
  color: #fff;
  background-color: #4e73df;
}

a.badge-primary:hover, a.badge-primary:focus {
  color: #fff;
  background-color: #2653d4;
}

a.badge-primary:focus, a.badge-primary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.5);
}

.badge-secondary {
  color: #fff;
  background-color: #858796;
}

a.badge-secondary:hover, a.badge-secondary:focus {
  color: #fff;
  background-color: #6b6d7d;
}

a.badge-secondary:focus, a.badge-secondary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(133, 135, 150, 0.5);
}

.badge-success {
  color: #fff;
  background-color: #1cc88a;
}

a.badge-success:hover, a.badge-success:focus {
  color: #fff;
  background-color: #169b6b;
}

a.badge-success:focus, a.badge-success.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.5);
}

.badge-info {
  color: #fff;
  background-color: #36b9cc;
}

a.badge-info:hover, a.badge-info:focus {
  color: #fff;
  background-color: #2a96a5;
}

a.badge-info:focus, a.badge-info.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(54, 185, 204, 0.5);
}

.badge-warning {
  color: #fff;
  background-color: #f6c23e;
}

a.badge-warning:hover, a.badge-warning:focus {
  color: #fff;
  background-color: #f4b30d;
}

a.badge-warning:focus, a.badge-warning.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(246, 194, 62, 0.5);
}

.badge-danger {
  color: #fff;
  background-color: #e74a3b;
}

a.badge-danger:hover, a.badge-danger:focus {
  color: #fff;
  background-color: #d52a1a;
}

a.badge-danger:focus, a.badge-danger.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.5);
}

.badge-light {
  color: #3a3b45;
  background-color: #f8f9fc;
}

a.badge-light:hover, a.badge-light:focus {
  color: #3a3b45;
  background-color: #d4daed;
}

a.badge-light:focus, a.badge-light.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 252, 0.5);
}

.badge-dark {
  color: #fff;
  background-color: #5a5c69;
}

a.badge-dark:hover, a.badge-dark:focus {
  color: #fff;
  background-color: #42444e;
}

a.badge-dark:focus, a.badge-dark.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(90, 92, 105, 0.5);
}

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #eaecf4;
  border-radius: 0.3rem;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.35rem;
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

.alert-dismissible {
  padding-right: 4rem;
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0.75rem 1.25rem;
  color: inherit;
}

.alert-primary {
  color: #293c74;
  background-color: #dce3f9;
  border-color: #cdd8f6;
}

.alert-primary hr {
  border-top-color: #b7c7f2;
}

.alert-primary .alert-link {
  color: #1c294e;
}

.alert-secondary {
  color: #45464e;
  background-color: #e7e7ea;
  border-color: #dddde2;
}

.alert-secondary hr {
  border-top-color: #cfcfd6;
}

.alert-secondary .alert-link {
  color: #2d2e33;
}

.alert-success {
  color: #0f6848;
  background-color: #d2f4e8;
  border-color: #bff0de;
}

.alert-success hr {
  border-top-color: #aaebd3;
}

.alert-success .alert-link {
  color: #093b29;
}

.alert-info {
  color: #1c606a;
  background-color: #d7f1f5;
  border-color: #c7ebf1;
}

.alert-info hr {
  border-top-color: #b3e4ec;
}

.alert-info .alert-link {
  color: #113b42;
}

.alert-warning {
  color: #806520;
  background-color: #fdf3d8;
  border-color: #fceec9;
}

.alert-warning hr {
  border-top-color: #fbe6b1;
}

.alert-warning .alert-link {
  color: #574516;
}

.alert-danger {
  color: #78261f;
  background-color: #fadbd8;
  border-color: #f8ccc8;
}

.alert-danger hr {
  border-top-color: #f5b7b1;
}

.alert-danger .alert-link {
  color: #4f1915;
}

.alert-light {
  color: #818183;
  background-color: #fefefe;
  border-color: #fdfdfe;
}

.alert-light hr {
  border-top-color: #ececf6;
}

.alert-light .alert-link {
  color: #686869;
}

.alert-dark {
  color: #2f3037;
  background-color: #dedee1;
  border-color: #d1d1d5;
}

.alert-dark hr {
  border-top-color: #c4c4c9;
}

.alert-dark .alert-link {
  color: #18181c;
}

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

@keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}

.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  line-height: 0;
  font-size: 0.75rem;
  background-color: #eaecf4;
  border-radius: 0.35rem;
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #4e73df;
  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;
  }
}

.media {
  display: flex;
  align-items: flex-start;
}

.media-body {
  flex: 1;
}

.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: 0.35rem;
}

.list-group-item-action {
  width: 100%;
  color: #6e707e;
  text-align: inherit;
}

.list-group-item-action:hover, .list-group-item-action:focus {
  z-index: 1;
  color: #6e707e;
  text-decoration: none;
  background-color: #f8f9fc;
}

.list-group-item-action:active {
  color: #858796;
  background-color: #eaecf4;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 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: #858796;
  pointer-events: none;
  background-color: #fff;
}

.list-group-item.active {
  z-index: 2;
  color: #fff;
  background-color: #4e73df;
  border-color: #4e73df;
}

.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 {
  flex-direction: row;
}

.list-group-horizontal > .list-group-item:first-child {
  border-bottom-left-radius: 0.35rem;
  border-top-right-radius: 0;
}

.list-group-horizontal > .list-group-item:last-child {
  border-top-right-radius: 0.35rem;
  border-bottom-left-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;
  border-left-width: 0;
}

.list-group-horizontal > .list-group-item + .list-group-item.active {
  margin-left: -1px;
  border-left-width: 1px;
}

@media (min-width: 576px) {
  .list-group-horizontal-sm {
    flex-direction: row;
  }
  .list-group-horizontal-sm > .list-group-item:first-child {
    border-bottom-left-radius: 0.35rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-sm > .list-group-item:last-child {
    border-top-right-radius: 0.35rem;
    border-bottom-left-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;
    border-left-width: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

@media (min-width: 768px) {
  .list-group-horizontal-md {
    flex-direction: row;
  }
  .list-group-horizontal-md > .list-group-item:first-child {
    border-bottom-left-radius: 0.35rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-md > .list-group-item:last-child {
    border-top-right-radius: 0.35rem;
    border-bottom-left-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;
    border-left-width: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

@media (min-width: 992px) {
  .list-group-horizontal-lg {
    flex-direction: row;
  }
  .list-group-horizontal-lg > .list-group-item:first-child {
    border-bottom-left-radius: 0.35rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-lg > .list-group-item:last-child {
    border-top-right-radius: 0.35rem;
    border-bottom-left-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;
    border-left-width: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    flex-direction: row;
  }
  .list-group-horizontal-xl > .list-group-item:first-child {
    border-bottom-left-radius: 0.35rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xl > .list-group-item:last-child {
    border-top-right-radius: 0.35rem;
    border-bottom-left-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;
    border-left-width: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-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 {
  color: #293c74;
  background-color: #cdd8f6;
}

.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
  color: #293c74;
  background-color: #b7c7f2;
}

.list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: #293c74;
  border-color: #293c74;
}

.list-group-item-secondary {
  color: #45464e;
  background-color: #dddde2;
}

.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
  color: #45464e;
  background-color: #cfcfd6;
}

.list-group-item-secondary.list-group-item-action.active {
  color: #fff;
  background-color: #45464e;
  border-color: #45464e;
}

.list-group-item-success {
  color: #0f6848;
  background-color: #bff0de;
}

.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
  color: #0f6848;
  background-color: #aaebd3;
}

.list-group-item-success.list-group-item-action.active {
  color: #fff;
  background-color: #0f6848;
  border-color: #0f6848;
}

.list-group-item-info {
  color: #1c606a;
  background-color: #c7ebf1;
}

.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
  color: #1c606a;
  background-color: #b3e4ec;
}

.list-group-item-info.list-group-item-action.active {
  color: #fff;
  background-color: #1c606a;
  border-color: #1c606a;
}

.list-group-item-warning {
  color: #806520;
  background-color: #fceec9;
}

.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
  color: #806520;
  background-color: #fbe6b1;
}

.list-group-item-warning.list-group-item-action.active {
  color: #fff;
  background-color: #806520;
  border-color: #806520;
}

.list-group-item-danger {
  color: #78261f;
  background-color: #f8ccc8;
}

.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
  color: #78261f;
  background-color: #f5b7b1;
}

.list-group-item-danger.list-group-item-action.active {
  color: #fff;
  background-color: #78261f;
  border-color: #78261f;
}

.list-group-item-light {
  color: #818183;
  background-color: #fdfdfe;
}

.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
  color: #818183;
  background-color: #ececf6;
}

.list-group-item-light.list-group-item-action.active {
  color: #fff;
  background-color: #818183;
  border-color: #818183;
}

.list-group-item-dark {
  color: #2f3037;
  background-color: #d1d1d5;
}

.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
  color: #2f3037;
  background-color: #c4c4c9;
}

.list-group-item-dark.list-group-item-action.active {
  color: #fff;
  background-color: #2f3037;
  border-color: #2f3037;
}

.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}

.close:hover {
  color: #000;
  text-decoration: none;
}

.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
  opacity: .75;
}

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
}

a.close.disabled {
  pointer-events: none;
}

.toast {
  flex-basis: 350px;
  max-width: 350px;
  font-size: 0.875rem;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  opacity: 0;
  border-radius: 0.25rem;
}

.toast:not(:last-child) {
  margin-bottom: 0.75rem;
}

.toast.showing {
  opacity: 1;
}

.toast.show {
  display: block;
  opacity: 1;
}

.toast.hide {
  display: none;
}

.toast-header {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  color: #858796;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.toast-body {
  padding: 0.75rem;
}

.modal-open {
  overflow: hidden;
}

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

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}

.modal.show .modal-dialog {
  transform: none;
}

.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  display: flex;
  max-height: calc(100% - 1rem);
}

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

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

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

.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  content: "";
}

.modal-dialog-centered.modal-dialog-scrollable {
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: none;
}

.modal-dialog-centered.modal-dialog-scrollable::before {
  content: none;
}

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

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #e3e6f0;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}

.modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
}

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

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

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem;
  border-top: 1px solid #e3e6f0;
  border-bottom-right-radius: calc(0.3rem - 1px);
  border-bottom-left-radius: calc(0.3rem - 1px);
}

.modal-footer > * {
  margin: 0.25rem;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
  .modal-dialog-scrollable {
    max-height: calc(100% - 3.5rem);
  }
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
  }
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
  .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
  }
  .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;
  }
}

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  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 .arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}

.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
  padding: 0.4rem 0;
}

.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
  bottom: 0;
}

.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  top: 0;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #000;
}

.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
  padding: 0 0.4rem;
}

.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
  left: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  right: 0;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #000;
}

.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
  padding: 0.4rem 0;
}

.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
  top: 0;
}

.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  bottom: 0;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #000;
}

.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
  padding: 0 0.4rem;
}

.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
  right: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  left: 0;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: #000;
}

.tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 0.35rem;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: block;
  max-width: 276px;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  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: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
}

.popover .arrow {
  position: absolute;
  display: block;
  width: 1rem;
  height: 0.5rem;
  margin: 0 0.3rem;
}

.popover .arrow::before, .popover .arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-popover-top, .bs-popover-auto[x-placement^="top"] {
  margin-bottom: 0.5rem;
}

.bs-popover-top > .arrow, .bs-popover-auto[x-placement^="top"] > .arrow {
  bottom: calc(-0.5rem - 1px);
}

.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before {
  bottom: 0;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after {
  bottom: 1px;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: #fff;
}

.bs-popover-right, .bs-popover-auto[x-placement^="right"] {
  margin-left: 0.5rem;
}

.bs-popover-right > .arrow, .bs-popover-auto[x-placement^="right"] > .arrow {
  left: calc(-0.5rem - 1px);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}

.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before {
  left: 0;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
  left: 1px;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: #fff;
}

.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] {
  margin-top: 0.5rem;
}

.bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^="bottom"] > .arrow {
  top: calc(-0.5rem - 1px);
}

.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before {
  top: 0;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
  top: 1px;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: #fff;
}

.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1rem;
  margin-left: -0.5rem;
  content: "";
  border-bottom: 1px solid #f7f7f7;
}

.bs-popover-left, .bs-popover-auto[x-placement^="left"] {
  margin-right: 0.5rem;
}

.bs-popover-left > .arrow, .bs-popover-auto[x-placement^="left"] > .arrow {
  right: calc(-0.5rem - 1px);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}

.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before {
  right: 0;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after {
  right: 1px;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: #fff;
}

.popover-header {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}

.popover-header:empty {
  display: none;
}

.popover-body {
  padding: 0.5rem 0.75rem;
  color: #858796;
}

.carousel {
  position: relative;
}

.carousel.pointer-event {
  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: 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;
}

.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
  transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
  transform: translateX(-100%);
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
  z-index: 1;
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0;
  opacity: 0;
  transition: opacity 0s 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-right {
    transition: none;
  }
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  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: #fff;
  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: 20px;
  height: 20px;
  background: 50% / 100% 100% no-repeat;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}

.carousel-indicators li {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: .5;
  transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-indicators li {
    transition: none;
  }
}

.carousel-indicators .active {
  opacity: 1;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

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

@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: .75s linear infinite spinner-border;
  animation: .75s linear infinite spinner-border;
}

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

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

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

.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: .75s linear infinite spinner-grow;
  animation: .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;
  }
}

.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;
}

.bg-primary {
  background-color: #4e73df !important;
}

a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: #2653d4 !important;
}

.bg-secondary {
  background-color: #858796 !important;
}

a.bg-secondary:hover, a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
  background-color: #6b6d7d !important;
}

.bg-success {
  background-color: #1cc88a !important;
}

a.bg-success:hover, a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
  background-color: #169b6b !important;
}

.bg-info {
  background-color: #36b9cc !important;
}

a.bg-info:hover, a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
  background-color: #2a96a5 !important;
}

.bg-warning {
  background-color: #f6c23e !important;
}

a.bg-warning:hover, a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
  background-color: #f4b30d !important;
}

.bg-danger {
  background-color: #e74a3b !important;
}

a.bg-danger:hover, a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
  background-color: #d52a1a !important;
}

.bg-light {
  background-color: #f8f9fc !important;
}

a.bg-light:hover, a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
  background-color: #d4daed !important;
}

.bg-dark {
  background-color: #5a5c69 !important;
}

a.bg-dark:hover, a.bg-dark:focus,
button.bg-dark:hover,
button.bg-dark:focus {
  background-color: #42444e !important;
}

.bg-white {
  background-color: #fff !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.border {
  border: 1px solid #e3e6f0 !important;
}

.border-top {
  border-top: 1px solid #e3e6f0 !important;
}

.border-right {
  border-right: 1px solid #e3e6f0 !important;
}

.border-bottom {
  border-bottom: 1px solid #e3e6f0 !important;
}

.border-left {
  border-left: 1px solid #e3e6f0 !important;
}

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

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

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

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

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

.border-primary {
  border-color: #4e73df !important;
}

.border-secondary {
  border-color: #858796 !important;
}

.border-success {
  border-color: #1cc88a !important;
}

.border-info {
  border-color: #36b9cc !important;
}

.border-warning {
  border-color: #f6c23e !important;
}

.border-danger {
  border-color: #e74a3b !important;
}

.border-light {
  border-color: #f8f9fc !important;
}

.border-dark {
  border-color: #5a5c69 !important;
}

.border-white {
  border-color: #fff !important;
}

.rounded-sm {
  border-radius: 0.2rem !important;
}

.rounded {
  border-radius: 0.35rem !important;
}

.rounded-top {
  border-top-left-radius: 0.35rem !important;
  border-top-right-radius: 0.35rem !important;
}

.rounded-right {
  border-top-right-radius: 0.35rem !important;
  border-bottom-right-radius: 0.35rem !important;
}

.rounded-bottom {
  border-bottom-right-radius: 0.35rem !important;
  border-bottom-left-radius: 0.35rem !important;
}

.rounded-left {
  border-top-left-radius: 0.35rem !important;
  border-bottom-left-radius: 0.35rem !important;
}

.rounded-lg {
  border-radius: 0.3rem !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: 50rem !important;
}

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !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: flex !important;
  }
  .d-sm-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !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: flex !important;
  }
  .d-md-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !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: flex !important;
  }
  .d-lg-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !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: flex !important;
  }
  .d-xl-inline-flex {
    display: inline-flex !important;
  }
}

@media print {
  .d-print-none {
    display: none !important;
  }
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !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: flex !important;
  }
  .d-print-inline-flex {
    display: inline-flex !important;
  }
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.85714%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

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

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

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

.align-self-stretch {
  align-self: stretch !important;
}

@media (min-width: 576px) {
  .flex-sm-row {
    flex-direction: row !important;
  }
  .flex-sm-column {
    flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .flex-sm-fill {
    flex: 1 1 auto !important;
  }
  .flex-sm-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-sm-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }
  .justify-content-sm-start {
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    justify-content: center !important;
  }
  .justify-content-sm-between {
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    justify-content: space-around !important;
  }
  .align-items-sm-start {
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    align-items: center !important;
  }
  .align-items-sm-baseline {
    align-items: baseline !important;
  }
  .align-items-sm-stretch {
    align-items: stretch !important;
  }
  .align-content-sm-start {
    align-content: flex-start !important;
  }
  .align-content-sm-end {
    align-content: flex-end !important;
  }
  .align-content-sm-center {
    align-content: center !important;
  }
  .align-content-sm-between {
    align-content: space-between !important;
  }
  .align-content-sm-around {
    align-content: space-around !important;
  }
  .align-content-sm-stretch {
    align-content: stretch !important;
  }
  .align-self-sm-auto {
    align-self: auto !important;
  }
  .align-self-sm-start {
    align-self: flex-start !important;
  }
  .align-self-sm-end {
    align-self: flex-end !important;
  }
  .align-self-sm-center {
    align-self: center !important;
  }
  .align-self-sm-baseline {
    align-self: baseline !important;
  }
  .align-self-sm-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 768px) {
  .flex-md-row {
    flex-direction: row !important;
  }
  .flex-md-column {
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-md-wrap {
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .flex-md-fill {
    flex: 1 1 auto !important;
  }
  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }
  .justify-content-md-start {
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    justify-content: center !important;
  }
  .justify-content-md-between {
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    justify-content: space-around !important;
  }
  .align-items-md-start {
    align-items: flex-start !important;
  }
  .align-items-md-end {
    align-items: flex-end !important;
  }
  .align-items-md-center {
    align-items: center !important;
  }
  .align-items-md-baseline {
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    align-items: stretch !important;
  }
  .align-content-md-start {
    align-content: flex-start !important;
  }
  .align-content-md-end {
    align-content: flex-end !important;
  }
  .align-content-md-center {
    align-content: center !important;
  }
  .align-content-md-between {
    align-content: space-between !important;
  }
  .align-content-md-around {
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    align-content: stretch !important;
  }
  .align-self-md-auto {
    align-self: auto !important;
  }
  .align-self-md-start {
    align-self: flex-start !important;
  }
  .align-self-md-end {
    align-self: flex-end !important;
  }
  .align-self-md-center {
    align-self: center !important;
  }
  .align-self-md-baseline {
    align-self: baseline !important;
  }
  .align-self-md-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 992px) {
  .flex-lg-row {
    flex-direction: row !important;
  }
  .flex-lg-column {
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .flex-lg-fill {
    flex: 1 1 auto !important;
  }
  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }
  .justify-content-lg-start {
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    justify-content: center !important;
  }
  .justify-content-lg-between {
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    justify-content: space-around !important;
  }
  .align-items-lg-start {
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    align-items: center !important;
  }
  .align-items-lg-baseline {
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    align-items: stretch !important;
  }
  .align-content-lg-start {
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    align-content: center !important;
  }
  .align-content-lg-between {
    align-content: space-between !important;
  }
  .align-content-lg-around {
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    align-content: stretch !important;
  }
  .align-self-lg-auto {
    align-self: auto !important;
  }
  .align-self-lg-start {
    align-self: flex-start !important;
  }
  .align-self-lg-end {
    align-self: flex-end !important;
  }
  .align-self-lg-center {
    align-self: center !important;
  }
  .align-self-lg-baseline {
    align-self: baseline !important;
  }
  .align-self-lg-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 1200px) {
  .flex-xl-row {
    flex-direction: row !important;
  }
  .flex-xl-column {
    flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .flex-xl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .justify-content-xl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    justify-content: center !important;
  }
  .justify-content-xl-between {
    justify-content: space-between !important;
  }
  .justify-content-xl-around {
    justify-content: space-around !important;
  }
  .align-items-xl-start {
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    align-items: center !important;
  }
  .align-items-xl-baseline {
    align-items: baseline !important;
  }
  .align-items-xl-stretch {
    align-items: stretch !important;
  }
  .align-content-xl-start {
    align-content: flex-start !important;
  }
  .align-content-xl-end {
    align-content: flex-end !important;
  }
  .align-content-xl-center {
    align-content: center !important;
  }
  .align-content-xl-between {
    align-content: space-between !important;
  }
  .align-content-xl-around {
    align-content: space-around !important;
  }
  .align-content-xl-stretch {
    align-content: stretch !important;
  }
  .align-self-xl-auto {
    align-self: auto !important;
  }
  .align-self-xl-start {
    align-self: flex-start !important;
  }
  .align-self-xl-end {
    align-self: flex-end !important;
  }
  .align-self-xl-center {
    align-self: center !important;
  }
  .align-self-xl-baseline {
    align-self: baseline !important;
  }
  .align-self-xl-stretch {
    align-self: stretch !important;
  }
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-none {
  float: none !important;
}

@media (min-width: 576px) {
  .float-sm-left {
    float: left !important;
  }
  .float-sm-right {
    float: right !important;
  }
  .float-sm-none {
    float: none !important;
  }
}

@media (min-width: 768px) {
  .float-md-left {
    float: left !important;
  }
  .float-md-right {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
}

@media (min-width: 992px) {
  .float-lg-left {
    float: left !important;
  }
  .float-lg-right {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .float-xl-left {
    float: left !important;
  }
  .float-xl-right {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
}

.user-select-all {
  -webkit-user-select: all !important;
  -moz-user-select: all !important;
  -ms-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;
}

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

.overflow-hidden {
  overflow: hidden !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;
}

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

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

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem 0 rgba(58, 59, 69, 0.2) !important;
}

.shadow {
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
}

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

.shadow-none {
  box-shadow: none !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;
}

.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;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

.vw-100 {
  width: 100vw !important;
}

.vh-100 {
  height: 100vh !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}

.m-n1 {
  margin: -0.25rem !important;
}

.mt-n1,
.my-n1 {
  margin-top: -0.25rem !important;
}

.mr-n1,
.mx-n1 {
  margin-right: -0.25rem !important;
}

.mb-n1,
.my-n1 {
  margin-bottom: -0.25rem !important;
}

.ml-n1,
.mx-n1 {
  margin-left: -0.25rem !important;
}

.m-n2 {
  margin: -0.5rem !important;
}

.mt-n2,
.my-n2 {
  margin-top: -0.5rem !important;
}

.mr-n2,
.mx-n2 {
  margin-right: -0.5rem !important;
}

.mb-n2,
.my-n2 {
  margin-bottom: -0.5rem !important;
}

.ml-n2,
.mx-n2 {
  margin-left: -0.5rem !important;
}

.m-n3 {
  margin: -1rem !important;
}

.mt-n3,
.my-n3 {
  margin-top: -1rem !important;
}

.mr-n3,
.mx-n3 {
  margin-right: -1rem !important;
}

.mb-n3,
.my-n3 {
  margin-bottom: -1rem !important;
}

.ml-n3,
.mx-n3 {
  margin-left: -1rem !important;
}

.m-n4 {
  margin: -1.5rem !important;
}

.mt-n4,
.my-n4 {
  margin-top: -1.5rem !important;
}

.mr-n4,
.mx-n4 {
  margin-right: -1.5rem !important;
}

.mb-n4,
.my-n4 {
  margin-bottom: -1.5rem !important;
}

.ml-n4,
.mx-n4 {
  margin-left: -1.5rem !important;
}

.m-n5 {
  margin: -3rem !important;
}

.mt-n5,
.my-n5 {
  margin-top: -3rem !important;
}

.mr-n5,
.mx-n5 {
  margin-right: -3rem !important;
}

.mb-n5,
.my-n5 {
  margin-bottom: -3rem !important;
}

.ml-n5,
.mx-n5 {
  margin-left: -3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0 !important;
  }
  .mt-sm-0,
  .my-sm-0 {
    margin-top: 0 !important;
  }
  .mr-sm-0,
  .mx-sm-0 {
    margin-right: 0 !important;
  }
  .mb-sm-0,
  .my-sm-0 {
    margin-bottom: 0 !important;
  }
  .ml-sm-0,
  .mx-sm-0 {
    margin-left: 0 !important;
  }
  .m-sm-1 {
    margin: 0.25rem !important;
  }
  .mt-sm-1,
  .my-sm-1 {
    margin-top: 0.25rem !important;
  }
  .mr-sm-1,
  .mx-sm-1 {
    margin-right: 0.25rem !important;
  }
  .mb-sm-1,
  .my-sm-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-sm-1,
  .mx-sm-1 {
    margin-left: 0.25rem !important;
  }
  .m-sm-2 {
    margin: 0.5rem !important;
  }
  .mt-sm-2,
  .my-sm-2 {
    margin-top: 0.5rem !important;
  }
  .mr-sm-2,
  .mx-sm-2 {
    margin-right: 0.5rem !important;
  }
  .mb-sm-2,
  .my-sm-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-sm-2,
  .mx-sm-2 {
    margin-left: 0.5rem !important;
  }
  .m-sm-3 {
    margin: 1rem !important;
  }
  .mt-sm-3,
  .my-sm-3 {
    margin-top: 1rem !important;
  }
  .mr-sm-3,
  .mx-sm-3 {
    margin-right: 1rem !important;
  }
  .mb-sm-3,
  .my-sm-3 {
    margin-bottom: 1rem !important;
  }
  .ml-sm-3,
  .mx-sm-3 {
    margin-left: 1rem !important;
  }
  .m-sm-4 {
    margin: 1.5rem !important;
  }
  .mt-sm-4,
  .my-sm-4 {
    margin-top: 1.5rem !important;
  }
  .mr-sm-4,
  .mx-sm-4 {
    margin-right: 1.5rem !important;
  }
  .mb-sm-4,
  .my-sm-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-sm-4,
  .mx-sm-4 {
    margin-left: 1.5rem !important;
  }
  .m-sm-5 {
    margin: 3rem !important;
  }
  .mt-sm-5,
  .my-sm-5 {
    margin-top: 3rem !important;
  }
  .mr-sm-5,
  .mx-sm-5 {
    margin-right: 3rem !important;
  }
  .mb-sm-5,
  .my-sm-5 {
    margin-bottom: 3rem !important;
  }
  .ml-sm-5,
  .mx-sm-5 {
    margin-left: 3rem !important;
  }
  .p-sm-0 {
    padding: 0 !important;
  }
  .pt-sm-0,
  .py-sm-0 {
    padding-top: 0 !important;
  }
  .pr-sm-0,
  .px-sm-0 {
    padding-right: 0 !important;
  }
  .pb-sm-0,
  .py-sm-0 {
    padding-bottom: 0 !important;
  }
  .pl-sm-0,
  .px-sm-0 {
    padding-left: 0 !important;
  }
  .p-sm-1 {
    padding: 0.25rem !important;
  }
  .pt-sm-1,
  .py-sm-1 {
    padding-top: 0.25rem !important;
  }
  .pr-sm-1,
  .px-sm-1 {
    padding-right: 0.25rem !important;
  }
  .pb-sm-1,
  .py-sm-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-sm-1,
  .px-sm-1 {
    padding-left: 0.25rem !important;
  }
  .p-sm-2 {
    padding: 0.5rem !important;
  }
  .pt-sm-2,
  .py-sm-2 {
    padding-top: 0.5rem !important;
  }
  .pr-sm-2,
  .px-sm-2 {
    padding-right: 0.5rem !important;
  }
  .pb-sm-2,
  .py-sm-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-sm-2,
  .px-sm-2 {
    padding-left: 0.5rem !important;
  }
  .p-sm-3 {
    padding: 1rem !important;
  }
  .pt-sm-3,
  .py-sm-3 {
    padding-top: 1rem !important;
  }
  .pr-sm-3,
  .px-sm-3 {
    padding-right: 1rem !important;
  }
  .pb-sm-3,
  .py-sm-3 {
    padding-bottom: 1rem !important;
  }
  .pl-sm-3,
  .px-sm-3 {
    padding-left: 1rem !important;
  }
  .p-sm-4 {
    padding: 1.5rem !important;
  }
  .pt-sm-4,
  .py-sm-4 {
    padding-top: 1.5rem !important;
  }
  .pr-sm-4,
  .px-sm-4 {
    padding-right: 1.5rem !important;
  }
  .pb-sm-4,
  .py-sm-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-sm-4,
  .px-sm-4 {
    padding-left: 1.5rem !important;
  }
  .p-sm-5 {
    padding: 3rem !important;
  }
  .pt-sm-5,
  .py-sm-5 {
    padding-top: 3rem !important;
  }
  .pr-sm-5,
  .px-sm-5 {
    padding-right: 3rem !important;
  }
  .pb-sm-5,
  .py-sm-5 {
    padding-bottom: 3rem !important;
  }
  .pl-sm-5,
  .px-sm-5 {
    padding-left: 3rem !important;
  }
  .m-sm-n1 {
    margin: -0.25rem !important;
  }
  .mt-sm-n1,
  .my-sm-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-sm-n1,
  .mx-sm-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-sm-n1,
  .my-sm-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-sm-n1,
  .mx-sm-n1 {
    margin-left: -0.25rem !important;
  }
  .m-sm-n2 {
    margin: -0.5rem !important;
  }
  .mt-sm-n2,
  .my-sm-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-sm-n2,
  .mx-sm-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-sm-n2,
  .my-sm-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-sm-n2,
  .mx-sm-n2 {
    margin-left: -0.5rem !important;
  }
  .m-sm-n3 {
    margin: -1rem !important;
  }
  .mt-sm-n3,
  .my-sm-n3 {
    margin-top: -1rem !important;
  }
  .mr-sm-n3,
  .mx-sm-n3 {
    margin-right: -1rem !important;
  }
  .mb-sm-n3,
  .my-sm-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-sm-n3,
  .mx-sm-n3 {
    margin-left: -1rem !important;
  }
  .m-sm-n4 {
    margin: -1.5rem !important;
  }
  .mt-sm-n4,
  .my-sm-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-sm-n4,
  .mx-sm-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-sm-n4,
  .my-sm-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-sm-n4,
  .mx-sm-n4 {
    margin-left: -1.5rem !important;
  }
  .m-sm-n5 {
    margin: -3rem !important;
  }
  .mt-sm-n5,
  .my-sm-n5 {
    margin-top: -3rem !important;
  }
  .mr-sm-n5,
  .mx-sm-n5 {
    margin-right: -3rem !important;
  }
  .mb-sm-n5,
  .my-sm-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-sm-n5,
  .mx-sm-n5 {
    margin-left: -3rem !important;
  }
  .m-sm-auto {
    margin: auto !important;
  }
  .mt-sm-auto,
  .my-sm-auto {
    margin-top: auto !important;
  }
  .mr-sm-auto,
  .mx-sm-auto {
    margin-right: auto !important;
  }
  .mb-sm-auto,
  .my-sm-auto {
    margin-bottom: auto !important;
  }
  .ml-sm-auto,
  .mx-sm-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 768px) {
  .m-md-0 {
    margin: 0 !important;
  }
  .mt-md-0,
  .my-md-0 {
    margin-top: 0 !important;
  }
  .mr-md-0,
  .mx-md-0 {
    margin-right: 0 !important;
  }
  .mb-md-0,
  .my-md-0 {
    margin-bottom: 0 !important;
  }
  .ml-md-0,
  .mx-md-0 {
    margin-left: 0 !important;
  }
  .m-md-1 {
    margin: 0.25rem !important;
  }
  .mt-md-1,
  .my-md-1 {
    margin-top: 0.25rem !important;
  }
  .mr-md-1,
  .mx-md-1 {
    margin-right: 0.25rem !important;
  }
  .mb-md-1,
  .my-md-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-md-1,
  .mx-md-1 {
    margin-left: 0.25rem !important;
  }
  .m-md-2 {
    margin: 0.5rem !important;
  }
  .mt-md-2,
  .my-md-2 {
    margin-top: 0.5rem !important;
  }
  .mr-md-2,
  .mx-md-2 {
    margin-right: 0.5rem !important;
  }
  .mb-md-2,
  .my-md-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-md-2,
  .mx-md-2 {
    margin-left: 0.5rem !important;
  }
  .m-md-3 {
    margin: 1rem !important;
  }
  .mt-md-3,
  .my-md-3 {
    margin-top: 1rem !important;
  }
  .mr-md-3,
  .mx-md-3 {
    margin-right: 1rem !important;
  }
  .mb-md-3,
  .my-md-3 {
    margin-bottom: 1rem !important;
  }
  .ml-md-3,
  .mx-md-3 {
    margin-left: 1rem !important;
  }
  .m-md-4 {
    margin: 1.5rem !important;
  }
  .mt-md-4,
  .my-md-4 {
    margin-top: 1.5rem !important;
  }
  .mr-md-4,
  .mx-md-4 {
    margin-right: 1.5rem !important;
  }
  .mb-md-4,
  .my-md-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-md-4,
  .mx-md-4 {
    margin-left: 1.5rem !important;
  }
  .m-md-5 {
    margin: 3rem !important;
  }
  .mt-md-5,
  .my-md-5 {
    margin-top: 3rem !important;
  }
  .mr-md-5,
  .mx-md-5 {
    margin-right: 3rem !important;
  }
  .mb-md-5,
  .my-md-5 {
    margin-bottom: 3rem !important;
  }
  .ml-md-5,
  .mx-md-5 {
    margin-left: 3rem !important;
  }
  .p-md-0 {
    padding: 0 !important;
  }
  .pt-md-0,
  .py-md-0 {
    padding-top: 0 !important;
  }
  .pr-md-0,
  .px-md-0 {
    padding-right: 0 !important;
  }
  .pb-md-0,
  .py-md-0 {
    padding-bottom: 0 !important;
  }
  .pl-md-0,
  .px-md-0 {
    padding-left: 0 !important;
  }
  .p-md-1 {
    padding: 0.25rem !important;
  }
  .pt-md-1,
  .py-md-1 {
    padding-top: 0.25rem !important;
  }
  .pr-md-1,
  .px-md-1 {
    padding-right: 0.25rem !important;
  }
  .pb-md-1,
  .py-md-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-md-1,
  .px-md-1 {
    padding-left: 0.25rem !important;
  }
  .p-md-2 {
    padding: 0.5rem !important;
  }
  .pt-md-2,
  .py-md-2 {
    padding-top: 0.5rem !important;
  }
  .pr-md-2,
  .px-md-2 {
    padding-right: 0.5rem !important;
  }
  .pb-md-2,
  .py-md-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-md-2,
  .px-md-2 {
    padding-left: 0.5rem !important;
  }
  .p-md-3 {
    padding: 1rem !important;
  }
  .pt-md-3,
  .py-md-3 {
    padding-top: 1rem !important;
  }
  .pr-md-3,
  .px-md-3 {
    padding-right: 1rem !important;
  }
  .pb-md-3,
  .py-md-3 {
    padding-bottom: 1rem !important;
  }
  .pl-md-3,
  .px-md-3 {
    padding-left: 1rem !important;
  }
  .p-md-4 {
    padding: 1.5rem !important;
  }
  .pt-md-4,
  .py-md-4 {
    padding-top: 1.5rem !important;
  }
  .pr-md-4,
  .px-md-4 {
    padding-right: 1.5rem !important;
  }
  .pb-md-4,
  .py-md-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-md-4,
  .px-md-4 {
    padding-left: 1.5rem !important;
  }
  .p-md-5 {
    padding: 3rem !important;
  }
  .pt-md-5,
  .py-md-5 {
    padding-top: 3rem !important;
  }
  .pr-md-5,
  .px-md-5 {
    padding-right: 3rem !important;
  }
  .pb-md-5,
  .py-md-5 {
    padding-bottom: 3rem !important;
  }
  .pl-md-5,
  .px-md-5 {
    padding-left: 3rem !important;
  }
  .m-md-n1 {
    margin: -0.25rem !important;
  }
  .mt-md-n1,
  .my-md-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-md-n1,
  .mx-md-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-md-n1,
  .my-md-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-md-n1,
  .mx-md-n1 {
    margin-left: -0.25rem !important;
  }
  .m-md-n2 {
    margin: -0.5rem !important;
  }
  .mt-md-n2,
  .my-md-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-md-n2,
  .mx-md-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-md-n2,
  .my-md-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-md-n2,
  .mx-md-n2 {
    margin-left: -0.5rem !important;
  }
  .m-md-n3 {
    margin: -1rem !important;
  }
  .mt-md-n3,
  .my-md-n3 {
    margin-top: -1rem !important;
  }
  .mr-md-n3,
  .mx-md-n3 {
    margin-right: -1rem !important;
  }
  .mb-md-n3,
  .my-md-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-md-n3,
  .mx-md-n3 {
    margin-left: -1rem !important;
  }
  .m-md-n4 {
    margin: -1.5rem !important;
  }
  .mt-md-n4,
  .my-md-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-md-n4,
  .mx-md-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-md-n4,
  .my-md-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-md-n4,
  .mx-md-n4 {
    margin-left: -1.5rem !important;
  }
  .m-md-n5 {
    margin: -3rem !important;
  }
  .mt-md-n5,
  .my-md-n5 {
    margin-top: -3rem !important;
  }
  .mr-md-n5,
  .mx-md-n5 {
    margin-right: -3rem !important;
  }
  .mb-md-n5,
  .my-md-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-md-n5,
  .mx-md-n5 {
    margin-left: -3rem !important;
  }
  .m-md-auto {
    margin: auto !important;
  }
  .mt-md-auto,
  .my-md-auto {
    margin-top: auto !important;
  }
  .mr-md-auto,
  .mx-md-auto {
    margin-right: auto !important;
  }
  .mb-md-auto,
  .my-md-auto {
    margin-bottom: auto !important;
  }
  .ml-md-auto,
  .mx-md-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 992px) {
  .m-lg-0 {
    margin: 0 !important;
  }
  .mt-lg-0,
  .my-lg-0 {
    margin-top: 0 !important;
  }
  .mr-lg-0,
  .mx-lg-0 {
    margin-right: 0 !important;
  }
  .mb-lg-0,
  .my-lg-0 {
    margin-bottom: 0 !important;
  }
  .ml-lg-0,
  .mx-lg-0 {
    margin-left: 0 !important;
  }
  .m-lg-1 {
    margin: 0.25rem !important;
  }
  .mt-lg-1,
  .my-lg-1 {
    margin-top: 0.25rem !important;
  }
  .mr-lg-1,
  .mx-lg-1 {
    margin-right: 0.25rem !important;
  }
  .mb-lg-1,
  .my-lg-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-lg-1,
  .mx-lg-1 {
    margin-left: 0.25rem !important;
  }
  .m-lg-2 {
    margin: 0.5rem !important;
  }
  .mt-lg-2,
  .my-lg-2 {
    margin-top: 0.5rem !important;
  }
  .mr-lg-2,
  .mx-lg-2 {
    margin-right: 0.5rem !important;
  }
  .mb-lg-2,
  .my-lg-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-lg-2,
  .mx-lg-2 {
    margin-left: 0.5rem !important;
  }
  .m-lg-3 {
    margin: 1rem !important;
  }
  .mt-lg-3,
  .my-lg-3 {
    margin-top: 1rem !important;
  }
  .mr-lg-3,
  .mx-lg-3 {
    margin-right: 1rem !important;
  }
  .mb-lg-3,
  .my-lg-3 {
    margin-bottom: 1rem !important;
  }
  .ml-lg-3,
  .mx-lg-3 {
    margin-left: 1rem !important;
  }
  .m-lg-4 {
    margin: 1.5rem !important;
  }
  .mt-lg-4,
  .my-lg-4 {
    margin-top: 1.5rem !important;
  }
  .mr-lg-4,
  .mx-lg-4 {
    margin-right: 1.5rem !important;
  }
  .mb-lg-4,
  .my-lg-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-lg-4,
  .mx-lg-4 {
    margin-left: 1.5rem !important;
  }
  .m-lg-5 {
    margin: 3rem !important;
  }
  .mt-lg-5,
  .my-lg-5 {
    margin-top: 3rem !important;
  }
  .mr-lg-5,
  .mx-lg-5 {
    margin-right: 3rem !important;
  }
  .mb-lg-5,
  .my-lg-5 {
    margin-bottom: 3rem !important;
  }
  .ml-lg-5,
  .mx-lg-5 {
    margin-left: 3rem !important;
  }
  .p-lg-0 {
    padding: 0 !important;
  }
  .pt-lg-0,
  .py-lg-0 {
    padding-top: 0 !important;
  }
  .pr-lg-0,
  .px-lg-0 {
    padding-right: 0 !important;
  }
  .pb-lg-0,
  .py-lg-0 {
    padding-bottom: 0 !important;
  }
  .pl-lg-0,
  .px-lg-0 {
    padding-left: 0 !important;
  }
  .p-lg-1 {
    padding: 0.25rem !important;
  }
  .pt-lg-1,
  .py-lg-1 {
    padding-top: 0.25rem !important;
  }
  .pr-lg-1,
  .px-lg-1 {
    padding-right: 0.25rem !important;
  }
  .pb-lg-1,
  .py-lg-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-lg-1,
  .px-lg-1 {
    padding-left: 0.25rem !important;
  }
  .p-lg-2 {
    padding: 0.5rem !important;
  }
  .pt-lg-2,
  .py-lg-2 {
    padding-top: 0.5rem !important;
  }
  .pr-lg-2,
  .px-lg-2 {
    padding-right: 0.5rem !important;
  }
  .pb-lg-2,
  .py-lg-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-lg-2,
  .px-lg-2 {
    padding-left: 0.5rem !important;
  }
  .p-lg-3 {
    padding: 1rem !important;
  }
  .pt-lg-3,
  .py-lg-3 {
    padding-top: 1rem !important;
  }
  .pr-lg-3,
  .px-lg-3 {
    padding-right: 1rem !important;
  }
  .pb-lg-3,
  .py-lg-3 {
    padding-bottom: 1rem !important;
  }
  .pl-lg-3,
  .px-lg-3 {
    padding-left: 1rem !important;
  }
  .p-lg-4 {
    padding: 1.5rem !important;
  }
  .pt-lg-4,
  .py-lg-4 {
    padding-top: 1.5rem !important;
  }
  .pr-lg-4,
  .px-lg-4 {
    padding-right: 1.5rem !important;
  }
  .pb-lg-4,
  .py-lg-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-lg-4,
  .px-lg-4 {
    padding-left: 1.5rem !important;
  }
  .p-lg-5 {
    padding: 3rem !important;
  }
  .pt-lg-5,
  .py-lg-5 {
    padding-top: 3rem !important;
  }
  .pr-lg-5,
  .px-lg-5 {
    padding-right: 3rem !important;
  }
  .pb-lg-5,
  .py-lg-5 {
    padding-bottom: 3rem !important;
  }
  .pl-lg-5,
  .px-lg-5 {
    padding-left: 3rem !important;
  }
  .m-lg-n1 {
    margin: -0.25rem !important;
  }
  .mt-lg-n1,
  .my-lg-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-lg-n1,
  .mx-lg-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-lg-n1,
  .my-lg-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-lg-n1,
  .mx-lg-n1 {
    margin-left: -0.25rem !important;
  }
  .m-lg-n2 {
    margin: -0.5rem !important;
  }
  .mt-lg-n2,
  .my-lg-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-lg-n2,
  .mx-lg-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-lg-n2,
  .my-lg-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-lg-n2,
  .mx-lg-n2 {
    margin-left: -0.5rem !important;
  }
  .m-lg-n3 {
    margin: -1rem !important;
  }
  .mt-lg-n3,
  .my-lg-n3 {
    margin-top: -1rem !important;
  }
  .mr-lg-n3,
  .mx-lg-n3 {
    margin-right: -1rem !important;
  }
  .mb-lg-n3,
  .my-lg-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-lg-n3,
  .mx-lg-n3 {
    margin-left: -1rem !important;
  }
  .m-lg-n4 {
    margin: -1.5rem !important;
  }
  .mt-lg-n4,
  .my-lg-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-lg-n4,
  .mx-lg-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-lg-n4,
  .my-lg-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-lg-n4,
  .mx-lg-n4 {
    margin-left: -1.5rem !important;
  }
  .m-lg-n5 {
    margin: -3rem !important;
  }
  .mt-lg-n5,
  .my-lg-n5 {
    margin-top: -3rem !important;
  }
  .mr-lg-n5,
  .mx-lg-n5 {
    margin-right: -3rem !important;
  }
  .mb-lg-n5,
  .my-lg-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-lg-n5,
  .mx-lg-n5 {
    margin-left: -3rem !important;
  }
  .m-lg-auto {
    margin: auto !important;
  }
  .mt-lg-auto,
  .my-lg-auto {
    margin-top: auto !important;
  }
  .mr-lg-auto,
  .mx-lg-auto {
    margin-right: auto !important;
  }
  .mb-lg-auto,
  .my-lg-auto {
    margin-bottom: auto !important;
  }
  .ml-lg-auto,
  .mx-lg-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }
  .mt-xl-0,
  .my-xl-0 {
    margin-top: 0 !important;
  }
  .mr-xl-0,
  .mx-xl-0 {
    margin-right: 0 !important;
  }
  .mb-xl-0,
  .my-xl-0 {
    margin-bottom: 0 !important;
  }
  .ml-xl-0,
  .mx-xl-0 {
    margin-left: 0 !important;
  }
  .m-xl-1 {
    margin: 0.25rem !important;
  }
  .mt-xl-1,
  .my-xl-1 {
    margin-top: 0.25rem !important;
  }
  .mr-xl-1,
  .mx-xl-1 {
    margin-right: 0.25rem !important;
  }
  .mb-xl-1,
  .my-xl-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-xl-1,
  .mx-xl-1 {
    margin-left: 0.25rem !important;
  }
  .m-xl-2 {
    margin: 0.5rem !important;
  }
  .mt-xl-2,
  .my-xl-2 {
    margin-top: 0.5rem !important;
  }
  .mr-xl-2,
  .mx-xl-2 {
    margin-right: 0.5rem !important;
  }
  .mb-xl-2,
  .my-xl-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-xl-2,
  .mx-xl-2 {
    margin-left: 0.5rem !important;
  }
  .m-xl-3 {
    margin: 1rem !important;
  }
  .mt-xl-3,
  .my-xl-3 {
    margin-top: 1rem !important;
  }
  .mr-xl-3,
  .mx-xl-3 {
    margin-right: 1rem !important;
  }
  .mb-xl-3,
  .my-xl-3 {
    margin-bottom: 1rem !important;
  }
  .ml-xl-3,
  .mx-xl-3 {
    margin-left: 1rem !important;
  }
  .m-xl-4 {
    margin: 1.5rem !important;
  }
  .mt-xl-4,
  .my-xl-4 {
    margin-top: 1.5rem !important;
  }
  .mr-xl-4,
  .mx-xl-4 {
    margin-right: 1.5rem !important;
  }
  .mb-xl-4,
  .my-xl-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-xl-4,
  .mx-xl-4 {
    margin-left: 1.5rem !important;
  }
  .m-xl-5 {
    margin: 3rem !important;
  }
  .mt-xl-5,
  .my-xl-5 {
    margin-top: 3rem !important;
  }
  .mr-xl-5,
  .mx-xl-5 {
    margin-right: 3rem !important;
  }
  .mb-xl-5,
  .my-xl-5 {
    margin-bottom: 3rem !important;
  }
  .ml-xl-5,
  .mx-xl-5 {
    margin-left: 3rem !important;
  }
  .p-xl-0 {
    padding: 0 !important;
  }
  .pt-xl-0,
  .py-xl-0 {
    padding-top: 0 !important;
  }
  .pr-xl-0,
  .px-xl-0 {
    padding-right: 0 !important;
  }
  .pb-xl-0,
  .py-xl-0 {
    padding-bottom: 0 !important;
  }
  .pl-xl-0,
  .px-xl-0 {
    padding-left: 0 !important;
  }
  .p-xl-1 {
    padding: 0.25rem !important;
  }
  .pt-xl-1,
  .py-xl-1 {
    padding-top: 0.25rem !important;
  }
  .pr-xl-1,
  .px-xl-1 {
    padding-right: 0.25rem !important;
  }
  .pb-xl-1,
  .py-xl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-xl-1,
  .px-xl-1 {
    padding-left: 0.25rem !important;
  }
  .p-xl-2 {
    padding: 0.5rem !important;
  }
  .pt-xl-2,
  .py-xl-2 {
    padding-top: 0.5rem !important;
  }
  .pr-xl-2,
  .px-xl-2 {
    padding-right: 0.5rem !important;
  }
  .pb-xl-2,
  .py-xl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-xl-2,
  .px-xl-2 {
    padding-left: 0.5rem !important;
  }
  .p-xl-3 {
    padding: 1rem !important;
  }
  .pt-xl-3,
  .py-xl-3 {
    padding-top: 1rem !important;
  }
  .pr-xl-3,
  .px-xl-3 {
    padding-right: 1rem !important;
  }
  .pb-xl-3,
  .py-xl-3 {
    padding-bottom: 1rem !important;
  }
  .pl-xl-3,
  .px-xl-3 {
    padding-left: 1rem !important;
  }
  .p-xl-4 {
    padding: 1.5rem !important;
  }
  .pt-xl-4,
  .py-xl-4 {
    padding-top: 1.5rem !important;
  }
  .pr-xl-4,
  .px-xl-4 {
    padding-right: 1.5rem !important;
  }
  .pb-xl-4,
  .py-xl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-xl-4,
  .px-xl-4 {
    padding-left: 1.5rem !important;
  }
  .p-xl-5 {
    padding: 3rem !important;
  }
  .pt-xl-5,
  .py-xl-5 {
    padding-top: 3rem !important;
  }
  .pr-xl-5,
  .px-xl-5 {
    padding-right: 3rem !important;
  }
  .pb-xl-5,
  .py-xl-5 {
    padding-bottom: 3rem !important;
  }
  .pl-xl-5,
  .px-xl-5 {
    padding-left: 3rem !important;
  }
  .m-xl-n1 {
    margin: -0.25rem !important;
  }
  .mt-xl-n1,
  .my-xl-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-xl-n1,
  .mx-xl-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-xl-n1,
  .my-xl-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-xl-n1,
  .mx-xl-n1 {
    margin-left: -0.25rem !important;
  }
  .m-xl-n2 {
    margin: -0.5rem !important;
  }
  .mt-xl-n2,
  .my-xl-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-xl-n2,
  .mx-xl-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-xl-n2,
  .my-xl-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-xl-n2,
  .mx-xl-n2 {
    margin-left: -0.5rem !important;
  }
  .m-xl-n3 {
    margin: -1rem !important;
  }
  .mt-xl-n3,
  .my-xl-n3 {
    margin-top: -1rem !important;
  }
  .mr-xl-n3,
  .mx-xl-n3 {
    margin-right: -1rem !important;
  }
  .mb-xl-n3,
  .my-xl-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-xl-n3,
  .mx-xl-n3 {
    margin-left: -1rem !important;
  }
  .m-xl-n4 {
    margin: -1.5rem !important;
  }
  .mt-xl-n4,
  .my-xl-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-xl-n4,
  .mx-xl-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-xl-n4,
  .my-xl-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-xl-n4,
  .mx-xl-n4 {
    margin-left: -1.5rem !important;
  }
  .m-xl-n5 {
    margin: -3rem !important;
  }
  .mt-xl-n5,
  .my-xl-n5 {
    margin-top: -3rem !important;
  }
  .mr-xl-n5,
  .mx-xl-n5 {
    margin-right: -3rem !important;
  }
  .mb-xl-n5,
  .my-xl-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-xl-n5,
  .mx-xl-n5 {
    margin-left: -3rem !important;
  }
  .m-xl-auto {
    margin: auto !important;
  }
  .mt-xl-auto,
  .my-xl-auto {
    margin-top: auto !important;
  }
  .mr-xl-auto,
  .mx-xl-auto {
    margin-right: auto !important;
  }
  .mb-xl-auto,
  .my-xl-auto {
    margin-bottom: auto !important;
  }
  .ml-xl-auto,
  .mx-xl-auto {
    margin-left: auto !important;
  }
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}

.text-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.text-justify {
  text-align: justify !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

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

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

@media (min-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }
  .text-sm-right {
    text-align: right !important;
  }
  .text-sm-center {
    text-align: center !important;
  }
}

@media (min-width: 768px) {
  .text-md-left {
    text-align: left !important;
  }
  .text-md-right {
    text-align: right !important;
  }
  .text-md-center {
    text-align: center !important;
  }
}

@media (min-width: 992px) {
  .text-lg-left {
    text-align: left !important;
  }
  .text-lg-right {
    text-align: right !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
}

@media (min-width: 1200px) {
  .text-xl-left {
    text-align: left !important;
  }
  .text-xl-right {
    text-align: right !important;
  }
  .text-xl-center {
    text-align: center !important;
  }
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase, .dropdown .dropdown-menu .dropdown-header, .sidebar .sidebar-heading {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.font-weight-light {
  font-weight: 300 !important;
}

.font-weight-lighter {
  font-weight: lighter !important;
}

.font-weight-normal {
  font-weight: 400 !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.font-weight-bolder {
  font-weight: bolder !important;
}

.font-italic {
  font-style: italic !important;
}

.text-white {
  color: #fff !important;
}

.text-primary {
  color: #4e73df !important;
}

a.text-primary:hover, a.text-primary:focus {
  color: #224abe !important;
}

.text-secondary {
  color: #858796 !important;
}

a.text-secondary:hover, a.text-secondary:focus {
  color: #60616f !important;
}

.text-success {
  color: #1cc88a !important;
}

a.text-success:hover, a.text-success:focus {
  color: #13855c !important;
}

.text-info {
  color: #36b9cc !important;
}

a.text-info:hover, a.text-info:focus {
  color: #258391 !important;
}

.text-warning {
  color: #f6c23e !important;
}

a.text-warning:hover, a.text-warning:focus {
  color: #dda20a !important;
}

.text-danger {
  color: #e74a3b !important;
}

a.text-danger:hover, a.text-danger:focus {
  color: #be2617 !important;
}

.text-light {
  color: #f8f9fc !important;
}

a.text-light:hover, a.text-light:focus {
  color: #c2cbe5 !important;
}

.text-dark {
  color: #5a5c69 !important;
}

a.text-dark:hover, a.text-dark:focus {
  color: #373840 !important;
}

.text-body {
  color: #858796 !important;
}

.text-muted {
  color: #858796 !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-break {
  word-break: break-word !important;
  word-wrap: break-word !important;
}

.text-reset {
  color: inherit !important;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

@media print {
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  a:not(.btn) {
    text-decoration: underline;
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #b7b9cc;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  @page {
    size: a3;
  }
  body {
    min-width: 992px !important;
  }
  .container {
    min-width: 992px !important;
  }
  .navbar {
    display: none;
  }
  .badge {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #dddfeb !important;
  }
  .table-dark {
    color: inherit;
  }
  .table-dark th,
  .table-dark td,
  .table-dark thead th,
  .table-dark tbody + tbody {
    border-color: #e3e6f0;
  }
  .table .thead-dark th {
    color: inherit;
    border-color: #e3e6f0;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  height: 100%;
}

a:focus {
  outline: none;
}

#wrapper {
  display: flex;
}

#wrapper #content-wrapper {
  background-color: #f8f9fc;
  width: 100%;
  overflow-x: hidden;
}

#wrapper #content-wrapper #content {
  flex: 1 0 auto;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.scroll-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  text-align: center;
  color: #fff;
  background: rgba(90, 92, 105, 0.5);
  line-height: 46px;
}

.scroll-to-top:focus, .scroll-to-top:hover {
  color: white;
}

.scroll-to-top:hover {
  background: #5a5c69;
}

.scroll-to-top i {
  font-weight: 800;
}

@-webkit-keyframes growIn {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes growIn {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animated--grow-in, .sidebar .nav-item .collapse {
  -webkit-animation-name: growIn;
  animation-name: growIn;
  -webkit-animation-duration: 200ms;
  animation-duration: 200ms;
  -webkit-animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
  animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animated--fade-in {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 200ms;
  animation-duration: 200ms;
  -webkit-animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
  animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
}

.bg-gradient-primary {
  background-color: #4e73df;
  background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
  background-size: cover;
}

.bg-gradient-secondary {
  background-color: #858796;
  background-image: linear-gradient(180deg, #858796 10%, #60616f 100%);
  background-size: cover;
}

.bg-gradient-success {
  background-color: #1cc88a;
  background-image: linear-gradient(180deg, #1cc88a 10%, #13855c 100%);
  background-size: cover;
}

.bg-gradient-info {
  background-color: #36b9cc;
  background-image: linear-gradient(180deg, #36b9cc 10%, #258391 100%);
  background-size: cover;
}

.bg-gradient-warning {
  background-color: #f6c23e;
  background-image: linear-gradient(180deg, #f6c23e 10%, #dda20a 100%);
  background-size: cover;
}

.bg-gradient-danger {
  background-color: #e74a3b;
  background-image: linear-gradient(180deg, #e74a3b 10%, #be2617 100%);
  background-size: cover;
}

.bg-gradient-light {
  background-color: #f8f9fc;
  background-image: linear-gradient(180deg, #f8f9fc 10%, #c2cbe5 100%);
  background-size: cover;
}

.bg-gradient-dark {
  background-color: #5a5c69;
  background-image: linear-gradient(180deg, #5a5c69 10%, #373840 100%);
  background-size: cover;
}

.bg-gray-100 {
  background-color: #f8f9fc !important;
}

.bg-gray-200 {
  background-color: #eaecf4 !important;
}

.bg-gray-300 {
  background-color: #dddfeb !important;
}

.bg-gray-400 {
  background-color: #d1d3e2 !important;
}

.bg-gray-500 {
  background-color: #b7b9cc !important;
}

.bg-gray-600 {
  background-color: #858796 !important;
}

.bg-gray-700 {
  background-color: #6e707e !important;
}

.bg-gray-800 {
  background-color: #5a5c69 !important;
}

.bg-gray-900 {
  background-color: #3a3b45 !important;
}

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

.text-xs {
  font-size: .7rem;
}

.text-lg {
  font-size: 1.2rem;
}

.text-gray-100 {
  color: #f8f9fc !important;
}

.text-gray-200 {
  color: #eaecf4 !important;
}

.text-gray-300 {
  color: #dddfeb !important;
}

.text-gray-400 {
  color: #d1d3e2 !important;
}

.text-gray-500 {
  color: #b7b9cc !important;
}

.text-gray-600 {
  color: #858796 !important;
}

.text-gray-700 {
  color: #6e707e !important;
}

.text-gray-800 {
  color: #5a5c69 !important;
}

.text-gray-900 {
  color: #3a3b45 !important;
}

.icon-circle {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.border-left-primary {
  border-left: 0.25rem solid #4e73df !important;
}

.border-bottom-primary {
  border-bottom: 0.25rem solid #4e73df !important;
}

.border-left-secondary {
  border-left: 0.25rem solid #858796 !important;
}

.border-bottom-secondary {
  border-bottom: 0.25rem solid #858796 !important;
}

.border-left-success {
  border-left: 0.25rem solid #1cc88a !important;
}

.border-bottom-success {
  border-bottom: 0.25rem solid #1cc88a !important;
}

.border-left-info {
  border-left: 0.25rem solid #36b9cc !important;
}

.border-bottom-info {
  border-bottom: 0.25rem solid #36b9cc !important;
}

.border-left-warning {
  border-left: 0.25rem solid #f6c23e !important;
}

.border-bottom-warning {
  border-bottom: 0.25rem solid #f6c23e !important;
}

.border-left-danger {
  border-left: 0.25rem solid #e74a3b !important;
}

.border-bottom-danger {
  border-bottom: 0.25rem solid #e74a3b !important;
}

.border-left-light {
  border-left: 0.25rem solid #f8f9fc !important;
}

.border-bottom-light {
  border-bottom: 0.25rem solid #f8f9fc !important;
}

.border-left-dark {
  border-left: 0.25rem solid #5a5c69 !important;
}

.border-bottom-dark {
  border-bottom: 0.25rem solid #5a5c69 !important;
}

.progress-sm {
  height: .5rem;
}

.rotate-15 {
  transform: rotate(15deg);
}

.rotate-n-15 {
  transform: rotate(-15deg);
}

.dropdown .dropdown-menu {
  font-size: 0.85rem;
}

.dropdown .dropdown-menu .dropdown-header {
  font-weight: 800;
  font-size: 0.65rem;
  color: #b7b9cc;
}

.dropdown.no-arrow .dropdown-toggle::after {
  display: none;
}

.sidebar .nav-item.dropdown .dropdown-toggle::after,
.topbar .nav-item.dropdown .dropdown-toggle::after {
  width: 1rem;
  text-align: center;
  float: right;
  vertical-align: 0;
  border: 0;
  font-weight: 900;
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
}

.sidebar .nav-item.dropdown.show .dropdown-toggle::after,
.topbar .nav-item.dropdown.show .dropdown-toggle::after {
  content: '\f107';
}

.sidebar .nav-item .nav-link,
.topbar .nav-item .nav-link {
  position: relative;
}

.sidebar .nav-item .nav-link .badge-counter,
.topbar .nav-item .nav-link .badge-counter {
  position: absolute;
  transform: scale(0.7);
  transform-origin: top right;
  right: .25rem;
  margin-top: -.25rem;
}

.sidebar .nav-item .nav-link .img-profile,
.topbar .nav-item .nav-link .img-profile {
  height: 2rem;
  width: 2rem;
}

.topbar {
  height: 4.375rem;
}

.topbar #sidebarToggleTop {
  height: 2.5rem;
  width: 2.5rem;
}

.topbar #sidebarToggleTop:hover {
  background-color: #eaecf4;
}

.topbar #sidebarToggleTop:active {
  background-color: #dddfeb;
}

.topbar .navbar-search {
  width: 25rem;
}

.topbar .navbar-search input {
  font-size: 0.85rem;
  height: auto;
}

.topbar .topbar-divider {
  width: 0;
  border-right: 1px solid #e3e6f0;
  height: calc(4.375rem - 2rem);
  margin: auto 1rem;
}

.topbar .nav-item .nav-link {
  height: 4.375rem;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
}

.topbar .nav-item .nav-link:focus {
  outline: none;
}

.topbar .nav-item:focus {
  outline: none;
}

.topbar .dropdown {
  position: static;
}

.topbar .dropdown .dropdown-menu {
  width: calc(100% - 1.5rem);
  right: 0.75rem;
}

.topbar .dropdown-list {
  padding: 0;
  border: none;
  overflow: hidden;
}

.topbar .dropdown-list .dropdown-header {
  background-color: #4e73df;
  border: 1px solid #4e73df;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #fff;
}

.topbar .dropdown-list .dropdown-item {
  white-space: normal;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-left: 1px solid #e3e6f0;
  border-right: 1px solid #e3e6f0;
  border-bottom: 1px solid #e3e6f0;
  line-height: 1.3rem;
}

.topbar .dropdown-list .dropdown-item .dropdown-list-image {
  position: relative;
  height: 2.5rem;
  width: 2.5rem;
}

.topbar .dropdown-list .dropdown-item .dropdown-list-image img {
  height: 2.5rem;
  width: 2.5rem;
}

.topbar .dropdown-list .dropdown-item .dropdown-list-image .status-indicator {
  background-color: #eaecf4;
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  border: 0.125rem solid #fff;
}

.topbar .dropdown-list .dropdown-item .text-truncate {
  max-width: 10rem;
}

.topbar .dropdown-list .dropdown-item:active {
  background-color: #eaecf4;
  color: #3a3b45;
}

@media (min-width: 576px) {
  .topbar .dropdown {
    position: relative;
  }
  .topbar .dropdown .dropdown-menu {
    width: auto;
    right: 0;
  }
  .topbar .dropdown-list {
    width: 20rem !important;
  }
  .topbar .dropdown-list .dropdown-item .text-truncate {
    max-width: 13.375rem;
  }
}

.topbar.navbar-dark .navbar-nav .nav-item .nav-link {
  color: rgba(255, 255, 255, 0.8);
}

.topbar.navbar-dark .navbar-nav .nav-item .nav-link:hover {
  color: #fff;
}

.topbar.navbar-dark .navbar-nav .nav-item .nav-link:active {
  color: #fff;
}

.topbar.navbar-light .navbar-nav .nav-item .nav-link {
  color: #d1d3e2;
}

.topbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
  color: #b7b9cc;
}

.topbar.navbar-light .navbar-nav .nav-item .nav-link:active {
  color: #858796;
}

.sidebar {
  width: 6.5rem;
  min-height: 100vh;
}

.sidebar .nav-item {
  position: relative;
}

.sidebar .nav-item:last-child {
  margin-bottom: 1rem;
}

.sidebar .nav-item .nav-link {
  text-align: center;
  padding: 0.75rem 1rem;
  width: 6.5rem;
}

.sidebar .nav-item .nav-link span {
  font-size: 0.65rem;
  display: block;
}

.sidebar .nav-item.active .nav-link {
  font-weight: 700;
}

.sidebar .nav-item .collapse {
  position: absolute;
  left: calc(6.5rem + 1.5rem / 2);
  z-index: 1;
  top: 2px;
}

.sidebar .nav-item .collapse .collapse-inner {
  border-radius: 0.35rem;
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.sidebar .nav-item .collapsing {
  display: none;
  transition: none;
}

.sidebar .nav-item .collapse .collapse-inner,
.sidebar .nav-item .collapsing .collapse-inner {
  padding: .5rem 0;
  min-width: 10rem;
  font-size: 0.85rem;
  margin: 0 0 1rem 0;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-header,
.sidebar .nav-item .collapsing .collapse-inner .collapse-header {
  margin: 0;
  white-space: nowrap;
  padding: .5rem 1.5rem;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.65rem;
  color: #b7b9cc;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item {
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
  display: block;
  color: #3a3b45;
  text-decoration: none;
  border-radius: 0.35rem;
  white-space: nowrap;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
  background-color: #eaecf4;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:active,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item:active {
  background-color: #dddfeb;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
  color: #4e73df;
  font-weight: 700;
}

.sidebar #sidebarToggle {
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  margin-bottom: 1rem;
  cursor: pointer;
}

.sidebar #sidebarToggle::after {
  font-weight: 900;
  content: '\f104';
  font-family: 'Font Awesome 5 Free';
  margin-right: 0.1rem;
}

.sidebar #sidebarToggle:hover {
  text-decoration: none;
}

.sidebar #sidebarToggle:focus {
  outline: none;
}

.sidebar.toggled {
  width: 0 !important;
  overflow: hidden;
}

.sidebar.toggled #sidebarToggle::after {
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
  margin-left: 0.25rem;
}

.sidebar.toggled .sidebar-card {
  display: none;
}

.sidebar .sidebar-brand {
  height: 4.375rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 800;
  padding: 1.5rem 1rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  z-index: 1;
}

.sidebar .sidebar-brand .sidebar-brand-icon i {
  font-size: 2rem;
}

.sidebar .sidebar-brand .sidebar-brand-text {
  display: none;
}

.sidebar hr.sidebar-divider {
  margin: 0 1rem 1rem;
}

.sidebar .sidebar-heading {
  text-align: center;
  padding: 0 1rem;
  font-weight: 800;
  font-size: 0.65rem;
}

.sidebar .sidebar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.875rem;
  border-radius: 0.35rem;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.1);
}

.sidebar .sidebar-card .sidebar-card-illustration {
  height: 3rem;
  display: block;
}

.sidebar .sidebar-card .sidebar-card-title {
  font-weight: bold;
}

.sidebar .sidebar-card p {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 768px) {
  .sidebar {
    width: 14rem !important;
  }
  .sidebar .nav-item .collapse {
    position: relative;
    left: 0;
    z-index: 1;
    top: 0;
    -webkit-animation: none;
    animation: none;
  }
  .sidebar .nav-item .collapse .collapse-inner {
    border-radius: 0;
    box-shadow: none;
  }
  .sidebar .nav-item .collapsing {
    display: block;
    transition: height 0.15s ease;
  }
  .sidebar .nav-item .collapse,
  .sidebar .nav-item .collapsing {
    margin: 0 1rem;
  }
  .sidebar .nav-item .nav-link {
    display: block;
    width: 100%;
    text-align: left;
    padding: 1rem;
    width: 14rem;
  }
  .sidebar .nav-item .nav-link i {
    font-size: 0.85rem;
    margin-right: 0.25rem;
  }
  .sidebar .nav-item .nav-link span {
    font-size: 0.85rem;
    display: inline;
  }
  .sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
    width: 1rem;
    text-align: center;
    float: right;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
  }
  .sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after {
    content: '\f105';
  }
  .sidebar .sidebar-brand .sidebar-brand-icon i {
    font-size: 2rem;
  }
  .sidebar .sidebar-brand .sidebar-brand-text {
    display: inline;
  }
  .sidebar .sidebar-heading {
    text-align: left;
  }
  .sidebar.toggled {
    overflow: visible;
    width: 6.5rem !important;
  }
  .sidebar.toggled .nav-item .collapse {
    position: absolute;
    left: calc(6.5rem + 1.5rem / 2);
    z-index: 1;
    top: 2px;
    -webkit-animation-name: growIn;
    animation-name: growIn;
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
    animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
  }
  .sidebar.toggled .nav-item .collapse .collapse-inner {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    border-radius: 0.35rem;
  }
  .sidebar.toggled .nav-item .collapsing {
    display: none;
    transition: none;
  }
  .sidebar.toggled .nav-item .collapse,
  .sidebar.toggled .nav-item .collapsing {
    margin: 0;
  }
  .sidebar.toggled .nav-item:last-child {
    margin-bottom: 1rem;
  }
  .sidebar.toggled .nav-item .nav-link {
    text-align: center;
    padding: 0.75rem 1rem;
    width: 6.5rem;
  }
  .sidebar.toggled .nav-item .nav-link span {
    font-size: 0.65rem;
    display: block;
  }
  .sidebar.toggled .nav-item .nav-link i {
    margin-right: 0;
  }
  .sidebar.toggled .nav-item .nav-link[data-toggle="collapse"]::after {
    display: none;
  }
  .sidebar.toggled .sidebar-brand .sidebar-brand-icon i {
    font-size: 2rem;
  }
  .sidebar.toggled .sidebar-brand .sidebar-brand-text {
    display: none;
  }
  .sidebar.toggled .sidebar-heading {
    text-align: center;
  }
}

.sidebar-light .sidebar-brand {
  color: #6e707e;
}

.sidebar-light hr.sidebar-divider {
  border-top: 1px solid #eaecf4;
}

.sidebar-light .sidebar-heading {
  color: #b7b9cc;
}

.sidebar-light .nav-item .nav-link {
  color: #858796;
}

.sidebar-light .nav-item .nav-link i {
  color: #d1d3e2;
}

.sidebar-light .nav-item .nav-link:active, .sidebar-light .nav-item .nav-link:focus, .sidebar-light .nav-item .nav-link:hover {
  color: #6e707e;
}

.sidebar-light .nav-item .nav-link:active i, .sidebar-light .nav-item .nav-link:focus i, .sidebar-light .nav-item .nav-link:hover i {
  color: #6e707e;
}

.sidebar-light .nav-item .nav-link[data-toggle="collapse"]::after {
  color: #b7b9cc;
}

.sidebar-light .nav-item.active .nav-link {
  color: #6e707e;
}

.sidebar-light .nav-item.active .nav-link i {
  color: #6e707e;
}

.sidebar-light #sidebarToggle {
  background-color: #eaecf4;
}

.sidebar-light #sidebarToggle::after {
  color: #b7b9cc;
}

.sidebar-light #sidebarToggle:hover {
  background-color: #dddfeb;
}

.sidebar-dark .sidebar-brand {
  color: #fff;
}

.sidebar-dark hr.sidebar-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar-dark .sidebar-heading {
  color: rgba(255, 255, 255, 0.4);
}

.sidebar-dark .nav-item .nav-link {
  color: rgba(255, 255, 255, 0.8);
}

.sidebar-dark .nav-item .nav-link i {
  color: rgba(255, 255, 255, 0.3);
}

.sidebar-dark .nav-item .nav-link:active, .sidebar-dark .nav-item .nav-link:focus, .sidebar-dark .nav-item .nav-link:hover {
  color: #fff;
}

.sidebar-dark .nav-item .nav-link:active i, .sidebar-dark .nav-item .nav-link:focus i, .sidebar-dark .nav-item .nav-link:hover i {
  color: #fff;
}

.sidebar-dark .nav-item .nav-link[data-toggle="collapse"]::after {
  color: rgba(255, 255, 255, 0.5);
}

.sidebar-dark .nav-item.active .nav-link {
  color: #fff;
}

.sidebar-dark .nav-item.active .nav-link i {
  color: #fff;
}

.sidebar-dark #sidebarToggle {
  background-color: rgba(255, 255, 255, 0.2);
}

.sidebar-dark #sidebarToggle::after {
  color: rgba(255, 255, 255, 0.5);
}

.sidebar-dark #sidebarToggle:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.sidebar-dark.toggled #sidebarToggle::after {
  color: rgba(255, 255, 255, 0.5);
}

.btn-circle {
  border-radius: 100%;
  height: 2.5rem;
  width: 2.5rem;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-circle.btn-sm, .btn-group-sm > .btn-circle.btn {
  height: 1.8rem;
  width: 1.8rem;
  font-size: 0.75rem;
}

.btn-circle.btn-lg, .btn-group-lg > .btn-circle.btn {
  height: 3.5rem;
  width: 3.5rem;
  font-size: 1.35rem;
}

.btn-icon-split {
  padding: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
}

.btn-icon-split .icon {
  background: rgba(0, 0, 0, 0.15);
  display: inline-block;
  padding: 0.375rem 0.75rem;
}

.btn-icon-split .text {
  display: inline-block;
  padding: 0.375rem 0.75rem;
}

.btn-icon-split.btn-sm .icon, .btn-group-sm > .btn-icon-split.btn .icon {
  padding: 0.25rem 0.5rem;
}

.btn-icon-split.btn-sm .text, .btn-group-sm > .btn-icon-split.btn .text {
  padding: 0.25rem 0.5rem;
}

.btn-icon-split.btn-lg .icon, .btn-group-lg > .btn-icon-split.btn .icon {
  padding: 0.5rem 1rem;
}

.btn-icon-split.btn-lg .text, .btn-group-lg > .btn-icon-split.btn .text {
  padding: 0.5rem 1rem;
}

.card .card-header .dropdown {
  line-height: 1;
}

.card .card-header .dropdown .dropdown-menu {
  line-height: 1.5;
}

.card .card-header[data-toggle="collapse"] {
  text-decoration: none;
  position: relative;
  padding: 0.75rem 3.25rem 0.75rem 1.25rem;
}

.card .card-header[data-toggle="collapse"]::after {
  position: absolute;
  right: 0;
  top: 0;
  padding-right: 1.725rem;
  line-height: 51px;
  font-weight: 900;
  content: '\f107';
  font-family: 'Font Awesome 5 Free';
  color: #d1d3e2;
}

.card .card-header[data-toggle="collapse"].collapsed {
  border-radius: 0.35rem;
}

.card .card-header[data-toggle="collapse"].collapsed::after {
  content: '\f105';
}

.chart-area {
  position: relative;
  height: 10rem;
  width: 100%;
}

@media (min-width: 768px) {
  .chart-area {
    height: 20rem;
  }
}

.chart-bar {
  position: relative;
  height: 10rem;
  width: 100%;
}

@media (min-width: 768px) {
  .chart-bar {
    height: 20rem;
  }
}

.chart-pie {
  position: relative;
  height: 15rem;
  width: 100%;
}

@media (min-width: 768px) {
  .chart-pie {
    height: calc(20rem - 43px) !important;
  }
}

.bg-login-image {
  background: url("https://source.unsplash.com/K4mSJ7kc0As/600x800");
  background-position: center;
  background-size: cover;
}

.bg-register-image {
  background: url("https://source.unsplash.com/Mv9hjnEUHR4/600x800");
  background-position: center;
  background-size: cover;
}

.bg-password-image {
  background: url("https://source.unsplash.com/oWTW-jNGl9I/600x800");
  background-position: center;
  background-size: cover;
}

form.user .custom-checkbox.small label {
  line-height: 1.5rem;
}

form.user .form-control-user {
  font-size: 0.8rem;
  border-radius: 10rem;
  padding: 1.5rem 1rem;
}

form.user .btn-user {
  font-size: 0.8rem;
  border-radius: 10rem;
  padding: 0.75rem 1rem;
}

.btn-google {
  color: #fff;
  background-color: #ea4335;
  border-color: #fff;
}

.btn-google:hover {
  color: #fff;
  background-color: #e12717;
  border-color: #e6e6e6;
}

.btn-google:focus, .btn-google.focus {
  color: #fff;
  background-color: #e12717;
  border-color: #e6e6e6;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.btn-google.disabled, .btn-google:disabled {
  color: #fff;
  background-color: #ea4335;
  border-color: #fff;
}

.btn-google:not(:disabled):not(.disabled):active, .btn-google:not(:disabled):not(.disabled).active,
.show > .btn-google.dropdown-toggle {
  color: #fff;
  background-color: #d62516;
  border-color: #dfdfdf;
}

.btn-google:not(:disabled):not(.disabled):active:focus, .btn-google:not(:disabled):not(.disabled).active:focus,
.show > .btn-google.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.btn-facebook {
  color: #fff;
  background-color: #3b5998;
  border-color: #fff;
}

.btn-facebook:hover {
  color: #fff;
  background-color: #30497c;
  border-color: #e6e6e6;
}

.btn-facebook:focus, .btn-facebook.focus {
  color: #fff;
  background-color: #30497c;
  border-color: #e6e6e6;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.btn-facebook.disabled, .btn-facebook:disabled {
  color: #fff;
  background-color: #3b5998;
  border-color: #fff;
}

.btn-facebook:not(:disabled):not(.disabled):active, .btn-facebook:not(:disabled):not(.disabled).active,
.show > .btn-facebook.dropdown-toggle {
  color: #fff;
  background-color: #2d4373;
  border-color: #dfdfdf;
}

.btn-facebook:not(:disabled):not(.disabled):active:focus, .btn-facebook:not(:disabled):not(.disabled).active:focus,
.show > .btn-facebook.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.error {
  color: #5a5c69;
  font-size: 7rem;
  position: relative;
  line-height: 1;
  width: 12.5rem;
}

@-webkit-keyframes noise-anim {
  0% {
    clip: rect(81px, 9999px, 74px, 0);
  }
  5% {
    clip: rect(2px, 9999px, 29px, 0);
  }
  10% {
    clip: rect(1px, 9999px, 15px, 0);
  }
  15% {
    clip: rect(50px, 9999px, 8px, 0);
  }
  20% {
    clip: rect(99px, 9999px, 79px, 0);
  }
  25% {
    clip: rect(85px, 9999px, 15px, 0);
  }
  30% {
    clip: rect(41px, 9999px, 53px, 0);
  }
  35% {
    clip: rect(22px, 9999px, 36px, 0);
  }
  40% {
    clip: rect(73px, 9999px, 79px, 0);
  }
  45% {
    clip: rect(82px, 9999px, 100px, 0);
  }
  50% {
    clip: rect(47px, 9999px, 96px, 0);
  }
  55% {
    clip: rect(10px, 9999px, 44px, 0);
  }
  60% {
    clip: rect(7px, 9999px, 24px, 0);
  }
  65% {
    clip: rect(29px, 9999px, 88px, 0);
  }
  70% {
    clip: rect(12px, 9999px, 44px, 0);
  }
  75% {
    clip: rect(25px, 9999px, 57px, 0);
  }
  80% {
    clip: rect(38px, 9999px, 35px, 0);
  }
  85% {
    clip: rect(20px, 9999px, 96px, 0);
  }
  90% {
    clip: rect(58px, 9999px, 44px, 0);
  }
  95% {
    clip: rect(72px, 9999px, 41px, 0);
  }
  100% {
    clip: rect(69px, 9999px, 72px, 0);
  }
}

@keyframes noise-anim {
  0% {
    clip: rect(81px, 9999px, 74px, 0);
  }
  5% {
    clip: rect(2px, 9999px, 29px, 0);
  }
  10% {
    clip: rect(1px, 9999px, 15px, 0);
  }
  15% {
    clip: rect(50px, 9999px, 8px, 0);
  }
  20% {
    clip: rect(99px, 9999px, 79px, 0);
  }
  25% {
    clip: rect(85px, 9999px, 15px, 0);
  }
  30% {
    clip: rect(41px, 9999px, 53px, 0);
  }
  35% {
    clip: rect(22px, 9999px, 36px, 0);
  }
  40% {
    clip: rect(73px, 9999px, 79px, 0);
  }
  45% {
    clip: rect(82px, 9999px, 100px, 0);
  }
  50% {
    clip: rect(47px, 9999px, 96px, 0);
  }
  55% {
    clip: rect(10px, 9999px, 44px, 0);
  }
  60% {
    clip: rect(7px, 9999px, 24px, 0);
  }
  65% {
    clip: rect(29px, 9999px, 88px, 0);
  }
  70% {
    clip: rect(12px, 9999px, 44px, 0);
  }
  75% {
    clip: rect(25px, 9999px, 57px, 0);
  }
  80% {
    clip: rect(38px, 9999px, 35px, 0);
  }
  85% {
    clip: rect(20px, 9999px, 96px, 0);
  }
  90% {
    clip: rect(58px, 9999px, 44px, 0);
  }
  95% {
    clip: rect(72px, 9999px, 41px, 0);
  }
  100% {
    clip: rect(69px, 9999px, 72px, 0);
  }
}

.error:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 #e74a3b;
  top: 0;
  color: #5a5c69;
  background: #f8f9fc;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@-webkit-keyframes noise-anim-2 {
  0% {
    clip: rect(82px, 9999px, 93px, 0);
  }
  5% {
    clip: rect(13px, 9999px, 71px, 0);
  }
  10% {
    clip: rect(22px, 9999px, 90px, 0);
  }
  15% {
    clip: rect(17px, 9999px, 11px, 0);
  }
  20% {
    clip: rect(21px, 9999px, 91px, 0);
  }
  25% {
    clip: rect(37px, 9999px, 33px, 0);
  }
  30% {
    clip: rect(37px, 9999px, 80px, 0);
  }
  35% {
    clip: rect(6px, 9999px, 49px, 0);
  }
  40% {
    clip: rect(86px, 9999px, 60px, 0);
  }
  45% {
    clip: rect(46px, 9999px, 83px, 0);
  }
  50% {
    clip: rect(16px, 9999px, 83px, 0);
  }
  55% {
    clip: rect(73px, 9999px, 36px, 0);
  }
  60% {
    clip: rect(58px, 9999px, 98px, 0);
  }
  65% {
    clip: rect(20px, 9999px, 93px, 0);
  }
  70% {
    clip: rect(43px, 9999px, 67px, 0);
  }
  75% {
    clip: rect(66px, 9999px, 75px, 0);
  }
  80% {
    clip: rect(66px, 9999px, 41px, 0);
  }
  85% {
    clip: rect(17px, 9999px, 47px, 0);
  }
  90% {
    clip: rect(49px, 9999px, 68px, 0);
  }
  95% {
    clip: rect(8px, 9999px, 85px, 0);
  }
  100% {
    clip: rect(83px, 9999px, 50px, 0);
  }
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(82px, 9999px, 93px, 0);
  }
  5% {
    clip: rect(13px, 9999px, 71px, 0);
  }
  10% {
    clip: rect(22px, 9999px, 90px, 0);
  }
  15% {
    clip: rect(17px, 9999px, 11px, 0);
  }
  20% {
    clip: rect(21px, 9999px, 91px, 0);
  }
  25% {
    clip: rect(37px, 9999px, 33px, 0);
  }
  30% {
    clip: rect(37px, 9999px, 80px, 0);
  }
  35% {
    clip: rect(6px, 9999px, 49px, 0);
  }
  40% {
    clip: rect(86px, 9999px, 60px, 0);
  }
  45% {
    clip: rect(46px, 9999px, 83px, 0);
  }
  50% {
    clip: rect(16px, 9999px, 83px, 0);
  }
  55% {
    clip: rect(73px, 9999px, 36px, 0);
  }
  60% {
    clip: rect(58px, 9999px, 98px, 0);
  }
  65% {
    clip: rect(20px, 9999px, 93px, 0);
  }
  70% {
    clip: rect(43px, 9999px, 67px, 0);
  }
  75% {
    clip: rect(66px, 9999px, 75px, 0);
  }
  80% {
    clip: rect(66px, 9999px, 41px, 0);
  }
  85% {
    clip: rect(17px, 9999px, 47px, 0);
  }
  90% {
    clip: rect(49px, 9999px, 68px, 0);
  }
  95% {
    clip: rect(8px, 9999px, 85px, 0);
  }
  100% {
    clip: rect(83px, 9999px, 50px, 0);
  }
}

.error:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 #4e73df;
  top: 0;
  color: #5a5c69;
  background: #f8f9fc;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}

footer.sticky-footer {
  padding: 2rem 0;
  flex-shrink: 0;
}

footer.sticky-footer .copyright {
  line-height: 1;
  font-size: 0.8rem;
}

body.sidebar-toggled footer.sticky-footer {
  width: 100%;
}

/* ==========================================================================
   SYNCROFEED — APP SHELL
   Layout, sidebar, topbar, language + user menus, legacy utilities.
   Moved verbatim from /public/css/syncrofeed.css (file removed).
   The sidebar rules below are intentionally unchanged.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    background: #0b0d12;
    color: #e6e6e6;
    font-size: 14px;
    line-height: 1.5;
}
a { color: #4f7cff; text-decoration: none; }

/* -------- Layout shell (sidebar + content) -------- */
.shell { display: flex; min-height: 100vh; }

/* -------- Sidebar -------- */
.sidebar {
    width: 240px;
    background: linear-gradient(180deg, #0d0f14 0%, #0a0c10 100%);
    border-right: 1px solid #1b1f28;
    padding: 1.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-self: stretch;
}
.sidebar .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem 1.25rem;
    border-bottom: 1px solid #1b1f28;
    margin-bottom: 1rem;
}
/* Brand logo (public/images/logo): full SF + wordmark; the narrow sidebar shows the SF mark only */
.sidebar .logo img { display: block; height: auto; }
.sidebar .logo .logo-full { width: 130px; max-width: 100%; }
.sidebar .logo .logo-mark { display: none; width: 40px; }
.sidebar a.logo:focus-visible { outline: 2px solid var(--sf-accent, #4f7cff); outline-offset: 2px; border-radius: 6px; }

.sidebar .section-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #4a4f5a;
    padding: 0.8rem 0.85rem 0.4rem;
    font-weight: 600;
}

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    border-radius: 7px;
    color: #9aa0ab;
    font-weight: 500;
    font-size: 0.88rem;
    margin-bottom: 2px;
    transition: background 0.12s, color 0.12s, transform 0.12s;
    position: relative;
}
.sidebar nav a:hover {
    background: rgba(79, 124, 255, 0.08);
    color: #e6e6e6;
}
.sidebar nav a.active {
    background: linear-gradient(90deg, rgba(79, 124, 255, 0.18), rgba(79, 124, 255, 0.05));
    color: #fff;
}
.sidebar nav a.active::before {
    content: ''; position: absolute; left: 0; top: 25%; bottom: 25%;
    width: 3px; border-radius: 2px;
    background: linear-gradient(180deg, #4f7cff, #6e5cff);
}
.sidebar nav a svg {
    width: 18px; height: 18px; flex-shrink: 0; opacity: 0.9;
}

.sidebar .footer-links {
    margin-top: auto; padding-top: 1rem;
    border-top: 1px solid #1b1f28;
}

/* -------- Top bar -------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.75rem;
    background: rgba(13, 15, 20, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #1b1f28;
    position: sticky; top: 0; z-index: 5;
}
.topbar .page-title { font-size: 0.95rem; font-weight: 600; color: #cfd3dc; }
.topbar .user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.topbar .user .who {
    display: flex; flex-direction: column; align-items: flex-end;
    font-size: 0.8rem;
}
.topbar .user .who b { color: #e6e6e6; font-weight: 600; }
.topbar .user .who span { color: #6e7383; font-size: 0.72rem; }
.topbar .user .avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #4f7cff, #6e5cff);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem; color: #fff;
}
.topbar .user form { margin: 0; }
.topbar .user button.logout {
    padding: 0.4rem 0.8rem; font-size: 0.78rem; font-weight: 500;
    background: transparent; border: 1px solid #2a2e38;
    color: #9aa0ab; border-radius: 6px; cursor: pointer; margin: 0;
    transition: all 0.12s;
}
.topbar .user button.logout:hover { border-color: #4f7cff; color: #e6e6e6; }

/* -------- Content -------- */
main.content { flex: 1; padding: 1.5rem 1.75rem 2rem; max-width: 100%; width: 100%; margin: 0 auto; }
body.guest { background: radial-gradient(circle at 20% 20%, #121624, #0b0d12 70%); }
body.guest .main { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
body.guest main.content { padding: 0; max-width: 480px; flex: none; }
body.guest form button { width: 100%; }

/* -------- Language switcher (topbar) -------- */
.lang-switch { position: relative; }
.lang-switch summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.5rem; border: 1px solid #2a2e38; border-radius: 8px; background: #14171f; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary img { width: 22px; height: auto; border-radius: 3px; display: block; }
.lang-switch summary .chev { width: 13px; height: 13px; stroke: #8b93a3; transition: transform .15s; }
.lang-switch[open] summary { border-color: #4f7cff; }
.lang-switch[open] summary .chev { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 168px; background: #14171f; border: 1px solid #2a2e38; border-radius: 10px; padding: 0.3rem; box-shadow: 0 14px 32px rgba(0,0,0,0.5); z-index: 60; }
.lang-menu a { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.6rem; border-radius: 7px; color: #cfd3dc; font-size: 0.86rem; text-decoration: none; }
.lang-menu a:hover { background: #1f2430; color: #fff; }
.lang-menu a.active { color: #fff; }
.lang-menu a img { width: 22px; height: auto; border-radius: 3px; }
.lang-menu a .check { width: 14px; height: 14px; margin-left: auto; stroke: #4ade80; }

/* -------- User menu (topbar) -------- */
.user-menu { position: relative; }
.user-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem 0.4rem 0.25rem 0.6rem; border-radius: 10px; transition: background .12s; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover, .user-menu[open] summary { background: #1a1d26; }
.user-menu summary .chev { width: 14px; height: 14px; stroke: #8b93a3; transition: transform .15s; flex: none; }
.user-menu[open] summary .chev { transform: rotate(180deg); }
.user-dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: #14171f; border: 1px solid #2a2e38; border-radius: 12px; padding: 0.4rem; box-shadow: 0 16px 36px rgba(0,0,0,0.5); z-index: 60; }
.user-dropdown .um-head { padding: 0.55rem 0.7rem 0.65rem; border-bottom: 1px solid #21242c; margin-bottom: 0.3rem; }
.user-dropdown .um-head b { display: block; font-size: 0.9rem; color: #e6e8ee; }
.user-dropdown .um-head span { font-size: 0.78rem; color: #6e7383; word-break: break-all; }
.user-dropdown form { margin: 0; }
.user-dropdown button { width: 100%; display: flex; align-items: center; gap: 0.55rem; margin: 0; padding: 0.55rem 0.7rem; border: 0; border-radius: 8px; background: transparent; color: #f0a7a7; font-size: 0.86rem; font-weight: 600; cursor: pointer; box-shadow: none; }
.user-dropdown button:hover { background: rgba(220,90,90,0.14); transform: none; box-shadow: none; }
.user-dropdown button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
/* Account links (invoices, billing details, 2FA) — moved here from the sidebar. */
.user-dropdown .um-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.7rem; border-radius: 8px; color: var(--sf-text-2); font-size: 0.86rem; font-weight: 500; text-decoration: none; transition: background var(--sf-ease), color var(--sf-ease); }
.user-dropdown .um-item svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; color: var(--sf-muted); }
.user-dropdown .um-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--sf-text); text-decoration: none; }
.user-dropdown .um-item:hover svg, .user-dropdown .um-item.active svg { color: var(--sf-accent-text); }
.user-dropdown .um-item.active { background: var(--sf-accent-soft); color: var(--sf-text); }
.user-dropdown .um-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 0.4rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--sf-fs-2xs); font-weight: 600; background: rgba(79, 124, 255, 0.18); color: var(--sf-accent-text); }
.user-dropdown .um-sep { height: 1px; margin: 0.3rem 0.2rem; background: #21242c; }
/* Log out: a menu row in the danger tone. .btn keeps it out of the theme's
   blanket "form button" (solid primary) rule; this beats .btn's own sizing. */
.user-dropdown button.um-logout {
    width: 100%; height: auto; justify-content: flex-start; gap: 0.55rem; padding: 0.55rem 0.7rem;
    border: 0; border-radius: 8px; background: transparent; color: var(--sf-danger-text);
    font-size: 0.86rem; font-weight: 600;
}
.user-dropdown button.um-logout:hover { background: var(--sf-danger-soft); color: var(--sf-danger-text); }
.user-dropdown button.um-logout svg { width: 16px; height: 16px; }
/* Plan badge next to the name in the topbar (plan colour from the plan record). */
.topbar .user .who-name { display: flex; align-items: center; gap: 0.45rem; }
.topbar .user .who .um-plan {
    display: inline-flex; align-items: center; height: 18px; padding: 0 0.45rem; border-radius: 999px;
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; line-height: 1;
    color: color-mix(in srgb, var(--pc) 70%, #fff);
    background: color-mix(in srgb, var(--pc) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc) 42%, transparent);
}
/* Unpaid invoices: a dot on the avatar (the count is in the menu). */
.topbar .user .avatar.has-attn { position: relative; }
.topbar .user .avatar.has-attn::after { content: ""; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--sf-accent); box-shadow: 0 0 0 2px var(--sf-bg, #0b0d12); }

/* .card base (block layout, surface, border) lives in the design system
   appended to vendor/sb-admin-2/css/sb-admin-2.min.css. */

/* SB-Admin 2 ships .card-header with a light grey background — override
   so it matches the dark theme. */
.card-header {
    background: transparent;
    border-bottom: 1px solid #1f2430;
    padding: 0 0 0.6rem 0;
    margin-bottom: 0.6rem;
    color: #e6e6e6;
    display: block;
}
.card-body { background: transparent; color: inherit; padding: 0; }

/* Bootstrap 4 adds `text-decoration: underline` on a:hover. Cancel it
   so anchor-styled buttons (.back-btn, sidebar nav, etc.) don't get a
   random underline on hover. Sidebar/topbar use !important because
   SB-Admin 2 ships .sidebar-dark .nav-item a styles with higher
   specificity than a plain .sidebar nav a:hover. */
a, a:hover { text-decoration: none; }
.sidebar a, .sidebar a:hover, .topbar a, .topbar a:hover { text-decoration: none !important; }

/* SB-Admin 2 hard-codes `.sidebar { width: 14rem !important }` (224px) on
   md+ breakpoints. Our design uses 240px (15rem) — restore it. */
@media (min-width: 768px) {
    .sidebar { width: 15rem !important; }
}

/* Bootstrap 4 .btn doesn't ship with white-space:nowrap (Bootstrap 5
   does), so the icon ends up on one line and the label wraps below it
   on narrow buttons. Force a single-line, vertically-centred layout
   with a small gap so <i> + text always sit side-by-side. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
}
/* Anchors with .btn need the same treatment. */
a.btn { text-decoration: none; }

/* Form controls + legacy un-classed form buttons: see the design
   system in sb-admin-2.min.css (section 5 + 8). */
[class="errors"], [class="success"] {
    padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem;
    font-size: 0.88rem; border-left: 3px solid;
}
[class="errors"] { background: rgba(110, 42, 42, 0.15); border-color: #c14d4d; color: #f5bfbf; }
[class="success"] { background: rgba(42, 110, 64, 0.15); border-color: #4dc173; color: #c3f5c8; }

table { width: 100%; border-collapse: collapse; }
table th, table td { text-align: left; padding: 0.65rem 0.5rem; border-bottom: 1px solid #1f2430; }
table th {
    color: #7d8494; font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding-top: 0.4rem; padding-bottom: 0.6rem;
}
table tr:hover td, table tr:hover th { background: rgba(79, 124, 255, 0.03); }
table tr:last-child td, table tr:last-child th { border-bottom: 0; }

.muted { color: #6e7383; }
/* .badge + code styles: design system (sb-admin-2.min.css §6, §2). */

/* -------- Toggle switch (pill) -------- */
.toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 500;
    color: #cfd3dc;
    margin-top: 0;
    user-select: none;
}
.toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}
.toggle .track {
    position: relative;
    display: inline-block;
    width: 36px; height: 20px;
    background: #242a37;
    border-radius: 20px;
    transition: background 0.18s ease;
    flex-shrink: 0;
}
.toggle .track::before {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    left: 3px; top: 3px;
    background: #7a818f;
    border-radius: 50%;
    transition: transform 0.18s ease, background 0.18s ease;
}
.toggle input:checked + .track {
    background: linear-gradient(135deg, #4f7cff, #6e5cff);
}
.toggle input:checked + .track::before {
    transform: translateX(16px);
    background: #fff;
}
.toggle input:focus-visible + .track {
    box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.25);
}
.toggle:hover .track { background: #2c3242; }
.toggle input:checked:hover + .track {
    background: linear-gradient(135deg, #3f6eff, #5d4dff);
}
.toggle-desc {
    display: block; font-size: 0.75rem; color: #6e7383;
    margin-top: 0.1rem; font-weight: 400;
}

@media (max-width: 900px) {
    .sidebar { width: 72px; padding: 1rem 0.5rem; }
    .sidebar .logo .logo-full, .sidebar nav a span, .sidebar .section-label { display: none; }
    .sidebar .logo .logo-mark { display: block; }
    .topbar .user .who { display: none; }
}

/* ========================================================================
   Utility classes — replace common inline `style="..."` attributes.
   Naming convention:
     .text-*  : text colour
     .fs-*    : font-size
     .fw-*    : font-weight
     .gap-*   : flex gap
     .arrow-sep : the "→" between source and destination
     .log-*   : per-product log box rows
   Pure presentational utilities — they hold the same CSS the old inline
   attributes did, so removing `style=""` doesn't change a pixel.
   ====================================================================== */

/* Colours used across the app's dark theme. */
.text-link    { color: #4f7cff; }
.text-mid     { color: #4f5566; }
.text-soft    { color: #9aa0ab; }
.text-light   { color: #cfd3dc; }
.text-dim     { color: #5a6070; }
.text-danger-soft { color: #f0a7a7; }

/* Font sizes (rem). Keep names short. */
.fs-2xs { font-size: 0.7rem; }
.fs-xs  { font-size: 0.74rem; }
.fs-sm  { font-size: 0.8rem; }
.fs-base{ font-size: 0.85rem; }

.fw-700 { font-weight: 700; }

/* Flex gap utilities (Bootstrap 4 doesn't ship .gap-*). */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.4rem; }
.gap-3 { gap: 0.5rem; }
.gap-4 { gap: 0.6rem; }
.gap-5 { gap: 1rem; }

/* The "→" between source and destination integration. */
.arrow-sep { color: #4f5566; }

/* Per-product live log box: the monospace card the transfer/store/scheduled
   pages render under each run. */
.log-box {
    background: #070a0f;
    border: 1px solid #1f2430;
    border-radius: 6px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.72rem;
    line-height: 1.5;
    padding: 0.4rem 0.6rem;
    max-height: 13rem;
    overflow: auto;
    margin-top: 0.4rem;
}
.log-line { display: flex; gap: 0.6rem; white-space: nowrap; }
.log-line .t { color: #5a6070; }
.log-line .sku { color: #9aa0ab; width: 9rem; flex-shrink: 0; }
.log-line .nm  { color: #cfd3dc; overflow: hidden; text-overflow: ellipsis; }
.log-line .st  { font-weight: 700; width: 5rem; flex-shrink: 0; }

/* The detail-row drawer that expands under a transfer/run summary. */
.detail-row-bg { background: #0d1016; }
.detail-row-item { padding: 0.4rem 0; border-top: 1px solid #1f2430; }
.error-bar { margin-top: 0.3rem; font-size: 0.76rem; color: #f0a7a7; }

/* Tiny header column widths (used in expandable tables). */
.col-chev   { width: 32px; }
.col-actions{ width: 160px; }

/* Frequency preset buttons (Scheduled syncs — edit interval inline). */
.freq-preset-btn {
    padding: 0.15rem 0.45rem; font-size: 0.68rem; border-radius: 5px;
    cursor: pointer; border: 1px solid #2a2e38; background: transparent; color: #cfd3dc;
}
.freq-preset-btn.active { border-color: #4f7cff; background: rgba(79,124,255,0.15); color: #9ab3ff; }

.freq-input-sm {
    width: 64px; background: #0f1117; border: 1px solid #2a2e38; color: #e6e8ee;
    padding: 0.2rem 0.4rem; border-radius: 5px; font-size: 0.72rem;
}

/* Subtle underlined "edit" trigger next to a value (frequency, etc.). */
.btn-edit-link {
    margin-left: 0.3rem; padding: 0; background: transparent; border: 0;
    color: #6e7383; cursor: pointer; font-size: 0.72rem; text-decoration: underline;
}

.text-warn { color: #e3c06a; }
.fs-7  { font-size: 0.68rem; }
.fs-8  { font-size: 0.72rem; }
.fs-9  { font-size: 0.75rem; }
.fs-10 { font-size: 0.78rem; }

.scheduled-edit-wrap { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; max-width: 240px; }
.col-1pc { width: 1%; }

/* .back-btn: design system (sb-admin-2.min.css §5). */
/* The "SKU:" prefix uses the inherited sans-serif so the gap before the
   monospace SKU number doesn't look like double-spacing. */
.sku-label { font-family: inherit; }

/* "Details after rules" — what the product looks like AFTER pricing rules
   are applied (the data that actually reaches the destination store). */
.after-rules-card {
    margin-bottom: 1.2rem;
    padding: 0.8rem 1rem;
    background: rgba(42, 110, 64, 0.12);
    border: 1px solid #2a6e40;
    border-radius: 6px;
}
.after-rules-title {
    font-size: 0.8rem;
    color: #95e5a8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}
.after-rules-price { font-size: 1.4rem; font-weight: 700; color: #95e5a8; }
.after-rules-price .strike {
    text-decoration: line-through; color: #6e7383;
    margin-left: 0.5rem; font-size: 0.9rem; font-weight: 400;
}
.after-rules-price .discount {
    background: #c34a4a; color: #fff;
    padding: 0.15rem 0.5rem; border-radius: 3px;
    margin-left: 0.5rem; font-size: 0.85rem; font-weight: 400;
}
.after-rules-sku { color: #6e7383; font-size: 0.78rem; margin-top: 0.4rem; font-weight: 400; }
.after-rules-sku code { background: #0d1016; padding: 0.1rem 0.35rem; border-radius: 3px; }

/* Compact variant for the product list card. */
.after-rules-mini {
    margin-top: 0.4rem; padding-top: 0.4rem;
    border-top: 1px dashed #2a2e38; font-size: 0.78rem;
}
.after-rules-mini .title {
    font-size: 0.66rem; color: #6e7383;
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}
.after-rules-mini .price { color: #95e5a8; }
.after-rules-mini .price .strike { text-decoration: line-through; color: #6e7383; margin-left: 0.3rem; }

/* ==========================================================================
   Syncrofeed UI — design system v2 ("modern"). Comes after the app shell so,
   at equal specificity, these rules win. The sidebar nav is NOT restyled
   here (only its count badges, section 11). Palette unchanged.

   Look: layered dark surfaces with subtle depth (hairline top highlight +
   soft drop shadow), 12px panels, larger page titles with an icon chip,
   KPI cards with tinted icon chips, airy tables, pill badges/status,
   refined hover/focus. Controls: 34px default / 28px sm / 40px lg.

   Sections
     1. Tokens                 8. Forms
     2. Base + typography      9. Tabs, segmented
     3. Page header           10. Stats/KPI, lists, key-value, empty, alerts, code
     4. Panels, cards, tiles  11. Sidebar count badges
     5. Buttons               12. Vendor themes
     6. Badges, status        13. Utilities
     7. Tables
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    --sf-bg: #0b0d12;
    --sf-surface: #13161e;
    --sf-surface-2: #0f1218;
    --sf-surface-3: #1a1f29;
    --sf-surface-raised: #171b24;
    --sf-surface-hover: #181c26;
    --sf-inset: #0d1016;

    --sf-border: #1e232e;
    --sf-border-strong: #2a303c;
    --sf-border-hover: #3a4150;

    --sf-text: #e8eaf0;
    --sf-text-2: #b8bdc8;
    --sf-muted: #7f8697;
    --sf-faint: #555c6b;

    --sf-accent: #4f7cff;
    --sf-accent-hover: #638bff;
    --sf-accent-press: #3f6af0;
    --sf-accent-soft: rgba(79, 124, 255, 0.12);
    --sf-accent-border: rgba(79, 124, 255, 0.36);
    --sf-accent-text: #9ab3ff;

    --sf-success: #4ade80;
    --sf-success-soft: rgba(74, 222, 128, 0.10);
    --sf-success-border: rgba(74, 222, 128, 0.26);
    --sf-success-text: #86efac;

    --sf-danger: #f87171;
    --sf-danger-solid: #dc4c4c;
    --sf-danger-soft: rgba(248, 113, 113, 0.10);
    --sf-danger-border: rgba(248, 113, 113, 0.30);
    --sf-danger-text: #fca5a5;

    --sf-warning: #fbbf24;
    --sf-warning-soft: rgba(251, 191, 36, 0.10);
    --sf-warning-border: rgba(251, 191, 36, 0.28);
    --sf-warning-text: #fcd34d;

    --sf-info: #60a5fa;
    --sf-info-soft: rgba(96, 165, 250, 0.10);
    --sf-info-border: rgba(96, 165, 250, 0.28);
    --sf-info-text: #93c5fd;

    --sf-violet: #a78bfa;
    --sf-violet-soft: rgba(167, 139, 250, 0.12);

    --sf-r-xs: 5px;
    --sf-r-sm: 7px;
    --sf-r: 9px;
    --sf-r-lg: 12px;
    --sf-r-xl: 14px;

    --sf-h-sm: 28px;
    --sf-h: 34px;
    --sf-h-lg: 40px;

    --sf-fs-2xs: 11px;
    --sf-fs-xs: 12px;
    --sf-fs-sm: 13px;
    --sf-fs: 14px;
    --sf-fs-md: 15px;
    --sf-fs-lg: 18px;
    --sf-fs-xl: 22px;
    --sf-fs-2xl: 26px;

    --sf-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* depth */
    --sf-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    --sf-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.2);
    --sf-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px -14px rgba(0, 0, 0, 0.6);
    --sf-shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
    --sf-focus: 0 0 0 3px rgba(79, 124, 255, 0.25);
    --sf-ease: 0.15s ease;
}

/* 2. Base + typography ----------------------------------------------------- */
body { background: var(--sf-bg); color: var(--sf-text); font-size: var(--sf-fs); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: var(--sf-text); letter-spacing: -0.01em; }
a { color: var(--sf-accent-text); transition: color var(--sf-ease); }
a:hover { color: #c3d1ff; }
hr { border-color: var(--sf-border); }
.muted, .text-muted { color: var(--sf-muted) !important; }
small, .small { font-size: var(--sf-fs-xs); }
code {
    background: var(--sf-inset); color: #c9d4ff; border: 1px solid var(--sf-border);
    padding: 0.08rem 0.38rem; border-radius: var(--sf-r-xs); font-family: var(--sf-mono); font-size: 0.82em;
}
::selection { background: rgba(79, 124, 255, 0.35); }

main.content { padding: 1.75rem 2rem 3rem; }

/* Flash messages rendered by the layout (.success / .errors). */
main.content > [class="success"], main.content > [class="errors"] {
    display: flex; gap: 0.65rem; align-items: flex-start;
    border: 1px solid; border-radius: var(--sf-r);
    padding: 0.75rem 0.95rem; font-size: var(--sf-fs-sm); margin-bottom: 1.25rem;
    box-shadow: var(--sf-shadow-1);
}
main.content > [class="success"] { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }
main.content > [class="success"]::before { content: "\f058"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
main.content > [class="errors"] { background: var(--sf-danger-soft); border-color: var(--sf-danger-border); color: var(--sf-danger-text); }

/* 3. Page header ----------------------------------------------------------- */
.sf-page-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
    flex-wrap: wrap; margin: 0 0 1.5rem;
}
.sf-page-head > div:first-child { min-width: 0; }
.sf-page-head > div:first-child:has(> .sf-page-icon) { display: flex; align-items: center; gap: 0.9rem; }
.sf-page-head > div:first-child > div, .sf-page-head .sf-page-text { min-width: 0; }
.sf-page-head .sf-page-title { margin: 0; font-size: var(--sf-fs-xl); font-weight: 650; line-height: 1.25; color: var(--sf-text); letter-spacing: -0.015em; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.sf-page-head .sf-page-sub { margin: 0.3rem 0 0; font-size: var(--sf-fs-sm); color: var(--sf-muted); max-width: 80ch; }
.sf-page-head .sf-page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
/* Icon chip next to the title: <span class="sf-page-icon"><i class="fas fa-store"></i></span> */
.sf-page-icon {
    width: 44px; height: 44px; flex: none; border-radius: var(--sf-r-lg);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sf-accent-soft); border: 1px solid var(--sf-accent-border); color: var(--sf-accent-text);
    font-size: 17px; box-shadow: var(--sf-hairline);
}
.sf-page-icon.success { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }
.sf-page-icon.warning { background: var(--sf-warning-soft); border-color: var(--sf-warning-border); color: var(--sf-warning-text); }
.sf-page-icon.danger  { background: var(--sf-danger-soft);  border-color: var(--sf-danger-border);  color: var(--sf-danger-text); }
.sf-page-icon.violet  { background: var(--sf-violet-soft);  border-color: rgba(167,139,250,.32);   color: #c4b5fd; }
.sf-page-icon img { max-width: 60%; max-height: 60%; object-fit: contain; }
.sf-crumb { display: flex; align-items: center; gap: 0.4rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-bottom: 0.65rem; }
.sf-crumb a { color: var(--sf-muted); }
.sf-crumb a:hover { color: var(--sf-text); }
.sf-crumb .sep { color: var(--sf-faint); }

/* 4. Panels / cards / tiles ------------------------------------------------ */
/* Bootstrap's .card is flex-column; the app was built on a block .card. */
.card {
    display: block; min-width: 0; word-wrap: normal;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-r-lg);
    padding: 1.35rem;
    box-shadow: var(--sf-hairline), var(--sf-shadow-2);
    margin-bottom: 1.25rem;
}
.card h2 { font-size: var(--sf-fs-md); font-weight: 600; margin: 0 0 0.35rem; }
.card h3 { font-size: var(--sf-fs); font-weight: 600; }
.card-header { border-bottom-color: var(--sf-border); }

.sf-panel {
    background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg);
    margin-bottom: 1.25rem; box-shadow: var(--sf-hairline), var(--sf-shadow-2);
}
.sf-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--sf-border);
    background: linear-gradient(rgba(255,255,255,0.012), rgba(255,255,255,0.012));
    border-radius: var(--sf-r-lg) var(--sf-r-lg) 0 0;
}
.sf-panel-head > div:first-child { min-width: 0; }
.sf-panel-head > div:first-child:has(> .sf-panel-icon) { display: flex; align-items: center; gap: 0.75rem; }
.sf-panel-title { margin: 0; font-size: var(--sf-fs-md); font-weight: 600; color: var(--sf-text); display: flex; align-items: center; gap: 0.5rem; }
.sf-panel-title .count {
    font-size: var(--sf-fs-2xs); font-weight: 600; color: var(--sf-text-2);
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06);
    height: 20px; min-width: 20px; padding: 0 0.4rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
}
.sf-panel-sub { margin: 0.2rem 0 0; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.sf-panel-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.sf-panel-icon {
    width: 32px; height: 32px; flex: none; border-radius: var(--sf-r);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sf-surface-3); border: 1px solid var(--sf-border-strong); color: var(--sf-text-2); font-size: 13px;
}
.sf-panel-icon.accent  { background: var(--sf-accent-soft);  border-color: var(--sf-accent-border);  color: var(--sf-accent-text); }
.sf-panel-icon.success { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }
.sf-panel-icon.warning { background: var(--sf-warning-soft); border-color: var(--sf-warning-border); color: var(--sf-warning-text); }
.sf-panel-icon.danger  { background: var(--sf-danger-soft);  border-color: var(--sf-danger-border);  color: var(--sf-danger-text); }
.sf-panel-icon.violet  { background: var(--sf-violet-soft);  border-color: rgba(167,139,250,.3);    color: #c4b5fd; }
.sf-panel-body { padding: 1.25rem; }
.sf-panel-body.flush { padding: 0; }
.sf-panel-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.8rem 1.25rem; border-top: 1px solid var(--sf-border); font-size: var(--sf-fs-xs); color: var(--sf-muted);
    border-radius: 0 0 var(--sf-r-lg) var(--sf-r-lg);
}

.sf-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sf-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.sf-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sf-grid.cols-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sf-grid.gap-lg { gap: 1.25rem; }

/* Tile — store / website cards. Keeps the platform-tinted hover glow (--pc). */
.sf-tile {
    --pc: var(--sf-accent);
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg);
    color: inherit; text-decoration: none; box-shadow: var(--sf-hairline), var(--sf-shadow-2);
    transition: transform .18s ease, border-color .18s ease, box-shadow .25s ease, background .18s ease;
}
.sf-tile::after {                      /* soft platform tint that fades in on hover */
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--pc) 10%, transparent), transparent 60%);
    opacity: 0; transition: opacity .25s ease;
}
.sf-tile:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--pc) 45%, var(--sf-border));
    box-shadow: var(--sf-hairline), 0 18px 36px -18px color-mix(in srgb, var(--pc) 55%, transparent);
    color: inherit; text-decoration: none;
}
.sf-tile:hover::after { opacity: 1; }
.sf-tile > * { position: relative; z-index: 1; }
.sf-tile-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.sf-tile-foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.25rem; border-top: 1px solid var(--sf-border); background: rgba(255,255,255,0.012); }
.sf-tile-head { display: flex; align-items: flex-start; gap: 0.85rem; }
.sf-tile-title { margin: 0; font-size: var(--sf-fs-md); font-weight: 600; color: var(--sf-text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-tile-meta { font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-top: 0.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-tile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 0.5rem; }
.sf-tile-stat { background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r); padding: 0.55rem 0.7rem; }
.sf-tile-stat .label { font-size: var(--sf-fs-2xs); color: var(--sf-muted); }
.sf-tile-stat .value { font-size: var(--sf-fs); font-weight: 600; color: var(--sf-text); margin-top: 0.1rem; font-variant-numeric: tabular-nums; }

.platform-shopify     { --pc: #3ecf8e; }
.platform-woocommerce { --pc: #a78bfa; }
.platform-prestashop  { --pc: #f48fb1; }
.platform-magento     { --pc: #ff9e6b; }
.platform-opencart    { --pc: #5db8ff; }
.platform-custom      { --pc: #9aa3b5; }

.sf-logo {
    width: 44px; height: 44px; flex: none; border-radius: var(--sf-r);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sf-surface-3); border: 1px solid var(--sf-border-strong); overflow: hidden;
    font-weight: 700; color: var(--sf-text-2); font-size: var(--sf-fs-md); box-shadow: var(--sf-hairline);
}
.sf-logo img { max-width: 62%; max-height: 62%; object-fit: contain; display: block; }
.sf-logo.sm { width: 30px; height: 30px; border-radius: var(--sf-r-sm); font-size: var(--sf-fs-xs); }
.sf-logo.lg { width: 52px; height: 52px; border-radius: var(--sf-r-lg); }

.sf-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2a3350, #1d2231); border: 1px solid var(--sf-border-strong);
    color: #c9d4ff; font-weight: 600; font-size: var(--sf-fs-xs);
}
.sf-avatar.sm { width: 26px; height: 26px; font-size: var(--sf-fs-2xs); }

/* 5. Buttons --------------------------------------------------------------- */
.btn, form button:not(.btn):not(.lw-filter-clear):not(.lw-sort-btn):not([class*="flatpickr"]):not(.close):not([data-dismiss]) {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    height: var(--sf-h); padding: 0 0.9rem; margin: 0;
    font-family: inherit; font-size: var(--sf-fs-sm); font-weight: 500; line-height: 1;
    border-radius: var(--sf-r-sm); border: 1px solid transparent;
    white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none;
    box-shadow: none; transform: none; text-decoration: none;
    transition: background-color var(--sf-ease), border-color var(--sf-ease), color var(--sf-ease), box-shadow var(--sf-ease);
}
.btn:hover, .btn:focus { text-decoration: none; transform: none; }
.btn:focus, .btn.focus, .btn:focus-visible { outline: 0; box-shadow: var(--sf-focus) !important; }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn i, .btn svg, .btn .fa, .btn .fas, .btn .far, .btn .fab { font-size: 0.92em; width: auto; flex: none; opacity: 0.95; }
.btn svg { width: 14px; height: 14px; }

.btn-sm, .btn-group-sm > .btn { height: var(--sf-h-sm); padding: 0 0.65rem; font-size: var(--sf-fs-xs); border-radius: var(--sf-r-sm); gap: 0.38rem; }
.btn-lg, .btn-group-lg > .btn { height: var(--sf-h-lg); padding: 0 1.15rem; font-size: var(--sf-fs); border-radius: var(--sf-r); }
.btn-xs { height: 24px; padding: 0 0.5rem; font-size: var(--sf-fs-2xs); border-radius: var(--sf-r-xs); gap: 0.3rem; }
.btn-block { display: flex; width: 100%; }

.btn-icon { width: var(--sf-h); padding: 0; }
.btn-icon.btn-sm { width: var(--sf-h-sm); padding: 0; }
.btn-icon.btn-lg { width: var(--sf-h-lg); padding: 0; }
.btn-icon.btn-xs { width: 24px; padding: 0; }

.btn-primary, form button:not(.btn):not(.lw-filter-clear):not(.lw-sort-btn):not([class*="flatpickr"]):not(.close):not([data-dismiss]) {
    background: var(--sf-accent); border-color: #5b85ff; color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 1px 2px rgba(0,0,0,0.35);
}
.btn-primary:hover, form button:not(.btn):not(.lw-filter-clear):not(.lw-sort-btn):not([class*="flatpickr"]):not(.close):not([data-dismiss]):hover {
    background: var(--sf-accent-hover); border-color: #7396ff; color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 1px 2px rgba(0,0,0,0.35);
}
.btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active { background: var(--sf-accent-press) !important; border-color: var(--sf-accent-press) !important; box-shadow: none; }

.btn-secondary, .btn-light, .btn-default, .btn-outline-secondary, .btn-outline-light, .btn-dark, .btn-outline-dark {
    background: var(--sf-surface-3); border-color: var(--sf-border-strong); color: var(--sf-text);
    box-shadow: var(--sf-hairline), 0 1px 2px rgba(0,0,0,0.25);
}
.btn-secondary:hover, .btn-light:hover, .btn-default:hover, .btn-outline-secondary:hover, .btn-outline-light:hover, .btn-dark:hover, .btn-outline-dark:hover {
    background: #222836; border-color: var(--sf-border-hover); color: #fff;
}
.btn-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled).active {
    background: #262d3c; border-color: var(--sf-border-hover); color: #fff;
}
.btn-ghost, .btn-link { background: transparent; border-color: transparent; color: var(--sf-text-2); box-shadow: none; }
.btn-ghost:hover, .btn-link:hover { background: rgba(255, 255, 255, 0.055); color: var(--sf-text); text-decoration: none; }

.btn-outline-primary { background: var(--sf-accent-soft); border-color: var(--sf-accent-border); color: var(--sf-accent-text); }
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active { background: rgba(79,124,255,0.2); border-color: var(--sf-accent); color: #fff; }

.btn-success, .btn-outline-success { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }
.btn-success:hover, .btn-outline-success:hover { background: rgba(74, 222, 128, 0.16); border-color: rgba(74, 222, 128, 0.45); color: #bbf7d0; }
.btn-warning, .btn-outline-warning { background: var(--sf-warning-soft); border-color: var(--sf-warning-border); color: var(--sf-warning-text); }
.btn-warning:hover, .btn-outline-warning:hover { background: rgba(251, 191, 36, 0.16); border-color: rgba(251, 191, 36, 0.45); color: #fde68a; }
.btn-info, .btn-outline-info { background: var(--sf-info-soft); border-color: var(--sf-info-border); color: var(--sf-info-text); }
.btn-info:hover, .btn-outline-info:hover { background: rgba(96, 165, 250, 0.16); border-color: rgba(96, 165, 250, 0.45); color: #bfdbfe; }
.btn-outline-danger, .btn-danger-soft, .btn-cancel { background: transparent; border-color: var(--sf-danger-border); color: var(--sf-danger-text); }
.btn-outline-danger:hover, .btn-danger-soft:hover, .btn-cancel:hover { background: var(--sf-danger-soft); border-color: rgba(248, 113, 113, 0.5); color: #fecaca; }
.btn-danger { background: var(--sf-danger-solid); border-color: #e45b5b; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 1px 2px rgba(0,0,0,0.35); }
.btn-danger:hover { background: #e55a5a; border-color: #ec6d6d; color: #fff; }
.btn-cancel { height: var(--sf-h); padding: 0 0.9rem; font-size: var(--sf-fs-sm); font-weight: 500; border-radius: var(--sf-r-sm); }

.sf-btn-row { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.sf-btn-row.tight { gap: 0.25rem; }
.sf-btn-group { display: inline-flex; border-radius: var(--sf-r-sm); box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.sf-btn-group > .btn { border-radius: 0; margin-left: -1px; box-shadow: none; }
.sf-btn-group > .btn:first-child { border-radius: var(--sf-r-sm) 0 0 var(--sf-r-sm); margin-left: 0; }
.sf-btn-group > .btn:last-child { border-radius: 0 var(--sf-r-sm) var(--sf-r-sm) 0; }
.sf-btn-group > .btn:only-child { border-radius: var(--sf-r-sm); }
.sf-btn-group > .btn:hover { position: relative; z-index: 1; }

.back-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    height: var(--sf-h-sm); padding: 0 0.6rem 0 0.4rem; border-radius: var(--sf-r-sm);
    background: transparent; border: 1px solid transparent; color: var(--sf-muted);
    font-size: var(--sf-fs-xs); font-weight: 500;
}
.back-btn:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--sf-border); color: var(--sf-text); }
.back-btn .ico { width: 16px; height: 16px; background: transparent; }
.back-btn:hover .ico { background: transparent; transform: translateX(-2px); }

/* 6. Badges, status, tags -------------------------------------------------- */
.badge, .sf-badge {
    display: inline-flex; align-items: center; gap: 0.32rem;
    height: 22px; padding: 0 0.55rem; border-radius: 999px;
    font-size: var(--sf-fs-2xs); font-weight: 500; line-height: 1; letter-spacing: 0.005em;
    text-transform: none; white-space: nowrap; vertical-align: middle;
    background: rgba(255, 255, 255, 0.06); color: var(--sf-text-2); border: 1px solid rgba(255, 255, 255, 0.07);
}
.badge-pill { border-radius: 999px; }
.badge.square, .sf-badge.square { border-radius: var(--sf-r-xs); }
.badge-primary, .sf-badge.accent { background: var(--sf-accent-soft); color: var(--sf-accent-text); border-color: var(--sf-accent-border); }
.badge-success, .sf-badge.success { background: var(--sf-success-soft); color: var(--sf-success-text); border-color: var(--sf-success-border); }
.badge-error, .badge-danger, .sf-badge.danger { background: var(--sf-danger-soft); color: var(--sf-danger-text); border-color: var(--sf-danger-border); }
.badge-warning, .sf-badge.warning { background: var(--sf-warning-soft); color: var(--sf-warning-text); border-color: var(--sf-warning-border); }
.badge-info, .sf-badge.info { background: var(--sf-info-soft); color: var(--sf-info-text); border-color: var(--sf-info-border); }
.badge-secondary, .badge-light, .badge-dark, .sf-badge.neutral { background: rgba(255, 255, 255, 0.06); color: var(--sf-text-2); border-color: rgba(255, 255, 255, 0.07); }
.sf-badge.mono, .badge.mono { font-family: var(--sf-mono); font-size: 10.5px; border-radius: var(--sf-r-xs); }
.badge.dot::before, .sf-badge.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* Status = soft pill with a dot. */
.sf-status {
    display: inline-flex; align-items: center; gap: 0.4rem; height: 22px; padding: 0 0.55rem;
    border-radius: 999px; font-size: var(--sf-fs-2xs); font-weight: 500; white-space: nowrap; line-height: 1;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); color: var(--sf-text-2);
}
.sf-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-faint); flex: none; }
.sf-status.success, .sf-status.on { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }
.sf-status.success::before, .sf-status.on::before { background: var(--sf-success); box-shadow: 0 0 0 3px rgba(74,222,128,0.14); }
.sf-status.danger, .sf-status.off { background: var(--sf-danger-soft); border-color: var(--sf-danger-border); color: var(--sf-danger-text); }
.sf-status.danger::before, .sf-status.off::before { background: var(--sf-danger); }
.sf-status.warning { background: var(--sf-warning-soft); border-color: var(--sf-warning-border); color: var(--sf-warning-text); }
.sf-status.warning::before { background: var(--sf-warning); }
.sf-status.info, .sf-status.running { background: var(--sf-accent-soft); border-color: var(--sf-accent-border); color: var(--sf-accent-text); }
.sf-status.info::before, .sf-status.running::before { background: var(--sf-accent); }
.sf-status.running::before { animation: sf-blink 1.4s ease-in-out infinite; }
/* Finished runs ("Completed"): a calm sky blue, apart from the green of
   on/active states and the blinking accent of running ones. */
.sf-status.done { background: var(--sf-info-soft); border-color: var(--sf-info-border); color: var(--sf-info-text); }
.sf-status.done::before { background: var(--sf-info); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16); }
.sf-status.plain { background: transparent; border-color: transparent; padding: 0; height: auto; }
@keyframes sf-blink { 50% { opacity: 0.35; } }

.sf-metric { display: inline-flex; align-items: baseline; gap: 0.3rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); white-space: nowrap; }
.sf-metric b { color: var(--sf-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.sf-metric.success b { color: var(--sf-success-text); }
.sf-metric.danger b { color: var(--sf-danger-text); }
.sf-metric.warning b { color: var(--sf-warning-text); }
.sf-metrics { display: inline-flex; flex-wrap: wrap; gap: 0.35rem 1rem; }

/* 7. Tables ---------------------------------------------------------------- */
table th {
    color: var(--sf-muted); font-size: var(--sf-fs-2xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
}
table th, table td { border-bottom-color: var(--sf-border); }
.sf-table-wrap { width: 100%; overflow-x: auto; }
.sf-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--sf-fs-sm); }
.sf-table th {
    text-align: left; padding: 0.7rem 1rem; background: transparent;
    border-bottom: 1px solid var(--sf-border); white-space: nowrap;
}
.sf-table td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--sf-border); vertical-align: middle; color: var(--sf-text-2); transition: background-color var(--sf-ease); }
.sf-table tr:last-child td { border-bottom: 0; }
.sf-table tbody tr:hover td { background: rgba(79, 124, 255, 0.035); }
.sf-table td.primary, .sf-table td .primary { color: var(--sf-text); font-weight: 500; }
.sf-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sf-table .actions { text-align: right; white-space: nowrap; width: 1%; }
.sf-table .actions .sf-btn-row { justify-content: flex-end; flex-wrap: nowrap; }
.sf-table .cell-main { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.sf-panel .sf-table th:first-child, .sf-panel .sf-table td:first-child { padding-left: 1.25rem; }
.sf-panel .sf-table th:last-child, .sf-panel .sf-table td:last-child { padding-right: 1.25rem; }
.sf-panel > .sf-table-wrap:last-child .sf-table tr:last-child td:first-child,
.sf-panel-body.flush:last-child .sf-table tr:last-child td:first-child { border-bottom-left-radius: var(--sf-r-lg); }
.sf-panel > .sf-table-wrap:last-child .sf-table tr:last-child td:last-child,
.sf-panel-body.flush:last-child .sf-table tr:last-child td:last-child { border-bottom-right-radius: var(--sf-r-lg); }
.sf-sub { display: block; font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-top: 0.15rem; }

/* Row list (alternative to tables for entity lists). */
.sf-list { display: flex; flex-direction: column; }
.sf-list-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--sf-border); transition: background-color var(--sf-ease); }
.sf-list-item:last-child { border-bottom: 0; }
.sf-list-item:hover { background: rgba(79, 124, 255, 0.035); }
.sf-list-item .grow { flex: 1; min-width: 0; }

/* 8. Forms ----------------------------------------------------------------- */
form label, .sf-label {
    display: block; margin: 0.95rem 0 0.4rem; font-size: var(--sf-fs-xs); font-weight: 500; color: var(--sf-text-2);
}
.sf-help, .form-text { display: block; font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-top: 0.35rem; }

form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]):not(.lw-filter-input),
form select:not(.lw-filter-input), form textarea:not(.lw-filter-input), .form-control, .sf-input {
    display: block; width: 100%; min-height: var(--sf-h); height: auto; margin: 0;
    padding: 0.45rem 0.75rem; font-family: inherit; font-size: var(--sf-fs-sm); line-height: 1.4;
    background: var(--sf-inset); color: var(--sf-text);
    border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r-sm);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); transition: border-color var(--sf-ease), box-shadow var(--sf-ease), background-color var(--sf-ease);
}
form textarea:not(.lw-filter-input), textarea.form-control, textarea.sf-input { min-height: 92px; resize: vertical; }
form input:not([type="checkbox"]):not([type="radio"]):not(.lw-filter-input):hover,
form select:not(.lw-filter-input):hover, form textarea:not(.lw-filter-input):hover, .form-control:hover, .sf-input:hover { border-color: var(--sf-border-hover); }
form input:not([type="checkbox"]):not([type="radio"]):not(.lw-filter-input):focus,
form select:not(.lw-filter-input):focus, form textarea:not(.lw-filter-input):focus, .form-control:focus, .sf-input:focus {
    outline: 0; border-color: var(--sf-accent); box-shadow: var(--sf-focus); background: #0e121a; color: var(--sf-text);
}
form input::placeholder, form textarea::placeholder, .form-control::placeholder, .sf-input::placeholder { color: var(--sf-faint); }
form input:disabled, form select:disabled, form textarea:disabled, .form-control:disabled, .form-control[readonly], .sf-input:disabled {
    background: var(--sf-surface-2); color: var(--sf-muted); cursor: not-allowed;
}
form select:not(.lw-filter-input):not([multiple]), select.form-control:not([multiple]), select.sf-input:not([multiple]) {
    appearance: none; -webkit-appearance: none; padding-right: 2rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8697' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 14px;
}
form select option, select.form-control option { background: #1a1f2a; color: var(--sf-text); }
.form-control-sm, .sf-input.sm { min-height: var(--sf-h-sm); padding: 0.25rem 0.55rem; font-size: var(--sf-fs-xs); }
.sf-input-mono, form .sf-input-mono { font-family: var(--sf-mono) !important; font-size: var(--sf-fs-xs) !important; }
.is-invalid, .form-control.is-invalid { border-color: var(--sf-danger) !important; }
.invalid-feedback, .sf-error { display: block; color: var(--sf-danger-text); font-size: var(--sf-fs-xs); margin-top: 0.35rem; }

.sf-form-grid { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sf-field { margin-bottom: 1rem; }
.sf-field > label, .sf-field > .sf-label { margin-top: 0; }
.sf-form-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 1.25rem; }
.sf-form-actions.end { justify-content: flex-end; }
.sf-form-section { padding: 1.25rem 0; border-top: 1px solid var(--sf-border); }
.sf-form-section:first-child { border-top: 0; padding-top: 0; }
.sf-form-section > .head { margin-bottom: 0.85rem; }
.sf-form-section > .head .title { font-size: var(--sf-fs); font-weight: 600; color: var(--sf-text); }
.sf-form-section > .head .desc { font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-top: 0.15rem; }
.sf-input-group { display: flex; align-items: stretch; }
.sf-input-group > .sf-input, .sf-input-group > input { border-top-right-radius: 0; border-bottom-right-radius: 0; flex: 1; min-width: 0; }
.sf-input-group > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; height: auto; min-height: var(--sf-h); }
.sf-input-icon { position: relative; }
.sf-input-icon > i { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--sf-muted); font-size: 12px; pointer-events: none; }
.sf-input-icon > input, .sf-input-icon > .sf-input { padding-left: 2.1rem !important; }

/* Checkbox + radio — custom, everywhere except component-owned inputs. */
input[type="checkbox"]:not(.sf-native):not(.custom-control-input):not([data-toggle="toggle"]),
input[type="radio"]:not(.sf-native):not(.custom-control-input) {
    -webkit-appearance: none; appearance: none;
    width: 16px !important; height: 16px; min-width: 16px; margin: 0; padding: 0 !important;
    display: inline-block; vertical-align: -3px; flex: none; cursor: pointer;
    background: var(--sf-inset); border: 1px solid #3a4150; border-radius: var(--sf-r-xs);
    background-repeat: no-repeat; background-position: center; background-size: 12px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    transition: background-color var(--sf-ease), border-color var(--sf-ease), box-shadow var(--sf-ease);
}
input[type="radio"]:not(.sf-native):not(.custom-control-input) { border-radius: 50%; }
input[type="checkbox"]:not(.sf-native):not(.custom-control-input):not([data-toggle="toggle"]):hover,
input[type="radio"]:not(.sf-native):not(.custom-control-input):hover { border-color: #4b5366; }
input[type="checkbox"]:not(.sf-native):not(.custom-control-input):not([data-toggle="toggle"]):focus-visible,
input[type="radio"]:not(.sf-native):not(.custom-control-input):focus-visible { outline: 0; box-shadow: var(--sf-focus); }
input[type="checkbox"]:not(.sf-native):not(.custom-control-input):not([data-toggle="toggle"]):checked {
    background-color: var(--sf-accent); border-color: #6a90ff; box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
input[type="checkbox"]:not(.sf-native):not(.custom-control-input):not([data-toggle="toggle"]):indeterminate {
    background-color: var(--sf-accent); border-color: #6a90ff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E");
}
input[type="radio"]:not(.sf-native):not(.custom-control-input):checked {
    border-color: var(--sf-accent); background-color: var(--sf-inset);
    background-image: radial-gradient(circle, var(--sf-accent) 0 4px, transparent 4.5px);
    background-size: 100% 100%;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: 0.45; cursor: not-allowed; }

.sf-check { display: inline-flex !important; align-items: center; gap: 0.55rem; margin: 0 !important; cursor: pointer; font-size: var(--sf-fs-sm); color: var(--sf-text-2); font-weight: 400; user-select: none; }
.sf-check:hover { color: var(--sf-text); }
.sf-check .desc { display: block; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.sf-check-list { display: flex; flex-direction: column; gap: 0.6rem; }
.sf-check-inline { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

.sf-check-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sf-check-card {
    position: relative; display: flex !important; align-items: flex-start; gap: 0.65rem;
    margin: 0 !important; padding: 0.75rem 0.85rem; cursor: pointer; user-select: none;
    background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r);
    font-size: var(--sf-fs-sm); font-weight: 400; color: var(--sf-text-2);
    transition: border-color var(--sf-ease), background-color var(--sf-ease), box-shadow var(--sf-ease);
}
.sf-check-card:hover { border-color: var(--sf-border-hover); background: #11151c; }
.sf-check-card:has(input:checked) { border-color: var(--sf-accent-border); background: rgba(79, 124, 255, 0.07); color: var(--sf-text); box-shadow: 0 0 0 1px rgba(79,124,255,0.18) inset; }
.sf-check-card input { margin-top: 1px !important; }
.sf-check-card .title { display: block; color: var(--sf-text); font-weight: 500; line-height: 1.35; }
.sf-check-card .title.mono { font-family: var(--sf-mono); font-size: var(--sf-fs-xs); }
.sf-check-card .desc { display: block; font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-top: 0.15rem; line-height: 1.4; }

/* Big selectable option cards (platform picker, plan picker…). */
.sf-option-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.sf-option {
    position: relative; display: flex !important; flex-direction: column; align-items: flex-start; gap: 0.6rem;
    margin: 0 !important; padding: 0.95rem; cursor: pointer; user-select: none;
    background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg);
    transition: border-color var(--sf-ease), background-color var(--sf-ease), box-shadow var(--sf-ease), transform var(--sf-ease);
}
.sf-option:hover { border-color: var(--sf-border-hover); transform: translateY(-1px); }
.sf-option:has(input:checked), .sf-option.active { border-color: var(--sf-accent); background: rgba(79,124,255,0.07); box-shadow: 0 0 0 3px rgba(79,124,255,0.14); }
.sf-option > input[type="radio"], .sf-option > input[type="checkbox"] { position: absolute; top: 0.8rem; right: 0.8rem; }
.sf-option .title { font-weight: 600; color: var(--sf-text); font-size: var(--sf-fs-sm); }
.sf-option .desc { font-size: var(--sf-fs-xs); color: var(--sf-muted); line-height: 1.4; }

/* Switch — restyle of label.toggle > input + .track. */
label.toggle:not(.btn) input[type="checkbox"], .toggle:not(.btn) input[type="checkbox"] {
    position: absolute !important; opacity: 0; width: 0 !important; height: 0; min-width: 0; pointer-events: none;
}
label.toggle:not(.btn), .toggle:not(.btn) { display: inline-flex; align-items: center; gap: 0.65rem; margin: 0; cursor: pointer; font-size: var(--sf-fs-sm); color: var(--sf-text-2); font-weight: 500; }
.toggle:not(.btn) .track { width: 36px; height: 20px; background: #2a303d; border-radius: 999px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.35); }
.toggle:not(.btn) .track::before { width: 14px; height: 14px; left: 3px; top: 3px; background: #9aa1b0; box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.toggle:not(.btn) input:checked + .track, .toggle:not(.btn) input:checked:hover + .track { background: var(--sf-accent); }
.toggle:not(.btn) input:checked + .track::before { transform: translateX(16px); background: #fff; }
.toggle:not(.btn):hover .track { background: #333a49; }
.toggle:not(.btn) input:focus-visible + .track { box-shadow: var(--sf-focus); }
.toggle-desc { font-size: var(--sf-fs-xs); color: var(--sf-muted); }

.sf-setting { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 0; border-bottom: 1px solid var(--sf-border); }
.sf-setting:last-child { border-bottom: 0; }
.sf-setting .title { font-size: var(--sf-fs-sm); font-weight: 500; color: var(--sf-text); }
.sf-setting .desc { font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-top: 0.15rem; }

/* 9. Tabs, segmented ------------------------------------------------------- */
/* The base line is an inset shadow and the tabs stay inside it: a
   tab hanging 1px below the box made the row 1px taller than itself,
   so overflow-x:auto also gave it a small vertical scroll. */
.sf-tabs { display: flex; gap: 0.25rem; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--sf-border); margin-bottom: 1.25rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.sf-tabs a, .sf-tabs button {
    display: inline-flex; align-items: center; gap: 0.45rem; height: 40px; padding: 0 0.85rem; margin-bottom: 0;
    background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none;
    color: var(--sf-muted); font-size: var(--sf-fs-sm); font-weight: 500; white-space: nowrap; cursor: pointer;
    transition: color var(--sf-ease), border-color var(--sf-ease);
}
.sf-tabs a i, .sf-tabs button i { font-size: 12px; opacity: 0.85; }
.sf-tabs a:hover, .sf-tabs button:hover { color: var(--sf-text); border-bottom-color: var(--sf-border-hover); }
.sf-tabs a.active, .sf-tabs button.active { color: var(--sf-text); border-bottom-color: var(--sf-accent); }
.sf-tabs a.active i, .sf-tabs button.active i { color: var(--sf-accent-text); opacity: 1; }
.sf-tabs .count { font-size: var(--sf-fs-2xs); color: var(--sf-text-2); background: rgba(255,255,255,0.07); padding: 0 0.4rem; border-radius: 999px; height: 18px; display: inline-flex; align-items: center; }
/* Pill variant: <nav class="sf-tabs pills"> */
.sf-tabs.pills { border-bottom: 0; box-shadow: none; gap: 0.3rem; padding: 4px; background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg); display: inline-flex; max-width: 100%; }
.sf-tabs.pills a, .sf-tabs.pills button { height: 32px; border-bottom: 0; margin: 0; border-radius: var(--sf-r-sm); }
.sf-tabs.pills a:hover, .sf-tabs.pills button:hover { background: rgba(255,255,255,0.04); }
.sf-tabs.pills a.active, .sf-tabs.pills button.active { background: var(--sf-surface-3); box-shadow: var(--sf-hairline), 0 1px 2px rgba(0,0,0,0.35); }

.sf-segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r); }
.sf-segmented a, .sf-segmented button, .sf-segmented label {
    display: inline-flex; align-items: center; gap: 0.35rem; height: 26px; padding: 0 0.7rem; margin: 0;
    background: none; border: 0; border-radius: var(--sf-r-sm); color: var(--sf-muted); font-size: var(--sf-fs-xs); font-weight: 500; cursor: pointer; box-shadow: none;
}
.sf-segmented .active, .sf-segmented a:hover, .sf-segmented button:hover { color: var(--sf-text); }
.sf-segmented .active { background: var(--sf-surface-3); box-shadow: var(--sf-hairline), 0 1px 2px rgba(0,0,0,0.35); }

/* 10. Stats / KPI, key-value, empty, alerts, code ------------------------- */
/* KPI cards: separate raised cards with an optional tinted icon chip.
   <div class="sf-stats"><div class="sf-stat"><div class="sf-stat-icon success"><i class="fas fa-check"></i></div>
   <div class="label">…</div><div class="value">…</div><div class="hint">…</div></div></div> */
.sf-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 1.25rem; }
.sf-stat {
    position: relative; background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg);
    padding: 1rem 1.15rem; box-shadow: var(--sf-hairline), var(--sf-shadow-2); min-width: 0;
}
.sf-stat .label { font-size: var(--sf-fs-xs); color: var(--sf-muted); font-weight: 500; }
.sf-stat .value { font-size: var(--sf-fs-2xl); font-weight: 650; color: var(--sf-text); margin-top: 0.3rem; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.sf-stat .value small { font-size: var(--sf-fs-sm); font-weight: 500; color: var(--sf-muted); letter-spacing: 0; margin-left: 0.2rem; }
.sf-stat .value.sm { font-size: var(--sf-fs-lg); }
.sf-stat .hint { font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-top: 0.3rem; }
.sf-stat .value.success { color: var(--sf-success-text); }
.sf-stat .value.warning { color: var(--sf-warning-text); }
.sf-stat .value.danger { color: var(--sf-danger-text); }
.sf-stat-icon {
    position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px; border-radius: var(--sf-r);
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
    background: var(--sf-accent-soft); border: 1px solid var(--sf-accent-border); color: var(--sf-accent-text);
}
.sf-stat-icon.success { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }
.sf-stat-icon.warning { background: var(--sf-warning-soft); border-color: var(--sf-warning-border); color: var(--sf-warning-text); }
.sf-stat-icon.danger  { background: var(--sf-danger-soft);  border-color: var(--sf-danger-border);  color: var(--sf-danger-text); }
.sf-stat-icon.info    { background: var(--sf-info-soft);    border-color: var(--sf-info-border);    color: var(--sf-info-text); }
.sf-stat-icon.violet  { background: var(--sf-violet-soft);  border-color: rgba(167,139,250,.3);     color: #c4b5fd; }
.sf-stat-icon.neutral { background: var(--sf-surface-3);    border-color: var(--sf-border-strong);  color: var(--sf-text-2); }
a.sf-stat { color: inherit; text-decoration: none; transition: border-color var(--sf-ease), transform var(--sf-ease); }
a.sf-stat:hover { border-color: var(--sf-border-hover); transform: translateY(-1px); color: inherit; }

/* Generic tinted icon chip (lists, empty states, headers). */
.sf-icon-chip { width: 32px; height: 32px; flex: none; border-radius: var(--sf-r); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; background: var(--sf-surface-3); border: 1px solid var(--sf-border-strong); color: var(--sf-text-2); }
.sf-icon-chip.accent  { background: var(--sf-accent-soft);  border-color: var(--sf-accent-border);  color: var(--sf-accent-text); }
.sf-icon-chip.success { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }
.sf-icon-chip.warning { background: var(--sf-warning-soft); border-color: var(--sf-warning-border); color: var(--sf-warning-text); }
.sf-icon-chip.danger  { background: var(--sf-danger-soft);  border-color: var(--sf-danger-border);  color: var(--sf-danger-text); }
.sf-icon-chip.violet  { background: var(--sf-violet-soft);  border-color: rgba(167,139,250,.3);     color: #c4b5fd; }
.sf-icon-chip.sm { width: 26px; height: 26px; font-size: 11px; border-radius: var(--sf-r-sm); }

.sf-progress { height: 6px; border-radius: 999px; background: var(--sf-surface-3); overflow: hidden; }
.sf-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--sf-accent); transition: width .4s ease; }
.sf-progress.success > span { background: var(--sf-success); }
.sf-progress.warning > span { background: var(--sf-warning); }
.sf-progress.danger > span { background: var(--sf-danger); }

.sf-dl { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 0.6rem 1.5rem; margin: 0; font-size: var(--sf-fs-sm); }
.sf-dl dt { color: var(--sf-muted); font-weight: 400; }
.sf-dl dd { margin: 0; color: var(--sf-text); min-width: 0; overflow-wrap: anywhere; }

.sf-empty { text-align: center; padding: 3rem 1.25rem; color: var(--sf-muted); font-size: var(--sf-fs-sm); }
.sf-empty .ico {
    width: 52px; height: 52px; margin: 0 auto 0.9rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    background: var(--sf-accent-soft); border: 1px solid var(--sf-accent-border); color: var(--sf-accent-text);
    box-shadow: 0 0 0 8px rgba(79,124,255,0.05);
}
.sf-empty .title { color: var(--sf-text); font-weight: 600; font-size: var(--sf-fs-md); margin-bottom: 0.3rem; }
.sf-empty p { max-width: 46ch; margin: 0 auto; }
.sf-empty .actions { margin-top: 1.1rem; display: flex; gap: 0.5rem; justify-content: center; }

.sf-alert { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.8rem 1rem; border-radius: var(--sf-r); border: 1px solid var(--sf-border-strong); background: var(--sf-surface-2); font-size: var(--sf-fs-sm); color: var(--sf-text-2); margin-bottom: 1.25rem; }
.sf-alert > i, .sf-alert > svg { margin-top: 2px; flex: none; }
.sf-alert .title { color: var(--sf-text); font-weight: 600; display: block; margin-bottom: 0.1rem; }
.sf-alert.info { background: var(--sf-info-soft); border-color: var(--sf-info-border); color: var(--sf-info-text); }
.sf-alert.success { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }
.sf-alert.warning { background: var(--sf-warning-soft); border-color: var(--sf-warning-border); color: var(--sf-warning-text); }
.sf-alert.danger { background: var(--sf-danger-soft); border-color: var(--sf-danger-border); color: var(--sf-danger-text); }
.sf-alert.info .title, .sf-alert.success .title, .sf-alert.warning .title, .sf-alert.danger .title { color: inherit; }

.sf-code {
    position: relative; margin: 0.85rem 0; padding: 0.95rem 1.1rem; overflow-x: auto;
    background: #090b10; border: 1px solid var(--sf-border); border-radius: var(--sf-r);
    font-family: var(--sf-mono); font-size: 12.5px; line-height: 1.65; color: #d4d9e4; white-space: pre;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.sf-code code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.sf-code-wrap { position: relative; }
.sf-code-wrap > .sf-copy { position: absolute; top: 0.55rem; right: 0.55rem; z-index: 1; opacity: 0.85; }
.sf-code-wrap:hover > .sf-copy { opacity: 1; }
.sf-code-head { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0.55rem 0.45rem 0.95rem; background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-bottom: 0; border-radius: var(--sf-r) var(--sf-r) 0 0; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.sf-code-head + .sf-code, .sf-code-head + .sf-code-wrap > .sf-code { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

.sf-kbd, kbd { font-family: var(--sf-mono); font-size: 11px; padding: 0.05rem 0.38rem; border-radius: var(--sf-r-xs); background: var(--sf-surface-3); border: 1px solid var(--sf-border-strong); color: var(--sf-text-2); box-shadow: 0 1px 0 rgba(0,0,0,0.4); }
.sf-divider { height: 1px; background: var(--sf-border); margin: 1.25rem 0; border: 0; }
.sf-section-title { font-size: var(--sf-fs-xs); font-weight: 600; color: var(--sf-muted); margin: 1.5rem 0 0.7rem; display: flex; align-items: center; gap: 0.5rem; }
.sf-section-title::after { content: ''; flex: 1; height: 1px; background: var(--sf-border); }

.modal-content { background: var(--sf-surface-raised); border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r-xl); color: var(--sf-text); box-shadow: var(--sf-shadow-pop); }
.modal-header, .modal-footer { border-color: var(--sf-border); }
.modal-backdrop.show { opacity: 0.65; }
.close { color: var(--sf-text-2); text-shadow: none; opacity: 0.7; }
.close:hover { color: #fff; opacity: 1; }
.dropdown-menu { background: #161a23; border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r); box-shadow: var(--sf-shadow-pop); padding: 0.3rem; font-size: var(--sf-fs-sm); }
.dropdown-item { color: var(--sf-text-2); border-radius: var(--sf-r-sm); padding: 0.45rem 0.65rem; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(255,255,255,0.055); color: var(--sf-text); }
.tooltip-inner { background: #232938; color: var(--sf-text); font-size: var(--sf-fs-xs); border-radius: var(--sf-r-sm); padding: 0.3rem 0.55rem; }
.progress { background: var(--sf-surface-3); border-radius: 999px; height: 6px; }
.progress-bar { background: var(--sf-accent); }

/* 11. Sidebar count badges ------------------------------------------------- */
.sidebar nav a .nav-count {
    margin-left: auto; min-width: 18px; height: 18px; padding: 0 0.35rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.07); color: var(--sf-text-2);
}
.sidebar nav a .nav-count.attn { background: rgba(79, 124, 255, 0.18); color: var(--sf-accent-text); }
.sidebar nav a .nav-tag { margin-left: auto; font-size: 10.5px; font-weight: 500; color: var(--sf-muted); letter-spacing: 0.01em; }
.sidebar nav a .nav-dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-faint); flex: none; }
.sidebar nav a .nav-dot.on { background: var(--sf-success); box-shadow: 0 0 0 3px rgba(74,222,128,0.14); }

/* 12. Vendor themes -------------------------------------------------------- */
/* --- flatpickr --- */
.flatpickr-calendar {
    position: absolute; display: none; visibility: hidden; opacity: 0; box-sizing: border-box;
    width: 284px; padding: 8px; direction: ltr; touch-action: manipulation; user-select: none;
    background: #161a23; border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r-lg);
    box-shadow: var(--sf-shadow-pop); font-size: var(--sf-fs-sm); color: var(--sf-text); animation: none;
}
.flatpickr-calendar.open, .flatpickr-calendar.inline { display: block; visibility: visible; opacity: 1; max-height: 640px; }
.flatpickr-calendar.open { z-index: 99999; }
.flatpickr-calendar.inline { position: relative; top: 2px; }
.flatpickr-calendar.static { position: absolute; top: calc(100% + 4px); }
.flatpickr-calendar.static.open { z-index: 999; display: block; }
.flatpickr-calendar.animate.open { animation: sf-fp-in 0.14s ease-out; }
@keyframes sf-fp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none; }
.flatpickr-calendar:focus { outline: 0; }
.flatpickr-wrapper { position: relative; display: inline-block; }
.flatpickr-months { display: flex; align-items: center; position: relative; height: 34px; margin-bottom: 4px; }
.flatpickr-months .flatpickr-month { flex: 1; height: 34px; position: relative; overflow: hidden; text-align: center; color: var(--sf-text); background: transparent; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    position: absolute; top: 3px; z-index: 3; width: 28px; height: 28px; padding: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    border-radius: var(--sf-r-sm); color: var(--sf-muted); fill: var(--sf-muted); text-decoration: none;
}
.flatpickr-months .flatpickr-prev-month { left: 0; }
.flatpickr-months .flatpickr-next-month { right: 0; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: rgba(255,255,255,0.06); color: var(--sf-text); fill: var(--sf-text); }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { width: 12px; height: 12px; }
.flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path { fill: inherit; }
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled, .flatpickr-months .flatpickr-next-month.flatpickr-disabled { display: none; }
.flatpickr-current-month {
    position: absolute; left: 12.5%; width: 75%; height: 34px; padding: 0; line-height: 34px;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    font-size: var(--sf-fs-sm); font-weight: 600; color: var(--sf-text);
}
.flatpickr-current-month span.cur-month { font-weight: 600; margin: 0; }
.flatpickr-current-month .flatpickr-monthDropdown-months {
    appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: var(--sf-r-sm);
    color: var(--sf-text); cursor: pointer; font: inherit; height: 26px; margin: 0; outline: none; padding: 0 4px; width: auto; box-shadow: none; min-height: 0;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: rgba(255,255,255,0.06); }
.flatpickr-current-month .flatpickr-monthDropdown-months option { background: #1a1f2a; color: var(--sf-text); }
.flatpickr-current-month .numInputWrapper { width: 6ch; display: inline-block; }
.flatpickr-current-month input.cur-year {
    background: transparent; border: 0; border-radius: var(--sf-r-sm); color: var(--sf-text); cursor: text;
    font: inherit; height: 26px; margin: 0; padding: 0 4px; width: 100%; appearance: textfield; -moz-appearance: textfield; box-shadow: none; min-height: 0;
}
.flatpickr-current-month input.cur-year:hover, .flatpickr-current-month input.cur-year:focus { background: rgba(255,255,255,0.06); outline: 0; box-shadow: none; }
.numInputWrapper { position: relative; height: auto; }
.numInputWrapper input::-webkit-outer-spin-button, .numInputWrapper input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.numInputWrapper span { display: none; }
.flatpickr-innerContainer { display: flex; box-sizing: border-box; overflow: hidden; }
.flatpickr-rContainer { display: inline-block; padding: 0; box-sizing: border-box; }
.flatpickr-weekdays { display: flex; align-items: center; width: 100%; height: 26px; overflow: hidden; }
.flatpickr-weekdaycontainer { display: flex; flex: 1; }
span.flatpickr-weekday { flex: 1; display: block; margin: 0; text-align: center; cursor: default; font-size: var(--sf-fs-2xs); font-weight: 500; color: var(--sf-muted); background: transparent; line-height: 1; }
.flatpickr-days { position: relative; display: flex; align-items: flex-start; overflow: hidden; width: 266px; }
.dayContainer { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 266px; min-width: 266px; max-width: 266px; padding: 0; outline: 0; box-sizing: border-box; opacity: 1; transform: translate3d(0,0,0); }
.flatpickr-day {
    display: inline-flex; align-items: center; justify-content: center; position: relative; box-sizing: border-box;
    flex-basis: 38px; width: 38px; max-width: 38px; height: 34px; margin: 0;
    background: none; border: 1px solid transparent; border-radius: var(--sf-r-sm);
    color: var(--sf-text-2); cursor: pointer; font-weight: 400; font-variant-numeric: tabular-nums;
}
.flatpickr-day:hover, .flatpickr-day:focus { background: rgba(255,255,255,0.06); color: var(--sf-text); outline: 0; }
.flatpickr-day.today { border-color: var(--sf-border-hover); color: var(--sf-text); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: var(--sf-accent); border-color: var(--sf-accent); color: #fff; }
.flatpickr-day.inRange { background: var(--sf-accent-soft); border-color: transparent; border-radius: 0; color: var(--sf-text); }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--sf-faint); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.notAllowed { color: #3b414e; background: transparent; cursor: not-allowed; }
.flatpickr-day.hidden { visibility: hidden; }
.flatpickr-time { display: flex; align-items: center; box-sizing: border-box; overflow: hidden; outline: 0; height: 0; max-height: 40px; line-height: 40px; text-align: center; }
.flatpickr-calendar.hasTime .flatpickr-time { height: 40px; margin-top: 6px; border-top: 1px solid var(--sf-border); padding-top: 6px; }
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time { margin-top: 0; border-top: 0; padding-top: 0; }
.flatpickr-calendar.noCalendar { width: 180px; }
.flatpickr-time .numInputWrapper { flex: 1; height: 34px; }
.flatpickr-time input {
    width: 100%; height: 34px; min-height: 0; margin: 0; padding: 0; text-align: center; box-shadow: none;
    background: transparent; border: 0; border-radius: var(--sf-r-sm); color: var(--sf-text);
    font: inherit; font-size: var(--sf-fs); font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield;
}
.flatpickr-time input:hover, .flatpickr-time input:focus { background: rgba(255,255,255,0.06); outline: 0; box-shadow: none; }
.flatpickr-time .flatpickr-time-separator { width: 10px; color: var(--sf-muted); align-self: center; line-height: 1; }
.flatpickr-time .flatpickr-am-pm { width: 40px; cursor: pointer; color: var(--sf-text-2); border-radius: var(--sf-r-sm); }
.flatpickr-time .flatpickr-am-pm:hover { background: rgba(255,255,255,0.06); }
.flatpickr-input[readonly], input.flatpickr-input.form-control[readonly], .flatpickr-input.sf-input[readonly] { background: var(--sf-inset); color: var(--sf-text); cursor: pointer; }
input.flatpickr-alt {
    padding-left: 2.1rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8697' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: 0.7rem center !important; background-size: 14px !important;
}

/* --- bootstrap4-toggle (div.toggle.btn) --- */
.toggle.btn { position: relative; display: inline-block; overflow: hidden; padding: 0; min-width: 64px; min-height: var(--sf-h); gap: 0; cursor: pointer; }
.toggle.btn input[type="checkbox"] { display: none; }
.toggle.btn .toggle-group { position: absolute; top: 0; bottom: 0; left: 0; width: 200%; transition: left 0.2s ease; user-select: none; }
.toggle.btn.off .toggle-group { left: -100%; }
.toggle.btn .toggle-on, .toggle.btn .toggle-off {
    position: absolute; top: 0; bottom: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none;
    display: flex; align-items: center; justify-content: center; height: auto; font-size: var(--sf-fs-xs); font-weight: 500;
}
.toggle.btn .toggle-on { left: 0; right: 50%; padding-right: 1.1rem; }
.toggle.btn .toggle-off { left: 50%; right: 0; padding-left: 1.1rem; }
.toggle.btn .toggle-handle { position: relative; margin: 0 auto; padding: 0; height: 100%; width: 0; border-width: 0 1px; background: #e6e8ee; border-color: transparent; }
.toggle.btn.off { background: var(--sf-surface-3); border-color: var(--sf-border-strong); }
.toggle.btn.btn-sm { min-height: var(--sf-h-sm); min-width: 54px; }

/* --- select2 --- */
.select2-container { font-size: var(--sf-fs-sm); }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { min-height: var(--sf-h); background: var(--sf-inset); border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r-sm); }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--sf-text); line-height: calc(var(--sf-h) - 2px); padding-left: 0.75rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--sf-h) - 2px); }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--sf-faint); }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--sf-accent); box-shadow: var(--sf-focus); }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--sf-surface-3); border: 1px solid var(--sf-border-strong); color: var(--sf-text); border-radius: 999px; font-size: var(--sf-fs-xs); }
.select2-dropdown { background: #161a23; border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r); color: var(--sf-text); box-shadow: var(--sf-shadow-pop); }
.select2-container--default .select2-search--dropdown .select2-search__field { background: var(--sf-inset); border: 1px solid var(--sf-border-strong); color: var(--sf-text); border-radius: var(--sf-r-sm); }
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--sf-accent); color: #fff; }
.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option--selected { background: var(--sf-surface-3); }

/* --- Splide --- */
.splide { position: relative; visibility: hidden; }
.splide.is-initialized, .splide.is-rendered { visibility: visible; }
.splide__track { position: relative; overflow: hidden; z-index: 0; }
.splide__list { display: flex; margin: 0 !important; padding: 0 !important; backface-visibility: hidden; height: 100%; }
.splide__slide { position: relative; flex-shrink: 0; list-style-type: none !important; margin: 0; box-sizing: border-box; }
.splide__arrows { position: absolute; inset: 50% 0 auto 0; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; }
.splide__arrow { pointer-events: auto; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sf-surface-3); border: 1px solid var(--sf-border-strong); color: var(--sf-text); cursor: pointer; box-shadow: var(--sf-shadow-1); }
.splide__arrow svg { width: 12px; height: 12px; fill: currentColor; }
.splide__arrow--prev svg { transform: scaleX(-1); }
.splide__arrow:disabled { opacity: 0.35; }
.splide__pagination { display: flex; justify-content: center; gap: 6px; margin: 0.75rem 0 0; padding: 0; }
.splide__pagination li { list-style: none; }
.splide__pagination__page { width: 6px; height: 6px; border-radius: 50%; border: 0; padding: 0; background: var(--sf-border-hover); cursor: pointer; }
.splide__pagination__page.is-active { background: var(--sf-accent); width: 16px; border-radius: 999px; }
.splide__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- bs-custom-file-input --- */
.custom-file { position: relative; display: block; height: var(--sf-h); }
.custom-file-input { position: relative; z-index: 2; width: 100%; height: var(--sf-h); margin: 0; opacity: 0; cursor: pointer; }
.custom-file-label {
    position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; height: var(--sf-h); margin: 0;
    padding: 0 6.5rem 0 0.75rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-size: var(--sf-fs-sm); font-weight: 400; color: var(--sf-muted);
    background: var(--sf-inset); border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r-sm);
}
.custom-file-label::after {
    content: attr(data-browse); position: absolute; top: 3px; right: 3px; bottom: 3px; z-index: 3;
    display: flex; align-items: center; padding: 0 0.75rem; height: auto; line-height: 1;
    background: var(--sf-surface-3); border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r-xs); color: var(--sf-text); font-size: var(--sf-fs-xs); font-weight: 500;
}
.custom-file-input:lang(ro) ~ .custom-file-label::after, .custom-file-input ~ .custom-file-label:not([data-browse])::after { content: "Alege"; }
.custom-file-input:lang(en) ~ .custom-file-label:not([data-browse])::after { content: "Browse"; }
.custom-file-input:focus ~ .custom-file-label { border-color: var(--sf-accent); box-shadow: var(--sf-focus); }
.custom-file-input.is-selected ~ .custom-file-label, .custom-file-label.selected { color: var(--sf-text); }

/* --- clipboard.js feedback --- */
.sf-copy.is-copied, [data-clipboard-text].is-copied, [data-clipboard-target].is-copied { color: var(--sf-success-text) !important; border-color: var(--sf-success-border) !important; }

/* 13. Utilities ------------------------------------------------------------ */
.sf-mono { font-family: var(--sf-mono); }
.sf-num { font-variant-numeric: tabular-nums; }
.sf-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sf-row { display: flex; align-items: center; gap: 0.5rem; }
.sf-row.between { justify-content: space-between; }
.sf-row.wrap { flex-wrap: wrap; }
.sf-stack { display: flex; flex-direction: column; gap: 0.5rem; }
.sf-text { color: var(--sf-text) !important; }
.sf-text-2 { color: var(--sf-text-2) !important; }
.sf-muted { color: var(--sf-muted) !important; }
.sf-success { color: var(--sf-success-text) !important; }
.sf-danger { color: var(--sf-danger-text) !important; }
.sf-warning { color: var(--sf-warning-text) !important; }
.sf-accent { color: var(--sf-accent-text) !important; }
.sf-fs-xs { font-size: var(--sf-fs-xs) !important; }
.sf-fs-sm { font-size: var(--sf-fs-sm) !important; }
.sf-mt-0 { margin-top: 0 !important; }
.sf-mb-0 { margin-bottom: 0 !important; }
.sf-ml-auto { margin-left: auto !important; }
.sf-w-auto { width: auto !important; }

/* ==========================================================================
   LIVEWIRE FILTER + SORT BAR (moved verbatim — keep this look)
   Source: resources/views/partials/lw-filter-styles.blade.php
   ========================================================================== */
/* Box-ul filtrelor — paleta syncrofeed (același tone ca .card / .sh-card)
   în loc de #111827 din prolog. Mai cald, mai aproape de restul UI. */
.lw-filter-bar {
    background: #14171f;
    border: 1px solid #23262f;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.lw-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: #0f1117;
    border-bottom: 1px solid #21242c;
}
/* Titlul "Filtre" — aceeași nuanță de albastru ca link-urile interne
   (#9ab3ff) ca să se integreze cu paleta dark syncrofeed în loc de
   bright #4e73df/#4f7cff folosit pe prolog. */
.lw-filter-title {
    font-size: .78rem;
    font-weight: 700;
    color: #9ab3ff;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.lw-filter-clear {
    background: none;
    border: 1px solid rgba(255,255,255,.08);
    color: #64748b;
    font-size: .75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.lw-filter-clear:hover { color: #e74a3b; border-color: rgba(231,74,59,.3); }

.lw-filter-body {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
}
.lw-filter-item { flex: 1; min-width: 140px; }
.lw-filter-item--wide { flex: 2; min-width: 220px; }
.lw-filter-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #64748b;
    margin-bottom: 6px;
}
.lw-filter-input {
    /* min-width:100% (not width:100%) lets <select> grow with its content
       so Chrome sizes the dropdown popup to match the longest option. */
    min-width: 100%;
    background: #0f1117;
    border: 1px solid #2a2e38;
    border-radius: 8px;
    color: #e6e8ee;
    padding: 8px 12px;
    font-size: .85rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.lw-filter-input:focus {
    border-color: #4f7cff;
    box-shadow: 0 0 0 3px rgba(79,124,255,0.18);
}
.lw-filter-input::placeholder { color: #6e7383; }
select.lw-filter-input {
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
select.lw-filter-input option {
    background: #1f2330;
    color: #e6e8ee;
}

.lw-sort-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: #14171f;
    border: 1px solid #23262f;
    border-radius: 10px;
    margin-bottom: 0.85rem;
}
.lw-sort-left { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lw-sort-btn {
    background: none;
    border: none;
    color: #8a93a3;
    font-size: .78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.lw-sort-btn:hover { color: #cfd3dc; background: rgba(255,255,255,.04); }
.lw-sort-btn--active { color: #9ab3ff; background: rgba(79,124,255,.14); }

@media (max-width: 767px) {
    .lw-filter-body { flex-direction: column; }
    .lw-filter-item, .lw-filter-item--wide { min-width: 100%; flex: auto; }
}

/* Row-card replacement for the previous <table> — gives breathing room
   and matches prolog's rounded card-per-row look. */
.lw-row {
    background: #14171f;
    border: 1px solid #23262f;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    transition: border-color .15s;
}
.lw-row:hover { border-color: rgba(79,124,255,0.35); }
.lw-row-grid {
    display: grid;
    gap: 0.7rem 1rem;
    align-items: center;
}
.lw-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #64748b;
}
.lw-empty i { font-size: 2.2rem; opacity: 0.4; display: block; margin-bottom: 0.6rem; }

/* Live-update spinner that appears next to the Clear button while a
   wire:model field is debouncing. */
.lw-spinner { color: #4f7cff; margin-right: 12px; font-size: 0.85rem; }

/* ==========================================================================
   LIVEWIRE PAGINATOR (moved verbatim)
   Source: resources/views/partials/lw-paginator.blade.php
   ========================================================================== */
/* Scoped here so removing the partial removes the styles too. */
.lw-pager {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 0.4rem; flex-wrap: wrap;
    margin-top: 0.4rem;
    font-size: 0.84rem;
}
.lw-pager .summary {
    margin-right: auto;
    color: #6e7383;
    font-size: 0.78rem;
}
.lw-pager a, .lw-pager span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px;
    padding: 0 0.55rem;
    background: #14171f;
    border: 1px solid #2a2e38;
    border-radius: 7px;
    color: #cfd3dc;
    text-decoration: none;
    line-height: 1;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.lw-pager a:hover { border-color: #4f7cff; color: #fff; }
.lw-pager .current {
    background: #4f7cff;
    border-color: #4f7cff;
    color: #fff;
    font-weight: 600;
}
.lw-pager .disabled {
    color: #4a4f5e;
    background: #0f1117;
    cursor: not-allowed;
}
.lw-pager .dots {
    border: none; background: none;
    color: #6e7383;
    min-width: 0; padding: 0 0.2rem;
}

/* ==========================================================================
   CONFIRM MODAL (moved verbatim)
   Source: resources/views/partials/confirm-modal.blade.php
   ========================================================================== */
.sync-confirm-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(8, 10, 14, 0.72); backdrop-filter: blur(3px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 12vh 1rem 2rem;
    animation: syncConfirmFade .15s ease-out;
}
@keyframes syncConfirmFade { from { opacity: 0; } to { opacity: 1; } }
.sync-confirm-box {
    width: 100%; max-width: 460px;
    background: #14171f; border: 1px solid #2a2e38; border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
    overflow: hidden;
    animation: syncConfirmPop .18s ease-out;
}
@keyframes syncConfirmPop { from { transform: translateY(-12px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.sync-confirm-head {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1.1rem 1.3rem 0.7rem;
}
.sync-confirm-icon {
    flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(231, 74, 59, 0.14); color: #e74a3b;
    font-size: 1.05rem;
}
.sync-confirm-head h3 { margin: 0; font-size: 1.05rem; color: #e6e8ee; }
.sync-confirm-body { padding: 0.4rem 1.3rem 1rem; color: #cbd5e0; font-size: 0.92rem; line-height: 1.45; }
.sync-confirm-body p { margin: 0; white-space: pre-line; }
.sync-confirm-foot {
    display: flex; justify-content: flex-end; gap: 0.5rem;
    padding: 0.85rem 1.3rem;
    border-top: 1px solid #21242c;
    background: #11141b;
}
.sync-confirm-foot .btn { margin: 0; }
/* Variant: info (non-destructive) — flip the icon + OK button colour. */
.sync-confirm-overlay.is-info .sync-confirm-icon { background: rgba(79,124,255,0.14); color: #4f7cff; }
.sync-confirm-overlay.is-info #syncConfirmOk { background: #4f7cff; border-color: #4f7cff; }
.sync-confirm-overlay.is-warning .sync-confirm-icon { background: rgba(246,194,62,0.14); color: #f6c23e; }
.sync-confirm-overlay.is-warning #syncConfirmOk { background: #f6c23e; border-color: #f6c23e; color: #1a1d24; }

/* ==========================================================================
   LIVE CHAT WIDGET (moved verbatim)
   Source: resources/views/partials/chat-widget.blade.php
   ========================================================================== */
.sc-chat-fab {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 1080;
    width: 2.75rem; height: 2.75rem;
    border: 0; border-radius: 0.4rem;
    background: rgba(78, 115, 223, 0.9);
    color: #fff; font-size: 1.05rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: background .15s, transform .15s;
}
.sc-chat-fab:hover { background: rgba(78, 115, 223, 1); transform: translateY(-1px); }
.sc-chat-fab.is-open { display: none; }
.sc-chat-fab-dot {
    position: absolute; top: 4px; right: 4px;
    width: 9px; height: 9px; border-radius: 50%;
    background: #1cc88a; border: 2px solid #1a1f2e;
    animation: sc-chat-pulse 1.8s ease-out infinite;
}
.sc-chat-fab-badge {
    position: absolute; top: -4px; left: -4px;
    background: #f0a87a; color: #1a1d24;
    font-size: 0.66rem; font-weight: 700; padding: 0.05rem 0.4rem;
    border-radius: 10px; min-width: 18px; text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
@keyframes sc-chat-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(28,200,138,0.6); }
    70%  { box-shadow: 0 0 0 7px rgba(28,200,138,0); }
    100% { box-shadow: 0 0 0 0 rgba(28,200,138,0); }
}

.sc-chat-pop {
    position: fixed; right: 1rem; bottom: calc(1rem + 2.75rem + 0.5rem);
    z-index: 1081;
    width: 380px; max-width: calc(100vw - 2rem);
    max-height: 540px;
    background: #1a1f2e;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    box-shadow: 0 16px 40px -8px rgba(0,0,0,0.55);
    display: none; flex-direction: column; overflow: hidden;
    animation: sc-chat-pop-in .2s ease-out;
}
.sc-chat-pop.is-open { display: flex; }
@keyframes sc-chat-pop-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sc-chat-head {
    padding: 10px 12px;
    background: linear-gradient(135deg, #4e73df, #2c4cd6);
    color: #fff;
    display: flex; justify-content: space-between; align-items: center;
}
.sc-chat-head-title { font-weight: 700; font-size: 0.86rem; }
.sc-chat-head-status {
    font-size: 0.66rem; opacity: 0.9; margin-top: 1px;
    display: flex; align-items: center; gap: 5px;
}
.sc-chat-head-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: #858796; }
.sc-chat-head-dot.is-online { background: #1cc88a; box-shadow: 0 0 5px rgba(28,200,138,0.7); }
.sc-chat-head-close {
    background: transparent; border: 0; color: #fff; cursor: pointer;
    opacity: 0.85; font-size: 0.85rem; padding: 4px 6px;
}
.sc-chat-head-close:hover { opacity: 1; }

.sc-chat-body {
    flex: 1; min-height: 320px; max-height: 400px; overflow-y: auto;
    padding: 14px; display: flex; flex-direction: column; gap: 8px;
    background: #0e1220;
}
.sc-chat-greet { text-align: center; padding: 36px 16px; color: #cbd5e1; }
.sc-chat-greet i { font-size: 1.6rem; display: block; margin-bottom: 6px; opacity: 0.55; }
.sc-chat-greet strong { display: block; color: #fff; font-size: 0.85rem; }
.sc-chat-greet small { color: #858796; font-size: 0.75rem; }

.sc-chat-bub {
    max-width: 80%;
    padding: 7px 11px;
    border-radius: 11px;
    font-size: 0.82rem;
    line-height: 1.4;
}
.sc-chat-bub.is-client {
    align-self: flex-end;
    background: linear-gradient(135deg, #4e73df, #2c4cd6);
    color: #fff;
    border-bottom-right-radius: 3px;
}
.sc-chat-bub.is-admin {
    align-self: flex-start;
    background: rgba(255,255,255,0.06);
    color: #e2e5f1;
    border: 1px solid rgba(255,255,255,0.05);
    border-bottom-left-radius: 3px;
}
.sc-chat-bub-meta { font-size: 0.6rem; opacity: 0.6; margin-bottom: 1px; }
.sc-chat-bub-meta.is-right { text-align: right; margin-top: 2px; margin-bottom: 0; }
.sc-chat-bub-badge {
    display: inline-block;
    font-size: 0.55rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em;
    padding: 1px 6px; border-radius: 8px; margin: 0 2px;
    background: rgba(78,115,223,0.2); color: #4e73df; opacity: 1;
}
.sc-chat-bub-body { white-space: pre-wrap; word-break: break-word; }

.sc-chat-composer {
    display: flex; gap: 6px; padding: 8px; align-items: center;
    background: #1a1f2e; border-top: 1px solid rgba(255,255,255,0.05);
}
.sc-chat-composer-attach {
    width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; color: #cbd5e1; cursor: pointer;
    font-size: 0.85rem; margin: 0;
    transition: color .15s, background .15s;
}
.sc-chat-composer-attach:hover { color: #4e73df; background: rgba(78,115,223,0.1); }

/* Staged-file preview row between thread and composer — matches the
   prolog widget's "you're about to send this" pattern. */
.sc-chat-preview {
    display: none; align-items: center; gap: 6px;
    padding: 8px 12px; font-size: 0.72rem; color: #cbd5e1;
    background: rgba(78,115,223,0.08); border-top: 1px solid rgba(78,115,223,0.2);
}
.sc-chat-preview.is-shown { display: flex; }
.sc-chat-preview span.sc-chat-preview-name {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-chat-preview button {
    background: transparent; border: 0; color: #e74a3b; cursor: pointer;
    font-size: 0.8rem; padding: 2px 6px;
}

/* Attachments rendered inside bubbles. */
.sc-chat-bub-att { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
.sc-chat-bub-img { max-width: 100%; max-height: 200px; border-radius: 8px; display: block; cursor: zoom-in; border: 1px solid rgba(255,255,255,0.08); }
.sc-chat-bub-file { display: inline-block; padding: 4px 8px; background: rgba(255,255,255,0.08); border-radius: 6px; font-size: 0.72rem; color: #cbd5e1; text-decoration: none; }
.sc-chat-bub-file:hover { color: #fff; background: rgba(255,255,255,0.14); }
.sc-chat-bub.is-client .sc-chat-bub-file { background: rgba(255,255,255,0.2); color: #fff; }
.sc-chat-bub.is-client .sc-chat-bub-file:hover { background: rgba(255,255,255,0.32); }
.sc-chat-composer-input {
    flex: 1; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 6px 10px;
    color: #e2e5f1; font-size: 0.82rem; outline: none; font-family: inherit;
}
.sc-chat-composer-input:focus { border-color: rgba(78,115,223,0.5); }
.sc-chat-composer-send {
    background: linear-gradient(135deg, #4e73df, #2c4cd6);
    color: #fff; border: 0; border-radius: 8px;
    width: 34px; height: 34px; cursor: pointer;
    font-size: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    transition: filter .15s;
}
.sc-chat-composer-send:hover { filter: brightness(1.1); }

@media (max-width: 480px) {
    .sc-chat-pop { right: 0.5rem; width: calc(100vw - 1rem); }
}
.ch-lightbox {
    position:fixed; inset:0; z-index:1090;
    background:rgba(8,10,14,0.85); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    padding:2rem; cursor:zoom-out;
    animation: chLbFade .15s ease-out;
}
@keyframes chLbFade { from { opacity:0; } to { opacity:1; } }
.ch-lightbox img { max-width:90vw; max-height:85vh; border-radius:10px; box-shadow:0 30px 60px rgba(0,0,0,0.5); cursor:default; }
.ch-lightbox-close {
    position:absolute; top:1.2rem; right:1.4rem;
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,0.08); color:#fff; border:0;
    font-size:1.6rem; cursor:pointer; line-height:1;
    display:flex; align-items:center; justify-content:center;
}
.ch-lightbox-close:hover { background:rgba(255,255,255,0.18); }
.ch-lightbox-caption {
    position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%);
    color:#cfd3dc; font-size:0.85rem;
    background:rgba(0,0,0,0.6); padding:0.4rem 0.85rem; border-radius:20px;
}

/* Widget-internal media gallery overlay — slides over the thread when
   the user toggles "Media" in the header. Same panel dimensions. */
.sc-chat-media {
    display:none; flex-direction:column; flex:1;
    padding:0.8rem; gap:0.4rem; background:#0e1220;
    overflow-y:auto;
}
.sc-chat-media.is-shown { display:flex; }
.sc-chat-media h5 { margin:0 0 0.4rem; font-size:0.78rem; color:#cbd5e1; }
.sc-chat-media-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:0.35rem; }
.sc-chat-media-tile { aspect-ratio:1/1; border-radius:6px; overflow:hidden; cursor:zoom-in; border:1px solid #21242c; background:#1a1f2e; display:block; }
.sc-chat-media-tile img { width:100%; height:100%; object-fit:cover; transition:transform .15s; }
.sc-chat-media-tile:hover img { transform:scale(1.05); }
.sc-chat-media-empty { text-align:center; color:#6e7383; padding:1.5rem 0; font-size:0.82rem; }
.sc-chat-media-toggle {
    background:transparent; border:0; color:#fff; cursor:pointer;
    opacity:0.85; font-size:0.78rem; padding:4px 8px; margin-right:4px;
    display:flex; align-items:center; gap:0.3rem;
}
.sc-chat-media-toggle:hover { opacity:1; }
.sc-chat-media-toggle .badge-count {
    background:rgba(255,255,255,0.2); color:#fff;
    font-size:0.62rem; padding:0.05rem 0.4rem; border-radius:10px; min-width:18px;
}

/* ==========================================================================
   PAGES
   Page-scoped styles (class prefix per page). Moved out of the Blade views.
   ========================================================================== */
/* ---- page: acct ---------------------------------------------------- */

/* from resources/views/settings/two-factor/show.blade.php */
.pg-acct-2fa { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; max-width: 1180px; }
.pg-acct-2fa > * { min-width: 0; }
.pg-acct-2fa-head { max-width: 1180px; }
.sf-page-icon.pg-acct-ok, .sf-panel-icon.pg-acct-ok, .sf-icon-chip.pg-acct-ok { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }

/* Security status card */
.pg-acct-state { display: flex; align-items: center; gap: 1.1rem 1.25rem; flex-wrap: wrap; padding: 1.4rem 1.5rem; }
.pg-acct-shield {
    width: 56px; height: 56px; flex: none; border-radius: var(--sf-r-lg);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sf-surface-3); border: 1px solid var(--sf-border-strong);
    color: var(--sf-muted); font-size: 22px; box-shadow: var(--sf-hairline);
}
.pg-acct-shield.on { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }
.pg-acct-shield.pending { background: var(--sf-warning-soft); border-color: var(--sf-warning-border); color: var(--sf-warning-text); }
.pg-acct-state-text { flex: 1 1 260px; min-width: 0; }
.pg-acct-state-title { display: flex; align-items: center; gap: 0.6rem 0.75rem; flex-wrap: wrap; margin: 0; font-size: var(--sf-fs-lg); font-weight: 600; color: var(--sf-text); letter-spacing: -0.01em; }
.pg-acct-state-desc { margin: 0.35rem 0 0; font-size: var(--sf-fs-sm); color: var(--sf-muted); line-height: 1.55; }
.pg-acct-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-top: 0.75rem; font-size: var(--sf-fs-xs); color: var(--sf-text-2); }
.pg-acct-meta span { display: inline-flex; align-items: center; gap: 0.45rem; }
.pg-acct-meta i { color: var(--sf-muted); }
.pg-acct-apps { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.75rem; }
.pg-acct-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; padding: 1rem 1.5rem 1.25rem; border-top: 1px solid var(--sf-border); }
.pg-acct-preview-item { display: flex; align-items: center; gap: 0.65rem; min-width: 0; font-size: var(--sf-fs-sm); color: var(--sf-text-2); }
.pg-acct-preview-label { min-width: 0; line-height: 1.35; }
.pg-acct-preview-item .pg-acct-step-num { width: 26px; height: 26px; flex: none; font-size: var(--sf-fs-xs); background: var(--sf-surface-3); border-color: var(--sf-border-strong); color: var(--sf-text-2); }

/* Recovery codes (columns follow the panel width, not the viewport: 1 / 2 / 4) */
.pg-acct-codes-body { container: pg-acct-codes / inline-size; }
.pg-acct-codes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
@container pg-acct-codes (min-width: 360px) { .pg-acct-codes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container pg-acct-codes (min-width: 720px) { .pg-acct-codes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container pg-acct-codes (max-width: 199px) { .pg-acct-code { gap: 0.45rem; padding: 0 0.6rem; } .pg-acct-code .n { display: none; } }
.pg-acct-code {
    display: flex; align-items: center; gap: 0.6rem; width: 100%; height: 42px; padding: 0 0.75rem; margin: 0;
    background: var(--sf-inset); border: 1px solid var(--sf-border); border-radius: var(--sf-r);
    color: var(--sf-text); font-family: var(--sf-mono); font-size: var(--sf-fs-sm); cursor: pointer; text-align: left;
    transition: border-color var(--sf-ease), background-color var(--sf-ease), color var(--sf-ease);
}
.pg-acct-code:hover { border-color: var(--sf-border-hover); background: var(--sf-surface-2); }
.pg-acct-code:focus-visible { outline: 0; box-shadow: var(--sf-focus); }
.pg-acct-code .n { flex: none; font-size: var(--sf-fs-2xs); color: var(--sf-faint); font-variant-numeric: tabular-nums; }
.pg-acct-code code { flex: 1; min-width: 0; padding: 0; background: none; border: 0; color: inherit; font-size: inherit; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-acct-code i { flex: none; font-size: 12px; color: var(--sf-muted); opacity: 0; transition: opacity var(--sf-ease); }
.pg-acct-code:hover i, .pg-acct-code:focus-visible i, .pg-acct-code.is-copied i { opacity: 1; }
.pg-acct-code.is-copied i { color: var(--sf-success-text); }
.pg-acct-codes-foot { flex-wrap: wrap; }
.pg-acct-codes-foot .sf-btn-row { flex-wrap: wrap; margin-left: auto; }
.pg-acct-codes-foot .pg-acct-foot-note { flex: 1 1 320px; min-width: 0; align-items: flex-start; line-height: 1.5; }
.pg-acct-codes-foot .pg-acct-foot-note i { margin-top: 3px; }
.pg-acct-foot-note { display: inline-flex; align-items: center; gap: 0.5rem; }
.pg-acct-foot-note i { color: var(--sf-warning-text); }

/* Setup steps (timeline) */
.pg-acct-steps { list-style: none; margin: 0; padding: 0.35rem 0 0.25rem; }
.pg-acct-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 1rem; padding: 1.1rem 1.25rem; }
.pg-acct-step:not(:last-child)::before {
    content: ''; position: absolute; left: calc(1.25rem + 15.5px); top: calc(1.1rem + 38px); bottom: calc(-1.1rem + 6px);
    width: 1px; background: var(--sf-border-strong);
}
.pg-acct-step-num {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sf-accent-soft); border: 1px solid var(--sf-accent-border);
    color: var(--sf-accent-text); font-size: var(--sf-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums;
}
.pg-acct-step-title { margin: 0.35rem 0 0.25rem; font-size: var(--sf-fs); font-weight: 600; color: var(--sf-text); }
.pg-acct-step-desc { margin: 0; font-size: var(--sf-fs-sm); color: var(--sf-muted); }
.pg-acct-qr-row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; padding: 1rem; background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg); }
.pg-acct-qr { flex: none; max-width: 100%; padding: 8px; background: #fff; border-radius: var(--sf-r); line-height: 0; }
.pg-acct-qr svg { display: block; width: 156px; max-width: 100%; height: auto; }
.pg-acct-secret { flex: 1 1 240px; min-width: 0; max-width: 440px; }
.pg-acct-secret .sf-label { margin-top: 0; }
.pg-acct-step .pg-acct-verify-label { margin: 0 0 0.75rem; }
.pg-acct-verify { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* id selector outranks the design-system `form input:not(...)` rule without !important */
.pg-acct-verify input#pg-acct-code {
    flex: 0 1 190px; width: 190px; max-width: 100%; min-height: var(--sf-h-lg);
    font-family: var(--sf-mono); font-size: var(--sf-fs-lg); letter-spacing: 0.4em; text-indent: 0.4em; text-align: center;
}

/* Manage rows */
.pg-acct-settings { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.pg-acct-setting-main { display: flex; align-items: flex-start; gap: 0.85rem; min-width: 0; }
.pg-acct-setting-main > div { min-width: 0; }
.pg-acct-setting .title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0; }
.pg-acct-setting .desc { max-width: 60ch; }
.pg-acct-disable { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.pg-acct-disable .sf-input-icon { width: 220px; }

/* Tips aside */
.pg-acct-tips { list-style: none; margin: 0; padding: 0.25rem 0; }
.pg-acct-tips .sf-list-item { align-items: flex-start; border-bottom: 0; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.pg-acct-tips .sf-list-item:hover { background: transparent; }
.pg-acct-tip-title { font-size: var(--sf-fs-sm); font-weight: 500; color: var(--sf-text); }
.pg-acct-tip-desc { margin-top: 0.2rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); line-height: 1.5; }

@media (max-width: 1279px) {
    .pg-acct-2fa { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 1023px) {
    .pg-acct-preview { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .pg-acct-setting { flex-direction: column; align-items: stretch; }
    .pg-acct-state { align-items: flex-start; }
    .pg-acct-disable { justify-content: flex-start; }
    .pg-acct-disable .sf-input-icon { width: 100%; }
}
@media (max-width: 575px) {
    .pg-acct-state { padding: 1.1rem 1rem; }
    .pg-acct-state > form { flex: 1 1 100%; }
    .pg-acct-state > form .btn { width: 100%; height: auto; min-height: var(--sf-h); padding-top: 0.5rem; padding-bottom: 0.5rem; line-height: 1.3; white-space: normal; }
    .pg-acct-apps .badge { max-width: 100%; height: auto; min-height: 22px; padding-top: 0.2rem; padding-bottom: 0.2rem; line-height: 1.3; white-space: normal; }
}
@media (max-width: 399px) {
    .pg-acct-step { gap: 0.75rem; padding-left: 0.9rem; padding-right: 0.9rem; }
    .pg-acct-step:not(:last-child)::before { left: calc(0.9rem + 15.5px); }
    .pg-acct-qr-row { position: relative; z-index: 1; margin-left: calc(-32px - 0.75rem); padding: 0.75rem; gap: 1rem; }
}

/* from resources/views/settings/team/index.blade.php */
.pg-acct-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.pg-acct-layout > * { min-width: 0; }
.pg-acct-kpis .sf-stat .label { padding-right: 2.75rem; }
.pg-acct-kpis .sf-stat .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-acct-kpis .sf-progress { margin-top: 0.7rem; }
.pg-acct-kpis .sf-progress > span { width: var(--pg-acct-w, 0%); }
.sf-stat-icon.pg-acct-ok, .sf-panel-icon.pg-acct-ok, .sf-icon-chip.pg-acct-ok { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }
.sf-progress.pg-acct-ok > span { background: var(--sf-success); }
.pg-acct-joined { white-space: nowrap; }
.sf-form-section.pg-acct-first { border-top: 0; padding-top: 0; }
.pg-acct-table-wrap { position: relative; }
.sf-table td.pg-acct-member-cell { width: 100%; max-width: 0; min-width: 240px; }
.pg-acct-member { min-width: 0; }
.pg-acct-member-text { min-width: 0; }
.pg-acct-member-name { display: flex; align-items: center; gap: 0.45rem; min-width: 0; color: var(--sf-text); font-weight: 500; }
.pg-acct-member .sf-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-avatar.pg-acct-avatar { width: 36px; height: 36px; font-size: var(--sf-fs-sm); }
.sf-avatar.pg-acct-avatar.me { border-color: var(--sf-accent-border); box-shadow: 0 0 0 3px var(--sf-accent-soft); }
.badge.pg-acct-violet { background: var(--sf-violet-soft); border-color: color-mix(in srgb, var(--sf-violet) 30%, transparent); color: color-mix(in srgb, var(--sf-violet) 65%, var(--sf-text)); }
.pg-acct-team-note { display: inline-flex; align-items: center; gap: 0.5rem; }
.pg-acct-team-note i { color: var(--sf-faint); }
.pg-acct-anchor { scroll-margin-top: 88px; }
.pg-acct-invite-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pg-acct-role-grid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.pg-acct-role-grid .sf-option .desc { display: block; margin-top: 0.2rem; }
.pg-acct-sec { display: flex; align-items: flex-start; gap: 0.85rem; }
.pg-acct-sec-text { flex: 1; min-width: 0; }
.pg-acct-sec-text p { margin: 0.5rem 0 0; font-size: var(--sf-fs-xs); color: var(--sf-muted); line-height: 1.5; }
.pg-acct-sec .sf-btn-row { margin-top: 0.85rem; }
@media (max-width: 1279px) {
    .pg-acct-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .pg-acct-aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0 1.25rem; }
}
@media (max-width: 767px) {
    .pg-acct-invite-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 399px) {
    .pg-acct-sec { flex-direction: column; gap: 0.75rem; }
}

/* ---- page: act ---------------------------------------------------- */

/* from resources/views/activity/index.blade.php */
/* Activity dashboard — live KPIs, live status card, 4 run/log panels. */

/* KPI strip (rendered by the live component, refreshes with it) ------ */
.pg-act-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-act-kpis .sf-stat .label { padding-right: 44px; }
.pg-act-kpis .sf-stat .value { color: var(--sf-text-2); }
.pg-act-kpis .sf-stat.pg-act-on .value { color: var(--sf-text); }
.pg-act-kpis .sf-stat.pg-act-on { border-color: var(--sf-accent-border); }
.pg-act-kpis .sf-stat .hint { display: flex; align-items: center; gap: 0.4rem; }

/* Live processing status card ---------------------------------------- */
.pg-act-live .sf-panel-title .sf-status { font-weight: 500; }
.pg-act-queue {
    display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
    padding: 0.3rem 0.45rem 0.3rem 0.65rem; min-height: var(--sf-h);
    background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r);
    font-size: var(--sf-fs-xs); color: var(--sf-muted);
}
.pg-act-queue .pg-act-staff { color: var(--sf-faint); font-size: 11px; }
.pg-act-queue .sf-metric b { color: var(--sf-text); }
.pg-act-hint { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--sf-warning-text); }
.pg-act-hint i { font-size: 11px; }
.pg-act-hint code { font-size: 11px; padding: 0 0.3rem; }
.pg-act-note { justify-content: flex-start; }
.pg-act-note i { color: var(--sf-accent-text); font-size: 12px; margin-right: 0.15rem; }

.sf-empty.pg-act-idle { padding: 1.75rem 1.25rem 1.9rem; }
.sf-empty.pg-act-idle.pg-act-idle-ok .ico {
    background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text);
    box-shadow: 0 0 0 8px rgba(74, 222, 128, 0.05);
}
.sf-empty.pg-act-idle.pg-act-idle-wait .ico {
    background: var(--sf-warning-soft); border-color: var(--sf-warning-border); color: var(--sf-warning-text);
    box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.05);
}

.pg-act-item { padding: 1rem 1.25rem; border-bottom: 1px solid var(--sf-border); }
.pg-act-item:last-child { border-bottom: 0; }
.pg-act-item-row { display: flex; align-items: center; gap: 0.9rem; }
.pg-act-item-row > .sf-icon-chip { width: 36px; height: 36px; font-size: 14px; }
.pg-act-main { flex: 1; min-width: 0; }
.pg-act-title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: var(--sf-fs); font-weight: 550; color: var(--sf-text); }
.pg-act-meta { margin-top: 0.4rem; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-act-nums { display: flex; gap: 0.5rem; flex: none; }
.pg-act-nums .sf-tile-stat { min-width: 84px; padding: 0.45rem 0.75rem; }
.pg-act-nums .sf-tile-stat .value { margin: 0; font-size: var(--sf-fs-md); line-height: 1.25; }
.pg-act-nums .sf-tile-stat .label { margin-top: 0.05rem; }

/* Source -> destination: FA arrow + small platform logos. */
.pg-act-arrow { color: var(--sf-faint); font-size: 12px; flex: none; }
.sf-logo.pg-act-xs { width: 22px; height: 22px; border-radius: 6px; font-size: 10px; }
.pg-act-route { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.pg-act-route .cell-main { gap: 0.6rem; }
.pg-act-th-arrow { font-size: 10px; margin: 0 0.2rem; opacity: 0.8; }

/* Per-product log console. Line colour comes from --lc (set inline). */
.pg-act-log {
    margin: 0.75rem 0 0; padding: 0.55rem 0.8rem; max-height: 11.5rem; overflow: auto;
    background: var(--sf-inset); border: 1px solid var(--sf-border); border-radius: var(--sf-r);
    font-family: var(--sf-mono); font-size: 11.5px; line-height: 1.65;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
.pg-act-item .pg-act-log { margin-left: calc(36px + 0.9rem); }
.pg-act-log.pg-act-tall { max-height: 16rem; }
/* Fixed columns (time, status, sku), then the name; an error note sits
   last so sku/name line up on every row and the name never collapses. */
.pg-act-log-line { display: flex; gap: 0.75rem; white-space: nowrap; }
.pg-act-log-line .pg-act-t { flex: none; color: var(--sf-faint); }
.pg-act-log-line .pg-act-st { flex: none; width: 8.5rem; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--lc, var(--sf-text-2)); }
.pg-act-log-line .pg-act-st.pg-act-narrow { width: 5.5rem; }
.pg-act-log-line .pg-act-st-arrow { font-size: 9px; margin: 0 0.1rem; opacity: 0.75; }
.pg-act-log-line .pg-act-sku { flex: none; width: 7rem; overflow: hidden; text-overflow: ellipsis; color: var(--sf-muted); }
.pg-act-log-line .pg-act-sku.pg-act-wide { width: 11rem; }
.pg-act-log-line .pg-act-nm { flex: 1 1 auto; min-width: 8rem; overflow: hidden; text-overflow: ellipsis; color: var(--sf-text-2); }
.pg-act-log-line .pg-act-err { flex: 0 1 auto; min-width: 6rem; max-width: 24rem; overflow: hidden; text-overflow: ellipsis; color: var(--sf-danger-text); }
.pg-act-log-line .pg-act-err i { font-size: 10px; margin-right: 0.35rem; }
.pg-act-log-count { display: flex; align-items: center; gap: 0.4rem; margin: 0.75rem 0 0; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-act-log-count i { color: var(--sf-faint); font-size: 11px; }
.pg-act-log-count + .pg-act-log { margin-top: 0.4rem; }
/* Inside a run table the console must not widen the table with its
   nowrap lines: it takes the cell's width and scrolls on its own. */
.pg-act-table .pg-act-log { contain: inline-size; }

/* Run / log panels --------------------------------------------------- */
.pg-act-panel { scroll-margin-top: 1.25rem; }
/* Clear history = destructive: only the red border at rest, solid red on hover */
.pg-act-clear { color: var(--sf-danger-text); background: transparent; border-color: rgba(248, 113, 113, 0.55); }
.pg-act-clear:hover, .pg-act-clear:focus-visible { color: #fff; background: var(--sf-danger-solid); border-color: var(--sf-danger-solid); }
.pg-act-flash { padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--sf-border); }
.pg-act-flash .sf-alert { margin: 0; }
.sf-empty.pg-act-empty { padding: 2rem 1.25rem 2.1rem; }
.pg-act-root .sf-empty p { max-width: 64ch; text-wrap: balance; }
/* Run counters (processed / +new / updated / failed …) as badges, tinted by kind. */
.pg-act-root .sf-metrics { gap: 0.35rem; }
.pg-act-root .sf-metrics .sf-metric {
    align-items: center; height: 22px; padding: 0 0.55rem; border-radius: 999px;
    border: 1px solid var(--sf-border-strong); background: var(--sf-surface-3); color: var(--sf-text-2);
}
.pg-act-root .sf-metrics .sf-metric.success { border-color: var(--sf-success-border); background: var(--sf-success-soft); color: var(--sf-success-text); }
.pg-act-root .sf-metrics .sf-metric.danger { border-color: var(--sf-danger-border); background: var(--sf-danger-soft); color: var(--sf-danger-text); }
.pg-act-root .sf-metrics .sf-metric.warning { border-color: var(--sf-warning-border); background: var(--sf-warning-soft); color: var(--sf-warning-text); }
.sf-empty.pg-act-empty .actions .btn i { font-size: 11px; }

.pg-act-table .pg-act-chev-col { width: 44px; padding-right: 0; }
.pg-act-table tr.pg-act-row { cursor: pointer; }
.pg-act-chev {
    width: 22px; height: 22px; border-radius: var(--sf-r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sf-faint); font-size: 10px; transition: transform var(--sf-ease), color var(--sf-ease), background-color var(--sf-ease);
}
.pg-act-table tr.pg-act-row:hover .pg-act-chev { color: var(--sf-text-2); background: rgba(255, 255, 255, 0.05); }
.pg-act-table tr.pg-act-row.pg-act-open .pg-act-chev { transform: rotate(90deg); color: var(--sf-accent-text); }
.pg-act-table tr.pg-act-row.pg-act-open td { background: var(--sf-surface-hover); border-bottom-color: transparent; }
.pg-act-when { white-space: nowrap; }
.pg-act-when .pg-act-rel { color: var(--sf-text-2); }
.pg-act-when .sf-sub { font-variant-numeric: tabular-nums; }
.pg-act-abs { margin-left: 0.55rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.pg-act-link { font-weight: 500; }
.pg-act-cell-text { min-width: 0; }
.pg-act-cell-text .primary { display: block; }
.pg-act-cell-text .sf-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.pg-act-table .pg-act-type-inline { display: none; white-space: nowrap; }

.sf-panel .pg-act-table tr.pg-act-detail > td { padding: 0.25rem 1.25rem 1.25rem calc(44px + 1.25rem); background: var(--sf-surface-hover); }
.pg-act-table tbody tr.pg-act-detail:hover > td { background: var(--sf-surface-hover); }
.pg-act-detail-body { display: flex; flex-direction: column; gap: 0.9rem; }
.pg-act-label { display: block; margin-bottom: 0.45rem; font-size: var(--sf-fs-xs); font-weight: 500; color: var(--sf-muted); }
.pg-act-bd { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pg-act-bd .sf-tile-stat { min-width: 96px; background: var(--sf-surface); }
.pg-act-errors {
    max-height: 280px; overflow: auto; padding: 0.8rem 1rem;
    background: var(--sf-danger-soft); border: 1px solid var(--sf-danger-border); border-radius: var(--sf-r);
    font-size: var(--sf-fs-xs); color: var(--sf-text-2);
}
.pg-act-errors-title { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--sf-danger-text); }
.pg-act-errors ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.pg-act-errors li + li { margin-top: 0.2rem; }
.pg-act-errors code { color: var(--sf-danger-text); }
.pg-act-ok { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-act-ok i { color: var(--sf-success); }
.pg-act-ok.pg-act-log-count { margin-top: 0.75rem; }

.pg-act-panel .sf-panel-foot { flex-wrap: wrap; }
.pg-act-pager { flex-wrap: nowrap; }
.pg-act-page { min-width: 3rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--sf-text-2); }
/* Bootstrap's .btn-secondary.disabled paints a light grey fill. */
.pg-act-pager .btn.disabled { background: var(--sf-surface-3); border-color: var(--sf-border-strong); color: var(--sf-text); }

@media (max-width: 1199px) {
    .pg-act-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-act-item-row { flex-wrap: wrap; }
    .pg-act-nums { flex: 1 1 100%; padding-left: calc(36px + 0.9rem); }
    .pg-act-cell-text .sf-sub { max-width: 11rem; }
    /* Tables: fold the store-push Type column under the feed name and
       stack transfer routes (source above destination, arrow down). */
    .pg-act-table .pg-act-col-type { display: none; }
    .pg-act-table .pg-act-type-inline { display: block; }
    .pg-act-route { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
    .pg-act-route > .pg-act-arrow { transform: rotate(90deg); margin-left: 9px; }
    .pg-act-abs { display: block; margin: 0.15rem 0 0; }
}
@media (max-width: 767px) {
    .pg-act-kpis { grid-template-columns: minmax(0, 1fr); }
    .pg-act-nums { padding-left: 0; flex-wrap: wrap; }
    .pg-act-item .pg-act-log { margin-left: 0; }
    .sf-panel .pg-act-table tr.pg-act-detail > td { padding-left: 1.25rem; }
}

/* ---- page: alerts ---------------------------------------------------- */

/* from resources/views/settings/system-alerts/index.blade.php */
/* Level colours = the DS status tokens, the same ones the real banner
   (.pg-shared-alert in partials/system-alerts) uses. */
.pg-alerts-lv, .pg-alerts-lv.is-info { --lc: var(--sf-info); --lt: var(--sf-info-text); --lb: var(--sf-info-soft); --lr: var(--sf-info-border); }
.pg-alerts-lv.is-warning { --lc: var(--sf-warning); --lt: var(--sf-warning-text); --lb: var(--sf-warning-soft); --lr: var(--sf-warning-border); }
.pg-alerts-lv.is-danger  { --lc: var(--sf-danger);  --lt: var(--sf-danger-text);  --lb: var(--sf-danger-soft);  --lr: var(--sf-danger-border); }
.pg-alerts-lv.is-success { --lc: var(--sf-success); --lt: var(--sf-success-text); --lb: var(--sf-success-soft); --lr: var(--sf-success-border); }

.sf-stats.pg-alerts-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pg-alerts-kpis .sf-stat .label { padding-right: 2.6rem; }

/* Level chip (list rows + option cards). */
.pg-alerts-chip {
    width: 36px; height: 36px; flex: none; border-radius: var(--sf-r);
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
    background: var(--lb); border: 1px solid var(--lr); color: var(--lt);
}

/* Alert rows. */
.pg-alerts-item { align-items: flex-start; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
.pg-alerts-item .grow { display: flex; flex-direction: column; gap: 0.3rem; }
.pg-alerts-title { margin: 0; font-size: var(--sf-fs); font-weight: 600; line-height: 1.4; color: var(--sf-text); overflow-wrap: anywhere; }
.pg-alerts-msg { margin: 0; font-size: var(--sf-fs-sm); line-height: 1.5; color: var(--sf-text-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pg-alerts-title + .pg-alerts-msg { color: var(--sf-muted); }
.pg-alerts-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.35rem; }
.pg-alerts-meta .badge i { font-size: 9.5px; opacity: 0.85; }
.pg-alerts-level-badge { background: var(--lb); border-color: var(--lr); color: var(--lt); }
.pg-alerts-window { flex: none; width: 210px; display: flex; flex-direction: column; gap: 0.35rem; padding-top: 0.15rem; font-size: var(--sf-fs-xs); }
.pg-alerts-window > div { display: grid; grid-template-columns: 14px 44px minmax(0, 1fr); align-items: center; gap: 0.4rem; color: var(--sf-muted); }
.pg-alerts-window i { font-size: 9.5px; color: var(--sf-faint); text-align: center; }
.pg-alerts-window b { font-weight: 500; color: var(--sf-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-alerts-window b.is-open { font-weight: 400; color: var(--sf-muted); }
.pg-alerts-actions { flex: none; flex-wrap: nowrap; }
.pg-alerts-item.is-inactive .pg-alerts-chip,
.pg-alerts-item.is-inactive .grow,
.pg-alerts-item.is-inactive .pg-alerts-window { opacity: 0.55; }
@media (max-width: 991.98px) {
    .pg-alerts-item { flex-wrap: wrap; }
    .pg-alerts-item .grow { flex: 1 1 calc(100% - 36px - 1rem - 80px); }
    .pg-alerts-window { order: 3; width: 100%; flex-direction: row; flex-wrap: wrap; gap: 0.35rem 1.5rem; padding: 0 0 0 calc(36px + 1rem); }
    .pg-alerts-window > div { grid-template-columns: 14px auto auto; }
}

/* Modals. */
.pg-alerts-modal .modal-header { align-items: center; padding: 0.95rem 1.25rem; }
.pg-alerts-modal .modal-title { display: flex; align-items: center; gap: 0.65rem; margin: 0; min-width: 0; font-size: var(--sf-fs-md); font-weight: 600; }
.pg-alerts-modal .modal-title .sf-muted { font-weight: 400; font-size: var(--sf-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-alerts-modal .modal-body { padding: 1.25rem 1.35rem 0.6rem; }
.pg-alerts-modal .modal-footer { gap: 0.5rem; padding: 0.8rem 1.25rem; }
.pg-alerts-modal .modal-footer > * { margin: 0; }
.pg-alerts-modal .sf-form-section { padding: 1.1rem 0 0.4rem; }
.pg-alerts-modal .sf-form-section:first-child { padding-top: 0; }
.pg-alerts-modal .sf-form-section > .head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.95rem; }
.pg-alerts-modal .sf-form-section > .head .desc { margin-top: 0.1rem; }
.pg-alerts-modal .sf-setting { padding: 0.8rem 0; }
.pg-alerts-req { color: var(--sf-danger-text); }

/* Live banner preview — same look as the real banner (.pg-shared-alert in
   partials/system-alerts): 1px tinted border, 7% fill, 30px icon chip, ghost close. */
.pg-alerts-preview-wrap { margin-bottom: 1.25rem; padding: 0.85rem; background: var(--sf-surface-2); border: 1px dashed var(--sf-border-strong); border-radius: var(--sf-r-lg); }
.pg-alerts-preview-label { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.6rem; font-size: var(--sf-fs-xs); font-weight: 500; color: var(--sf-muted); }
.pg-alerts-preview {
    display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0.75rem 0.7rem 0.8rem;
    background: color-mix(in srgb, var(--lc) 7%, var(--sf-surface));
    border: 1px solid var(--lr); border-radius: var(--sf-r-lg);
    box-shadow: var(--sf-hairline), var(--sf-shadow-1);
}
.pg-alerts-preview-ico {
    width: 30px; height: 30px; flex: none; border-radius: var(--sf-r);
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
    background: var(--lb); border: 1px solid var(--lr); color: var(--lt);
}
.pg-alerts-preview-text { flex: 1; min-width: 0; font-size: var(--sf-fs-sm); line-height: 1.45; color: var(--sf-text-2); overflow-wrap: anywhere; }
.pg-alerts-preview .sa-prev-title { color: var(--lt); font-weight: 600; margin-right: 0.4rem; }
.pg-alerts-preview .sa-prev-title:empty { display: none; }
.pg-alerts-preview-x { flex: none; color: var(--sf-muted); pointer-events: none; }
.pg-alerts-preview-x[hidden] { display: none; }
.pg-alerts-preview.is-plain { margin-top: 0.9rem; }

/* Level option cards. */
.pg-alerts-levels { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pg-alerts-levels .sf-option { padding: 0.85rem 0.9rem; gap: 0.5rem; }
.pg-alerts-levels .sf-option .desc { line-height: 1.35; }
.pg-alerts-levels .sf-option:has(input:checked) { border-color: var(--lc); background: var(--lb); box-shadow: 0 0 0 3px var(--lb); }
.pg-alerts-levels .sf-option input[type="radio"]:checked { border-color: var(--lc); background-image: radial-gradient(circle, var(--lc) 0 4px, transparent 4.5px); }
.pg-alerts-fields { display: grid; gap: 0 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .pg-alerts-fields { grid-template-columns: minmax(0, 1fr); } }

/* ---- page: anaf ---------------------------------------------------- */

/* from resources/views/settings/invoices/settings.blade.php */
/* Invoice numbering settings (settings/invoices/settings). */
.pg-anaf-num-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: start; }
.pg-anaf-num-layout > * { min-width: 0; }
.pg-anaf-num-layout .sf-panel, .pg-anaf-num-layout .sf-stat { margin: 0 0 1.25rem; }
/* Stacked (< 1200px): the live preview moves ABOVE the form so every edit stays
   visible; issuer + examples sit side by side under the form. */
@media (max-width: 1199px) {
    .pg-anaf-num-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-anaf-num-side { display: contents; }
    .pg-anaf-num-side > * { min-width: 0; }
    .pg-anaf-num-main, .pg-anaf-num-layout .pg-anaf-num-preview { grid-column: 1 / -1; }
    .pg-anaf-num-layout .pg-anaf-num-preview { order: -1; }
    .pg-anaf-num-layout .sf-panel, .pg-anaf-num-layout .sf-stat { margin: 0; }
}
@media (max-width: 767.98px) { .pg-anaf-num-layout { grid-template-columns: minmax(0, 1fr); } }

.pg-anaf-num-form .sf-panel-body { padding-top: 1.35rem; padding-bottom: 0.4rem; }
.pg-anaf-num-form .sf-form-section > .head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.pg-anaf-num-form .sf-form-section > .head .sf-icon-chip { margin: 0; }
.pg-anaf-num-modes { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pg-anaf-num-modes .sf-option { padding: 1rem 2.6rem 1rem 1rem; }
.pg-anaf-num-modes .sf-option .title { font-size: var(--sf-fs); }
.pg-anaf-num-modes .sf-option .desc { margin-top: -0.25rem; }
.pg-anaf-num-form .sf-help { line-height: 1.45; }
.pg-anaf-num-form .sf-setting { border-top: 1px solid var(--sf-border); border-bottom: 0; padding: 1rem 0 0.35rem; }
.pg-anaf-num-form .sf-setting .desc strong { color: var(--sf-text-2); font-weight: 600; }
.pg-anaf-num-form .sf-panel-foot { padding-top: 0.85rem; padding-bottom: 0.85rem; }
.pg-anaf-num-form .sf-panel-foot > span { display: inline-flex; align-items: center; gap: 0.45rem; }

/* Sequence block dims when the random mode is picked (JS toggles .is-dim). */
.pg-anaf-num-seq { transition: opacity 0.2s ease; }
.pg-anaf-num-seq.is-dim { opacity: 0.4; pointer-events: none; }
.pg-anaf-num-seq-note { display: none; margin-left: auto; }
.pg-anaf-num-seq.is-dim .pg-anaf-num-seq-note { display: inline-flex; }

/* Live preview card. */
.pg-anaf-num-preview .value { font-family: var(--sf-mono); font-size: var(--sf-fs-xl); letter-spacing: 0; margin-top: 0.55rem; padding-right: 0; overflow-wrap: anywhere; }
.pg-anaf-num-preview .label { padding-right: 2.6rem; }

/* Examples + issuer lists. */
.pg-anaf-num-list .sf-list-item { padding-top: 0.6rem; padding-bottom: 0.6rem; font-size: var(--sf-fs-sm); color: var(--sf-text-2); }
.pg-anaf-num-list .sf-list-item .grow { color: var(--sf-muted); }
.pg-anaf-num-list .badge.mono { height: 24px; padding: 0 0.5rem; font-size: 11px; color: var(--sf-accent-text); background: var(--sf-accent-soft); border-color: var(--sf-accent-border); }
.pg-anaf-num-issuer .sf-dl { grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 0.55rem 1.25rem; }
.pg-anaf-num-issuer .sf-dl dd.is-missing { color: var(--sf-danger-text); }
.pg-anaf-num-issuer .sf-panel-foot { justify-content: flex-start; line-height: 1.5; }

/* from resources/views/settings/anaf/index.blade.php */
/* KPI row — keep the label clear of the icon chip. */
.sf-stats.pg-anaf-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pg-anaf-kpis .sf-stat .label { padding-right: 2.6rem; }
/* Narrow content: 2 x 2 so labels and hints stay on one line and values align. */
@media (max-width: 1199px) { .sf-stats.pg-anaf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Environment banner (TEST / PROD). */
.pg-anaf-env { align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; }
.pg-anaf-env > i { margin-top: 0; font-size: 15px; }
.pg-anaf-env .pg-anaf-env-text { min-width: 0; line-height: 1.5; }
.pg-anaf-env .pg-anaf-env-text span { color: var(--sf-text-2); font-size: var(--sf-fs-xs); }

/* Connection (left) + configuration (right); stacks below 1200px. */
.pg-anaf-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; margin-bottom: 1.25rem; }
.pg-anaf-grid > .sf-panel { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.pg-anaf-grid > .sf-panel > .sf-panel-body { flex: 1; }
@media (max-width: 1199px) { .pg-anaf-grid { grid-template-columns: minmax(0, 1fr); } }

/* Connection state hero. */
.pg-anaf-state { display: flex; align-items: flex-start; gap: 1rem; }
.pg-anaf-state-ico {
    width: 48px; height: 48px; flex: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
    background: var(--sf-danger-soft); border: 1px solid var(--sf-danger-border); color: var(--sf-danger-text);
    box-shadow: 0 0 0 6px rgba(248, 113, 113, 0.05);
}
.pg-anaf-conn.is-on .pg-anaf-state-ico { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.05); }
.pg-anaf-conn.is-warn .pg-anaf-state-ico { background: var(--sf-warning-soft); border-color: var(--sf-warning-border); color: var(--sf-warning-text); box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.05); }
.pg-anaf-state-title { margin: 0.15rem 0 0.3rem; font-size: var(--sf-fs-lg); font-weight: 600; line-height: 1.3; color: var(--sf-text); }
.pg-anaf-state-desc { margin: 0; font-size: var(--sf-fs-sm); line-height: 1.55; color: var(--sf-muted); max-width: 64ch; }
.pg-anaf-state-desc code { font-size: 0.8em; white-space: nowrap; }
.sf-tile-stats.pg-anaf-facts { margin-top: 1.25rem; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.pg-anaf-facts .sf-tile-stat { padding: 0.7rem 0.85rem; }
.pg-anaf-facts .sf-tile-stat .label { display: flex; align-items: center; gap: 0.4rem; }
.pg-anaf-facts .sf-tile-stat .label i { font-size: 10px; color: var(--sf-faint); }
.pg-anaf-facts .sf-tile-stat .value { font-size: var(--sf-fs-sm); font-weight: 500; overflow-wrap: anywhere; }
.pg-anaf-facts .sf-tile-stat .value.is-muted { color: var(--sf-muted); font-weight: 400; }
.pg-anaf-facts .sf-tile-stat .value.is-danger { color: var(--sf-danger-text); }
.pg-anaf-facts .sf-tile-stat .sf-sub { margin-top: 0.1rem; }
.pg-anaf-facts .sf-tile-stat .pg-anaf-serial { font-size: 11.5px; overflow-wrap: normal; }
.pg-anaf-conn .sf-panel-foot { flex-wrap: wrap; }
.pg-anaf-note { display: inline-flex; align-items: center; gap: 0.5rem; line-height: 1.45; }
.pg-anaf-note i { flex: none; font-size: 11px; color: var(--sf-faint); }
.pg-anaf-help { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--sf-border); }
.pg-anaf-help-item { display: flex; align-items: flex-start; gap: 0.75rem; }
.pg-anaf-help-item b { display: block; margin-bottom: 0.15rem; font-size: var(--sf-fs-sm); font-weight: 500; color: var(--sf-text); }
.pg-anaf-help-item p { margin: 0; font-size: var(--sf-fs-xs); line-height: 1.55; color: var(--sf-muted); }
.pg-anaf-help-item code { font-size: 0.9em; overflow-wrap: anywhere; }
.pg-anaf-inline { display: inline-flex; margin: 0; }

/* Configuration key/value rows. */
.pg-anaf-cfg { margin: 0; }
.pg-anaf-cfg > div {
    display: grid; grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); gap: 1rem; align-items: center;
    padding: 0.58rem 1.25rem; border-bottom: 1px solid var(--sf-border); font-size: var(--sf-fs-sm);
}
.pg-anaf-cfg > div:last-child { border-bottom: 0; }
.pg-anaf-cfg dt { font-weight: 400; color: var(--sf-muted); }
.pg-anaf-cfg dd { margin: 0; min-width: 0; color: var(--sf-text); overflow-wrap: anywhere; }
.pg-anaf-cfg dd .sf-mono { font-size: var(--sf-fs-xs); }

/* Submissions table. */
.pg-anaf-inv { font-family: var(--sf-mono); font-size: var(--sf-fs-xs); font-weight: 600; color: var(--sf-text); white-space: nowrap; }
.pg-anaf-total { white-space: nowrap; }
@media (max-width: 1199px) { .pg-anaf-table .cell-main > .sf-icon-chip { display: none; } }
a.pg-anaf-inv:hover { color: var(--sf-accent-text); text-decoration: none; }
.pg-anaf-idx { font-family: var(--sf-mono); font-size: var(--sf-fs-xs); color: var(--sf-text-2); }
.pg-anaf-when { white-space: nowrap; }

/* ---- page: api ---------------------------------------------------- */

/* from resources/views/settings/api/webhooks.blade.php, settings/api/webhook-log.blade.php, settings/api/index.blade.php, settings/api/inbound.blade.php, settings/api/inbound-log.blade.php */
/* API settings (v2) — keys, outbound + inbound webhooks, delivery logs.
   Identical block in all five settings/api views. */

/* Green chips without the legacy global ".success" rule (padding, border-left). */
.sf-stat-icon.pg-api-ok, .sf-icon-chip.pg-api-ok { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }

/* Page head: multi-line text (log pages) keeps the icon chip at the top. */
.sf-page-head.pg-api-head > div:first-child:has(> .sf-page-icon) { align-items: flex-start; }
.pg-api-head-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.5rem; margin-top: 0.45rem; min-width: 0; }
.pg-api-head-line .sf-page-sub { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pg-api-endpoint { max-width: 680px; margin-top: 0.75rem; }

/* KPI strip: 4 across, 2x2 on laptops, stacked on phones. */
.pg-api-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-api-kpis .sf-stat .label { padding-right: 2.75rem; }
.pg-api-kpis .sf-stat .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-api-kpis .sf-stat .value.sm { line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* One-time secret reveal. The layout's flash rule "main.content > .success"
   also matches a top-level .sf-alert.success: drop its icon and shadow. */
.pg-api-reveal { align-items: flex-start; padding: 1rem 1.1rem; }
main.content > .sf-alert.pg-api-reveal { padding: 1rem 1.1rem; gap: 0.85rem; box-shadow: none; }
main.content > .sf-alert.pg-api-reveal::before { content: none; }
.pg-api-reveal > .sf-icon-chip { margin-top: 1px; }
.pg-api-reveal-body { flex: 1; min-width: 0; }
.pg-api-reveal-body p { margin: 0.2rem 0 0; color: var(--sf-text-2); font-size: var(--sf-fs-xs); line-height: 1.5; }
.pg-api-reveal-body .sf-label { margin: 0.85rem 0 0.35rem; color: var(--sf-text-2); }
.pg-api-reveal-body .sf-input-group { margin-top: 0.75rem; max-width: 780px; }
.pg-api-reveal-body .sf-label + .sf-input-group { margin-top: 0; }
.pg-api-secret { display: flex; align-items: center; margin: 0; font-family: var(--sf-mono); font-size: var(--sf-fs-xs); color: var(--sf-text); user-select: all; word-break: break-all; }

/* Create forms: sections in the body, hint + submit in the footer. */
.pg-api-form .sf-form-section:last-child { padding-bottom: 0; }
.pg-api-form .sf-form-section > .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; }
.pg-api-count { font-size: var(--sf-fs-xs); color: var(--sf-muted); white-space: nowrap; }
.pg-api-count b { color: var(--sf-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pg-api-fields { display: flex; flex-wrap: wrap; gap: 1rem; }
.pg-api-fields > .sf-field { flex: 0 0 170px; margin: 0; min-width: 0; }
.pg-api-fields > .sf-field.pg-api-grow { flex: 1 1 280px; max-width: 460px; }
.pg-api-narrow { max-width: 560px; }
.pg-api-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pg-api-subfield { max-width: 560px; margin-top: 0.6rem; padding: 0.75rem 0.9rem; background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r); }
.pg-api-foot { flex-wrap: wrap; gap: 0.75rem 1rem; background: rgba(255, 255, 255, 0.012); }
.pg-api-foot > span { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; }
.pg-api-foot > span > i { font-size: 11px; }

/* Entity lists (keys, subscriptions, endpoints). */
.pg-api-list .sf-list-item { gap: 0.75rem 1rem; padding: 1rem 1.25rem; }
.pg-api-list .sf-list-item > .sf-icon-chip { width: 36px; height: 36px; font-size: 14px; align-self: flex-start; }
.pg-api-off .pg-api-dim { opacity: 0.5; }
.pg-api-title { display: flex; align-items: center; gap: 0.35rem 0.5rem; flex-wrap: wrap; min-width: 0; }
.pg-api-name { color: var(--sf-text); font-weight: 600; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.pg-api-url { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sf-mono); font-size: var(--sf-fs-sm); font-weight: 500; color: var(--sf-text); }
.pg-api-title > .pg-api-url { max-width: calc(100% - 7rem); }
.pg-api-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.5rem; margin-top: 0.4rem; min-width: 0; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-api-line > .pg-api-rate::before { content: '\00b7'; margin-right: 0.5rem; color: var(--sf-faint); }
.pg-api-code { display: inline-flex; align-items: center; gap: 0.15rem; min-width: 0; max-width: 100%; }
.pg-api-code > code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-api-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0.55rem; }
.pg-api-meta { display: flex; gap: 1.5rem; flex: none; }
.pg-api-meta > div { width: 150px; min-width: 0; }
.pg-api-meta .k { display: block; font-size: var(--sf-fs-2xs); color: var(--sf-muted); }
.pg-api-meta .v { display: block; margin-top: 0.2rem; font-size: var(--sf-fs-sm); color: var(--sf-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-api-meta .s { display: block; margin-top: 0.1rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-api-actions { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; }
.pg-api-actions form { display: inline-flex; margin: 0; }
.pg-api-list.pg-api-keys .pg-api-actions { width: var(--sf-h-sm); }

/* Delivery logs: one tbody per delivery, click the row to expand. */
.pg-api-log tr.pg-api-row { cursor: pointer; }
.pg-api-log td:first-child { min-width: 240px; }
.pg-api-log .cell-main { align-items: flex-start; }
.pg-api-sig { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; white-space: nowrap; }
.pg-api-sig > i { font-size: 10px; }
.pg-api-sig.ok { color: var(--sf-success-text); }
.pg-api-sig.bad { color: var(--sf-danger-text); }
.pg-api-log .cell-main > div { min-width: 0; }
.pg-api-ev { display: block; font-family: var(--sf-mono); font-size: var(--sf-fs-sm); font-weight: 500; color: var(--sf-text); line-height: 1.35; margin-top: 0.2rem; }
.pg-api-error { display: block; max-width: 420px; margin-top: 0.2rem; font-size: var(--sf-fs-xs); color: var(--sf-danger-text); overflow-wrap: anywhere; }
.pg-api-http { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.pg-api-nowrap { white-space: nowrap; }
.pg-api-ms { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; font-family: var(--sf-mono); font-size: var(--sf-fs-xs); color: var(--sf-text-2); white-space: nowrap; }
.pg-api-bar { display: block; width: 64px; height: 4px; border-radius: 999px; background: var(--sf-surface-3); overflow: hidden; }
.pg-api-bar > span { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--sf-accent); }
.pg-api-bar.slow > span { background: var(--sf-warning); }
.pg-api-chev { font-size: 10px !important; transition: transform var(--sf-ease); }
.pg-api-log tbody.is-open .pg-api-chev { transform: rotate(180deg); }
.sf-table.pg-api-log tbody.is-open tr.pg-api-row td { background: var(--sf-surface-2); border-bottom-color: transparent; }
.sf-table.pg-api-log tr.pg-api-detail td, .sf-table.pg-api-log tr.pg-api-detail:hover td { padding-top: 0.25rem; padding-bottom: 1.1rem; background: var(--sf-surface-2); border-bottom: 1px solid var(--sf-border); cursor: default; }
.sf-table.pg-api-log tbody:last-child tr.pg-api-detail td { border-bottom: 0; }
.sf-table.pg-api-log tbody:last-child:not(.is-open) tr.pg-api-row td { border-bottom: 0; }
/* Only the very last row may take the panel's rounded corners. */
.sf-panel > .sf-table-wrap .sf-table.pg-api-log tbody:not(:last-child) tr td:first-child,
.sf-panel > .sf-table-wrap .sf-table.pg-api-log tbody:not(:last-child) tr td:last-child { border-radius: 0; }
.pg-api-detail[x-cloak] { display: none !important; }
.pg-api-detail-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pg-api-detail-grid > div { min-width: 0; }
.pg-api-detail .sf-code-head { background: var(--sf-surface-3); color: var(--sf-text-2); }
.pg-api-code-head > span { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; }
.pg-api-code-head > span > i { color: var(--sf-muted); font-size: 11px; }
.pg-api-code-head .sf-row { gap: 0.6rem; }
.pg-api-pre { margin: 0; max-height: 300px; white-space: pre-wrap; word-break: break-all; }
.pg-api-none { display: flex; align-items: center; gap: 0.5rem; padding: 0.95rem 1.1rem; background: #090b10; border: 1px solid var(--sf-border); border-radius: 0 0 var(--sf-r) var(--sf-r); font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-api-sample { margin: 0 auto; max-width: 760px; text-align: left; }
.pg-api-str { color: var(--sf-success-text); }

@media (max-width: 1279px) {
    .pg-api-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-api-list .sf-list-item { flex-wrap: wrap; }
    .pg-api-meta { order: 3; flex: 1 1 100%; padding-left: calc(36px + 1rem); }
    .pg-api-log th, .pg-api-log td { padding-left: 0.75rem; padding-right: 0.75rem; }
    .pg-api-log td:first-child { min-width: 200px; }
}
@media (max-width: 560px) {
    .pg-api-kpis { grid-template-columns: minmax(0, 1fr); }
    .pg-api-list .sf-list-item { align-items: flex-start; }
    .pg-api-meta { flex-wrap: wrap; gap: 0.75rem 1.5rem; }
    .pg-api-actions { order: 4; flex: 1 1 100%; justify-content: flex-start; padding-left: calc(36px + 1rem); }
    .pg-api-list.pg-api-keys .pg-api-actions { width: auto; }
    .pg-api-actions.is-empty { display: none; }
    .pg-api-title > .pg-api-url { max-width: 100%; }
    .pg-api-line > .pg-api-rate { flex-basis: 100%; }
    .pg-api-line > .pg-api-rate::before { content: none; }
    /* Secret / URL boxes: value on its own full-width row, copy button below. */
    main.content > .sf-alert.pg-api-reveal { padding: 0.9rem; }
    .pg-api-reveal > .sf-icon-chip { display: none; }
    .pg-api-reveal-body .sf-input-group, .sf-input-group.pg-api-endpoint { flex-wrap: wrap; }
    .pg-api-reveal-body .sf-input-group > .sf-input, .sf-input-group.pg-api-endpoint > .sf-input { flex: 1 1 100%; border-radius: var(--sf-r-sm) var(--sf-r-sm) 0 0; }
    .pg-api-reveal-body .sf-input-group > .btn, .sf-input-group.pg-api-endpoint > .btn { flex: 1 1 100%; margin: -1px 0 0; border-radius: 0 0 var(--sf-r-sm) var(--sf-r-sm); }
}

/* ---- page: atkt ---------------------------------------------------- */

/* from resources/views/settings/tickets/show.blade.php */
/* Admin ticket detail: thread + side panels. */
.pg-atkt-meta { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.5rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-atkt-meta strong { color: var(--sf-text-2); font-weight: 500; }
.pg-atkt-hash { color: var(--sf-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.pg-atkt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
@media (max-width: 1199px) { .pg-atkt-grid { grid-template-columns: minmax(0, 1fr) 272px; gap: 1rem; } }
@media (max-width: 899px) { .pg-atkt-grid { grid-template-columns: 1fr; } }
.pg-atkt-grid > .sf-panel, .pg-atkt-aside > .sf-panel { margin-bottom: 0; }
.pg-atkt-aside { display: flex; flex-direction: column; gap: 1.25rem; }
@media (max-width: 1199px) { .pg-atkt-aside { gap: 1rem; } }

/* Reply composer */
.pg-atkt-composer { padding: 1.1rem 1.25rem 1.25rem; border-top: 1px solid var(--sf-border); background: var(--sf-surface-2); border-radius: 0 0 var(--sf-r-lg) var(--sf-r-lg); }
.pg-atkt-composer > .sf-label { margin-top: 0; display: flex; align-items: center; gap: 0.45rem; color: var(--sf-text); font-size: var(--sf-fs-sm); font-weight: 600; }
.pg-atkt-composer > .sf-label i { color: var(--sf-accent-text); font-size: 12px; }
.pg-atkt-composer textarea[name="message"] { min-height: 120px; }
.pg-atkt-composer .custom-file { margin-top: 0.75rem; }
.pg-atkt-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; margin-top: 0.9rem; }
.pg-atkt-composer-foot .sf-help { margin: 0; }
.pg-atkt-locked { display: flex; align-items: center; gap: 0.65rem; padding: 0.95rem 1.25rem; border-top: 1px solid var(--sf-border); background: var(--sf-surface-2); color: var(--sf-muted); font-size: var(--sf-fs-sm); border-radius: 0 0 var(--sf-r-lg) var(--sf-r-lg); }

/* Side panels */
.pg-atkt-aside .sf-panel-body > .sf-field:last-child { margin-bottom: 0; }
.pg-atkt-aside .sf-field > .sf-label { margin-top: 0; display: flex; align-items: center; gap: 0.4rem; }
.pg-atkt-aside .sf-field > .sf-label i { color: var(--sf-muted); font-size: 11px; width: 13px; text-align: center; }
.pg-atkt-assignee { display: flex; align-items: center; gap: 0.65rem; min-width: 0; padding: 0.55rem 0.65rem; background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r); margin-bottom: 0.6rem; }
.pg-atkt-assignee .name { color: var(--sf-text); font-weight: 500; font-size: var(--sf-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-atkt-assignee.is-empty .name { color: var(--sf-muted); font-weight: 400; font-style: italic; }
.pg-atkt-avatar-empty { background: transparent; border-style: dashed; color: var(--sf-faint); }
.pg-atkt-customer { display: flex; align-items: center; gap: 0.75rem; min-width: 0; margin-bottom: 1rem; }
.pg-atkt-customer > div { min-width: 0; }
.pg-atkt-customer .name { color: var(--sf-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-atkt-customer .sf-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sf-muted); }
.pg-atkt-customer .sf-sub:hover { color: var(--sf-accent-text); }
.pg-atkt-aside .sf-dl { grid-template-columns: max-content 1fr; gap: 0.55rem 1rem; font-size: var(--sf-fs-xs); }
.pg-atkt-aside .sf-dl dd { font-variant-numeric: tabular-nums; }
.pg-atkt-aside .sf-panel-foot form { width: 100%; }

/* from resources/views/settings/tickets/index.blade.php */
/* Admin support inbox (page + tickets-table component). */
.pg-atkt-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.sf-stats.pg-atkt-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pg-atkt-kpis .sf-stat .label { padding-right: 2.6rem; }

/* Inbox table: the ticket column takes the free width and truncates;
   every other column keeps its natural (nowrap) width. */
.pg-atkt-list { overflow: hidden; }
.pg-atkt-list .sf-table td { white-space: nowrap; }
.pg-atkt-list .sf-table td.pg-atkt-main { width: 100%; max-width: 0; }
.pg-atkt-cell { flex: 1; min-width: 0; }
.pg-atkt-subject { display: block; color: var(--sf-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-atkt-subject:hover { color: var(--sf-accent-text); text-decoration: none; }
.pg-atkt-cell .sf-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-atkt-id { font-family: var(--sf-mono); font-size: var(--sf-fs-2xs); color: var(--sf-muted); }
.pg-atkt-dot { color: var(--sf-faint); margin: 0 0.3rem; }
.pg-atkt-org { color: var(--sf-text-2); font-weight: 500; }
.pg-atkt-person { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--sf-text); font-weight: 500; }
.pg-atkt-person.is-empty { color: var(--sf-muted); font-weight: 400; font-style: italic; }
.pg-atkt-avatar-empty { background: transparent; border-style: dashed; color: var(--sf-faint); }
.pg-atkt-when { font-variant-numeric: tabular-nums; color: var(--sf-text-2); }
.pg-atkt-wait { color: var(--sf-muted); }
.pg-atkt-wait.is-late { color: var(--sf-warning-text); }
.pg-atkt-wait i { font-size: 10px; margin-right: 0.25rem; }
.pg-atkt-list .sf-table tr.is-closed td { color: var(--sf-muted); }
.pg-atkt-list .sf-table tr.is-closed .pg-atkt-subject { color: var(--sf-text-2); font-weight: 500; }
.pg-atkt-list .sf-table tr.is-closed .sf-icon-chip { opacity: 0.7; }
@media (max-width: 1279px) {
    .pg-atkt-list .sf-table th, .pg-atkt-list .sf-table td { padding-left: 0.7rem; padding-right: 0.7rem; }
    .pg-atkt-list .sf-table th:first-child, .pg-atkt-list .sf-table td:first-child { padding-left: 1rem; }
    .pg-atkt-list .sf-table th:last-child, .pg-atkt-list .sf-table td:last-child { padding-right: 1rem; }
    .pg-atkt-list .pg-atkt-person .sf-avatar { display: none; }
    .btn.pg-atkt-open { width: var(--sf-h-sm); padding: 0; }
    .btn.pg-atkt-open .pg-atkt-open-text { display: none; }
}
@media (max-width: 1099px) {
    .pg-atkt-list .sf-table .cell-main > .sf-icon-chip { display: none; }
}

/* ---- page: auth ---------------------------------------------------- */
/* Auth card shared by login / register / forgot / reset / 2FA, laid out like
   the ProLog sign-in pages: brand panel with the big logo on the left
   (auth/partials/brand), the form on the right. Guest layout: main.content is
   a centred 480px column, widened here for these pages (body.pg-auth-page). */
body.guest.pg-auth-page main.content { width: 100%; max-width: 1080px; padding: 0 16px; }
.pg-auth { width: 100%; padding: 2rem 0 1rem; }
.pg-auth:not(:first-of-type) { padding-top: 0.5rem; }   /* a layout flash div (status / errors) sits above */
.pg-auth-card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: 20px; overflow: hidden;
    box-shadow: var(--sf-hairline), 0 24px 64px rgba(0, 0, 0, 0.4);
}
.pg-auth-side {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
    min-height: 540px; padding: 3rem 2.5rem; text-align: center; border-right: 1px solid var(--sf-border);
    background:
        radial-gradient(circle at 30% 20%, rgba(79, 124, 255, 0.16), transparent 55%),
        radial-gradient(circle at 75% 85%, rgba(110, 92, 255, 0.12), transparent 50%),
        linear-gradient(135deg, #161b2e 0%, #0f121b 100%);
}
.pg-auth-side-logo { display: block; }
.pg-auth-side-logo img { display: block; width: 240px; max-width: 100%; height: auto; }
.pg-auth-tagline {
    margin: 0; font-size: var(--sf-fs-xs); font-weight: 600; line-height: 1.7; text-wrap: balance;
    text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.4);
}
.pg-auth-main { display: flex; flex-direction: column; min-width: 0; }
.pg-auth-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 2.5rem 2.75rem; }
.pg-auth-head { text-align: center; margin-bottom: 1.75rem; }
.pg-auth-head .sf-page-icon { margin: 0 auto 1rem; }
.pg-auth-title { margin: 0; font-size: var(--sf-fs-xl); font-weight: 650; line-height: 1.25; letter-spacing: -0.015em; color: var(--sf-text); }
.pg-auth-sub { margin: 0.45rem auto 0; max-width: 40ch; font-size: var(--sf-fs-sm); line-height: 1.5; color: var(--sf-muted); }
.pg-auth-card .sf-field { margin-bottom: 1.1rem; }
.pg-auth-card .sf-field > label, .pg-auth-label-row > label { margin: 0 0 0.45rem; }
.pg-auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.pg-auth-label-row > a { margin-bottom: 0.45rem; font-size: var(--sf-fs-xs); font-weight: 500; white-space: nowrap; }
.pg-auth-card .sf-input-icon > i { left: 0.85rem; font-size: 13px; transition: color var(--sf-ease); }
.pg-auth-card .sf-input-icon:focus-within > i { color: var(--sf-accent-text); }
.pg-auth-card .pg-auth-input { min-height: var(--sf-h-lg) !important; padding-left: 2.35rem !important; font-size: var(--sf-fs) !important; }
.pg-auth-card .pg-auth-input[readonly] { background: var(--sf-surface-3) !important; color: var(--sf-text-2) !important; border-style: dashed !important; cursor: default; padding-right: 2.3rem !important; }
.pg-auth-card .sf-input-icon > .pg-auth-lock { left: auto; right: 0.85rem; font-size: 11px; color: var(--sf-faint); }
.pg-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0.15rem 0 1.4rem; }
.pg-auth-submit { margin-top: 0.35rem; font-weight: 600; }
.pg-auth-foot {
    padding: 1rem 1.5rem; border-top: 1px solid var(--sf-border); background: var(--sf-surface-2);
    text-align: center; font-size: var(--sf-fs-sm); color: var(--sf-muted);
}
.pg-auth-foot a { font-weight: 500; }
.pg-auth-foot a i { font-size: 11px; margin-right: 0.35rem; }
.pg-auth-hint-tight { margin: -0.6rem 0 1.1rem; }

/* Register only: section labels, 2-up password row, role picker. */
.pg-auth-card .sf-section-title { margin: 0 0 1rem; }
.pg-auth-card .sf-section-title ~ .sf-section-title { margin-top: 1.6rem; }
.pg-auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.75rem; }
.pg-auth-grid > .sf-field { margin-bottom: 0.4rem; }
.pg-auth-grid.pg-auth-pair > .sf-field { margin-bottom: 1.1rem; }   /* name + email: a normal row (no hint below) */
/* Register: a wider card (logo and form halves stay equal). */
body.guest.pg-auth-page.pg-auth-wide main.content { max-width: 1360px; }
.pg-auth-wide .pg-auth-body { padding-left: 2.25rem; padding-right: 2.25rem; }
.pg-auth-hint { margin: 0 0 1.1rem; }
/* Compact role cards: icon beside the text, radio top-right. */
.pg-auth-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1.25rem; }
.pg-auth-roles .sf-option { flex-direction: row; align-items: center; gap: 0.6rem; padding: 0.6rem 1.75rem 0.6rem 0.65rem; border-radius: var(--sf-r); }
.pg-auth-roles .sf-option > input[type="radio"] { top: 0.55rem; right: 0.55rem; }
.pg-auth-roles .sf-option > span:last-child { min-width: 0; }
.pg-auth-roles .sf-option .title { display: block; font-size: var(--sf-fs-xs); line-height: 1.3; }
.pg-auth-roles .sf-option .desc { display: block; margin-top: 0.1rem; font-size: var(--sf-fs-2xs); line-height: 1.35; }
/* Register: required Terms checkbox above the submit button. */
.pg-auth-card .pg-auth-terms { align-items: flex-start !important; margin: 0 0 1.25rem !important; line-height: 1.5; }
.pg-auth-terms > input { flex: none; margin-top: 0.2rem; }
.pg-auth-terms a { font-weight: 500; }
.pg-auth-terms.is-invalid { color: var(--sf-danger-text); }
.pg-auth-terms-error { display: block; margin: -0.85rem 0 1.25rem; color: var(--sf-danger-text); }

/* Password strength checker (partials/password-checker, register + reset):
   rule rows go red / green as the user types, the bar fills by rules met. */
.pg-pw-checker {
    margin: 0.15rem 0 1.25rem; padding: 0.75rem 0.875rem;
    border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg); background: rgba(255, 255, 255, 0.025);
}
.pg-pw-bar { height: 6px; margin-bottom: 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pg-pw-fill { width: 0; height: 100%; border-radius: 999px; background: var(--sf-danger-solid); transition: width 0.25s ease, background-color 0.25s ease; }
.pg-pw-label { margin-bottom: 0.6rem; font-size: var(--sf-fs-xs); font-weight: 600; color: var(--sf-muted); transition: color 0.25s ease; }
.pg-pw-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; }
.pg-pw-rules li { display: flex; align-items: center; gap: 0.5rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); transition: color 0.18s; }
.pg-pw-rules li i { width: 12px; flex: none; font-size: 9px; text-align: center; transition: color 0.18s, transform 0.18s; }
.pg-pw-rules li.is-bad { color: var(--sf-danger-text); }
.pg-pw-rules li.is-bad i { color: var(--sf-danger-solid); }
.pg-pw-rules li.is-ok { color: var(--sf-success-text); }
.pg-pw-rules li.is-ok i { color: var(--sf-success); transform: scale(1.15); }
/* Levels = rules met: 0-1 weak (red), 2-3 fair (amber), 4-5 strong (green). */
.pg-pw-checker[data-level="1"] .pg-pw-fill { width: 20%; }
.pg-pw-checker[data-level="2"] .pg-pw-fill { width: 40%; }
.pg-pw-checker[data-level="3"] .pg-pw-fill { width: 60%; }
.pg-pw-checker[data-level="4"] .pg-pw-fill { width: 80%; }
.pg-pw-checker[data-level="5"] .pg-pw-fill { width: 100%; }
.pg-pw-checker[data-level="0"] .pg-pw-label,
.pg-pw-checker[data-level="1"] .pg-pw-label { color: var(--sf-danger-text); }
.pg-pw-checker[data-level="2"] .pg-pw-fill,
.pg-pw-checker[data-level="3"] .pg-pw-fill { background: var(--sf-warning); }
.pg-pw-checker[data-level="2"] .pg-pw-label,
.pg-pw-checker[data-level="3"] .pg-pw-label { color: var(--sf-warning-text); }
.pg-pw-checker[data-level="4"] .pg-pw-fill,
.pg-pw-checker[data-level="5"] .pg-pw-fill { background: var(--sf-success); }
.pg-pw-checker[data-level="4"] .pg-pw-label,
.pg-pw-checker[data-level="5"] .pg-pw-label { color: var(--sf-success-text); }
@media (max-width: 520px) { .pg-pw-rules { grid-template-columns: minmax(0, 1fr); } }

/* 2FA only: big one-time-code input + recovery-code disclosure. */
.pg-auth-card .pg-auth-otp {
    min-height: 56px !important; padding: 0 0 0 0.55em !important;
    font-family: var(--sf-mono) !important; font-size: 1.6rem !important; font-weight: 600;
    letter-spacing: 0.55em; text-align: center; font-variant-numeric: tabular-nums;
}
.pg-auth-otp::placeholder { color: var(--sf-faint); letter-spacing: 0.55em; }
.pg-auth-recovery { margin: 0 0 1.4rem; border: 1px solid var(--sf-border); border-radius: var(--sf-r); background: var(--sf-surface-2); }
.pg-auth-recovery > summary {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.85rem;
    list-style: none; cursor: pointer; user-select: none;
    font-size: var(--sf-fs-sm); color: var(--sf-text-2); border-radius: var(--sf-r);
    transition: color var(--sf-ease), background-color var(--sf-ease);
}
.pg-auth-recovery > summary::-webkit-details-marker { display: none; }
.pg-auth-recovery > summary:hover { color: var(--sf-text); background: rgba(255, 255, 255, 0.025); }
.pg-auth-recovery > summary .pg-auth-chev { margin-left: auto; font-size: 11px; color: var(--sf-muted); transition: transform var(--sf-ease); }
.pg-auth-recovery[open] > summary { border-bottom: 1px solid var(--sf-border); border-radius: var(--sf-r) var(--sf-r) 0 0; }
.pg-auth-recovery[open] > summary .pg-auth-chev { transform: rotate(180deg); }
.pg-auth-recovery-body { padding: 0.9rem 0.85rem 0.95rem; }
.pg-auth-recovery-body > label { margin: 0 0 0.45rem; }

/* Narrow screens: one column, the brand panel becomes a compact band. */
@media (max-width: 991px) {
    body.guest.pg-auth-page main.content,
    body.guest.pg-auth-page.pg-auth-wide main.content { max-width: 560px; }
    .pg-auth-card { grid-template-columns: minmax(0, 1fr); }
    .pg-auth-side { min-height: 0; padding: 1.75rem 1.5rem; gap: 0; border-right: 0; border-bottom: 1px solid var(--sf-border); }
    .pg-auth-side-logo img { width: 130px; }
    .pg-auth-tagline { display: none; }
}
@media (max-width: 520px) {
    .pg-auth { padding: 1.5rem 0 0.5rem; }
    .pg-auth-body,
    .pg-auth-wide .pg-auth-body { padding: 1.5rem 1.25rem; }
    .pg-auth-grid, .pg-auth-roles { grid-template-columns: minmax(0, 1fr); }
    .pg-auth-roles .sf-option { padding-right: 2.5rem; }
    .pg-auth-roles .sf-option > input[type="radio"] { top: 50%; transform: translateY(-50%); }
}

/* ---- page: chat ---------------------------------------------------- */

/* from resources/views/settings/livechat/index.blade.php */
/* Live chat global settings: setting rows, plan cards, day chips. */
.sf-stats.pg-chat-summary { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pg-chat-summary .sf-stat .label { padding-right: 2.6rem; }
.pg-chat-summary .sf-stat .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-chat-summary .sf-stat .value.is-off { color: var(--sf-muted); }
.pg-chat-settings .sf-panel-body { padding-top: 0.35rem; padding-bottom: 0.35rem; }
.pg-chat-settings .sf-panel-body.is-padded { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.pg-chat-settings .sf-panel-sub code { font-size: 0.95em; }
.pg-chat-settings .sf-setting > div:first-child { min-width: 0; }
.pg-chat-ctl { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.pg-chat-ctl .pg-chat-sep { color: var(--sf-faint); }
.pg-chat-time-wrap { display: block; width: 112px; }
.pg-chat-ctl input.flatpickr-alt.pg-chat-time {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8697' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E") !important;
}
.pg-chat-ctl select.pg-chat-tz { width: 260px; }
.pg-chat-days { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pg-chat-day {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: var(--sf-h); padding: 0 0.55rem; margin: 0;
    background: var(--sf-surface-2); border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r-sm);
    color: var(--sf-muted); font-size: var(--sf-fs-xs); font-weight: 600; cursor: pointer; user-select: none;
    transition: background-color var(--sf-ease), border-color var(--sf-ease), color var(--sf-ease);
}
.pg-chat-day input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.pg-chat-day:hover { border-color: var(--sf-border-hover); color: var(--sf-text-2); }
.pg-chat-day:has(input:checked) { background: var(--sf-accent-soft); border-color: var(--sf-accent-border); color: var(--sf-accent-text); }
.pg-chat-day:has(input:focus-visible) { box-shadow: var(--sf-focus); }
.pg-chat-dep { transition: opacity var(--sf-ease); }
.pg-chat-hours:has(input[name="business_hours_enabled"]:not(:checked)) .pg-chat-dep { opacity: 0.5; }
.pg-chat-hours:has(input[name="business_hours_enabled"]:not(:checked)) .pg-chat-dep:hover, .pg-chat-hours:has(input[name="business_hours_enabled"]:not(:checked)) .pg-chat-dep:focus-within { opacity: 1; }
.pg-chat-plans { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pg-chat-texts { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 1.25rem; }
.pg-chat-texts .sf-field { margin-bottom: 0; }
.pg-chat-texts label { display: flex; align-items: center; gap: 0.45rem; }
.pg-chat-texts label i { color: var(--sf-muted); font-size: 11px; }
.pg-chat-texts textarea[name] { min-height: 110px; }
.pg-chat-savebar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; }
.pg-chat-savebar .sf-help { margin: 0; }
@media (max-width: 1099px) {
    .pg-chat-settings .sf-setting { flex-wrap: wrap; }
    .pg-chat-ctl select.pg-chat-tz { width: 220px; }
}
@media (max-width: 767px) {
    .pg-chat-ctl, .pg-chat-ctl select.pg-chat-tz { width: 100%; }
}

/* from resources/views/settings/chat/show.blade.php */
/* Admin live-chat conversation: message pane + side panels. */
.pg-chat-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pg-chat-state { text-transform: capitalize; }
.pg-chat-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: stretch; }
@media (max-width: 1199px) { .pg-chat-wrap { grid-template-columns: minmax(0, 1fr) 260px; gap: 1rem; } }
@media (max-width: 899px) { .pg-chat-wrap { grid-template-columns: 1fr; } }
.pg-chat-wrap .sf-panel { margin-bottom: 0; }

/* Message pane */
.pg-chat-pane { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.pg-chat-live { display: inline-flex; align-items: center; gap: 0.45rem; height: 24px; padding: 0 0.65rem; border-radius: 999px; font-size: var(--sf-fs-2xs); font-weight: 500; color: var(--sf-muted); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--sf-border-strong); white-space: nowrap; }
.pg-chat-live:has(.connected) { color: var(--sf-success-text); background: var(--sf-success-soft); border-color: var(--sf-success-border); }
.pg-chat-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sf-faint); flex: none; }
.pg-chat-live-dot.connected { background: var(--sf-success); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.16); }
.pg-chat-scroll { flex: 1 1 auto; height: min(62vh, 620px); min-height: 360px; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; background: var(--sf-surface-2); }
.pg-chat-scroll::-webkit-scrollbar { width: 8px; }
.pg-chat-scroll::-webkit-scrollbar-thumb { background: var(--sf-border-strong); border-radius: 4px; }
.pg-chat-scroll > .sf-empty { margin: auto; }
.pg-chat-msg { display: flex; align-items: flex-start; gap: 0.65rem; max-width: 78%; }
.pg-chat-msg.is-staff { margin-left: auto; flex-direction: row-reverse; }
.pg-chat-msg > .sf-avatar { margin-top: 2px; }
.pg-chat-msg.is-staff > .sf-avatar { background: var(--sf-accent-soft); border-color: var(--sf-accent-border); color: var(--sf-accent-text); }
.pg-chat-msg-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.pg-chat-msg.is-staff .pg-chat-msg-body { align-items: flex-end; }
.pg-chat-bubble { max-width: 100%; padding: 0.6rem 0.9rem; background: var(--sf-surface-3); border: 1px solid var(--sf-border-strong); border-radius: 14px 14px 14px 4px; color: var(--sf-text); font-size: var(--sf-fs); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; box-shadow: var(--sf-shadow-1); }
.pg-chat-msg.is-staff .pg-chat-bubble { background: var(--sf-accent); border-color: #5b85ff; color: #fff; border-radius: 14px 14px 4px 14px; }
.pg-chat-mini { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: var(--sf-fs-2xs); color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.pg-chat-badge { --bc: var(--sf-accent); display: inline-flex; align-items: center; gap: 0.25rem; height: 18px; padding: 0 0.45rem; border-radius: 999px; font-size: 10px; font-weight: 600; color: var(--bc); background: color-mix(in srgb, var(--bc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--bc) 40%, transparent); }
.pg-chat-badge i { font-size: 8px; }
.pg-chat-att { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; max-width: 100%; }
.pg-chat-msg.is-staff .pg-chat-att { align-items: flex-end; }
.pg-chat-att > a { max-width: 100%; }
.pg-chat-img { display: block; max-width: min(280px, 100%); max-height: 220px; border-radius: var(--sf-r-lg); border: 1px solid var(--sf-border-strong); background: var(--sf-surface-3); cursor: zoom-in; }
.pg-chat-file { display: inline-flex; align-items: center; gap: 0.45rem; max-width: 100%; height: var(--sf-h); padding: 0 0.8rem; background: var(--sf-surface-3); border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r); color: var(--sf-text); font-size: var(--sf-fs-xs); text-decoration: none; }
.pg-chat-file:hover { border-color: var(--sf-border-hover); color: #fff; text-decoration: none; }
.pg-chat-file i { color: var(--sf-muted); }
.pg-chat-file span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-chat-file .att-size { color: var(--sf-muted); font-size: var(--sf-fs-2xs); flex: none; }

/* Composer */
.pg-chat-foot { padding: 0.9rem 1.25rem 1rem; border-top: 1px solid var(--sf-border); }
.pg-chat-composer { display: flex; align-items: flex-end; gap: 0.5rem; }
.pg-chat-composer textarea.pg-chat-input { flex: 1; min-width: 0; min-height: var(--sf-h-lg); max-height: 180px; padding: 0.55rem 0.8rem; line-height: 1.45; resize: none; }
.pg-chat-attach { flex: none; cursor: pointer; }
.pg-chat-keys { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.55rem; padding-left: calc(var(--sf-h-lg) + 0.5rem); font-size: var(--sf-fs-2xs); color: var(--sf-muted); }
.pg-chat-keys kbd { font-size: 10px; padding: 0 0.3rem; }
@media (max-width: 1199px) {
    .pg-chat-pane .sf-panel-head .sf-panel-sub { display: none; }
    .btn.pg-chat-send { width: var(--sf-h-lg); padding: 0; }
    .btn.pg-chat-send .pg-chat-send-text { display: none; }
}
.pg-chat-att-preview { display: none; align-items: center; gap: 0.6rem; margin-bottom: 0.65rem; padding: 0.5rem 0.55rem 0.5rem 0.75rem; background: var(--sf-accent-soft); border: 1px solid var(--sf-accent-border); border-radius: var(--sf-r); font-size: var(--sf-fs-xs); color: var(--sf-text-2); }
.pg-chat-att-preview.is-shown { display: flex; }
.pg-chat-att-preview > i { color: var(--sf-accent-text); }
.pg-chat-att-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.pg-chat-att-row { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.pg-chat-att-row i { color: var(--sf-muted); font-size: 10px; }
.pg-chat-att-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Side panels */
.pg-chat-aside { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; min-height: 0; }
@media (max-width: 1199px) { .pg-chat-aside { gap: 1rem; } }
.pg-chat-aside .sf-dl { grid-template-columns: max-content 1fr; gap: 0.6rem 1rem; font-size: var(--sf-fs-xs); align-items: center; }
.pg-chat-aside .sf-dl dd { font-variant-numeric: tabular-nums; }
.pg-chat-person { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; }
.pg-chat-media { flex: 1 1 0; min-height: 260px; display: flex; flex-direction: column; }
@media (max-width: 899px) { .pg-chat-media { flex: none; min-height: 0; } }
.pg-chat-media-body { flex: 1; min-height: 0; overflow-y: auto; }
.pg-chat-media-body::-webkit-scrollbar { width: 6px; }
.pg-chat-media-body::-webkit-scrollbar-thumb { background: var(--sf-border-strong); border-radius: 3px; }
.pg-chat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.pg-chat-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--sf-r); border: 1px solid var(--sf-border-strong); background: var(--sf-surface-2); cursor: zoom-in; }
.pg-chat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; }
.pg-chat-tile:hover { border-color: var(--sf-accent-border); }
.pg-chat-tile:hover img { transform: scale(1.04); }
.pg-chat-aside .sf-empty { padding: 1.75rem 0.5rem; }
.pg-chat-aside .sf-empty .ico { width: 42px; height: 42px; font-size: 15px; box-shadow: none; background: var(--sf-surface-3); border-color: var(--sf-border-strong); color: var(--sf-muted); }

/* from resources/views/settings/chat/index.blade.php */
/* Admin live-chat inbox: conversation list. */
.pg-chat-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.sf-stats.pg-chat-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pg-chat-kpis .sf-stat .label { padding-right: 2.6rem; }
.pg-chat-list { overflow: hidden; }
.pg-chat-conv { position: relative; color: inherit; text-decoration: none; padding: 1rem 1.25rem; gap: 0.95rem; }
.pg-chat-conv:hover { color: inherit; text-decoration: none; }
.pg-chat-conv.has-unread::before { content: ''; position: absolute; left: 0; top: 0.8rem; bottom: 0.8rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--sf-warning); }
.pg-chat-conv .sf-avatar { width: 40px; height: 40px; font-size: var(--sf-fs-sm); }
.pg-chat-conv.is-closed .sf-avatar { background: var(--sf-surface-3); color: var(--sf-muted); }
.pg-chat-top { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.pg-chat-org { min-width: 0; color: var(--sf-text); font-weight: 600; font-size: var(--sf-fs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-chat-conv.has-unread .pg-chat-org { color: #fff; }
.pg-chat-bottom { display: flex; align-items: center; gap: 1rem; margin-top: 0.3rem; min-width: 0; }
.pg-chat-preview { flex: 1; min-width: 0; font-size: var(--sf-fs-sm); color: var(--sf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-chat-preview b { color: var(--sf-text-2); font-weight: 500; }
.pg-chat-preview b.is-staff { color: var(--sf-accent-text); }
.pg-chat-conv.has-unread .pg-chat-preview { color: var(--sf-text-2); }
.pg-chat-preview i { font-size: 11px; margin-right: 0.2rem; }
.pg-chat-meta { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.pg-chat-when { margin-left: auto; padding-left: 1rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-chat-assignee { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--sf-fs-xs); color: var(--sf-text-2); white-space: nowrap; }
.pg-chat-assignee i { font-size: 10px; color: var(--sf-muted); }
.pg-chat-state { text-transform: capitalize; }
.pg-chat-chev { color: var(--sf-faint); font-size: 12px; flex: none; transition: color var(--sf-ease), transform var(--sf-ease); }
.pg-chat-conv:hover .pg-chat-chev { color: var(--sf-text-2); transform: translateX(2px); }
@media (max-width: 767px) { .pg-chat-chev { display: none; } }

/* ---- page: dash ---------------------------------------------------- */

/* from resources/views/dashboard/index.blade.php */
/* Page head: organisation line + health pill */
.pg-dash-org { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.45rem; }
.pg-dash-org > i { color: var(--sf-faint); font-size: 12px; }
.pg-dash-org strong { color: var(--sf-text-2); font-weight: 600; }
.pg-dash-health { height: 30px; padding: 0 0.8rem; font-size: var(--sf-fs-xs); text-decoration: none; }
a.pg-dash-health:hover { text-decoration: none; border-color: currentColor; }
a.pg-dash-health.warning:hover { color: var(--sf-warning-text); }
a.pg-dash-health.danger:hover { color: var(--sf-danger-text); }
a.pg-dash-health.running:hover { color: var(--sf-accent-text); }

/* KPI row: 4 across, 2x2 on narrower screens (never a 3+1 orphan) */
.sf-stats.pg-dash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .sf-stats.pg-dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .sf-stats.pg-dash-kpis { grid-template-columns: minmax(0, 1fr); } }

/* KPI hint with a status pill */
.pg-dash-hint { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; min-width: 0; }

/* Overview layout: main column + side column */
.pg-dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 1.25rem; align-items: start; }
.pg-dash-main, .pg-dash-side { min-width: 0; }
@media (min-width: 576px) { .pg-dash-side .sf-panel-head { flex-wrap: nowrap; } }
@media (max-width: 1439.98px) {
    .pg-dash-grid { grid-template-columns: minmax(0, 1fr); }
    .pg-dash-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0 1.25rem; align-items: start; }
}

/* Tables */
/* First column takes the leftover width and truncates (never pushes the table wider) */
.pg-dash-root .sf-table .pg-dash-grow { width: 100%; max-width: 0; }
.pg-dash-cell { min-width: 0; flex: 1; }
.pg-dash-cell .primary { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-dash-root .sf-table .sf-sub { white-space: nowrap; }
/* Room for two metrics per line, so rows keep an even height */
.pg-dash-root .sf-table .sf-metrics { min-width: 220px; }
.sf-sub.pg-dash-site { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.pg-dash-site img { width: 13px; height: 13px; object-fit: contain; flex: none; }
.pg-dash-site-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Source -> destination: space is shared out equally and a name stops growing at its own
   width, so a short name stays whole and only the long one is truncated */
.pg-dash-route { display: grid; grid-template-columns: minmax(0, max-content) max-content minmax(0, max-content); justify-content: start; align-items: center; gap: 0.5rem; min-width: 0; color: var(--sf-text); font-weight: 500; }
.pg-dash-route > i { color: var(--sf-faint); font-size: 11px; }
.pg-dash-route-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-dash-when { display: block; white-space: nowrap; color: var(--sf-text-2); }
/* Phones: let the first column size to content and scroll inside .sf-table-wrap */
@media (max-width: 767.98px) {
    .pg-dash-root .sf-table .pg-dash-grow { width: auto; max-width: none; min-width: 190px; }
    .pg-dash-cell .primary, .pg-dash-route-name, .pg-dash-site-name { max-width: 180px; }
    .pg-dash-route { grid-template-columns: max-content max-content max-content; }
    .pg-dash-route-name { max-width: 140px; }
}
.pg-dash-th-arrow { margin: 0 0.25rem; font-size: 10px; opacity: 0.7; }

/* Side lists (quick actions, stores) */
.pg-dash-list .sf-list-item { color: inherit; text-decoration: none; }
.pg-dash-list .sf-list-item:hover { color: inherit; text-decoration: none; }
.pg-dash-list .sf-list-item:last-child { border-radius: 0 0 var(--sf-r-lg) var(--sf-r-lg); }
.pg-dash-item-title { display: block; color: var(--sf-text); font-weight: 500; font-size: var(--sf-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-dash-stores .sf-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-dash-chev { color: var(--sf-faint); font-size: 11px; flex: none; transition: color var(--sf-ease); }
.pg-dash-list .sf-list-item:hover .pg-dash-chev { color: var(--sf-text-2); }
.pg-dash-actions .sf-icon-chip { transition: background-color var(--sf-ease), border-color var(--sf-ease), color var(--sf-ease); }
.pg-dash-actions .sf-list-item:hover .sf-icon-chip { background: var(--sf-accent-soft); border-color: var(--sf-accent-border); color: var(--sf-accent-text); }
.pg-dash-more { color: var(--sf-muted); }
.pg-dash-more:hover { color: var(--sf-text); }

/* Compact empty state for the secondary panels */
.pg-dash-empty-sm { padding: 2rem 1.25rem; }
.pg-dash-empty-sm .ico { width: 44px; height: 44px; font-size: 15px; box-shadow: none; }

/* ---- page: docs ---------------------------------------------------- */

/* from resources/views/docs/_nav.blade.php */
/* ---- Header + sub-navigation ---- */
.pg-docs-head { scroll-margin-top: 100px; }
.pg-docs-head .sf-page-sub { max-width: 92ch; line-height: 1.6; }
.pg-docs-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.pg-docs-meta .badge i { font-size: 10px; opacity: 0.8; }
.pg-docs-tabs { margin-bottom: 1.5rem; }
@media (max-width: 1279px) { .pg-docs-tabs a { padding: 0 0.6rem; } }

/* ---- Method / status pills (GET, POST, 4xx, 5xx) ---- */
.pg-docs-pill {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    min-width: 54px; height: 22px; padding: 0 0.5rem; border-radius: 999px;
    font-family: var(--sf-mono); font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--sf-text-2);
}
.pg-docs-pill.get, .pg-docs-pill.c2 { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }
.pg-docs-pill.post { background: var(--sf-accent-soft); border-color: var(--sf-accent-border); color: var(--sf-accent-text); }
.pg-docs-pill.put, .pg-docs-pill.c4 { background: var(--sf-warning-soft); border-color: var(--sf-warning-border); color: var(--sf-warning-text); }
.pg-docs-pill.delete, .pg-docs-pill.c5 { background: var(--sf-danger-soft); border-color: var(--sf-danger-border); color: var(--sf-danger-text); }
.pg-docs-pill.sm { min-width: 44px; height: 19px; padding: 0 0.4rem; font-size: 9.5px; }

/* ---- Hub (/docs) ---- */
.pg-docs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1280px) { .pg-docs-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) { .pg-docs-stats { grid-template-columns: minmax(0, 1fr); } }
.pg-docs-stats .sf-stat .value.sf-mono { font-size: var(--sf-fs-lg); letter-spacing: -0.01em; }
.pg-docs-url { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.pg-docs-url > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sf-mono); font-size: 11px; }
.pg-docs-url > .btn { flex: none; }
.pg-docs-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin: 0.75rem 0 1rem; }
.pg-docs-block-title { margin: 0; font-size: var(--sf-fs-lg); font-weight: 600; color: var(--sf-text); letter-spacing: -0.01em; }
.pg-docs-block-sub { margin: 0.25rem 0 0; font-size: var(--sf-fs-sm); color: var(--sf-muted); }
/* Guide cards: pinned 3 / 2 / 1 columns, sized by the hub's own width
   (not the viewport), so the six cards never leave an orphan row. */
.pg-docs-overview { container-type: inline-size; }
.sf-grid.pg-docs-guides { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.5rem; }
@container (max-width: 859px) { .sf-grid.pg-docs-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 539px) { .sf-grid.pg-docs-guides { grid-template-columns: minmax(0, 1fr); } }
.pg-docs-guide.tone-success { --pc: var(--sf-success); }
.pg-docs-guide.tone-warning { --pc: var(--sf-warning); }
.pg-docs-guide.tone-danger { --pc: var(--sf-danger); }
.pg-docs-guide.tone-violet { --pc: var(--sf-violet); }
.pg-docs-guide.tone-neutral { --pc: #9aa3b5; }
.pg-docs-guide .sf-tile-body { gap: 0.85rem; }
.pg-docs-guide .sf-tile-head { align-items: center; }
.pg-docs-guide .sf-tile-title { white-space: normal; }
.pg-docs-guide .sf-icon-chip { width: 40px; height: 40px; font-size: 15px; box-shadow: var(--sf-hairline); }
.pg-docs-guide-desc { margin: 0; font-size: var(--sf-fs-sm); line-height: 1.6; color: var(--sf-muted); }
.pg-docs-guide .sf-tile-foot { justify-content: space-between; font-size: var(--sf-fs-sm); font-weight: 500; color: var(--sf-accent-text); }
.pg-docs-guide .sf-tile-foot i { font-size: 12px; transition: transform var(--sf-ease); }
.pg-docs-guide:hover .sf-tile-foot i { transform: translateX(3px); }

.pg-docs-quick { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.75rem; align-items: start; }
@media (max-width: 1199px) { .pg-docs-quick { grid-template-columns: minmax(0, 1fr); } }

/* Numbered steps with a connector line. */
.pg-docs-steps { list-style: none; margin: 0; padding: 0; counter-reset: pg-docs-step; }
.pg-docs-steps > li { position: relative; min-height: 28px; padding: 0.2rem 0 1.2rem 2.6rem; counter-increment: pg-docs-step; font-size: var(--sf-fs); line-height: 1.6; color: var(--sf-text-2); }
.pg-docs-steps > li:last-child { padding-bottom: 0; }
.pg-docs-steps > li::before {
    content: counter(pg-docs-step); position: absolute; left: 0; top: 0;
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: var(--sf-accent-soft); border: 1px solid var(--sf-accent-border); color: var(--sf-accent-text);
    font-size: var(--sf-fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
}
.pg-docs-steps > li::after { content: ''; position: absolute; left: 13.5px; top: 32px; bottom: 4px; width: 1px; background: var(--sf-border-strong); }
.pg-docs-steps > li:last-child::after { display: none; }
.pg-docs-step-title { display: block; font-size: var(--sf-fs-sm); font-weight: 600; color: var(--sf-text); }
.pg-docs-step-desc { display: block; margin-top: 0.1rem; font-size: var(--sf-fs-sm); line-height: 1.55; color: var(--sf-muted); }

/* ---- Guide layout: section panels + "on this page" ---- */
.pg-docs-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
/* The article track is capped and the pair is packed to the start, so
   the rail stays next to the content on very wide screens. */
@media (min-width: 1280px) { .pg-docs-layout { grid-template-columns: minmax(0, 1040px) 236px; justify-content: start; gap: 1.75rem; } }
.pg-docs-article { min-width: 0; }
.pg-docs-card { scroll-margin-top: 92px; }
.pg-docs-card > .sf-panel-head { flex-wrap: nowrap; }
.pg-docs-card > .sf-panel-head > div:first-child { flex: 1 1 auto; }
.pg-docs-card > .sf-panel-head > .sf-panel-actions { flex: none; }
.pg-docs-card:last-child { margin-bottom: 0; }
.pg-docs-card .sf-panel-sub { line-height: 1.45; }
.pg-docs-anchor { color: var(--sf-faint); opacity: 0; transition: opacity var(--sf-ease), color var(--sf-ease), background-color var(--sf-ease); }
.pg-docs-card:hover .pg-docs-anchor, .pg-docs-anchor:focus-visible { opacity: 1; }
.pg-docs-card:target { border-color: var(--sf-accent-border); }
/* Phones: no hover, so drop the permalink and give the title the room. */
@media (max-width: 599px) {
    .pg-docs-card > .sf-panel-head > .sf-panel-actions { display: none; }
    .pg-docs-card > .sf-panel-head > div:first-child { align-items: flex-start; }
}

.pg-docs-prose > p { margin: 0 0 0.9rem; max-width: 78ch; font-size: var(--sf-fs); line-height: 1.7; color: var(--sf-text-2); }
.pg-docs-prose > :last-child,
.pg-docs-prose > .sf-code-wrap:last-child > .sf-code { margin-bottom: 0; }
.pg-docs-prose strong { color: var(--sf-text); font-weight: 600; }
.pg-docs-prose a strong { color: inherit; }
.pg-docs-prose .sf-alert { margin: 1rem 0; line-height: 1.55; }
.pg-docs-prose .sf-alert:last-child { margin-bottom: 0; }
.pg-docs-prose .sf-alert code { background: rgba(0, 0, 0, 0.25); }
.pg-docs-h3 { display: flex; align-items: center; gap: 0.55rem; margin: 1.5rem 0 0.6rem; font-size: var(--sf-fs); font-weight: 600; color: var(--sf-text); }
.pg-docs-h3:first-child { margin-top: 0; }
.pg-docs-h3 i { width: 14px; text-align: center; font-size: 12px; color: var(--sf-muted); }

/* Lists: quiet dots, and a check list for best practices. */
.pg-docs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.pg-docs-list > li { position: relative; padding-left: 1.2rem; font-size: var(--sf-fs); line-height: 1.65; color: var(--sf-text-2); }
.pg-docs-list > li::before { content: ''; position: absolute; left: 0.25rem; top: 0.66em; width: 5px; height: 5px; border-radius: 50%; background: var(--sf-border-hover); }
.pg-docs-checks > li { padding-left: 2rem; }
.pg-docs-checks > li::before {
    content: "\f00c"; left: 0; top: 0.15em; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 9px;
    background: var(--sf-success-soft); border: 1px solid var(--sf-success-border); color: var(--sf-success-text);
}

/* Facts strip inside a section (limits, retries…). */
.pg-docs-facts { margin-bottom: 1.1rem; }
.pg-docs-facts .sf-tile-stat { padding: 0.7rem 0.85rem; }
.pg-docs-facts .sf-tile-stat .value { font-size: var(--sf-fs-lg); font-weight: 600; letter-spacing: -0.01em; }
.pg-docs-facts .sf-tile-stat .value small { font-size: var(--sf-fs-xs); font-weight: 500; color: var(--sf-muted); margin-left: 0.15rem; letter-spacing: 0; }
.pg-docs-facts .sf-tile-stat .value.sf-mono { font-size: var(--sf-fs-sm); line-height: 1.9; }

/* Code: header row (language + endpoint; the auto copy button sits in
   it) + token colours for the samples. */
:is(.pg-docs-layout, .pg-docs-overview) .sf-code-head {
    justify-content: flex-start; gap: 0.75rem; height: 38px; margin-top: 1rem;
    padding: 0 6.25rem 0 0.9rem; font-size: var(--sf-fs-xs); min-width: 0;
}
:is(.pg-docs-layout, .pg-docs-overview) .sf-code-head:first-child { margin-top: 0; }
:is(.pg-docs-layout, .pg-docs-overview) .sf-code-head + .sf-code-wrap > .sf-copy { top: -31px; right: 0.45rem; }
:is(.pg-docs-layout, .pg-docs-overview) .sf-code { margin: 0 0 1rem; font-size: 12.5px; }
.pg-docs-lang { display: inline-flex; align-items: center; gap: 0.45rem; flex: none; font-weight: 500; color: var(--sf-text-2); white-space: nowrap; }
.pg-docs-lang i { flex: none; width: 14px; text-align: center; font-size: 12px; color: var(--sf-muted); }
/* A label on its own may shrink (clipped before the copy button). */
.pg-docs-lang:only-child { flex: 0 1 auto; min-width: 0; overflow: hidden; }
/* A lead-in sentence right above a code block. */
.pg-docs-prose > p.pg-docs-intro { margin-bottom: 0.6rem; font-size: var(--sf-fs-sm); color: var(--sf-muted); }
.pg-docs-prose > p.pg-docs-intro + .sf-code-head { margin-top: 0; }
.pg-docs-endpoint { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; padding-left: 0.75rem; border-left: 1px solid var(--sf-border); }
.pg-docs-endpoint code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; background: none; border: 0; font-size: 11.5px; color: var(--sf-text); }
/* Phones: icon-only copy button (label kept for screen readers) and an
   icon-only language next to an endpoint, so the path stays readable. */
@media (max-width: 599px) {
    :is(.pg-docs-layout, .pg-docs-overview) .sf-code-head { gap: 0.5rem; padding-right: 2.75rem; }
    :is(.pg-docs-layout, .pg-docs-overview) .sf-code-head + .sf-code-wrap > .sf-copy [data-copy-label] {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .pg-docs-lang:not(:only-child) { gap: 0; font-size: 0; }
    .pg-docs-lang:not(:only-child) i { font-size: 12px; }
    .pg-docs-endpoint { padding-left: 0.5rem; }
}
.pg-docs-c { color: var(--sf-muted); }
.pg-docs-s { color: var(--sf-success-text); }
.pg-docs-k { color: var(--sf-accent-text); }

/* Reference tables (flush inside a section panel). */
.pg-docs-table { border-top: 1px solid var(--sf-border); }
.pg-docs-table .sf-table td { vertical-align: top; line-height: 1.55; }
.pg-docs-table .sf-table .cell-main { align-items: flex-start; gap: 0.65rem; }
.pg-docs-table .sf-table .cell-main > .sf-icon-chip { margin-top: -2px; }
.pg-docs-table .sf-table .cell-main code { font-size: 11.5px; }
.pg-docs-table .pg-docs-nowrap { white-space: nowrap; width: 1%; }
.pg-docs-table .pg-docs-fields { font-family: var(--sf-mono); font-size: 11.5px; line-height: 1.6; color: var(--sf-muted); }
.pg-docs-table .pg-docs-grants { display: flex; flex-direction: column; gap: 0.35rem; }
.pg-docs-table .pg-docs-grant { display: flex; align-items: flex-start; gap: 0.5rem; font-family: var(--sf-mono); font-size: 11.5px; line-height: 19px; color: var(--sf-text-2); }
.pg-docs-table .pg-docs-group td { padding-top: 0.55rem; padding-bottom: 0.55rem; background: var(--sf-surface-2); font-size: var(--sf-fs-xs); font-weight: 600; color: var(--sf-text-2); }
.pg-docs-table .pg-docs-group td span { margin-left: 0.35rem; font-weight: 400; color: var(--sf-muted); }
.pg-docs-table .sf-table tbody tr.pg-docs-group:hover td { background: var(--sf-surface-2); }
.pg-docs-table .sf-empty { padding: 2.25rem 1rem; }
.pg-docs-foot { justify-content: flex-start; gap: 0.55rem; line-height: 1.55; }
.pg-docs-foot > i { color: var(--sf-info-text); }

/* "On this page": chips above the article on narrow screens, sticky
   rail on the right from 1280px. Plain anchors; the page script only
   highlights the section in view. */
.pg-docs-toc { order: -1; min-width: 0; }
.pg-docs-toc-card {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.65rem 0.85rem;
    background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg);
    box-shadow: var(--sf-hairline), var(--sf-shadow-2);
}
.pg-docs-toc-title { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; font-size: var(--sf-fs-xs); font-weight: 600; color: var(--sf-text-2); }
.pg-docs-toc-title i { font-size: 11px; color: var(--sf-muted); }
.pg-docs-toc-links { display: flex; flex-wrap: wrap; gap: 0.35rem; min-width: 0; max-width: 100%; }
.pg-docs-toc-links a {
    display: inline-block; max-width: 100%; height: 26px; padding: 0 0.7rem; border-radius: 999px;
    background: var(--sf-surface-2); border: 1px solid var(--sf-border-strong);
    font-size: var(--sf-fs-xs); line-height: 24px; color: var(--sf-text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color var(--sf-ease), border-color var(--sf-ease), background-color var(--sf-ease);
}
.pg-docs-toc-links a:hover { color: var(--sf-text); border-color: var(--sf-border-hover); }
.pg-docs-toc-more { display: none; }
@media (min-width: 1280px) {
    .pg-docs-toc { order: 0; position: sticky; top: 92px; display: flex; flex-direction: column; gap: 0.85rem; }
    .pg-docs-toc-card { display: block; padding: 1rem 0.75rem 0.85rem 1rem; }
    .pg-docs-toc-title { margin: 0 0 0.7rem; }
    .pg-docs-toc-links { flex-direction: column; flex-wrap: nowrap; gap: 0.1rem; border-left: 1px solid var(--sf-border); }
    .pg-docs-toc-links a {
        display: block; height: auto; margin-left: -1px; padding: 0.4rem 0.5rem 0.4rem 0.85rem;
        background: none; border: 0; border-radius: 0 var(--sf-r-sm) var(--sf-r-sm) 0;
        font-size: var(--sf-fs-sm); line-height: 1.4; color: var(--sf-muted); white-space: normal;
    }
    .pg-docs-toc-links a:hover { background: rgba(255, 255, 255, 0.03); }
    .pg-docs-toc-links a.pg-docs-toc-active { color: var(--sf-text); background: var(--sf-accent-soft); box-shadow: inset 2px 0 0 var(--sf-accent); }
    .pg-docs-toc-more { display: flex; flex-direction: column; gap: 0.1rem; padding: 0 0.35rem; }
    .pg-docs-toc-more a { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; border-radius: var(--sf-r-sm); font-size: var(--sf-fs-xs); color: var(--sf-muted); }
    .pg-docs-toc-more a i { width: 14px; text-align: center; font-size: 11px; }
    .pg-docs-toc-more a:hover { background: rgba(255, 255, 255, 0.04); color: var(--sf-text); }
}

/* ---- API reference (/docs/api, Stoplight Elements) ----
   The frame sticks under the topbar and fills the rest of the viewport,
   minus the space below main's content box (padding + footer, measured
   by the page script as --pg-docs-api-bottom), so it is never pushed up
   under the topbar at the end of the page. Stoplight scrolls its own
   navigation and content panes inside it. `contain: layout` makes the
   frame the containing block of Stoplight's fixed elements (the
   collapsed top nav of the responsive layout), so they stay inside. */
.pg-docs-api {
    position: sticky; top: calc(var(--pg-docs-api-top, 69px) + 1rem);
    height: calc(100vh - var(--pg-docs-api-top, 69px) - 1rem - var(--pg-docs-api-bottom, 110px)); min-height: 420px;
    background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg);
    box-shadow: var(--sf-hairline), var(--sf-shadow-2);
    overflow: hidden; isolation: isolate; contain: layout paint;
}
.pg-docs-api > elements-api { display: block; height: 100%; }
.pg-docs-api .sl-drawer { height: 100%; }
.pg-docs-api .sl-elements-api { height: 100%; }

/* Stoplight ships a global reset; the app stylesheet loads after it so
   the app shell keeps its look. Re-apply that reset inside the frame
   with element-level specificity (the container sits in :where()), so
   they beat the app's element rules by order and Stoplight's own
   classes still win. */
:where(.pg-docs-api) p, :where(.pg-docs-api) h1, :where(.pg-docs-api) h2, :where(.pg-docs-api) h3,
:where(.pg-docs-api) h4, :where(.pg-docs-api) h5, :where(.pg-docs-api) h6, :where(.pg-docs-api) ul,
:where(.pg-docs-api) ol, :where(.pg-docs-api) dl, :where(.pg-docs-api) dd, :where(.pg-docs-api) pre,
:where(.pg-docs-api) blockquote, :where(.pg-docs-api) figure, :where(.pg-docs-api) hr { margin: 0; }
:where(.pg-docs-api) h1, :where(.pg-docs-api) h2, :where(.pg-docs-api) h3,
:where(.pg-docs-api) h4, :where(.pg-docs-api) h5, :where(.pg-docs-api) h6 { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; letter-spacing: normal; }
:where(.pg-docs-api) ul, :where(.pg-docs-api) ol { list-style: none; padding: 0; }
:where(.pg-docs-api) a, :where(.pg-docs-api) a:hover { text-decoration: inherit; }
:where(.pg-docs-api) a, :where(.pg-docs-api) a:not([class*="sl-text-"]):hover { color: inherit; }
:where(.pg-docs-api) code, :where(.pg-docs-api) kbd, :where(.pg-docs-api) pre { font-family: var(--font-mono); background: none; border: 0; padding: 0; color: inherit; font-size: inherit; border-radius: 0; }
:where(.pg-docs-api) table th { color: inherit; font-size: inherit; font-weight: inherit; text-transform: none; letter-spacing: normal; }
:where(.pg-docs-api) label { display: inline; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
:where(.pg-docs-api) small { font-size: inherit; }
:where(.pg-docs-api) img, :where(.pg-docs-api) svg { display: block; }
:where(.pg-docs-api) button { background-color: transparent; }

/* Stoplight layout inside the frame: darker navigation column, calmer
   heading scale, tighter content gutters. */
.pg-docs-api .sl-elements-api > .sl-flex:first-child { --color-canvas-100: var(--sf-surface-2); --color-canvas-200: var(--sf-surface-hover); }
.pg-docs-api .sl-elements-api > .sl-flex:first-child > .sl-border-r { border-color: var(--sf-border); }
.pg-docs-api .sl-elements-api > .sl-overflow-y-auto.sl-px-24 { padding-left: 3rem; padding-right: 3rem; }
@media (max-width: 1279px) {
    .pg-docs-api .sl-elements-api > .sl-flex:first-child > .sl-border-r { width: 220px !important; min-width: 220px !important; }
    .pg-docs-api .sl-elements-api > .sl-overflow-y-auto.sl-px-24 { padding-left: 1.5rem; padding-right: 1.5rem; }
}
/* Narrow content pane: stack the operation / model two-column layout
   (docs, then Try It + samples) instead of squeezing the samples into a
   ~170px column. Sized by the pane itself, so it also follows the
   resizable navigation column. */
.pg-docs-api .sl-elements-api > .sl-overflow-y-auto { container-type: inline-size; }
@container (max-width: 700px) {
    .pg-docs-api .sl-py-16 > .sl-stack > .sl-flex:has(> .sl-flex-1.sl-w-0) { flex-direction: column; }
    .pg-docs-api .sl-py-16 > .sl-stack > .sl-flex > .sl-flex-1.sl-w-0 { width: 100%; }
    .pg-docs-api .sl-py-16 > .sl-stack > .sl-flex > [class~="sl-w-2/5"] { width: 100%; max-width: none; margin-left: 0; margin-top: 2.5rem; }
}
.pg-docs-api .sl-text-5xl { font-size: 28px; letter-spacing: -0.015em; }
.pg-docs-api .sl-text-4xl { font-size: 20px; }
.pg-docs-api .sl-text-3xl { font-size: 18px; }
.pg-docs-api .sl-link-heading.sl-font-bold { font-weight: 600; }

/* Navigation column: title with an icon chip, sentence-case group
   labels, rounded rows (same shape as the app's menus) and the method
   as a small pill in front of each operation (its generic bullseye
   icon is dropped). */
.pg-docs-api .sl-elements-api > .sl-flex:first-child h4 { display: flex; align-items: center; gap: 0.6rem; font-size: var(--sf-fs); }
.pg-docs-api .sl-elements-api > .sl-flex:first-child h4::before {
    content: "\f121"; width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--sf-r-sm); background: var(--sf-accent-soft); border: 1px solid var(--sf-accent-border); color: var(--sf-accent-text);
    font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 11px;
}
.pg-docs-api .sl-elements-api > .sl-flex:first-child .sl-uppercase.sl-tracking-wide { text-transform: none; letter-spacing: 0; font-size: var(--sf-fs-xs); font-weight: 600; color: var(--sf-muted); }
.pg-docs-api .sl-elements-api > .sl-flex:first-child .sl-h-md.sl-cursor-pointer { margin: 1px 0.5rem; border-radius: var(--sf-r-sm); }
.pg-docs-api .sl-elements-api > .sl-flex:first-child .sl-h-md.sl-bg-primary-tint { background: var(--sf-accent-soft); color: var(--sf-text); box-shadow: inset 2px 0 0 var(--sf-accent); }
.pg-docs-api [id^="sl-toc-/operations/"] > svg { display: none; }
.pg-docs-api [id^="sl-toc-/operations/"] > .sl-flex-1 { margin-left: 0; }
.pg-docs-api [id^="sl-toc-/operations/"] > .sl-text-xs { order: -1; margin-right: 0.55rem; }
.pg-docs-api [id^="sl-toc-/operations/"] > .sl-text-xs > .sl-uppercase {
    min-width: 44px; height: 18px; padding: 0 0.35rem; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 1px solid; font-family: var(--sf-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.03em;
}
.pg-docs-api [id^="sl-toc-/operations/"] .sl-text-success { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }
.pg-docs-api [id^="sl-toc-/operations/"] .sl-text-primary { background: var(--sf-accent-soft); border-color: var(--sf-accent-border); color: var(--sf-accent-text); }
.pg-docs-api [id^="sl-toc-/operations/"] .sl-text-warning { background: var(--sf-warning-soft); border-color: var(--sf-warning-border); color: var(--sf-warning-text); }
.pg-docs-api [id^="sl-toc-/operations/"] .sl-text-danger { background: var(--sf-danger-soft); border-color: var(--sf-danger-border); color: var(--sf-danger-text); }

/* Operation header: URL bar on an inset surface, soft method pill. */
.pg-docs-api .sl-font-mono.sl-bg-canvas-50.sl-rounded-lg { background: var(--sf-inset); border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); }
.pg-docs-api .sl-font-mono.sl-rounded-lg > .sl-uppercase.sl-rounded-lg { border: 1px solid; border-radius: 999px; font-size: 13px; letter-spacing: 0.03em; }
.pg-docs-api .sl-font-mono.sl-rounded-lg > .sl-bg-success { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }
.pg-docs-api .sl-font-mono.sl-rounded-lg > .sl-bg-primary { background: var(--sf-accent-soft); border-color: var(--sf-accent-border); color: var(--sf-accent-text); }
.pg-docs-api .sl-font-mono.sl-rounded-lg > .sl-bg-warning { background: var(--sf-warning-soft); border-color: var(--sf-warning-border); color: var(--sf-warning-text); }
.pg-docs-api .sl-font-mono.sl-rounded-lg > .sl-bg-danger { background: var(--sf-danger-soft); border-color: var(--sf-danger-border); color: var(--sf-danger-text); }

/* Response code tabs: pills; the selected one soft-tinted. */
.pg-docs-api [role="tab"].sl-rounded-lg { border-radius: 999px; font-size: var(--sf-fs-sm); padding: 0.2rem 0.7rem; border: 1px solid transparent; }
.pg-docs-api [role="tab"].sl-rounded-lg.sl-bg-success { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }
.pg-docs-api [role="tab"].sl-rounded-lg.sl-bg-warning { background: var(--sf-warning-soft); border-color: var(--sf-warning-border); color: var(--sf-warning-text); }
.pg-docs-api [role="tab"].sl-rounded-lg.sl-bg-danger { background: var(--sf-danger-soft); border-color: var(--sf-danger-border); color: var(--sf-danger-text); }

/* Buttons (Send API Request, Export…) sized like the app's buttons. */
.pg-docs-api .sl-button { border-radius: var(--sf-r-sm); }
.pg-docs-api .sl-button.sl-bg-primary {
    height: 32px; padding: 0 0.9rem; font-size: var(--sf-fs-sm); border-color: #5b85ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Code viewer tokens — the package's dark-theme fix for the web
   component, recoloured with the docs code palette. */
.pg-docs-api-root[data-theme="dark"] .token.property { color: var(--sf-accent-text) !important; }
.pg-docs-api-root[data-theme="dark"] .token.string { color: var(--sf-success-text) !important; }
.pg-docs-api-root[data-theme="dark"] .token.number { color: var(--sf-warning-text) !important; }
.pg-docs-api-root[data-theme="dark"] .token.boolean,
.pg-docs-api-root[data-theme="dark"] .token.keyword { color: var(--sf-info-text) !important; }
.pg-docs-api-root[data-theme="dark"] .token.function { color: #c9d4ff !important; }
.pg-docs-api-root[data-theme="dark"] .token.operator { color: var(--sf-danger-text) !important; }
.pg-docs-api-root[data-theme="dark"] .token.punctuation { color: var(--sf-text-2) !important; }
.pg-docs-api-root[data-theme="dark"] .token.comment { color: var(--sf-muted) !important; }

/* Palette: map Stoplight's dark theme onto the app tokens (hex only
   where the app has no token; the HSL components feed Stoplight's own
   derived shades). The class is set on <html> by the API reference
   page, so popovers rendered into <body> pick it up as well. Stoplight
   re-declares its variables on .sl-inverted panels (Try It, code
   samples), so those are covered too: level 1 of .sl-inverted is one
   step lighter, level 2 is the base. */
.pg-docs-api-root[data-theme="dark"],
.pg-docs-api-root[data-theme="dark"] .sl-inverted .sl-inverted {
    --canvas-h: 222; --canvas-s: 24%; --canvas-l: 10%;
    --color-canvas: var(--sf-surface);
    --color-canvas-pure: var(--sf-bg);
    --color-canvas-dark: var(--sf-border-strong);
    --color-canvas-tint: rgba(255, 255, 255, 0.03);
    --color-canvas-50: #232938;
    --color-canvas-100: var(--sf-surface-3);
    --color-canvas-200: var(--sf-surface-raised);
    --color-canvas-300: #11151c;
    --color-canvas-400: var(--sf-surface-2);
    --color-canvas-500: var(--sf-inset);
    --color-canvas-dialog: var(--sf-surface-raised);

    --color-border-dark: var(--sf-border);
    --color-border: var(--sf-border);
    --color-border-light: var(--sf-border-strong);
    --color-border-input: var(--sf-border-strong);
    --color-border-button: var(--sf-border-hover);
}
.pg-docs-api-root[data-theme="dark"] .sl-inverted {
    --canvas-h: 222; --canvas-s: 23%; --canvas-l: 13%;
    --color-canvas: var(--sf-surface-3);
    --color-canvas-pure: var(--sf-surface);
    --color-canvas-dark: var(--sf-border-strong);
    --color-canvas-tint: rgba(255, 255, 255, 0.04);
    --color-canvas-50: #2a303d;
    --color-canvas-100: #212735;
    --color-canvas-200: #1d2230;
    --color-canvas-300: var(--sf-surface-hover);
    --color-canvas-400: var(--sf-surface-raised);
    --color-canvas-500: var(--sf-surface);
    --color-canvas-dialog: #212735;

    --color-border-dark: var(--sf-border-strong);
    --color-border: var(--sf-border-strong);
    --color-border-light: var(--sf-border-hover);
    --color-border-input: var(--sf-border-hover);
    --color-border-button: #434a5a;
}
.pg-docs-api-root[data-theme="dark"],
.pg-docs-api-root[data-theme="dark"] .sl-inverted {
    --font-ui: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    --font-prose: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    --font-mono: var(--sf-mono);

    --text-h: 225; --text-s: 14%; --text-l: 92%;
    --color-text-heading: var(--sf-text);
    --color-text: var(--sf-text);
    --color-text-paragraph: var(--sf-text-2);
    --color-text-muted: var(--sf-muted);
    --color-text-light: #6a7180;
    --color-text-disabled: var(--sf-faint);

    --primary-h: 225; --primary-s: 100%; --primary-l: 65%;
    --color-text-primary: var(--sf-accent-text);
    --color-primary: var(--sf-accent);
    --color-primary-light: var(--sf-accent-hover);
    --color-primary-dark: var(--sf-accent-press);
    --color-primary-darker: #2f56d6;
    --color-primary-tint: var(--sf-accent-soft);
    --color-on-primary: #fff;

    --color-text-success: var(--sf-success-text);
    --color-success: #1e7a4a;
    --color-success-light: #23905a;
    --color-success-dark: #17603a;
    --color-success-darker: #124d2f;
    --color-success-tint: var(--sf-success-soft);

    --color-text-warning: var(--sf-warning-text);
    --color-warning: #9a6a12;
    --color-warning-light: #b07c17;
    --color-warning-dark: #7a540e;
    --color-warning-darker: #5f410b;
    --color-warning-tint: var(--sf-warning-soft);

    --color-text-danger: var(--sf-danger-text);
    --color-danger: #b33a3a;
    --color-danger-light: #c94444;
    --color-danger-dark: #8f2e2e;
    --color-danger-darker: #6f2424;
    --color-danger-tint: var(--sf-danger-soft);
}

/* ---- page: fmgr ---------------------------------------------------- */

/* from resources/views/settings/feed-manager/index.blade.php */
.pg-fmgr-kpis .sf-stat .label { padding-right: 2.75rem; }
.pg-fmgr-panel .sf-panel-head { gap: 0.75rem 1.25rem; }
.pg-fmgr-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pg-fmgr-search { width: 220px; }
.pg-fmgr-search .sf-input { min-height: var(--sf-h-sm); height: var(--sf-h-sm); font-size: var(--sf-fs-xs); }
.pg-fmgr-filter .count { font-size: var(--sf-fs-2xs); color: var(--sf-muted); font-variant-numeric: tabular-nums; margin-left: 0.15rem; }
.pg-fmgr-filter .active .count { color: var(--sf-text-2); }
.sf-table td.pg-fmgr-feed-cell { width: 34%; min-width: 230px; max-width: 0; }
.pg-fmgr-feed { min-width: 0; }
.pg-fmgr-feed-text { min-width: 0; }
.pg-fmgr-feed-name { display: block; color: var(--sf-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-fmgr-feed .sf-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-logo.pg-fmgr-logo { width: 40px; height: 34px; border-radius: var(--sf-r-sm); font-size: var(--sf-fs-xs); }
.sf-logo.pg-fmgr-logo.has-img { background: #eef0f4; border-color: #d6dae3; }
.sf-logo.pg-fmgr-logo.has-img img { max-width: 84%; max-height: 72%; }
.pg-fmgr-cat { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--sf-text-2); }
.pg-fmgr-cat i { color: var(--sf-faint); font-size: 10px; }
.pg-fmgr-nocat { color: var(--sf-faint); font-size: var(--sf-fs-xs); font-style: italic; }
.pg-fmgr-ai { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.4rem; font-size: var(--sf-fs-xs); color: var(--sf-info-text); font-variant-numeric: tabular-nums; cursor: help; }
.pg-fmgr-ai i { font-size: 10px; }
.pg-fmgr-toggle-form { display: inline-flex; margin: 0; }
label.toggle.pg-fmgr-toggle { font-size: var(--sf-fs-xs); color: var(--sf-text-2); gap: 0.6rem; }
label.toggle.pg-fmgr-toggle input:checked + .track { background: var(--sf-success); }
label.toggle.pg-fmgr-toggle .pg-fmgr-state { min-width: 4.5rem; }
label.toggle.pg-fmgr-toggle input:checked ~ .pg-fmgr-state { color: var(--sf-success-text); }
.pg-fmgr-inline-form { display: inline-flex; margin: 0; }
.btn.pg-fmgr-danger { color: var(--sf-muted); }
.btn.pg-fmgr-danger:hover { color: var(--sf-danger-text); background: var(--sf-danger-soft); }
.sf-table tbody tr.pg-fmgr-pending td { background: rgba(251, 191, 36, 0.03); }
.sf-table tbody tr.pg-fmgr-noresults td, .sf-table tbody tr.pg-fmgr-noresults:hover td { background: transparent; }
.pg-fmgr-noresults .sf-empty { padding: 2.25rem 1rem; }
.pg-fmgr-noresults[hidden] { display: none; }

/* Modals: shown/hidden by the fmOpen / fmClose helpers via style.display */
.pg-fmgr-overlay {
    position: fixed; inset: 0; z-index: 1000; display: none;
    align-items: flex-start; justify-content: center; padding: 10vh 1rem 2rem;
    background: rgba(6, 8, 12, 0.72); backdrop-filter: blur(3px);
}
.pg-fmgr-modal {
    width: 100%; max-width: 480px; overflow: hidden;
    background: var(--sf-surface-raised); border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r-xl);
    box-shadow: var(--sf-shadow-pop);
}
.pg-fmgr-modal-head { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1.15rem 1.25rem 0.9rem; }
.pg-fmgr-modal-head .sf-icon-chip { width: 38px; height: 38px; font-size: 14px; }
.pg-fmgr-modal-title { flex: 1; min-width: 0; }
.pg-fmgr-modal-title h3 { margin: 0; font-size: var(--sf-fs-md); font-weight: 600; color: var(--sf-text); overflow-wrap: anywhere; }
.pg-fmgr-modal-title p { margin: 0.2rem 0 0; font-size: var(--sf-fs-xs); color: var(--sf-muted); overflow-wrap: anywhere; }
.pg-fmgr-modal-body { padding: 0.25rem 1.25rem 1.15rem; font-size: var(--sf-fs-sm); color: var(--sf-text-2); }
.pg-fmgr-modal-body > p { margin: 0 0 0.9rem; }
.pg-fmgr-modal-body .sf-alert { margin-bottom: 0; }
.pg-fmgr-modal-foot {
    display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--sf-border); background: rgba(0, 0, 0, 0.16);
}
.pg-fmgr-newcat { display: none; margin-top: 0.9rem; }

@media (max-width: 1279px) {
    .sf-stats.pg-fmgr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-table td.pg-fmgr-feed-cell { width: auto; min-width: 0; max-width: none; }
    label.toggle.pg-fmgr-toggle .pg-fmgr-state { position: absolute; width: 1px; height: 1px; min-width: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1100px) {
    .pg-fmgr-search { width: 180px; }
}

/* from resources/views/settings/feed-requests.blade.php */
.pg-fmgr-rq-kpis .sf-stat .label { padding-right: 2.75rem; }
.pg-fmgr-rq-item { align-items: flex-start; padding-top: 1rem; padding-bottom: 1rem; }
.pg-fmgr-rq-item > .sf-icon-chip { margin-top: 1px; }
.pg-fmgr-rq-head { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; min-width: 0; }
.pg-fmgr-rq-name { color: var(--sf-text); font-weight: 500; font-size: var(--sf-fs-sm); overflow-wrap: anywhere; }
.pg-fmgr-rq-meta { display: flex; align-items: center; gap: 0.35rem 1rem; flex-wrap: wrap; margin-top: 0.3rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-fmgr-rq-meta > span, .pg-fmgr-rq-meta > a { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; }
.pg-fmgr-rq-meta i { color: var(--sf-faint); font-size: 10px; }
.pg-fmgr-rq-meta a { color: var(--sf-accent-text); }
.pg-fmgr-rq-url {
    display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; max-width: 640px; min-width: 0;
    padding: 0.4rem 0.6rem; background: var(--sf-inset); border: 1px solid var(--sf-border); border-radius: var(--sf-r-sm);
    font-family: var(--sf-mono); font-size: var(--sf-fs-2xs); color: var(--sf-text-2);
}
.pg-fmgr-rq-url > i { color: var(--sf-faint); flex: none; }
.pg-fmgr-rq-url a { color: var(--sf-accent-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-fmgr-rq-url.is-empty { color: var(--sf-faint); font-family: inherit; }
.pg-fmgr-rq-notes {
    margin: 0.55rem 0 0; max-width: 640px; font-size: var(--sf-fs-xs); color: var(--sf-text-2); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-fmgr-rq-notes i { color: var(--sf-faint); margin-right: 0.35rem; font-size: 10px; }
.pg-fmgr-rq-actions { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.pg-fmgr-rq-actions form { margin: 0; display: inline-flex; }
.pg-fmgr-rq-actions form select.pg-fmgr-rq-select {
    width: auto; min-width: 150px; min-height: var(--sf-h-sm); height: var(--sf-h-sm);
    padding: 0 1.9rem 0 0.65rem; font-size: var(--sf-fs-xs);
}
.btn.pg-fmgr-rq-danger { color: var(--sf-muted); }
.btn.pg-fmgr-rq-danger:hover { color: var(--sf-danger-text); background: var(--sf-danger-soft); }
@media (max-width: 1279px) {
    .sf-stats.pg-fmgr-rq-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .pg-fmgr-rq-item { flex-wrap: wrap; }
    .pg-fmgr-rq-item > .grow { flex-basis: calc(100% - 3rem); }
    .pg-fmgr-rq-actions { margin-left: calc(32px + 0.9rem); }
}

/* ---- page: int ---------------------------------------------------- */

/* from resources/views/settings/integrations/index.blade.php */
/* Integrations list: KPI strip + connected-stores panel (Livewire
   integrations-table). The filter box and sort bar keep their own .lw-*
   styles; only the space around them and the table below are styled. */
.pg-int-kpis .sf-stat .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-int-kpis .sf-stat .label { padding-right: 2.75rem; }
/* Green chip without the legacy global .success rule (padding/border-left). */
.pg-int-kpis .pg-int-ico-ok { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }

.pg-int-tools { padding-bottom: 0.25rem; }
.pg-int-panel > .sf-table-wrap,
.pg-int-panel > .pg-int-empty { border-top: 1px solid var(--sf-border); }
.pg-int-table .pg-int-nw { white-space: nowrap; }
/* Actions stay reachable when a long store URL makes the table scroll. */
.pg-int-table th.actions,
.pg-int-table td.actions { position: sticky; right: 0; z-index: 1; }
.pg-int-table td.actions { background: var(--sf-surface); }
.pg-int-table tbody tr:hover td.actions { background: color-mix(in srgb, var(--sf-accent) 3.5%, var(--sf-surface)); }
.pg-int-table .sf-logo { width: 38px; height: 38px; }
.pg-int-table .sf-logo i { font-size: 13px; color: var(--sf-muted); }
.pg-int-store-text { display: flex; flex-direction: column; min-width: 0; }
.pg-int-name { color: var(--sf-text); font-weight: 500; line-height: 1.3; }
.pg-int-url {
    display: inline-flex; align-items: center; gap: 0.35rem; max-width: 240px; margin-top: 0.15rem;
    font-size: var(--sf-fs-xs); font-weight: 400; color: var(--sf-muted);
}
.pg-int-url > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pg-int-url > i { flex: none; font-size: 10px; opacity: 0; transition: opacity var(--sf-ease); }
a.pg-int-url:hover { color: var(--sf-accent-text); text-decoration: none; }
a.pg-int-url:hover > i { opacity: 1; }
.pg-int-plat { color: var(--sf-text-2); }
.pg-int-meta { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--sf-fs-xs); color: var(--sf-text-2); }
.pg-int-meta > i { color: var(--sf-muted); font-size: 11px; }
.pg-int-meta-sub { display: block; font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-top: 0.2rem; }
.pg-int-inline { display: inline-flex; margin: 0; }
.pg-int-row-off .sf-logo { opacity: 0.6; filter: grayscale(0.5); }
.pg-int-row-off .pg-int-name { color: var(--sf-text-2); }
.pg-int-foot > nav { flex: 1 1 auto; }

/* KPIs: 4 across on wide screens, 2x2 on laptops, stacked on phones. */
.pg-int-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1279px) {
    .pg-int-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-int-table th, .pg-int-table td { padding-left: 0.75rem; padding-right: 0.75rem; }
}
@media (max-width: 560px) {
    .pg-int-kpis { grid-template-columns: minmax(0, 1fr); }
}

/* from resources/views/settings/integrations/create.blade.php */
/* Connect-a-store form. Platform option cards drive the hidden
   #platformSelect (which togglePlatformFields() reads); the method strip,
   the setup guide and the field sections switch with it. */
.pg-int-wrap { max-width: 1180px; }

/* Platform picker: 6 across on wide screens, 3 on laptops, 2 on phones. */
.pg-int-platforms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1280px) { .pg-int-platforms { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.pg-int-pf { min-height: 128px; gap: 0.75rem; }
.pg-int-pf .sf-logo { transition: border-color var(--sf-ease), box-shadow var(--sf-ease); }
.pg-int-pf .sf-logo i { font-size: var(--sf-fs); color: var(--sf-muted); }
.pg-int-pf:has(input:checked) .sf-logo {
    border-color: color-mix(in srgb, var(--pc) 50%, var(--sf-border-strong));
    box-shadow: var(--sf-hairline), 0 0 0 3px color-mix(in srgb, var(--pc) 14%, transparent);
}
.pg-int-pf-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

/* OAuth vs token: the card matching the selected platform lights up. */
.pg-int-methods { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
.pg-int-method {
    position: relative; display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.85rem 2.5rem 0.85rem 1rem;
    background: transparent; border: 1px dashed var(--sf-border-strong); border-radius: var(--sf-r);
    color: var(--sf-muted); transition: border-color var(--sf-ease), background-color var(--sf-ease), color var(--sf-ease);
}
.pg-int-method .sf-icon-chip { transition: background-color var(--sf-ease), border-color var(--sf-ease), color var(--sf-ease); }
.pg-int-method-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.6rem; font-size: var(--sf-fs-sm); font-weight: 600; color: var(--sf-text-2); }
.pg-int-method-for { font-size: var(--sf-fs-2xs); font-weight: 500; color: var(--sf-muted); }
.pg-int-method p { margin: 0.2rem 0 0; font-size: var(--sf-fs-xs); line-height: 1.5; }
.pg-int-method .pg-int-method-on { display: none; position: absolute; top: 0.9rem; right: 0.95rem; font-size: 14px; color: var(--sf-accent-text); }
.pg-int-wrap:has(input[name="pg_int_platform"][value="shopify"]:checked) .pg-int-method[data-method="oauth"],
.pg-int-wrap:has(input[name="pg_int_platform"]:not([value="shopify"]):checked) .pg-int-method[data-method="token"] {
    border-style: solid; border-color: var(--sf-accent-border); background: rgba(79, 124, 255, 0.05); color: var(--sf-text-2);
}
.pg-int-wrap:has(input[name="pg_int_platform"][value="shopify"]:checked) .pg-int-method[data-method="oauth"] .pg-int-method-title,
.pg-int-wrap:has(input[name="pg_int_platform"]:not([value="shopify"]):checked) .pg-int-method[data-method="token"] .pg-int-method-title { color: var(--sf-text); }
.pg-int-wrap:has(input[name="pg_int_platform"][value="shopify"]:checked) .pg-int-method[data-method="oauth"] .sf-icon-chip,
.pg-int-wrap:has(input[name="pg_int_platform"]:not([value="shopify"]):checked) .pg-int-method[data-method="token"] .sf-icon-chip {
    background: var(--sf-accent-soft); border-color: var(--sf-accent-border); color: var(--sf-accent-text);
}
.pg-int-wrap:has(input[name="pg_int_platform"][value="shopify"]:checked) .pg-int-method[data-method="oauth"] .pg-int-method-on,
.pg-int-wrap:has(input[name="pg_int_platform"]:not([value="shopify"]):checked) .pg-int-method[data-method="token"] .pg-int-method-on { display: block; }

/* Two columns on wide screens: form left, sticky setup guide right. The
   guide comes first in the DOM so it sits above the form when stacked. */
.pg-int-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1280px) {
    .pg-int-layout { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "form aside"; }
    .pg-int-layout > .pg-int-aside { grid-area: aside; position: sticky; top: 88px; }
    .pg-int-layout > .pg-int-form { grid-area: form; }
}
.pg-int-layout > * { margin-bottom: 0; }
.pg-int-aside > .sf-panel { margin-bottom: 0; }

.pg-int-guide { font-size: var(--sf-fs-sm); color: var(--sf-text-2); line-height: 1.55; }
.pg-int-guide strong { color: var(--sf-text); font-weight: 600; }
.pg-int-guide-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--sf-border); }
.pg-int-guide-head .sf-logo { width: 38px; height: 38px; }
.pg-int-guide-head .sf-logo i { font-size: var(--sf-fs-sm); color: var(--sf-muted); }
.pg-int-guide-name { font-size: var(--sf-fs); font-weight: 600; color: var(--sf-text); line-height: 1.3; }
.pg-int-guide-meta { font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-top: 0.1rem; }
.pg-int-guide-title { margin: 0 0 0.85rem; font-size: var(--sf-fs-sm); font-weight: 600; color: var(--sf-text); }
.pg-int-guide-text { margin: 0; }
.pg-int-steps { list-style: none; counter-reset: pg-int-step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.pg-int-steps > li { counter-increment: pg-int-step; position: relative; padding-left: 2.1rem; }
.pg-int-steps > li::before {
    content: counter(pg-int-step);
    position: absolute; left: 0; top: 0.05rem; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--sf-accent-soft); border: 1px solid var(--sf-accent-border);
    font-size: var(--sf-fs-2xs); font-weight: 600; color: var(--sf-accent-text);
}
.pg-int-steps > li:not(:last-child)::after {
    content: ''; position: absolute; left: 10.5px; top: 1.65rem; bottom: -0.7rem; width: 1px; background: var(--sf-border-strong);
}
.pg-int-copy {
    display: flex; align-items: center; gap: 0.5rem; margin: 0.45rem 0;
    padding: 0.3rem 0.3rem 0.3rem 0.65rem;
    background: var(--sf-inset); border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r-sm);
}
.pg-int-copy code { flex: 1; min-width: 0; padding: 0; background: none; border: 0; font-size: var(--sf-fs-xs); line-height: 1.45; overflow-wrap: anywhere; }
.pg-int-copy .btn { flex: none; }

.pg-int-form .sf-panel-body { padding-top: 1.35rem; padding-bottom: 0.4rem; }
.pg-int-form .sf-form-section > .head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.pg-int-form .sf-form-section > .head .sf-icon-chip { margin-top: 1px; }
.pg-int-form .sf-form-section > .head .desc { max-width: 70ch; line-height: 1.45; }
.pg-int-form .sf-form-section > .head .sf-muted { font-weight: 400; }
.pg-int-custom > .sf-form-section:first-child { border-top: 1px solid var(--sf-border); padding-top: 1.25rem; }
.pg-int-grid-name { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr) 180px; }
.pg-int-grid-auth { display: grid; gap: 0 1rem; grid-template-columns: 190px minmax(0, 1fr); }
.pg-int-paths { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pg-int-map { display: grid; gap: 0.5rem 0.6rem; align-items: center; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) auto; margin-bottom: 0.75rem; }
.pg-int-map-arrow { text-align: center; color: var(--sf-faint); font-size: var(--sf-fs-xs); }
.pg-int-next { margin: 0.25rem 0 0; }
.sf-alert.info.pg-int-next { color: var(--sf-text-2); line-height: 1.5; }
.sf-alert.info.pg-int-next > i, .sf-alert.info.pg-int-next .title { color: var(--sf-info-text); }
/* The note wraps; the buttons stay on one line at the right. */
.pg-int-foot-note { display: inline-flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; min-width: 0; }
.pg-int-foot-note i { flex: none; color: var(--sf-success-text); }
.pg-int-form .sf-panel-foot { padding-top: 0.9rem; padding-bottom: 0.9rem; }
.pg-int-form .sf-panel-foot .sf-btn-row { flex: none; flex-wrap: nowrap; }

@media (max-width: 760px) {
    .pg-int-methods { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .pg-int-platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-int-grid-name, .pg-int-grid-auth { grid-template-columns: minmax(0, 1fr); }
    .pg-int-form .sf-panel-foot { flex-direction: column; align-items: stretch; }
    .pg-int-form .sf-panel-foot .sf-btn-row { justify-content: flex-end; }
}

/* ---- page: inv ---------------------------------------------------- */

/* from resources/views/settings/invoices/show.blade.php */
.pg-inv-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
/* Legacy .success/.errors flash rule leaks margin/padding onto tone modifiers. */
.pg-inv-title .sf-status { margin: 0; }
.sf-page-icon.pg-inv-head-icon { margin: 0; padding: 0; }
.pg-inv-alert .pg-inv-alert-body { color: var(--sf-text-2); }

/* Invoice document card (client + admin detail): letterhead, meta strip,
   parties, line items, totals. */
.pg-inv-doc { overflow: hidden; }
.pg-inv-doc-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1.25rem 2rem; padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--sf-border);
}
.pg-inv-brand { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.pg-inv-mark {
    width: 46px; height: 46px; flex: none; border-radius: var(--sf-r-lg);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sf-accent); border: 1px solid #5b85ff; color: #fff;
    font-size: 19px; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.pg-inv-label { font-size: var(--sf-fs-xs); font-weight: 500; color: var(--sf-muted); }
.pg-inv-doc-no { margin-top: 0.15rem; font-size: var(--sf-fs-lg); font-weight: 650; line-height: 1.25; color: var(--sf-text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pg-inv-sum { text-align: right; margin-left: auto; }
.pg-inv-amount { margin-top: 0.2rem; font-size: 30px; font-weight: 650; line-height: 1.1; color: var(--sf-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pg-inv-amount .cur { margin-left: 0.35rem; font-size: var(--sf-fs-sm); font-weight: 500; letter-spacing: 0; color: var(--sf-muted); }
.pg-inv-sum-note { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.45rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-inv-sum-note.is-paid { color: var(--sf-success-text); }
.pg-inv-sum-note.is-late { color: var(--sf-warning-text); }

.pg-inv-meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; margin: 0;
    background: var(--sf-border); border-bottom: 1px solid var(--sf-border);
}
.pg-inv-meta > div { padding: 0.9rem 1.25rem; background: var(--sf-surface-2); min-width: 0; }
.pg-inv-meta > div:first-child { padding-left: 1.75rem; }
.pg-inv-meta dt { display: flex; align-items: center; gap: 0.4rem; font-size: var(--sf-fs-xs); font-weight: 500; color: var(--sf-muted); }
.pg-inv-meta dt i { width: 12px; font-size: 11px; text-align: center; color: var(--sf-faint); }
.pg-inv-meta dd { margin: 0.35rem 0 0; font-size: var(--sf-fs-sm); font-weight: 600; color: var(--sf-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-inv-meta dd .sf-sub { font-weight: 400; }

.pg-inv-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1.5rem 1.75rem 1.25rem; }
.pg-inv-party { min-width: 0; padding: 1.1rem 1.2rem; background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg); }
.pg-inv-party-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.pg-inv-party-head > div { min-width: 0; }
.pg-inv-party-name { margin-top: 0.1rem; font-size: var(--sf-fs-md); font-weight: 600; line-height: 1.3; color: var(--sf-text); overflow-wrap: anywhere; }
.pg-inv-party .sf-dl { grid-template-columns: minmax(88px, max-content) 1fr; gap: 0.45rem 1rem; }
@media (max-width: 768px) { .pg-inv-parties { grid-template-columns: 1fr; } }

.pg-inv-lines { width: auto; margin: 0 1.75rem; border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg); }
.pg-inv-lines .sf-table th { background: var(--sf-surface-2); }
.pg-inv-lines th.num { width: 9.5rem; }
.pg-inv-lines tbody tr:hover td { background: transparent; }
.pg-inv-lines .sf-empty { padding: 1.75rem 1rem; }
.pg-inv-lines .sf-empty .ico { width: 40px; height: 40px; font-size: 14px; box-shadow: none; }

.pg-inv-totals { display: flex; justify-content: flex-end; padding: 1.1rem 1.75rem 1.6rem; }
.pg-inv-totals dl { width: 100%; max-width: 340px; margin: 0; }
.pg-inv-totals dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.35rem 0.95rem; font-size: var(--sf-fs-sm); }
.pg-inv-totals dt { font-weight: 400; color: var(--sf-muted); }
.pg-inv-totals dd { margin: 0; color: var(--sf-text-2); font-variant-numeric: tabular-nums; }
.pg-inv-totals dl > .grand {
    margin-top: 0.55rem; padding: 0.8rem 0.95rem;
    background: var(--sf-accent-soft); border: 1px solid var(--sf-accent-border); border-radius: var(--sf-r);
}
.pg-inv-totals .grand dt { color: var(--sf-text); font-weight: 600; }
.pg-inv-totals .grand dd { color: var(--sf-text); font-size: var(--sf-fs-lg); font-weight: 650; letter-spacing: -0.01em; }

@media (max-width: 640px) {
    .pg-inv-doc-head, .pg-inv-parties, .pg-inv-totals { padding-left: 1.1rem; padding-right: 1.1rem; }
    .pg-inv-meta > div:first-child { padding-left: 1.25rem; }
    .pg-inv-lines { margin: 0 1.1rem; }
    .pg-inv-lines th.num { width: auto; }
    .pg-inv-totals dl { max-width: none; }
    .pg-inv-sum { text-align: left; margin-left: 0; }
}
/* Admin: document + side column (details, ANAF, actions). */
.pg-inv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.25rem; align-items: start; }
.pg-inv-layout > * { min-width: 0; }
.pg-inv-layout > .sf-panel { margin-bottom: 0; }
.pg-inv-aside > .sf-panel:last-child { margin-bottom: 0; }
.pg-inv-aside .sf-dl { grid-template-columns: minmax(96px, max-content) 1fr; gap: 0.5rem 1rem; }
.pg-inv-aside .sf-dl + .sf-btn-row, .pg-inv-aside .pg-inv-aside-note + .sf-btn-row { margin-top: 1rem; }
.pg-inv-aside-note { margin: 0; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-inv-aside .sf-btn-row > form { display: inline-flex; margin: 0; }
@media (max-width: 1100px) {
    .pg-inv-layout { grid-template-columns: minmax(0, 1fr); }
    .pg-inv-aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; align-items: start; }
    .pg-inv-aside > .sf-panel { margin-bottom: 0; }
}

/* from resources/views/settings/invoices/index.blade.php */
/* Invoice lists (client + admin): panel + airy table. */
.pg-inv-list { overflow: hidden; }
.pg-inv-num { color: var(--sf-text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-inv-num:hover { color: var(--sf-accent-text); text-decoration: none; }
.pg-inv-cell { min-width: 0; }
.pg-inv-cell .sf-sub { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-inv-date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--sf-text-2); }
.pg-inv-date .sf-sub.is-late { color: var(--sf-warning-text); }
.pg-inv-total { white-space: nowrap; font-size: var(--sf-fs); }
.pg-inv-list .sf-status { margin: 0; }
.btn.pg-inv-pay:hover, .btn.pg-inv-pay:focus { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }
.btn.pg-inv-del:hover, .btn.pg-inv-del:focus { background: var(--sf-danger-soft); border-color: var(--sf-danger-border); color: var(--sf-danger-text); }
.pg-inv-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
@media (max-width: 1199px) {
    .pg-inv-list .sf-table th, .pg-inv-list .sf-table td { padding-left: 0.7rem; padding-right: 0.7rem; }
    .pg-inv-list .sf-table .cell-main .sf-icon-chip { display: none; }
    .pg-inv-cell .sf-sub { max-width: 180px; }
    .pg-inv-date .sf-sub { white-space: normal; }
    .pg-inv-list .sf-table th:first-child, .pg-inv-list .sf-table td:first-child { padding-left: 1rem; }
    .pg-inv-list .sf-table th:last-child, .pg-inv-list .sf-table td:last-child { padding-right: 1rem; }
    .pg-inv-list .sf-table .actions .sf-btn-row { gap: 0.3rem; }
}
/* Admin list only: client cell + tighter columns on small screens. */
.pg-inv-client .primary { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1199px) {
    .pg-inv-client .sf-avatar { display: none; }
    .pg-inv-client .primary, .pg-inv-client .sf-sub { max-width: 140px; }
    .pg-inv-client .sf-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .btn.pg-inv-view { width: var(--sf-h-sm); padding: 0; }
    .btn.pg-inv-view .pg-inv-view-text { display: none; }
}
/* Four KPI cards stay on one row down to ~1024px. */
.sf-stats.pg-inv-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pg-inv-kpis .sf-stat .label { padding-right: 2.6rem; }

/* from resources/views/invoices/show.blade.php */
.pg-inv-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
/* Legacy .success/.errors flash rule leaks margin/padding onto tone modifiers. */
.pg-inv-title .sf-status { margin: 0; }
.sf-page-icon.pg-inv-head-icon { margin: 0; padding: 0; }
.pg-inv-alert .pg-inv-alert-body { color: var(--sf-text-2); }

/* Invoice document card (client + admin detail): letterhead, meta strip,
   parties, line items, totals. */
.pg-inv-doc { overflow: hidden; }
.pg-inv-doc-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1.25rem 2rem; padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--sf-border);
}
.pg-inv-brand { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.pg-inv-mark {
    width: 46px; height: 46px; flex: none; border-radius: var(--sf-r-lg);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sf-accent); border: 1px solid #5b85ff; color: #fff;
    font-size: 19px; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.pg-inv-label { font-size: var(--sf-fs-xs); font-weight: 500; color: var(--sf-muted); }
.pg-inv-doc-no { margin-top: 0.15rem; font-size: var(--sf-fs-lg); font-weight: 650; line-height: 1.25; color: var(--sf-text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pg-inv-sum { text-align: right; margin-left: auto; }
.pg-inv-amount { margin-top: 0.2rem; font-size: 30px; font-weight: 650; line-height: 1.1; color: var(--sf-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pg-inv-amount .cur { margin-left: 0.35rem; font-size: var(--sf-fs-sm); font-weight: 500; letter-spacing: 0; color: var(--sf-muted); }
.pg-inv-sum-note { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.45rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-inv-sum-note.is-paid { color: var(--sf-success-text); }
.pg-inv-sum-note.is-late { color: var(--sf-warning-text); }

.pg-inv-meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; margin: 0;
    background: var(--sf-border); border-bottom: 1px solid var(--sf-border);
}
.pg-inv-meta > div { padding: 0.9rem 1.25rem; background: var(--sf-surface-2); min-width: 0; }
.pg-inv-meta > div:first-child { padding-left: 1.75rem; }
.pg-inv-meta dt { display: flex; align-items: center; gap: 0.4rem; font-size: var(--sf-fs-xs); font-weight: 500; color: var(--sf-muted); }
.pg-inv-meta dt i { width: 12px; font-size: 11px; text-align: center; color: var(--sf-faint); }
.pg-inv-meta dd { margin: 0.35rem 0 0; font-size: var(--sf-fs-sm); font-weight: 600; color: var(--sf-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-inv-meta dd .sf-sub { font-weight: 400; }

.pg-inv-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1.5rem 1.75rem 1.25rem; }
.pg-inv-party { min-width: 0; padding: 1.1rem 1.2rem; background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg); }
.pg-inv-party-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.pg-inv-party-head > div { min-width: 0; }
.pg-inv-party-name { margin-top: 0.1rem; font-size: var(--sf-fs-md); font-weight: 600; line-height: 1.3; color: var(--sf-text); overflow-wrap: anywhere; }
.pg-inv-party .sf-dl { grid-template-columns: minmax(88px, max-content) 1fr; gap: 0.45rem 1rem; }
@media (max-width: 768px) { .pg-inv-parties { grid-template-columns: 1fr; } }

.pg-inv-lines { width: auto; margin: 0 1.75rem; border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg); }
.pg-inv-lines .sf-table th { background: var(--sf-surface-2); }
.pg-inv-lines th.num { width: 9.5rem; }
.pg-inv-lines tbody tr:hover td { background: transparent; }
.pg-inv-lines .sf-empty { padding: 1.75rem 1rem; }
.pg-inv-lines .sf-empty .ico { width: 40px; height: 40px; font-size: 14px; box-shadow: none; }

.pg-inv-totals { display: flex; justify-content: flex-end; padding: 1.1rem 1.75rem 1.6rem; }
.pg-inv-totals dl { width: 100%; max-width: 340px; margin: 0; }
.pg-inv-totals dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.35rem 0.95rem; font-size: var(--sf-fs-sm); }
.pg-inv-totals dt { font-weight: 400; color: var(--sf-muted); }
.pg-inv-totals dd { margin: 0; color: var(--sf-text-2); font-variant-numeric: tabular-nums; }
.pg-inv-totals dl > .grand {
    margin-top: 0.55rem; padding: 0.8rem 0.95rem;
    background: var(--sf-accent-soft); border: 1px solid var(--sf-accent-border); border-radius: var(--sf-r);
}
.pg-inv-totals .grand dt { color: var(--sf-text); font-weight: 600; }
.pg-inv-totals .grand dd { color: var(--sf-text); font-size: var(--sf-fs-lg); font-weight: 650; letter-spacing: -0.01em; }

@media (max-width: 640px) {
    .pg-inv-doc-head, .pg-inv-parties, .pg-inv-totals { padding-left: 1.1rem; padding-right: 1.1rem; }
    .pg-inv-meta > div:first-child { padding-left: 1.25rem; }
    .pg-inv-lines { margin: 0 1.1rem; }
    .pg-inv-lines th.num { width: auto; }
    .pg-inv-totals dl { max-width: none; }
    .pg-inv-sum { text-align: left; margin-left: 0; }
}

/* from resources/views/invoices/index.blade.php */
/* Invoice lists (client + admin): panel + airy table. */
.pg-inv-list { overflow: hidden; }
.pg-inv-num { color: var(--sf-text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-inv-num:hover { color: var(--sf-accent-text); text-decoration: none; }
.pg-inv-cell { min-width: 0; }
.pg-inv-cell .sf-sub { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-inv-date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--sf-text-2); }
.pg-inv-date .sf-sub.is-late { color: var(--sf-warning-text); }
.pg-inv-total { white-space: nowrap; font-size: var(--sf-fs); }
.pg-inv-list .sf-status { margin: 0; }
.btn.pg-inv-pay:hover, .btn.pg-inv-pay:focus { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }
.btn.pg-inv-del:hover, .btn.pg-inv-del:focus { background: var(--sf-danger-soft); border-color: var(--sf-danger-border); color: var(--sf-danger-text); }
.pg-inv-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
@media (max-width: 1199px) {
    .pg-inv-list .sf-table th, .pg-inv-list .sf-table td { padding-left: 0.7rem; padding-right: 0.7rem; }
    .pg-inv-list .sf-table .cell-main .sf-icon-chip { display: none; }
    .pg-inv-cell .sf-sub { max-width: 180px; }
    .pg-inv-date .sf-sub { white-space: normal; }
    .pg-inv-list .sf-table th:first-child, .pg-inv-list .sf-table td:first-child { padding-left: 1rem; }
    .pg-inv-list .sf-table th:last-child, .pg-inv-list .sf-table td:last-child { padding-right: 1rem; }
    .pg-inv-list .sf-table .actions .sf-btn-row { gap: 0.3rem; }
}

/* ---- page: lib ---------------------------------------------------- */

/* from resources/views/feeds/library.blade.php */
/* Page CSS lives here, NOT inside the Livewire SFC, so wire:morph never
   duplicates it on updates. */

/* Filter box frame. Same values as the shared .lw-filter-bar rule, which
   is currently dropped by the browser (stray Blade/HTML text right before
   it in sb-admin2.css). Safe to delete once that rule parses again. */
.pg-lib-filter { background: #14171f; border: 1px solid #23262f; border-radius: 12px; overflow: hidden; margin-bottom: 1rem; }

/* Category picker (radio pills inside the lw filter box). */
.pg-lib-cat-item { flex-basis: 100%; }
.pg-lib-cats { margin: 0; flex-wrap: wrap; }
.pg-lib-cats label {
    position: relative; display: inline-flex; align-items: center; gap: 0.45rem;
    height: 32px; padding: 0 0.75rem; margin: 0; border-radius: var(--sf-r-sm);
    color: var(--sf-muted); font-size: var(--sf-fs-sm); font-weight: 500; white-space: nowrap;
    cursor: pointer; user-select: none;
    transition: color var(--sf-ease), background-color var(--sf-ease), box-shadow var(--sf-ease);
}
.pg-lib-cats label:hover { color: var(--sf-text); background: rgba(255, 255, 255, 0.04); }
.pg-lib-cats label.active, .pg-lib-cats label:has(input:checked) {
    color: var(--sf-text); background: var(--sf-surface-3);
    box-shadow: var(--sf-hairline), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.pg-lib-cats label:has(input:focus-visible) { box-shadow: var(--sf-focus); }
.pg-lib-cats label.active .count, .pg-lib-cats label:has(input:checked) .count { background: var(--sf-accent-soft); color: var(--sf-accent-text); }
.pg-lib-cats input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* Category sections. */
.pg-lib-catalog { padding-top: 0.5rem; transition: opacity 0.15s ease; }
.pg-lib-busy { opacity: 0.55; }
.pg-lib-section + .pg-lib-section { margin-top: 2rem; }
.pg-lib-section-head { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.9rem; }
.pg-lib-section-head::after { content: ''; flex: 1; height: 1px; background: var(--sf-border); margin-left: 0.4rem; }
.pg-lib-section-title { margin: 0; font-size: var(--sf-fs-md); font-weight: 600; color: var(--sf-text); }
.pg-lib-section-count {
    height: 20px; min-width: 20px; padding: 0 0.45rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--sf-fs-2xs); font-weight: 600; color: var(--sf-text-2);
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Feed tiles. */
.pg-lib-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pg-lib-tile.is-on { --pc: var(--sf-success); }
.pg-lib-tile .sf-tile-body { gap: 0.9rem; }
.pg-lib-tile .sf-tile-head { align-items: center; }
.pg-lib-logo { width: 64px; height: 46px; }
.pg-lib-logo.has-img { background: #eef0f4; border-color: #d6dae3; }
.pg-lib-logo.has-img img { max-width: 84%; max-height: 74%; }
.pg-lib-id { flex: 1; min-width: 0; }
.pg-lib-id .sf-tile-meta i { font-size: 10px; margin-right: 0.3rem; color: var(--sf-faint); }
.pg-lib-desc {
    margin: 0; font-size: var(--sf-fs-xs); line-height: 1.5; color: var(--sf-muted); min-height: 3em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-lib-review { align-self: flex-start; }
.pg-lib-tile .sf-tile-stat .value .badge { height: 20px; margin-top: 0.05rem; }
.pg-lib-fmt-json { background: var(--sf-violet-soft); color: #c4b5fd; border-color: rgba(167, 139, 250, 0.3); }
.pg-lib-tile .sf-tile-foot { justify-content: space-between; }
.pg-lib-tile.is-on .sf-tile-foot { background: rgba(74, 222, 128, 0.03); }

/* Request-a-feed modal. */
.pg-lib-overlay {
    position: fixed; inset: 0; z-index: 1040; overflow-y: auto;
    display: flex; align-items: flex-start; justify-content: center; padding: 8vh 1rem 2rem;
    background: rgba(6, 8, 12, 0.72); backdrop-filter: blur(3px);
}
.pg-lib-modal {
    width: 100%; max-width: 580px; overflow: hidden;
    background: var(--sf-surface-raised); border: 1px solid var(--sf-border-strong);
    border-radius: var(--sf-r-xl); box-shadow: var(--sf-shadow-pop);
}
.pg-lib-modal-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--sf-border);
}
.pg-lib-modal-id { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.pg-lib-modal-id .sf-icon-chip { width: 38px; height: 38px; font-size: 14px; }
.pg-lib-modal-title { margin: 0; font-size: var(--sf-fs-lg); font-weight: 600; color: var(--sf-text); }
.pg-lib-modal-sub { margin: 0.2rem 0 0; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-lib-modal-body { padding: 1.25rem 1.5rem 0.25rem; }
.pg-lib-modal-body .sf-field:last-child { margin-bottom: 0; }
.pg-lib-modal-body .sf-form-grid { row-gap: 1rem; }
.pg-lib-modal-body .sf-form-grid .sf-field { margin-bottom: 0; }
.pg-lib-modal-foot {
    display: flex; justify-content: flex-end; gap: 0.5rem;
    padding: 1rem 1.5rem; border-top: 1px solid var(--sf-border); background: var(--sf-surface-2);
}
.pg-lib-req { color: var(--sf-danger-text); }

/* ---- page: plans ---------------------------------------------------- */

/* from resources/views/settings/plans/index.blade.php */
/* Plan cards: panel with a plan-tinted icon chip (--pc = plan colour). */
.pg-plans-grid { align-items: stretch; }
.sf-stats.pg-plans-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pg-plans-kpis .sf-stat .label { padding-right: 2.6rem; }
.pg-plans-card { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.pg-plans-card .sf-panel-head { align-items: flex-start; flex-wrap: nowrap; }
.pg-plans-ident { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.pg-plans-ident > div { min-width: 0; }
.pg-plans-chip {
    width: 40px; height: 40px; flex: none; border-radius: var(--sf-r-lg);
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
    color: var(--pc, var(--sf-accent));
    background: color-mix(in srgb, var(--pc, var(--sf-accent)) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc, var(--sf-accent)) 36%, transparent);
    box-shadow: var(--sf-hairline);
}
.pg-plans-name { margin: 0; font-size: var(--sf-fs-md); font-weight: 600; line-height: 1.3; color: var(--sf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-plans-key { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); white-space: nowrap; }
.pg-plans-key .sf-mono { color: var(--sf-text-2); font-size: 11.5px; }
.pg-plans-key .sep { color: var(--sf-faint); }
.pg-plans-swatch { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--pc, var(--sf-accent)); }
.pg-plans-card .sf-panel-head .sf-status { margin-top: 0.15rem; flex: none; }

.pg-plans-pricing { padding: 1.15rem 1.25rem 1.1rem; border-bottom: 1px solid var(--sf-border); }
.pg-plans-price { display: flex; align-items: baseline; gap: 0.1rem; line-height: 1; color: var(--sf-text); font-variant-numeric: tabular-nums; }
.pg-plans-price .cur { align-self: flex-start; margin-top: 0.25rem; margin-right: 0.1rem; font-size: var(--sf-fs-lg); font-weight: 600; color: var(--sf-text-2); }
.pg-plans-price .amount { font-size: 34px; font-weight: 650; letter-spacing: -0.025em; }
.pg-plans-price .dec { font-size: var(--sf-fs-lg); font-weight: 600; color: var(--sf-text-2); }
.pg-plans-price .per { margin-left: 0.4rem; font-size: var(--sf-fs-sm); color: var(--sf-muted); }
.pg-plans-annual { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.65rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.pg-plans-annual i { color: var(--sf-faint); font-size: 11px; }

.pg-plans-body { flex: 1; display: flex; flex-direction: column; gap: 1.2rem; padding: 1.1rem 1.25rem 1.25rem; }
.pg-plans-label { margin: 0 0 0.5rem; font-size: var(--sf-fs-xs); font-weight: 600; color: var(--sf-muted); }
.pg-plans-limits { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0; font-size: var(--sf-fs-sm); }
.pg-plans-limits dt, .pg-plans-limits dd { margin: 0; padding: 0.42rem 0; line-height: 1.4; border-top: 1px solid var(--sf-border); }
.pg-plans-limits dt:first-of-type, .pg-plans-limits dd:first-of-type { border-top: 0; }
.pg-plans-limits dt { display: flex; align-items: center; gap: 0.6rem; min-width: 0; font-weight: 400; color: var(--sf-text-2); }
.pg-plans-limits dt i { width: 14px; flex: none; text-align: center; font-size: 11.5px; color: var(--sf-muted); }
.pg-plans-limits dt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-plans-limits dd { padding-left: 1rem; text-align: right; font-weight: 600; color: var(--sf-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-plans-limits dd.is-unlimited { font-weight: 500; color: var(--sf-text-2); }
.pg-plans-limits dd.is-unlimited i { margin-right: 0.35rem; font-size: 11px; color: var(--sf-success-text); }

.pg-plans-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: var(--sf-fs-sm); color: var(--sf-text-2); }
.pg-plans-features li { display: flex; align-items: flex-start; gap: 0.55rem; line-height: 1.4; }
.pg-plans-features li i { flex: none; width: 16px; height: 16px; margin-top: 0.1rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 8.5px; background: var(--sf-success-soft); border: 1px solid var(--sf-success-border); color: var(--sf-success-text); }

.pg-plans-card .sf-panel-foot { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.pg-plans-subs { cursor: default; }
.pg-plans-subs i { font-size: 10px; }
.pg-plans-inline { display: inline-flex; margin: 0; }

.pg-plans-card.is-inactive .pg-plans-pricing,
.pg-plans-card.is-inactive .pg-plans-body,
.pg-plans-card.is-inactive .pg-plans-ident { opacity: 0.55; }

/* New / edit modal. */
.pg-plans-modal .modal-header { align-items: center; padding: 0.95rem 1.25rem; }
.pg-plans-modal .modal-title { display: flex; align-items: center; gap: 0.65rem; margin: 0; font-size: var(--sf-fs-md); font-weight: 600; }
.pg-plans-modal .modal-title .sf-muted { font-weight: 400; font-size: var(--sf-fs-sm); }
.pg-plans-modal .modal-body { padding: 1.25rem 1.35rem 0.5rem; }
.pg-plans-modal .modal-footer { gap: 0.5rem; padding: 0.8rem 1.25rem; }
.pg-plans-modal .modal-footer > * { margin: 0; }

.pg-plans-modal .sf-form-section { padding: 1.1rem 0 0.35rem; }
.pg-plans-modal .sf-form-section:first-child { padding-top: 0; }
.pg-plans-modal .sf-form-section > .head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.95rem; }
.pg-plans-modal .sf-form-section > .head .desc { margin-top: 0.1rem; }
.pg-plans-modal .sf-form-section > .head .sf-icon-chip { margin: 0; padding: 0; }
.pg-plans-fields { display: grid; gap: 0 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-plans-fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-plans-fields-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-plans-req { color: var(--sf-faint); }
.pg-plans-switch { display: flex; align-items: center; min-height: var(--sf-h); }
@media (max-width: 991.98px) {
    .pg-plans-fields, .pg-plans-fields-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .pg-plans-fields, .pg-plans-fields-2, .pg-plans-fields-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- page: prod ---------------------------------------------------- */

/* from resources/views/feeds/products/show.blade.php */
/* Product detail (/feeds/{feed}/products/{product}) */
.pg-prod-detail { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.pg-prod-detail-side { position: sticky; top: 5.5rem; }
.pg-prod-detail-main { min-width: 0; }
@media (max-width: 1279px) { .pg-prod-detail { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); } }
/* Below 1100px the side column squeezes the Variations table (Culoare x Marime + SKU/Price/EAN/Stock),
   so the gallery goes full width on top: main image left, thumbnail strip right. */
@media (max-width: 1099px) {
    .pg-prod-detail { grid-template-columns: minmax(0, 1fr); }
    .pg-prod-detail-side { position: static; }
    .pg-prod-gallery { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1rem; align-items: start; }
    .pg-prod-gallery .pg-prod-thumbs { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(64px, 76px)); }
}
@media (max-width: 640px) {
    .pg-prod-gallery { grid-template-columns: minmax(0, 1fr); }
    .pg-prod-gallery .pg-prod-thumbs { margin-top: 0.75rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.pg-prod-preview {
    position: relative; aspect-ratio: 1 / 1; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--sf-inset); border: 1px solid var(--sf-border); border-radius: var(--sf-r);
    color: var(--sf-faint); font-size: 3rem;
}
/* Images sit on an opaque inset and hide the fallback glyph while present;
   onerror removes the <img>, which brings the glyph back. */
.pg-prod-preview img, .pg-prod-thumbs .t img, .pg-prod-swatch img { background: var(--sf-inset); }
.pg-prod-preview:has(> img) > i, .pg-prod-thumbs .t:has(> img) > i, .pg-prod-swatch:has(> img) > i { display: none; }
.pg-prod-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-prod-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
.pg-prod-thumbs .t {
    position: relative; aspect-ratio: 1 / 1; padding: 0; margin: 0; overflow: hidden; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: var(--sf-inset); border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r-sm);
    color: var(--sf-faint); font-size: 14px; transition: border-color var(--sf-ease), box-shadow var(--sf-ease);
}
.pg-prod-thumbs .t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-prod-thumbs .t:hover { border-color: var(--sf-border-hover); }
.pg-prod-thumbs .t:focus-visible { outline: 0; box-shadow: var(--sf-focus); }
.pg-prod-thumbs .t.active { border-color: var(--sf-accent); box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.28); }

.pg-prod-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.pg-prod-price-lg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; margin: 1rem 0 0.25rem; font-variant-numeric: tabular-nums; }
.pg-prod-price-lg b { font-size: 2rem; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; color: var(--sf-text); }
.pg-prod-price-lg b small { font-size: var(--sf-fs-md); font-weight: 500; color: var(--sf-muted); letter-spacing: 0; margin-left: 0.25rem; }
.pg-prod-price-lg s { color: var(--sf-muted); font-size: var(--sf-fs-md); }
.pg-prod-price-note { font-size: var(--sf-fs-xs); color: var(--sf-muted); margin: 0 0 1.1rem; }
.pg-prod-price-gap { height: 0.85rem; }
.pg-prod-summary .sf-tile-stat .value.is-ok { color: var(--sf-success-text); }
.pg-prod-summary .sf-tile-stat .value.is-low { color: var(--sf-warning-text); }
.pg-prod-summary .sf-tile-stat .value.is-out { color: var(--sf-danger-text); }
.pg-prod-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--sf-border); }

/* "Details after rules" callout — what will actually land in the store. */
.pg-prod-callout {
    margin-bottom: 1.25rem; border-radius: var(--sf-r-lg); overflow: hidden;
    background: color-mix(in srgb, var(--sf-success) 5%, var(--sf-surface));
    border: 1px solid var(--sf-success-border); box-shadow: var(--sf-hairline), var(--sf-shadow-2);
}
.pg-prod-callout-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.95rem 1.15rem; border-bottom: 1px solid var(--sf-success-border); }
.pg-prod-callout-head > div { flex: 1; min-width: 0; }
.pg-prod-callout-title { font-size: var(--sf-fs); font-weight: 600; color: var(--sf-text); }
.pg-prod-callout-desc { font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-top: 0.1rem; }
.pg-prod-callout-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem 1.5rem; padding: 1rem 1.15rem 1.1rem; }
.pg-prod-kv-k { font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-bottom: 0.3rem; }
.pg-prod-kv-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; color: var(--sf-text); font-variant-numeric: tabular-nums; }
.pg-prod-kv-v b { font-size: 1.45rem; font-weight: 650; color: var(--sf-success-text); letter-spacing: -0.01em; line-height: 1.15; }
.pg-prod-kv-v b small { font-size: var(--sf-fs-sm); font-weight: 500; color: var(--sf-muted); margin-left: 0.2rem; }
.pg-prod-kv-v s { color: var(--sf-muted); font-size: var(--sf-fs-sm); }
.pg-prod-kv-v code { font-size: var(--sf-fs-xs); }

.pg-prod-dl-body { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.pg-prod-dl { gap: 0; grid-template-columns: fit-content(42%) minmax(0, 1fr); }
.pg-prod-dl dt, .pg-prod-dl dd { padding: 0.66rem 0; border-bottom: 1px solid var(--sf-border); }
.pg-prod-dl dt { padding-right: 1.5rem; }
.pg-prod-dl dt:last-of-type, .pg-prod-dl dd:last-of-type { border-bottom: 0; }
.pg-prod-dl dd { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.pg-prod-hash { font-family: var(--sf-mono); font-size: 11.5px; color: var(--sf-text-2); word-break: break-all; }

.pg-prod-vgroup { border-bottom: 1px solid var(--sf-border); }
.pg-prod-vgroup:last-child { border-bottom: 0; }
.pg-prod-vgroup > summary {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem;
    cursor: pointer; list-style: none; user-select: none; transition: background-color var(--sf-ease);
}
.pg-prod-vgroup > summary::-webkit-details-marker { display: none; }
.pg-prod-vgroup > summary:hover { background: rgba(255, 255, 255, 0.02); }
.pg-prod-vgroup[open] > summary { background: var(--sf-surface-2); border-bottom: 1px solid var(--sf-border); }
.pg-prod-swatch { position: relative; color: var(--sf-faint); font-size: 11px; }
.pg-prod-swatch img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.pg-prod-vgroup-name { font-weight: 500; color: var(--sf-text); font-size: var(--sf-fs-sm); }
.pg-prod-opt { color: var(--sf-muted); font-weight: 400; text-transform: capitalize; }
.pg-prod-vgroup-meta { margin-left: auto; font-size: var(--sf-fs-xs); color: var(--sf-muted); white-space: nowrap; }
.pg-prod-vgroup-caret { color: var(--sf-faint); font-size: 11px; transition: transform var(--sf-ease); }
.pg-prod-vgroup[open] .pg-prod-vgroup-caret { transform: rotate(180deg); }
.pg-prod-vtable td, .pg-prod-vtable th { white-space: nowrap; }
.pg-prod-vtable .sf-mono { font-size: var(--sf-fs-xs); }

.pg-prod-desc { line-height: 1.7; color: var(--sf-text-2); font-size: var(--sf-fs-sm); }
.pg-prod-desc img { max-width: 100%; height: auto; border-radius: var(--sf-r-sm); }

.pg-prod-debug > summary { cursor: pointer; list-style: none; border-bottom: 0; border-radius: var(--sf-r-lg); }
.pg-prod-debug > summary::-webkit-details-marker { display: none; }
.pg-prod-debug[open] > summary { border-bottom: 1px solid var(--sf-border); border-radius: var(--sf-r-lg) var(--sf-r-lg) 0 0; }
.pg-prod-debug[open] .pg-prod-vgroup-caret { transform: rotate(180deg); }

/* from resources/views/feeds/products/index.blade.php */
/* Per-feed product browser (/feeds/{feed}/products) — markup lives in the
   feed-products-table Livewire component. One set of rows, two looks:
   [data-view="list"] (default, airy rows) and [data-view="grid"] (cards). */
.pg-prod-kpi-bar { margin-top: 0.7rem; }

.pg-prod-items { display: flex; flex-direction: column; }
.pg-prod-items-head, .pg-prod-item {
    display: grid; align-items: center; gap: 0 1rem; padding: 0.8rem 1.25rem;
    grid-template-columns: 52px minmax(0, 2.4fr) minmax(0, 1.1fr) minmax(120px, 0.8fr) 128px 14px;
}
.pg-prod-items.has-rules .pg-prod-items-head, .pg-prod-items.has-rules .pg-prod-item {
    grid-template-columns: 52px minmax(0, 2.1fr) minmax(0, 1fr) minmax(110px, 0.75fr) minmax(140px, 0.9fr) 118px 14px;
}
.pg-prod-items-head {
    padding-top: 0.7rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--sf-border);
    font-size: var(--sf-fs-2xs); font-weight: 600; color: var(--sf-muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}
.pg-prod-items-head > :first-child { grid-column: span 2; }
.pg-prod-items-head .pg-prod-num { text-align: right; }

.pg-prod-item {
    position: relative; color: inherit; text-decoration: none;
    border-bottom: 1px solid var(--sf-border); transition: background-color var(--sf-ease), border-color var(--sf-ease), transform var(--sf-ease);
}
.pg-prod-item:last-child { border-bottom: 0; }
.pg-prod-item:hover { background: rgba(79, 124, 255, 0.035); color: inherit; text-decoration: none; }
.pg-prod-item:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--sf-accent-border); }

.pg-prod-thumb { position: relative; color: var(--sf-faint); font-size: 18px; }
.pg-prod-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; background: var(--sf-inset); }
/* Fallback glyph only while there is no image (onerror removes the <img>). */
.pg-prod-thumb:has(> img) > i { display: none; }
.pg-prod-thumb .pg-prod-stock-over { display: none; }

.pg-prod-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.pg-prod-name { color: var(--sf-text); font-weight: 500; font-size: var(--sf-fs-sm); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-prod-item:hover .pg-prod-name { color: #fff; }
.pg-prod-meta { display: flex; align-items: center; gap: 0.4rem; min-width: 0; font-size: var(--sf-fs-xs); color: var(--sf-muted); white-space: nowrap; overflow: hidden; }
.pg-prod-meta .sf-mono { color: var(--sf-text-2); font-size: 11.5px; }
.pg-prod-sep { color: var(--sf-faint); }
.pg-prod-brand { overflow: hidden; text-overflow: ellipsis; }

.pg-prod-type { font-size: var(--sf-fs-xs); color: var(--sf-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-prod-price, .pg-prod-rules { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0.15rem 0.45rem; text-align: right; min-width: 0; font-variant-numeric: tabular-nums; }
.pg-prod-price b { color: var(--sf-text); font-weight: 600; font-size: var(--sf-fs-sm); white-space: nowrap; }
.pg-prod-price s, .pg-prod-rules s { color: var(--sf-muted); font-size: var(--sf-fs-xs); }
.pg-prod-price .sf-sub, .pg-prod-rules .sf-sub { flex-basis: 100%; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pg-prod-rules b { color: var(--sf-success-text); font-weight: 600; font-size: var(--sf-fs-sm); white-space: nowrap; }
.pg-prod-rules .pg-prod-rules-label { display: none; }
.pg-prod-rules.is-empty { color: var(--sf-faint); }
/* List look: compare price / second line always stacked under the price, so every row has the same rhythm. */
.pg-prod-browser:not([data-view="grid"]) .pg-prod-price,
.pg-prod-browser:not([data-view="grid"]) .pg-prod-rules { flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: 0.1rem; }
.pg-prod-browser:not([data-view="grid"]) .pg-prod-price .sf-sub,
.pg-prod-browser:not([data-view="grid"]) .pg-prod-rules .sf-sub { flex-basis: auto; }
.pg-prod-stock { display: flex; justify-content: flex-start; }
.pg-prod-go { color: var(--sf-faint); font-size: 11px; transition: color var(--sf-ease), transform var(--sf-ease); }
.pg-prod-item:hover .pg-prod-go { color: var(--sf-accent-text); transform: translateX(2px); }

.pg-prod-browser .sf-segmented button i { font-size: 11px; }
.pg-prod-foot .lw-pager { flex: 1; margin-top: 0; }

/* Grid look */
.pg-prod-browser[data-view="grid"] .pg-prod-items {
    display: grid; gap: 1rem; padding: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.pg-prod-browser[data-view="grid"] .pg-prod-items-head,
.pg-prod-browser[data-view="grid"] .pg-prod-type,
.pg-prod-browser[data-view="grid"] .pg-prod-stock,
.pg-prod-browser[data-view="grid"] .pg-prod-go,
.pg-prod-browser[data-view="grid"] .pg-prod-rules.is-empty { display: none; }
.pg-prod-browser[data-view="grid"] .pg-prod-item {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem; padding: 0 0 0.95rem;
    background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg); overflow: hidden;
}
.pg-prod-browser[data-view="grid"] .pg-prod-item:last-child { border-bottom: 1px solid var(--sf-border); }
.pg-prod-browser[data-view="grid"] .pg-prod-item:hover { background: var(--sf-surface-2); border-color: var(--sf-accent-border); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(79, 124, 255, 0.45); }
.pg-prod-browser[data-view="grid"] .pg-prod-thumb {
    width: 100%; height: auto; aspect-ratio: 1 / 1; border: 0; border-bottom: 1px solid var(--sf-border);
    border-radius: 0; box-shadow: none; background: var(--sf-inset); font-size: 2rem;
}
.pg-prod-browser[data-view="grid"] .pg-prod-thumb .pg-prod-stock-over {
    display: inline-flex; position: absolute; top: 0.6rem; left: 0.6rem; z-index: 1;
    background-color: rgba(11, 13, 18, 0.82); backdrop-filter: blur(6px);
}
.pg-prod-browser[data-view="grid"] .pg-prod-main,
.pg-prod-browser[data-view="grid"] .pg-prod-price { padding: 0 0.95rem; }
.pg-prod-browser[data-view="grid"] .pg-prod-main { padding-top: 0.2rem; gap: 0.3rem; }
.pg-prod-browser[data-view="grid"] .pg-prod-name {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.7em;
}
.pg-prod-browser[data-view="grid"] .pg-prod-price {
    flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 0.2rem 0.5rem;
    text-align: left; margin-top: auto;
}
.pg-prod-browser[data-view="grid"] .pg-prod-price b { font-size: var(--sf-fs-md); }
.pg-prod-browser[data-view="grid"] .pg-prod-price .sf-sub, .pg-prod-browser[data-view="grid"] .pg-prod-rules .sf-sub { text-align: left; }
.pg-prod-browser[data-view="grid"] .pg-prod-rules {
    flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 0.15rem 0.45rem;
    text-align: left; margin: 0 0.95rem; padding: 0.55rem 0.65rem;
    background: var(--sf-success-soft); border: 1px solid var(--sf-success-border); border-radius: var(--sf-r);
}
.pg-prod-browser[data-view="grid"] .pg-prod-rules .pg-prod-rules-label {
    flex-basis: 100%; margin-bottom: 0.1rem; display: flex; align-items: center; gap: 0.35rem; font-size: var(--sf-fs-2xs); font-weight: 500; color: var(--sf-success-text);
}
.pg-prod-browser[data-view="grid"] .pg-prod-rules .pg-prod-rules-label i { font-size: 10px; }

@media (max-width: 1279px) {
    .pg-prod-list-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-prod-items-head, .pg-prod-item { column-gap: 0.75rem; grid-template-columns: 52px minmax(0, 1fr) 112px 108px 14px; }
    .pg-prod-items.has-rules .pg-prod-items-head, .pg-prod-items.has-rules .pg-prod-item { grid-template-columns: 52px minmax(0, 1fr) 104px 128px 104px 14px; }
    .pg-prod-browser:not([data-view="grid"]) .pg-prod-type, .pg-prod-items-head .pg-prod-h-type { display: none; }
}
@media (max-width: 767px) {
    .pg-prod-items-head { display: none; }
    .pg-prod-browser:not([data-view="grid"]) .pg-prod-item,
    .pg-prod-browser:not([data-view="grid"]) .pg-prod-items.has-rules .pg-prod-item {
        grid-template-columns: 52px minmax(0, 1fr) auto; row-gap: 0.45rem; padding: 0.8rem 1rem;
    }
    .pg-prod-browser:not([data-view="grid"]) .pg-prod-thumb { grid-row: span 2; }
    .pg-prod-browser:not([data-view="grid"]) .pg-prod-stock { grid-column: 3; grid-row: 1; }
    .pg-prod-browser:not([data-view="grid"]) .pg-prod-price { grid-column: 2; align-items: flex-start; text-align: left; }
    .pg-prod-browser:not([data-view="grid"]) .pg-prod-price .sf-sub { text-align: left; }
    .pg-prod-browser:not([data-view="grid"]) .pg-prod-rules { grid-column: 3; }
    .pg-prod-browser:not([data-view="grid"]) .pg-prod-go { display: none; }
    .pg-prod-browser[data-view="grid"] .pg-prod-items { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 1rem; gap: 0.75rem; }
}

/* from resources/views/feeds/products-catalog.blade.php */
/* Feed Products catalog (/feed-products) — one tile per subscribed feed. */
.pg-prod-feed { --pc: var(--sf-accent); }
.pg-prod-feed.is-csv  { --pc: #9ab3ff; }
.pg-prod-feed.is-xml  { --pc: #e3c06a; }
.pg-prod-feed.is-json { --pc: #c4b5fd; }
.pg-prod-feed.is-pending { border-color: var(--sf-warning-border); }
.pg-prod-feed .sf-tile-head > div { flex: 1; min-width: 0; }
.pg-prod-feed .sf-logo img { max-width: 70%; max-height: 70%; }
.pg-prod-feed-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; }
.pg-prod-feed-note {
    display: flex; gap: 0.55rem; align-items: flex-start; margin: 0;
    padding: 0.6rem 0.75rem; border-radius: var(--sf-r);
    background: var(--sf-warning-soft); border: 1px solid var(--sf-warning-border);
    font-size: var(--sf-fs-xs); line-height: 1.45; color: var(--sf-text-2);
}
.pg-prod-feed-note > i { color: var(--sf-warning-text); margin-top: 2px; flex: none; }
.pg-prod-feed-note a { color: var(--sf-warning-text); font-weight: 500; }
.pg-prod-feed .sf-tile-stat .value.mono { font-family: var(--sf-mono); font-size: var(--sf-fs-sm); color: var(--pc); }

.pg-prod-export-label { display: flex; align-items: center; gap: 0.45rem; font-size: var(--sf-fs-xs); font-weight: 500; color: var(--sf-muted); margin-bottom: 0.5rem; }
.pg-prod-export { display: flex; flex-direction: column; background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r); overflow: hidden; }
.pg-prod-export a {
    display: flex; align-items: center; gap: 0.6rem; min-width: 0;
    padding: 0.55rem 0.75rem; border-top: 1px solid var(--sf-border);
    font-size: var(--sf-fs-xs); color: var(--sf-text-2); text-decoration: none;
    transition: background-color var(--sf-ease), color var(--sf-ease);
}
.pg-prod-export a:first-child { border-top: 0; }
.pg-prod-export a:hover { background: color-mix(in srgb, var(--pc) 8%, transparent); color: var(--sf-text); text-decoration: none; }
.pg-prod-export a > i { width: 14px; text-align: center; color: var(--sf-muted); flex: none; transition: color var(--sf-ease), transform var(--sf-ease); }
.pg-prod-export a:hover > i { color: var(--pc); }
.pg-prod-export a:hover > i.pg-prod-export-go { transform: translateX(2px); }
.pg-prod-export-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pg-prod-export .pg-prod-export-go { font-size: 10px; color: var(--sf-faint); }
.pg-prod-plat { background: color-mix(in srgb, var(--pc) 12%, transparent); border-color: color-mix(in srgb, var(--pc) 30%, transparent); color: var(--pc); flex: none; }

/* ---- page: sched ---------------------------------------------------- */

/* from resources/views/scheduled-syncs/index.blade.php */
/* Scheduled syncs list (scheduled-syncs Livewire component). The list is a
   CSS grid whose rows are subgrids, so the header and every row share the
   same column widths. Below ~1000px of panel width each row reflows into a
   card: route + actions on top, the four schedule facts underneath. */
.pg-sched-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-sched-kpis .sf-stat .label { padding-right: 2.75rem; }
.pg-sched-notice { align-items: center; }

/* Same order as the Transfers page: KPI strip, live panel, then the list.
   The component root is display:contents so its KPI strip can sit above
   the live panel while both Livewire components stay independent. */
.pg-sched-flow { display: flex; flex-direction: column; }
.pg-sched-flow > .pg-sched-root { display: contents; }
.pg-sched-flow .pg-sched-kpis { order: -1; }

.pg-sched-flash { padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--sf-border); }
.pg-sched-flash .sf-alert { margin: 0; }

.pg-sched-body { container: pg-sched / inline-size; }
.pg-sched-list {
    display: grid; column-gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) max-content max-content max-content max-content max-content;
}
.pg-sched-headrow, .pg-sched-row {
    grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
    padding: 0 1.25rem;
}
.pg-sched-headrow {
    padding-top: 0.7rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--sf-border);
    font-size: var(--sf-fs-2xs); font-weight: 600; color: var(--sf-muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}
.pg-sched-row {
    row-gap: 0.85rem; padding-top: 1rem; padding-bottom: 1rem;
    border-bottom: 1px solid var(--sf-border); transition: background-color var(--sf-ease);
}
.pg-sched-row:last-child { border-bottom: 0; border-radius: 0 0 var(--sf-r-lg) var(--sf-r-lg); }
.pg-sched-row:hover { background: var(--sf-surface-hover); }
.pg-sched-row.is-editing { background: color-mix(in srgb, var(--sf-accent-soft) 45%, transparent); }

/* Route: source logo, source name → destination chips, meta line. */
.pg-sched-c-route { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.pg-sched-logo { width: 38px; height: 38px; font-size: var(--sf-fs-sm); }
.pg-sched-logo i { font-size: var(--sf-fs-sm); color: var(--sf-muted); }
.pg-sched-route-text { min-width: 0; flex: 1; }
.pg-sched-route { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.5rem; min-width: 0; }
.pg-sched-src { font-size: var(--sf-fs); font-weight: 600; color: var(--sf-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sched-arrow { color: var(--sf-faint); font-size: 13px; margin: 0 0.1rem; }
.pg-sched-dest {
    display: inline-flex; align-items: center; gap: 0.4rem; max-width: 220px; height: 24px; padding: 0 0.6rem 0 0.3rem;
    background: var(--sf-surface-3); border: 1px solid var(--sf-border-strong); border-radius: 999px;
    font-size: var(--sf-fs-xs); font-weight: 500; color: var(--sf-text-2);
}
.pg-sched-dest img { width: 16px; height: 16px; flex: none; object-fit: contain; }
.pg-sched-dest b { width: 16px; height: 16px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sf-inset); font-size: 9px; color: var(--sf-muted); }
.pg-sched-dest span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sched-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0; margin-top: 0.35rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-sched-meta > span + span::before { content: '·'; margin: 0 0.45rem; color: var(--sf-faint); }
.pg-sched-name { color: var(--sf-text-2); font-weight: 500; }
.pg-sched-name i { font-size: 10px; color: var(--sf-muted); margin-right: 0.15rem; }

/* Schedule facts. */
.pg-sched-c-status, .pg-sched-c-freq, .pg-sched-c-last, .pg-sched-c-next { min-width: 0; }
.pg-sched-val { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--sf-fs-sm); color: var(--sf-text-2); white-space: nowrap; }
.pg-sched-val i { font-size: 11px; color: var(--sf-muted); }
.pg-sched-c-last .sf-sub, .pg-sched-c-next .sf-sub { white-space: nowrap; }
.pg-sched-due { color: var(--sf-accent-text); font-weight: 500; }
.pg-sched-freq { display: flex; align-items: center; gap: 0.3rem; }
.pg-sched-freq .btn { color: var(--sf-muted); }
.pg-sched-freq .btn:hover { color: var(--sf-text); }
.pg-sched-row.is-editing .pg-sched-freq .pg-sched-val, .pg-sched-row.is-editing .pg-sched-freq .pg-sched-val i { color: var(--sf-accent-text); }
.pg-sched-c-actions { justify-self: end; }
.pg-sched-c-actions .sf-btn-row { flex-wrap: nowrap; }
/* Cell labels: read by screen readers on wide rows, shown on stacked rows. */
.pg-sched-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Inline frequency editor (spans the whole row). */
.pg-sched-editor {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.85rem;
    padding: 0.7rem 0.85rem; background: var(--sf-surface-2); border: 1px solid var(--sf-accent-border); border-radius: var(--sf-r);
}
.pg-sched-editor-lbl { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--sf-fs-xs); font-weight: 600; color: var(--sf-text); }
.pg-sched-editor-lbl i { color: var(--sf-accent-text); }
.pg-sched-editor .sf-segmented { flex-wrap: wrap; max-width: 100%; }
.pg-sched-editor .sf-segmented button { white-space: nowrap; }
.pg-sched-or { font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-sched-hours { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-sched-hours .sf-input { width: 76px; }
.pg-sched-editor-actions { margin-left: auto; }

@container pg-sched (max-width: 1000px) {
    .pg-sched-list { grid-template-columns: repeat(4, minmax(0, 1fr)) max-content; column-gap: 1rem; }
    .pg-sched-headrow { display: none; }
    .pg-sched-row { align-items: start; }
    .pg-sched-c-route { grid-column: 1 / 5; grid-row: 1; }
    .pg-sched-c-actions { grid-column: 5; grid-row: 1; align-self: center; }
    .pg-sched-c-status { grid-column: 1; grid-row: 2; }
    .pg-sched-c-freq { grid-column: 2; grid-row: 2; }
    .pg-sched-c-last { grid-column: 3; grid-row: 2; }
    .pg-sched-c-next { grid-column: 4; grid-row: 2; }
    .pg-sched-editor { grid-row: 3; }
    .pg-sched-lbl {
        position: static; width: auto; height: auto; overflow: visible; clip: auto;
        display: block; margin-bottom: 0.35rem; font-size: var(--sf-fs-2xs); font-weight: 500; color: var(--sf-muted);
    }
    .pg-sched-freq { min-height: 22px; }
}
@container pg-sched (max-width: 560px) {
    .pg-sched-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-sched-c-route { grid-column: 1 / -1; grid-row: 1; }
    .pg-sched-c-status { grid-column: 1; grid-row: 2; }
    .pg-sched-c-freq { grid-column: 2; grid-row: 2; }
    .pg-sched-c-last { grid-column: 1; grid-row: 3; }
    .pg-sched-c-next { grid-column: 2; grid-row: 3; }
    .pg-sched-c-actions { grid-column: 1 / -1; grid-row: 4; justify-self: start; }
    .pg-sched-editor { grid-row: 5; }
    .pg-sched-editor .sf-segmented { width: 100%; }
    .pg-sched-editor .sf-segmented button { flex: 1 1 auto; justify-content: center; }
    .pg-sched-editor-actions { margin-left: 0; }
    .pg-sched-c-actions .sf-btn-row { flex-wrap: wrap; }
    .pg-sched-row { padding-left: 1rem; padding-right: 1rem; }
}
/* Very narrow panels (small phones): Run now goes icon-only like the rest. */
@container pg-sched (max-width: 250px) {
    .pg-sched-btn-text { display: none; }
    .pg-sched-c-actions .btn-sm { width: var(--sf-h-sm); padding: 0; justify-content: center; }
}
@media (max-width: 1199px) { .pg-sched-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pg-sched-kpis { grid-template-columns: minmax(0, 1fr); } }

/* from resources/views/scheduled-syncs/create.blade.php */
/* New scheduled sync form. Stores are picked with option cards (the radio /
   checkbox inside each card is the real input); the JS below keeps the
   .is-checked / .is-disabled classes and the category map in step. */
.pg-sched-form .sf-panel-body { padding: 1.35rem 1.35rem 1.4rem; }
.pg-sched-form .sf-form-section > .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.pg-sched-form .sf-form-section > .head .desc { max-width: 72ch; line-height: 1.45; }
.pg-sched-hint { margin-left: 0.4rem; font-size: var(--sf-fs-xs); font-weight: 400; color: var(--sf-muted); }
.pg-sched-namefield { max-width: 460px; margin-bottom: 0; }

/* Store option cards. */
.pg-sched-stores { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.sf-option.pg-sched-store { flex-direction: row; align-items: center; gap: 0.85rem; min-width: 0; padding: 0.9rem 2.6rem 0.9rem 0.9rem; }
.pg-sched-store .sf-logo { width: 40px; height: 40px; transition: border-color var(--sf-ease), box-shadow var(--sf-ease); }
.pg-sched-store .sf-logo > span { font-weight: 700; color: var(--sf-muted); }
.pg-sched-store:has(input:checked) .sf-logo {
    border-color: color-mix(in srgb, var(--pc) 50%, var(--sf-border-strong));
    box-shadow: var(--sf-hairline), 0 0 0 3px color-mix(in srgb, var(--pc) 14%, transparent);
}
.pg-sched-store-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pg-sched-store .title { font-size: var(--sf-fs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sched-url { font-family: var(--sf-mono); font-size: var(--sf-fs-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sched-pf { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; font-size: var(--sf-fs-2xs); font-weight: 500; color: var(--sf-text-2); }
.pg-sched-pf::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pc, var(--sf-faint)); flex: none; }
.sf-option.pg-sched-store.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; transform: none; }
/* The destination card that is the current source gets a small tag. */
.pg-sched-store[data-sched-note]::after {
    content: attr(data-sched-note); position: absolute; right: 0.8rem; bottom: 0.75rem;
    height: 20px; padding: 0 0.5rem; display: inline-flex; align-items: center; border-radius: 999px;
    background: var(--sf-surface-3); border: 1px solid var(--sf-border-strong);
    font-size: var(--sf-fs-2xs); font-weight: 500; color: var(--sf-text-2);
}
.pg-sched-empty-note { margin: 0; font-size: var(--sf-fs-sm); color: var(--sf-muted); }

/* Frequency: preset segmented control + custom hours. */
.pg-sched-freq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.sf-segmented.pg-sched-seg button { height: 30px; padding: 0 0.95rem; font-size: var(--sf-fs-sm); }
.pg-sched-seg .btn:focus:not(:focus-visible) { box-shadow: none !important; }
.pg-sched-seg .btn.active:focus:not(:focus-visible) { box-shadow: var(--sf-hairline), var(--sf-shadow-1) !important; }
.pg-sched-or { font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-sched-interval { display: inline-flex; align-items: center; gap: 0.65rem; }
.pg-sched-interval input { max-width: 96px; }
.pg-sched-unit { font-size: var(--sf-fs-xs); color: var(--sf-muted); white-space: nowrap; }
.pg-sched-freq-help { margin-top: 0.85rem; max-width: 80ch; }

/* Fields to copy: check cards with an icon chip on the right (same
   pattern as the New transfer page). */
.pg-sched-fields { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); margin-top: 1rem; }
.sf-check-card.pg-sched-field { align-items: center; padding: 0.85rem 0.9rem; }
.pg-sched-field > span:not(.sf-icon-chip) { flex: 1; min-width: 0; }
.pg-sched-field .sf-icon-chip { transition: color var(--sf-ease), background-color var(--sf-ease), border-color var(--sf-ease); }
.pg-sched-field:has(input:checked) .sf-icon-chip { background: var(--sf-accent-soft); border-color: var(--sf-accent-border); color: var(--sf-accent-text); }
.pg-sched-lead { margin: 0; font-size: var(--sf-fs-xs); color: var(--sf-muted); max-width: 80ch; line-height: 1.5; }
.pg-sched-modes-sec { margin-top: 1.4rem; }
.pg-sched-modes { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.pg-sched-modes .sf-option { padding: 1rem 2.4rem 1rem 1rem; gap: 0.5rem; }
.pg-sched-modes .sf-option .sf-icon-chip { margin-bottom: 0.15rem; }
.pg-sched-modes .sf-option:has(input:checked) .sf-icon-chip { background: var(--sf-accent-soft); border-color: var(--sf-accent-border); color: var(--sf-accent-text); }
.pg-sched-modes .title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; }

/* Collapsible optional panels. Plain sections driven by an [open]
   attribute (not <details>, which the layout's dropdown script closes on
   every outside click). The category script sets/removes [open] itself. */
.pg-sched-collapse > .sf-panel-head { cursor: pointer; user-select: none; flex-wrap: nowrap; }
.pg-sched-collapse:not([open]) > .sf-panel-head { border-bottom-color: transparent; border-radius: var(--sf-r-lg); }
.pg-sched-collapse:not([open]) > .sf-panel-body { display: none; }
.pg-sched-chev { flex: none; color: var(--sf-muted); }
.pg-sched-chev i { transition: transform var(--sf-ease); }
.pg-sched-collapse > .sf-panel-head:hover .pg-sched-chev { background: var(--sf-surface-3); color: var(--sf-text); }
.pg-sched-collapse[open] .pg-sched-chev i { transform: rotate(180deg); }

/* Category map (rendered by the script below). */
.pg-sched-cat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; }
.pg-sched-cat-top .pg-sched-lead { flex: 1; min-width: 240px; }
.pg-sched-cat-wrap { display: grid; gap: 0.85rem; margin-top: 1rem; }
.pg-sched-cat-dest { padding: 0.85rem 1rem 0.95rem; background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r); }
.pg-sched-cat-head { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.75rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--sf-border); }
.pg-sched-cat-head .sf-logo { width: 28px; height: 28px; border-radius: var(--sf-r-sm); font-size: var(--sf-fs-xs); }
.pg-sched-cat-name { font-size: var(--sf-fs-sm); font-weight: 600; color: var(--sf-text); }
.pg-sched-cat-head .pg-sched-pf { margin: 0 0 0 auto; }
.pg-sched-cat-row { display: grid; grid-template-columns: minmax(0, 2fr) 18px minmax(0, 3fr); align-items: center; gap: 0.6rem; padding: 0.22rem 0; }
.pg-sched-cat-src { font-size: var(--sf-fs-sm); color: var(--sf-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sched-cat-arrow { text-align: center; font-size: 12px; color: var(--sf-faint); }
.pg-sched-cat-empty, .pg-sched-cat-loading { display: flex; align-items: center; gap: 0.5rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); padding: 0.2rem 0 0.5rem; }
.pg-sched-cat-loading { color: var(--sf-accent-text); font-size: var(--sf-fs-sm); }

/* Specifications. */
.pg-sched-spec-switch { margin-top: 1rem; padding: 0.85rem 1rem; background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r); }
.pg-sched-note { margin: 1rem 0 0; }
.pg-sched-keys-sec { margin-top: 1.25rem; }
.pg-sched-keys { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
label.toggle.pg-sched-key {
    display: flex; min-width: 0; margin: 0; padding: 0.5rem 0.7rem;
    background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r-sm);
}
.pg-sched-key code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sched-key:has(input:checked) { border-color: var(--sf-warning-border); background: var(--sf-warning-soft); }

/* Submit bar. */
.pg-sched-submit {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap;
    padding: 0.9rem 1.25rem; margin-bottom: 1.25rem;
    background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg); box-shadow: var(--sf-hairline), var(--sf-shadow-2);
}
.pg-sched-submit-note { display: flex; align-items: center; gap: 0.55rem; flex: 1 1 280px; min-width: 0; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-sched-submit-note i { color: var(--sf-accent-text); flex: none; }
.pg-sched-submit .sf-btn-row { flex-wrap: nowrap; }

@media (max-width: 600px) {
    .pg-sched-cat-row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; padding: 0.4rem 0; }
    .pg-sched-cat-arrow { display: none; }
    /* Presets wrap onto two rows instead of pushing the page sideways. */
    .sf-segmented.pg-sched-seg { display: flex; flex-wrap: wrap; width: 100%; }
    .sf-segmented.pg-sched-seg button { flex: 1 1 auto; justify-content: center; padding: 0 0.7rem; }
    /* Submit buttons stretch and stack (Create on top) when they do not fit. */
    .pg-sched-submit .sf-btn-row { width: 100%; flex-wrap: wrap-reverse; }
    .pg-sched-submit .sf-btn-row .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- page: shared ---------------------------------------------------- */

/* from resources/views/partials/system-alerts.blade.php */
/* Site-wide system alert banner (above the page content). Tone comes
   from the alert type: info | success | warning | danger. */
.pg-shared-alerts { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 2rem 0; }
.pg-shared-alert {
    --al: var(--sf-info); --al-soft: var(--sf-info-soft); --al-border: var(--sf-info-border); --al-text: var(--sf-info-text);
    display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0.75rem 0.7rem 0.8rem;
    background: color-mix(in srgb, var(--al) 7%, var(--sf-surface));
    border: 1px solid var(--al-border); border-radius: var(--sf-r-lg);
    box-shadow: var(--sf-hairline), var(--sf-shadow-1);
}
.pg-shared-alert-success { --al: var(--sf-success); --al-soft: var(--sf-success-soft); --al-border: var(--sf-success-border); --al-text: var(--sf-success-text); }
.pg-shared-alert-warning { --al: var(--sf-warning); --al-soft: var(--sf-warning-soft); --al-border: var(--sf-warning-border); --al-text: var(--sf-warning-text); }
.pg-shared-alert-danger  { --al: var(--sf-danger);  --al-soft: var(--sf-danger-soft);  --al-border: var(--sf-danger-border);  --al-text: var(--sf-danger-text); }
.pg-shared-alert-ico {
    width: 30px; height: 30px; flex: none; border-radius: var(--sf-r);
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
    background: var(--al-soft); border: 1px solid var(--al-border); color: var(--al-text);
}
.pg-shared-alert-text { flex: 1; min-width: 0; font-size: var(--sf-fs-sm); line-height: 1.45; color: var(--sf-text-2); }
.pg-shared-alert-title { color: var(--al-text); font-weight: 600; margin-right: 0.4rem; }
.pg-shared-alert-actions { display: flex; align-items: center; gap: 0.25rem; flex: none; }
.pg-shared-alert-actions .btn { color: var(--sf-muted); }
.pg-shared-alert-actions .btn:hover { color: var(--sf-text); background: rgba(255, 255, 255, 0.06); }
@media (max-width: 768px) { .pg-shared-alerts { padding: 0.9rem 1rem 0; } }
@media (max-width: 560px) {
    .pg-shared-alert { align-items: flex-start; }
    .pg-shared-alert-text { padding-top: 0.3rem; }
    .pg-shared-alert-label { display: none; }   /* Stop becomes icon-only (title kept) */
}

/* from resources/views/partials/footer.blade.php */
.pg-shared-footer {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem;
    padding: 1.7rem 1.75rem; border-top: 1px solid var(--sf-border);
    font-size: var(--sf-fs-sm); color: var(--sf-muted);
}
.pg-shared-footer-guest { justify-content: center; border-top: 0; padding: 0.5rem 1rem 1.75rem; color: var(--sf-faint); }
.pg-shared-footer-links { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.pg-shared-footer-links a { color: var(--sf-muted); }
.pg-shared-footer-links a:hover { color: var(--sf-text); text-decoration: none; }
@media (max-width: 768px) {
    .pg-shared-footer { justify-content: center; text-align: center; padding: 1.4rem 1rem; }
}

/* ---- page: legal (cookies / security / privacy / terms) ------------ */
/* from resources/views/legal/page.blade.php — theme components (page head,
   sf-tabs, sf-panel, sf-dl); this only adds the policy text styles and the
   full-width guest variant (the guest layout is a centred 480px column). */
body.guest.pg-legal-page .main { align-items: stretch; justify-content: flex-start; }
body.guest.pg-legal-page main.content { flex: 1; width: 100%; max-width: 100%; padding: 1.5rem 1.75rem 2rem; }
.pg-legal-guestbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.pg-legal-brand { display: inline-block; }
.pg-legal-brand img { display: block; width: 130px; height: auto; }
.pg-legal-guestbar .sf-segmented a:hover { text-decoration: none; }
.pg-legal-dl { grid-template-columns: minmax(200px, max-content) 1fr; }
.pg-legal-prose h6 { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.75rem; font-size: var(--sf-fs-md); font-weight: 600; color: var(--sf-text); }
.pg-legal-prose h6:not(:first-child) { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--sf-border); }
.pg-legal-prose h6 i { width: 16px; font-size: 13px; text-align: center; color: var(--sf-accent-text); }
.pg-legal-prose p,
.pg-legal-prose li { font-size: var(--sf-fs); line-height: 1.7; color: var(--sf-text-2); }
.pg-legal-prose p { margin: 0 0 0.75rem; }
.pg-legal-prose ul { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.pg-legal-prose li { margin-bottom: 0.375rem; }
.pg-legal-prose strong { color: var(--sf-text); font-weight: 600; }
.pg-legal-prose > :last-child { margin-bottom: 0; }
@media (max-width: 768px) {
    body.guest.pg-legal-page main.content { padding: 1.25rem 1rem 1.5rem; }
    .pg-legal-dl { grid-template-columns: 1fr; gap: 0.2rem; }
    .pg-legal-dl dd { margin-bottom: 0.6rem; }
}

/* from resources/views/partials/confirm-modal.blade.php */
/* Confirm modal v2 — overrides the base "CONFIRM MODAL" section. Icon chip
   beside the title + message, quiet footer strip. Variants: default
   (danger), .is-info, .is-warning — toggled by the script below. */
.sync-confirm-overlay { background: rgba(6, 8, 12, 0.66); backdrop-filter: blur(4px); padding-top: 14vh; }
.sync-confirm-box {
    max-width: 440px; background: var(--sf-surface-raised); border: 1px solid var(--sf-border-strong);
    border-radius: var(--sf-r-xl); box-shadow: var(--sf-shadow-pop);
    animation: pg-shared-confirm-in 0.16s ease-out;
}
@keyframes pg-shared-confirm-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pg-shared-confirm-main { display: flex; align-items: flex-start; gap: 1rem; padding: 1.4rem 1.4rem 1.3rem; }
.pg-shared-confirm-text { flex: 1; min-width: 0; padding-top: 0.1rem; }
.pg-shared-confirm-text h3 { margin: 0; font-size: var(--sf-fs-md); font-weight: 600; line-height: 1.35; color: var(--sf-text); letter-spacing: -0.01em; }
.pg-shared-confirm-text p { margin: 0.4rem 0 0; font-size: var(--sf-fs-sm); line-height: 1.55; color: var(--sf-text-2); white-space: pre-line; overflow-wrap: anywhere; }
.sync-confirm-icon {
    width: 40px; height: 40px; border-radius: var(--sf-r-lg); font-size: 15px;
    background: var(--sf-danger-soft); border: 1px solid var(--sf-danger-border); color: var(--sf-danger-text);
}
.sync-confirm-foot {
    gap: 0.5rem; padding: 0.85rem 1.4rem;
    background: var(--sf-surface-2); border-top: 1px solid var(--sf-border);
    border-radius: 0 0 var(--sf-r-xl) var(--sf-r-xl);
}
.sync-confirm-overlay.is-info .sync-confirm-icon { background: var(--sf-accent-soft); border-color: var(--sf-accent-border); color: var(--sf-accent-text); }
.sync-confirm-overlay.is-info #syncConfirmOk { background: var(--sf-accent); border-color: #5b85ff; color: #fff; }
.sync-confirm-overlay.is-info #syncConfirmOk:hover { background: var(--sf-accent-hover); border-color: #7396ff; }
.sync-confirm-overlay.is-warning .sync-confirm-icon { background: var(--sf-warning-soft); border-color: var(--sf-warning-border); color: var(--sf-warning-text); }
.sync-confirm-overlay.is-warning #syncConfirmOk { background: #e9ab1c; border-color: #f2b92c; color: #17130a; }
.sync-confirm-overlay.is-warning #syncConfirmOk:hover { background: #f2b92c; border-color: #fbc94a; }
@media (max-width: 520px) {
    .sync-confirm-overlay { padding-top: 10vh; }
    .pg-shared-confirm-main { padding: 1.2rem 1.1rem 1.1rem; gap: 0.85rem; }
    .sync-confirm-foot { padding: 0.8rem 1.1rem; }
}

/* from resources/views/partials/chat-widget.blade.php */
/* Live chat widget v2 — overrides the base "LIVE CHAT WIDGET" section.
   Flat surfaces (no gradients), presence dot on the support avatar, pill
   bubbles, composer controls on the 36px grid. The FAB keeps its 44px
   footprint at right/bottom 1rem (pages reserve 3.4rem for it). */
.sc-chat-fab {
    width: 44px; height: 44px; right: 1rem; bottom: 1rem;
    border: 1px solid #5b85ff; border-radius: var(--sf-r-xl);
    background: var(--sf-accent); color: #fff; font-size: 17px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 24px -10px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: background-color var(--sf-ease), border-color var(--sf-ease);
}
.sc-chat-fab:hover { background: var(--sf-accent-hover); border-color: #7396ff; transform: none; }
.sc-chat-fab:focus-visible { outline: 0; box-shadow: var(--sf-focus); }
.sc-chat-fab-dot { top: -3px; right: -3px; width: 12px; height: 12px; background: var(--sf-success); border: 2px solid var(--sf-bg); animation: none; }
.sc-chat-fab-badge {
    top: -7px; left: -7px; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px; border: 2px solid var(--sf-bg); background: var(--sf-danger-solid); color: #fff;
    font-size: 10.5px; font-weight: 600; line-height: 16px; box-shadow: none; font-variant-numeric: tabular-nums;
}

.sc-chat-pop {
    bottom: 1rem; width: 380px; max-height: min(600px, calc(100vh - 2rem));
    background: var(--sf-surface-raised); border: 1px solid var(--sf-border-strong);
    border-radius: var(--sf-r-xl); box-shadow: var(--sf-shadow-pop);
    animation: pg-shared-chat-in 0.16s ease-out;
}
@keyframes pg-shared-chat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sc-chat-head {
    gap: 0.75rem; padding: 0.8rem 0.75rem 0.8rem 0.95rem;
    background: var(--sf-surface); border-bottom: 1px solid var(--sf-border); color: var(--sf-text);
}
.pg-shared-chat-id { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.pg-shared-chat-avatar {
    position: relative; width: 36px; height: 36px; flex: none; border-radius: var(--sf-r-lg);
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
    background: var(--sf-accent-soft); border: 1px solid var(--sf-accent-border); color: var(--sf-accent-text);
}
.sc-chat-head-title { font-size: var(--sf-fs-sm); font-weight: 600; color: var(--sf-text); line-height: 1.3; }
.sc-chat-head-status { margin-top: 0.1rem; font-size: var(--sf-fs-2xs); color: var(--sf-muted); opacity: 1; }
.sc-chat-head-dot {
    position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px;
    background: var(--sf-faint); border: 2px solid var(--sf-surface); border-radius: 50%;
}
.sc-chat-head-dot.is-online { background: var(--sf-success); box-shadow: none; }
.sc-chat-head-close {
    width: 30px; height: 30px; padding: 0; flex: none; border-radius: var(--sf-r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sf-muted); opacity: 1; font-size: 12px;
    transition: background-color var(--sf-ease), color var(--sf-ease);
}
.sc-chat-head-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--sf-text); }

.sc-chat-body { padding: 1rem 0.9rem; gap: 0.55rem; background: var(--sf-surface-2); }
.sc-chat-greet { margin: auto 0; padding: 2rem 1rem; color: var(--sf-muted); }
.pg-shared-chat-greet-ico {
    width: 48px; height: 48px; margin: 0 auto 0.85rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--sf-accent-soft); border: 1px solid var(--sf-accent-border); color: var(--sf-accent-text);
    box-shadow: 0 0 0 7px rgba(79, 124, 255, 0.05);
}
.sc-chat-greet .pg-shared-chat-greet-ico i { display: inline; margin: 0; font-size: 18px; opacity: 1; }
.sc-chat-greet strong { font-size: var(--sf-fs); font-weight: 600; color: var(--sf-text); }
.sc-chat-greet small { display: block; margin-top: 0.3rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); }

.sc-chat-bub { max-width: 82%; padding: 0.55rem 0.8rem; border-radius: 14px; font-size: var(--sf-fs-sm); line-height: 1.45; }
.sc-chat-bub.is-client {
    background: var(--sf-accent); color: #fff; border-bottom-right-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.sc-chat-bub.is-admin {
    background: var(--sf-surface-3); border: 1px solid var(--sf-border-strong); color: var(--sf-text);
    border-bottom-left-radius: 4px;
}
.sc-chat-bub-meta { margin-bottom: 0.2rem; font-size: 10.5px; opacity: 0.7; }
.sc-chat-bub-meta.is-right { margin-top: 0.2rem; }
.sc-chat-bub-meta strong { font-weight: 600; }
.sc-chat-bub-badge {
    margin: 0 0.3rem; padding: 0.05rem 0.4rem; border-radius: 999px;
    font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; vertical-align: 1px;
}
.sc-chat-bub-img { border-radius: var(--sf-r); border-color: var(--sf-border-strong); }
.sc-chat-bub-file {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.55rem;
    border-radius: var(--sf-r-sm); background: rgba(255, 255, 255, 0.06); color: var(--sf-text-2); font-size: var(--sf-fs-xs);
}

.sc-chat-preview { gap: 0.5rem; padding: 0.5rem 0.8rem; font-size: var(--sf-fs-xs); color: var(--sf-accent-text); background: var(--sf-accent-soft); border-top: 1px solid var(--sf-accent-border); }
.sc-chat-preview span.sc-chat-preview-name { color: var(--sf-text-2); }
.sc-chat-preview button {
    width: 24px; height: 24px; padding: 0; border-radius: var(--sf-r-xs);
    display: inline-flex; align-items: center; justify-content: center; color: var(--sf-muted); font-size: 11px;
}
.sc-chat-preview button:hover { background: var(--sf-danger-soft); color: var(--sf-danger-text); }

.sc-chat-composer { gap: 0.45rem; padding: 0.65rem; background: var(--sf-surface-raised); border-top: 1px solid var(--sf-border); }
.sc-chat-composer-attach {
    width: 36px; height: 36px; border-radius: var(--sf-r); font-size: 13px;
    background: transparent; border: 1px solid var(--sf-border-strong); color: var(--sf-muted);
}
.sc-chat-composer-attach:hover { background: var(--sf-surface-3); color: var(--sf-text); }
/* ids: the global "form input / form button" rules are more specific than a class */
#scChatInput {
    flex: 1; width: auto; min-width: 0; height: 36px; min-height: 36px; padding: 0 0.75rem;
    background: var(--sf-inset); border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r);
    color: var(--sf-text); font-size: var(--sf-fs-sm); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
#scChatInput:focus { border-color: var(--sf-accent); box-shadow: var(--sf-focus); background: #0e121a; }
#scChatForm .sc-chat-composer-send {
    width: 36px; height: 36px; padding: 0; flex: none; border-radius: var(--sf-r); font-size: 13px;
    background: var(--sf-accent); border: 1px solid #5b85ff; color: #fff; filter: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.35);
}
#scChatForm .sc-chat-composer-send:hover { background: var(--sf-accent-hover); border-color: #7396ff; }
#scChatForm .sc-chat-composer-send:focus-visible { outline: 0; box-shadow: var(--sf-focus); }

.ch-lightbox { background: rgba(6, 8, 12, 0.86); }
.ch-lightbox img { border-radius: var(--sf-r-lg); box-shadow: var(--sf-shadow-pop); }
.ch-lightbox-close {
    width: 40px; height: 40px; font-size: 15px;
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1);
}
.ch-lightbox-close:hover { background: rgba(255, 255, 255, 0.14); }
.ch-lightbox-caption { font-size: var(--sf-fs-xs); background: rgba(12, 14, 20, 0.8); border: 1px solid var(--sf-border-strong); border-radius: 999px; }

@media (max-width: 480px) {
    .sc-chat-pop { right: 0.5rem; bottom: 0.5rem; width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); }
}

/* ---- page: shop ---------------------------------------------------- */

/* Chat widget: "load older messages" pill at the top of the thread (button#scChatOlder.pg-shared-chat-older, toggled with the hidden attribute) */
.pg-shared-chat-older {
    align-self: center; flex: none; display: inline-flex; align-items: center; gap: 0.35rem;
    margin: 0 0 0.25rem; padding: 0.25rem 0.75rem; cursor: pointer;
    background: var(--sf-surface-3); border: 1px solid var(--sf-border-strong); border-radius: 999px;
    color: var(--sf-text-2); font-size: var(--sf-fs-2xs); line-height: 1.4;
    transition: background-color var(--sf-ease), color var(--sf-ease);
}
.pg-shared-chat-older:hover { background: var(--sf-surface-hover); color: var(--sf-text); }
.pg-shared-chat-older:disabled { opacity: 0.6; cursor: default; }
.pg-shared-chat-older[hidden] { display: none; }

/* from resources/views/shop/success.blade.php */
/* Checkout success: next-steps list + invoice panel. */
.pg-shop-done { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.pg-shop-done > * { min-width: 0; }
.pg-shop-steps .sf-list-item { align-items: flex-start; padding: 1rem 1.25rem; }
.pg-shop-steps .sf-list-item:hover { background: transparent; }
.pg-shop-steps .sf-list-item > .sf-status { margin-top: 0.1rem; }
.pg-shop-step-title { color: var(--sf-text); font-size: var(--sf-fs-sm); font-weight: 600; }
.pg-shop-inv .sf-dl { margin-bottom: 1.1rem; }
.pg-shop-inv-total { font-size: var(--sf-fs-lg); font-weight: 650; color: var(--sf-text); font-variant-numeric: tabular-nums; }
.pg-shop-inv .sf-empty { padding: 1.5rem 0.5rem 0.5rem; }
.pg-shop-inv .sf-empty .ico { background: var(--sf-warning-soft); border-color: var(--sf-warning-border); color: var(--sf-warning-text); box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.05); }
.pg-shop-inv .sf-empty .actions { flex-wrap: wrap; }
@media (max-width: 991px) {
    .pg-shop-done { grid-template-columns: minmax(0, 1fr); }
}

/* from resources/views/shop/index.blade.php */
/* Shop / pricing page. Per-plan accent comes from --pc (plan colour). */
.pg-shop-sub .sf-panel-body { padding: 1rem 1.25rem 1.15rem; }
.pg-shop-sub .sf-tile-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-shop-sub .sf-tile-stat .value { display: flex; align-items: center; gap: 0.4rem; min-height: 22px; }
.pg-shop-sub .sf-tile-stat .sf-sub { margin-top: 0.1rem; }
.pg-shop-sub form { margin: 0; }

.pg-shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; margin: 0.25rem 0 1.5rem; }
.pg-shop-bar-l { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.pg-shop-bar-label { font-size: var(--sf-fs-sm); color: var(--sf-muted); }
.pg-shop-bar .sf-segmented { padding: 4px; }
.pg-shop-bar .sf-segmented button { height: 30px; padding: 0 0.9rem; font-size: var(--sf-fs-sm); }
.pg-shop-save { height: 18px; padding: 0 0.45rem; font-size: 10.5px; margin-left: 0.15rem; }
.pg-shop-bar-hint { font-size: var(--sf-fs-xs); color: var(--sf-muted); display: flex; align-items: center; gap: 0.4rem; }
.pg-shop-bar-hint i { color: var(--sf-success-text); }

.pg-shop-grid { display: grid; gap: 1rem; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); margin: 0 0 1.5rem; padding-top: 0.7rem; }
.pg-shop-card {
    --pc: var(--sf-accent);
    position: relative; display: flex; flex-direction: column; min-width: 0;
    padding: 1.35rem 1.25rem 1.25rem; background: var(--sf-surface);
    border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg);
    box-shadow: var(--sf-hairline), var(--sf-shadow-2);
    transition: border-color var(--sf-ease);
}
.pg-shop-card:hover { border-color: var(--sf-border-hover); }
.pg-shop-card.is-popular { border-color: var(--sf-accent-border); background: color-mix(in srgb, var(--sf-accent) 4%, var(--sf-surface)); }
.pg-shop-card.is-popular:hover { border-color: var(--sf-accent); }
.pg-shop-card.is-current, .pg-shop-card.is-current:hover { border-color: var(--sf-success-border); }
/* Current plan / Most popular: on the title row, at its right end. */
.pg-shop-title { flex: 1; }
.pg-shop-flag { flex: none; align-self: flex-start; margin-top: 0.15rem; white-space: nowrap; }
/* Narrow cards: the badge moves under the title instead of squeezing the name. */
@media (max-width: 520px) {
    .pg-shop-head { flex-wrap: wrap; row-gap: 0.5rem; }
    .pg-shop-title { flex: 1 1 auto; }
}
.pg-shop-flag i { font-size: 9px; }

.pg-shop-head { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.pg-shop-tier {
    width: 40px; height: 40px; flex: none; border-radius: var(--sf-r);
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
    background: color-mix(in srgb, var(--pc) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc) 34%, transparent);
    color: color-mix(in srgb, var(--pc) 78%, #fff);
}
.pg-shop-name { margin: 0; font-size: var(--sf-fs-md); font-weight: 600; color: var(--sf-text); line-height: 1.25; }
.pg-shop-cat { font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-top: 0.1rem; }

.pg-shop-price { margin: 1.15rem 0 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--sf-border); }
.pg-shop-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.1rem; color: var(--sf-text); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pg-shop-amount .cur { font-size: var(--sf-fs-lg); font-weight: 600; color: var(--sf-text-2); }
.pg-shop-amount .num { font-size: 30px; }
.pg-shop-amount .per { font-size: var(--sf-fs-xs); font-weight: 500; color: var(--sf-muted); letter-spacing: 0; margin-left: 0.3rem; }
.pg-shop-amount.is-text { font-size: 26px; }
.pg-shop-note { display: flex; align-items: flex-start; gap: 0.35rem; min-height: 18px; margin-top: 0.5rem; font-size: var(--sf-fs-xs); line-height: 1.45; color: var(--sf-muted); }
.pg-shop-note.is-save { color: var(--sf-success-text); }
.pg-shop-note.is-save b { font-weight: 600; }
/* Annual billing: "Billed annually: €… · -20%" as a green pill. */
.pg-shop-annual {
    display: inline-flex; align-items: center; min-height: 24px; padding: 0.2rem 0.65rem; border-radius: 999px;
    border: 1px solid var(--sf-success-border); background: var(--sf-success-soft);
    color: var(--sf-success-text); font-weight: 500; line-height: 1.35; gap: 0.45rem;
}
.pg-shop-annual-off { padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--sf-success); color: #06281a; font-size: 10.5px; font-weight: 700 !important; }
.pg-shop-note i { font-size: 11px; margin-top: 0.2em; }
.pg-shop[data-cycle="monthly"] .pg-shop-a, .pg-shop[data-cycle="annual"] .pg-shop-m { display: none; }

.pg-shop-body { flex: 1; display: flex; flex-direction: column; }
.pg-shop-limits { list-style: none; margin: 0 0 1.15rem; padding: 0; display: grid; gap: 0.5rem; font-size: var(--sf-fs-sm); color: var(--sf-text-2); }
.pg-shop-limits li { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.pg-shop-limits li > i { width: 16px; flex: none; text-align: center; font-size: 12px; color: var(--sf-muted); }
.pg-shop-limits strong { color: var(--sf-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pg-shop-limits strong .fa-infinity { font-size: 12px; color: var(--sf-success-text); }
.pg-shop-inc { font-size: var(--sf-fs-xs); font-weight: 500; color: var(--sf-muted); margin: 0 0 0.6rem; }
.pg-shop-feats { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; align-content: start; font-size: var(--sf-fs-sm); color: var(--sf-text-2); }
.pg-shop-feats li { display: flex; align-items: flex-start; gap: 0.55rem; line-height: 1.4; }
.pg-shop-feats li > i {
    width: 16px; height: 16px; flex: none; margin-top: 2px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 8px;
    background: var(--sf-success-soft); border: 1px solid var(--sf-success-border); color: var(--sf-success-text);
}
.pg-shop-cta { margin-top: auto; }
.pg-shop-cta form { margin: 0; }
.btn.pg-shop-current:disabled { opacity: 1; cursor: default; background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); box-shadow: none; }

.pg-shop-free {
    --pc: var(--sf-accent);
    display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap;
    padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; background: var(--sf-surface);
    border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg); box-shadow: var(--sf-hairline), var(--sf-shadow-2);
}
.pg-shop-free.is-current { border-color: var(--sf-success-border); }
.pg-shop-free-main { flex: 1; min-width: 260px; }
.pg-shop-free-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pg-shop-free-list { list-style: none; margin: 0.55rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: var(--sf-fs-xs); color: var(--sf-text-2); }
.pg-shop-free-list li { display: inline-flex; align-items: center; gap: 0.35rem; }
.pg-shop-free-list li > i { font-size: 11px; color: var(--sf-muted); }
.pg-shop-free-list li > i.fa-check { color: var(--sf-success-text); }
.pg-shop-free-list strong { color: var(--sf-text); font-weight: 600; }
.pg-shop-free-cta { flex: none; }
.pg-shop-free-cta form { margin: 0; }

.pg-shop-help { display: flex; align-items: center; gap: 0.9rem; }
.pg-shop-help .grow { flex: 1; min-width: 0; }
.pg-shop-help .title { color: var(--sf-text); font-weight: 600; font-size: var(--sf-fs-sm); }

@media (max-width: 1199px) {
    .pg-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-shop-sub .sf-tile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .pg-shop-grid { grid-template-columns: minmax(0, 1fr); }
    .pg-shop-help { flex-wrap: wrap; }
}

/* ---- page: stores ---------------------------------------------------- */

/* from resources/views/websites/show.blade.php */
/* Store logo inside the page icon chip, tinted with the platform colour. */
.sf-page-icon.pg-stores-pchip {
    background: color-mix(in srgb, var(--pc) 10%, var(--sf-surface-3));
    border-color: color-mix(in srgb, var(--pc) 34%, var(--sf-border-strong));
}
.sf-page-icon.pg-stores-pchip img { max-width: 62%; max-height: 62%; }

/* KPI strip (shared by the stores pages): 4 up, 2 up below 1200px,
   1 up on phones; labels leave room for the corner icon chip. */
.pg-stores-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-stores-kpis.pg-stores-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-stores-kpis .sf-stat .label, .pg-stores-kpis .sf-stat .value.sm { padding-right: 2.6rem; }
@media (max-width: 1199px) { .pg-stores-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .pg-stores-kpis, .pg-stores-kpis.pg-stores-kpis-3 { grid-template-columns: minmax(0, 1fr); } }

/* Positioned wrapper: the scroll container is also the containing block
   for the visually-hidden "Actions" header label, so it cannot widen the page. */
.pg-stores-scrollbox { position: relative; }

.pg-stores-feed { min-width: 0; }
.pg-stores-site { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-stores-feed .primary { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Supplier logos are mostly wide wordmarks: a landscape plate keeps them legible. */
.sf-logo.pg-stores-feed-logo { width: 44px; height: 32px; }
.sf-logo.pg-stores-feed-logo img { max-width: 84%; max-height: 64%; }

/* from resources/views/websites/index.blade.php */
/* KPI strip (shared by the stores pages): 4 up, 2 up below 1200px,
   1 up on phones; labels leave room for the corner icon chip. */
.pg-stores-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-stores-kpis.pg-stores-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-stores-kpis .sf-stat .label, .pg-stores-kpis .sf-stat .value.sm { padding-right: 2.6rem; }
@media (max-width: 1199px) { .pg-stores-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .pg-stores-kpis, .pg-stores-kpis.pg-stores-kpis-3 { grid-template-columns: minmax(0, 1fr); } }
.pg-stores-hint-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tiles never force a phone-width page to scroll sideways. */
.sf-grid.pg-stores-tiles { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

.pg-stores-id { flex: 1; min-width: 0; }
.pg-stores-head-status { flex: none; margin-top: 0.2rem; }

/* Tile stats: fixed columns so every tile in a row lines up. */
.pg-stores-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-stores-stats.pg-stores-stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-stores-stats .value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pg-stores-note {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem;
    margin-top: auto; font-size: var(--sf-fs-xs); color: var(--sf-muted);
}
.pg-stores-note span { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.pg-stores-note i { font-size: 11px; color: var(--sf-faint); }
.pg-stores-note b { color: var(--sf-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* from resources/views/feeds/show.blade.php */
/* Supplier logo inside the page icon chip (neutral surface, not accent). */
.sf-page-icon.pg-stores-logo-chip { background: var(--sf-surface-3); border-color: var(--sf-border-strong); }
.sf-page-icon.pg-stores-logo-chip img { max-width: 82%; max-height: 66%; }
.pg-stores-initial { font-weight: 700; font-size: var(--sf-fs-lg); color: var(--sf-text-2); }

.pg-stores-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.1rem; margin-top: 0.55rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-stores-meta > span, .pg-stores-meta > a { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.pg-stores-meta i { font-size: 11px; color: var(--sf-faint); }

/* Feed page: "set up automatically by AI" note on an auto-created feed awaiting approval. */
.pg-feed-ai {
    display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 1.25rem; padding: 0.95rem 1.15rem;
    border-radius: var(--sf-r-lg); background: var(--sf-info-soft); border: 1px solid var(--sf-info-border);
}
.pg-feed-ai-icon { margin-top: 0.15rem; color: var(--sf-info-text); font-size: 15px; }
.pg-feed-ai-body { flex: 1; min-width: 0; }
.pg-feed-ai-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; font-size: var(--sf-fs); font-weight: 600; color: var(--sf-text); }
.pg-feed-ai-conf { font-size: var(--sf-fs-xs); font-weight: 500; color: var(--sf-info-text); font-variant-numeric: tabular-nums; }
.pg-feed-ai-notes { margin: 0.35rem 0 0; font-size: var(--sf-fs-sm); color: var(--sf-text-2); line-height: 1.5; }
.pg-feed-ai-warn { margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: var(--sf-fs-xs); color: var(--sf-warning-text); }
.pg-feed-ai-warn li { display: flex; align-items: center; gap: 0.4rem; }
.pg-feed-ai-warn i { font-size: 10px; }
.pg-stores-meta a { color: var(--sf-accent-text); }
.pg-stores-meta a:hover { color: var(--sf-text); }
.pg-stores-meta a i { color: inherit; opacity: 0.8; }

/* KPI strip (shared by the stores pages): 4 up, 2 up below 1200px,
   1 up on phones; labels leave room for the corner icon chip. */
.pg-stores-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-stores-kpis.pg-stores-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-stores-kpis .sf-stat .label, .pg-stores-kpis .sf-stat .value.sm { padding-right: 2.6rem; }
@media (max-width: 1199px) { .pg-stores-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .pg-stores-kpis, .pg-stores-kpis.pg-stores-kpis-3 { grid-template-columns: minmax(0, 1fr); } }

.pg-stores-err { min-width: 0; }
.pg-stores-err .sf-mono { display: block; font-size: var(--sf-fs-xs); margin-top: 0.25rem; overflow-wrap: anywhere; white-space: pre-wrap; opacity: 0.9; }

/* Source + Sync actions side by side on wide screens, stacked below 1200px. */
.sf-grid.pg-stores-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 1199px) { .sf-grid.pg-stores-cols { grid-template-columns: minmax(0, 1fr); } }
.pg-stores-url { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.pg-stores-url code { flex: 1; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-stores-dl dd .sf-sub { display: inline; margin: 0 0 0 0.35rem; }

.pg-stores-step .sf-sub { max-width: 52ch; }
.pg-stores-step-title { color: var(--sf-text); font-weight: 500; font-size: var(--sf-fs-sm); }
.pg-stores-step > form { margin: 0; flex: none; }
.pg-stores-step > form .btn { min-width: 6.5rem; }
.pg-stores-step.pg-stores-step-admin { background: color-mix(in srgb, var(--sf-warning) 2.5%, transparent); }

/* from resources/views/feeds/manage.blade.php */
/* Store logo inside the page icon chip, tinted with the platform colour. */
.sf-page-icon.pg-stores-pchip {
    background: color-mix(in srgb, var(--pc) 10%, var(--sf-surface-3));
    border-color: color-mix(in srgb, var(--pc) 34%, var(--sf-border-strong));
}
.sf-page-icon.pg-stores-pchip img { max-width: 62%; max-height: 62%; }

/* KPI strip (shared by the stores pages): 4 up, 2 up below 1200px,
   1 up on phones; labels leave room for the corner icon chip. */
.pg-stores-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-stores-kpis.pg-stores-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-stores-kpis .sf-stat .label, .pg-stores-kpis .sf-stat .value.sm { padding-right: 2.6rem; }
@media (max-width: 1199px) { .pg-stores-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .pg-stores-kpis, .pg-stores-kpis.pg-stores-kpis-3 { grid-template-columns: minmax(0, 1fr); } }

.pg-stores-feed { min-width: 0; }
.pg-stores-site { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Supplier logos are mostly wide wordmarks: a landscape plate keeps them legible. */
.sf-logo.pg-stores-feed-logo { width: 44px; height: 32px; }
.sf-logo.pg-stores-feed-logo img { max-width: 84%; max-height: 64%; }

/* Joined button groups whose segments are separate <form>s (each keeps
   its own action, hidden inputs and data-confirm). */
.pg-stores-join { display: inline-flex; align-items: center; border-radius: var(--sf-r-sm); box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.pg-stores-join > form { display: flex; margin: 0; }
.pg-stores-join > form > .btn { border-radius: 0; margin-left: -1px; box-shadow: none; }
.pg-stores-join > form:first-child > .btn { border-radius: var(--sf-r-sm) 0 0 var(--sf-r-sm); margin-left: 0; }
.pg-stores-join > form:last-child > .btn { border-radius: 0 var(--sf-r-sm) var(--sf-r-sm) 0; }
.pg-stores-join > form:only-child > .btn { border-radius: var(--sf-r-sm); }
.pg-stores-join > form > .btn:hover, .pg-stores-join > form > .btn:focus { position: relative; z-index: 1; }

/* The table wrapper is the size container for the row actions below and
   the containing block for the visually-hidden header label, so nothing
   inside it can widen the page. */
.pg-stores-tablewrap { position: relative; container: pg-stores-table / inline-size; }

.sf-table td.pg-stores-actions { text-align: left; }
.pg-stores-row-actions { display: inline-flex; align-items: center; gap: 0.4rem; }
.pg-stores-row-actions > form { margin: 0; }

.pg-stores-feed-name { display: inline-block; max-width: 100%; color: var(--sf-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.pg-stores-feed-name:hover { color: var(--sf-accent-text); }
.pg-stores-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
a.pg-stores-cfg { text-decoration: none; }
a.pg-stores-cfg:hover { border-color: currentColor; text-decoration: none; }
.pg-stores-cfg-todo { background: transparent; border-style: dashed; border-color: var(--sf-accent-border); color: var(--sf-accent-text); }

.pg-stores-sched { display: inline-flex; align-items: center; gap: 0.35rem; }
.pg-stores-sched i { font-size: 10px; color: var(--sf-faint); }

.sf-table tr.pg-stores-pending td:first-child { box-shadow: inset 2px 0 0 var(--sf-warning); }
.sf-table tr.pg-stores-pending td { background: color-mix(in srgb, var(--sf-warning) 2.5%, transparent); }
.pg-stores-count { color: var(--sf-text); font-weight: 500; }
.pg-stores-new b { color: var(--sf-success-text); }

/* Narrower table: the Pull / Push / Stock / Prices segments become
   28px icon squares (title + aria-label keep the meaning). */
@container pg-stores-table (max-width: 1119px) {
    .pg-stores-join .pg-stores-lbl { display: none; }
    .pg-stores-join .btn { width: var(--sf-h-sm); padding: 0; }
}
/* Narrowest (tablet / laptop with sidebar open): every row action is an
   icon square and the cells get tighter side padding. */
@container pg-stores-table (max-width: 959px) {
    .pg-stores-row-actions .pg-stores-lbl { display: none; }
    .pg-stores-row-actions .btn { width: var(--sf-h-sm); padding: 0; }
    .pg-stores-tablewrap .sf-table th, .pg-stores-tablewrap .sf-table td { padding-left: 0.6rem; padding-right: 0.6rem; }
    .pg-stores-tablewrap .sf-table th:first-child, .pg-stores-tablewrap .sf-table td:first-child { padding-left: 1rem; }
    .pg-stores-tablewrap .cell-main { gap: 0.6rem; }
}

/* Bulk "... for all" group in the panel header: when the panel is too
   narrow for the joined group it splits into separate rounded buttons. */
.pg-stores-panel { container: pg-stores-panel / inline-size; }
@container pg-stores-panel (max-width: 619px) {
    .pg-stores-join-wrap { flex-wrap: wrap; gap: 0.4rem; box-shadow: none; }
    .pg-stores-join-wrap > form > .btn { border-radius: var(--sf-r-sm); margin-left: 0; }
}

/* from resources/views/feeds/index.blade.php */
/* KPI strip (shared by the stores pages): 4 up, 2 up below 1200px,
   1 up on phones; labels leave room for the corner icon chip. */
.pg-stores-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-stores-kpis.pg-stores-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-stores-kpis .sf-stat .label, .pg-stores-kpis .sf-stat .value.sm { padding-right: 2.6rem; }
@media (max-width: 1199px) { .pg-stores-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .pg-stores-kpis, .pg-stores-kpis.pg-stores-kpis-3 { grid-template-columns: minmax(0, 1fr); } }
.pg-stores-kpi-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--sf-accent-text); }
.pg-stores-kpi-link i { font-size: 10px; transition: transform var(--sf-ease); }
a.sf-stat:hover .pg-stores-kpi-link i { transform: translateX(2px); }

/* Tiles never force a phone-width page to scroll sideways. */
.sf-grid.pg-stores-tiles { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

.pg-stores-id { flex: 1; min-width: 0; }
.pg-stores-head-status { flex: none; margin-top: 0.2rem; }

/* Tile stats: fixed columns so every tile in a row lines up. */
.pg-stores-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-stores-stats.pg-stores-stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-stores-stats .value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pg-stores-go { margin-left: auto; font-size: 11px; color: var(--sf-faint); transition: color var(--sf-ease), transform var(--sf-ease); }
.pg-stores-pick:hover .pg-stores-cta { background: color-mix(in srgb, var(--sf-surface-3) 92%, var(--sf-text-2)); border-color: var(--sf-border-hover); color: var(--sf-text); }
.pg-stores-pick:hover .pg-stores-go { color: var(--sf-text-2); transform: translateX(2px); }

/* ---- page: sync ---------------------------------------------------- */

/* from resources/views/sync-settings/index.blade.php */
.pg-sync-ov-int { display: inline-flex; align-items: center; gap: 0.9rem; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--sf-text-2); }
.pg-sync-ov-int > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.pg-sync-ov-int i { font-size: 11px; color: var(--sf-muted); }
.pg-sync-ov-cell { min-width: 0; }
.pg-sync-ov-cell .primary { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
a.pg-sync-ov-feed { color: var(--sf-text); }
a.pg-sync-ov-feed:hover { color: var(--sf-accent-text); }
.pg-sync-ov-name { display: block; font-weight: 500; }
.pg-sync-ov-when { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.pg-sync-ov-when .sf-sub { margin: 0; }
.pg-sync-ov-int-inline { display: none; }
@media (max-width: 1199px) {
    .sf-stats.pg-sync-ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-sync-ov-col-int { display: none; }
    .pg-sync-ov-int-inline { display: flex; margin-top: 0.4rem; font-size: var(--sf-fs-xs); }
    .pg-sync-ov-table th, .pg-sync-ov-table td { padding-left: 0.75rem; padding-right: 0.75rem; }
    .pg-sync-ov-cell .primary { max-width: 170px; }
    .pg-sync-ov-cell .sf-sub { max-width: 170px; }
    .btn.btn-sm.pg-sync-ov-cfg { width: var(--sf-h-sm); padding: 0; }
    .pg-sync-ov-cfg .pg-sync-ov-lbl { display: none; }
}

/* from resources/views/feeds/sync-settings.blade.php */
/* ---- Layout: sticky section nav + form column ---------------------- */
.pg-sync-layout { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.pg-sync-main { min-width: 0; }
.pg-sync-nav { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2px; }
.pg-sync-nav-title { font-size: var(--sf-fs-xs); font-weight: 600; color: var(--sf-muted); margin: 0 0 0.45rem 0.65rem; }
.pg-sync-nav a {
    display: flex; align-items: center; gap: 0.65rem; min-height: 34px; padding: 0.35rem 0.65rem;
    border-radius: var(--sf-r-sm); color: var(--sf-text-2); font-size: var(--sf-fs-sm); line-height: 1.3; text-decoration: none;
    border: 1px solid transparent; transition: background-color var(--sf-ease), color var(--sf-ease);
}
.pg-sync-nav a > i { width: 14px; flex: none; text-align: center; font-size: 12px; color: var(--sf-muted); }
.pg-sync-nav a:hover { background: rgba(255, 255, 255, 0.04); color: var(--sf-text); }
.pg-sync-nav a.active { background: var(--sf-surface-3); border-color: var(--sf-border-strong); color: var(--sf-text); box-shadow: var(--sf-hairline); }
.pg-sync-nav a.active > i { color: var(--sf-accent-text); }
.pg-sync-nav .dot { margin-left: auto; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--sf-accent); box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.14); }
.pg-sync-nav-legend { display: flex; align-items: center; gap: 0.5rem; margin: 0.8rem 0 0 0.65rem; font-size: var(--sf-fs-2xs); color: var(--sf-muted); }
.pg-sync-nav-legend .dot { margin: 0; }

.pg-sync-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin: 0 0 0.75rem; }
.pg-sync-toolbar .info { font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-sync-toolbar .info b { color: var(--sf-text-2); font-weight: 600; }

/* ---- Collapsible section panel (details.sf-panel) ------------------- */
.sf-panel.pg-sync-sec { margin-bottom: 0.75rem; scroll-margin-top: 88px; }
.pg-sync-sec > summary {
    list-style: none; display: flex; align-items: center; gap: 0.85rem; padding: 0.95rem 1.25rem;
    cursor: pointer; user-select: none; border-radius: var(--sf-r-lg); transition: background-color var(--sf-ease);
}
.pg-sync-sec > summary::-webkit-details-marker { display: none; }
.pg-sync-sec > summary::marker { content: ''; }
.pg-sync-sec > summary:hover { background: rgba(255, 255, 255, 0.018); }
.pg-sync-sec > summary:focus-visible { outline: 0; box-shadow: var(--sf-focus); }
.pg-sync-sec[open] > summary { border-bottom: 1px solid var(--sf-border); border-radius: var(--sf-r-lg) var(--sf-r-lg) 0 0; background: rgba(255, 255, 255, 0.012); }
.pg-sync-sec-text { flex: 1; min-width: 0; }
.pg-sync-sec-text .sf-panel-sub { display: block; }
.pg-sync-sec-meta { display: flex; align-items: center; gap: 0.85rem; flex: none; }
.pg-sync-chev { color: var(--sf-muted); font-size: 11px; transition: transform var(--sf-ease); }
.pg-sync-sec[open] .pg-sync-chev { transform: rotate(180deg); }
.pg-sync-sec-body { padding: 1.25rem; }
.pg-sync-intro { margin: 0 0 1.1rem; font-size: var(--sf-fs-sm); color: var(--sf-muted); line-height: 1.55; max-width: 92ch; }

.pg-sync-sub { margin: 1.5rem 0 0.7rem; }
.pg-sync-sub:first-child { margin-top: 0; }
.pg-sync-sub .title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.5rem; font-size: var(--sf-fs-sm); font-weight: 600; color: var(--sf-text); }
.pg-sync-sub .title i { font-size: 11px; color: var(--sf-muted); }
.pg-sync-sub .desc { font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-top: 0.2rem; line-height: 1.5; }
.pg-sync-label-note { font-weight: 400; color: var(--sf-muted); }

.pg-sync-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.pg-sync-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
.pg-sync-flex { gap: 1rem; margin-top: 0.85rem; }
.pg-sync-flex > .sf-field { flex: 1; min-width: 0; margin-bottom: 0; }
.pg-sync-narrow { max-width: 180px; }
.pg-sync-ns { max-width: 320px; }
.pg-sync-after { margin-top: 1rem; }
.pg-sync-gap { margin-top: 0.6rem; }

/* ---- Switch rows: whole row is the <label> ------------------------- */
label.pg-sync-switch {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
    margin: 0; padding: 0.85rem 1rem; cursor: pointer; font-weight: 400;
    background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r);
    transition: border-color var(--sf-ease), background-color var(--sf-ease);
}
label.pg-sync-switch:hover { border-color: var(--sf-border-strong); }
label.pg-sync-switch:has(input:checked) { border-color: var(--sf-accent-border); background: rgba(79, 124, 255, 0.05); }
.pg-sync-switch + .pg-sync-switch { margin-top: 0.6rem; }
.pg-sync-switch .text { min-width: 0; }
.pg-sync-switch .title { display: block; font-size: var(--sf-fs-sm); font-weight: 500; color: var(--sf-text); }
.pg-sync-switch .desc { display: block; font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-top: 0.2rem; line-height: 1.5; }
.pg-sync-switch .toggle { flex: none; }

/* ---- Repeatable rows (mappings, exclusions, margin rules) ---------- */
.pg-sync-rhead, .pg-sync-rrow { display: grid; gap: 0.5rem; align-items: center; }
.pg-sync-rhead { padding: 0 0.55rem 0.45rem; font-size: var(--sf-fs-2xs); font-weight: 600; color: var(--sf-muted); }
.pg-sync-rrow {
    padding: 0.5rem 0.55rem; margin: 0 0 0.45rem; background: var(--sf-surface-2);
    border: 1px solid var(--sf-border); border-radius: var(--sf-r); transition: border-color var(--sf-ease);
}
.pg-sync-rrow:hover { border-color: var(--sf-border-strong); }
.pg-sync-rrow > input, .pg-sync-rrow > select { margin: 0; min-width: 0; }
.pg-sync-cols-map { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) minmax(0, 0.75fr) var(--sf-h); }
.pg-sync-cols-ex { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) var(--sf-h); }
.pg-sync-cols-mr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr) auto minmax(0, 0.9fr) 86px minmax(0, 0.8fr) var(--sf-h); }
.pg-sync-cols-mr > * { grid-row: 1; }
.pg-sync-cols-mr > :nth-child(1) { grid-column: 1; }
.pg-sync-cols-mr > :nth-child(2) { grid-column: 2; }
.pg-sync-cols-mr > :nth-child(3) { grid-column: 3; }
.pg-sync-cols-mr > :nth-child(4) { grid-column: 4; }
.pg-sync-cols-mr > :nth-child(5) { grid-column: 5; }
.pg-sync-cols-mr > :nth-child(6) { grid-column: 6; }
.pg-sync-cols-mr > :nth-child(7) { grid-column: 7; }
.pg-sync-cols-mr > :nth-child(8) { grid-column: 8; }
/* single value: the value input takes the "and / max" columns too */
.pg-sync-rrow.pg-sync-cols-mr:not(:has(option[value="between"]:checked)) > :nth-child(3),
.pg-sync-rhead.pg-sync-cols-mr > .pg-sync-h-val { grid-column: 3 / 6; }
.pg-sync-rhead.pg-sync-cols-mr > .pg-sync-h-type { grid-column: 6; }
.pg-sync-rhead.pg-sync-cols-mr > .pg-sync-h-mar { grid-column: 7; }
.pg-sync-and { font-size: var(--sf-fs-xs); color: var(--sf-muted); text-align: center; padding: 0 0.15rem; }
.pg-sync-arrow { color: var(--sf-faint); text-align: center; font-size: 12px; }
.btn.pg-sync-rm { color: var(--sf-muted); }
.btn.pg-sync-rm:hover { color: var(--sf-danger-text); background: var(--sf-danger-soft); }
.pg-sync-rempty {
    display: flex; align-items: center; gap: 0.65rem; margin: 0 0 0.6rem; padding: 0.8rem 1rem;
    border: 1px dashed var(--sf-border-strong); border-radius: var(--sf-r); color: var(--sf-muted); font-size: var(--sf-fs-sm);
}
.pg-sync-rempty i { color: var(--sf-faint); }
.pg-sync-repeat:has(.pg-sync-rrow) .pg-sync-rempty { display: none; }
.pg-sync-repeat:not(:has(.pg-sync-rrow)) .pg-sync-rhead { display: none; }
.pg-sync-repeat-foot { margin-top: 0.35rem; }

/* ---- Checkbox lists (brands / types / tags) ------------------------ */
.pg-sync-checklist {
    background: var(--sf-inset); border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r);
    max-height: 224px; overflow-y: auto; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
.pg-sync-checklist label {
    display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.5rem 0.75rem;
    font-size: var(--sf-fs-sm); font-weight: 400; color: var(--sf-text-2); cursor: pointer; user-select: none;
    border-bottom: 1px solid var(--sf-border); transition: background-color var(--sf-ease);
}
.pg-sync-checklist label:last-child { border-bottom: 0; }
.pg-sync-checklist label:hover { background: rgba(255, 255, 255, 0.025); color: var(--sf-text); }
.pg-sync-checklist label:has(input:checked) { background: var(--sf-accent-soft); color: var(--sf-text); font-weight: 500; }
.pg-sync-checklist .check-list-search { position: sticky; top: 0; z-index: 1; padding: 0.45rem; background: var(--sf-inset); border-bottom: 1px solid var(--sf-border); }
.pg-sync-checklist .check-list-search > i { left: 1.2rem; }
.pg-sync-checklist-empty { padding: 0.9rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); text-align: center; }
.pg-sync-checklist-empty i { margin-right: 0.35rem; color: var(--sf-faint); }
.pg-sync-listfield { margin-bottom: 1.1rem; }
.pg-sync-listfield > .sf-label { display: flex; align-items: center; gap: 0.5rem; min-height: 22px; margin-top: 0; }

/* ---- Category / brand / tag map rows ------------------------------- */
.sf-alert.pg-sync-banner { align-items: center; margin-bottom: 1.1rem; }
.pg-sync-banner .grow { flex: 1; min-width: 0; }
.pg-sync-banner .when { opacity: 0.75; }
.pg-sync-maplist { border: 1px solid var(--sf-border); border-radius: var(--sf-r); background: var(--sf-surface-2); max-height: 440px; overflow-y: auto; }
.pg-sync-maprow { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1.25fr); align-items: center; gap: 0.75rem; padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--sf-border); }
.pg-sync-maprow:last-child { border-bottom: 0; }
.pg-sync-maprow > input, .pg-sync-maprow > select { margin: 0; }
.pg-sync-maprow .from { font-size: var(--sf-fs-sm); color: var(--sf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sync-maprow .arrow { color: var(--sf-faint); text-align: center; font-size: 12px; }
.pg-sync-maphead {
    position: sticky; top: 0; z-index: 1; padding-top: 0.5rem; padding-bottom: 0.5rem; background: var(--sf-surface-3);
    font-size: var(--sf-fs-2xs); font-weight: 600; color: var(--sf-muted);
}

/* ---- Variations ---------------------------------------------------- */
.pg-sync-varopt { margin-top: 1rem; border: 1px solid var(--sf-border); border-radius: var(--sf-r); background: var(--sf-surface-2); }
.pg-sync-varopt-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--sf-border); }
.pg-sync-varopt-head .name { display: flex; align-items: center; gap: 0.5rem; font-size: var(--sf-fs-sm); font-weight: 600; color: var(--sf-text); }
.pg-sync-seg label { position: relative; }
.pg-sync-seg input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pg-sync-seg label:has(input:checked) { background: var(--sf-surface-3); color: var(--sf-text); box-shadow: var(--sf-hairline), 0 1px 2px rgba(0, 0, 0, 0.35); }
.pg-sync-seg label:has(input:focus-visible) { box-shadow: var(--sf-focus); }
.pg-sync-varvals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem 1rem; max-height: 200px; overflow: auto; padding: 0.85rem 0.9rem; transition: opacity var(--sf-ease); }
.pg-sync-varvals .sf-check { font-size: var(--sf-fs-xs); text-transform: capitalize; min-width: 0; }

/* ---- Pricing ------------------------------------------------------- */
.pg-sync-example { margin: 0.2rem 0 0.9rem; padding: 0.75rem 0.9rem; border-radius: var(--sf-r); background: var(--sf-surface-2); border: 1px solid var(--sf-border); font-size: var(--sf-fs-xs); color: var(--sf-muted); line-height: 1.9; }
.pg-sync-example .ex-title { display: flex; align-items: center; gap: 0.45rem; color: var(--sf-text-2); font-weight: 500; }
.pg-sync-example .ex-title i { color: var(--sf-accent-text); }

/* ---- Check-card grids (locks, protected fields, specs, channels) --- */
.sf-check-grid.pg-sync-checkgrid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.5rem; }
.pg-sync-checkgrid .sf-check-card { align-items: center; padding: 0.6rem 0.75rem; }
.pg-sync-checkgrid .sf-check-card > span { min-width: 0; }
.pg-sync-checkgrid .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Product picker (Livewire, rendered inside the Filters section) */
.pg-sync-pp { margin-bottom: 1.35rem; border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r-lg); background: var(--sf-surface-2); }
.pg-sync-pp-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.85rem 1rem; }
.pg-sync-pp-head .grow { flex: 1; min-width: 180px; }
.pg-sync-pp-head .title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: var(--sf-fs-sm); font-weight: 600; color: var(--sf-text); }
.pg-sync-pp-head .desc { font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-top: 0.2rem; line-height: 1.5; max-width: 90ch; }
.pg-sync-pp-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; max-height: 96px; overflow-y: auto; padding: 0 1rem 0.85rem; }
.badge.pg-sync-pp-chip { padding-right: 0.2rem; }
.btn.btn-icon.pg-sync-pp-x { width: 16px; height: 16px; padding: 0; border-radius: 50%; font-size: 9px; color: var(--sf-muted); }
.btn.btn-icon.pg-sync-pp-x:hover { color: var(--sf-danger-text); background: var(--sf-danger-soft); }
.pg-sync-pp-body { border-top: 1px solid var(--sf-border); padding: 0.85rem 1rem 1rem; }
.pg-sync-pp-search { max-width: 360px; }
.pg-sync-pp-table { margin-top: 0.75rem; border: 1px solid var(--sf-border); border-radius: var(--sf-r); background: var(--sf-surface); overflow: hidden; }
.pg-sync-pp-table .sf-table td { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.pg-sync-pp-table .sf-table th:first-child, .pg-sync-pp-table .sf-table td:first-child { width: 44px; padding-right: 0; }
.pg-sync-pp-table tr.is-selected td { background: rgba(79, 124, 255, 0.07); }
.pg-sync-pp-table .sku { font-family: var(--sf-mono); font-size: var(--sf-fs-2xs); }
.pg-sync-pp-foot { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; }
.pg-sync-pp-foot .sf-muted { margin-left: auto; font-size: var(--sf-fs-xs); }
.sf-empty.pg-sync-pp-empty { padding: 1.75rem 1rem; }
.pg-sync-pp-pages { margin-top: 0.5rem; }

/* ---- Save bar + push panel ----------------------------------------- */
.pg-sync-savebar {
    position: sticky; bottom: 1rem; z-index: 4; display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem 1rem; flex-wrap: wrap; margin: 1.25rem 0; padding: 0.7rem 0.75rem 0.7rem 1.1rem;
    background: color-mix(in srgb, var(--sf-surface-raised) 92%, transparent); backdrop-filter: blur(10px);
    border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r-lg); box-shadow: var(--sf-shadow-pop);
}
/* keep the Save button clear of the floating live-chat button when it is shown */
body:has(.sc-chat-fab:not(.is-open):not([style*="display: none"]):not([style*="display:none"])) .pg-sync-savebar { margin-right: 3.4rem; }
.pg-sync-savebar .note { display: flex; align-items: center; gap: 0.55rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-sync-savebar .note .dirty { display: none; color: var(--sf-warning-text); }
.pg-sync-savebar .note .dirty i { font-size: 7px; }
.pg-sync-savebar.is-dirty .note .dirty { display: inline-flex; align-items: center; gap: 0.5rem; }
.pg-sync-savebar.is-dirty .note .clean { display: none; }
.sf-panel-foot.pg-sync-push-foot { flex-wrap: wrap; justify-content: flex-start; gap: 0.4rem 0.9rem; }
.pg-sync-push-foot .err { color: var(--sf-danger-text); }
.pg-sync-inline-form { display: inline; margin: 0; }

@media (max-width: 1199px) {
    .sf-stats.pg-sync-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-sync-layout { grid-template-columns: minmax(0, 1fr); }
    .pg-sync-nav { display: none; }
}
@media (max-width: 760px) {
    .pg-sync-grid2, .pg-sync-grid3 { grid-template-columns: minmax(0, 1fr); }
    .pg-sync-cols-mr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pg-sync-cols-mr > * { grid-row: auto; grid-column: auto !important; }
    .pg-sync-cols-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pg-sync-cols-map > .pg-sync-arrow { display: none; }
    .pg-sync-maprow { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
    .pg-sync-maprow .arrow { display: none; }
    .pg-sync-sec-meta .badge, .pg-sync-sec-meta .sf-status { display: none; }
}

/* from resources/views/feeds/export-map.blade.php */
.sf-alert.pg-sync-ex-note { align-items: center; }
.pg-sync-ex-note .grow { flex: 1; min-width: 0; }
.pg-sync-ex-note .when { opacity: 0.75; }
.pg-sync-ex-note small { display: block; margin-top: 0.2rem; opacity: 0.9; }
.pg-sync-ex-note form { margin: 0; flex: none; }
.pg-sync-ex-body { overflow: hidden; border-radius: 0 0 var(--sf-r-lg) var(--sf-r-lg); }
/* two newspaper columns on wide screens: reads top-down like an index */
.pg-sync-ex-rows { columns: 2 440px; column-gap: 0; column-rule: 1px solid var(--sf-border); margin-bottom: -1px; }
.pg-sync-ex-row {
    break-inside: avoid; display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1.35fr);
    align-items: center; gap: 0.75rem; padding: 0.5rem 1.25rem; border-bottom: 1px solid var(--sf-border);
    transition: background-color var(--sf-ease);
}
.pg-sync-ex-row:hover { background: rgba(79, 124, 255, 0.03); }
.pg-sync-ex-row > input, .pg-sync-ex-row > select { margin: 0; }
.pg-sync-ex-row .from { font-size: var(--sf-fs-sm); color: var(--sf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sync-ex-row .arrow { color: var(--sf-faint); text-align: center; font-size: 12px; }
.pg-sync-ex-bar {
    position: sticky; bottom: 1rem; z-index: 4; display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem 1rem; flex-wrap: wrap; margin: 1.25rem 0 0; padding: 0.7rem 0.75rem 0.7rem 1.1rem;
    background: color-mix(in srgb, var(--sf-surface-raised) 92%, transparent); backdrop-filter: blur(10px);
    border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r-lg); box-shadow: var(--sf-shadow-pop);
}
body:has(.sc-chat-fab:not(.is-open):not([style*="display: none"]):not([style*="display:none"])) .pg-sync-ex-bar { margin-right: 3.4rem; }
.pg-sync-ex-status { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.pg-sync-ex-bar .pg-sync-ex-status label { margin: 0; white-space: nowrap; font-size: var(--sf-fs-sm); color: var(--sf-text-2); }
.pg-sync-ex-bar .pg-sync-ex-status select { width: auto; min-width: 210px; }
.sf-empty.pg-sync-ex-empty { padding: 2rem 1.25rem; }
@media (max-width: 1199px) {
    .sf-stats.pg-sync-ex-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .pg-sync-ex-row { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
    .pg-sync-ex-row .arrow { display: none; }
}

/* ---- page: sys ---------------------------------------------------- */

/* from resources/views/settings/audit/index.blade.php */
/* Audit log: one events panel — rows grouped by day, actor avatar,
   action pill (tone from the verb), target, metadata as key/value
   chips, time + IP. The shared partials.pager is themed in the foot. */
.pg-sys-audit th:last-child, .pg-sys-audit td:last-child { text-align: right; }
.pg-sys-audit .cell-main > div { min-width: 0; }
.pg-sys-audit .pg-sys-org i { font-size: 0.85em; opacity: 0.7; margin-right: 0.15rem; }
.pg-sys-audit-filter { flex-wrap: nowrap; }
.pg-sys-audit-filter select, .pg-sys-audit-filter .select2-container { min-width: 220px; max-width: 280px; }
.pg-sys-actor { display: block; color: var(--sf-text); font-weight: 500; line-height: 1.3; white-space: nowrap; }
.pg-sys-audit .sf-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-avatar.pg-sys-avatar-sys { background: var(--sf-surface-3); color: var(--sf-muted); }
.pg-sys-avatar-sys > i { font-size: 12px; }
.pg-sys-act { max-width: 100%; }
.pg-sys-act > i { font-size: 9px; }
.pg-sys-act > span { font-family: var(--sf-mono); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; }
.pg-sys-target { display: flex; align-items: center; gap: 0.45rem; color: var(--sf-text-2); white-space: nowrap; }
.pg-sys-target > i { width: 14px; text-align: center; font-size: 11px; color: var(--sf-muted); }
.pg-sys-id { display: block; max-width: 220px; margin-top: 0.15rem; padding-left: calc(14px + 0.45rem); font-family: var(--sf-mono); font-size: var(--sf-fs-2xs); color: var(--sf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sys-kvs { display: flex; flex-wrap: wrap; gap: 0.3rem; max-width: 380px; }
.pg-sys-kv { display: inline-flex; align-items: stretch; max-width: 100%; height: 22px; border-radius: var(--sf-r-xs); border: 1px solid var(--sf-border-strong); overflow: hidden; font-family: var(--sf-mono); font-size: 10.5px; line-height: 20px; }
.pg-sys-kv > .k { padding: 0 0.4rem; background: var(--sf-surface-3); color: var(--sf-muted); white-space: nowrap; }
.pg-sys-kv > .v { padding: 0 0.45rem; background: var(--sf-inset); color: var(--sf-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.pg-sys-kv.more { padding: 0 0.45rem; background: transparent; color: var(--sf-muted); border-style: dashed; }
.pg-sys-none { color: var(--sf-faint); }
.pg-sys-when { display: block; color: var(--sf-text); white-space: nowrap; }
.pg-sys-audit td:last-child .sf-sub { white-space: nowrap; }
.pg-sys-ip { font-family: var(--sf-mono); font-size: var(--sf-fs-2xs); }

/* Day separators */
.sf-table.pg-sys-audit tr.pg-sys-day td, .sf-table.pg-sys-audit tr.pg-sys-day:hover td {
    padding-top: 0.55rem; padding-bottom: 0.55rem; background: var(--sf-surface-2);
    font-size: var(--sf-fs-xs); font-weight: 600; color: var(--sf-text-2); text-align: left;
}
.pg-sys-day-label { display: inline-flex; align-items: center; gap: 0.5rem; }
.pg-sys-day-label > i { font-size: 11px; color: var(--sf-muted); }
.pg-sys-day-label > .badge { height: 18px; padding: 0 0.4rem; }

/* Themed shared pager (partials.pager) */
.pg-sys-pager > .pager { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; flex-wrap: wrap; width: 100%; }
.pg-sys-pager > .pager > .summary { margin-right: auto; color: var(--sf-muted); font-size: var(--sf-fs-xs); }
.pg-sys-pager > .pager > a, .pg-sys-pager > .pager > span:not(.summary) {
    display: inline-flex; align-items: center; justify-content: center; min-width: var(--sf-h-sm); height: var(--sf-h-sm); padding: 0 0.6rem;
    border-radius: var(--sf-r-sm); border: 1px solid var(--sf-border-strong); background: var(--sf-surface-3);
    color: var(--sf-text-2); font-size: var(--sf-fs-xs); font-weight: 500; text-decoration: none; font-variant-numeric: tabular-nums;
    transition: border-color var(--sf-ease), color var(--sf-ease);
}
.pg-sys-pager > .pager > a:hover { border-color: var(--sf-border-hover); color: var(--sf-text); }
.pg-sys-pager > .pager > span.current { background: var(--sf-accent); border-color: var(--sf-accent); color: #fff; font-weight: 600; }
.pg-sys-pager > .pager > span.disabled { background: transparent; border-color: var(--sf-border); color: var(--sf-faint); }

/* Narrow screens: the Target column folds under the action pill
   (below 1400px the full 6-column table no longer fits the panel). */
.pg-sys-target-inline { display: none; }
@media (max-width: 1399px) {
    .pg-sys-audit th, .pg-sys-audit td { padding-left: 0.75rem; padding-right: 0.75rem; }
    .pg-sys-audit .pg-sys-col-target { display: none; }
    .pg-sys-target-inline {
        display: block; max-width: 160px; margin-top: 0.4rem; font-size: var(--sf-fs-xs); color: var(--sf-muted);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .pg-sys-target-inline > i { width: 14px; text-align: center; font-size: 10px; }
    .pg-sys-kvs { max-width: 170px; }
    .pg-sys-kv > .v { max-width: 110px; }
}

/* from resources/views/settings/queue.blade.php */
/* Queue control (Livewire queue-control + failed-jobs): KPI strip,
   queues table + workers panel side by side, action cards, failed jobs
   table with an expandable exception row. */
.pg-sys-live { display: inline-flex; align-items: center; gap: 0.45rem; height: var(--sf-h-sm); padding: 0 0.7rem; border-radius: 999px; background: var(--sf-surface-2); border: 1px solid var(--sf-border); font-size: var(--sf-fs-xs); color: var(--sf-muted); white-space: nowrap; }
.pg-sys-live > i { font-size: 10px; color: var(--sf-accent-text); }

.sf-stats.pg-sys-q-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-stats.pg-sys-q-kpis .sf-stat .label { padding-right: 2.75rem; }
.sf-stats.pg-sys-q-kpis .sf-progress { margin-top: 0.65rem; }
.sf-stats.pg-sys-q-kpis a.sf-stat:hover .label { color: var(--sf-text-2); }
.sf-stat-icon.pg-sys-ok { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); }

.pg-sys-grid { display: grid; gap: 0 1.25rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }

/* Queues table */
.pg-sys-qname { display: block; font-family: var(--sf-mono); font-size: var(--sf-fs-sm); font-weight: 500; color: var(--sf-text); line-height: 1.3; }
.pg-sys-qtable .cell-main > div { min-width: 0; }
.sf-table.pg-sys-qtable td { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.pg-sys-qtable tr.is-idle .pg-sys-qname { color: var(--sf-text-2); }
.pg-sys-qtable tr.is-idle .sf-icon-chip { opacity: 0.7; }
.pg-sys-share { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }
.pg-sys-share > b { min-width: 2ch; font-weight: 600; color: var(--sf-text); font-variant-numeric: tabular-nums; }
.pg-sys-qtable tr.is-idle .pg-sys-share > b { color: var(--sf-muted); font-weight: 500; }
.pg-sys-bar { display: block; width: 88px; height: 4px; border-radius: 999px; background: var(--sf-surface-3); overflow: hidden; }
.pg-sys-bar > span { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--sf-warning); }

/* Workers panel */
.pg-sys-rows .sf-setting { padding: 1rem 0; }
.pg-sys-rows .sf-setting:first-child { padding-top: 0; }
.pg-sys-rows .sf-setting > div:first-child { min-width: 0; }
.pg-sys-rows .sf-setting .desc { line-height: 1.5; }
.pg-sys-rows label.title { display: block; margin: 0; }
.pg-sys-rows .sf-setting > .sf-btn-row, .pg-sys-rows .sf-setting > .btn { flex: none; flex-wrap: nowrap; }
.pg-sys-rows .sf-setting:last-child { padding-bottom: 0; }
.pg-sys-expected { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.pg-sys-side .sf-tile-stat { padding: 0.7rem 0.8rem; }
.pg-sys-side .sf-tile-stat .label { display: flex; align-items: center; gap: 0.4rem; }
.pg-sys-side .sf-tile-stat .label > i { font-size: 10px; }
.pg-sys-side .sf-tile-stat .value { font-size: var(--sf-fs-lg); margin-top: 0.25rem; }
.pg-sys-side .sf-tile-stat.is-hot { border-color: var(--sf-warning-border); }
.pg-sys-side .sf-tile-stat.is-hot .value { color: var(--sf-warning-text); }
/* Bootstrap's grey :disabled fill would win over the design system. */
.pg-sys-action .btn-secondary:disabled { background: var(--sf-surface-3); border-color: var(--sf-border-strong); color: var(--sf-text-2); }

/* Action cards */
.pg-sys-actions { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-sys-action { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; padding: 1rem; background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg); }
.pg-sys-action.is-danger { border-color: var(--sf-danger-border); background: color-mix(in srgb, var(--sf-danger) 4%, var(--sf-surface-2)); }
.pg-sys-action-head { display: flex; align-items: center; gap: 0.65rem; }
.pg-sys-action-head .title { font-size: var(--sf-fs-sm); font-weight: 600; color: var(--sf-text); line-height: 1.3; }
.pg-sys-action .desc { flex: 1; margin: 0; font-size: var(--sf-fs-xs); line-height: 1.5; color: var(--sf-muted); }
.pg-sys-action-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--sf-border); }
.sf-panel-foot.pg-sys-note { justify-content: flex-start; align-items: flex-start; line-height: 1.55; }
.pg-sys-note > i { margin-top: 0.2rem; color: var(--sf-info-text); }

/* Failed jobs */
.pg-sys-flash { padding: 1rem 1.25rem 0; }
.pg-sys-flash .sf-alert { margin-bottom: 0; }
.sf-empty.pg-sys-empty-ok .ico { background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text); box-shadow: 0 0 0 8px rgba(74, 222, 128, 0.05); }
.pg-sys-fj .cell-main > div { min-width: 0; }
.pg-sys-job { display: block; font-family: var(--sf-mono); font-size: var(--sf-fs-sm); font-weight: 500; color: var(--sf-text); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sys-uuid { font-family: var(--sf-mono); font-size: var(--sf-fs-2xs); }
.pg-sys-err { max-width: 440px; font-size: var(--sf-fs-xs); line-height: 1.5; color: var(--sf-danger-text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.pg-sys-nw { white-space: nowrap; }
.pg-sys-fj tr.pg-sys-fj-row { cursor: pointer; }
.pg-sys-chev { font-size: 10px !important; transition: transform var(--sf-ease); }
.pg-sys-fj tbody.is-open .pg-sys-chev { transform: rotate(180deg); }
.sf-table.pg-sys-fj tbody.is-open tr.pg-sys-fj-row td { background: var(--sf-surface-2); border-bottom-color: transparent; }
.sf-table.pg-sys-fj tr.pg-sys-fj-detail td, .sf-table.pg-sys-fj tr.pg-sys-fj-detail:hover td { padding-top: 0.25rem; padding-bottom: 1.1rem; background: var(--sf-surface-2); border-bottom: 1px solid var(--sf-border); cursor: default; }
.sf-table.pg-sys-fj tbody:last-child tr.pg-sys-fj-detail td { border-bottom: 0; }
.sf-table.pg-sys-fj tbody:last-child:not(.is-open) tr.pg-sys-fj-row td { border-bottom: 0; }
.sf-panel > .sf-table-wrap .sf-table.pg-sys-fj tbody:not(:last-child) tr td:first-child,
.sf-panel > .sf-table-wrap .sf-table.pg-sys-fj tbody:not(:last-child) tr td:last-child { border-radius: 0; }
.pg-sys-fj-detail[x-cloak] { display: none !important; }
.pg-sys-fj-detail .sf-code-head { background: var(--sf-surface-3); color: var(--sf-text-2); }
.pg-sys-code-title { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; font-family: var(--sf-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sys-code-title > i { color: var(--sf-danger-text); font-size: 11px; }
.sf-code.pg-sys-trace { margin: 0; max-height: 320px; white-space: pre-wrap; word-break: break-all; font-size: 12px; }

@media (max-width: 1279px) {
    .sf-stats.pg-sys-q-kpis, .pg-sys-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-sys-grid { grid-template-columns: minmax(0, 1fr); }
    .pg-sys-fj th, .pg-sys-fj td { padding-left: 0.75rem; padding-right: 0.75rem; }
    .pg-sys-fj .pg-sys-btn-label { display: none; }
    .pg-sys-job { max-width: 180px; }
}
@media (max-width: 640px) {
    .sf-stats.pg-sys-q-kpis, .pg-sys-actions { grid-template-columns: minmax(0, 1fr); }
    .pg-sys-rows .sf-setting { flex-direction: column; align-items: flex-start; }
    .pg-sys-bar { display: none; }
}

/* from resources/views/settings/app.blade.php */
/* App settings: KPI strip with the saved values + one settings panel
   made of .sf-setting rows (toggle / number inputs). */
.sf-stats.pg-sys-app-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-stats.pg-sys-app-kpis .sf-stat .label { padding-right: 2.75rem; }
.sf-stats.pg-sys-app-kpis .sf-progress { margin-top: 0.65rem; }
.pg-sys-settings .sf-setting { padding: 1.1rem 0; }
.pg-sys-settings .sf-setting:first-child { padding-top: 0.2rem; }
.pg-sys-settings .sf-setting:last-child { padding-bottom: 0.2rem; }
.pg-sys-settings .sf-setting > div:first-child { min-width: 0; max-width: 620px; }
.pg-sys-settings .sf-setting .title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pg-sys-settings .sf-setting .desc { line-height: 1.5; }
.pg-sys-control { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.pg-sys-settings .sf-setting label.title { display: block; margin: 0; }
/* Number input + unit addon. The form-control rule is very specific
   (a chain of :not()), hence the !important on the radius. */
.pg-sys-unit { display: flex; align-items: stretch; width: 168px; }
.pg-sys-unit > input.pg-sys-num { flex: 1 1 auto; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pg-sys-unit > input.pg-sys-num:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.pg-sys-unit > .pg-sys-addon {
    display: inline-flex; align-items: center; padding: 0 0.7rem; margin-left: -1px;
    background: var(--sf-surface-3); border: 1px solid var(--sf-border-strong);
    border-radius: 0 var(--sf-r-sm) var(--sf-r-sm) 0;
    font-size: var(--sf-fs-xs); color: var(--sf-muted); white-space: nowrap;
}
.pg-sys-control .sf-error { margin-top: 0; text-align: right; }
.pg-sys-range { font-size: var(--sf-fs-2xs); color: var(--sf-faint); font-variant-numeric: tabular-nums; }
.pg-sys-foot > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.pg-sys-foot > span > i { color: var(--sf-muted); }
.pg-sys-foot .btn { flex: none; }

@media (max-width: 767px) {
    .sf-stats.pg-sys-app-kpis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .pg-sys-settings .sf-setting { flex-direction: column; align-items: flex-start; }
    .pg-sys-control { align-items: flex-start; }
    .sf-panel-foot.pg-sys-foot { flex-direction: column; align-items: flex-start; }
}

/* ---- page: tkt ---------------------------------------------------- */

/* from resources/views/tickets/_thread.blade.php */
/* Ticket conversation thread (client + admin ticket pages). */
.pg-tkt-thread { display: flex; flex-direction: column; gap: 1.1rem; }
.pg-tkt-day { display: flex; align-items: center; gap: 0.75rem; color: var(--sf-muted); font-size: var(--sf-fs-2xs); font-weight: 500; }
.pg-tkt-day::before, .pg-tkt-day::after { content: ''; flex: 1; height: 1px; background: var(--sf-border); }
.pg-tkt-msg { display: flex; align-items: flex-start; gap: 0.75rem; max-width: 86%; }
.pg-tkt-msg.is-mine { flex-direction: row-reverse; align-self: flex-end; }
.pg-tkt-avatar { width: 34px; height: 34px; font-size: var(--sf-fs-xs); }
.pg-tkt-msg.is-staff .pg-tkt-avatar { background: var(--sf-accent-soft); border-color: var(--sf-accent-border); color: var(--sf-accent-text); }
.pg-tkt-col { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.pg-tkt-msg.is-mine .pg-tkt-col { align-items: flex-end; }
.pg-tkt-by { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: var(--sf-fs-xs); min-height: 22px; }
.pg-tkt-msg.is-mine .pg-tkt-by { flex-direction: row-reverse; }
.pg-tkt-name { color: var(--sf-text); font-weight: 600; }
.pg-tkt-staff { height: 20px; font-size: 10.5px; }
.pg-tkt-staff i { font-size: 9px; }
.pg-tkt-time { color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.pg-tkt-bubble {
    max-width: 100%; padding: 0.75rem 0.95rem; border-radius: var(--sf-r-lg); border-top-left-radius: var(--sf-r-xs);
    background: var(--sf-surface-3); border: 1px solid var(--sf-border-strong); box-shadow: var(--sf-hairline);
}
.pg-tkt-msg.is-staff:not(.is-mine) .pg-tkt-bubble { border-color: color-mix(in srgb, var(--sf-accent) 26%, var(--sf-border-strong)); }
.pg-tkt-msg.is-mine .pg-tkt-bubble {
    border-top-left-radius: var(--sf-r-lg); border-top-right-radius: var(--sf-r-xs);
    background: rgba(79, 124, 255, 0.10); border-color: var(--sf-accent-border);
}
.pg-tkt-text { color: var(--sf-text); font-size: var(--sf-fs); line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.pg-tkt-files { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.7rem; }
.pg-tkt-file {
    display: flex; align-items: center; gap: 0.6rem; min-width: 220px; max-width: 360px;
    padding: 0.4rem 0.6rem 0.4rem 0.4rem; border-radius: var(--sf-r);
    background: var(--sf-surface-2); border: 1px solid var(--sf-border-strong);
    color: var(--sf-text-2); font-size: var(--sf-fs-xs); text-decoration: none;
    transition: border-color var(--sf-ease), color var(--sf-ease);
}
.pg-tkt-file:hover { border-color: var(--sf-accent-border); color: var(--sf-text); text-decoration: none; }
.pg-tkt-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sf-text); font-weight: 500; }
.pg-tkt-file-size { color: var(--sf-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-tkt-file > .fa-download { color: var(--sf-muted); font-size: 11px; }
.pg-tkt-file:hover > .fa-download { color: var(--sf-accent-text); }
@media (max-width: 767px) {
    .pg-tkt-msg { max-width: 100%; }
    .pg-tkt-avatar { display: none; }
    .pg-tkt-file { min-width: 0; }
}

/* from resources/views/tickets/show.blade.php */
/* Client ticket detail: conversation panel + details aside. */
.pg-tkt-show { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.pg-tkt-show > * { min-width: 0; }
.pg-tkt-id { color: var(--sf-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.pg-tkt-meta { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.pg-tkt-meta .sep { color: var(--sf-faint); }
.pg-tkt-convo .sf-panel-body { padding: 1.35rem 1.25rem; }
.pg-tkt-composer { margin: 0; padding: 1.1rem 1.25rem 1.2rem; border-top: 1px solid var(--sf-border); background: var(--sf-surface-2); border-radius: 0 0 var(--sf-r-lg) var(--sf-r-lg); }
.pg-tkt-composer .pg-tkt-ta { min-height: 110px; }
.pg-tkt-composer > label { margin-top: 0; }
.pg-tkt-composer-row { display: flex; align-items: flex-start; gap: 0.75rem; margin-top: 0.75rem; }
.pg-tkt-composer-row .pg-tkt-file-in { flex: 1; min-width: 0; }
.pg-tkt-composer-row.end { justify-content: flex-end; }
.pg-tkt-closed { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.9rem; color: var(--sf-text-2); font-size: var(--sf-fs-sm); }
.pg-tkt-closed .sf-icon-chip { margin-top: -2px; }
.pg-tkt-closed strong { color: var(--sf-text); display: block; margin-bottom: 0.1rem; }
.pg-tkt-side .sf-dl { grid-template-columns: minmax(96px, max-content) 1fr; gap: 0.75rem 1rem; align-items: center; }
.pg-tkt-side .sf-dl dd .sf-sub { margin-top: 0.1rem; }
.pg-tkt-side .sf-dl dd .sf-muted { font-size: var(--sf-fs-xs); }
@media (max-width: 1199px) {
    .pg-tkt-show { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
    .pg-tkt-composer-row { flex-direction: column; align-items: stretch; }
}

/* from resources/views/tickets/index.blade.php */
/* Client ticket list (Livewire my-tickets-table): panel + airy table. */
.pg-tkt-list { overflow: hidden; }
.pg-tkt-list td.pg-tkt-main { width: 100%; max-width: 0; }   /* subject takes the free width, truncates */
.pg-tkt-cell { flex: 1; min-width: 0; }
.pg-tkt-subj {
    display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--sf-text); font-weight: 600;
}
.pg-tkt-subj:hover { color: var(--sf-accent-text); text-decoration: none; }
.pg-tkt-cell .sf-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-tkt-when { white-space: nowrap; color: var(--sf-text-2); }
.pg-tkt-when .sf-sub i { font-size: 10px; margin-right: 0.15rem; color: var(--sf-accent-text); }
.pg-tkt-list tr.pg-tkt-attn td:first-child { box-shadow: inset 2px 0 0 var(--sf-warning); }
@media (max-width: 1199px) {
    .pg-tkt-list .cell-main .sf-icon-chip { display: none; }
    .pg-tkt-view { width: var(--sf-h-sm); padding: 0; }
    .pg-tkt-view-label { display: none; }
    .pg-tkt-list .sf-table th, .pg-tkt-list .sf-table td { padding-left: 0.7rem; padding-right: 0.7rem; }
    .pg-tkt-list .sf-table th:first-child, .pg-tkt-list .sf-table td:first-child { padding-left: 1rem; }
    .pg-tkt-list .sf-table th:last-child, .pg-tkt-list .sf-table td:last-child { padding-right: 1rem; }
}

/* from resources/views/tickets/create.blade.php */
/* New ticket: form panel + tips aside. */
.pg-tkt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; max-width: 1180px; }
.pg-tkt-layout > * { min-width: 0; }
.pg-tkt-form { margin: 0; }
.pg-tkt-form .sf-form-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.pg-tkt-form .pg-tkt-ta { min-height: 170px; }
.pg-tkt-prio { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-tkt-prio .sf-option { gap: 0.45rem; }
.pg-tkt-prio .sf-option .desc { font-weight: 400; }
.pg-tkt-foot { justify-content: flex-end; }
.pg-tkt-aside .sf-list-item { align-items: flex-start; padding: 0.85rem 1.25rem; }
.pg-tkt-aside .sf-list-item:hover { background: transparent; }
.pg-tkt-tip-title { color: var(--sf-text); font-size: var(--sf-fs-sm); font-weight: 500; line-height: 1.35; }
.pg-tkt-docs { display: flex; align-items: center; gap: 0.85rem; }
.pg-tkt-docs .grow { flex: 1; min-width: 0; }
.pg-tkt-docs .title { color: var(--sf-text); font-size: var(--sf-fs-sm); font-weight: 600; }
@media (max-width: 1199px) {
    .pg-tkt-layout { grid-template-columns: minmax(0, 1fr); max-width: none; }
}
@media (max-width: 640px) {
    .pg-tkt-prio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-tkt-form .sf-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- page: users ---------------------------------------------------- */

/* from resources/views/settings/users/index.blade.php */
/* KPI row */
.pg-users-dir-kpis .sf-stat .label { padding-right: 2.75rem; }
.pg-users-dir-kpis .sf-progress { margin-top: 0.7rem; }
.pg-users-dir-kpis .sf-progress > span { width: var(--pg-users-w, 0%); background: var(--sf-success); }

/* Directory table */
.pg-users-dir-panel .sf-table td.pg-users-dir-user { width: 34%; min-width: 250px; max-width: 0; }
.pg-users-dir-person { min-width: 0; }
.pg-users-dir-text { min-width: 0; }
.pg-users-dir-name { display: flex; align-items: center; gap: 0.4rem; min-width: 0; color: var(--sf-text); font-weight: 500; }
.pg-users-dir-person .sf-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-avatar.pg-users-dir-avatar { width: 36px; height: 36px; font-size: var(--sf-fs-xs); letter-spacing: 0.02em; }
.sf-avatar.pg-users-dir-avatar.is-super { background: #221e15; border-color: var(--sf-warning-border); color: var(--sf-warning-text); }
.sf-avatar.pg-users-dir-avatar.is-me { box-shadow: 0 0 0 3px var(--sf-accent-soft); border-color: var(--sf-accent-border); }
.pg-users-dir-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.badge.pg-users-tag {
    --tc: var(--sf-text-2);
    height: 20px; padding: 0 0.5rem; gap: 0.3rem;
    color: color-mix(in srgb, var(--tc) 78%, #ffffff);
    background: color-mix(in srgb, var(--tc) 13%, transparent);
    border-color: color-mix(in srgb, var(--tc) 36%, transparent);
}
.badge.pg-users-tag i { font-size: 9px; }
.pg-users-dir-roles { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.badge.pg-users-role-violet { background: var(--sf-violet-soft); border-color: rgba(167, 139, 250, 0.3); color: #c4b5fd; }
.badge.pg-users-role i { font-size: 9px; }
.pg-users-dir-orgs { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.pg-users-dir-org { display: flex; align-items: center; gap: 0.45rem; min-width: 0; color: var(--sf-text-2); }
.pg-users-dir-org > i { color: var(--sf-faint); font-size: 11px; flex: none; }
.pg-users-dir-org .sf-truncate { max-width: 200px; }
.pg-users-dir-org .badge { height: 20px; padding: 0 0.45rem; }
.pg-users-dir-none { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--sf-muted); font-size: var(--sf-fs-xs); }
.pg-users-dir-none i { color: var(--sf-faint); }
.pg-users-dir-joined { white-space: nowrap; }
.pg-users-dir-form { display: inline-flex; margin: 0; }
.btn.pg-users-dir-danger { color: var(--sf-muted); }
.btn.pg-users-dir-danger:hover { color: var(--sf-danger-text); background: var(--sf-danger-soft); }
.btn.pg-users-dir-spacer { visibility: hidden; pointer-events: none; }
.pg-users-dir-pager { margin-top: 0.25rem; }
.sf-table tbody tr.pg-users-dir-empty-row:hover td { background: transparent; }
.pg-users-dir-empty-row .sf-empty .actions { width: auto; text-align: center; white-space: normal; }
@media (max-width: 1279px) {
    .pg-users-dir-panel .sf-table td.pg-users-dir-user { width: auto; max-width: none; min-width: 0; }
    .pg-users-dir-panel .sf-table .pg-users-dir-joined { display: none; }
    .pg-users-dir-org { flex-wrap: wrap; row-gap: 0.25rem; }
    .pg-users-dir-org .sf-truncate { max-width: 150px; }
}

/* from resources/views/settings/users/edit.blade.php */
.pg-users-edit-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.pg-users-edit-layout > * { min-width: 0; }
.pg-users-edit-aside { position: sticky; top: 88px; }
.pg-users-edit-card { padding: 1.5rem 1.25rem 1.15rem; text-align: center; }
.sf-avatar.pg-users-edit-avatar {
    width: 64px; height: 64px; margin: 0 auto 0.85rem; display: flex;
    font-size: var(--sf-fs-lg); border-color: var(--sf-accent-border); box-shadow: 0 0 0 5px var(--sf-accent-soft);
}
.sf-avatar.pg-users-edit-avatar.is-new { color: var(--sf-accent-text); }
.pg-users-edit-name { font-size: var(--sf-fs-md); font-weight: 600; color: var(--sf-text); overflow-wrap: anywhere; }
.pg-users-edit-mail { font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-top: 0.15rem; overflow-wrap: anywhere; }
.pg-users-edit-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.8rem; }
.badge.pg-users-edit-violet { background: var(--sf-violet-soft); border-color: rgba(167, 139, 250, 0.3); color: #c4b5fd; }
.badge.pg-users-edit-role i { font-size: 9px; }
.sf-dl.pg-users-edit-facts {
    margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--sf-border);
    text-align: left; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem 1rem; font-size: var(--sf-fs-xs);
}
.pg-users-edit-facts dd { text-align: right; color: var(--sf-text-2); }
.pg-users-edit-nav { display: flex; flex-direction: column; gap: 2px; padding: 0.5rem; }
.pg-users-edit-nav a {
    display: flex; align-items: center; gap: 0.7rem; height: 36px; padding: 0 0.7rem;
    border-radius: var(--sf-r-sm); color: var(--sf-text-2); font-size: var(--sf-fs-sm); font-weight: 500;
    transition: background-color var(--sf-ease), color var(--sf-ease);
}
.pg-users-edit-nav a i { width: 16px; text-align: center; color: var(--sf-muted); font-size: 12px; }
.pg-users-edit-nav a:hover { background: rgba(255, 255, 255, 0.045); color: var(--sf-text); text-decoration: none; }
.pg-users-edit-nav a:hover i { color: var(--sf-accent-text); }
.pg-users-edit-nav .count { margin-left: auto; font-size: var(--sf-fs-2xs); color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.pg-users-edit-steps { margin: 1.1rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--sf-border); list-style: none; display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.pg-users-edit-steps li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--sf-fs-xs); color: var(--sf-muted); line-height: 1.5; }
.pg-users-edit-steps li strong { color: var(--sf-text-2); font-weight: 600; }
.pg-users-edit-step-title { display: block; color: var(--sf-text); font-size: var(--sf-fs-sm); font-weight: 500; margin-bottom: 0.1rem; }
.pg-users-edit-anchor { scroll-margin-top: 88px; }
.pg-users-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-users-edit-roles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pg-users-edit-roles .sf-option .desc { display: block; margin-top: 0.2rem; }
.pg-users-edit-plan-alert { margin-bottom: 1.1rem; }
.sf-help.pg-users-edit-legend { margin: 0 0 0.9rem; }
.pg-users-edit-feeds { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sf-check-card.pg-users-edit-feedcard { align-items: center; }
.sf-check-card.pg-users-edit-feedcard input { margin-top: 0 !important; }
.pg-users-edit-feed { display: flex; align-items: center; gap: 0.65rem; min-width: 0; flex: 1; }
.sf-logo.pg-users-edit-logo { width: 34px; height: 34px; border-radius: var(--sf-r-sm); font-size: var(--sf-fs-xs); }
.sf-logo.pg-users-edit-logo.has-img { background: #eef0f4; border-color: #d6dae3; }
.sf-logo.pg-users-edit-logo.has-img img { max-width: 82%; max-height: 70%; }
.pg-users-edit-feed-text { min-width: 0; flex: 1; }
.sf-check-card .pg-users-edit-feed-text .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-check-card .pg-users-edit-feed-text .desc { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.pg-users-edit-feed-text .desc .sf-truncate { min-width: 0; }
.badge.pg-users-edit-sub { height: 18px; padding: 0 0.4rem; font-size: 10px; flex: none; }
.badge.pg-users-edit-sub i { font-size: 8px; }
.pg-users-edit-tags { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.badge.pg-users-edit-tag {
    --tc: var(--sf-text-2);
    height: 22px; padding: 0 0.55rem; gap: 0.35rem; margin-bottom: 0.4rem;
    color: color-mix(in srgb, var(--tc) 78%, #ffffff);
    background: color-mix(in srgb, var(--tc) 13%, transparent);
    border-color: color-mix(in srgb, var(--tc) 36%, transparent);
}
.badge.pg-users-edit-tag i { font-size: 10px; }
.pg-users-edit-badge-row { display: flex; align-items: center; gap: 0.75rem; }
.pg-users-edit-badge-row > select { flex: 1; min-width: 0; }
.badge.pg-users-edit-chatbadge {
    --tc: var(--sf-text-2);
    height: var(--sf-h); padding: 0 0.8rem; border-radius: var(--sf-r-sm); font-size: var(--sf-fs-xs); font-weight: 600;
    color: color-mix(in srgb, var(--tc) 80%, #ffffff);
    background: color-mix(in srgb, var(--tc) 13%, transparent);
    border-color: color-mix(in srgb, var(--tc) 40%, transparent);
}
.pg-users-edit-savebar {
    position: sticky; bottom: 1rem; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap;
    padding: 0.75rem 0.85rem 0.75rem 1.1rem;
    background: var(--sf-surface-raised); border: 1px solid var(--sf-border-strong); border-radius: var(--sf-r-lg);
    box-shadow: var(--sf-hairline), var(--sf-shadow-pop);
}
.pg-users-edit-savebar-note { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); min-width: 0; }
.pg-users-edit-savebar-note i { color: var(--sf-faint); }
.pg-users-edit-savebar > .sf-btn-row { margin-left: auto; }
@media (max-width: 1199px) {
    .pg-users-edit-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .pg-users-edit-aside { position: static; }
    .pg-users-edit-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1rem; text-align: left; align-items: center; }
    .sf-avatar.pg-users-edit-avatar { margin: 0; width: 52px; height: 52px; font-size: var(--sf-fs-md); grid-row: span 3; }
    .pg-users-edit-badges { justify-content: flex-start; margin-top: 0.5rem; }
    .sf-dl.pg-users-edit-facts { grid-column: 1 / -1; grid-template-columns: repeat(4, auto minmax(0, 1fr)); }
    .pg-users-edit-facts dd { text-align: left; }
    .pg-users-edit-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .pg-users-edit-navpanel { display: none; }
}
@media (max-width: 900px) {
    .sf-dl.pg-users-edit-facts { grid-template-columns: auto minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .pg-users-edit-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- page: xfer ---------------------------------------------------- */

/* from resources/views/transfers/preview.blade.php */
/* Transfer preview (dry-run): route card + the live-polled report from
   the transfer-preview component (KPIs, outcome split, sample table). */
.pg-xfer-pv-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.25rem; }
.pg-xfer-pv-end { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.pg-xfer-pv-end.is-dest { flex-direction: row-reverse; justify-content: flex-start; text-align: right; }
.pg-xfer-pv-end > div { min-width: 0; }
.pg-xfer-pv-cap { display: block; font-size: var(--sf-fs-2xs); font-weight: 500; color: var(--sf-muted); margin-bottom: 0.15rem; }
.pg-xfer-pv-name { font-size: var(--sf-fs-md); font-weight: 600; color: var(--sf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-xfer-pv-end .sf-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-xfer-pv-end .sf-sub .sf-mono { font-size: 11.5px; }
.pg-xfer-pv-link { display: flex; align-items: center; gap: 0.5rem; min-width: 120px; }
.pg-xfer-pv-link .line { flex: 1; height: 1px; min-width: 28px; background: var(--sf-border-strong); }
.pg-xfer-pv-meta { justify-content: flex-start; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.pg-xfer-pv-meta > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.pg-xfer-pv-meta i { color: var(--sf-faint); font-size: 11px; }
.pg-xfer-pv-meta b { color: var(--sf-text-2); font-weight: 500; }

/* Report */
.pg-xfer-pv-kpis .sf-stat .label { padding-right: 44px; }
.sf-empty.pg-xfer-pv-wait .ico {
    background: var(--sf-warning-soft); border-color: var(--sf-warning-border); color: var(--sf-warning-text);
    box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.05);
}
.pg-xfer-pv-dist { padding: 1rem 1.25rem; border-bottom: 1px solid var(--sf-border); }
.sf-progress.pg-xfer-pv-bar { display: flex; gap: 2px; height: 8px; }
.pg-xfer-pv-bar > span { flex: none; width: var(--w, 0); }
.pg-xfer-pv-bar > .is-create, .pg-xfer-pv-legend .is-create::before { background: var(--sf-success); }
.pg-xfer-pv-bar > .is-update, .pg-xfer-pv-legend .is-update::before { background: var(--sf-accent); }
.pg-xfer-pv-bar > .is-skip, .pg-xfer-pv-legend .is-skip::before { background: var(--sf-border-hover); }
.pg-xfer-pv-bar > .is-fail, .pg-xfer-pv-legend .is-fail::before { background: var(--sf-danger); }
.pg-xfer-pv-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-top: 0.7rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-xfer-pv-legend > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.pg-xfer-pv-legend > span::before { content: ''; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.pg-xfer-pv-legend b { color: var(--sf-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pg-xfer-pv-table .badge i { font-size: 9px; }
.pg-xfer-pv-table .cell-main { display: block; }
.pg-xfer-pv-table .sf-sub.sf-mono { font-size: 11.5px; }
.pg-xfer-pv-table .pg-xfer-pv-strike { display: block; font-size: var(--sf-fs-xs); color: var(--sf-muted); text-decoration: line-through; }
.pg-xfer-pv-err .title { margin-bottom: 0.15rem; }
.pg-xfer-pv-err div { overflow-wrap: anywhere; }

@media (max-width: 1199px) {
    .pg-xfer-pv-route { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
    .pg-xfer-pv-end.is-dest { justify-content: flex-start; text-align: left; flex-direction: row; }
    .pg-xfer-pv-link { min-width: 0; padding-left: 13px; }
    .pg-xfer-pv-link .line { display: none; }
    .pg-xfer-pv-link .sf-icon-chip { transform: rotate(90deg); }
}

/* from resources/views/transfers/index.blade.php */
/* Transfers list — KPI strip + "Your transfers" table (rendered by the
   transfer-runs component). The live panel carries its own block. */
.pg-xfer-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-xfer-kpis .sf-stat .label { padding-right: 44px; }

.pg-xfer-panel .pg-xfer-clear { color: var(--sf-danger-text); background: transparent; border-color: rgba(248, 113, 113, 0.55); }
.pg-xfer-panel .pg-xfer-clear:hover, .pg-xfer-panel .pg-xfer-clear:focus-visible { color: #fff; background: var(--sf-danger-solid); border-color: var(--sf-danger-solid); }
.pg-xfer-flash { padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--sf-border); }
.pg-xfer-flash .sf-alert { margin: 0; }

.pg-xfer-table .pg-xfer-chev-col { width: 44px; padding-right: 0; }
.pg-xfer-table tr.pg-xfer-row { cursor: pointer; }
.pg-xfer-rchev {
    width: 22px; height: 22px; border-radius: var(--sf-r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sf-faint); font-size: 10px; transition: transform var(--sf-ease), color var(--sf-ease), background-color var(--sf-ease);
}
.pg-xfer-table tr.pg-xfer-row:hover .pg-xfer-rchev { color: var(--sf-text-2); background: var(--sf-surface-3); }
.pg-xfer-table tr.pg-xfer-row.open .pg-xfer-rchev { transform: rotate(90deg); color: var(--sf-accent-text); }
.pg-xfer-table tr.pg-xfer-row.open td { background: var(--sf-surface-hover); border-bottom-color: transparent; }
.pg-xfer-th-arrow { font-size: 10px; margin: 0 0.2rem; opacity: 0.8; }

/* Source -> destinations cell. */
.pg-xfer-path { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.pg-xfer-path .cell-main { gap: 0.6rem; }
.pg-xfer-path > .pg-xfer-arrow { color: var(--sf-faint); font-size: 12px; flex: none; }
.pg-xfer-cell-text { min-width: 0; }
.pg-xfer-cell-text .primary { display: block; }
.pg-xfer-cell-text .sf-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15rem; }
.pg-xfer-stack { display: inline-flex; flex: none; }
.pg-xfer-stack .sf-logo { box-shadow: 0 0 0 2px var(--sf-surface); }
.pg-xfer-stack .sf-logo + .sf-logo { margin-left: -8px; }
.pg-xfer-name { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.45rem; max-width: 32rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-xfer-name i { font-size: 10px; color: var(--sf-faint); }
.pg-xfer-config { max-width: 16rem; }
.pg-xfer-config .sf-sub i { font-size: 10px; margin-left: 0.15rem; }
.pg-xfer-last { white-space: nowrap; }
.pg-xfer-last .sf-metrics { flex-wrap: nowrap; gap: 0.35rem 0.8rem; }
.pg-xfer-last .sf-sub { margin-top: 0.3rem; }
.pg-xfer-config-inline { display: none; }
.pg-xfer-panel .pg-xfer-del { color: var(--sf-muted); }
.pg-xfer-panel .pg-xfer-del:hover { color: var(--sf-danger-text); background: var(--sf-danger-soft); }

/* Expanded row: one card per destination store. */
.sf-panel .pg-xfer-table tr.pg-xfer-detail > td { padding: 0.2rem 1.25rem 1.25rem calc(44px + 1.25rem); background: var(--sf-surface-hover); }
.pg-xfer-table tbody tr.pg-xfer-detail:hover > td { background: var(--sf-surface-hover); }
.pg-xfer-dlabel { display: block; margin-bottom: 0.5rem; font-size: var(--sf-fs-xs); font-weight: 500; color: var(--sf-muted); }
.pg-xfer-dests { display: flex; flex-direction: column; gap: 0.6rem; }
.pg-xfer-dest { padding: 0.8rem 0.95rem; background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-r); contain: inline-size; }
.pg-xfer-dest-row { display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; }
.pg-xfer-dest-name { min-width: 11rem; }
.pg-xfer-when { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-xfer-when i { font-size: 11px; color: var(--sf-faint); }
.pg-xfer-remove { margin-left: auto; }
.pg-xfer-error {
    display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.65rem; padding: 0.55rem 0.75rem;
    background: var(--sf-danger-soft); border: 1px solid var(--sf-danger-border); border-radius: var(--sf-r-sm);
    font-size: var(--sf-fs-xs); color: var(--sf-danger-text); overflow-wrap: anywhere;
}
.pg-xfer-error i { margin-top: 2px; }
.pg-xfer-dest .pg-xfer-log { margin: 0.65rem 0 0; }

.pg-xfer-notice { align-items: center; }

/* The runs component root is display:contents so its KPI strip can sit
   above the live panel while both components stay independent. */
.pg-xfer-flow { display: flex; flex-direction: column; }
.pg-xfer-flow > .pg-xfer-runs { display: contents; }
.pg-xfer-flow .pg-xfer-kpis { order: -1; }

@media (max-width: 1199px) {
    .pg-xfer-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-xfer-path { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
    .pg-xfer-path > .pg-xfer-arrow { transform: rotate(90deg); margin-left: 9px; }
    .pg-xfer-cell-text .sf-sub { max-width: 11rem; }
    .pg-xfer-last .sf-metrics { flex-wrap: wrap; }
    .pg-xfer-last { white-space: normal; min-width: 8rem; }
    /* Fold the Configuration column under the route; row actions go icon-only. */
    .pg-xfer-table .pg-xfer-col-config { display: none; }
    .pg-xfer-table .pg-xfer-config-inline { display: block; max-width: 16rem; margin-top: 0.4rem; }
    .pg-xfer-table .pg-xfer-btn-text { display: none; }
    .pg-xfer-table td.actions .btn-sm { width: var(--sf-h-sm); padding: 0; }
}
@media (max-width: 767px) {
    .pg-xfer-kpis { grid-template-columns: minmax(0, 1fr); }
    .sf-panel .pg-xfer-table tr.pg-xfer-detail > td { padding-left: 1.25rem; }
}

/* from resources/views/transfers/create.blade.php */
/* New transfer wizard — store pickers, field cards, category map table,
   match-mode cards and the final action bar. */
/* Full width, like the other pages. */
.pg-xfer-wrap { width: 100%; }

/* Store picker cards (source = radio, destinations = checkbox). The JS
   toggles .is-checked / .is-disabled / .is-source on the label. */
/* auto-fit: the cards share the whole row (no empty tracks on wide screens). */
.pg-xfer-stores { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sf-option.pg-xfer-store { flex-direction: row; align-items: center; gap: 0.85rem; padding: 0.95rem 2.6rem 0.95rem 0.95rem; min-width: 0; }
.pg-xfer-store .sf-logo { transition: border-color var(--sf-ease), box-shadow var(--sf-ease); }
.pg-xfer-store:has(input:checked) .sf-logo {
    border-color: color-mix(in srgb, var(--pc) 50%, var(--sf-border-strong));
    box-shadow: var(--sf-hairline), 0 0 0 3px color-mix(in srgb, var(--pc) 14%, transparent);
}
.pg-xfer-store-text { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; flex: 1; }
.pg-xfer-store-text .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--sf-fs); }
.pg-xfer-url { font-family: var(--sf-mono); font-size: 11.5px; color: var(--sf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-xfer-plat { font-size: var(--sf-fs-2xs); color: var(--sf-faint); font-weight: 500; }
.sf-option.pg-xfer-store.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; }
.pg-xfer-src-tag {
    display: none; position: absolute; top: 0.7rem; right: 0.7rem;
    align-items: center; gap: 0.3rem; height: 20px; padding: 0 0.45rem; border-radius: 999px;
    font-size: 10.5px; font-weight: 500; color: var(--sf-text-2);
    background: var(--sf-surface-3); border: 1px solid var(--sf-border-strong);
}
.pg-xfer-src-tag i { font-size: 9px; }
.pg-xfer-store.is-source .pg-xfer-src-tag { display: inline-flex; }
.pg-xfer-store.is-source > input { visibility: hidden; }
.pg-xfer-note { display: flex; align-items: center; gap: 0.45rem; margin: 0.9rem 0 0; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-xfer-note i { color: var(--sf-faint); font-size: 11px; }

/* Fields to copy — check cards with an icon chip on the right. */
.pg-xfer-fields { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.sf-check-card.pg-xfer-field { align-items: center; padding: 0.85rem 0.9rem; }
.pg-xfer-field > span:not(.sf-icon-chip) { flex: 1; min-width: 0; }
.pg-xfer-field .sf-icon-chip { transition: color var(--sf-ease), background-color var(--sf-ease), border-color var(--sf-ease); }
.pg-xfer-field:has(input:checked) .sf-icon-chip { background: var(--sf-accent-soft); border-color: var(--sf-accent-border); color: var(--sf-accent-text); }
.pg-xfer-lead { margin: 0 0 1rem; font-size: var(--sf-fs-sm); color: var(--sf-muted); max-width: 90ch; }

/* Collapsible panels (<details>): the summary is the panel head. */
.pg-xfer-fold > summary { list-style: none; cursor: pointer; user-select: none; }
.pg-xfer-fold > summary::-webkit-details-marker { display: none; }
.pg-xfer-fold:not([open]) > summary.sf-panel-head { border-bottom: 0; border-radius: var(--sf-r-lg); }
.pg-xfer-chev {
    width: 28px; height: 28px; border-radius: var(--sf-r-sm); flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sf-muted); font-size: 11px; transition: transform var(--sf-ease), background-color var(--sf-ease), color var(--sf-ease);
}
.pg-xfer-fold > summary:hover .pg-xfer-chev { background: var(--sf-surface-3); color: var(--sf-text); }
.pg-xfer-fold[open] > summary .pg-xfer-chev { transform: rotate(180deg); }

/* Category map — one table per destination store (built by the JS). */
.pg-xfer-map-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pg-xfer-map-bar .pg-xfer-lead { margin: 0; flex: 1; min-width: 260px; }
.pg-xfer-map { border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg); background: var(--sf-surface-2); overflow: hidden; }
.pg-xfer-map + .pg-xfer-map { margin-top: 0.9rem; }
.pg-xfer-map-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--sf-border); background: var(--sf-surface); }
.pg-xfer-map-head .name { font-size: var(--sf-fs-sm); font-weight: 600; color: var(--sf-text); }
.pg-xfer-map-head .sf-sub { margin-top: 0; }
.pg-xfer-map-head .badge { margin-left: auto; }
.pg-xfer-map-table { table-layout: fixed; }
.pg-xfer-map-table th { padding: 0.55rem 1rem; }
.pg-xfer-map-table td { padding: 0.45rem 1rem; }
.pg-xfer-map-table .pg-xfer-map-arrow { width: 44px; padding-left: 0; padding-right: 0; text-align: center; color: var(--sf-faint); font-size: 12px; }
.pg-xfer-map-table td.primary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Compact controls in the map rows (the global form-input rule outranks .sf-input.sm). */
.pg-xfer-map-table .sf-input.sm { min-height: var(--sf-h-sm) !important; padding: 0.25rem 0.55rem !important; font-size: var(--sf-fs-xs) !important; }
.pg-xfer-map-table select.sf-input.sm { padding-right: 2rem !important; }
.pg-xfer-map-table .pg-xfer-map-src { width: 40%; }
.pg-xfer-map-empty, .pg-xfer-map-loading { display: flex; align-items: center; gap: 0.5rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-xfer-map-empty { padding: 0.7rem 1rem; border-bottom: 1px solid var(--sf-border); }
.pg-xfer-map-empty i { color: var(--sf-warning-text); }
.pg-xfer-map-loading { padding: 0.9rem 1rem; border: 1px dashed var(--sf-border-strong); border-radius: var(--sf-r); color: var(--sf-accent-text); }
.pg-xfer-map-none { margin: 0; }

/* Specifications. */
.pg-xfer-spec-toggle { padding-top: 0; }
.pg-xfer-spec-toggle .title { display: block; margin: 0; cursor: pointer; }
.pg-xfer-spec-keys { margin-top: 0.4rem; }
.pg-xfer-spec-keys .sf-check-card { padding: 0.6rem 0.75rem; }
.pg-xfer-spec-empty { margin: 1rem 0 0; }

/* Options: match-mode cards + name / schedule fields. */
.pg-xfer-modes { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 1.25rem; }
.pg-xfer-modes .sf-option { padding: 1rem 2.4rem 1rem 1rem; gap: 0.5rem; }
.pg-xfer-modes .sf-option .sf-icon-chip { margin-bottom: 0.15rem; }
.pg-xfer-modes .sf-option:has(input:checked) .sf-icon-chip { background: var(--sf-accent-soft); border-color: var(--sf-accent-border); color: var(--sf-accent-text); }
.pg-xfer-label { margin: 0 0 0.6rem !important; }
.pg-xfer-opts { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pg-xfer-opts .sf-field { margin-bottom: 0; }

/* Final action bar. */
.pg-xfer-submit { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; }
.pg-xfer-summary { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; min-width: 0; font-size: var(--sf-fs-sm); color: var(--sf-muted); }
.pg-xfer-summary b { color: var(--sf-text); font-weight: 600; }
.pg-xfer-summary .pg-xfer-arrow { color: var(--sf-faint); font-size: 12px; }
.pg-xfer-summary .sf-icon-chip { width: 36px; height: 36px; font-size: 14px; }

@media (max-width: 767px) {
    .pg-xfer-submit .sf-btn-row { width: 100%; justify-content: flex-end; }
}

/* from resources/views/components/⚡transfer-live.blade.php */
/* Live processing panel (Transfers + Scheduled syncs pages). */
.pg-xfer-live .sf-panel-title .sf-status { font-weight: 500; }
.pg-xfer-queue {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.3rem 0.7rem; min-height: var(--sf-h);
    background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r);
    font-size: var(--sf-fs-xs); color: var(--sf-muted);
}
.pg-xfer-queue > i { color: var(--sf-warning-text); font-size: 11px; }
.pg-xfer-hint { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--sf-warning-text); }
.pg-xfer-hint i { font-size: 11px; }
.pg-xfer-hint code { font-size: 11px; padding: 0 0.3rem; }

.sf-empty.pg-xfer-idle { display: flex; align-items: center; gap: 0.9rem; text-align: left; padding: 1.05rem 1.25rem; }
.sf-empty.pg-xfer-idle .ico {
    flex: none; width: 38px; height: 38px; margin: 0; font-size: 13px;
    background: var(--sf-success-soft); border-color: var(--sf-success-border); color: var(--sf-success-text);
    box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.05);
}
.sf-empty.pg-xfer-idle .title { font-size: var(--sf-fs); margin-bottom: 0.1rem; }
.sf-empty.pg-xfer-idle p { margin: 0; max-width: none; font-size: var(--sf-fs-xs); }

.pg-xfer-item { padding: 1rem 1.25rem; border-bottom: 1px solid var(--sf-border); }
.pg-xfer-item:last-child { border-bottom: 0; }
.pg-xfer-item-row { display: flex; align-items: center; gap: 0.9rem; }
.pg-xfer-item-row > .sf-icon-chip { width: 36px; height: 36px; font-size: 14px; }
.pg-xfer-main { flex: 1; min-width: 0; }
.pg-xfer-route { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: var(--sf-fs); font-weight: 550; color: var(--sf-text); }
.pg-xfer-arrow { color: var(--sf-faint); font-size: 12px; flex: none; }
.sf-logo.pg-xfer-xs { width: 22px; height: 22px; border-radius: 6px; font-size: 10px; }
.pg-xfer-meta { margin-top: 0.4rem; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.pg-xfer-nums { display: flex; gap: 0.5rem; flex: none; }
.pg-xfer-nums .sf-tile-stat { min-width: 84px; padding: 0.45rem 0.75rem; }
.pg-xfer-nums .sf-tile-stat .value { margin: 0; font-size: var(--sf-fs-md); line-height: 1.25; }
.pg-xfer-nums .sf-tile-stat .label { margin-top: 0.05rem; }

/* Outcome split of the processed products (new / updated / failed / other). */
.sf-progress.pg-xfer-split { display: flex; gap: 2px; margin: 0.85rem 0 0 calc(36px + 0.9rem); }
.pg-xfer-split > span { flex: none; width: var(--w, 0); }
.pg-xfer-split > .is-new { background: var(--sf-success); }
.pg-xfer-split > .is-upd { background: var(--sf-accent); }
.pg-xfer-split > .is-fail { background: var(--sf-danger); }
.pg-xfer-split > .is-other { background: var(--sf-border-hover); }

/* Per-product log console. Line colour comes from --lc (set inline). */
.pg-xfer-log {
    margin: 0.75rem 0 0 calc(36px + 0.9rem); padding: 0.55rem 0.8rem; max-height: 11.5rem; overflow: auto;
    background: var(--sf-inset); border: 1px solid var(--sf-border); border-radius: var(--sf-r);
    font-family: var(--sf-mono); font-size: 11.5px; line-height: 1.65;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
.pg-xfer-log-line { display: flex; gap: 0.75rem; white-space: nowrap; }
.pg-xfer-log-line .t { flex: none; color: var(--sf-faint); }
.pg-xfer-log-line .st { flex: none; width: 5rem; font-weight: 600; color: var(--lc, var(--sf-text-2)); }
.pg-xfer-log-line .sku { flex: none; width: 9rem; overflow: hidden; text-overflow: ellipsis; color: var(--sf-muted); }
.pg-xfer-log-line .nm { flex: 1 1 12rem; min-width: 5rem; overflow: hidden; text-overflow: ellipsis; color: var(--sf-text-2); }
.pg-xfer-log-line .err { flex: 0 1 24rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--sf-danger-text); }

@media (max-width: 1199px) {
    .pg-xfer-item-row { flex-wrap: wrap; }
    .pg-xfer-nums { flex: 1 1 100%; padding-left: calc(36px + 0.9rem); }
}
@media (max-width: 767px) {
    .pg-xfer-nums { padding-left: 0; flex-wrap: wrap; }
    .sf-progress.pg-xfer-split, .pg-xfer-log { margin-left: 0; }
}

/* ==== Audit fixes 2026-09 (batch 3): plans, team, users edit/directory, transfer preview ==== */
/* ---- page: plans (C77) — "Unlimited" switch under each limit field ---- */
.sf-field .sf-check.pg-plans-unlim { margin-top: 0.45rem !important; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
.sf-field .sf-check.pg-plans-unlim:has(input:checked) { color: var(--sf-success-text); }

/* ---- page: acct / team (C113) — remove-member button in the members table ---- */
.pg-acct-row-form { display: inline-flex; margin: 0; }
.btn.pg-acct-danger { color: var(--sf-muted); }
.btn.pg-acct-danger:hover { color: var(--sf-danger-text); background: var(--sf-danger-soft); }

/* ---- page: users edit (C102) — feed access mode (all / only selected) ---- */
.pg-users-edit-access { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.pg-users-edit-access .sf-option .desc { display: block; margin-top: 0.2rem; }
.sf-alert.pg-users-edit-nofeeds { margin: 0.9rem 0 0; }
.pg-users-edit-feedset:disabled .sf-check-card { opacity: 0.55; cursor: not-allowed; }
.pg-users-edit-feedset:disabled .sf-check-card:hover { border-color: var(--sf-border); }

/* ---- page: users directory (C113) — org names link to the member's edit page in that org ---- */
.pg-users-dir-org a { color: inherit; }
.pg-users-dir-org a:hover { color: var(--sf-accent-text); text-decoration: none; }


/* Transfer preview: retry buttons under the "not started / stopped reporting progress" notice (⚡transfer-preview) */
.pg-xfer-pv-retry { margin-top: 0.6rem; }

/* ==== Audit fixes 2026-09 (batch 4): billing details, invoice totals, issuer settings, scheduled syncs ==== */
/* from resources/views/settings/billing-details/edit.blade.php */
/* Settings -> Billing details: form + VAT explainer side column. */
.pg-bill-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.pg-bill-layout > * { min-width: 0; }
.pg-bill-layout > form > .sf-panel { margin-bottom: 0; }
.pg-bill-foot-note { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
/* CUI first, on its own row: the ANAF lookup fills the fields below it. */
.sf-form-grid > .pg-bill-cui-field { grid-column: 1 / -1; }
.pg-bill-cui-field > .sf-help { max-width: 72ch; }
.pg-bill-cui { display: flex; gap: 0.5rem; max-width: 520px; }

/* ---- page: customer → edit profile (resources/views/customer/profile) */
.pg-profile { display: flex; flex-direction: column; gap: 1.25rem; max-width: 980px; }
.pg-profile > .sf-panel { margin-bottom: 0; }
.pg-profile .pg-pw-checker { margin: 0.25rem 0 0; }
.pg-profile-danger { border-color: var(--sf-danger-border); }
.pg-profile-list { margin: 0 0 1.1rem; padding-left: 1.1rem; font-size: var(--sf-fs-sm); line-height: 1.6; color: var(--sf-text-2); }
.pg-profile-list li + li { margin-top: 0.3rem; }
.pg-profile-blocker { display: block; margin-top: 0.2rem; }
.pg-profile-confirm { margin: 0.25rem 0 1rem !important; }
.pg-profile-danger-actions { display: flex; justify-content: flex-end; }
.pg-bill-cui > input { flex: 1; min-width: 0; }
.pg-bill-cui > .btn { flex: none; }
.pg-bill-anaf-status { display: block; font-size: var(--sf-fs-xs); }
.pg-bill-anaf-status:empty { display: none; }
.pg-bill-anaf-status:not(:empty) { margin-top: 0.4rem; }
.pg-bill-anaf-status.is-busy { color: var(--sf-muted); }
.pg-bill-anaf-status.is-ok { color: var(--sf-success-text); }
.pg-bill-anaf-status.is-warn { color: var(--sf-warning-text); }
.pg-bill-anaf-status.is-error { color: var(--sf-danger-text); }
@media (max-width: 520px) { .pg-bill-cui { flex-direction: column; } }
.pg-bill-aside > .sf-panel { margin-bottom: 0; }
.pg-bill-aside .sf-list-item .badge { white-space: nowrap; }
.pg-bill-aside-foot { justify-content: flex-start; font-size: var(--sf-fs-xs); color: var(--sf-muted); line-height: 1.5; }
.pg-bill-updated { display: flex; align-items: center; gap: 0.4rem; margin: 0.75rem 0 0; font-size: var(--sf-fs-xs); color: var(--sf-muted); }
@media (max-width: 1100px) { .pg-bill-layout { grid-template-columns: minmax(0, 1fr); } }

/* from resources/views/invoices/partials/totals.blade.php */
/* Invoice pages (client + admin): VAT in RON row and the VAT mention. */
.pg-inv-totals dl > .pg-inv-ron { margin-top: 0.35rem; font-size: var(--sf-fs-xs); }
.pg-inv-totals .pg-inv-ron dt .sf-sub { margin-top: 0.1rem; }
.pg-inv-vat-note {
    display: flex; align-items: flex-start; gap: 0.5rem; margin: 0 1.75rem 1.5rem; padding: 0.75rem 0.95rem;
    font-size: var(--sf-fs-xs); line-height: 1.5; color: var(--sf-text-2);
    background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--sf-r);
}
.pg-inv-vat-note i { margin-top: 0.15rem; color: var(--sf-info-text); }
@media (max-width: 640px) { .pg-inv-vat-note { margin-left: 1.1rem; margin-right: 1.1rem; } }

/* from resources/views/settings/invoices/settings.blade.php */
/* Second panel (issuer legal data) under the numbering form: keep a gap once
   the stacked layout (< 1200px) zeroes the panel margins. */
@media (max-width: 1199px) { .pg-anaf-num-main > form + form { display: block; margin-top: 1.25rem; } }

/* Scheduled syncs: "Skipped (plan limit)" pill under the last-run time */
.pg-sched-skip { margin-top: 0.35rem; max-width: 100%; }

/* ==== Audit fixes 2026-09 (batch 5): admin invoice ANAF reasons + BNR rate form, product website picker ==== */
/* Admin invoice page (settings/invoices/show): why the invoice can't go to ANAF + Record BNR rate form */
.pg-inv-anaf-reasons { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.pg-inv-anaf-reasons li { display: flex; align-items: flex-start; gap: 0.45rem; font-size: var(--sf-fs-xs); line-height: 1.45; color: var(--sf-warning-text); }
.pg-inv-anaf-reasons li > i { flex: none; margin-top: 2px; font-size: 11px; }
.pg-inv-anaf-reasons + .pg-inv-aside-note { margin-top: 0.6rem; }
.pg-inv-aside .pg-inv-anaf-reasons + .sf-btn-row,
.pg-inv-aside .pg-inv-bnr + .sf-btn-row { margin-top: 1rem; }
.pg-inv-bnr { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--sf-border); }
.pg-inv-bnr .sf-field { margin-bottom: 0.75rem; }
.pg-inv-bnr .sf-btn-row > button { margin: 0; }

/* Product detail: website picker for the "after rules" price preview (?from=). */
.pg-prod-sites { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.75rem; }
.pg-prod-sites-label { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--sf-muted); font-size: var(--sf-fs-xs); }
.pg-prod-sites-label i { font-size: 11px; opacity: 0.85; }
.pg-prod-sites-seg { flex-wrap: wrap; max-width: 100%; }
.pg-prod-sites-seg a { white-space: nowrap; text-decoration: none; }

/* ==== Plan capabilities (config/plans.php): locked pages, notes and sections ==== */
.pg-plan-locked .sf-empty .ico { color: var(--sf-muted); }
.pg-plan-locked .sf-empty p { max-width: 52ch; }
.sf-alert.pg-plan-note { align-items: center; margin-bottom: 0.9rem; }
.sf-alert.pg-plan-note > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; }
.sf-alert.pg-plan-note a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.sf-alert.pg-plan-note a:hover { text-decoration: none; }
[data-plan-locked] { opacity: 0.55; filter: grayscale(0.35); user-select: none; }
.pg-xfer-plan { margin-top: 0.9rem; }
.pg-xfer-plan .sf-alert.pg-plan-note { margin-bottom: 0; }
.sf-help a { font-weight: 600; }

/* ==== "View as client" (staff preview of plan limits, App\Support\ClientView) ==== */
/* Menu row as a form button (.btn keeps it out of the blanket form-button rule). */
.user-dropdown button.um-item-btn {
    width: 100%; height: auto; justify-content: flex-start; gap: 0.55rem; padding: 0.55rem 0.7rem;
    border: 0; border-radius: 8px; background: transparent; color: var(--sf-text-2);
    font-size: 0.86rem; font-weight: 500; box-shadow: none;
}
.user-dropdown button.um-item-btn:hover { background: rgba(255, 255, 255, 0.05); color: var(--sf-text); }
.topbar .user .who .um-plan i { font-size: 9px; margin-right: 0.25rem; }
.pg-cv-wrap { padding-bottom: 0; }
.pg-cv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex: none; }
.pg-cv-form { display: flex; align-items: center; gap: 0.4rem; }
.pg-cv-form select { width: auto; min-width: 11rem; }
@media (max-width: 768px) {
    .pg-cv { flex-wrap: wrap; }
    .pg-cv-actions { width: 100%; }
    .pg-cv-form { flex: 1 1 auto; }
    .pg-cv-form select { flex: 1 1 auto; min-width: 0; }
}

/* ==== Sidebar: pages the company's plan does not include (lock + plan tooltip) ==== */
.sidebar nav a.is-locked:not(.active):not(:hover) { color: #6e7383; }
.sidebar nav a.is-locked:not(.active):not(:hover) svg { opacity: 0.7; }
.sidebar nav a .nav-lock {
    margin-left: auto; flex: none; width: 20px; height: 20px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px;
    color: var(--sf-warning-text); background: var(--sf-warning-soft); border: 1px solid var(--sf-warning-border);
}
.sidebar nav a.active .nav-lock, .sidebar nav a:hover .nav-lock { color: #fff; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.22); }
@media (max-width: 900px) {
    /* Labels are hidden: the lock sits on the icon's corner. */
    .sidebar nav a .nav-lock { position: absolute; top: 2px; left: calc(0.85rem + 11px); width: 15px; height: 15px; font-size: 7.5px; border-radius: 5px; margin: 0; }
}

/* ==== Stores past the plan's store limit (offline) + sidebar plan badge ==== */
.sf-alert.pg-stores-plan > div { display: flex; flex-direction: column; gap: 0.2rem; }
.sf-alert.pg-stores-plan a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; align-self: flex-start; }
.sf-tile.is-plan-offline { border-color: var(--sf-warning-border); }
.sf-tile.is-plan-offline .sf-tile-head .sf-logo, .sf-tile.is-plan-offline .pg-stores-stats { opacity: 0.55; }
.pg-stores-offline {
    display: flex; gap: 0.45rem; align-items: flex-start; margin-top: 0.75rem; padding: 0.5rem 0.65rem;
    border-radius: var(--sf-r); background: var(--sf-warning-soft); border: 1px solid var(--sf-warning-border);
    color: var(--sf-warning-text); font-size: var(--sf-fs-xs); line-height: 1.45;
}
.pg-stores-offline i { margin-top: 2px; font-size: 10px; flex: none; }
.sidebar nav a .nav-plan {
    margin-left: auto; flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 0.45rem;
    border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; line-height: 1;
    color: color-mix(in srgb, var(--pc) 70%, #fff);
    background: color-mix(in srgb, var(--pc) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc) 42%, transparent);
}
.sidebar nav a.active .nav-plan, .sidebar nav a:hover .nav-plan { color: #fff; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.24); }

/* ---- Administration -> Beta access + Users -> Add user (company choice) ---- */
.pg-beta-max { max-width: 320px; margin-top: 1rem; }
.pg-beta-actions { margin-top: 1rem; }
.pg-users-edit-company { margin-top: 1rem; }

/* ---- Transfers / scheduled syncs: price markup (transfers/partials/pricing) ---- */
.pg-xfer-price { margin-top: 1rem; }
.pg-xfer-price-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pg-xfer-price-example {
    display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.1rem 0 1.1rem; padding: 0.45rem 0.75rem;
    border-radius: var(--sf-r); background: var(--sf-success-soft); border: 1px solid var(--sf-success-border);
    color: var(--sf-success-text); font-size: var(--sf-fs-sm); font-variant-numeric: tabular-nums;
}
.pg-xfer-price-rules { border-top: 1px solid var(--sf-border); padding-top: 1rem; }
.pg-xfer-price-rules-head { margin-bottom: 0.75rem; }
.pg-xfer-price-rules-head .title { font-weight: 600; color: var(--sf-text); }
.pg-xfer-price-rules-head .title i { color: var(--sf-muted); margin-right: 0.35rem; }
.pg-xfer-price-rules-head .desc { font-size: var(--sf-fs-xs); color: var(--sf-muted); margin-top: 0.2rem; max-width: 90ch; }
.pg-xfer-price-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.pg-xfer-price-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; align-items: center; padding: 0.55rem 0.65rem;
    border: 1px solid var(--sf-border); border-radius: var(--sf-r); background: var(--sf-surface-2);
}
.pg-xfer-price-row > input, .pg-xfer-price-row > select { min-width: 0; }
.pg-xfer-price-if { grid-column: 1 / -1; }
.pg-xfer-price-if, .pg-xfer-price-max > span { font-size: var(--sf-fs-sm); color: var(--sf-muted); }
.pg-xfer-price-max { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.5rem; grid-column: 1 / -1; }
.pg-xfer-price-arrow { display: none; color: var(--sf-muted); text-align: center; }
.pg-xfer-price-row [data-sf-repeat-remove] { grid-column: 1 / -1; justify-self: end; }
/* Wide screens: one line per range. Fixed columns (by position, so a hidden
   "and max" cell keeps its place): label, condition, price, and-max, arrow,
   markup, unit, remove. */
@media (min-width: 760px) {
    .pg-xfer-price-row { grid-template-columns: auto minmax(0, 120px) minmax(0, 1fr) minmax(0, 1.3fr) auto minmax(0, 1fr) minmax(0, 88px) var(--sf-h); }
    .pg-xfer-price-row > * { grid-row: 1; }
    .pg-xfer-price-row > :nth-child(1) { grid-column: 1; }
    .pg-xfer-price-row > :nth-child(2) { grid-column: 2; }
    .pg-xfer-price-row > :nth-child(3) { grid-column: 3; }
    .pg-xfer-price-row > :nth-child(4) { grid-column: 4; }
    .pg-xfer-price-row > :nth-child(5) { grid-column: 5; display: block; }
    .pg-xfer-price-row > :nth-child(6) { grid-column: 6; }
    .pg-xfer-price-row > :nth-child(7) { grid-column: 7; }
    .pg-xfer-price-row > :nth-child(8) { grid-column: 8; justify-self: center; }
}
.pg-xfer-price-empty { font-size: var(--sf-fs-sm); color: var(--sf-muted); margin-bottom: 0.75rem; }
.pg-xfer-price-note { margin-top: 1rem; }
.pg-xfer-price-note i { margin-right: 0.3rem; }
.pg-xfer-pricing-badge { white-space: nowrap; }