/* Adjustments on top of AdminLTE 4 for the G&G portal (_LayoutApp). Colors come from the theme or Website Settings. */

.app-sidebar .brand-image-icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-left: .3rem;
    margin-right: .5rem;
    opacity: .85;
}

/* Avatar with an initials fallback when the user has no photo (or it fails to load). */
.app-avatar {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    font-weight: 700;
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.app-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-avatar-initials {
    display: none;
}

.app-avatar.is-empty img {
    display: none;
}

.app-avatar.is-empty .app-avatar-initials {
    display: inline;
}

.app-avatar-sm {
    width: 2rem;
    height: 2rem;
    margin-right: .4rem;
    font-size: .8rem;
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 3px var(--bs-border-color);
}

.app-avatar-lg {
    width: 4rem;
    height: 4rem;
    font-size: 1.35rem;
    box-shadow: 0 0 0 3px var(--bs-body-bg), 0 .35rem 1rem rgba(var(--bs-primary-rgb), .35);
}

.app-user-toggle {
    display: flex;
    align-items: center;
}

/* Signed-in user menu (header). */
.navbar .user-menu .app-user-menu {
    width: 20rem;
    max-width: calc(100vw - 1rem);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 1rem;
    box-shadow: 0 1rem 2.5rem -.75rem rgba(0, 0, 0, .35);
}

.app-user-menu.show {
    animation: app-user-menu-in 160ms cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes app-user-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.app-user-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 2.5rem 1rem 1.25rem;
    background-image: linear-gradient(135deg, rgba(var(--bs-primary-rgb), .16), rgba(var(--bs-primary-rgb), .02) 70%);
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.app-user-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: .75rem;
    height: .75rem;
    background-size: .75rem;
}

.app-user-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

.app-user-meta {
    font-size: .82rem;
    color: var(--bs-secondary-color);
}

.app-user-role {
    display: inline-flex;
    align-items: center;
    margin-top: .4rem;
    padding: .15rem .55rem;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.app-user-access {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .7rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.app-user-access-label {
    margin-right: .25rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.app-user-access-chip {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .1rem .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    font-size: .75rem;
    color: var(--bs-body-color);
}

.app-user-access-chip .bi {
    color: var(--bs-success);
}

.app-user-actions {
    padding: .4rem;
}

.app-user-action {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .65rem;
    border-radius: .65rem;
    white-space: normal;
    transition: background-color 150ms ease;
}

.app-user-action-icon {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .6rem;
    font-size: 1.05rem;
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
    transition: transform 150ms ease;
}

.app-user-action:hover .app-user-action-icon,
.app-user-action:focus-visible .app-user-action-icon {
    transform: scale(1.06);
}

.app-user-action-title {
    display: block;
    font-weight: 600;
    line-height: 1.2;
}

.app-user-action-hint {
    display: block;
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

.app-user-logout .app-user-action-icon {
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
}

.app-user-logout .app-user-action-title {
    color: var(--bs-danger-text-emphasis);
}

.app-user-logout:hover,
.app-user-logout:focus-visible {
    background-color: var(--bs-danger-bg-subtle);
}

.app-user-actions .dropdown-divider {
    margin: .35rem .25rem;
}

@media (prefers-reduced-motion: reduce) {
    .app-user-menu.show {
        animation: none;
    }

    .app-user-action,
    .app-user-action-icon {
        transition: none;
    }
}

/* Sidebar submenus: indented under their parent with a guide line and muted text so the levels are easy to tell apart. */
.app-sidebar .sidebar-menu .nav-treeview {
    position: relative;
    margin: .15rem 0 .35rem;
    padding: .2rem 0;
    border-radius: var(--bs-border-radius);
    background-color: rgba(var(--bs-emphasis-color-rgb), .04);
}

.app-sidebar .sidebar-menu .nav-treeview::before {
    content: "";
    position: absolute;
    top: .45rem;
    bottom: .45rem;
    left: 1.35rem;
    width: 1px;
    background-color: var(--bs-border-color);
    pointer-events: none;
}

.app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link {
    padding-left: 2.1rem;
    font-size: .9rem;
    color: var(--bs-secondary-color);
}

.app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link > .nav-icon {
    font-size: .85rem;
    opacity: .8;
}

.app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link:hover {
    color: var(--bs-emphasis-color);
}

.app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link.active {
    color: var(--bs-emphasis-color);
    font-weight: 600;
}

.app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link.active > .nav-icon {
    opacity: 1;
    color: var(--bs-primary);
}

.app-sidebar[data-bs-theme=dark] .sidebar-menu .nav-treeview > .nav-item > .nav-link.active > .nav-icon {
    color: var(--bs-primary-text-emphasis);
}

.app-sidebar .sidebar-menu > .nav-item.menu-open > .nav-link {
    font-weight: 600;
}

.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-menu .nav-treeview::before {
    display: none;
}

.app-content-header h3 {
    font-size: 1.5rem;
    font-weight: 400;
}

.app-activity-list li:last-child {
    border-bottom: 0 !important;
}

/* "Recent Activities" panel: docked beside the page from 992px (the page narrows to make room), a sheet over the page below. */
:root {
    --app-activity-width: 300px;
    --app-activity-ease: cubic-bezier(.2, .7, .2, 1);
    --app-activity-shade: rgba(0, 0, 0, .45);
}

.app-activity-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    display: flex;
    flex-direction: column;
    width: var(--app-activity-width);
    max-width: 88vw;
    border-left: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transform: translateX(100%);
    visibility: hidden;
}

.app-activity-open .app-activity-panel {
    transform: none;
    visibility: visible;
}

.app-activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 3.5rem;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.app-activity-header h5 {
    font-size: 1.05rem;
}

.app-activity-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .5rem 1rem 1rem;
}

.app-activity-backdrop {
    display: none;
}

.app-activity-toggle.active {
    color: var(--bs-primary);
}

.app-activity-ready .app-activity-panel {
    transition: transform 250ms var(--app-activity-ease), visibility 0s linear 250ms;
}

.app-activity-ready.app-activity-open .app-activity-panel {
    transition: transform 250ms var(--app-activity-ease), visibility 0s;
}

@media (min-width: 992px) {
    .app-activity-open .app-wrapper {
        padding-right: var(--app-activity-width);
    }

    .app-activity-ready .app-wrapper {
        transition: padding-right 250ms var(--app-activity-ease);
    }
}

@media (min-width: 1600px) {
    :root {
        --app-activity-width: 340px;
    }
}

@media (max-width: 991.98px) {
    .app-activity-panel {
        z-index: 1045;
        width: 360px;
        box-shadow: var(--bs-box-shadow-lg);
    }

    .app-activity-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        display: block;
        background-color: var(--app-activity-shade);
        opacity: 0;
        visibility: hidden;
    }

    .app-activity-open .app-activity-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .app-activity-ready .app-activity-backdrop {
        transition: opacity 250ms ease, visibility 0s linear 250ms;
    }

    .app-activity-ready.app-activity-open .app-activity-backdrop {
        transition: opacity 250ms ease, visibility 0s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-activity-ready .app-activity-panel,
    .app-activity-ready .app-wrapper,
    .app-activity-ready .app-activity-backdrop {
        transition: none !important;
    }
}

/* Tables: keep long text readable and let wide tables scroll on phones. */
.table td,
.table th {
    vertical-align: middle;
}

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

@media (max-width: 575.98px) {
    .app-content-header h3 {
        font-size: 1.25rem;
    }

    .card-body {
        padding: .75rem;
    }

    .btn-toolbar-stack > .btn,
    .btn-toolbar-stack > form {
        width: 100%;
    }
}

/* Login and other pages without the app shell. */
.login-page .login-box,
.register-page .register-box {
    width: 100%;
    max-width: 400px;
    padding: 0 1rem;
}

.login-logo img {
    max-height: 72px;
    max-width: 100%;
}

/* Flex children that hold user text must be allowed to shrink below their content width. */
.min-w-0 {
    min-width: 0;
}

/* Saved notes and messages: long words, images and tables stay within the card. */
.app-history-detail,
#chat-box-notes .small,
#chat-box,
#chat-box-additionalcontact {
    overflow-wrap: anywhere;
}

.app-history-detail img,
#chat-box-notes img,
.app-history-detail table,
#chat-box-notes table {
    max-width: 100%;
    height: auto;
}

/* Dashboard: "Today" hero, KPI cards, capped lists, loading and empty states, company finder. */
:root {
    --app-dash-ease: cubic-bezier(.2, .7, .2, 1);
    --app-hero-on: #fff;
    --app-hero-on-muted: rgba(255, 255, 255, .8);
    --app-hero-glass: rgba(255, 255, 255, .14);
    --app-hero-glass-strong: rgba(255, 255, 255, .22);
    --app-hero-shade: rgba(0, 0, 0, .4);
}

.app-dashboard {
    padding-top: .75rem;
}

.app-dashboard > section,
.app-dashboard > .row {
    animation: app-dash-rise 280ms var(--app-dash-ease) both;
}

.app-dashboard > :nth-child(3) { animation-delay: 40ms; }
.app-dashboard > :nth-child(4) { animation-delay: 80ms; }
.app-dashboard > :nth-child(5) { animation-delay: 120ms; }
.app-dashboard > :nth-child(6) { animation-delay: 160ms; }

@keyframes app-dash-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.app-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin-bottom: 1rem;
    padding: 1.5rem 1.75rem;
    overflow: hidden;
    border-radius: 1rem;
    color: var(--app-hero-on);
    background-color: var(--bs-primary);
    background-image:
        radial-gradient(circle at 8% 0%, var(--app-hero-glass-strong) 0, transparent 42%),
        radial-gradient(circle at 100% 100%, var(--app-hero-shade) 0, transparent 55%),
        linear-gradient(135deg, transparent 40%, var(--app-hero-shade) 100%);
    box-shadow: 0 .75rem 2rem -1rem rgba(var(--bs-primary-rgb), .7);
}

.app-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--app-hero-glass) 1px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(110deg, #000 0%, transparent 60%);
    mask-image: linear-gradient(110deg, #000 0%, transparent 60%);
    pointer-events: none;
}

.app-hero > * {
    position: relative;
}

.app-hero-main {
    flex: 1 1 26rem;
    min-width: 0;
}

.app-hero-date {
    margin-bottom: .2rem;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--app-hero-on-muted);
}

.app-hero-greeting {
    margin-bottom: .85rem;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.app-hero-focus {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.app-focus-label {
    margin-right: .25rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--app-hero-on-muted);
}

.app-focus-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 2rem;
    font-size: .9rem;
    text-decoration: none;
    color: var(--bs-emphasis-color);
    background-color: var(--bs-body-bg);
    box-shadow: 0 .25rem .75rem var(--app-hero-shade);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.app-focus-chip[hidden] {
    display: none;
}

a.app-focus-chip:hover,
a.app-focus-chip:focus-visible {
    color: var(--bs-emphasis-color);
    transform: translateY(-1px);
    box-shadow: 0 .4rem 1rem var(--app-hero-shade);
}

.app-focus-chip .bi {
    font-size: 1rem;
}

.app-focus-danger .bi { color: var(--bs-danger); }
.app-focus-info .bi { color: var(--bs-info-text-emphasis); }
.app-focus-primary .bi { color: var(--bs-primary); }
.app-focus-warning .bi { color: var(--bs-warning-text-emphasis); }
.app-focus-success .bi { color: var(--bs-success); }

.app-hero-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .9rem;
}

.app-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

.app-hero-primary {
    font-weight: 600;
    color: var(--bs-primary);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.app-hero-primary:hover,
.app-hero-primary:focus-visible {
    color: var(--bs-primary);
    transform: translateY(-1px);
    box-shadow: 0 .4rem 1rem var(--app-hero-shade);
}

.app-hero-ghost {
    color: var(--app-hero-on);
    border-color: var(--app-hero-glass-strong);
    background-color: var(--app-hero-glass);
}

.app-hero-ghost:hover,
.app-hero-ghost:focus-visible {
    color: var(--app-hero-on);
    border-color: var(--app-hero-on-muted);
    background-color: var(--app-hero-glass-strong);
}

.app-hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .25rem 1.25rem;
    font-size: .85rem;
    color: var(--app-hero-on-muted);
}

.app-hero-stats .bi {
    margin-right: .35rem;
}

.app-hero-stats strong {
    margin-right: .25rem;
    color: var(--app-hero-on);
}

.app-kpi {
    position: relative;
    display: flex;
    align-items: center;
    gap: .9rem;
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: .85rem;
    text-decoration: none;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow-sm);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.app-kpi:hover,
.app-kpi:focus-visible {
    color: var(--bs-body-color);
    border-color: var(--app-kpi-accent);
    box-shadow: 0 .5rem 1.25rem -.5rem rgba(var(--app-kpi-rgb), .45);
    transform: translateY(-2px);
}

.app-kpi-primary { --app-kpi-accent: var(--bs-primary); --app-kpi-rgb: var(--bs-primary-rgb); --app-kpi-bg: var(--bs-primary-bg-subtle); --app-kpi-fg: var(--bs-primary-text-emphasis); }
.app-kpi-success { --app-kpi-accent: var(--bs-success); --app-kpi-rgb: var(--bs-success-rgb); --app-kpi-bg: var(--bs-success-bg-subtle); --app-kpi-fg: var(--bs-success-text-emphasis); }
.app-kpi-warning { --app-kpi-accent: var(--bs-warning); --app-kpi-rgb: var(--bs-warning-rgb); --app-kpi-bg: var(--bs-warning-bg-subtle); --app-kpi-fg: var(--bs-warning-text-emphasis); }
.app-kpi-danger { --app-kpi-accent: var(--bs-danger); --app-kpi-rgb: var(--bs-danger-rgb); --app-kpi-bg: var(--bs-danger-bg-subtle); --app-kpi-fg: var(--bs-danger-text-emphasis); }
.app-kpi-info { --app-kpi-accent: var(--bs-info); --app-kpi-rgb: var(--bs-info-rgb); --app-kpi-bg: var(--bs-info-bg-subtle); --app-kpi-fg: var(--bs-info-text-emphasis); }

.app-kpi-icon {
    flex: 0 0 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .8rem;
    font-size: 1.35rem;
    color: var(--app-kpi-fg);
    background-color: var(--app-kpi-bg);
}

.app-kpi-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--bs-emphasis-color);
}

.app-kpi-label {
    font-size: .9rem;
    font-weight: 600;
}

.app-kpi-hint {
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

.app-kpi-go {
    margin-left: auto;
    align-self: flex-start;
    color: var(--bs-secondary-color);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 150ms ease, transform 150ms ease;
}

.app-kpi:hover .app-kpi-go,
.app-kpi:focus-visible .app-kpi-go {
    opacity: 1;
    transform: none;
    color: var(--app-kpi-accent);
}

.app-capped-list {
    max-height: 26rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.app-capped-map {
    max-height: 350px;
}

.app-list-item {
    transition: background-color 150ms ease;
}

.app-list-item:hover {
    background-color: var(--bs-tertiary-bg);
}

.app-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: 1.75rem 1rem;
    text-align: center;
}

.app-empty-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .35rem;
    border-radius: 50%;
    font-size: 1.3rem;
    color: var(--bs-success-text-emphasis);
    background-color: var(--bs-success-bg-subtle);
}

.app-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    background-color: var(--bs-body-bg);
}

.app-loading-overlay[hidden] {
    display: none;
}

.app-finder-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    text-align: left;
    background-color: transparent;
    color: var(--bs-body-color);
    transition: background-color 150ms ease;
}

.app-finder-toggle:hover,
.app-finder-toggle:focus-visible {
    background-color: var(--bs-tertiary-bg);
}

.app-finder-chevron {
    transition: transform 200ms var(--app-dash-ease);
}

.app-finder-toggle[aria-expanded="true"] .app-finder-chevron {
    transform: rotate(180deg);
}

.app-finder .card {
    box-shadow: none;
}

