/* Back office and admin. Public bio pages do not load this file. */
:root {
    --primary: #222321;
    --primary-100: #eceeeb;
    --primary-200: #dbddd8;
    --primary-300: #b7bab4;
    --primary-400: #898d85;
    --primary-600: #3c3d3a;
    --primary-700: #343632;
    --primary-800: #30322e;
    --primary-900: #222321;
    --secondary: #222321;
    --body-bg: #f7f7f5;
    --body-color: #222321;
    --white: #ffffff;
    --gray-50: #f7f7f5;
    --gray-900: #222321;
    --dark: #222321;
}

html,
body,
body.app,
body.bg-white,
body.bg-gray-50,
.app,
.admin-container,
.admin-content,
.app-content {
    background: #f7f7f5 !important;
    background-color: #f7f7f5 !important;
    color: #222321;
}

.card,
.modal-content,
.dropdown-menu,
.app-sidebar,
.admin-sidebar-links-wrapper,
.admin-navbar-top,
.list-group-item {
    background-color: #ffffff;
    color: #222321;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #222321;
}

a {
    color: #222321;
}

a:hover {
    color: #3c3d3a;
}

.app-sidebar-links > li > a,
.admin-sidebar-links li > a {
    color: #222321;
}

.app-sidebar-links > li.active > a:not(.default),
[data-theme-style="dark"] .app-sidebar-links > li.active > a:not(.default),
.admin-sidebar-links li.active,
[data-theme-style="dark"] .admin-sidebar-links li.active {
    background: #222321;
    color: #ffffff;
}

.admin-sidebar-links li.active > a,
.admin-sidebar-links li.active > a svg,
[data-theme-style="dark"] .admin-sidebar-links li.active > a,
[data-theme-style="dark"] .admin-sidebar-links li.active > a svg {
    color: #ffffff;
}

.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
    color: #ffffff !important;
    background-color: #222321 !important;
    border-color: #222321 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: #ffffff !important;
    background-color: #3c3d3a !important;
    border-color: #3c3d3a !important;
}

.btn-outline-primary {
    color: #222321;
    border-color: #222321;
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #ffffff;
    background-color: #222321;
    border-color: #222321;
}

.btn-secondary {
    color: #ffffff;
    background-color: #222321;
    border-color: #222321;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    color: #ffffff;
    background-color: #3c3d3a;
    border-color: #3c3d3a;
}

.bg-primary,
a.bg-primary:hover,
button.bg-primary:hover {
    background-color: #222321 !important;
}

.text-primary,
a.text-primary:hover {
    color: #222321 !important;
}

.border-primary {
    border-color: #222321 !important;
}

.badge-primary {
    color: #ffffff;
    background-color: #222321;
}

.alert-primary {
    color: #30322e;
    background-color: #eceeeb;
    border-color: #dbddd8;
}

/* Custom head CSS paints #links-tab and #settings-tab gold on hover. */
#settings-tab:hover,
#fp-data-tab:hover,
#links-tab:hover,
.fp-bar-extras .nav-link:hover,
.nav-pills .nav-link:hover {
    color: #222321 !important;
    background-color: #eceeeb !important;
}

.page-item.active .page-link,
#settings-tab.active,
#settings-tab.active:hover,
#fp-data-tab.active,
#fp-data-tab.active:hover,
#links-tab.active,
#links-tab.active:hover,
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .show > .nav-link,
.nav-pills .show > .nav-link:hover {
    color: #ffffff !important;
    background-color: #222321 !important;
    border-color: #222321 !important;
}

.page-link {
    color: #222321;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #ffffff;
    background-color: #222321;
}

.progress-bar {
    background-color: #222321;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #222321;
    border-color: #222321;
}

.custom-range::-webkit-slider-thumb,
.custom-range::-moz-range-thumb {
    background-color: #222321;
}

.form-control,
.custom-select {
    color: #222321;
    background-color: #ffffff;
    border-color: #dbddd8;
}

.form-control:focus,
.custom-select:focus {
    color: #222321;
    background-color: #ffffff;
    border-color: #222321;
    box-shadow: 0 0 0 0.2rem rgba(34, 35, 33, 0.09);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #222321;
    color: #ffffff;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #222321;
}

/* Shared neutral surfaces. This stylesheet is excluded from public bio pages. */
:root {
    --fp-text: #222321;
    --fp-text-secondary: #646761;
    --fp-border: #e9eae7;
    --fp-control-border: #dbddd8;
    --fp-hover: #fafaf9;
    --gray-100: #f0f1ee;
    --gray-200: #e9eae7;
    --gray-500: #747773;
    --gray-600: #646761;
    --gray-700: #464943;
}

