html,
body {
    margin: 0;
    padding: 0;
    font-family: var(--primary-font-family);
    color: var(--text-primary);
    background: var(--surface-page);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

:where(.content-body, .rich-text, .tenant-shell__content, .cfg-content) a:where(:not([class]), .content-link),
a.content-link {
    color: var(--link-color);
    text-decoration: none;
}

:where(.content-body, .rich-text, .tenant-shell__content, .cfg-content) a:where(:not([class]), .content-link):hover,
a.content-link:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

:where(.tenant-shell__nav, .tenant-shell__header-nav, .tenant-shell__user-menu, .cfg-rail, .cfg-campaign-tabs) a,
:where(.tenant-shell__nav, .tenant-shell__header-nav, .tenant-shell__user-menu, .cfg-rail, .cfg-campaign-tabs) a:hover,
a.card-link,
a.card-link:hover {
    text-decoration: none;
}

a.card-link {
    color: inherit;
}

a.card-link:hover {
    color: inherit;
}

.tenant-shell__kpi-link {
    display: block;
    min-width: 0;
}

.tenant-shell__kpi-link .column {
    height: 100%;
}

.btn {
    font-family: var(--primary-font-family);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2, 0.5rem);
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.btn i.bx {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.btn i.fa {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.btn i::before {
    display: block;
    line-height: 1;
}

.btn-sm i.bx {
    font-size: 1.1rem;
}

.btn-sm i.fa {
    font-size: 0.9rem;
}

.btn:focus-visible,
.cfg-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.22rem var(--focus-ring);
}

.btn-primary {
    background-color: var(--button-primary-bg);
    border-color: var(--button-primary-border);
    color: var(--button-primary-text);
    box-shadow: var(--shadow-1);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible {
    background-color: var(--button-primary-hover-bg);
    border-color: var(--button-primary-hover-border);
    color: var(--button-primary-hover-text);
    box-shadow: var(--shadow-2, var(--shadow-raised));
    filter: brightness(0.98);
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--button-primary-hover-bg);
    border-color: var(--button-primary-hover-border);
    color: var(--button-primary-hover-text);
}

.btn-primary:disabled,
.btn-primary.disabled {
    opacity: 0.65;
    pointer-events: none;
}

.tenant-shell__btn-ghost {
    background: rgba(0, 113, 121, 0.06);
    border: 1px solid rgba(0, 113, 121, 0.16);
    color: var(--brand-primary);
}

.tenant-shell__btn-ghost:hover {
    background: rgba(0, 113, 121, 0.10);
}

.btn-secondary {
    background-color: var(--button-neutral-bg);
    border-color: var(--button-neutral-border);
    color: var(--button-neutral-text);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:focus-visible {
    background-color: var(--button-neutral-hover-bg);
    border-color: var(--button-neutral-hover-border);
    color: var(--button-neutral-hover-text);
}

.btn-secondary:active,
.btn-secondary.active {
    background-color: var(--button-neutral-hover-bg);
    border-color: var(--button-neutral-hover-border);
    color: var(--button-neutral-hover-text);
}

.btn-secondary:disabled,
.btn-secondary.disabled {
    opacity: 0.65;
    pointer-events: none;
}

.btn-outline-primary {
    background-color: var(--button-outline-bg);
    border-color: var(--button-outline-border);
    color: var(--button-outline-text);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
    background-color: var(--button-outline-hover-bg);
    border-color: var(--button-outline-hover-border);
    color: var(--button-outline-hover-text);
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--button-outline-hover-bg);
    border-color: var(--button-outline-hover-border);
    color: var(--button-outline-hover-text);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    opacity: 0.65;
    pointer-events: none;
}

.btn-outline-secondary {
    background-color: var(--button-neutral-outline-bg);
    border-color: var(--button-neutral-outline-border);
    color: var(--button-neutral-outline-text);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible {
    background-color: var(--button-neutral-outline-hover-bg);
    border-color: var(--button-neutral-outline-hover-border);
    color: var(--button-neutral-outline-hover-text);
}

.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
    background-color: var(--button-neutral-hover-bg);
    border-color: var(--button-neutral-hover-border);
    color: var(--button-neutral-hover-text);
}

.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
    opacity: 0.65;
    pointer-events: none;
}

.btn-check:focus + .btn-outline-primary,
.btn-check:focus + .btn-outline-secondary,
.btn-check:checked + .btn-outline-primary:focus,
.btn-check:active + .btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-check:checked + .btn-outline-secondary:focus,
.btn-check:active + .btn-outline-secondary:focus,
.btn-outline-secondary:active:focus,
.btn-outline-secondary.active:focus {
    box-shadow: 0 0 0 0.22rem var(--focus-ring);
}

.form-control,
.form-select,
.form-check-input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 0.22rem var(--input-focus-ring);
}

.form-control::placeholder {
    color: var(--input-placeholder);
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.text-primary {
    color: var(--brand-primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-default {
    color: var(--text-primary) !important;
}

.bg-primary {
    background-color: var(--brand-primary) !important;
}

.bg-secondary {
    background-color: var(--brand-secondary) !important;
}

.bg-light-grey,
.bg-surface-muted {
    background-color: var(--surface-muted) !important;
}

.bg-dark-green,
.dark-green {
    background: var(--score-legend-dark-green);
    color: #fff;
}

.bg-light-green,
.light-green {
    background: var(--score-legend-light-green);
    color: #0b2a13;
}

.bg-amber,
.amber {
    background: var(--score-legend-amber);
    color: #2b2b2b;
}

.bg-orange,
.orange {
    background: var(--score-legend-orange);
    color: #2b2b2b;
}

.bg-red,
.red {
    background: var(--score-legend-red);
    color: #fff;
}

.fs-7 {
    font-size: 0.875rem !important;
}

.fs-8 {
    font-size: 0.75rem !important;
}

.fs-9 {
    font-size: 0.7rem !important;
}

.fw-black {
    font-weight: 900;
}