@media (max-width: 767.98px) {
    .app-hero {
        padding: 1.25rem;
    }

    .app-hero-side {
        align-items: stretch;
        width: 100%;
    }

    .app-hero-actions,
    .app-hero-stats {
        justify-content: flex-start;
    }

    .app-hero-primary {
        flex: 1 1 100%;
    }

    .app-hero-ghost {
        flex: 1 1 0;
    }

    .app-kpi {
        padding: .85rem;
    }

    .app-kpi-value {
        font-size: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .app-kpi {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
        padding: .75rem;
    }

    .app-kpi-icon {
        flex-basis: auto;
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.05rem;
    }

    .app-kpi-label {
        font-size: .82rem;
        line-height: 1.25;
    }

    .app-kpi-hint,
    .app-kpi-go {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-dashboard > section,
    .app-dashboard > .row {
        animation: none;
    }

    .app-kpi,
    .app-kpi-go,
    .app-focus-chip,
    .app-hero-primary,
    .app-finder-chevron {
        transition: none;
    }
}

/* Dashboard: chart, map and the "Activities done today" ring. */
.app-chart {
    width: 100%;
    height: 250px;
}

.app-map {
    width: 100%;
    height: 350px;
}

.app-activity-ring {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    max-width: 100%;
    border-radius: 50%;
    border: 12px solid var(--bs-primary);
    color: var(--bs-body-color);
}

.app-activity-ring-number {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.app-activity-ring-label {
    color: var(--bs-secondary-color);
}

#flotTip {
    padding: 3px 8px;
    color: #fff;
    background-color: #343a40 !important;
    border-radius: 4px !important;
    border-width: 0 !important;
    z-index: 1100;
    font-size: .875rem;
}

.jvectormap-label {
    position: absolute;
    display: none;
    border-radius: 4px;
    background: #343a40;
    color: #fff;
    font-size: .875rem;
    padding: 3px 6px;
    z-index: 1100;
}

.jvectormap-zoomin,
.jvectormap-zoomout {
    position: absolute;
    left: 10px;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: #343a40;
    color: #fff;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.jvectormap-zoomin {
    top: 10px;
}

.jvectormap-zoomout {
    top: 36px;
}

/* Company page opened at a card (e.g. from Find Contact Persons): scroll clear of the header and flash the card once. */
.app-anchor-card {
    scroll-margin-top: 1rem;
}

.app-anchor-card:target {
    animation: app-anchor-flash 1.6s ease-out 1;
}

@keyframes app-anchor-flash {
    0%, 35% { box-shadow: 0 0 0 .3rem rgba(var(--bs-primary-rgb), .45); }
    100% { box-shadow: 0 0 0 .3rem rgba(var(--bs-primary-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
    .app-anchor-card:target {
        animation: none;
        box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .45);
    }
}

/* Long result tables (e.g. Find Contact Persons "People found"): scroll inside a box about the height of the window,
   with the column headers kept in view. */
.app-scroll-table {
    max-height: max(16rem, calc(100vh - 20rem));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.app-scroll-table > .table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bs-body-bg);
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

/* Company list: the Actions column (edit, notes, alert bell) stays in view when the table scrolls sideways. */
.app-sticky-actions th:last-child,
.app-sticky-actions td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background-color: var(--bs-body-bg);
    background-image: linear-gradient(var(--bs-table-bg), var(--bs-table-bg));
    box-shadow: inset 1px 0 0 var(--bs-border-color), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

/* Company list: the Alert bell rings briefly every few seconds (the old page used an animated GIF). */
.app-alert-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    vertical-align: middle;
    cursor: default;
    box-shadow: 0 .25rem .75rem rgba(var(--bs-danger-rgb), .35);
}

.app-alert-bell::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--bs-danger);
    opacity: 0;
    pointer-events: none;
    animation: app-alert-halo 2.8s ease-out infinite;
}

.app-alert-bell .bi {
    position: relative;
    display: inline-block;
    font-size: .95rem;
    transform-origin: 50% 10%;
    animation: app-alert-ring 2.8s ease-in-out infinite;
}

.app-alert-bell:hover .bi,
.app-alert-bell:hover::before {
    animation-play-state: paused;
}

.table > tbody > tr.app-alert-row > * {
    --bs-table-bg: rgba(var(--bs-danger-rgb), .06);
}

[data-bs-theme=dark] .table > tbody > tr.app-alert-row > * {
    --bs-table-bg: rgba(var(--bs-danger-rgb), .12);
}

@keyframes app-alert-ring {
    0%, 30%, 100% { transform: rotate(0); }
    4% { transform: rotate(18deg); }
    8% { transform: rotate(-16deg); }
    12% { transform: rotate(12deg); }
    16% { transform: rotate(-8deg); }
    20% { transform: rotate(4deg); }
    24% { transform: rotate(-2deg); }
}

@keyframes app-alert-halo {
    0% { opacity: .55; transform: scale(1); }
    35% { opacity: 0; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
    .app-alert-bell .bi,
    .app-alert-bell::before {
        animation: none;
    }
}

/* "How to import" guide (Import pages): a step-by-step walkthrough in a modal. */
:root {
    --app-guide-on-brand: #fff;
    --app-guide-on-brand-muted: rgba(255, 255, 255, .82);
    --app-guide-glass: rgba(255, 255, 255, .14);
    --app-guide-shade: rgba(0, 0, 0, .35);
    --app-guide-ease: cubic-bezier(.2, .7, .2, 1);
}

.app-guide .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 1rem;
}

.app-guide-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding: 1.5rem 3.25rem 1.25rem 1.5rem;
    color: var(--app-guide-on-brand);
    background-color: var(--bs-primary);
    background-image:
        radial-gradient(circle at 10% 0%, var(--app-guide-glass) 0, transparent 50%),
        linear-gradient(150deg, transparent 35%, var(--app-guide-shade) 100%);
}

.app-guide-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.app-guide-hero-icon {
    flex: 0 0 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    font-size: 1.5rem;
    background-color: var(--app-guide-glass);
}

.app-guide-title {
    margin-bottom: .15rem;
    font-size: 1.3rem;
    font-weight: 700;
}

.app-guide-lead {
    color: var(--app-guide-on-brand-muted);
}

.app-guide-trust {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    width: 100%;
    padding: .65rem .85rem;
    border-radius: .75rem;
    font-size: .9rem;
    background-color: var(--app-guide-glass);
}

.app-guide-trust .bi {
    font-size: 1.15rem;
    line-height: 1.2;
}

.app-guide-progress {
    height: 3px;
    background-color: var(--bs-secondary-bg);
}

.app-guide-progress-bar {
    display: block;
    height: 100%;
    background-color: var(--bs-primary);
    transform: scaleX(.2);
    transform-origin: left center;
    transition: transform 250ms var(--app-guide-ease);
}

.app-guide-layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.app-guide-nav {
    flex: 0 0 13.5rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem .75rem;
    border-right: 1px solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
    overflow-y: auto;
}

.app-guide-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .55rem .6rem;
    border: 0;
    border-radius: .65rem;
    text-align: left;
    color: var(--bs-secondary-color);
    background: transparent;
    transition: background-color 150ms ease, color 150ms ease;
}

.app-guide-step:hover {
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
}

.app-guide-step:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .35);
}

.app-guide-step.is-active {
    color: var(--bs-emphasis-color);
    background-color: var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow-sm);
}

.app-guide-step-num {
    position: relative;
    flex: 0 0 1.85rem;
    height: 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bs-border-color);
    border-radius: 50%;
    font-size: .85rem;
    font-weight: 700;
    background-color: var(--bs-body-bg);
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.app-guide-step-num .bi {
    position: absolute;
    opacity: 0;
    transform: scale(.5);
    transition: opacity 200ms ease, transform 200ms var(--app-guide-ease);
}

.app-guide-step.is-active .app-guide-step-num {
    border-color: var(--bs-primary);
    color: var(--app-guide-on-brand);
    background-color: var(--bs-primary);
}

.app-guide-step.is-done .app-guide-step-num {
    border-color: var(--bs-success);
    color: var(--app-guide-on-brand);
    background-color: var(--bs-success);
}

.app-guide-step.is-done .app-guide-step-num > span {
    opacity: 0;
}

.app-guide-step.is-done .app-guide-step-num .bi {
    opacity: 1;
    transform: none;
}

.app-guide-step-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-guide-step-title {
    font-weight: 600;
    line-height: 1.2;
}

.app-guide-here {
    margin-top: .15rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-primary-text-emphasis);
}

.app-guide-body {
    flex: 1 1 auto;
    min-height: 22rem;
    padding: 1.25rem 1.5rem;
}

.app-guide-pane.is-entering-next {
    animation: app-guide-in-next 220ms var(--app-guide-ease) both;
}

.app-guide-pane.is-entering-prev {
    animation: app-guide-in-prev 220ms var(--app-guide-ease) both;
}

.app-guide-pane-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .85rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

.app-guide-pane-title .bi {
    color: var(--bs-primary);
}

.app-guide-list {
    padding-left: 1.2rem;
}

.app-guide-list li {
    margin-bottom: .4rem;
}

.app-guide-list li::marker {
    color: var(--bs-primary);
    font-weight: 700;
}

.app-guide-downloads {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .65rem;
    margin-bottom: 1rem;
}

.app-guide-download {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    text-decoration: none;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.app-guide-download > .bi:first-child {
    font-size: 1.6rem;
    color: var(--bs-success);
}

.app-guide-download span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.app-guide-download small {
    color: var(--bs-secondary-color);
}

.app-guide-download > .bi:last-child {
    color: var(--bs-secondary-color);
    transition: transform 150ms ease, color 150ms ease;
}

.app-guide-download:hover,
.app-guide-download:focus-visible {
    color: var(--bs-body-color);
    border-color: var(--bs-primary);
    box-shadow: 0 .35rem 1rem rgba(var(--bs-primary-rgb), .15);
    transform: translateY(-1px);
}

.app-guide-download:hover > .bi:last-child {
    color: var(--bs-primary);
    transform: translateY(2px);
}

.app-guide-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.app-guide-fact {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 2rem;
    font-size: .85rem;
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.app-guide-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin: .5rem 0 1.25rem;
    padding: 1.5rem;
    border: 2px dashed var(--bs-border-color);
    border-radius: 1rem;
    font-size: 2rem;
    color: var(--bs-secondary-color);
}

.app-guide-illustration .bi:first-child {
    color: var(--bs-success);
}

.app-guide-illustration .bi:last-child {
    color: var(--bs-primary);
}

.app-guide-match {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .65rem;
    color: var(--bs-secondary-color);
}

.app-guide-chip {
    padding: .35rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    font-size: .9rem;
    font-family: var(--bs-font-monospace);
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
}

.app-guide-chip-target {
    border-color: var(--bs-primary-border-subtle);
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.app-guide-chip-muted {
    color: var(--bs-secondary-color);
    text-decoration: line-through;
}

.app-guide-legend {
    display: grid;
    gap: .5rem;
    margin-bottom: 1rem;
}

.app-guide-legend-item {
    display: grid;
    grid-template-columns: 11rem 1fr;
    align-items: center;
    gap: .75rem;
    padding: .55rem .75rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: .65rem;
    font-size: .9rem;
}

.app-guide-legend-item .badge {
    justify-self: start;
    white-space: normal;
    text-align: left;
}

.app-guide-callout {
    display: flex;
    gap: .65rem;
    padding: .75rem .9rem;
    border-left: 3px solid var(--bs-warning);
    border-radius: .5rem;
    font-size: .9rem;
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.app-guide-callout .bi {
    font-size: 1.1rem;
}

.app-guide-footer {
    gap: .5rem;
}

.app-guide-count {
    margin-right: auto;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

@keyframes app-guide-in-next {
    from { opacity: 0; transform: translateX(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes app-guide-in-prev {
    from { opacity: 0; transform: translateX(-14px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 767.98px) {
    .app-guide-layout {
        flex-direction: column;
    }

    .app-guide-nav {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: space-between;
        padding: .6rem .75rem;
        border-right: 0;
        border-bottom: 1px solid var(--bs-border-color);
        overflow: visible;
    }

    .app-guide-step {
        width: auto;
        padding: .3rem;
    }

    .app-guide-step-text {
        display: none;
    }

    .app-guide-step.is-active .app-guide-step-text {
        display: flex;
    }

    .app-guide-body {
        min-height: 0;
        padding: 1rem;
    }

    .app-guide-legend-item {
        grid-template-columns: 1fr;
        gap: .35rem;
    }
}

@media (max-width: 575.98px) {
    .app-guide .modal-content {
        border-radius: 0;
    }

    .app-guide-hero {
        padding: 1.1rem 3rem 1rem 1rem;
    }

    .app-guide-hero-icon {
        display: none;
    }

    .app-guide-title {
        font-size: 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-guide-pane.is-entering-next,
    .app-guide-pane.is-entering-prev {
        animation: none;
    }

    .app-guide-progress-bar,
    .app-guide-step-num,
    .app-guide-step-num .bi,
    .app-guide-download {
        transition: none;
    }
}

/* Sign-in page. Brand colors follow the theme primary (Website Settings) and the light/dark mode. */
:root {
    --app-signin-shade: rgba(0, 0, 0, .45);
    --app-signin-glow: rgba(255, 255, 255, .18);
    --app-signin-on-brand: #fff;
    --app-signin-on-brand-muted: rgba(255, 255, 255, .8);
    --app-signin-chip: rgba(255, 255, 255, .14);
    --app-signin-ease: cubic-bezier(.2, .7, .2, 1);
    --app-signin-radius: 1rem;
}

.app-signin {
    min-height: 100vh;
    margin: 0;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.app-signin-shell {
    display: flex;
    min-height: 100vh;
}

.app-signin-brand {
    position: relative;
    flex: 0 0 46%;
    display: flex;
    align-items: center;
    padding: 3rem clamp(2rem, 5vw, 5rem);
    overflow: hidden;
    color: var(--app-signin-on-brand);
    background-color: var(--bs-primary);
    background-image:
        radial-gradient(circle at 15% 10%, var(--app-signin-glow) 0, transparent 45%),
        radial-gradient(circle at 90% 95%, var(--app-signin-shade) 0, transparent 55%),
        linear-gradient(160deg, transparent 30%, var(--app-signin-shade) 100%);
}

.app-signin-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--app-signin-chip) 1px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 70%);
    mask-image: linear-gradient(135deg, #000 0%, transparent 70%);
    pointer-events: none;
}

.app-signin-brand-inner {
    position: relative;
    max-width: 30rem;
    animation: app-signin-rise 300ms var(--app-signin-ease) both;
}

/* Brand mark: the same building icon and site name as the sidebar brand once signed in. */
.app-signin-brandmark {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.app-signin-brandmark .bi {
    flex: 0 0 auto;
    font-size: 1.15em;
    line-height: 1;
    opacity: .85;
}

.app-signin-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: .75rem;
}

.app-signin-tagline {
    font-size: 1.1rem;
    color: var(--app-signin-on-brand-muted);
    margin-bottom: 2rem;
}

.app-signin-features li {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: .9rem;
    animation: app-signin-rise 300ms var(--app-signin-ease) both;
}

.app-signin-features li:nth-child(1) { animation-delay: 80ms; }
.app-signin-features li:nth-child(2) { animation-delay: 140ms; }
.app-signin-features li:nth-child(3) { animation-delay: 200ms; }

.app-signin-features .bi {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .65rem;
    background-color: var(--app-signin-chip);
}

.app-signin-main {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4.5rem 1.5rem 2rem;
}

.app-signin-toolbar {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.app-signin-icon-btn {
    color: var(--bs-secondary-color);
    font-size: 1.15rem;
}

.app-signin-icon-btn:hover,
.app-signin-icon-btn:focus-visible {
    color: var(--bs-body-color);
}

.app-signin-panel {
    width: 100%;
    max-width: 400px;
    animation: app-signin-rise 300ms var(--app-signin-ease) 60ms both;
}

.app-signin-panel.is-shaking {
    animation: app-signin-shake 280ms ease-in-out;
}

/* Company logo (Website Settings) at the top of the sign-in form, like a letterhead. The artwork is made for a light
   background, so in dark mode it is shown reversed (silver). */
.app-signin-company-logo {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.app-signin-company-logo[hidden] {
    display: none;
}

.app-signin-company-logo img {
    display: block;
    width: auto;
    height: auto;
    max-height: 64px;
    max-width: 100%;
}

[data-bs-theme=dark] .app-signin-company-logo img {
    filter: grayscale(1) invert(1) brightness(1.15);
}

@media (max-width: 575.98px) {
    .app-signin-company-logo {
        margin-bottom: 1.25rem;
        padding-bottom: 1rem;
    }

    .app-signin-company-logo img {
        max-height: 48px;
    }
}

.app-signin-greeting {
    margin-bottom: .25rem;
    font-weight: 600;
    color: var(--bs-primary);
}

[data-bs-theme=dark] .app-signin-greeting {
    color: var(--bs-primary-text-emphasis);
}

.app-signin-heading {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.75rem;
}

.app-signin-returning {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .9rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: var(--bs-tertiary-bg);
    animation: app-signin-fade 200ms ease-out both;
}

.app-signin-avatar {
    flex: 0 0 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    color: var(--app-signin-on-brand);
    background-color: var(--bs-primary);
}

.app-signin-field {
    margin-bottom: 1.25rem;
}

.app-signin-field .form-label {
    font-weight: 600;
    margin-bottom: .4rem;
}

.app-signin-input {
    position: relative;
}

.app-signin-input > .bi {
    position: absolute;
    top: 50%;
    left: 1rem;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
    transition: color 150ms ease;
}

.app-signin-input .form-control {
    padding-left: 2.75rem;
    border-radius: .75rem;
    background-color: var(--bs-body-bg);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.app-signin-input .form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .18);
}

.app-signin-input:focus-within > .bi {
    color: var(--bs-primary);
}

.app-signin-input .form-control.is-invalid,
.app-signin-input .form-control.is-invalid:focus {
    border-color: var(--bs-form-invalid-border-color);
    background-image: none;
}

.app-signin-input .form-control.is-invalid:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .18);
}

.app-signin-input:has(.is-invalid) > .bi {
    color: var(--bs-form-invalid-color);
}

.app-signin #password {
    padding-right: 3rem;
}

.app-signin-reveal {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--bs-secondary-color);
    transition: color 150ms ease, background-color 150ms ease;
}

.app-signin-reveal:hover,
.app-signin-reveal:focus-visible {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
}

.app-signin-hint {
    margin-top: .4rem;
    font-size: .875rem;
    color: var(--bs-warning-text-emphasis);
    animation: app-signin-fade 150ms ease-out both;
}

.app-signin-alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .9rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--bs-danger-border-subtle);
    border-radius: .75rem;
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
    animation: app-signin-fade 200ms ease-out both;
}

.app-signin-alert[hidden],
.app-signin-hint[hidden],
.app-signin-returning[hidden],
.app-signin-field[hidden] {
    display: none;
}

.app-signin-alert .bi {
    margin-top: .1rem;
}

.app-signin-submit {
    position: relative;
    border-radius: .75rem;
    font-weight: 600;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 200ms ease, border-color 200ms ease;
}

.app-signin-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 .5rem 1.25rem rgba(var(--bs-primary-rgb), .35);
}

.app-signin-submit:active:not(:disabled) {
    transform: translateY(0);
}

.app-signin-submit .bi-arrow-right {
    display: inline-block;
    transition: transform 150ms ease;
}

.app-signin-submit:hover .bi-arrow-right {
    transform: translateX(3px);
}

.app-signin-submit-state {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.app-signin-submit:not([data-state]) [data-state="idle"],
.app-signin-submit[data-state="idle"] [data-state="idle"],
.app-signin-submit[data-state="loading"] [data-state="loading"],
.app-signin-submit[data-state="success"] [data-state="success"] {
    display: inline-flex;
    animation: app-signin-fade 150ms ease-out both;
}

.app-signin-submit[data-state="loading"]:disabled {
    opacity: .85;
}

.app-signin-submit[data-state="success"],
.app-signin-submit[data-state="success"]:disabled {
    opacity: 1;
    color: var(--app-signin-on-brand);
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

.app-signin-footer {
    margin-top: 2.5rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

@keyframes app-signin-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes app-signin-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes app-signin-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(3px); }
}

@media (max-width: 991.98px) {
    .app-signin-shell {
        flex-direction: column;
    }

    .app-signin-brand {
        flex: 0 0 auto;
        padding: 2rem 1.5rem 3.25rem;
    }

    .app-signin-brand-inner {
        display: flex;
        align-items: center;
        gap: 1rem;
        min-width: 0;
    }

    .app-signin-title {
        font-size: 1.4rem;
        margin-bottom: 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .app-signin-tagline,
    .app-signin-features {
        display: none;
    }

    .app-signin-main {
        flex: 1 0 auto;
        justify-content: flex-start;
        margin-top: -1.5rem;
        padding: 2.5rem 1rem 1.5rem;
        border-radius: 1.5rem 1.5rem 0 0;
        background-color: var(--bs-body-bg);
    }

    .app-signin-toolbar {
        top: .5rem;
        right: .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-signin *,
    .app-signin *::before,
    .app-signin *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
    }
}

/* Company Types (Manage/CompanyTypes): hero with usage tiles, usage column with bars, add row shown first. */
.app-ctypes {
    padding-top: .75rem;
}

.app-ctypes > * {
    animation: app-dash-rise 280ms var(--app-dash-ease) both;
}

.app-ctypes-lead {
    max-width: 40rem;
    color: var(--app-hero-on-muted);
}

.app-ctypes-hero .app-lres-stat-value.text-truncate {
    max-width: 100%;
    font-size: 1rem;
}

.app-ctypes-usage-col {
    width: 16rem;
}

.app-ntypes-last {
    display: block;
    margin-top: .2rem;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.app-ntypes-rule {
    display: inline-flex;
    align-items: center;
    padding: .15rem .6rem;
    border-radius: 2rem;
    font-size: .78rem;
    white-space: nowrap;
    color: var(--bs-secondary-color);
    background-color: var(--bs-secondary-bg);
}

.app-ntypes-rule.is-contact {
    color: var(--bs-info-text-emphasis);
    background-color: var(--bs-info-bg-subtle);
}

.app-var-rename-hint {
    display: flex;
    align-items: flex-start;
    margin-top: .35rem;
    font-size: .78rem;
    color: var(--bs-warning-text-emphasis);
    animation: app-signin-fade 150ms ease-out both;
}

.app-var-rename-hint[hidden] {
    display: none;
}

.app-var-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .35rem .2rem .7rem;
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
    animation: app-signin-fade 150ms ease-out both;
}

.app-var-filter-chip[hidden] {
    display: none;
}

.app-var-filter-chip .btn-close {
    width: .55rem;
    height: .55rem;
    padding: .3rem;
    background-size: .55rem;
}

.app-ctypes-usage-link {
    display: block;
    text-decoration: none;
    color: var(--bs-body-color);
}

.app-ctypes-usage-link:hover .app-ctypes-usage-text,
.app-ctypes-usage-link:focus-visible .app-ctypes-usage-text {
    color: var(--bs-primary);
}

.app-ctypes-usage-text {
    font-size: .85rem;
    transition: color 150ms ease;
}

.app-ctypes-bar {
    display: block;
    height: .35rem;
    margin-top: .3rem;
    overflow: hidden;
    border-radius: 1rem;
    background-color: var(--bs-secondary-bg);
}

.app-ctypes-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--bs-primary);
}

.app-ctypes-unused {
    display: inline-flex;
    align-items: center;
    padding: .15rem .6rem;
    border-radius: 2rem;
    font-size: .78rem;
    color: var(--bs-warning-text-emphasis);
    background-color: var(--bs-warning-bg-subtle);
}

.app-ctypes-add .app-var-add > td {
    background-color: var(--bs-tertiary-bg);
}

.app-ctypes-add-field {
    position: relative;
}

.app-ctypes-add-field > .bi {
    position: absolute;
    top: 50%;
    left: .8rem;
    transform: translateY(-50%);
    color: var(--bs-primary);
    pointer-events: none;
}

.app-ctypes-add-field .form-control {
    padding-left: 2.3rem;
}

.app-ctypes-add td:has(.is-invalid) .invalid-feedback {
    display: block;
}

@media (max-width: 767.98px) {
    .app-ctypes-usage-col {
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-ctypes > * {
        animation: none;
    }
}

/* Find New Leads (Leads/Index): search hero, daily quota ring, how-it-works steps and recent searches as work items. */
.app-leads {
    padding-top: .75rem;
}

.app-leads > * {
    animation: app-dash-rise 280ms var(--app-dash-ease) both;
}

.app-leads > :nth-child(2) { animation-delay: 40ms; }
.app-leads > :nth-child(3) { animation-delay: 80ms; }

.app-leads-hero {
    align-items: stretch;
}

.app-leads-hero .app-hero-main {
    flex: 1 1 36rem;
}

.app-leads-bar {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: end;
    padding: 1rem;
    border-radius: .9rem;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    box-shadow: 0 .75rem 1.75rem -.75rem var(--app-hero-shade);
}

.app-leads-label {
    display: block;
    margin-bottom: .3rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.app-leads-input {
    position: relative;
}

.app-leads-input > .bi {
    position: absolute;
    top: 50%;
    left: .9rem;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.app-leads-input .form-control {
    padding-left: 2.4rem;
}

.app-leads-bar .form-control,
.app-leads-bar .form-select {
    min-height: 3rem;
    border-radius: .65rem;
}

.app-leads-bar .btn-lg {
    min-height: 3rem;
    border-radius: .65rem;
    font-weight: 600;
    white-space: nowrap;
}

.app-leads-field:has(.is-invalid) .invalid-feedback {
    display: block;
}

.app-leads-examples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
}

.app-leads-example {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    border: 1px solid var(--app-hero-glass-strong);
    border-radius: 2rem;
    font-size: .85rem;
    text-decoration: none;
    color: var(--app-hero-on);
    background-color: var(--app-hero-glass);
    transition: background-color 150ms ease, transform 150ms ease;
}

.app-leads-example:hover,
.app-leads-example:focus-visible {
    color: var(--app-hero-on);
    background-color: var(--app-hero-glass-strong);
    transform: translateY(-1px);
}

.app-leads-quota-card {
    display: flex;
    flex: 0 1 15rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1rem;
    border-radius: .9rem;
    text-align: center;
    background-color: var(--app-hero-glass);
}

.app-leads-ring {
    --app-leads-ring-color: var(--app-hero-on);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--bs-primary) 78%, transparent 80% 100%),
        conic-gradient(var(--app-hero-glass-strong) calc(var(--app-leads-used) * 1%), var(--app-leads-ring-color) 0);
}

.app-leads-ring.is-low {
    --app-leads-ring-color: var(--bs-warning);
}

.app-leads-ring.is-empty {
    --app-leads-ring-color: var(--bs-danger);
}

.app-leads-ring-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.app-leads-ring-label {
    font-size: .75rem;
    color: var(--app-hero-on-muted);
}

.app-leads-quota-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-size: .85rem;
}

.app-leads-quota-text span {
    font-size: .78rem;
    color: var(--app-hero-on-muted);
}

.app-leads-quota-text .app-leads-quota-main {
    font-size: .85rem;
    color: var(--app-hero-on);
}

.app-leads-quota-text .app-leads-quota-warn {
    color: var(--app-hero-on);
    font-weight: 600;
}

.app-leads-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin: 0 0 1rem;
    counter-reset: app-leads-step;
}

.app-leads-steps li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: .85rem;
    font-size: .82rem;
    color: var(--bs-secondary-color);
    background-color: var(--bs-body-bg);
    counter-increment: app-leads-step;
}

