/* Semantic application tokens. Variables live on body and on the live preview scope. */
.app-palette-scope {
    --bs-body-color: var(--app-text); --bs-body-color-rgb: var(--app-text-rgb);
    --bs-body-bg: var(--app-surface); --bs-body-bg-rgb: var(--app-surface-rgb);
    --bs-secondary-color: var(--app-muted); --bs-secondary-color-rgb: var(--app-muted-rgb);
    --bs-secondary-bg: var(--app-background); --bs-tertiary-bg: var(--app-background);
    --bs-emphasis-color: var(--app-text); --bs-emphasis-color-rgb: var(--app-text-rgb);
    --bs-border-color: var(--app-border); --bs-border-color-translucent: rgba(var(--app-border-rgb), .7);
    --bs-link-color: var(--app-primary-ink); --bs-link-color-rgb: var(--app-primary-ink-rgb);
    --bs-link-hover-color: color-mix(in srgb, var(--app-primary-ink) 80%, var(--app-text));
    --bs-link-hover-color-rgb: var(--app-primary-ink-rgb);
    --bs-focus-ring-color: rgba(var(--app-primary-rgb), .25);
    --leftnav-bg: var(--app-primary); --leftnav-bg-dark: var(--app-primary-hover);
    --profile-blue: var(--app-primary); --accent: var(--app-accent); --icon-gray: var(--app-muted);
    --topbar-border: var(--app-border); --content-wash: var(--app-background); --bg-muted: var(--app-background);
    --focus-ring: 0 0 0 3px rgba(var(--app-primary-rgb), .25);
    color: var(--app-text); background-color: var(--app-background);
}
.app-palette-scope .content { background-color: var(--app-background); }
.app-palette-scope :is(.sidebar, #mobileNav) { color: var(--app-on-primary); }
.app-palette-scope :is(.sidebar, #mobileNav) .nav-link { color: var(--app-on-primary); }
.app-palette-scope :is(.sidebar, #mobileNav) .nav-link:is(:hover, :focus-visible, .active) { color: var(--app-on-primary-hover); background-color: var(--app-primary-hover); }
.app-palette-scope :is(.card, .modal-content, .offcanvas, .dropdown-menu, .list-group) {
    --bs-card-bg: var(--app-surface); --bs-card-color: var(--app-text); --bs-card-border-color: var(--app-border);
    --bs-modal-bg: var(--app-surface); --bs-modal-color: var(--app-text); --bs-modal-border-color: var(--app-border);
    --bs-offcanvas-bg: var(--app-surface); --bs-offcanvas-color: var(--app-text); --bs-offcanvas-border-color: var(--app-border);
    --bs-dropdown-bg: var(--app-surface); --bs-dropdown-color: var(--app-text); --bs-dropdown-link-color: var(--app-text);
    --bs-dropdown-border-color: var(--app-border);
    --bs-dropdown-link-hover-bg: var(--app-hover-bg); --bs-dropdown-link-hover-color: var(--app-hover-text); --bs-dropdown-link-active-bg: var(--app-primary);
    --bs-dropdown-link-active-color: var(--app-on-primary);
    --bs-list-group-bg: var(--app-surface); --bs-list-group-color: var(--app-text); --bs-list-group-border-color: var(--app-border);
    --bs-list-group-action-color: var(--app-text); --bs-list-group-action-hover-bg: var(--app-hover-bg);
    --bs-list-group-action-hover-color: var(--app-hover-text); --bs-list-group-action-active-bg: var(--app-selected-bg);
    --bs-list-group-action-active-color: var(--app-selected-text); --bs-list-group-active-bg: var(--app-primary);
    --bs-list-group-active-color: var(--app-on-primary); --bs-list-group-active-border-color: var(--app-primary);
}
.app-palette-scope :is(.form-control, .form-select, .form-check-input, .input-group-text) {
    color: var(--app-text); background-color: var(--app-surface); border-color: var(--app-border);
}
.app-palette-scope :is(.form-control, .form-select)::placeholder { color: var(--app-muted); opacity: 1; }
.app-palette-scope :is(.form-control, .form-select, .form-check-input):focus {
    border-color: var(--app-primary); box-shadow: 0 0 0 .25rem rgba(var(--app-primary-rgb), .25);
}
.app-palette-scope :is(.form-control, .form-select):disabled { color: var(--app-muted); background-color: var(--app-background); }
.app-palette-scope .form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.app-palette-scope .form-range::-webkit-slider-thumb { background: var(--app-primary); }
.app-palette-scope .form-range::-moz-range-thumb { background: var(--app-primary); }
.app-palette-scope .table {
    --bs-table-color: var(--app-text); --bs-table-bg: var(--app-surface); --bs-table-border-color: var(--app-border);
    --bs-table-striped-color: var(--app-text); --bs-table-striped-bg: rgba(var(--app-text-rgb), .04);
    --bs-table-hover-color: var(--app-hover-text); --bs-table-hover-bg: var(--app-hover-bg);
    --bs-table-active-color: var(--app-selected-text); --bs-table-active-bg: var(--app-selected-bg);
}
.app-palette-scope .pagination {
    --bs-pagination-bg: var(--app-surface); --bs-pagination-color: var(--app-primary-ink); --bs-pagination-border-color: var(--app-border);
    --bs-pagination-hover-bg: var(--app-hover-bg); --bs-pagination-hover-color: var(--app-hover-link); --bs-pagination-hover-border-color: var(--app-primary);
    --bs-pagination-focus-bg: var(--app-hover-bg); --bs-pagination-focus-color: var(--app-hover-link); --bs-pagination-focus-box-shadow: var(--focus-ring);
    --bs-pagination-active-bg: var(--app-primary); --bs-pagination-active-color: var(--app-on-primary); --bs-pagination-active-border-color: var(--app-primary);
    --bs-pagination-disabled-bg: var(--app-background); --bs-pagination-disabled-color: var(--app-muted); --bs-pagination-disabled-border-color: var(--app-border);
}
.app-palette-scope .nav {
    --bs-nav-link-color: var(--app-primary-ink); --bs-nav-link-hover-color: var(--bs-link-hover-color); --bs-nav-link-disabled-color: var(--app-muted);
    --bs-nav-pills-link-active-bg: var(--app-primary); --bs-nav-pills-link-active-color: var(--app-on-primary);
    --bs-nav-tabs-link-active-color: var(--app-text); --bs-nav-tabs-link-active-bg: var(--app-surface); --bs-nav-tabs-border-color: var(--app-border);
}
.app-palette-scope .accordion {
    --bs-accordion-bg: var(--app-surface); --bs-accordion-color: var(--app-text); --bs-accordion-border-color: var(--app-border);
    --bs-accordion-btn-bg: var(--app-surface); --bs-accordion-btn-color: var(--app-text); --bs-accordion-active-color: var(--app-text);
    --bs-accordion-active-bg: color-mix(in srgb, var(--app-primary) 12%, var(--app-surface)); --bs-accordion-btn-focus-box-shadow: var(--focus-ring);
}
.app-palette-scope .popover { --bs-popover-bg: var(--app-surface); --bs-popover-body-color: var(--app-text); --bs-popover-border-color: var(--app-border); --bs-popover-header-bg: var(--app-background); --bs-popover-header-color: var(--app-text); }
.app-palette-scope .tooltip { --bs-tooltip-bg: var(--app-text); --bs-tooltip-color: var(--app-on-text); }
.app-palette-scope .progress { --bs-progress-bg: var(--app-background); --bs-progress-bar-bg: var(--app-primary); --bs-progress-bar-color: var(--app-on-primary); }
.app-palette-scope :is(.bg-white, .bg-body) { background-color: var(--app-surface) !important; }
.app-palette-scope :is(.bg-light, .bg-body-secondary, .bg-body-tertiary) { background-color: var(--app-background) !important; }
.app-palette-scope :is(.text-body, .text-dark, .text-black, .text-reset) { color: var(--app-text) !important; }
.app-palette-scope :is(.text-muted, .text-body-secondary) { color: var(--app-muted) !important; }
.app-palette-scope .text-white { color: var(--app-on-primary) !important; }
.app-palette-scope .btn:is(.btn-primary,.btn-secondary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-light,.btn-dark,.btn-outline-primary,.btn-outline-secondary,.btn-outline-success,.btn-outline-info,.btn-outline-warning,.btn-outline-danger,.btn-outline-light,.btn-outline-dark) {
    --bs-btn-color: var(--app-button-on); --bs-btn-bg: var(--app-button); --bs-btn-border-color: var(--app-button);
    --bs-btn-hover-color: var(--app-button-hover-on); --bs-btn-hover-bg: var(--app-button-hover);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg); --bs-btn-active-color: var(--app-button-hover-on); --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-bg); --bs-btn-disabled-color: var(--app-button-on); --bs-btn-disabled-bg: var(--app-button);
    --bs-btn-disabled-border-color: var(--app-button); --bs-btn-focus-shadow-rgb: var(--app-button-rgb);
}
.app-palette-scope .btn:is(.btn-outline-primary,.btn-outline-secondary,.btn-outline-success,.btn-outline-info,.btn-outline-warning,.btn-outline-danger,.btn-outline-light,.btn-outline-dark) {
    --bs-btn-color: var(--app-button-ink); --bs-btn-bg: transparent; --bs-btn-disabled-color: var(--app-button-ink); --bs-btn-disabled-bg: transparent;
}
.app-palette-scope .btn-link { --bs-btn-color: var(--app-primary-ink); --bs-btn-hover-color: var(--bs-link-hover-color); --bs-btn-active-color: var(--bs-link-hover-color); --bs-btn-focus-shadow-rgb: var(--app-primary-rgb); }
.app-color-row { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(14rem, 1.4fr); gap: .3rem 1rem; }
.app-color-row small { grid-column: 2; }
.app-color-hex { max-width: 8rem; font-family: monospace; }
.app-palette-preview { position: sticky; top: 5rem; }
.app-preview-nav { background: var(--app-primary); color: var(--app-on-primary); }
.app-preview-accent { border-bottom: 3px solid var(--app-accent); }
@media (max-width: 575px) { .app-color-row { grid-template-columns: 1fr; } .app-color-row small { grid-column: 1; } }
.app-palette-scope { --bs-primary: var(--app-primary); --bs-primary-rgb: var(--app-primary-rgb); --bs-primary-bg-subtle: color-mix(in srgb, var(--app-primary) 12%, var(--app-surface)); --bs-primary-border-subtle: color-mix(in srgb, var(--app-primary) 35%, var(--app-border)); --bs-primary-text-emphasis: var(--app-text); }
.app-palette-scope :is(.btn-primary, .btn-outline-primary) { --app-button: var(--app-primary); --app-button-on: var(--app-on-primary); --app-button-ink: var(--app-primary-ink); --app-button-rgb: var(--app-primary-rgb); --app-button-hover: var(--app-primary-hover); --app-button-hover-on: var(--app-on-primary-hover); }
.app-palette-scope .text-bg-primary { color: var(--app-on-primary) !important; background-color: var(--app-primary) !important; }
.app-palette-scope .alert-primary { --bs-alert-color: var(--app-text); --bs-alert-bg: color-mix(in srgb, var(--app-primary) 12%, var(--app-surface)); --bs-alert-border-color: color-mix(in srgb, var(--app-primary) 40%, var(--app-border)); --bs-alert-link-color: var(--app-text); }
.app-palette-scope .table-primary { --bs-table-bg: color-mix(in srgb, var(--app-primary) 12%, var(--app-surface)); --bs-table-color: var(--app-text); }
.app-palette-scope { --bs-secondary: var(--app-secondary); --bs-secondary-rgb: var(--app-secondary-rgb); --bs-secondary-bg-subtle: color-mix(in srgb, var(--app-secondary) 12%, var(--app-surface)); --bs-secondary-border-subtle: color-mix(in srgb, var(--app-secondary) 35%, var(--app-border)); --bs-secondary-text-emphasis: var(--app-text); }
.app-palette-scope :is(.btn-secondary, .btn-outline-secondary) { --app-button: var(--app-secondary); --app-button-on: var(--app-on-secondary); --app-button-ink: var(--app-secondary-ink); --app-button-rgb: var(--app-secondary-rgb); --app-button-hover: var(--app-secondary-hover); --app-button-hover-on: var(--app-on-secondary-hover); }
.app-palette-scope .text-bg-secondary { color: var(--app-on-secondary) !important; background-color: var(--app-secondary) !important; }
.app-palette-scope .alert-secondary { --bs-alert-color: var(--app-text); --bs-alert-bg: color-mix(in srgb, var(--app-secondary) 12%, var(--app-surface)); --bs-alert-border-color: color-mix(in srgb, var(--app-secondary) 40%, var(--app-border)); --bs-alert-link-color: var(--app-text); }
.app-palette-scope .table-secondary { --bs-table-bg: color-mix(in srgb, var(--app-secondary) 12%, var(--app-surface)); --bs-table-color: var(--app-text); }
.app-palette-scope { --bs-success: var(--app-success); --bs-success-rgb: var(--app-success-rgb); --bs-success-bg-subtle: color-mix(in srgb, var(--app-success) 12%, var(--app-surface)); --bs-success-border-subtle: color-mix(in srgb, var(--app-success) 35%, var(--app-border)); --bs-success-text-emphasis: var(--app-text); }
.app-palette-scope :is(.btn-success, .btn-outline-success) { --app-button: var(--app-success); --app-button-on: var(--app-on-success); --app-button-ink: var(--app-success-ink); --app-button-rgb: var(--app-success-rgb); --app-button-hover: var(--app-success-hover); --app-button-hover-on: var(--app-on-success-hover); }
.app-palette-scope .text-bg-success { color: var(--app-on-success) !important; background-color: var(--app-success) !important; }
.app-palette-scope .alert-success { --bs-alert-color: var(--app-text); --bs-alert-bg: color-mix(in srgb, var(--app-success) 12%, var(--app-surface)); --bs-alert-border-color: color-mix(in srgb, var(--app-success) 40%, var(--app-border)); --bs-alert-link-color: var(--app-text); }
.app-palette-scope .table-success { --bs-table-bg: color-mix(in srgb, var(--app-success) 12%, var(--app-surface)); --bs-table-color: var(--app-text); }
.app-palette-scope { --bs-info: var(--app-info); --bs-info-rgb: var(--app-info-rgb); --bs-info-bg-subtle: color-mix(in srgb, var(--app-info) 12%, var(--app-surface)); --bs-info-border-subtle: color-mix(in srgb, var(--app-info) 35%, var(--app-border)); --bs-info-text-emphasis: var(--app-text); }
.app-palette-scope :is(.btn-info, .btn-outline-info) { --app-button: var(--app-info); --app-button-on: var(--app-on-info); --app-button-ink: var(--app-info-ink); --app-button-rgb: var(--app-info-rgb); --app-button-hover: var(--app-info-hover); --app-button-hover-on: var(--app-on-info-hover); }
.app-palette-scope .text-bg-info { color: var(--app-on-info) !important; background-color: var(--app-info) !important; }
.app-palette-scope .alert-info { --bs-alert-color: var(--app-text); --bs-alert-bg: color-mix(in srgb, var(--app-info) 12%, var(--app-surface)); --bs-alert-border-color: color-mix(in srgb, var(--app-info) 40%, var(--app-border)); --bs-alert-link-color: var(--app-text); }
.app-palette-scope .table-info { --bs-table-bg: color-mix(in srgb, var(--app-info) 12%, var(--app-surface)); --bs-table-color: var(--app-text); }
.app-palette-scope { --bs-warning: var(--app-warning); --bs-warning-rgb: var(--app-warning-rgb); --bs-warning-bg-subtle: color-mix(in srgb, var(--app-warning) 12%, var(--app-surface)); --bs-warning-border-subtle: color-mix(in srgb, var(--app-warning) 35%, var(--app-border)); --bs-warning-text-emphasis: var(--app-text); }
.app-palette-scope :is(.btn-warning, .btn-outline-warning) { --app-button: var(--app-warning); --app-button-on: var(--app-on-warning); --app-button-ink: var(--app-warning-ink); --app-button-rgb: var(--app-warning-rgb); --app-button-hover: var(--app-warning-hover); --app-button-hover-on: var(--app-on-warning-hover); }
.app-palette-scope .text-bg-warning { color: var(--app-on-warning) !important; background-color: var(--app-warning) !important; }
.app-palette-scope .alert-warning { --bs-alert-color: var(--app-text); --bs-alert-bg: color-mix(in srgb, var(--app-warning) 12%, var(--app-surface)); --bs-alert-border-color: color-mix(in srgb, var(--app-warning) 40%, var(--app-border)); --bs-alert-link-color: var(--app-text); }
.app-palette-scope .table-warning { --bs-table-bg: color-mix(in srgb, var(--app-warning) 12%, var(--app-surface)); --bs-table-color: var(--app-text); }
.app-palette-scope { --bs-danger: var(--app-danger); --bs-danger-rgb: var(--app-danger-rgb); --bs-danger-bg-subtle: color-mix(in srgb, var(--app-danger) 12%, var(--app-surface)); --bs-danger-border-subtle: color-mix(in srgb, var(--app-danger) 35%, var(--app-border)); --bs-danger-text-emphasis: var(--app-text); }
.app-palette-scope :is(.btn-danger, .btn-outline-danger) { --app-button: var(--app-danger); --app-button-on: var(--app-on-danger); --app-button-ink: var(--app-danger-ink); --app-button-rgb: var(--app-danger-rgb); --app-button-hover: var(--app-danger-hover); --app-button-hover-on: var(--app-on-danger-hover); }
.app-palette-scope .text-bg-danger { color: var(--app-on-danger) !important; background-color: var(--app-danger) !important; }
.app-palette-scope .alert-danger { --bs-alert-color: var(--app-text); --bs-alert-bg: color-mix(in srgb, var(--app-danger) 12%, var(--app-surface)); --bs-alert-border-color: color-mix(in srgb, var(--app-danger) 40%, var(--app-border)); --bs-alert-link-color: var(--app-text); }
.app-palette-scope .table-danger { --bs-table-bg: color-mix(in srgb, var(--app-danger) 12%, var(--app-surface)); --bs-table-color: var(--app-text); }
.app-palette-scope { --bs-light: var(--app-background); --bs-light-rgb: var(--app-background-rgb); --bs-light-bg-subtle: color-mix(in srgb, var(--app-background) 12%, var(--app-surface)); --bs-light-border-subtle: color-mix(in srgb, var(--app-background) 35%, var(--app-border)); --bs-light-text-emphasis: var(--app-text); }
.app-palette-scope :is(.btn-light, .btn-outline-light) { --app-button: var(--app-background); --app-button-on: var(--app-on-background); --app-button-ink: var(--app-background-ink); --app-button-rgb: var(--app-background-rgb); --app-button-hover: var(--app-background-hover); --app-button-hover-on: var(--app-on-background-hover); }
.app-palette-scope .text-bg-light { color: var(--app-on-background) !important; background-color: var(--app-background) !important; }
.app-palette-scope .alert-light { --bs-alert-color: var(--app-text); --bs-alert-bg: color-mix(in srgb, var(--app-background) 12%, var(--app-surface)); --bs-alert-border-color: color-mix(in srgb, var(--app-background) 40%, var(--app-border)); --bs-alert-link-color: var(--app-text); }
.app-palette-scope .table-light { --bs-table-bg: color-mix(in srgb, var(--app-background) 12%, var(--app-surface)); --bs-table-color: var(--app-text); }
.app-palette-scope { --bs-dark: var(--app-text); --bs-dark-rgb: var(--app-text-rgb); --bs-dark-bg-subtle: color-mix(in srgb, var(--app-text) 12%, var(--app-surface)); --bs-dark-border-subtle: color-mix(in srgb, var(--app-text) 35%, var(--app-border)); --bs-dark-text-emphasis: var(--app-text); }
.app-palette-scope :is(.btn-dark, .btn-outline-dark) { --app-button: var(--app-text); --app-button-on: var(--app-on-text); --app-button-ink: var(--app-text-ink); --app-button-rgb: var(--app-text-rgb); --app-button-hover: var(--app-text-hover); --app-button-hover-on: var(--app-on-text-hover); }
.app-palette-scope .text-bg-dark { color: var(--app-on-text) !important; background-color: var(--app-text) !important; }
.app-palette-scope .alert-dark { --bs-alert-color: var(--app-text); --bs-alert-bg: color-mix(in srgb, var(--app-text) 12%, var(--app-surface)); --bs-alert-border-color: color-mix(in srgb, var(--app-text) 40%, var(--app-border)); --bs-alert-link-color: var(--app-text); }
.app-palette-scope .table-dark { --bs-table-bg: color-mix(in srgb, var(--app-text) 12%, var(--app-surface)); --bs-table-color: var(--app-text); }
.app-palette-scope .form-check-input:checked { background-image: none; }
.app-palette-scope .form-check-input[type=checkbox]:checked::after { content: '\2713'; color: var(--app-on-primary); display: block; text-align: center; font-size: .8em; line-height: 1.1; font-weight: bold; }
.app-palette-scope .form-check-input[type=radio]:checked::after { content: ''; display: block; border-radius: 50%; background: var(--app-on-primary); width: 50%; height: 50%; margin: 25%; }
.app-palette-scope .form-switch .form-check-input:checked { background-image: radial-gradient(circle, var(--app-on-primary) 60%, transparent 65%); background-size: 45% 90%; background-position: right center; }
.app-palette-scope .form-switch .form-check-input:checked::after { content: none; }
.app-palette-scope .form-select { appearance: auto; background-image: none; }
/* Bootstrap 5.1 ships fixed declarations; these also support later variable-based versions. */
.app-palette-scope .btn:is(.btn-primary,.btn-secondary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-light,.btn-dark,.btn-outline-primary,.btn-outline-secondary,.btn-outline-success,.btn-outline-info,.btn-outline-warning,.btn-outline-danger,.btn-outline-light,.btn-outline-dark) { color: var(--bs-btn-color); background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); }
.app-palette-scope .btn:is(.btn-primary,.btn-secondary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-light,.btn-dark,.btn-outline-primary,.btn-outline-secondary,.btn-outline-success,.btn-outline-info,.btn-outline-warning,.btn-outline-danger,.btn-outline-light,.btn-outline-dark):is(:hover, :focus-visible, :active, .active),
.app-palette-scope .btn-check:checked + .btn:is(.btn-primary,.btn-secondary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-light,.btn-dark,.btn-outline-primary,.btn-outline-secondary,.btn-outline-success,.btn-outline-info,.btn-outline-warning,.btn-outline-danger,.btn-outline-light,.btn-outline-dark) { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); }
.app-palette-scope .btn:is(.btn-primary,.btn-secondary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-light,.btn-dark,.btn-outline-primary,.btn-outline-secondary,.btn-outline-success,.btn-outline-info,.btn-outline-warning,.btn-outline-danger,.btn-outline-light,.btn-outline-dark):focus, .app-palette-scope .btn-check:focus + .btn:is(.btn-primary,.btn-secondary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-light,.btn-dark,.btn-outline-primary,.btn-outline-secondary,.btn-outline-success,.btn-outline-info,.btn-outline-warning,.btn-outline-danger,.btn-outline-light,.btn-outline-dark) { box-shadow: 0 0 0 .25rem rgba(var(--app-button-rgb), .25); }
.app-palette-scope .btn:is(.btn-primary,.btn-secondary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-light,.btn-dark,.btn-outline-primary,.btn-outline-secondary,.btn-outline-success,.btn-outline-info,.btn-outline-warning,.btn-outline-danger,.btn-outline-light,.btn-outline-dark):is(:disabled, .disabled) { color: var(--bs-btn-disabled-color); background-color: var(--bs-btn-disabled-bg); border-color: var(--bs-btn-disabled-border-color); }
.app-palette-scope .btn-link { color: var(--app-primary-ink); }
.app-palette-scope .btn-link:hover { color: var(--bs-link-hover-color); }
.app-palette-scope a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.page-link) { color: var(--app-primary-ink); }
.app-palette-scope a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.page-link):hover { color: var(--bs-link-hover-color); }
.app-palette-scope :is(.card, .modal-content, .offcanvas, .dropdown-menu, .list-group-item) { color: var(--app-text); background-color: var(--app-surface); border-color: var(--app-border); }
.app-palette-scope :is(.card-header, .card-footer, .modal-header, .modal-footer, .input-group-text) { color: var(--app-text); background-color: var(--app-background); border-color: var(--app-border); }
.app-palette-scope :is(.dropdown-item, .list-group-item-action, .accordion-button) { color: var(--app-text); }
.app-palette-scope :is(.dropdown-item, .list-group-item-action):is(:hover, :focus) { color: var(--app-hover-text); background-color: var(--app-hover-bg); }
.app-palette-scope :is(.dropdown-item, .list-group-item):is(.active, :active) { color: var(--app-on-primary); background-color: var(--app-primary); border-color: var(--app-primary); }
/* Candidate selection keeps its subtle highlight and reply indicator. */
.app-palette-scope .candidate-row.list-group-item {
    --app-row-bg: var(--app-surface); --app-row-text: var(--app-text); --app-row-muted: var(--app-muted); --app-row-name: var(--app-text);
    color: var(--app-row-text); background-color: var(--app-row-bg); border-color: var(--app-border);
    border-left: 6px solid var(--app-border);
}
.app-palette-scope .candidate-row.list-group-item:is(:hover, :focus) {
    --app-row-bg: var(--app-hover-bg); --app-row-text: var(--app-hover-text); --app-row-muted: var(--app-hover-muted); --app-row-name: var(--app-hover-link);
}
.app-palette-scope .candidate-row.list-group-item:is(.active, :active) {
    --app-row-bg: var(--app-selected-bg); --app-row-text: var(--app-selected-text); --app-row-muted: var(--app-selected-muted); --app-row-name: var(--app-selected-link);
}
.app-palette-scope .candidate-row.list-group-item.candidate-row-unread { border-left-color: #ff9000; }
.app-palette-scope .candidate-row.list-group-item .fw-semibold { color: var(--app-row-name); }
.app-palette-scope .candidate-row.list-group-item .text-muted { color: var(--app-row-muted) !important; }
.app-palette-scope .candidate-row.list-group-item:focus-visible { outline: 2px solid var(--app-primary-ink); outline-offset: -3px; }
.app-palette-scope :is(.candidate-row-action-grid, .candidate-pane-actions, .candidate-feature-header-actions) .btn-outline-secondary:is(:hover, :focus, :active, .active) .icon { color: inherit; }
.app-palette-scope .page-link { color: var(--app-primary-ink); background-color: var(--app-surface); border-color: var(--app-border); }
.app-palette-scope .page-link:is(:hover, :focus) { color: var(--app-hover-link); background-color: var(--app-hover-bg); border-color: var(--app-primary); }
.app-palette-scope .page-link:focus { box-shadow: var(--focus-ring); }
.app-palette-scope .page-item.active .page-link { color: var(--app-on-primary); background-color: var(--app-primary); border-color: var(--app-primary); }
.app-palette-scope .page-item.disabled .page-link { color: var(--app-muted); background-color: var(--app-background); border-color: var(--app-border); }
.app-palette-scope .nav-link { color: var(--app-primary-ink); }
.app-palette-scope .nav-pills .nav-link.active { color: var(--app-on-primary); background-color: var(--app-primary); }
.app-palette-scope .nav-tabs .nav-link.active { color: var(--app-text); background-color: var(--app-surface); border-color: var(--app-border); }
.app-palette-scope .accordion-button { background-color: var(--app-surface); }
.app-palette-scope .accordion-button:not(.collapsed) { color: var(--app-text); background-color: var(--bs-accordion-active-bg); }
.app-palette-scope .accordion-button:focus { border-color: var(--app-primary); box-shadow: var(--focus-ring); }
.app-palette-scope .accordion-item { color: var(--app-text); background-color: var(--app-surface); border-color: var(--app-border); }
.app-palette-scope .popover { background-color: var(--app-surface); border-color: var(--app-border); }
.app-palette-scope .popover-header { color: var(--app-text); background-color: var(--app-background); border-color: var(--app-border); }
.app-palette-scope .popover-body { color: var(--app-text); }
.app-palette-scope .tooltip-inner { color: var(--app-on-text); background-color: var(--app-text); }
.app-palette-scope .progress { background-color: var(--app-background); }
.app-palette-scope .progress-bar { color: var(--app-on-primary); background-color: var(--app-primary); }
/* Sent SMS bubbles have their own palette role, including the tail and shadow. */
.app-palette-scope .conversation-message-outbound .conversation-message-content.sms {
    background-color: var(--app-sms); color: var(--app-on-sms);
    border-color: var(--app-sms); box-shadow: 2px 2px 5px rgba(var(--app-sms-rgb), .5);
}
.app-palette-scope .conversation-message-outbound .conversation-message-content.sms::before { border-left-color: var(--app-sms); }
.app-palette-scope .conversation-message-outbound .conversation-message-content.sms a { color: inherit; }
.app-palette-scope .breadcrumb { --bs-breadcrumb-divider-color: var(--app-muted); }
.app-palette-scope .breadcrumb-item.active { color: var(--app-muted); }
.app-palette-scope .valid-feedback { color: var(--app-success); }
.app-palette-scope .invalid-feedback { color: var(--app-danger); }
.app-palette-scope .is-valid { border-color: var(--app-success); }
.app-palette-scope .is-invalid { border-color: var(--app-danger); }
.app-palette-scope .is-valid:focus { border-color: var(--app-success); box-shadow: 0 0 0 .25rem rgba(var(--app-success-rgb), .25); }
.app-palette-scope .is-invalid:focus { border-color: var(--app-danger); box-shadow: 0 0 0 .25rem rgba(var(--app-danger-rgb), .25); }
.app-palette-scope :is(.sidebar, #mobileNav) .nav-link { color: var(--app-on-primary); }
.app-palette-scope .alert-primary { color: var(--bs-alert-color); background-color: var(--bs-alert-bg); border-color: var(--bs-alert-border-color); }
.app-palette-scope .alert-primary .alert-link { color: var(--app-text); }
.app-palette-scope .border-primary { border-color: var(--app-primary) !important; }
.app-palette-scope .badge.bg-primary { color: var(--app-on-primary); }
.app-palette-scope .table-primary { --bs-table-striped-bg: color-mix(in srgb, var(--app-primary) 18%, var(--app-surface)); --bs-table-striped-color: var(--app-text); --bs-table-hover-bg: color-mix(in srgb, var(--app-primary) 22%, var(--app-surface)); --bs-table-hover-color: var(--app-text); --bs-table-active-bg: color-mix(in srgb, var(--app-primary) 25%, var(--app-surface)); --bs-table-active-color: var(--app-text); --bs-table-border-color: var(--app-border); }
.app-palette-scope .alert-secondary { color: var(--bs-alert-color); background-color: var(--bs-alert-bg); border-color: var(--bs-alert-border-color); }
.app-palette-scope .alert-secondary .alert-link { color: var(--app-text); }
.app-palette-scope .border-secondary { border-color: var(--app-secondary) !important; }
.app-palette-scope .badge.bg-secondary { color: var(--app-on-secondary); }
.app-palette-scope .table-secondary { --bs-table-striped-bg: color-mix(in srgb, var(--app-secondary) 18%, var(--app-surface)); --bs-table-striped-color: var(--app-text); --bs-table-hover-bg: color-mix(in srgb, var(--app-secondary) 22%, var(--app-surface)); --bs-table-hover-color: var(--app-text); --bs-table-active-bg: color-mix(in srgb, var(--app-secondary) 25%, var(--app-surface)); --bs-table-active-color: var(--app-text); --bs-table-border-color: var(--app-border); }
.app-palette-scope .alert-success { color: var(--bs-alert-color); background-color: var(--bs-alert-bg); border-color: var(--bs-alert-border-color); }
.app-palette-scope .alert-success .alert-link { color: var(--app-text); }
.app-palette-scope .border-success { border-color: var(--app-success) !important; }
.app-palette-scope .badge.bg-success { color: var(--app-on-success); }
.app-palette-scope .table-success { --bs-table-striped-bg: color-mix(in srgb, var(--app-success) 18%, var(--app-surface)); --bs-table-striped-color: var(--app-text); --bs-table-hover-bg: color-mix(in srgb, var(--app-success) 22%, var(--app-surface)); --bs-table-hover-color: var(--app-text); --bs-table-active-bg: color-mix(in srgb, var(--app-success) 25%, var(--app-surface)); --bs-table-active-color: var(--app-text); --bs-table-border-color: var(--app-border); }
.app-palette-scope .alert-info { color: var(--bs-alert-color); background-color: var(--bs-alert-bg); border-color: var(--bs-alert-border-color); }
.app-palette-scope .alert-info .alert-link { color: var(--app-text); }
.app-palette-scope .border-info { border-color: var(--app-info) !important; }
.app-palette-scope .badge.bg-info { color: var(--app-on-info); }
.app-palette-scope .table-info { --bs-table-striped-bg: color-mix(in srgb, var(--app-info) 18%, var(--app-surface)); --bs-table-striped-color: var(--app-text); --bs-table-hover-bg: color-mix(in srgb, var(--app-info) 22%, var(--app-surface)); --bs-table-hover-color: var(--app-text); --bs-table-active-bg: color-mix(in srgb, var(--app-info) 25%, var(--app-surface)); --bs-table-active-color: var(--app-text); --bs-table-border-color: var(--app-border); }
.app-palette-scope .alert-warning { color: var(--bs-alert-color); background-color: var(--bs-alert-bg); border-color: var(--bs-alert-border-color); }
.app-palette-scope .alert-warning .alert-link { color: var(--app-text); }
.app-palette-scope .border-warning { border-color: var(--app-warning) !important; }
.app-palette-scope .badge.bg-warning { color: var(--app-on-warning); }
.app-palette-scope .table-warning { --bs-table-striped-bg: color-mix(in srgb, var(--app-warning) 18%, var(--app-surface)); --bs-table-striped-color: var(--app-text); --bs-table-hover-bg: color-mix(in srgb, var(--app-warning) 22%, var(--app-surface)); --bs-table-hover-color: var(--app-text); --bs-table-active-bg: color-mix(in srgb, var(--app-warning) 25%, var(--app-surface)); --bs-table-active-color: var(--app-text); --bs-table-border-color: var(--app-border); }
.app-palette-scope .alert-danger { color: var(--bs-alert-color); background-color: var(--bs-alert-bg); border-color: var(--bs-alert-border-color); }
.app-palette-scope .alert-danger .alert-link { color: var(--app-text); }
.app-palette-scope .border-danger { border-color: var(--app-danger) !important; }
.app-palette-scope .badge.bg-danger { color: var(--app-on-danger); }
.app-palette-scope .table-danger { --bs-table-striped-bg: color-mix(in srgb, var(--app-danger) 18%, var(--app-surface)); --bs-table-striped-color: var(--app-text); --bs-table-hover-bg: color-mix(in srgb, var(--app-danger) 22%, var(--app-surface)); --bs-table-hover-color: var(--app-text); --bs-table-active-bg: color-mix(in srgb, var(--app-danger) 25%, var(--app-surface)); --bs-table-active-color: var(--app-text); --bs-table-border-color: var(--app-border); }
.app-palette-scope .alert-light { color: var(--bs-alert-color); background-color: var(--bs-alert-bg); border-color: var(--bs-alert-border-color); }
.app-palette-scope .alert-light .alert-link { color: var(--app-text); }
.app-palette-scope .border-light { border-color: var(--app-background) !important; }
.app-palette-scope .badge.bg-light { color: var(--app-on-background); }
.app-palette-scope .table-light { --bs-table-striped-bg: color-mix(in srgb, var(--app-background) 18%, var(--app-surface)); --bs-table-striped-color: var(--app-text); --bs-table-hover-bg: color-mix(in srgb, var(--app-background) 22%, var(--app-surface)); --bs-table-hover-color: var(--app-text); --bs-table-active-bg: color-mix(in srgb, var(--app-background) 25%, var(--app-surface)); --bs-table-active-color: var(--app-text); --bs-table-border-color: var(--app-border); }
.app-palette-scope .alert-dark { color: var(--bs-alert-color); background-color: var(--bs-alert-bg); border-color: var(--bs-alert-border-color); }
.app-palette-scope .alert-dark .alert-link { color: var(--app-text); }
.app-palette-scope .border-dark { border-color: var(--app-text) !important; }
.app-palette-scope .badge.bg-dark { color: var(--app-on-text); }
.app-palette-scope .table-dark { --bs-table-striped-bg: color-mix(in srgb, var(--app-text) 18%, var(--app-surface)); --bs-table-striped-color: var(--app-text); --bs-table-hover-bg: color-mix(in srgb, var(--app-text) 22%, var(--app-surface)); --bs-table-hover-color: var(--app-text); --bs-table-active-bg: color-mix(in srgb, var(--app-text) 25%, var(--app-surface)); --bs-table-active-color: var(--app-text); --bs-table-border-color: var(--app-border); }

.app-palette-scope :is(.text-primary, .link-primary) { color: rgba(var(--app-primary-ink-rgb), var(--bs-text-opacity, 1)) !important; }

.app-palette-scope :is(.text-secondary, .link-secondary) { color: rgba(var(--app-secondary-ink-rgb), var(--bs-text-opacity, 1)) !important; }

.app-palette-scope :is(.text-success, .link-success) { color: rgba(var(--app-success-ink-rgb), var(--bs-text-opacity, 1)) !important; }

.app-palette-scope :is(.text-info, .link-info) { color: rgba(var(--app-info-ink-rgb), var(--bs-text-opacity, 1)) !important; }

.app-palette-scope :is(.text-warning, .link-warning) { color: rgba(var(--app-warning-ink-rgb), var(--bs-text-opacity, 1)) !important; }

.app-palette-scope :is(.text-danger, .link-danger) { color: rgba(var(--app-danger-ink-rgb), var(--bs-text-opacity, 1)) !important; }

.app-palette-scope :is(.text-light, .link-light) { color: rgba(var(--app-background-ink-rgb), var(--bs-text-opacity, 1)) !important; }

.app-palette-scope :is(.text-dark, .link-dark) { color: rgba(var(--app-text-ink-rgb), var(--bs-text-opacity, 1)) !important; }
.app-palette-scope .bi-star-fill { color: var(--app-accent-ink) !important; }
.app-palette-scope { --bs-black-rgb: var(--app-text-rgb); --bs-white-rgb: var(--app-surface-rgb); --bs-gray: var(--app-muted); --bs-gray-dark: var(--app-text); --bs-white: var(--app-surface); }
.app-palette-scope .text-black-50 { color: rgba(var(--app-text-rgb), .5) !important; }
.app-palette-scope .text-white-50 { color: color-mix(in srgb, var(--app-on-primary) 50%, transparent) !important; }
.app-palette-scope .form-control-plaintext { color: var(--app-text); }
.app-palette-scope.auth-palette { background-color: var(--app-primary); color: var(--app-on-primary); }
.app-palette-scope .auth-form-container { color: var(--app-text); background-color: var(--app-surface); }
.app-palette-scope .auth-form-container button[type=submit] { color: var(--app-on-primary); background-color: var(--app-primary); }
.app-palette-scope .auth-form-container button[type=submit]:hover { color: var(--app-on-primary-hover); background-color: var(--app-primary-hover); }
.app-palette-scope.auth-palette .footer a { color: var(--app-on-primary) !important; }

.app-branding-editor { display: grid; grid-template-columns: minmax(270px, 330px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.app-branding-editor .app-color-row { grid-template-columns: 1fr; gap: .3rem; }
.app-branding-editor .app-color-row small { grid-column: 1; }
.app-candidate-preview { width: 100%; height: 1050px; border: 1px solid var(--app-border); border-radius: .4rem; background: var(--app-surface); }
.app-branding-preview-panel { min-width: 0; }
@media (max-width: 1199px) { .app-branding-editor { grid-template-columns: 1fr; } .app-branding-editor .app-color-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .app-branding-editor .app-color-fields { grid-template-columns: 1fr; } }

.app-palette-scope { --bs-purple: var(--app-purple); --bs-indigo: var(--app-purple); }

/* Communication statuses remain independent of the theme.
   Candidate status filters and unread rings retain their original site.css rules;
   app-palette-legacy.js excludes those rules from palette mapping. */
.app-palette-scope .app-notification-badge,
.app-palette-scope #userNotificationsBadge {
    background-color: #dc3545 !important; color: #ffffff !important;
}
.app-palette-scope .btn.app-logout {
    --bs-btn-color: #ffffff; --bs-btn-bg: #b02a37; --bs-btn-border-color: #b02a37;
    --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #842029; --bs-btn-hover-border-color: #842029;
    --bs-btn-active-color: #ffffff; --bs-btn-active-bg: #842029; --bs-btn-active-border-color: #842029;
    --bs-btn-disabled-color: #ffffff; --bs-btn-disabled-bg: #b02a37; --bs-btn-disabled-border-color: #b02a37;
    --app-button-rgb: 176, 42, 55;
    background-image: none;
}
.app-palette-scope .app-logout :is(i, .icon) { color: inherit; }
.app-fixed-status-legend { display: flex; gap: .5rem; flex-wrap: wrap; }
.app-fixed-status-legend span { padding: .25rem .5rem; border-radius: .25rem; font-size: .8rem; color: #111111; }
.app-fixed-status-legend .app-status-needs-reply { background-color: #ff9000; color: #ffffff; }
.app-fixed-status-legend .app-status-unread { background-color: #0093ff; color: #ffffff; }
.app-fixed-status-legend .app-status-notification { background-color: #dc3545; color: #ffffff; }