body.app,
.admin-container {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .9375rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.app-content h1,
.admin-content h1 {
    font-size: clamp(1.5rem, 2vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -.04em;
    line-height: 1.2;
}

.app-content h2,
.admin-content h2 {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -.025em;
}

.card {
    border-color: var(--fp-border);
    border-radius: 12px;
    box-shadow: none;
}

.card-header,
.card-footer {
    background-color: transparent;
    border-color: var(--fp-border);
}

.text-muted,
.form-text {
    color: var(--fp-text-secondary) !important;
}

.form-group > label {
    font-weight: 500;
    margin-bottom: .5rem;
}

.form-control,
.custom-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: var(--fp-control-border);
    border-radius: 8px;
    box-shadow: none;
    font-size: .875rem;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.form-control:not(.form-control-sm):not(textarea):not([type="color"]):not([type="file"]),
.custom-select:not(.custom-select-sm) {
    min-height: 40px;
}

.form-control:focus,
.custom-select:focus {
    border-color: #a2a5a0;
    box-shadow: 0 0 0 3px rgba(34, 35, 33, .08);
}

.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.btn:not(.btn-sm):not(.btn-lg):not(.btn-circle) {
    min-height: 40px;
}

.btn-primary,
.btn-secondary,
.btn-outline-primary {
    background-image: none !important;
    box-shadow: none;
}

.btn-light,
.btn-outline-secondary {
    color: var(--fp-text);
    background-color: #fff;
    border-color: var(--fp-control-border);
}

.btn-light:hover,
.btn-outline-secondary:hover {
    color: var(--fp-text);
    background-color: #f0f1ee;
    border-color: #b7bab4;
}

.btn:focus-visible,
a:focus-visible,
.custom-control-input:focus-visible ~ .custom-control-label::before {
    outline: 2px solid #898d85;
    outline-offset: 3px;
}

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

.table {
    color: var(--fp-text);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

.table thead th {
    background-color: var(--fp-hover);
    color: var(--fp-text-secondary);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .025em;
    border-bottom: 1px solid var(--fp-border);
}

.table td,
.table th {
    padding: .875rem 1rem;
    border-color: var(--fp-border);
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

.table-hover tbody tr:hover {
    background-color: var(--fp-hover);
    color: var(--fp-text);
}

.badge-light {
    background-color: #f0f1ee;
    color: var(--fp-text-secondary);
    font-weight: 500;
    border-radius: 6px;
}

.modal-content,
.dropdown-menu,
.select2-dropdown {
    border: 1px solid var(--fp-border);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(20, 20, 20, .07), 0 2px 8px rgba(20, 20, 20, .025);
}

.modal-header,
.modal-footer,
.dropdown-divider,
.list-group-item {
    border-color: var(--fp-border);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #f0f1ee;
    color: var(--fp-text);
}

.app-sidebar-links > li.active > a:not(.default),
[data-theme-style="dark"] .app-sidebar-links > li.active > a:not(.default),
.admin-sidebar-links li.active,
[data-theme-style="dark"] .admin-sidebar-links li.active {
    background: #eceeeb;
    color: var(--fp-text);
    border-radius: 8px;
}

.admin-sidebar-links li.active > a,
.admin-sidebar-links li.active > a svg,
[data-theme-style="dark"] .admin-sidebar-links li.active > a,
[data-theme-style="dark"] .admin-sidebar-links li.active > a svg {
    color: var(--fp-text);
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .form-control,
    .custom-select {
        transition: none;
    }
}

/* Keep validation distinct from the neutral control treatment. */
.form-control.is-invalid,
.was-validated .form-control:invalid,
.custom-select.is-invalid,
.was-validated .custom-select:invalid {
    border-color: var(--danger, #dc3545);
}

.form-control.is-valid,
.was-validated .form-control:valid,
.custom-select.is-valid,
.was-validated .custom-select:valid {
    border-color: var(--success, #28a745);
}

/* Shared page rhythm for settings, editors and account screens. */
.app-content main > .container > .row:first-of-type,
.app-content main > section.container > .row:first-of-type {
    margin-bottom: 28px !important;
}
.app-content h1 > i,
.admin-content h1 > i { color: #898d85; }
.app-content .card-body,
.admin-content .card-body { padding: 24px; }
.app-content .nav-pills .nav-link,
.account-header-navbar .nav-link { border-radius: 8px; font-weight: 500; }
.app-content .input-group-text,
.admin-content .input-group-text { background: #fafaf9; border-color: #dbddd8; color: #646761; }
.app-content .list-group-item,
.admin-content .list-group-item { padding: 16px 20px; }
.app-content .modal-header,
.app-content .modal-footer { padding: 20px 24px; }
.app-content .table thead th,
.admin-content .table thead th { border-top: 0; }

@media (max-width: 575.98px) {
    .app-content .card-body,
    .admin-content .card-body { padding: 16px; }
}

/* Override the older site-wide custom-head theme in authenticated screens. */
body.app .app-content h1,
body.app .app-content h2,
.admin-content h1,
.admin-content h2 {
    color: #222321;
    font-weight: 600;
    text-transform: none;
}
body.app .app-content a { opacity: 1; }
body.app .app-content .custom-row .text-muted,
body.app .app-content .custom-row .text-muted.align-middle {
    color: #646761 !important;
}
body.app .app-content .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #222321 !important;
    border-color: #222321 !important;
}

body.app .app-content h1 {
    font-size: clamp(1.5rem, 2vw, 1.875rem);
    letter-spacing: -.04em;
}