.app-leads-steps li strong {
    display: block;
    margin-bottom: .1rem;
    font-size: .9rem;
    color: var(--bs-emphasis-color);
}

.app-leads-steps li strong::before {
    content: counter(app-leads-step) ". ";
    color: var(--bs-primary);
}

.app-leads-step-icon {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .6rem;
    font-size: 1.05rem;
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.app-leads-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 12rem auto;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    transition: background-color 150ms ease;
}

.app-leads-item:hover {
    background-color: var(--bs-tertiary-bg);
}

.app-leads-status {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .7rem;
    font-size: 1.1rem;
}

.app-leads-status-done { color: var(--bs-success-text-emphasis); background-color: var(--bs-success-bg-subtle); }
.app-leads-status-running { color: var(--bs-info-text-emphasis); background-color: var(--bs-info-bg-subtle); }
.app-leads-status-failed { color: var(--bs-danger-text-emphasis); background-color: var(--bs-danger-bg-subtle); }

.app-leads-query {
    display: block;
    font-weight: 600;
    text-decoration: none;
    color: var(--bs-emphasis-color);
    overflow-wrap: anywhere;
}

.app-leads-query:hover {
    color: var(--bs-primary);
}

.app-leads-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    margin-top: .15rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.app-leads-tag .bi {
    margin-right: .25rem;
}

.app-leads-review-text {
    font-size: .82rem;
    color: var(--bs-secondary-color);
}

.app-leads-review-text strong {
    font-size: 1rem;
    color: var(--bs-warning-text-emphasis);
}

.app-leads-review-bar {
    height: .35rem;
    margin-top: .35rem;
    overflow: hidden;
    border-radius: 1rem;
    background-color: var(--bs-warning-bg-subtle);
}

.app-leads-review-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--bs-success);
}

.app-leads-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    justify-content: flex-end;
}

@media (max-width: 1399.98px) {
    .app-leads-bar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .app-leads-field-query {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1199.98px) {
    .app-leads-bar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .app-leads-field-query,
    .app-leads-field-submit {
        grid-column: 1 / -1;
    }

    .app-leads-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .app-leads-quota-card {
        flex: 1 1 100%;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }

    .app-leads-ring {
        width: 5rem;
        height: 5rem;
        flex: 0 0 auto;
    }

    .app-leads-ring-value {
        font-size: 1.4rem;
    }

    .app-leads-item {
        grid-template-columns: auto minmax(0, 1fr);
        gap: .5rem .85rem;
    }

    .app-leads-review,
    .app-leads-actions {
        grid-column: 2;
    }

    .app-leads-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .app-leads-bar {
        grid-template-columns: minmax(0, 1fr);
        padding: .75rem;
    }

    .app-leads-examples {
        justify-content: flex-start;
    }

    .app-leads-examples .app-focus-label {
        flex: 0 0 100%;
        margin: 0;
    }

    .app-leads-example {
        max-width: 100%;
        min-width: 0;
    }

    .app-leads-example > .bi {
        flex: 0 0 auto;
    }

    .app-leads-example > span {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .app-leads-steps {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-leads > * {
        animation: none;
    }

    .app-leads-example,
    .app-leads-item {
        transition: none;
    }
}

/* Lead search results (Leads/Results): results hero with filter stat tiles, toolbar, sticky bulk-action bar. */
.app-lres {
    padding-top: .75rem;
}

.app-lres > * {
    animation: app-dash-rise 280ms var(--app-dash-ease) both;
}

/* AdminLTE scrolls .app-main itself; on this page the window scrolls so the bulk bar can stick. */
body.layout-fixed .app-main:has(.app-lres-bulk) {
    overflow: visible;
}

.app-lres-hero .app-hero-main {
    flex: 1 1 30rem;
}

.app-lres-hero .app-hero-greeting {
    margin-bottom: .6rem;
}

.app-lres-back {
    display: inline-flex;
    align-items: center;
    margin-bottom: .35rem;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--app-hero-on-muted);
}

.app-lres-back:hover,
.app-lres-back:focus-visible {
    color: var(--app-hero-on);
}

.app-lres-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.app-lres-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .65rem;
    border-radius: 2rem;
    font-size: .8rem;
    color: var(--app-hero-on);
    background-color: var(--app-hero-glass);
}

.app-lres-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .6rem;
    width: 100%;
}

.app-lres-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: .65rem;
    align-items: center;
    padding: .7rem .8rem;
    border: 1px solid transparent;
    border-radius: .8rem;
    text-align: left;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    box-shadow: 0 .4rem 1rem -.6rem var(--app-hero-shade);
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.app-lres-stat:hover,
.app-lres-stat:focus-visible {
    transform: translateY(-2px);
    border-color: var(--app-kpi-accent);
}

.app-lres-stat.is-active {
    border-color: var(--app-kpi-accent);
    box-shadow: 0 0 0 .2rem rgba(var(--app-kpi-rgb), .35);
}

.app-lres-stat-warning { --app-kpi-accent: var(--bs-warning); --app-kpi-rgb: var(--bs-warning-rgb); --app-kpi-bg: var(--bs-warning-bg-subtle); --app-kpi-fg: var(--bs-warning-text-emphasis); }
.app-lres-stat-success { --app-kpi-accent: var(--bs-success); --app-kpi-rgb: var(--bs-success-rgb); --app-kpi-bg: var(--bs-success-bg-subtle); --app-kpi-fg: var(--bs-success-text-emphasis); }
.app-lres-stat-orange { --app-kpi-accent: var(--bs-orange); --app-kpi-rgb: 253, 126, 20; --app-kpi-bg: var(--bs-warning-bg-subtle); --app-kpi-fg: var(--bs-warning-text-emphasis); }
.app-lres-stat-danger { --app-kpi-accent: var(--bs-danger); --app-kpi-rgb: var(--bs-danger-rgb); --app-kpi-bg: var(--bs-danger-bg-subtle); --app-kpi-fg: var(--bs-danger-text-emphasis); }
.app-lres-stat-info { --app-kpi-accent: var(--bs-info); --app-kpi-rgb: var(--bs-info-rgb); --app-kpi-bg: var(--bs-info-bg-subtle); --app-kpi-fg: var(--bs-info-text-emphasis); }
.app-lres-stat-primary { --app-kpi-accent: var(--bs-primary); --app-kpi-rgb: var(--bs-primary-rgb); --app-kpi-bg: var(--bs-primary-bg-subtle); --app-kpi-fg: var(--bs-primary-text-emphasis); }

.app-lres-stat-icon {
    grid-row: 1 / 3;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .6rem;
    font-size: 1.05rem;
    color: var(--app-kpi-fg);
    background-color: var(--app-kpi-bg);
}

.app-lres-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bs-emphasis-color);
    font-variant-numeric: tabular-nums;
}

.app-lres-stat-label {
    font-size: .75rem;
    line-height: 1.2;
    color: var(--bs-secondary-color);
}

.app-lres-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.app-lres-progress-icon {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: .8rem;
    color: var(--bs-info-text-emphasis);
    background-color: var(--bs-info-bg-subtle);
}

.app-lres-progress-bar {
    position: relative;
    height: .3rem;
    margin-top: 1rem;
    overflow: hidden;
    border-radius: 1rem;
    background-color: var(--bs-info-bg-subtle);
}

.app-lres-progress-bar span {
    position: absolute;
    inset: 0;
    width: 35%;
    border-radius: inherit;
    background-color: var(--bs-info);
    animation: app-lres-indeterminate 1.4s ease-in-out infinite;
}

@keyframes app-lres-indeterminate {
    from { transform: translateX(-100%); }
    to { transform: translateX(300%); }
}

.app-lres-empty-danger {
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
}

.app-lres-card {
    overflow: visible;
}

.app-lres-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.app-lres-search {
    position: relative;
    flex: 1 1 16rem;
}

.app-lres-search > .bi {
    position: absolute;
    top: 50%;
    left: .85rem;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.app-lres-search .form-control {
    padding-left: 2.3rem;
    border-radius: .65rem;
}

.app-lres-filter {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-lres-filter-label {
    margin-bottom: .2rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.app-lres-switches {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-size: .85rem;
}

.app-lres-showing {
    margin-left: auto;
    align-self: center;
    font-size: .82rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.app-lres-bulk {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    background-color: var(--bs-tertiary-bg);
    transition: background-color 200ms ease, box-shadow 200ms ease;
}

.app-lres-bulk.has-selection {
    background-color: var(--bs-primary-bg-subtle);
    box-shadow: 0 .5rem 1rem -.75rem rgba(var(--bs-primary-rgb), .6);
}

.app-lres-bulk-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

.app-lres-bulk-count {
    display: inline-flex;
    align-items: center;
    font-size: .88rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.app-lres-bulk-hint {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.app-lres-bulk.has-selection .app-lres-bulk-hint {
    display: none;
}

.app-lres-bulk-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.app-lres-bulk-options {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem .9rem;
}

.app-lres-contact-message {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    gap: .5rem;
    color: var(--bs-info-text-emphasis);
}

.app-lres-table tbody tr:has(.lead-select:checked) > * {
    --bs-table-bg: rgba(var(--bs-primary-rgb), .08);
}

.app-lres-table .lead-email > .text-body-secondary,
.app-lres-table .lead-email > .text-muted {
    white-space: nowrap;
}

.app-lres-name {
    display: block;
    color: var(--bs-emphasis-color);
}

.app-lres-domain {
    display: inline-block;
    margin-top: .1rem;
}

.app-lres-desc {
    display: -webkit-box;
    max-width: 28rem;
    margin-top: .15rem;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 1399.98px) {
    .app-lres-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .app-lres-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-lres-showing {
        margin-left: 0;
    }

    .app-lres-bulk {
        position: static;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-lres > * {
        animation: none;
    }

    .app-lres-progress-bar span {
        animation: none;
        width: 100%;
        opacity: .5;
    }

    .app-lres-stat,
    .app-lres-bulk {
        transition: none;
    }
}

/* Lead search: daily search quota bar under the Search button. */
.app-leads-quota {
    height: .35rem;
    max-width: 22rem;
}

.app-leads-quota .progress-bar {
    transition: width 300ms ease;
}

/* Lead results: company names and long websites wrap instead of widening the table. */
.app-leads-company {
    min-width: 12rem;
    max-width: 22rem;
    overflow-wrap: anywhere;
}

#lead-table .lead-social {
    font-size: 1.05rem;
    margin-left: .25rem;
}

.app-leads-location {
    min-width: 11rem;
}

/* Import and Export pages. */
.app-break-anywhere {
    overflow-wrap: anywhere;
}

/* Table cells: wrap long values (emails, URLs) without shrinking the column below its words. */
.app-break-word {
    overflow-wrap: break-word;
}

/* Import steps: Upload > Match columns > Review and approve. */
.app-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    padding: 0;
    list-style: none;
}

.app-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--bs-secondary-color);
    font-size: .925rem;
}

.app-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    font-size: .8rem;
    font-weight: 700;
}

.app-step.is-done {
    color: var(--bs-body-color);
}

.app-step.is-done .app-step-dot {
    border-color: var(--bs-success);
    background-color: var(--bs-success);
    color: var(--bs-white);
}

.app-step.is-current {
    color: var(--bs-body-color);
    font-weight: 600;
}

.app-step.is-current .app-step-dot {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
    color: var(--bs-white);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .18);
}

/* Upload drop zone. */
.app-dropzone {
    position: relative;
    padding: 1.5rem;
    text-align: center;
    border: 2px dashed var(--bs-border-color);
    border-radius: .75rem;
    background-color: var(--bs-tertiary-bg);
    transition: border-color 150ms ease, background-color 150ms ease;
}

.app-dropzone.is-dragover {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), .08);
}

.app-dropzone-icon {
    display: block;
    font-size: 2.25rem;
    line-height: 1;
    margin-bottom: .5rem;
    color: var(--bs-primary);
    transition: transform 200ms ease;
}

.app-dropzone.is-dragover .app-dropzone-icon {
    transform: translateY(-4px);
}

.app-dropzone-input {
    max-width: 28rem;
    margin: 0 auto;
}

.app-dropzone .invalid-feedback {
    text-align: center;
}

.app-dropzone-file {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    margin-top: .75rem;
    padding: .35rem .75rem;
    border-radius: 2rem;
    color: var(--bs-success-text-emphasis);
    background-color: var(--bs-success-bg-subtle);
    animation: app-fade-in 150ms ease-out both;
}

.app-dropzone-file[hidden] {
    display: none;
}

/* Column matching: rows set to Ignore are dimmed. */
.app-map-ignored > td:not(:last-child) {
    opacity: .55;
}

/* Review summary numbers. */
.app-review-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.app-review-stat {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .9rem;
    border-radius: .65rem;
    border: 1px solid var(--bs-primary-border-subtle);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.app-review-stat.is-warning {
    border-color: var(--bs-warning-border-subtle);
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.app-review-stat.is-danger {
    border-color: var(--bs-danger-border-subtle);
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.app-review-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.app-review-stat-label {
    font-size: .875rem;
}

/* Export: radio choices shown as selectable cards. */
.app-choice-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .75rem;
}

.app-choice {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    height: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
    background-color: var(--bs-body-bg);
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.app-choice > .bi {
    font-size: 1.4rem;
    line-height: 1;
    color: var(--bs-secondary-color);
    transition: color 150ms ease;
}

.app-choice strong,
.app-choice small {
    display: block;
}

.app-choice small {
    color: var(--bs-secondary-color);
}

.app-choice:hover {
    border-color: rgba(var(--bs-primary-rgb), .5);
}

.btn-check:checked + .app-choice {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), .06);
    box-shadow: 0 0 0 1px var(--bs-primary);
}

.btn-check:checked + .app-choice > .bi {
    color: var(--bs-primary);
}

.btn-check:focus-visible + .app-choice {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

@keyframes app-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .app-dropzone,
    .app-dropzone-icon,
    .app-dropzone-file,
    .app-choice,
    .app-choice > .bi {
        transition: none;
        animation: none;
    }
}

/* Variables pages (Company Status, Company Types, Note Types, Milestones, Emojis). */
.app-var-search {
    position: relative;
    width: 100%;
    max-width: 260px;
}

.app-var-search > .bi {
    position: absolute;
    top: 50%;
    left: .65rem;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.app-var-search .form-control {
    padding-left: 2rem;
}

.app-var-table .app-var-color-col {
    width: 150px;
}

.app-var-table .app-var-actions-col {
    width: 120px;
}

.app-var-active-col {
    width: 100px;
}

.app-var-table tfoot td {
    background-color: var(--bs-tertiary-bg);
    border-bottom: 0;
}

.app-var-table tbody tr {
    transition: opacity 200ms ease, transform 200ms ease;
}

.app-var-table tbody tr.app-var-dirty-row > td:first-child {
    box-shadow: inset 3px 0 0 var(--bs-primary);
}

.app-var-table tbody tr.app-var-saved > td {
    animation: app-var-saved 900ms ease-out;
}

.app-var-removing {
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 200ms ease, transform 200ms ease;
}

@keyframes app-var-saved {
    from { box-shadow: inset 0 0 0 9999px rgba(var(--bs-success-rgb), .14); }
    to { box-shadow: inset 0 0 0 9999px rgba(var(--bs-success-rgb), 0); }
}

@media (max-width: 575.98px) {
    .app-var-table thead {
        display: none;
    }

    .app-var-table tbody tr[_id],
    .app-var-table tfoot tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem;
        padding: .6rem .75rem;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .card-body.p-0 .table.app-var-table tbody tr[_id] > td,
    .card-body.p-0 .table.app-var-table tfoot tr > td {
        padding: 0;
        border: 0;
    }

    .app-var-table tbody tr[_id] > td:first-child,
    .app-var-table tfoot tr > td:first-child {
        flex: 1 1 100%;
    }

    .app-var-table .app-var-color-col {
        flex: 1 1 auto;
        width: auto;
    }

    .app-var-table tr > td:last-child {
        margin-left: auto;
    }

    .app-var-table tbody tr.app-var-dirty-row > td:first-child {
        box-shadow: none;
    }

    .app-var-table tbody tr.app-var-dirty-row {
        box-shadow: inset 3px 0 0 var(--bs-primary);
    }
}

.app-var-dirty {
    color: var(--bs-warning-text-emphasis) !important;
}

.app-emoji-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 1rem;
    border: 2px dashed var(--bs-border-color);
    border-radius: .75rem;
    background-color: var(--bs-tertiary-bg);
    text-align: center;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.app-emoji-drop:hover,
.app-emoji-drop:focus-within {
    border-color: var(--bs-primary);
}

.app-emoji-drop.is-invalid {
    border-color: var(--bs-form-invalid-border-color);
}

.app-emoji-drop .bi {
    font-size: 2rem;
    color: var(--bs-secondary-color);
}

.app-emoji-drop img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
}

.app-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: .75rem;
}

.app-emoji-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: var(--bs-body-bg);
    transition: transform 150ms ease, box-shadow 150ms ease, opacity 200ms ease;
}

.app-emoji-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(var(--bs-emphasis-color-rgb), .1);
}

.app-emoji-tile img {
    width: 80px;
    height: 80px;
    max-width: 100%;
    object-fit: contain;
}

.app-emoji-delete {
    position: absolute;
    top: .3rem;
    right: .3rem;
    padding: .1rem .35rem;
    line-height: 1.2;
    opacity: 0;
    transition: opacity 150ms ease;
}

.app-emoji-tile:hover .app-emoji-delete,
.app-emoji-delete:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    .app-emoji-delete {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-var-table tbody tr,
    .app-var-removing,
    .app-emoji-tile,
    .app-emoji-delete {
        transition: none;
    }

    .app-var-table tbody tr.app-var-saved > td {
        animation: none;
    }
}

/* Reports and Calendar (_LayoutApp): DataTables 1.10, bootstrap-datepicker and FullCalendar 3 styled with theme tokens. */

/* Report tables: loading skeleton, empty and error states. */
.app-report-state td {
    padding: 2.5rem 1rem !important;
    text-align: center;
    background-color: var(--bs-body-bg) !important;
    box-shadow: none !important;
}

.app-report-state .bi {
    display: block;
    margin-bottom: .5rem;
    font-size: 2rem;
    color: var(--bs-secondary-color);
}

.app-report-state.is-error .bi {
    color: var(--bs-danger);
}

.app-report-state-title {
    font-weight: 600;
    color: var(--bs-body-color);
}

.app-report-state-hint {
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.app-skeleton-row td {
    box-shadow: none !important;
}

.app-skeleton {
    position: relative;
    display: block;
    height: .8rem;
    overflow: hidden;
    border-radius: .25rem;
    background-color: var(--bs-secondary-bg);
}

.app-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, transparent, rgba(var(--bs-body-color-rgb), .06), transparent);
    animation: app-skeleton-shimmer 1.2s ease-in-out infinite;
}

@keyframes app-skeleton-shimmer {
    to { transform: translateX(100%); }
}

.app-report-results {
    animation: app-report-fade 200ms ease-out both;
}

@keyframes app-report-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.app-report-cell-text {
    overflow-wrap: anywhere;
}

/* Custom Report: columns switched off with "Choose Columns". */
.app-report.hide-companyname .companyname,
.app-report.hide-companyphone .companyphone,
.app-report.hide-companyaddress .companyaddress,
.app-report.hide-comptype .comptype,
.app-report.hide-companyemail .companyemail,
.app-report.hide-city .city,
.app-report.hide-companycomments .companycomments,
.app-report.hide-companystatus .companystatus,
.app-report.hide-contactname .contactname {
    display: none;
}

/* DataTables 1.10 (no Bootstrap integration file): search, page length, info and paging. */
.app-dt-top,
.app-dt-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem 1rem;
}

.app-dt-top {
    border-bottom: 1px solid var(--bs-border-color);
}

.app-dt-bottom {
    border-top: 1px solid var(--bs-border-color);
}

.dataTables_length label,
.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.dataTables_length select {
    width: auto;
}

.dataTables_filter label {
    position: relative;
}

.dataTables_filter input {
    width: 16rem;
    max-width: 100%;
    padding-left: 2rem;
}

.dataTables_filter label::before {
    content: "\F52A";
    position: absolute;
    top: 50%;
    left: .65rem;
    transform: translateY(-50%);
    font-family: "bootstrap-icons";
    font-size: .8rem;
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.dataTables_info {
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.dataTables_paginate {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.dataTables_paginate > span {
    display: inline-flex;
    gap: .25rem;
}

.dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: .25rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    font-size: .875rem;
    color: var(--bs-body-color);
    text-decoration: none;
    background-color: var(--bs-body-bg);
    cursor: pointer;
    user-select: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.dataTables_paginate .paginate_button:hover {
    background-color: var(--bs-tertiary-bg);
}

.dataTables_paginate .paginate_button.current {
    color: var(--bs-white);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.dataTables_paginate .paginate_button.disabled {
    opacity: .5;
    cursor: default;
    pointer-events: none;
}

.dataTables_paginate .ellipsis {
    padding: .25rem .25rem;
    color: var(--bs-secondary-color);
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    position: relative;
    padding-right: 1.5rem;
    cursor: pointer;
    user-select: none;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: "bootstrap-icons";
    font-size: .75rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

table.dataTable thead .sorting::after {
    content: "\F127";
    opacity: .45;
}

table.dataTable thead .sorting_asc::after {
    content: "\F148";
    color: var(--bs-primary);
}

table.dataTable thead .sorting_desc::after {
    content: "\F128";
    color: var(--bs-primary);
}

@media (max-width: 575.98px) {
    .app-dt-top,
    .app-dt-bottom {
        padding: .5rem .75rem;
    }

    .dataTables_filter,
    .dataTables_filter label,
    .dataTables_filter input {
        width: 100%;
    }
}

/* bootstrap-datepicker (eternicode) dropdown. */
.datepicker.datepicker-dropdown {
    padding: .5rem;
    z-index: 1060 !important;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow);
    animation: app-report-fade 150ms ease-out both;
}

.datepicker table {
    margin: 0;
    user-select: none;
}

.datepicker td,
.datepicker th {
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 0;
    border-radius: var(--bs-border-radius);
    text-align: center;
    font-size: .875rem;
    color: var(--bs-body-color);
}

.datepicker .dow {
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.datepicker td.day,
.datepicker th.prev,
.datepicker th.next,
.datepicker th.datepicker-switch,
.datepicker tfoot th,
.datepicker td span {
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.datepicker td.day:hover,
.datepicker th.prev:hover,
.datepicker th.next:hover,
.datepicker th.datepicker-switch:hover,
.datepicker tfoot th:hover,
.datepicker td span:hover {
    background-color: var(--bs-tertiary-bg);
}

.datepicker td.old,
.datepicker td.new {
    color: var(--bs-secondary-color);
    opacity: .6;
}

.datepicker td.today {
    font-weight: 700;
    color: var(--bs-primary);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .5);
}

.datepicker td.active,
.datepicker td.active:hover,
.datepicker td span.active,
.datepicker td span.active:hover {
    color: var(--bs-white);
    background-color: var(--bs-primary);
}

.datepicker td.disabled,
.datepicker td span.disabled {
    opacity: .4;
    cursor: default;
}

.datepicker td span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: 2.5rem;
    margin: 1%;
    border-radius: var(--bs-border-radius);
}

.datepicker th.datepicker-switch {
    font-weight: 600;
}

/* FullCalendar 3 (standard theme): buttons, grid and events follow the theme and dark mode. */
.app-calendar .fc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.app-calendar .fc-toolbar > * > :first-child {
    margin-left: 0;
}

.app-calendar .fc-toolbar::after,
.app-calendar .fc-toolbar .fc-clear {
    display: none;
}

.app-calendar .fc-toolbar h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.app-calendar .fc-button {
    height: auto;
    padding: .3rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    font-size: .875rem;
    text-shadow: none;
    text-transform: capitalize;
    color: var(--bs-body-color);
    background-image: none;
    background-color: var(--bs-body-bg);
    box-shadow: none;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.app-calendar .fc-button:hover {
    background-color: var(--bs-tertiary-bg);
}

.app-calendar .fc-button.fc-state-active,
.app-calendar .fc-button.fc-state-down {
    color: var(--bs-white);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.app-calendar .fc-button.fc-state-disabled {
    opacity: .5;
}

.app-calendar .fc-button-group > .fc-button:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

.app-calendar .fc-button-group > .fc-button:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.app-calendar .fc-unthemed th,
.app-calendar .fc-unthemed td,
.app-calendar .fc-unthemed thead,
.app-calendar .fc-unthemed tbody,
.app-calendar .fc-unthemed .fc-divider,
.app-calendar .fc-unthemed .fc-row,
.app-calendar .fc-unthemed .fc-content,
.app-calendar .fc-unthemed .fc-popover,
.app-calendar .fc-unthemed .fc-list-view,
.app-calendar .fc-unthemed .fc-list-heading td {
    border-color: var(--bs-border-color);
}

.app-calendar .fc-unthemed .fc-popover,
.app-calendar .fc-unthemed .fc-divider,
.app-calendar .fc-unthemed .fc-popover .fc-header {
    background-color: var(--bs-body-bg);
}

.app-calendar .fc-unthemed td.fc-today {
    background-color: rgba(var(--bs-primary-rgb), .08);
}

.app-calendar .fc-day-header {
    padding: .4rem 0;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.app-calendar .fc-day-number {
    padding: .25rem .4rem !important;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.app-calendar .fc-today .fc-day-number {
    font-weight: 700;
    color: var(--bs-primary);
}

.app-calendar .fc-event {
    padding: .1rem .35rem;
    border-radius: var(--bs-border-radius-sm);
    font-size: .8rem;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.app-calendar .fc-event:hover {
    transform: translateY(-1px);
    box-shadow: var(--bs-box-shadow-sm);
}

.app-calendar .fc-event .fc-content {
    color: var(--bs-white);
}

.app-calendar .fc-view-container {
    overflow-x: auto;
}

@media (max-width: 575.98px) {
    .app-calendar .fc-toolbar {
        justify-content: center;
    }

    .app-calendar .fc-toolbar .fc-center {
        order: -1;
        width: 100%;
        text-align: center;
    }

    .app-calendar .fc-button {
        padding: .25rem .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-skeleton::after {
        animation: none;
    }

    .app-report-results,
    .datepicker.datepicker-dropdown,
    .app-calendar .fc-event {
        animation: none;
        transition: none;
    }
}

/* Users and Edit Profile (Views/Permission). */
.app-users-avatar {
    width: 36px;
    height: 36px;
    object-fit: cover;
}

.app-users .dataTables_filter {
    text-align: end;
}

.app-users .dataTables_filter label,
.app-users .dataTables_length label {
    margin-bottom: 0;
}

.app-users .dataTables_filter label {
    display: inline-flex;
    max-width: 100%;
}

.app-users .dataTables_filter input {
    width: 280px;
}

.app-users .dataTables_paginate {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .25rem;
}

.app-users .dataTables_paginate > span {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.app-users table.dataTable thead th.sorting,
.app-users table.dataTable thead th.sorting_asc,
.app-users table.dataTable thead th.sorting_desc {
    cursor: pointer;
    position: relative;
    padding-right: 1.5rem;
    white-space: nowrap;
}

.app-users table.dataTable thead th.sorting::after,
.app-users table.dataTable thead th.sorting_asc::after,
.app-users table.dataTable thead th.sorting_desc::after {
    position: absolute;
    right: .4rem;
    font-family: "bootstrap-icons";
    font-size: .75rem;
    color: var(--bs-secondary-color);
    opacity: .5;
    content: "\F127";
}

.app-users table.dataTable thead th.sorting_asc::after {
    content: "\F148";
    color: var(--bs-primary);
    opacity: 1;
}

.app-users table.dataTable thead th.sorting_desc::after {
    content: "\F128";
    color: var(--bs-primary);
    opacity: 1;
}

.app-users-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
}

.app-user-photo {
    width: 128px;
    height: 128px;
}

.app-user-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--bs-tertiary-bg);
}

.app-users-skeleton-input {
    height: calc(1.5em + .75rem + 2px);
}

/* Users page (Blue Steel): team hero with count tiles that filter the list, people rows, sectioned user form. */
.app-users-page {
    padding-top: .75rem;
}

.app-users-page > * {
    animation: app-dash-rise 280ms var(--app-dash-ease) both;
}

.app-users-hero-lead {
    color: var(--app-hero-on-muted);
}

.app-users-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
    width: 100%;
}

.app-users-avatar-wrap {
    width: 2.4rem;
    height: 2.4rem;
    font-size: .85rem;
}

.app-users-row {
    cursor: pointer;
}

.app-users-row.is-inactive > td {
    color: var(--bs-secondary-color);
}

.app-users-row.is-inactive .app-avatar {
    opacity: .55;
    filter: grayscale(1);
}

.app-users-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .6rem;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    background-color: var(--bs-secondary-bg);
}

.app-users-status::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background-color: var(--bs-secondary-color);
}

.app-users-status.is-active {
    color: var(--bs-success-text-emphasis);
    background-color: var(--bs-success-bg-subtle);
}

.app-users-status.is-active::before {
    background-color: var(--bs-success);
}

.app-users-access {
    display: inline-flex;
    gap: .45rem;
    font-size: .95rem;
}

.app-users-access .bi {
    color: var(--bs-border-color);
}

.app-users-access .bi.is-on {
    color: var(--bs-primary);
}

.app-users-mail {
    text-decoration: none;
}

.app-user-layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.app-user-identity {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
    border-radius: 1rem;
    text-align: center;
    background-image: linear-gradient(160deg, rgba(var(--bs-primary-rgb), .14), rgba(var(--bs-primary-rgb), .02) 70%);
    border: 1px solid var(--bs-border-color-translucent);
}

.app-user-photo-wrap {
    position: relative;
    margin-bottom: .85rem;
}

.app-user-photo.app-avatar {
    width: 7.5rem;
    height: 7.5rem;
    font-size: 2.2rem;
    box-shadow: 0 0 0 4px var(--bs-body-bg), 0 .5rem 1.25rem rgba(var(--bs-primary-rgb), .3);
}

.app-user-photo-button {
    position: absolute;
    right: .1rem;
    bottom: .1rem;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--bs-body-bg);
    border-radius: 50%;
    cursor: pointer;
    color: var(--bs-white);
    background-color: var(--bs-primary);
    transition: transform 150ms ease;
}

.app-user-photo-button:hover {
    transform: scale(1.08);
}

.app-user-preview-name {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-emphasis-color);
    overflow-wrap: anywhere;
}

.app-user-preview-meta {
    min-height: 1.2em;
    font-size: .85rem;
    color: var(--bs-secondary-color);
    overflow-wrap: anywhere;
}

.app-user-preview-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    margin-top: .5rem;
}

.app-user-preview-chips .app-user-role {
    margin-top: 0;
}

.app-user-identity-hint {
    margin: .75rem 0 0;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.app-user-sections {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.app-user-section {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.app-user-section:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

.app-user-section-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .9rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

.app-user-section-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .55rem;
    font-size: .95rem;
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.app-user-perms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.app-user-perm,
.app-user-active {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .75rem .85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .8rem;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.app-user-active {
    margin-bottom: .6rem;
}

.app-user-perm:hover,
.app-user-active:hover {
    border-color: var(--bs-primary-border-subtle);
}

.app-user-perm:has(.form-check-input:checked) {
    border-color: var(--bs-primary-border-subtle);
    background-color: rgba(var(--bs-primary-rgb), .05);
}

.app-user-active:has(.form-check-input:checked) {
    border-color: var(--bs-success-border-subtle);
    background-color: var(--bs-success-bg-subtle);
}

.app-user-active.is-off {
    border-color: var(--bs-danger-border-subtle);
}

.app-user-perm-icon {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .6rem;
    font-size: 1.05rem;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
    transition: color 150ms ease, background-color 150ms ease;
}

.app-user-perm:has(.form-check-input:checked) .app-user-perm-icon {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.app-user-active:has(.form-check-input:checked) .app-user-perm-icon {
    color: var(--bs-success-text-emphasis);
    background-color: var(--bs-body-bg);
}

.app-user-perm-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.app-user-perm-title {
    font-weight: 600;
    line-height: 1.2;
}

.app-user-perm-hint {
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

.app-user-perm .form-switch .form-check-input,
.app-user-active .form-switch .form-check-input {
    width: 2.5rem;
    height: 1.35rem;
    margin: 0;
    cursor: pointer;
}

.app-user-strength {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 1.4rem;
    margin-top: .35rem;
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

.app-user-strength-bar {
    display: none;
    flex: 0 0 4.5rem;
    height: .3rem;
    overflow: hidden;
    border-radius: 1rem;
    background-color: var(--bs-secondary-bg);
}

.app-user-strength-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    transition: width 200ms ease;
}

.app-user-strength[data-level] .app-user-strength-bar { display: block; }
.app-user-strength[data-level="weak"] .app-user-strength-bar span { width: 33%; background-color: var(--bs-danger); }
.app-user-strength[data-level="fair"] .app-user-strength-bar span { width: 66%; background-color: var(--bs-warning); }
.app-user-strength[data-level="strong"] .app-user-strength-bar span { width: 100%; background-color: var(--bs-success); }

.app-users-modal .modal-content {
    border: 0;
    border-radius: 1rem;
}

@media (max-width: 991.98px) {
    .app-users-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .app-user-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-user-identity {
        position: static;
    }

    .app-user-perms {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-users-page > * {
        animation: none;
    }

    .app-user-perm,
    .app-user-active,
    .app-user-perm-icon,
    .app-user-photo-button,
    .app-user-strength-bar span {
        transition: none;
    }
}

@media (max-width: 575.98px) {
    .app-users .dataTables_filter,
    .app-users .dataTables_paginate {
        text-align: start;
        justify-content: flex-start;
    }

    .app-users .dataTables_filter label,
    .app-users .dataTables_filter input {
        width: 100%;
    }
}

/* Docked "Recent Activities" panel: activity-panel.js tags .app-main with the breakpoint its real width fits
   (app-bp-lg / app-bp-md / app-bp-sm), and wider column and show/hide classes fall back to the layout below them. */
.app-bp-lg [class*="col-xl-"] {
    flex: 0 0 auto;
    width: 100%;
}

.app-bp-lg [class*="col-xl-"].col-md-1 {
    width: 8.333333%;
}

.app-bp-lg [class*="col-xl-"].col-md-2 {
    width: 16.666667%;
}

.app-bp-lg [class*="col-xl-"].col-md-3 {
    width: 25%;
}

.app-bp-lg [class*="col-xl-"].col-md-4 {
    width: 33.333333%;
}

.app-bp-lg [class*="col-xl-"].col-md-5 {
    width: 41.666667%;
}

.app-bp-lg [class*="col-xl-"].col-md-6 {
    width: 50%;
}

.app-bp-lg [class*="col-xl-"].col-md-7 {
    width: 58.333333%;
}

.app-bp-lg [class*="col-xl-"].col-md-8 {
    width: 66.666667%;
}

.app-bp-lg [class*="col-xl-"].col-md-9 {
    width: 75%;
}

.app-bp-lg [class*="col-xl-"].col-md-10 {
    width: 83.333333%;
}

.app-bp-lg [class*="col-xl-"].col-md-11 {
    width: 91.666667%;
}

.app-bp-lg [class*="col-xl-"].col-md-12 {
    width: 100%;
}

.app-bp-lg [class*="col-xl-"].col-lg-1 {
    width: 8.333333%;
}

.app-bp-lg [class*="col-xl-"].col-lg-2 {
    width: 16.666667%;
}

.app-bp-lg [class*="col-xl-"].col-lg-3 {
    width: 25%;
}

.app-bp-lg [class*="col-xl-"].col-lg-4 {
    width: 33.333333%;
}

.app-bp-lg [class*="col-xl-"].col-lg-5 {
    width: 41.666667%;
}

.app-bp-lg [class*="col-xl-"].col-lg-6 {
    width: 50%;
}

.app-bp-lg [class*="col-xl-"].col-lg-7 {
    width: 58.333333%;
}

.app-bp-lg [class*="col-xl-"].col-lg-8 {
    width: 66.666667%;
}

.app-bp-lg [class*="col-xl-"].col-lg-9 {
    width: 75%;
}

.app-bp-lg [class*="col-xl-"].col-lg-10 {
    width: 83.333333%;
}

.app-bp-lg [class*="col-xl-"].col-lg-11 {
    width: 91.666667%;
}

.app-bp-lg [class*="col-xl-"].col-lg-12 {
    width: 100%;
}

.app-bp-md [class*="col-lg-"],
.app-bp-md [class*="col-xl-"] {
    flex: 0 0 auto;
    width: 100%;
}

.app-bp-md [class*="col-lg-"].col-md-1,
.app-bp-md [class*="col-xl-"].col-md-1 {
    width: 8.333333%;
}

.app-bp-md [class*="col-lg-"].col-md-2,
.app-bp-md [class*="col-xl-"].col-md-2 {
    width: 16.666667%;
}

.app-bp-md [class*="col-lg-"].col-md-3,
.app-bp-md [class*="col-xl-"].col-md-3 {
    width: 25%;
}

.app-bp-md [class*="col-lg-"].col-md-4,
.app-bp-md [class*="col-xl-"].col-md-4 {
    width: 33.333333%;
}

.app-bp-md [class*="col-lg-"].col-md-5,
.app-bp-md [class*="col-xl-"].col-md-5 {
    width: 41.666667%;
}

.app-bp-md [class*="col-lg-"].col-md-6,
.app-bp-md [class*="col-xl-"].col-md-6 {
    width: 50%;
}

.app-bp-md [class*="col-lg-"].col-md-7,
.app-bp-md [class*="col-xl-"].col-md-7 {
    width: 58.333333%;
}

.app-bp-md [class*="col-lg-"].col-md-8,
.app-bp-md [class*="col-xl-"].col-md-8 {
    width: 66.666667%;
}

.app-bp-md [class*="col-lg-"].col-md-9,
.app-bp-md [class*="col-xl-"].col-md-9 {
    width: 75%;
}

.app-bp-md [class*="col-lg-"].col-md-10,
.app-bp-md [class*="col-xl-"].col-md-10 {
    width: 83.333333%;
}

.app-bp-md [class*="col-lg-"].col-md-11,
.app-bp-md [class*="col-xl-"].col-md-11 {
    width: 91.666667%;
}

.app-bp-md [class*="col-lg-"].col-md-12,
.app-bp-md [class*="col-xl-"].col-md-12 {
    width: 100%;
}

.app-bp-lg .row-cols-xl-4 > *,
.app-bp-md .row-cols-xl-4 > *,
.app-bp-sm .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 50%;
}

.app-bp-md .row-cols-lg-3 > * {
    width: 50%;
}

.app-bp-sm [class*="col-md-"],
.app-bp-sm [class*="col-lg-"],
.app-bp-sm [class*="col-xl-"] {
    flex: 0 0 auto;
    width: 100%;
}

.app-bp-sm .row-cols-lg-3 > * {
    width: 50%;
}

.app-bp-lg .d-none.d-xl-table-cell,
.app-bp-md .d-none.d-xl-table-cell,
.app-bp-md .d-none.d-lg-table-cell,
.app-bp-md .d-none.d-lg-inline,
.app-bp-sm .d-none.d-xl-table-cell,
.app-bp-sm .d-none.d-lg-table-cell,
.app-bp-sm .d-none.d-lg-inline,
.app-bp-sm .d-none.d-md-table-cell {
    display: none !important;
}

/* Company list (Company/Index): search-first header, filters behind "Filters" with removable chips, status pills. */
.app-clist-searchcard {
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: .85rem;
    box-shadow: var(--bs-box-shadow-sm);
}

.app-clist-searchrow {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}

.app-clist-searchbox {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.app-clist-searchbox .form-control {
    padding-left: 2.75rem;
    padding-right: 2.5rem;
    border-radius: .75rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.app-clist-searchbox .form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .18);
}

.app-clist-searchicon {
    position: absolute;
    top: 50%;
    left: 1rem;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
    transition: color 150ms ease;
}

.app-clist-searchbox:focus-within .app-clist-searchicon {
    color: var(--bs-primary);
}

.app-clist-clear {
    position: absolute;
    top: 50%;
    right: .6rem;
    transform: translateY(-50%);
    padding: .25rem;
    border: 0;
    line-height: 1;
    color: var(--bs-secondary-color);
    background: transparent;
    transition: color 150ms ease;
}

.app-clist-clear:hover,
.app-clist-clear:focus-visible {
    color: var(--bs-body-color);
}

.app-clist-clear[hidden] {
    display: none;
}

.app-clist-filterbtn,
.app-clist-searchrow .btn-lg {
    border-radius: .75rem;
    white-space: nowrap;
}

.app-clist-filterbtn[aria-expanded="true"] {
    color: var(--bs-primary-text-emphasis);
    border-color: var(--bs-primary-border-subtle);
    background-color: var(--bs-primary-bg-subtle);
}

.app-clist-hint {
    margin-top: .4rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.app-clist-filters {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: .75rem;
    background-color: var(--bs-tertiary-bg);
}

.app-clist-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .75rem;
}

.app-clist-chips[hidden] {
    display: none;
}

.app-clist-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .25rem .2rem .7rem;
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: 2rem;
    font-size: .85rem;
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
    animation: app-clist-in 150ms ease-out both;
}

.app-clist-chip-label {
    font-weight: 600;
}

.app-clist-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: inherit;
    background: transparent;
    transition: background-color 150ms ease;
}

.app-clist-chip-x:hover,
.app-clist-chip-x:focus-visible {
    background-color: rgba(var(--bs-primary-rgb), .18);
}

.app-clist-summary {
    font-size: 1.05rem;
}

.app-clist-summary strong {
    font-weight: 700;
}

.app-clist-row {
    animation: app-clist-in 200ms ease-out both;
}

.app-clist-emoji img {
    transition: transform 150ms ease;
}

.app-clist-emoji:hover img,
.app-clist-emoji:focus-visible img {
    transform: scale(1.08);
}

.app-clist-status {
    display: inline-block;
    max-width: 11rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
    padding: .2rem .6rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 2rem;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
}

.app-clist-status-dark {
    color: var(--bs-dark);
}

.app-clist-status-light {
    color: var(--bs-white);
}

.app-clist-state-row > td {
    box-shadow: none !important;
}

.app-clist-empty-icon {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.app-clist-error-icon {
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
}

@keyframes app-clist-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 575.98px) {
    .app-clist-searchbox .form-control {
        font-size: 1rem;
    }

    .app-clist-searchrow .btn-lg {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .app-clist-hint {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-clist-chip,
    .app-clist-row {
        animation: none;
    }

    .app-clist-emoji img,
    .app-clist-searchbox .form-control,
    .app-clist-chip-x {
        transition: none;
    }
}

/* Company page (Company/View): profile hero, quick contact actions, contact cards, "What's next" tracking, timeline. */
.app-cview {
    padding-top: .75rem;
}

.app-cview > .app-cview-hero,
.app-cview > .row {
    animation: app-cview-rise 260ms cubic-bezier(.2, .7, .2, 1) both;
}

.app-cview > .row {
    animation-delay: 60ms;
}

@keyframes app-cview-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.app-cview-hero {
    overflow: hidden;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 1rem;
    box-shadow: var(--bs-box-shadow-sm);
}

.app-cview-hero-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    padding: 1.25rem 1.5rem;
    background-image:
        radial-gradient(circle at 0% 0%, rgba(var(--bs-primary-rgb), .18) 0, transparent 45%),
        linear-gradient(135deg, rgba(var(--bs-primary-rgb), .08), transparent 70%);
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.app-cview-emoji {
    position: relative;
    flex: 0 0 auto;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 4px var(--bs-body-bg), 0 .5rem 1.25rem -.25rem rgba(var(--bs-primary-rgb), .45);
    transition: transform 150ms ease;
}

.app-cview-emoji img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.app-cview-emoji-edit {
    position: absolute;
    right: -.1rem;
    bottom: -.1rem;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bs-body-bg);
    border-radius: 50%;
    font-size: .8rem;
    color: var(--bs-white);
    background-color: var(--bs-primary);
    opacity: .85;
    transition: opacity 150ms ease, transform 150ms ease;
}

.app-cview-emoji:hover,
.app-cview-emoji:focus-visible {
    transform: translateY(-1px);
}

.app-cview-emoji:hover .app-cview-emoji-edit,
.app-cview-emoji:focus-visible .app-cview-emoji-edit {
    opacity: 1;
    transform: scale(1.1);
}

.app-cview-identity {
    flex: 1 1 18rem;
}

.app-cview-back {
    display: inline-block;
    margin-bottom: .15rem;
    font-size: .82rem;
    text-decoration: none;
    color: var(--bs-secondary-color);
}

.app-cview-back:hover,
.app-cview-back:focus-visible {
    color: var(--bs-primary);
}

.app-cview-name {
    margin-bottom: .4rem;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
    color: var(--bs-emphasis-color);
}

.app-cview-status {
    font-size: .8rem;
    padding: .35em .75em;
}

.app-cview-type {
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.app-cview-alert {
    min-width: 1.6rem;
    height: 1.6rem;
}

.app-cview-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.app-cview-quick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.app-cview-quick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .7rem .5rem;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    color: var(--bs-primary-text-emphasis);
    transition: background-color 150ms ease, color 150ms ease;
}

.app-cview-quick-btn + .app-cview-quick-btn {
    border-left: 1px solid var(--bs-border-color-translucent);
}

.app-cview-quick-btn .bi {
    font-size: 1.05rem;
    transition: transform 150ms ease;
}

a.app-cview-quick-btn:hover,
a.app-cview-quick-btn:focus-visible {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), .08);
}

a.app-cview-quick-btn:hover .bi,
a.app-cview-quick-btn:focus-visible .bi {
    transform: translateY(-1px);
}

.app-cview-quick-btn.is-disabled {
    color: var(--bs-secondary-color);
    opacity: .55;
    cursor: not-allowed;
}

.app-cview-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
}

.app-cview-fact {
    min-width: 0;
    padding: .8rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.app-cview-fact:not(:nth-child(3n + 1)) {
    border-left: 1px solid var(--bs-border-color-translucent);
}

.app-cview-fact dt {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .2rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.app-cview-fact dd {
    margin: 0;
    min-height: 1.5rem;
    overflow-wrap: anywhere;
}

.app-cview-fact dd:empty::before {
    content: "-";
    color: var(--bs-secondary-color);
}

.app-cview-copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: .4rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
    background: transparent;
    transition: color 150ms ease, background-color 150ms ease;
}

.app-cview-copy:hover,
.app-cview-copy:focus-visible {
    color: var(--bs-primary);
    background-color: var(--bs-tertiary-bg);
}

.app-cview-copy.is-copied {
    color: var(--bs-success);
}

.app-cview-comments {
    padding: .85rem 1.5rem 1rem;
}

.app-cview-comments-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
    color: var(--bs-secondary-color);
}

.app-cview-comments-text.is-open {
    display: block;
    -webkit-line-clamp: unset;
}

/* Contact cards. */
.app-cview-contact {
    padding: .85rem .95rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: .85rem;
    background-color: var(--bs-body-bg);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.app-cview-contact:hover {
    border-color: rgba(var(--bs-primary-rgb), .45);
    box-shadow: 0 .35rem 1rem -.5rem rgba(var(--bs-primary-rgb), .35);
}

.app-cview-contact.is-empty {
    border-style: dashed;
    background-color: var(--bs-tertiary-bg);
}

.app-cview-contact.is-empty:hover {
    box-shadow: none;
}

.app-cview-contact-label {
    margin-bottom: .5rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.app-cview-contact-avatar {
    width: 2.5rem;
    height: 2.5rem;
    font-size: .9rem;
}

.app-cview-lines {
    margin-top: .6rem;
    font-size: .875rem;
}

.app-cview-lines li {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .15rem 0;
}

.app-cview-lines li > .bi {
    flex: 0 0 1rem;
    color: var(--bs-secondary-color);
}

.app-cview-lines a {
    min-width: 0;
    overflow-wrap: anywhere;
}

.app-cview-tag {
    margin-left: auto;
    font-size: .7rem;
    color: var(--bs-secondary-color);
}

.app-cview-more-contacts {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .8rem;
    border-radius: .65rem;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    transition: background-color 150ms ease;
}

.app-cview-more-contacts:hover,
.app-cview-more-contacts:focus-visible {
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
}

/* Lists inside cards. */
.app-cview-capped-sm {
    max-height: 18rem;
}

.app-cview-row {
    transition: background-color 150ms ease;
}

.app-cview-row:hover {
    background-color: var(--bs-tertiary-bg);
}

.app-cview-row-action {
    opacity: .6;
    transition: opacity 150ms ease;
}

.app-cview-row:hover .app-cview-row-action,
.app-cview-row-action:focus-visible {
    opacity: 1;
}

.app-cview-msg.is-error {
    color: var(--bs-danger-text-emphasis);
}

.app-cview-msg.is-success {
    color: var(--bs-success-text-emphasis);
}

.app-cview-msg:not([hidden]) {
    animation: app-cview-fade 180ms ease-out both;
}

@keyframes app-cview-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* "What's next" tracking card: a colored edge follows the follow-up state. */
.app-cview-track {
    border: 1px solid var(--bs-border-color-translucent);
    border-top: 3px solid var(--bs-primary);
    border-radius: .85rem;
    box-shadow: var(--bs-box-shadow-sm);
}

.app-cview-track-overdue { border-top-color: var(--bs-danger); }
.app-cview-track-duetoday { border-top-color: var(--bs-warning); }
.app-cview-track-upcoming { border-top-color: var(--bs-info); }
.app-cview-track-later { border-top-color: var(--bs-secondary); }

.app-cview-tile {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    height: 100%;
}

.app-cview-tile-icon {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .6rem;
    font-size: 1rem;
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.app-cview-tile-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.app-cview-panel {
    padding: .9rem;
    border-radius: .75rem;
    background-color: var(--bs-tertiary-bg);
    animation: app-cview-fade 180ms ease-out both;
}

.app-cview-shortcuts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

/* Activity history timeline and filter counts. */
.app-cview-filter .app-cview-count {
    display: inline-block;
    min-width: 1.25rem;
    margin-left: .2rem;
    padding: 0 .3rem;
    border-radius: 1rem;
    font-size: .72rem;
    background-color: var(--bs-tertiary-bg);
}

.app-cview-filter .active .app-cview-count {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

.app-cview-timeline-dot {
    flex: 0 0 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .95rem;
    background-color: var(--bs-tertiary-bg);
}

/* Milestones as progress. */
.app-cview-progress {
    height: 4px;
    background-color: var(--bs-secondary-bg);
}

.app-cview-progress span {
    display: block;
    height: 100%;
    background-color: var(--bs-warning);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 300ms cubic-bezier(.2, .7, .2, 1);
}

.app-cview-milestone .bi {
    color: var(--bs-secondary-color);
}

.app-cview-milestone.is-done {
    background-color: var(--bs-warning-bg-subtle);
}

.app-cview-milestone.is-done .bi {
    color: var(--bs-warning-text-emphasis);
}

@media (max-width: 991.98px) {
    .app-cview-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-cview-fact:not(:nth-child(3n + 1)) {
        border-left: 0;
    }

    .app-cview-fact:nth-child(2n) {
        border-left: 1px solid var(--bs-border-color-translucent);
    }
}

@media (max-width: 575.98px) {
    .app-cview-hero-top {
        padding: 1rem;
    }

    .app-cview-emoji {
        width: 4.25rem;
        height: 4.25rem;
    }

    .app-cview-hero-actions {
        width: 100%;
    }

    .app-cview-hero-actions .btn {
        flex: 1 1 0;
        font-size: .875rem;
    }

    .app-cview-quick-btn {
        flex-direction: column;
        gap: .15rem;
        font-size: .78rem;
    }

    .app-cview-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-cview-fact,
    .app-cview-fact:nth-child(2n) {
        padding: .65rem 1rem;
        border-left: 0;
    }

    .app-cview-fact.is-empty {
        display: none;
    }

    .app-cview-comments {
        padding: .75rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-cview > .app-cview-hero,
    .app-cview > .row,
    .app-cview-msg:not([hidden]),
    .app-cview-panel {
        animation: none;
    }

    .app-cview-emoji,
    .app-cview-emoji-edit,
    .app-cview-quick-btn .bi,
    .app-cview-contact,
    .app-cview-progress span {
        transition: none;
    }
}

/* Company Create / Edit form: identity header, section navigation, grouped sections, inline hints and a save bar.
   AdminLTE gives .app-main overflow:auto, which stops position:sticky from following the window; this page needs it. */
body.layout-fixed .app-main:has(.app-cedit),
.app-main:has(.app-cedit) {
    overflow: visible;
}

.app-cedit {
    --app-cedit-ease: cubic-bezier(.2, .7, .2, 1);
    padding-bottom: .5rem;
}

.app-cedit-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 1rem;
    background-color: var(--bs-body-bg);
    background-image: linear-gradient(120deg, rgba(var(--bs-primary-rgb), .1), transparent 60%);
    box-shadow: var(--bs-box-shadow-sm);
    animation: app-cedit-rise 260ms var(--app-cedit-ease) both;
}

.app-cedit-avatar {
    flex: 0 0 3.5rem;
    width: 3.5rem;
    height: 3.5rem;
    overflow: hidden;
    border-radius: 50%;
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 3px var(--bs-body-bg), 0 .35rem 1rem rgba(var(--bs-primary-rgb), .3);
}

.app-cedit-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-cedit-identity-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bs-primary-text-emphasis);
}

.app-cedit-identity-name {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bs-emphasis-color);
    min-height: 1.7rem;
}

.app-cedit-identity-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    margin-top: .25rem;
    font-size: .8rem;
}

.app-cedit-identity-alert {
    font-weight: 600;
    color: var(--bs-danger-text-emphasis);
}

.app-cedit-identity-alert[hidden] {
    display: none;
}

.app-cedit-progress {
    color: var(--bs-secondary-color);
}

.app-cedit-nav {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .5rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 1rem;
    background-color: var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow-sm);
}

.app-cedit-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border-radius: .65rem;
    font-size: .9rem;
    text-decoration: none;
    color: var(--bs-secondary-color);
    transition: background-color 150ms ease, color 150ms ease;
}

.app-cedit-nav-link:hover,
.app-cedit-nav-link:focus-visible {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
}

.app-cedit-nav-link.active {
    font-weight: 600;
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.app-cedit-nav-link.has-error {
    color: var(--bs-danger-text-emphasis);
}

.app-cedit-nav-link.has-error::after {
    content: "";
    position: absolute;
    top: .55rem;
    left: .45rem;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background-color: var(--bs-danger);
}

.app-cedit-nav-count {
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color);
}

.app-cedit-nav-count.is-complete {
    color: var(--bs-success-text-emphasis);
}

.app-cedit-sec {
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 1rem;
    box-shadow: var(--bs-box-shadow-sm);
    scroll-margin-top: 1rem;
    animation: app-cedit-rise 260ms var(--app-cedit-ease) both;
}

.app-cedit-sec:nth-of-type(2) { animation-delay: 30ms; }
.app-cedit-sec:nth-of-type(3) { animation-delay: 60ms; }
.app-cedit-sec:nth-of-type(4) { animation-delay: 90ms; }
.app-cedit-sec:nth-of-type(5) { animation-delay: 120ms; }

.app-cedit-sec .card-body {
    padding: 1.25rem 1.35rem;
}

.app-cedit-sec-head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1rem;
}

.app-cedit-sec-icon {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .65rem;
    font-size: 1.05rem;
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.app-cedit-sec-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

.app-cedit-sec-hint {
    margin: .1rem 0 0;
    font-size: .82rem;
    color: var(--bs-secondary-color);
}

.app-cedit .form-label {
    margin-bottom: .3rem;
    font-size: .85rem;
    font-weight: 600;
}

.app-cedit .form-control,
.app-cedit .form-select {
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.app-cedit .form-control.is-valid {
    background-image: none;
    padding-right: .75rem;
    border-color: var(--bs-border-color);
}

.app-cedit .form-control.is-valid:focus {
    border-color: var(--bs-form-valid-border-color);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-success-rgb), .2);
}

.app-cedit .form-control.app-cedit-warn {
    border-color: var(--bs-warning);
}

.app-cedit .form-control.app-cedit-warn:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--bs-warning-rgb), .25);
}

.app-cedit-hint {
    display: none;
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--bs-warning-text-emphasis);
}

.app-cedit-hint.show {
    display: block;
    animation: app-cedit-fade 150ms ease-out both;
}

.app-cedit-action-group .app-cedit-open.disabled {
    opacity: .45;
}

.app-cedit-switch {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 0;
    padding: .8rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .85rem;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.app-cedit-switch:hover {
    background-color: var(--bs-tertiary-bg);
}

.app-cedit-switch:has(.form-check-input:checked) {
    border-color: var(--bs-danger-border-subtle);
    background-color: var(--bs-danger-bg-subtle);
}

.app-cedit-switch-icon {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
}

.app-cedit-switch .form-check-input {
    width: 2.6em;
    height: 1.4em;
    margin: 0;
    cursor: pointer;
}

.app-cedit-switch .form-check-input:checked {
    border-color: var(--bs-danger);
    background-color: var(--bs-danger);
}

.app-cedit-reveal {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: 1rem;
    border: 2px dashed var(--bs-border-color);
    border-radius: .85rem;
    text-align: left;
    color: var(--bs-body-color);
    background: transparent;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.app-cedit-reveal > .bi {
    font-size: 1.5rem;
    color: var(--bs-primary);
}

.app-cedit-reveal:hover,
.app-cedit-reveal:focus-visible {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

.app-cedit-collapsible:not([hidden]) {
    animation: app-cedit-rise 220ms var(--app-cedit-ease) both;
}

.app-cedit-milestones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .5rem;
}

.app-cedit-milestone {
    display: flex;
    align-items: center;
    gap: .65rem;
    height: 100%;
    margin: 0;
    padding: .6rem .8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    font-size: .9rem;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.app-cedit-milestone:hover {
    background-color: var(--bs-tertiary-bg);
}

.app-cedit-milestone:has(.form-check-input:checked) {
    border-color: var(--bs-success-border-subtle);
    background-color: var(--bs-success-bg-subtle);
}

.app-cedit-milestone .form-check-input {
    margin: 0;
    cursor: pointer;
}

.app-cedit-milestone .form-check,
.app-cedit-switch .form-check {
    min-height: 0;
    padding-left: 0;
}

.app-cedit-milestone .form-check-input:checked {
    border-color: var(--bs-success);
    background-color: var(--bs-success);
}

.app-cedit .emoji-option {
    transition: transform 150ms ease;
}

.app-cedit .emoji-option:hover {
    transform: translateY(-2px);
}

.app-cedit .emoji-option.selected {
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .35);
}

.app-cedit-bar {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .5rem;
    padding: .75rem 1rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 1rem 1rem 0 0;
    background-color: var(--bs-body-bg);
    box-shadow: 0 -.5rem 1.5rem -1rem rgba(0, 0, 0, .35);
}

.app-cedit-bar-status {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-size: .88rem;
    color: var(--bs-secondary-color);
}

.app-cedit-dot {
    flex: 0 0 .6rem;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background-color: var(--bs-secondary-bg);
    box-shadow: 0 0 0 3px var(--bs-tertiary-bg);
    transition: background-color 200ms ease;
}

.app-cedit-bar-status[data-state="dirty"] { color: var(--bs-warning-text-emphasis); font-weight: 600; }
.app-cedit-bar-status[data-state="dirty"] .app-cedit-dot { background-color: var(--bs-warning); }
.app-cedit-bar-status[data-state="saving"] .app-cedit-dot { background-color: var(--bs-primary); }
.app-cedit-bar-status[data-state="saved"] { color: var(--bs-success-text-emphasis); font-weight: 600; }
.app-cedit-bar-status[data-state="saved"] .app-cedit-dot { background-color: var(--bs-success); }
.app-cedit-bar-status[data-state="error"] { color: var(--bs-danger-text-emphasis); font-weight: 600; }
.app-cedit-bar-status[data-state="error"] .app-cedit-dot { background-color: var(--bs-danger); }

.app-cedit-bar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}

.app-cedit-save {
    min-width: 7.5rem;
    justify-content: center;
    font-weight: 600;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 200ms ease, border-color 200ms ease;
}

.app-cedit-save:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 .4rem 1rem rgba(var(--bs-primary-rgb), .35);
}

.app-cedit-state {
    display: none;
    align-items: center;
}

#btnSaveCompany:not([data-state]) [data-state="idle"],
#btnSaveCompany[data-state="idle"] [data-state="idle"],
#btnSaveCompany[data-state="saving"] [data-state="saving"],
#btnSaveCompany[data-state="saved"] [data-state="saved"] {
    display: inline-flex;
}

#btnSaveCompany[data-state="saved"],
#btnSaveCompany[data-state="saved"]:disabled {
    opacity: 1;
    border-color: var(--bs-success);
    background-color: var(--bs-success);
}

.app-cedit-delete-icon {
    width: 3.5rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
}

.app-cedit-toasts {
    z-index: 1090;
}

@keyframes app-cedit-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes app-cedit-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 575.98px) {
    .app-cedit-identity {
        padding: .85rem 1rem;
    }

    .app-cedit-avatar {
        flex-basis: 2.75rem;
        width: 2.75rem;
        height: 2.75rem;
    }

    .app-cedit-identity-name {
        font-size: 1.1rem;
    }

    .app-cedit-sec .card-body {
        padding: 1rem;
    }

    .app-cedit-bar {
        margin-left: -.5rem;
        margin-right: -.5rem;
        padding: .6rem .75rem;
    }

    .app-cedit-bar-status {
        width: 100%;
    }

    .app-cedit-bar-actions {
        width: 100%;
    }

    .app-cedit-bar-actions .btn {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-cedit-identity,
    .app-cedit-sec,
    .app-cedit-collapsible:not([hidden]),
    .app-cedit-hint.show {
        animation: none;
    }

    .app-cedit-nav-link,
    .app-cedit .form-control,
    .app-cedit .form-select,
    .app-cedit-switch,
    .app-cedit-reveal,
    .app-cedit-milestone,
    .app-cedit .emoji-option,
    .app-cedit-save,
    .app-cedit-dot {
        transition: none;
    }
}

/* Company Status: live status pill preview and the dashboard tile badge. */
.app-cstatus-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .4rem;
}

.app-cstatus-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: .15rem .65rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 150ms ease, color 150ms ease;
}

.app-cstatus-pill.is-empty {
    display: none;
}

.app-cstatus-pill.is-invalid-color {
    border-style: dashed;
    color: var(--bs-secondary-color);
    background-color: transparent;
}

.app-var-add .app-cstatus-pill {
    display: inline-flex;
}

.app-cstatus-tile {
    display: inline-flex;
    align-items: center;
    padding: .15rem .6rem;
    border-radius: 2rem;
    font-size: .75rem;
    color: var(--bs-info-text-emphasis);
    background-color: var(--bs-info-bg-subtle);
}

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

/* Milestones (Manage/Milestones): numbered steps, reach bars, Shown/Off switches, sticky save bar and a live preview.
   Reuses the Company Types building blocks (app-ctypes, app-ctypes-bar, app-var-filter-chip, app-lres-stat). */
body.layout-fixed .app-main:has(.app-miles-savebar) {
    overflow: visible;
}

.app-miles-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 0 1rem;
    align-items: start;
}

.app-miles-step-col {
    width: 3rem;
}

.app-miles-reach-col {
    width: 15rem;
}

.app-miles-step {
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 700;
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.app-miles-row.is-off .app-miles-step {
    color: var(--bs-secondary-color);
    background-color: var(--bs-secondary-bg);
}

.app-miles-row.is-off .milestone {
    color: var(--bs-secondary-color);
}

.app-miles-msg {
    margin-top: .3rem;
    font-size: .78rem;
    color: var(--bs-danger-text-emphasis);
}

.app-miles-msg[hidden] {
    display: none;
}

.app-miles-switch {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    cursor: pointer;
}

.app-miles-switch .form-check-input {
    margin: 0;
    cursor: pointer;
}

.app-miles-switch-text {
    min-width: 3rem;
    font-size: .8rem;
    font-weight: 600;
    text-align: left;
    color: var(--bs-success-text-emphasis);
}

.app-miles-row.is-off .app-miles-switch-text {
    color: var(--bs-secondary-color);
}

.app-miles-savebar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    background-color: var(--bs-body-bg);
    box-shadow: 0 -.5rem 1rem -.75rem rgba(var(--bs-emphasis-color-rgb), .35);
}

.app-miles-status {
    display: inline-flex;
    align-items: center;
    font-size: .85rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.app-miles-status[data-state="dirty"] { color: var(--bs-warning-text-emphasis); }
.app-miles-status[data-state="saving"] { color: var(--bs-info-text-emphasis); }
.app-miles-status[data-state="saved"] { color: var(--bs-success-text-emphasis); }
.app-miles-status[data-state="error"] { color: var(--bs-danger-text-emphasis); }

.app-miles-preview {
    position: sticky;
    top: 1rem;
}

.app-miles-preview-card {
    padding: .85rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: .75rem;
    background-color: var(--bs-body-bg);
}

.app-miles-preview-bar {
    height: .3rem;
    margin-bottom: .6rem;
    border-radius: 1rem;
    background-color: var(--bs-secondary-bg);
}

.app-miles-preview-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    font-size: .88rem;
    font-weight: 600;
    animation: app-signin-fade 150ms ease-out both;
}

.app-miles-preview-item:last-child {
    border-bottom: 0;
}

.app-miles-preview-item .bi {
    color: var(--bs-secondary-color);
}

@media (max-width: 1199.98px) {
    .app-miles-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-miles-preview {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .app-miles-step-col,
    .app-miles-table td:first-child {
        display: none;
    }

    .app-miles-switch-text {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-miles-preview-item {
        animation: none;
    }
}

/* Emojis (Manage/Emojis): hero with usage tiles, drag-and-drop upload with preview, gallery with usage per emoji. */
.app-emo {
    padding-top: .75rem;
}

.app-emo > * {
    animation: app-dash-rise 280ms var(--app-dash-ease) both;
}

.app-emo-lead {
    max-width: 42rem;
    color: var(--app-hero-on-muted);
}

.app-emo-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
    width: 100%;
}

.app-emo-top {
    grid-template-columns: auto minmax(0, 1fr);
}

.app-emo-top-img {
    grid-row: 1 / 3;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 3px var(--bs-info-border-subtle);
}

.app-emo-top .app-lres-stat-value {
    font-size: 1rem;
}

.app-emo-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    padding: 1rem;
    border: 2px dashed var(--bs-border-color);
    border-radius: 1rem;
    text-align: center;
    cursor: pointer;
    background-color: var(--bs-tertiary-bg);
    transition: border-color 150ms ease, background-color 150ms ease;
}

.app-emo-drop:hover,
.app-emo-drop:focus-within,
.app-emo-drop.is-dragging {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), .06);
}

.app-emo-drop.is-dragging .app-emo-drop-icon {
    transform: translateY(-3px) scale(1.06);
}

.app-emo-drop.is-invalid {
    border-color: var(--bs-form-invalid-border-color);
}

.app-emo-drop.has-image {
    border-style: solid;
    background-color: var(--bs-body-bg);
}

.app-emo-drop img {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 4px var(--bs-body-bg), 0 .5rem 1.25rem rgba(var(--bs-primary-rgb), .25);
    animation: app-signin-fade 200ms ease-out both;
}

.app-emo-drop-icon {
    width: 3.25rem;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .6rem;
    border-radius: 1rem;
    font-size: 1.5rem;
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
    transition: transform 150ms ease;
}

.app-emo-drop-state {
    margin-top: .75rem;
    font-size: .82rem;
    color: var(--bs-secondary-color);
}

.app-emo-drop-state[data-kind="ok"] {
    color: var(--bs-success-text-emphasis);
    font-weight: 600;
}

.app-emo-rules {
    margin: .75rem 0 0;
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

.app-emo-rules .bi {
    margin-right: .35rem;
    color: var(--bs-success);
}

.app-emo-progress {
    height: .35rem;
    margin-top: .6rem;
}

.app-emo-note {
    margin: .75rem 0 0;
    font-size: .78rem;
    color: var(--bs-info-text-emphasis);
}

.app-emo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: .75rem;
}

.app-emo-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .75rem .5rem .6rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: .9rem;
    text-align: center;
    background-color: var(--bs-body-bg);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, opacity 200ms ease;
}

.app-emo-tile:hover {
    transform: translateY(-2px);
    border-color: var(--bs-primary-border-subtle);
    box-shadow: 0 .5rem 1.25rem -.75rem rgba(var(--bs-primary-rgb), .5);
}

.app-emo-tile.is-removing {
    opacity: 0;
    transform: scale(.92);
}

.app-emo-pic {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: .5rem;
}

.app-emo-pic img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bs-tertiary-bg);
}

.app-emo-delete {
    position: absolute;
    top: -.35rem;
    right: -.6rem;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border-radius: 50%;
    opacity: 0;
    transform: scale(.8);
    transition: opacity 150ms ease, transform 150ms ease;
}

.app-emo-tile:hover .app-emo-delete,
.app-emo-tile:focus-within .app-emo-delete {
    opacity: 1;
    transform: none;
}

@media (hover: none) {
    .app-emo-delete {
        opacity: 1;
        transform: none;
    }
}

.app-emo-name {
    max-width: 100%;
    font-size: .8rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--bs-emphasis-color);
}

.app-emo-usage {
    margin-top: .2rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-primary-text-emphasis);
}

.app-emo-usage.is-unused {
    padding: .05rem .5rem;
    border-radius: 2rem;
    font-weight: 400;
    color: var(--bs-warning-text-emphasis);
    background-color: var(--bs-warning-bg-subtle);
}

.app-emo-bar {
    width: 70%;
    height: .25rem;
    margin-top: .3rem;
    overflow: hidden;
    border-radius: 1rem;
    background-color: var(--bs-secondary-bg);
}

.app-emo-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--bs-primary);
}

.app-emo-missing,
.app-emo-missing-text {
    display: none;
}

.app-emo-tile.is-missing .app-emo-pic img {
    visibility: hidden;
}

.app-emo-tile.is-missing .app-emo-missing {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--bs-border-color);
    border-radius: 50%;
    font-size: 1.4rem;
    color: var(--bs-secondary-color);
}

.app-emo-tile.is-missing .app-emo-missing-text {
    display: block;
    margin-top: .2rem;
    font-size: .7rem;
    color: var(--bs-danger-text-emphasis);
}

@media (max-width: 991.98px) {
    .app-emo-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .app-emo-grid {
        grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
        gap: .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-emo > * {
        animation: none;
    }

    .app-emo-tile,
    .app-emo-delete,
    .app-emo-drop,
    .app-emo-drop-icon {
        transition: none;
    }
}

/* Website Settings (Manage/WebSettings): sections, presets, contrast checks, live preview, sticky save bar. */
body.layout-fixed .app-main:has(.app-wset-savebar) {
    overflow: visible;
}

.app-wset {
    padding-top: .75rem;
}

/* "Reset to defaults" sits on the card header, whose background the user can color: it takes the header's own
   text color (kept readable by the theme) with a neutral translucent tint, so it reads on any header color. */
.app-wset-reset {
    color: inherit;
    border: 1px solid currentColor;
    border-color: rgba(127, 127, 127, .45);
    background-color: rgba(127, 127, 127, .12);
    transition: background-color 150ms ease, border-color 150ms ease;
}

.app-wset-reset:hover,
.app-wset-reset:focus-visible {
    color: inherit;
    border-color: currentColor;
    background-color: rgba(127, 127, 127, .24);
}

.app-wset-reset:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(127, 127, 127, .45);
}

.app-wset-reset:active {
    color: inherit;
    background-color: rgba(127, 127, 127, .32);
}

.app-wset > section,
.app-wset > .app-wset-layout {
    animation: app-dash-rise 280ms var(--app-dash-ease) both;
}

.app-wset-lead {
    max-width: 40rem;
    color: var(--app-hero-on-muted);
}

.app-wset-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 1rem;
    align-items: start;
}

.app-wset-side {
    position: sticky;
    top: 1rem;
}

/* Logo */
.app-wset-drop {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
    padding: 1rem;
    border: 2px dashed var(--bs-border-color);
    border-radius: 1rem;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.app-wset-drop:hover,
.app-wset-drop.is-over {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), .05);
}

.app-wset-logo-preview {
    display: flex;
    flex: 0 0 13rem;
    align-items: center;
    justify-content: center;
    height: 6rem;
    padding: .75rem;
    border-radius: .75rem;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px var(--bs-border-color-translucent);
}

.app-wset-logo-preview img {
    max-width: 100%;
    max-height: 100%;
}

.app-wset-logo-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    color: #6c757d;
}

.app-wset-logo-empty .bi {
    font-size: 1.5rem;
}

.app-wset-logo-preview.is-empty img {
    display: none;
}

.app-wset-logo-preview.is-empty .app-wset-logo-empty {
    display: flex;
}

.app-wset-drop-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-size: .9rem;
}

.app-wset-drop-text .bi {
    font-size: 1.4rem;
    color: var(--bs-primary);
}

.app-wset-drop-text > span {
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

.app-wset-upload {
    height: .4rem;
    margin-top: .5rem;
}

.app-wset-upload-message {
    min-height: 1.2rem;
    margin-top: .35rem;
}

/* Theme: mode cards, preset swatches, scheme switch */
.app-wset-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.app-wset-mode {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0;
    padding: .85rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .85rem;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.app-wset-mode .form-check-input {
    margin-top: .2rem;
    flex: 0 0 auto;
}

.app-wset-mode > span:last-child {
    display: flex;
    flex-direction: column;
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.app-wset-mode strong {
    font-size: .92rem;
    color: var(--bs-emphasis-color);
}

.app-wset-mode-icon {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .6rem;
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.app-wset-mode.is-active {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), .05);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
}

.app-wset-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: .6rem;
}

.app-wset-preset {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .8rem;
    text-align: left;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.app-wset-preset:hover,
.app-wset-preset:focus-visible {
    transform: translateY(-2px);
    border-color: var(--bs-primary);
}

.app-wset-preset.is-active {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}

.app-wset-preset-swatches {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    height: 1.6rem;
    overflow: hidden;
    border-radius: .45rem;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.app-wset-preset-name {
    font-size: .8rem;
    font-weight: 600;
}

.app-wset-schemes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .25rem;
    border-radius: .75rem;
    background-color: var(--bs-tertiary-bg);
}

.app-wset-scheme {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border: 0;
    border-radius: .55rem;
    font-size: .88rem;
    color: var(--bs-secondary-color);
    background: transparent;
    transition: background-color 150ms ease, color 150ms ease;
}

.app-wset-scheme.is-active {
    color: var(--bs-emphasis-color);
    background-color: var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow-sm);
}

/* Custom colors */
.app-wset-colors.is-inactive .app-wset-pair {
    opacity: .6;
}

.app-wset-colors-note {
    margin-bottom: 1rem;
    padding: .6rem .8rem;
    border-radius: .65rem;
    font-size: .85rem;
    color: var(--bs-info-text-emphasis);
    background-color: var(--bs-info-bg-subtle);
}

.app-wset-pair {
    padding: .9rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    transition: opacity 150ms ease;
}

.app-wset-pair:first-of-type {
    padding-top: 0;
}

.app-wset-pair:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.app-wset-pair-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.app-wset-pair-title {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.app-wset-pair-title .bi {
    color: var(--bs-primary);
}

.app-wset-pair-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.app-wset-boxes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-wset-color .form-control {
    font-family: var(--bs-font-monospace);
    letter-spacing: .03em;
}

.app-wset-contrast {
    display: inline-flex;
    align-items: center;
    padding: .15rem .6rem;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 600;
}

.app-wset-contrast:empty {
    display: none;
}

.app-wset-contrast.is-good { color: var(--bs-success-text-emphasis); background-color: var(--bs-success-bg-subtle); }
.app-wset-contrast.is-fair { color: var(--bs-warning-text-emphasis); background-color: var(--bs-warning-bg-subtle); }
.app-wset-contrast.is-poor { color: var(--bs-danger-text-emphasis); background-color: var(--bs-danger-bg-subtle); }

/* Live preview: a small copy of the app shell, colored by the --wset-* values the page sets. */
.app-wset-preview-card {
    padding: .85rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 1rem;
    background-color: var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow-sm);
}

.app-wset-preview-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    margin-bottom: .6rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.app-wset-preview-scheme {
    font-size: .72rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.app-wset-preview {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    min-height: 15rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: .7rem;
    font-size: .68rem;
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
}

.app-wset-pv-sidebar {
    padding: .5rem .35rem;
    color: var(--wset-sidebar-text, #c2c7d0);
    background-color: var(--wset-sidebar, #343a40);
    transition: background-color 200ms ease, color 200ms ease;
}

.app-wset-pv-brand {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .45rem;
    padding: 0 .25rem .4rem;
    overflow: hidden;
    border-bottom: 1px solid rgba(127, 127, 127, .3);
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.app-wset-pv-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-wset-pv-nav {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .15rem;
    padding: .25rem .35rem;
    border-radius: .35rem;
}

.app-wset-pv-nav.is-active {
    background-color: rgba(127, 127, 127, .25);
}

.app-wset-pv-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-wset-pv-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .5rem;
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
}

.app-wset-pv-avatar {
    width: .9rem;
    height: .9rem;
    margin-left: auto;
    border-radius: 50%;
    background-color: var(--bs-secondary-bg);
}

.app-wset-pv-body {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .45rem;
}

.app-wset-pv-hero {
    display: flex;
    flex-direction: column;
    padding: .45rem .5rem;
    border-radius: .45rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--wset-accent, #0d6efd);
    background-image: linear-gradient(135deg, transparent 40%, rgba(0, 0, 0, .35) 100%);
    transition: background-color 200ms ease;
}

.app-wset-pv-hero span {
    font-size: .58rem;
    font-weight: 500;
    opacity: .85;
}

.app-wset-pv-kpi {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .45rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: .45rem;
    background-color: var(--bs-body-bg);
}

.app-wset-pv-kpi strong {
    display: block;
    font-size: .8rem;
    line-height: 1;
    color: var(--bs-emphasis-color);
}

.app-wset-pv-kpi small {
    font-size: .58rem;
    color: var(--bs-secondary-color);
}

.app-wset-pv-kpi-icon {
    width: 1.3rem;
    height: 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .35rem;
    color: var(--wset-accent, #0d6efd);
    background-color: var(--bs-tertiary-bg);
}

.app-wset-pv-card {
    overflow: hidden;
    border: 1px solid var(--bs-border-color-translucent);
    border-top: 2px solid var(--wset-panel, #0d6efd);
    border-radius: .45rem;
    background-color: var(--bs-body-bg);
}

.app-wset-pv-card-head {
    padding: .3rem .45rem;
    font-weight: 600;
    color: var(--wset-panel-text, inherit);
    background-color: var(--wset-panel, transparent);
    transition: background-color 200ms ease, color 200ms ease;
}

.app-wset-preview.is-default .app-wset-pv-card {
    border-top-color: var(--wset-accent, #0d6efd);
}

.app-wset-preview.is-default .app-wset-pv-card-head {
    color: var(--bs-emphasis-color);
    background-color: transparent;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.app-wset-pv-card-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .4rem .45rem;
}

.app-wset-pv-link {
    color: var(--wset-link, #0d6efd);
    pointer-events: none;
}

.app-wset-pv-pill {
    padding: .05rem .35rem;
    border-radius: 1rem;
    font-size: .58rem;
    color: var(--bs-warning-text-emphasis);
    background-color: var(--bs-warning-bg-subtle);
}

.app-wset-pv-button {
    margin-left: auto;
    padding: .15rem .55rem;
    border: 0;
    border-radius: .35rem;
    font-size: .62rem;
    color: var(--wset-accent-text, #fff);
    background-color: var(--wset-accent, #0d6efd);
    pointer-events: none;
    transition: background-color 200ms ease, color 200ms ease;
}

.app-wset-preview-note {
    margin: .55rem 0 0;
    font-size: .72rem;
    color: var(--bs-secondary-color);
}

/* Sticky save bar */
.app-wset-savebar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem .75rem;
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: .9rem;
    background-color: var(--bs-body-bg);
    box-shadow: 0 -.5rem 1.5rem -1rem rgba(0, 0, 0, .35);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.app-wset-savebar.is-dirty {
    border-color: var(--bs-warning-border-subtle);
    box-shadow: 0 -.5rem 1.5rem -1rem rgba(var(--bs-warning-rgb), .7);
}

.app-wset-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-right: auto;
    font-size: .88rem;
    color: var(--bs-secondary-color);
}

.app-wset-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background-color: var(--bs-secondary-color);
}

.app-wset-status.is-dirty { color: var(--bs-warning-text-emphasis); font-weight: 600; }
.app-wset-status.is-dirty .app-wset-dot { background-color: var(--bs-warning); }
.app-wset-status.is-saving .app-wset-dot { background-color: var(--bs-info); }
.app-wset-status.is-saved { color: var(--bs-success-text-emphasis); font-weight: 600; }
.app-wset-status.is-saved .app-wset-dot { background-color: var(--bs-success); }

@media (max-width: 1199.98px) {
    .app-wset-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-wset-side {
        position: static;
        order: -1;
    }

    .app-wset-preview {
        max-width: 28rem;
    }
}

@media (max-width: 575.98px) {
    .app-wset-drop {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .app-wset-logo-preview {
        flex-basis: auto;
    }

    .app-wset-modes,
    .app-wset-pair-fields,
    .app-wset-boxes {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-wset-savebar .btn {
        flex: 1 1 0;
    }

    .app-wset-status {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-wset > section,
    .app-wset > .app-wset-layout {
        animation: none;
    }

    .app-wset-drop,
    .app-wset-mode,
    .app-wset-preset,
    .app-wset-scheme,
    .app-wset-pair,
    .app-wset-pv-sidebar,
    .app-wset-pv-hero,
    .app-wset-pv-card-head,
    .app-wset-pv-button,
    .app-wset-savebar {
        transition: none;
    }
}

/* Work Per Dates and Logs (Report/workperdates, Report/Logs): hero with result stats, quick date ranges,
   notes-per-day chart, breakdowns that filter the list, log action chips, keyword highlight, relative times. */
.app-rdates {
    padding-top: .75rem;
}

.app-rdates > * {
    animation: app-dash-rise 280ms var(--app-dash-ease) both;
}

.app-rdates-lead {
    max-width: 42rem;
    color: var(--app-hero-on-muted);
}

.app-rdates-stats .app-lres-stat {
    cursor: default;
}

.app-rdates-stats .app-lres-stat:hover {
    transform: none;
    border-color: transparent;
}

.app-rdates-stat-text {
    font-size: 1rem;
}

.app-rdates-ranges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1rem;
}

.app-rdates-ranges-label {
    margin-right: .25rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.app-rdates-range {
    padding: .3rem .8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    font-size: .85rem;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.app-rdates-range:hover,
.app-rdates-range:focus-visible {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    transform: translateY(-1px);
}

.app-rdates-range.is-active {
    border-color: var(--bs-primary);
    color: var(--bs-white);
    background-color: var(--bs-primary);
}

.app-rdates-date {
    position: relative;
}

.app-rdates-date > .bi {
    position: absolute;
    top: 50%;
    left: .8rem;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.app-rdates-date .form-control {
    padding-left: 2.3rem;
}

.app-rdates-date:has(.is-invalid) ~ .invalid-feedback {
    display: block;
}

.app-rdates-insights.is-loading {
    opacity: .55;
    transition: opacity 150ms ease;
}

.app-rdates-insight-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .5rem;
    margin-bottom: .75rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

.app-rdates-insight-sub {
    font-size: .78rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.app-rdates-days {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 8.5rem;
    padding-bottom: 1.2rem;
}

.app-rdates-day {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
}

.app-rdates-day-bar {
    display: block;
    width: 100%;
    border-radius: .3rem .3rem .1rem .1rem;
    background-color: rgba(var(--bs-primary-rgb), .35);
    transform-origin: bottom;
    animation: app-rdates-grow 250ms var(--app-dash-ease) both;
}

.app-rdates-day.is-busiest .app-rdates-day-bar {
    background-color: var(--bs-primary);
}

.app-rdates-day:hover .app-rdates-day-bar {
    background-color: var(--bs-primary);
}

.app-rdates-day-label {
    position: absolute;
    bottom: -1.2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: .65rem;
    white-space: nowrap;
    color: var(--bs-secondary-color);
}

@keyframes app-rdates-grow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

.app-rdates-breakdown {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.app-rdates-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .15rem .5rem;
    padding: .3rem .45rem;
    border: 0;
    border-radius: .5rem;
    text-align: left;
    color: var(--bs-body-color);
    background: transparent;
    transition: background-color 150ms ease;
}

.app-rdates-bar-row:hover,
.app-rdates-bar-row:focus-visible {
    background-color: var(--bs-tertiary-bg);
}

.app-rdates-bar-name {
    overflow: hidden;
    font-size: .85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-rdates-bar-count {
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.app-rdates-bar {
    grid-column: 1 / -1;
    height: .3rem;
    overflow: hidden;
    border-radius: 1rem;
    background-color: var(--bs-secondary-bg);
}

.app-rdates-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--bs-primary);
}

.app-rdates-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    background-color: var(--bs-tertiary-bg);
}

.app-rdates-actions[hidden] {
    display: none;
}

.app-rdates-actions #rlogs-action-chips {
    display: contents;
}

.app-rdates-action {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .65rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    font-size: .8rem;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    transition: border-color 150ms ease, color 150ms ease;
}

.app-rdates-action:hover,
.app-rdates-action:focus-visible {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.app-rdates-action.is-active {
    border-color: var(--bs-primary);
    color: var(--bs-white);
    background-color: var(--bs-primary);
}

.app-rdates-action.is-active .app-rdates-action-count {
    color: var(--bs-primary);
    background-color: var(--bs-white);
}

.app-rdates-action-count {
    padding: 0 .4rem;
    border-radius: 1rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.app-rdates-actions-hint {
    margin-left: auto;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.app-rdates-rel {
    font-size: .72rem;
    color: var(--bs-secondary-color);
}

.app-rdates-mark {
    padding: 0 .1rem;
    border-radius: .2rem;
    color: inherit;
    background-color: var(--bs-warning-bg-subtle);
}

@media (max-width: 575.98px) {
    .app-rdates-actions-hint {
        display: none;
    }

    .app-rdates-days {
        height: 6.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-rdates > *,
    .app-rdates-day-bar {
        animation: none;
    }

    .app-rdates-range,
    .app-rdates-bar-row,
    .app-rdates-action,
    .app-rdates-insights.is-loading {
        transition: none;
    }
}

/* Company reports (Report/companieswithinfo, companiesalert, customreport): hero with filter bar and count tiles,
   status pills, contact-detail dots, last-note age and the Custom Report field builder. */
.app-rcomp {
    padding-top: .75rem;
}

.app-rcomp > section,
.app-rcomp > .card {
    animation: app-dash-rise 280ms var(--app-dash-ease) both;
}

.app-rcomp-lead {
    max-width: 40rem;
    color: var(--app-hero-on-muted);
}

.app-rcomp-hero .app-hero-main {
    flex: 1 1 28rem;
}

.app-rcomp-filter {
    flex: 0 1 18rem;
    padding: .85rem 1rem;
    border-radius: .85rem;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    box-shadow: 0 .75rem 1.75rem -.75rem var(--app-hero-shade);
}

.app-rcomp-filter-wide {
    flex: 1 1 100%;
}

.app-rcomp-filter-label {
    display: block;
    margin-bottom: .3rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.app-rcomp-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: .75rem;
    align-items: end;
}

.app-rcomp-filter-submit .btn {
    min-width: 8rem;
}

.app-rcomp-tiles {
    width: 100%;
}

.app-rcomp .app-lres-stat:disabled {
    cursor: default;
    opacity: .75;
    transform: none;
}

.app-rcomp-hero-bell {
    margin-right: .6rem;
    font-size: 1rem;
    vertical-align: .3em;
}

.app-rcomp-status {
    display: inline-block;
    max-width: 14rem;
    padding: .15rem .6rem;
    overflow: hidden;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
    background-color: var(--bs-secondary-bg);
}

.app-rcomp-dots {
    display: flex;
    gap: .4rem;
    margin-top: .25rem;
    font-size: .8rem;
}

.app-rcomp-dots .bi {
    color: var(--bs-border-color);
}

.app-rcomp-dots .bi.is-on {
    color: var(--bs-success);
}

.app-rcomp-stale {
    color: var(--bs-warning-text-emphasis);
}

.app-rcomp-builder-count {
    font-size: .82rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.app-rcomp-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}

.app-rcomp-field {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0;
    padding: .6rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, opacity 150ms ease;
}

.app-rcomp-field:has(.form-check-input:checked) {
    border-color: var(--bs-primary-border-subtle);
    background-color: rgba(var(--bs-primary-rgb), .05);
}

.app-rcomp-field:not(:has(.form-check-input:checked)) {
    opacity: .7;
}

.app-rcomp-field-icon {
    flex: 0 0 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .55rem;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
}

.app-rcomp-field:has(.form-check-input:checked) .app-rcomp-field-icon {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.app-rcomp-field-text {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: .9rem;
}

.app-rcomp-field .form-switch .form-check-input {
    margin: 0;
    cursor: pointer;
}

@media (max-width: 991.98px) {
    .app-rcomp-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-rcomp-filter-submit {
        grid-column: 1 / -1;
    }

    .app-rcomp-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .app-rcomp-filter {
        flex: 1 1 100%;
    }

    .app-rcomp-filter-grid,
    .app-rcomp-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-rcomp > section,
    .app-rcomp > .card {
        animation: none;
    }

    .app-rcomp-field {
        transition: none;
    }
}

/* Calendar (Calendar/Index): hero with counts that jump to today / next 7 days / month, click-a-day add,
   sectioned event form and event details. FullCalendar itself is styled by the .app-calendar rules above. */
.app-cal {
    padding-top: .75rem;
}

.app-cal > * {
    animation: app-dash-rise 280ms var(--app-dash-ease) both;
}

.app-cal-lead {
    max-width: 38rem;
    color: var(--app-hero-on-muted);
}

.app-cal-dots {
    display: inline-block;
    width: 1.6rem;
    height: .9rem;
    border-radius: .3rem;
    background-color: var(--bs-secondary-bg);
}

.app-calendar .fc-day:hover,
.app-calendar .fc-day-top:hover {
    cursor: pointer;
}

.app-calendar .fc-day.fc-widget-content:hover {
    background-color: rgba(var(--bs-primary-rgb), .05);
}

.app-cal-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    margin-top: 1rem;
    padding: 1.25rem 1rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: .85rem;
    text-align: center;
    animation: app-signin-fade 200ms ease-out both;
}

.app-cal-empty[hidden] {
    display: none;
}

.app-cal-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.app-cal-section + .app-cal-section {
    padding-top: 1.1rem;
    border-top: 1px solid var(--bs-border-color-translucent);
}

.app-cal-section-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .75rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

.app-cal-section-icon {
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: .55rem;
    font-size: .9rem;
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.app-cal-relative {
    min-height: 1.2em;
    font-weight: 600;
    color: var(--bs-primary-text-emphasis);
}

.app-cal-quick-times {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .45rem;
}

.app-cal-switch {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .65rem .8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .8rem;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.app-cal-switch:has(.form-check-input:checked) {
    border-color: var(--bs-success-border-subtle);
    background-color: var(--bs-success-bg-subtle);
}

.app-cal-switch .form-switch .form-check-input {
    width: 2.5rem;
    height: 1.35rem;
    margin: 0;
    cursor: pointer;
}

.app-cal-details-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.app-cal-details-date {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    width: 3.75rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow-sm);
}

.app-cal-details-month {
    width: 100%;
    padding: .15rem 0;
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    color: var(--bs-white);
    background-color: var(--bs-primary);
}

.app-cal-details-day {
    padding: .2rem 0 .3rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bs-emphasis-color);
}

.app-cal-details-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bs-emphasis-color);
    overflow-wrap: anywhere;
}

.app-cal-details-head .badge {
    margin-top: .35rem;
}

.app-cal-details-list > div {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: .75rem;
    padding: .55rem 0;
    border-top: 1px solid var(--bs-border-color-translucent);
}

.app-cal-details-list dt {
    font-size: .82rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.app-cal-details-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .app-cal-details-list > div {
        grid-template-columns: minmax(0, 1fr);
        gap: .15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-cal > *,
    .app-cal-empty {
        animation: none;
    }

    .app-cal-switch {
        transition: none;
    }
}

/* Company list: selection for Send Emails. The bar sticks to the bottom while the list scrolls; AdminLTE scrolls
   .app-main itself, so the window scrolls on this page instead. */
body.layout-fixed .app-main:has(.app-clist-selection) {
    overflow: visible;
}

.app-clist-table .app-clist-select {
    width: 2.5rem;
    padding-right: 0;
}

.app-clist-table .app-clist-select .form-check-input {
    margin: 0;
    cursor: pointer;
}

.app-clist-table tbody tr.app-clist-selected > * {
    --bs-table-bg: rgba(var(--bs-primary-rgb), .08);
}

.app-clist-selection {
    position: sticky;
    bottom: .75rem;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-bottom: 1rem;
    padding: .65rem 1rem;
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-primary-bg-subtle);
    box-shadow: 0 .5rem 1.25rem -.5rem rgba(var(--bs-primary-rgb), .45);
    animation: app-clist-in 200ms ease-out both;
}

.app-clist-selection > .bi {
    font-size: 1.25rem;
}

.app-clist-selection .btn.disabled {
    pointer-events: auto;
    cursor: not-allowed;
}

@media (max-width: 575.98px) {
    .app-clist-selection {
        bottom: .5rem;
    }

    .app-clist-selection .btn {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-clist-selection {
        animation: none;
    }
}

/* Send Emails (Email/Index, Compose, Results). The send bar sticks to the bottom, so the window scrolls on these pages. */
body.layout-fixed .app-main:has(.app-email-sendbar) {
    overflow: visible;
}

.app-email {
    padding-top: .75rem;
}

.app-email > * {
    animation: app-clist-in 220ms ease-out both;
}

.app-email-how-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .7rem;
    font-size: 1.15rem;
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.app-email-from {
    display: flex;
    align-items: center;
    padding: .45rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    overflow-wrap: anywhere;
}

.app-email-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
}

.app-email-fields .text-body-secondary:last-child {
    flex: 1 1 100%;
}

.app-email .cke {
    border-radius: var(--bs-border-radius);
}

.app-email .is-invalid + .cke,
.app-email textarea.is-invalid ~ .cke {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb), .2);
}

.app-email textarea.is-invalid ~ .invalid-feedback {
    display: block;
}

.app-email-invalid {
    border-color: var(--bs-form-invalid-border-color) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb), .2);
    transition: box-shadow 200ms ease;
}

.app-email-list {
    max-height: 32rem;
    overflow-y: auto;
    border-top: 1px solid var(--bs-border-color-translucent);
}

.app-email-company {
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.app-email-company:last-child {
    border-bottom: 0;
}

.app-email-company-name {
    display: inline-block;
    margin-bottom: .35rem;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.app-email-person {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 0 0 .35rem;
    padding: .5rem .6rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: var(--bs-border-radius);
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.app-email-person:last-child {
    margin-bottom: 0;
}

.app-email-person:hover {
    border-color: var(--bs-primary-border-subtle);
}

.app-email-person.is-chosen {
    border-color: var(--bs-primary-border-subtle);
    background-color: rgba(var(--bs-primary-rgb), .08);
}

.app-email-person.is-disabled {
    cursor: not-allowed;
    opacity: .75;
}

.app-email-person .form-check-input {
    flex-shrink: 0;
    margin-top: .2rem;
}

.app-email-person-text {
    min-width: 0;
}

.app-email-sendbar {
    position: sticky;
    bottom: .75rem;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-bottom: 1rem;
    padding: .7rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-body-bg);
    box-shadow: 0 .5rem 1.25rem -.5rem rgba(0, 0, 0, .35);
}

.app-email-preview-head {
    display: grid;
    gap: .25rem;
    margin-bottom: .75rem;
}

.app-email-preview-head > div {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: .5rem;
}

.app-email-preview-head dt {
    font-size: .82rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.app-email-preview-head dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* The message is shown as the recipient sees it: on white, whatever the portal theme. */
.app-email-preview-frame {
    display: block;
    width: 100%;
    min-height: 22rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: #fff;
}

.app-email-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
}

.app-email-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: .6rem .8rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-left: .25rem solid var(--app-email-stat, var(--bs-primary));
    border-radius: .6rem;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    text-align: left;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.app-email-stat:hover,
.app-email-stat:focus-visible {
    transform: translateY(-2px);
}

.app-email-stat.is-active {
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .3);
}

.app-email-stat.is-sent { --app-email-stat: var(--bs-success); }
.app-email-stat.is-failed { --app-email-stat: var(--bs-danger); }
.app-email-stat.is-waiting { --app-email-stat: var(--bs-secondary); }

.app-email-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

.app-email-stat-label {
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
    .app-email-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-email-sendbar {
        bottom: .5rem;
    }

    .app-email-sendbar .btn {
        flex: 1 1 auto;
    }

    .app-email-preview-head > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-email > *,
    .app-email-stat,
    .app-email-person {
        animation: none;
        transition: none;
    }
}