/* ============================================================================
   Connect Back Office — lightweight admin shell
   Replaces the Phoenix theme (theme.min.css / phoenix.js / app.js) with a
   small custom layer on top of Bootstrap 5.3.
   ========================================================================== */

/* Palette derived from the Connect logo: azure primary, navy support, orange accent dot */
:root {
    --admin-brand: #0d76ba;          /* logo azure, deepened for AA contrast on white */
    --admin-brand-bright: #1aa7e8;   /* logo's light azure */
    --admin-navy: #2b3990;           /* logo's deep end */
    --admin-accent: #f26522;         /* logo's orange dot */
    --admin-brand-soft: rgba(26, 167, 232, .12);
    --admin-sidebar-width: 260px;
    --admin-sidebar-width-collapsed: 76px;
    /* Drives both the topbar and the sidebar brand block, so they stay aligned. */
    --admin-topbar-height: 3rem;
    --admin-sidebar-bg: #ffffff;
    --admin-sidebar-border: #e3e6ed;
    --admin-content-bg: #f4f7fb;
    --admin-nav-color: #3e465b;
    --admin-nav-hover-bg: rgba(26, 167, 232, .09);
    --admin-btn-bg: #0d76ba;
    --admin-btn-hover: #0b649e;
    --admin-radius-lg: 1rem;
    --admin-radius: .75rem;
    --admin-radius-sm: .625rem;
}

[data-bs-theme="dark"] {
    --admin-brand: #38b6f1;
    --admin-brand-soft: rgba(56, 182, 241, .16);
    --admin-sidebar-bg: #131a26;
    --admin-sidebar-border: #273245;
    --admin-content-bg: #0d1320;
    --admin-nav-color: #cbd0dd;
    --admin-nav-hover-bg: rgba(56, 182, 241, .12);
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--admin-content-bg);
}

h1, h2, h3, h4, h5, h6, .btn, .badge {
    letter-spacing: -.01em;
}

/* ----------------------------------------------------------------------------
   Accessibility: display settings (Profile → Display), skip link, focus
---------------------------------------------------------------------------- */
/* Everything is sized in rem, so the root size scales the whole interface. */
html[data-text-size="large"] { font-size: 112.5%; }
html[data-text-size="larger"] { font-size: 125%; }
html[data-text-size="largest"] { font-size: 137.5%; }

html[data-reduce-motion] *,
html[data-reduce-motion] *::before,
html[data-reduce-motion] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
}

html[data-underline-links] .admin-content a:not(.btn):not(.nav-link):not(.list-group-item):not(.dropdown-item) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ru-skip-link {
    position: absolute;
    left: .75rem;
    top: -4rem;
    z-index: 2000;
    padding: .5rem 1rem;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-btn-bg);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.ru-skip-link:focus {
    top: .75rem;
    color: #fff;
}

.admin-content:focus {
    outline: none;
}

/* A visible focus ring for keyboard users on anything interactive that doesn't style its own. */
:where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"]), .ru-icon-btn):focus-visible {
    outline: 2px solid var(--ru-ink, var(--admin-brand));
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   Shell layout
---------------------------------------------------------------------------- */
.admin-shell {
    min-height: 100dvh;
}

.admin-main {
    margin-left: var(--admin-sidebar-width);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    transition: margin-left .2s ease-out;
}

.admin-content {
    flex: 1 1 auto;
    padding: 1.25rem 1.5rem 2rem;
    max-width: 100%;
}

.admin-footer {
    padding: .75rem 1.5rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
    border-top: 1px solid var(--admin-sidebar-border);
    display: flex;
    justify-content: space-between;
}

html.sidebar-collapsed .admin-main {
    margin-left: var(--admin-sidebar-width-collapsed);
}

@media (max-width: 991.98px) {
    .admin-main,
    html.sidebar-collapsed .admin-main {
        margin-left: 0;
    }

    .admin-content {
        padding: 1rem .875rem 1.5rem;
    }
}

/* ----------------------------------------------------------------------------
   Sidebar
---------------------------------------------------------------------------- */
.admin-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--admin-sidebar-width);
    background: var(--admin-sidebar-custom-bg, var(--admin-sidebar-bg));
    border-right: none;
    box-shadow: 12px 0 32px -24px rgba(16, 24, 40, .18);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: width .2s ease-out, transform .2s ease-out;
}

[data-bs-theme="dark"] .admin-sidebar {
    box-shadow: 1px 0 0 var(--admin-sidebar-border);
}

.admin-sidebar-brand {
    height: var(--admin-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.125rem;
    flex-shrink: 0;
}

.admin-sidebar-brand a {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--admin-sidebar-brand-color, var(--admin-brand));
    text-decoration: none;
    white-space: nowrap;
}

.brand-logo {
    height: 1.75rem;
    width: auto;
    flex-shrink: 0;
}

.brand-logo-lg {
    height: 4.5rem;
    width: auto;
    max-width: 16rem;
    object-fit: contain;
}

.brand-logo {
    max-width: 8rem;
    object-fit: contain;
}

/* Site name with its small tagline underneath (Site Settings > Branding). */
.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-tagline {
    font-size: .5625rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .75;
    margin-top: .125rem;
}

.admin-topbar .brand-tagline {
    font-size: .5rem;
    margin-top: .0625rem;
}

.admin-sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .75rem .625rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-nav-label {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--admin-sidebar-muted, var(--bs-secondary-color));
    margin: 1.125rem .625rem .25rem;
}

/* Sections after the first get a hairline above their label, so the menu reads as a few clear blocks. */
.admin-nav-label ~ .admin-nav-label {
    padding-top: .875rem;
    border-top: 1px solid var(--admin-sidebar-border);
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .6rem .75rem;
    border-radius: var(--admin-radius);
    color: var(--admin-sidebar-fg, var(--admin-nav-color));
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    min-height: 44px;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease-out, color .15s ease-out;
}

.admin-nav-link i {
    width: 1.25rem;
    text-align: center;
    font-size: .875rem;
    flex-shrink: 0;
}

.admin-nav-link:hover {
    background: var(--admin-sidebar-hover, var(--admin-nav-hover-bg));
    color: var(--admin-sidebar-active-fg, var(--admin-brand));
}

.admin-nav-link.active {
    background: var(--admin-sidebar-active, var(--admin-brand-soft));
    color: var(--admin-sidebar-active-fg, var(--admin-brand));
}

.admin-sidebar-footer {
    padding: .375rem .375rem .5rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    gap: .25rem;
    border-top: 1px solid var(--admin-sidebar-border);
    background: var(--admin-sidebar-custom-bg, var(--admin-sidebar-bg));
}

/* Footer shortcuts as a tab bar: equal-width tabs, icon over a small label, muted at rest. */
.admin-footer-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .375rem .125rem;
    border: 0;
    border-radius: var(--admin-radius-sm, .5rem);
    background: transparent;
    color: var(--admin-sidebar-muted, var(--bs-secondary-color));
    text-decoration: none;
    line-height: 1;
}

.admin-footer-tab:hover {
    background: var(--admin-sidebar-hover, var(--admin-brand-soft));
    color: var(--admin-sidebar-active-fg, var(--admin-brand));
}

.admin-footer-tab.active {
    background: var(--admin-sidebar-active, var(--admin-brand-soft));
    color: var(--admin-sidebar-active-fg, var(--admin-brand));
}

.admin-footer-tab:focus-visible {
    outline: 2px solid var(--admin-brand);
    outline-offset: 1px;
}

.admin-footer-icon {
    position: relative;
    font-size: .9375rem;
}

.admin-footer-label {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .01em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Unread chats: a count pinned to the corner of the icon. */
.chat-nav-badge {
    position: absolute;
    top: -.5rem;
    right: -.8rem;
    font-size: .5625rem;
    line-height: 1;
    padding: .2em .4em;
}

/* Collapsed (icons-only) sidebar: too narrow for a row, so the tabs stack as icons. */
@media (min-width: 992px) {
    html.sidebar-collapsed .admin-sidebar-footer {
        flex-direction: column;
    }

    html.sidebar-collapsed .admin-footer-label {
        display: none;
    }

    html.sidebar-collapsed .admin-footer-tab {
        padding: .55rem 0;
    }

    html.sidebar-collapsed .admin-sidebar-minimize i {
        transform: rotate(180deg);
    }
}

/* Collapsible nav groups */
.admin-nav-group-toggle {
    position: relative;
}

.admin-nav-caret {
    margin-left: auto;
    font-size: .65rem !important;
    transition: transform .15s ease-out;
}

/* The group holding the current page reads in the brand colour... */
.admin-nav-group-toggle.is-active {
    color: var(--admin-sidebar-active-fg, var(--admin-brand));
}

/* ...and, when another group is expanded instead, is tinted like an active link so you can see where you are. */
.admin-nav-group:not(.open) .admin-nav-group-toggle.is-active {
    background: var(--admin-sidebar-active, var(--admin-brand-soft));
}

.admin-nav-group.open .admin-nav-caret {
    transform: rotate(90deg);
}

.admin-nav-group-items {
    display: none;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 .25rem 1.3rem;
    padding-left: .5rem;
    /* A guide line ties a group's links to its heading. */
    border-left: 1px solid var(--admin-sidebar-border);
}

.admin-nav-group.open .admin-nav-group-items {
    display: flex;
}

.admin-nav-group-items .admin-nav-link {
    position: relative;
    padding-left: .625rem;
    min-height: 38px;
    font-weight: 500;
}

/* The page you are on: a brand bar over the guide line. */
.admin-nav-group-items .admin-nav-link.active::before {
    content: "";
    position: absolute;
    left: calc(-.5rem - 1px);
    top: .45rem;
    bottom: .45rem;
    width: 3px;
    border-radius: 3px;
    background: var(--admin-sidebar-active-fg, var(--admin-brand));
}

.admin-nav-group-items .admin-nav-link i {
    font-size: .75rem;
}

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

/* Desktop collapsed state: icons only */
@media (min-width: 992px) {
    html.sidebar-collapsed .admin-sidebar {
        width: var(--admin-sidebar-width-collapsed);
    }

    html.sidebar-collapsed .admin-sidebar .admin-nav-link span,
    html.sidebar-collapsed .admin-sidebar .admin-nav-label,
    html.sidebar-collapsed .admin-sidebar-brand a span {
        display: none;
    }

    html.sidebar-collapsed .admin-sidebar .admin-nav-link {
        justify-content: center;
    }

    html.sidebar-collapsed .admin-sidebar .admin-nav-caret {
        display: none;
    }

    html.sidebar-collapsed .admin-nav-group-items {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

    html.sidebar-collapsed .admin-nav-group-items .admin-nav-link {
        padding-left: .625rem;
    }

    html.sidebar-collapsed .admin-nav-group-items .admin-nav-link.active::before {
        display: none;
    }

    html.sidebar-collapsed .admin-sidebar .admin-nav-label ~ .admin-nav-label {
        display: block;
        height: 0;
        margin: .5rem .5rem;
        padding: 0;
        font-size: 0;
    }
}

/* Mobile: sidebar slides over the content */
.admin-sidebar-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    .admin-sidebar {
        transform: translateX(-100%);
        box-shadow: none;
        width: min(85vw, var(--admin-sidebar-width));
    }

    html.sidebar-open .admin-sidebar {
        transform: translateX(0);
        box-shadow: 0 0 2rem rgba(0, 0, 0, .35);
    }

    html.sidebar-open .admin-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 1039;
    }

    html.sidebar-open {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-sidebar, .admin-main {
        transition: none;
    }
}

/* ----------------------------------------------------------------------------
   Topbar
---------------------------------------------------------------------------- */
.admin-topbar {
    height: var(--admin-topbar-height);
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: 0 1rem;
    background: color-mix(in srgb, var(--admin-topbar-bg, var(--admin-sidebar-bg)) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--admin-topbar-fg, inherit);
    border-bottom: none;
    box-shadow: 0 12px 32px -24px rgba(16, 24, 40, .25);
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Topbar controls inherit the bar's foreground so any navbar color stays readable.
   Buttons must be forced: bootstrap's .btn sets its own color, breaking inheritance. */
.admin-topbar .btn,
.admin-topbar .admin-topbar-brand {
    color: inherit;
}

.admin-topbar .text-600 {
    color: color-mix(in srgb, currentColor 75%, transparent) !important;
}

.admin-topbar .btn-icon {
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-color: color-mix(in srgb, currentColor 18%, transparent);
}

/* Compact controls to match the bar's reduced height. Every .btn-icon in this header IS a bar
   control - the sidebar toggle, theme toggle, bell and messages buttons. The dropdown panels they
   open use .btn-link / .btn-phoenix-secondary instead, so they are unaffected and keep normal
   reading sizes; scoping this to direct children only would miss the theme toggle, which sits in
   the bar's ms-auto wrapper rather than directly on the header.
   min-width/min-height rather than width, because that is what .btn-icon sets. */
.admin-topbar .btn-icon {
    min-width: 1.75rem;
    min-height: 1.75rem;
    font-size: .8125rem;
}

/* Account button: avatar chip, display name and chevron. .fs--1 is !important, so this must be too. */
.admin-topbar .dropdown > .btn .avatar-initials {
    width: 1.75rem;
    height: 1.75rem;
    font-size: .625rem;
}

.admin-topbar .dropdown > .btn .fs--1 {
    font-size: .75rem !important;
}

.admin-topbar .dropdown > .btn .fs--2 {
    font-size: .625rem !important;
}

.admin-topbar .brand-logo {
    height: 1.375rem;
}

[data-bs-theme="dark"] .admin-topbar {
    box-shadow: 0 1px 0 var(--admin-sidebar-border);
}

.admin-topbar-brand {
    font-weight: 800;
    color: var(--admin-brand);
    text-decoration: none;
    font-size: .8125rem;
}

/* Theme toggle shows the icon of the theme you'd switch TO */
[data-bs-theme="light"] .theme-icon-light { display: none; }
[data-bs-theme="dark"] .theme-icon-dark { display: none; }

/* ----------------------------------------------------------------------------
   Reconnection toast (blazor.web.js toggles the components-reconnect-* classes)
---------------------------------------------------------------------------- */
#components-reconnect-modal {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10050;
    display: none;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    border-radius: 2rem;
    background: rgba(15, 23, 42, .92);
    color: #fff;
    font-size: .875rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

/* ----------------------------------------------------------------------------
   Phoenix compatibility utilities (small shim so existing pages keep working)
---------------------------------------------------------------------------- */
.fs-0 { font-size: 1rem !important; }
.fs--1 { font-size: .8rem !important; }
.fs--2 { font-size: .694rem !important; }

.text-brand { color: var(--admin-brand) !important; }
.bg-brand { background-color: var(--admin-brand) !important; }

.text-600 { color: var(--bs-secondary-color) !important; }
.text-900, .text-black { color: var(--bs-body-color) !important; }

.bg-soft { background-color: var(--bs-tertiary-bg) !important; }

.flex-between-end {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.ms-7 { margin-left: 3.5rem !important; }
.me-7 { margin-right: 3.5rem !important; }
.py-6 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* Bootstrap primary follows the brand (Blazorise Color.Primary buttons, etc.) */
.btn-primary {
    --bs-btn-bg: var(--admin-btn-bg);
    --bs-btn-border-color: var(--admin-btn-bg);
    --bs-btn-hover-bg: var(--admin-btn-hover);
    --bs-btn-hover-border-color: var(--admin-btn-hover);
    --bs-btn-active-bg: var(--admin-btn-hover);
    --bs-btn-active-border-color: var(--admin-btn-hover);
    --bs-btn-disabled-bg: var(--admin-btn-bg);
    --bs-btn-disabled-border-color: var(--admin-btn-bg);
}

.badge-accent {
    background-color: var(--admin-accent) !important;
    color: #fff;
}

/* Every button takes the theme's primary colour (Site Settings), in three weights, so a page reads as one brand:
   - primary: solid (above) - the main action;
   - outline: brand text and border, tinted on hover - secondary actions (grey/outline buttons, Blazorise
     Color.Secondary Outline, btn-phoenix-secondary);
   - tonal: a soft brand tint with brand text, solid on hover (solid Color.Secondary, btn-phoenix-primary);
   - ghost: brand text only, tinted on hover - Cancel (Color.Light) and link buttons.
   Danger and success keep red and green: there the colour carries meaning. Flat colours only. */
.btn-phoenix-secondary,
.btn-outline-secondary,
.btn-outline-primary {
    --bs-btn-color: var(--admin-brand);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: color-mix(in srgb, var(--admin-brand) 45%, transparent);
    --bs-btn-hover-color: var(--admin-brand);
    --bs-btn-hover-bg: var(--admin-brand-soft);
    --bs-btn-hover-border-color: var(--admin-brand);
    --bs-btn-active-color: var(--admin-brand);
    --bs-btn-active-bg: var(--admin-brand-soft);
    --bs-btn-active-border-color: var(--admin-brand);
    --bs-btn-disabled-color: var(--admin-brand);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--admin-brand) 30%, transparent);
    border: var(--bs-btn-border-width, 1px) solid var(--bs-btn-border-color);
}

.btn-secondary,
.btn-phoenix-primary {
    --bs-btn-color: var(--admin-brand);
    --bs-btn-bg: var(--admin-brand-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--admin-btn-bg);
    --bs-btn-hover-border-color: var(--admin-btn-bg);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--admin-btn-hover);
    --bs-btn-active-border-color: var(--admin-btn-hover);
    --bs-btn-disabled-color: var(--admin-brand);
    --bs-btn-disabled-bg: var(--admin-brand-soft);
    --bs-btn-disabled-border-color: transparent;
}

.btn-light,
.btn-link {
    --bs-btn-color: var(--admin-brand);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--admin-btn-hover);
    --bs-btn-hover-bg: var(--admin-brand-soft);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--admin-btn-hover);
    --bs-btn-active-bg: var(--admin-brand-soft);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--admin-brand);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

/* Inline text links styled as buttons (p-0) stay plain links: no tint box around the words. */
.btn-link.p-0,
.btn-link.px-0 {
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-bg: transparent;
}

/* Keyboard focus ring in the brand colour for every button. */
.btn:focus-visible {
    outline: 2px solid var(--admin-brand);
    outline-offset: 2px;
    box-shadow: none;
}

.badge-phoenix {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 2rem;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid transparent;
    line-height: 1.5;
}

.badge-phoenix-success { color: #1c6c09; background: #d9fbd0; border-color: #bee8b4; }
.badge-phoenix-secondary { color: #31374a; background: #e3e6ed; border-color: #cbd0dd; }
.badge-phoenix-warning { color: #9d5228; background: #ffefca; border-color: #ffcc85; }
.badge-phoenix-info { color: #005585; background: #c7ebff; border-color: #96d9ff; }
.badge-phoenix-primary { color: #003a75; background: #d6e8ff; border-color: #9fc8ff; }

[data-bs-theme="dark"] .badge-phoenix-success { color: #90d67f; background: #142f0d; border-color: #1c6c09; }
[data-bs-theme="dark"] .badge-phoenix-secondary { color: #cbd0dd; background: #222834; border-color: #3e465b; }
[data-bs-theme="dark"] .badge-phoenix-warning { color: #ffcc85; background: #33200b; border-color: #9d5228; }
[data-bs-theme="dark"] .badge-phoenix-info { color: #96d9ff; background: #002b44; border-color: #005585; }
[data-bs-theme="dark"] .badge-phoenix-primary { color: #9fc8ff; background: #001f3d; border-color: #003a75; }

/* ----------------------------------------------------------------------------
   Components
---------------------------------------------------------------------------- */
.card {
    border-radius: var(--admin-radius-lg);
    border: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -28px rgba(16, 24, 40, .18);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    padding: .875rem 1.25rem;
    font-weight: 700;
}

.btn {
    border-radius: var(--admin-radius-sm);
}

.btn.rounded-pill {
    border-radius: 50rem;
}

.form-control, .form-select {
    border-radius: var(--admin-radius-sm);
}

.offcanvas {
    border: none;
}

.dropdown-menu {
    border-radius: var(--admin-radius);
    border: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    box-shadow: 0 16px 40px -20px rgba(16, 24, 40, .3);
    overflow: hidden;
}

.card-header h6 {
    font-weight: 700;
}

/* Data tables: quieter header, comfortable rows */
.table thead th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color);
    font-weight: 700;
    border-bottom-width: 1px;
}

.table > :not(caption) > * > * {
    padding: .625rem .75rem;
}

.breadcrumb {
    font-size: .8rem;
}

.modal-content {
    border-radius: var(--admin-radius-lg);
    border: none;
    box-shadow: 0 24px 64px -24px rgba(16, 24, 40, .35);
}

.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    font-weight: 700;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    background: transparent;
    gap: .5rem;
}

/* Forms: clear labels, brand focus ring, comfortable inputs */
.form-label {
    font-weight: 600;
    font-size: .8rem;
    margin-bottom: .35rem;
}

.form-control, .form-select {
    padding: .5rem .75rem;
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--admin-brand);
    box-shadow: 0 0 0 .2rem var(--admin-brand-soft);
}

.form-check-input:checked {
    background-color: var(--admin-btn-bg);
    border-color: var(--admin-btn-bg);
}

.field-help, .form-text {
    font-size: .75rem;
}

.btn-icon {
    padding: 0;
    border-radius: 2rem;
    min-width: 2.35rem;
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
}

.btn-icon:hover {
    background: var(--bs-secondary-bg);
}

.btn-icon-sm {
    min-width: 1.75rem;
    min-height: 1.75rem;
}

.avatar-initials {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--admin-btn-bg);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    flex-shrink: 0;
}

.avatar-initials-lg {
    width: 4rem;
    height: 4rem;
    font-size: 1.4rem;
}

.avatar-initials-md {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1rem;
}

.avatar-initials img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-upload {
    position: relative;
    display: inline-block;
}

.avatar-upload-btn {
    position: absolute;
    right: -.25rem;
    bottom: -.25rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--bs-body-bg);
    border: 1px solid var(--admin-sidebar-border);
    color: var(--admin-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .15);
}

.avatar-upload-btn:hover {
    background: var(--admin-nav-hover-bg);
}

.notification-dropdown {
    width: min(22rem, calc(100vw - 2rem));
}

/* Scrollable body so a long list stays inside the dropdown instead of running off-screen. */
.notification-list {
    max-height: min(24rem, 60vh);
    overflow-y: auto;
}

/* Let items wrap (dropdown-item forces nowrap by default) and reserve room for the unread bar. */
.notification-item {
    white-space: normal;
    border-left: 3px solid transparent;
}

/* Unread rows get a subtle tint + accent bar so they read as "new" without relying on bold alone. */
.notification-item-unread {
    background-color: var(--bs-tertiary-bg);
    border-left-color: var(--admin-btn-bg);
}

/* Clamp the message to three lines rather than a hard one-line truncate, so it stays readable. */
.notification-item-message {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Small accent dot marking an unread row. */
.notification-dot {
    width: .5rem;
    height: .5rem;
    margin-top: .35rem;
    border-radius: 50%;
    background-color: var(--admin-btn-bg);
}

.notification-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

/* ---------- Notification icon chip (shared by the bell dropdown and the page) ----------
   Category-tinted, flat fill (no gradients per the design system). */
.notification-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--admin-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
}

.notification-icon[data-category="RoleAssigned"] {
    background: rgba(25, 135, 84, .14);
    color: #198754;
}

.notification-icon[data-category="RoleExpiring"] {
    background: rgba(255, 159, 10, .16);
    color: #b26a00;
}

[data-bs-theme="dark"] .notification-icon[data-category="RoleExpiring"] {
    color: #f0a935;
}

/* The bell dropdown row uses the smaller chip. */
.notification-item .notification-icon {
    width: 2rem;
    height: 2rem;
    font-size: .8rem;
}

/* ---------- Full-page notifications feed (the /notifications route) ---------- */
.notification-group-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    margin: 0 .25rem .5rem;
}

.notification-feed {
    overflow: hidden;
}

.notification-feed-item {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background-color .12s ease-out, border-left-color .12s ease-out;
}

.notification-feed-item:last-child {
    border-bottom: 0;
}

.notification-feed-item:hover,
.notification-feed-item:focus-visible {
    background-color: var(--bs-tertiary-bg);
    outline: none;
}

.notification-feed-item-unread {
    background-color: var(--admin-brand-soft);
    border-left-color: var(--admin-brand);
}

.notification-feed-title {
    font-size: .925rem;
}

.notification-feed-time {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.notification-feed-cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--admin-brand);
}

.notification-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: 1.35rem;
}

/* Deep-link highlight: when the bell routes to ?focus=<id>, the target row briefly pulses so the
   eye lands on it. Added/removed by adminNotifications.focus in ui.js. */
.notification-feed-item.notification-focus {
    animation: notification-pulse 2s ease-out;
}

@keyframes notification-pulse {
    0%   { background-color: var(--admin-brand-soft); box-shadow: inset 3px 0 0 var(--admin-brand); }
    15%  { background-color: var(--admin-brand); }
    100% { background-color: transparent; box-shadow: inset 3px 0 0 transparent; }
}

/* The pulse briefly turns the row brand-colored; keep its text legible while it does. */
.notification-feed-item.notification-focus,
.notification-feed-item.notification-focus .notification-feed-title,
.notification-feed-item.notification-focus .text-600 {
    animation-name: notification-pulse, notification-pulse-text;
}

@keyframes notification-pulse-text {
    0%, 100% { color: inherit; }
    15%      { color: #fff; }
}

.dashboard-tile {
    transition: transform .15s ease-out, box-shadow .15s ease-out;
}

.dashboard-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
}

.dashboard-tile-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--admin-radius);
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-tile { transition: none; }
    .dashboard-tile:hover { transform: none; }
}

/* Login hero */
.auth-hero {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-content-bg);
    padding: 3rem 1.5rem;
}

.auth-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    max-width: 72rem;
    width: 100%;
    align-items: center;
}

.auth-hero-intro h1 {
    font-size: 2.5rem;
    font-weight: 800;
}

.auth-hero-tagline {
    font-size: 1.2rem;
    max-width: 34rem;
}

.auth-hero-visual {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.auth-hero-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 16rem;
    object-fit: cover;
    border-radius: var(--admin-radius-lg);
    border: 1px solid var(--admin-sidebar-border);
    background: var(--admin-sidebar-bg);
}

.auth-hero-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--admin-radius-lg);
    border: 1px solid var(--admin-sidebar-border);
    overflow: hidden;
}

.auth-hero-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.auth-feature-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--admin-sidebar-bg);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius-lg);
    padding: 1.25rem;
}

.auth-feature-card .dashboard-tile-icon {
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .auth-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .auth-hero-intro h1 {
        font-size: 1.75rem;
    }

    .auth-hero-tagline {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .auth-feature-card {
        text-align: left;
    }
}

/* ----------------------------------------------------------------------------
   Data lists: table on desktop, cards on mobile
---------------------------------------------------------------------------- */
.mobile-cards {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.mobile-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--admin-radius);
    padding: .875rem 1rem;
}

.mobile-card-title {
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: .125rem;
    overflow-wrap: anywhere;
}

.mobile-card-line {
    font-size: .8rem;
    color: var(--bs-secondary-color);
    overflow-wrap: anywhere;
}

.mobile-card-actions {
    display: flex;
    gap: .5rem;
    margin-top: .625rem;
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .offcanvas.offcanvas-end {
        width: 100vw;
    }

    .flex-between-end {
        row-gap: .5rem;
        flex-wrap: wrap;
    }
}

.mobile-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .625rem .25rem;
}

.mobile-pager-info {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.mobile-pager-controls {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.mobile-pager-page {
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Role-permissions modal: collapsible permission groups */
.perm-group {
    border: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 70%, transparent);
    border-radius: var(--admin-radius);
    margin-bottom: .625rem;
    overflow: hidden;
}

.perm-group-header {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .75rem 1rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: var(--bs-body-color);
    min-height: 44px;
}

.perm-group-header:hover {
    background: var(--admin-nav-hover-bg);
}

.perm-caret {
    font-size: .65rem;
    color: var(--bs-secondary-color);
    transition: transform .15s ease-out;
    flex-shrink: 0;
}

.perm-caret.open {
    transform: rotate(90deg);
}

.perm-group-body {
    padding: .25rem 1rem .75rem;
    border-top: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 70%, transparent);
}

.perm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .55rem 0;
    min-height: 44px;
}

.perm-row + .perm-row {
    border-top: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 45%, transparent);
}

.perm-row .form-check-input {
    cursor: pointer;
    width: 2.25rem;
    height: 1.25rem;
}

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

/* ----------------------------------------------------------------------------
   Top progress bar (page-navigation feedback)
---------------------------------------------------------------------------- */
#top-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease-out;
}

#top-progress-bar.active {
    opacity: 1;
}

.top-progress-bar-fill {
    height: 100%;
    width: 0;
    background: var(--admin-brand);
    box-shadow: 0 0 8px 0 var(--admin-brand);
    transform-origin: left;
}

.top-progress-bar-fill.animate {
    animation: top-progress-grow 4s cubic-bezier(.1, .6, .2, 1) forwards;
}

#top-progress-bar.done .top-progress-bar-fill {
    animation: none;
    width: 100%;
    transition: width .2s ease-out;
}

@keyframes top-progress-grow {
    0% { width: 0; }
    20% { width: 35%; }
    50% { width: 60%; }
    80% { width: 78%; }
    100% { width: 88%; }
}

.top-progress-spinner {
    position: fixed;
    top: .55rem;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    border-width: .15em;
    color: var(--admin-brand);
    z-index: 2001;
}

#top-progress-bar.done .top-progress-spinner {
    opacity: 0;
    transition: opacity .15s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .top-progress-bar-fill.animate {
        animation: none;
        width: 88%;
        transition: width .3s ease-out;
    }
}

/* Audit log field-level diff */
.audit-changes {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: .625rem .75rem;
    background: var(--bs-tertiary-bg);
    border-radius: var(--admin-radius-sm);
}

.audit-change-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
}

.audit-change-field {
    font-weight: 700;
    min-width: 7rem;
}

.audit-change-old {
    color: var(--bs-danger);
    text-decoration: line-through;
    overflow-wrap: anywhere;
}

.audit-change-new {
    color: var(--bs-success);
    overflow-wrap: anywhere;
}

.audit-change-arrow {
    font-size: .65rem;
    color: var(--bs-secondary-color);
}

.badge-phoenix-danger {
    color: #b3261e;
    background: #ffdad4;
    border-color: #ffb4a9;
}

[data-bs-theme="dark"] .badge-phoenix-danger {
    color: #ffb4a9;
    background: #410e0b;
    border-color: #b3261e;
}

/* Settings page tabs */
.settings-tabs .nav-tabs {
    border-bottom: 1px solid var(--admin-sidebar-border);
    gap: .25rem;
    flex-wrap: wrap;
}

.settings-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--bs-secondary-color);
    font-weight: 600;
    font-size: .875rem;
    padding: .625rem .25rem;
    margin-right: 1.25rem;
}

.settings-tabs .nav-link:hover {
    color: var(--admin-brand);
}

.settings-tabs .nav-link.active {
    color: var(--admin-brand);
    background: transparent;
    border-bottom-color: var(--admin-brand);
}

/* Settings page color swatches */
.color-swatch {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
}

.color-swatch.selected {
    border-color: var(--bs-body-color);
}

.form-control-color {
    width: 2.25rem;
    height: 2.25rem;
    padding: .15rem;
    border-radius: 50%;
    cursor: pointer;
}

/* Blazorise tweaks */
.form-label {
    padding-left: 0 !important;
}

.spinner-border-sm {
    width: .9rem;
    height: .9rem;
    border-width: .15em;
}

/* ============================================================================
   Chat
   ========================================================================== */
.chat-page {
    display: flex;
    height: calc(100dvh - var(--admin-topbar-height) - 2rem);
    min-height: 30rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius-lg);
    overflow: hidden;
}

.chat-sidebar {
    width: 22rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--admin-sidebar-border);
}

.chat-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem .5rem;
}

.chat-new-btn {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--admin-btn-bg);
    color: #fff;
    font-size: .85rem;
}

.chat-new-btn:hover,
.chat-new-btn:focus {
    background: var(--admin-btn-hover);
    color: #fff;
}

.chat-search {
    position: relative;
    padding: .25rem 1rem .75rem;
}

.chat-search i {
    position: absolute;
    left: 1.95rem;
    top: 1.45rem;
    transform: translateY(-50%);
    font-size: .8rem;
    color: var(--bs-secondary-color, #6b7280);
    pointer-events: none;
}

.chat-search .form-control {
    border-radius: 999px;
    padding-left: 2.5rem;
    background: var(--admin-content-bg);
    border-color: transparent;
}

.chat-search .form-control:focus {
    background: var(--bs-body-bg);
    border-color: var(--admin-brand);
    box-shadow: none;
}

.chat-conversation-list {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    overflow-y: auto;
    min-height: 0;
    padding: 0 .5rem .5rem;
}

.chat-conversation-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .75rem;
    min-height: 2.75rem;
    border: none;
    border-radius: var(--admin-radius);
    background: transparent;
    text-align: left;
    width: 100%;
    cursor: pointer;
}

.chat-conversation-item:hover {
    background: var(--admin-nav-hover-bg);
}

.chat-conversation-item.active {
    background: var(--admin-brand-soft);
}

.chat-conversation-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.chat-conversation-top,
.chat-conversation-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.chat-conversation-name {
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-conversation-time {
    font-size: .7rem;
    color: var(--bs-secondary-color, #6b7280);
    flex-shrink: 0;
}

.chat-conversation-preview {
    font-size: .78rem;
    color: var(--bs-secondary-color, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-unread-badge {
    background: var(--admin-accent);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    padding: .25rem .45rem;
    min-width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.chat-avatar {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    overflow: hidden;
}

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

.chat-avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: .7rem;
}

.chat-avatar-lg {
    width: 5rem;
    height: 5rem;
    font-size: 1.6rem;
}

/* Wrapper lets the group badge sit at the avatar's corner without being clipped by the
   avatar's own overflow:hidden. */
.chat-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.chat-avatar-group-badge {
    position: absolute;
    right: -.15rem;
    bottom: -.15rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--admin-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .55rem;
    border: 2px solid var(--admin-sidebar-bg, #fff);
}

/* Segmented control for choosing Direct vs Group in the New Chat modal. */
.chat-mode-toggle {
    display: flex;
    gap: .35rem;
    padding: .3rem;
    background: var(--admin-content-bg);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    margin-bottom: 1rem;
}

.chat-mode-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem .75rem;
    border: none;
    background: transparent;
    color: var(--bs-secondary-color, #6b7280);
    border-radius: calc(var(--admin-radius) - .2rem);
    font-weight: 600;
    font-size: .85rem;
    transition: background .15s ease, color .15s ease;
}

.chat-mode-option:hover:not(.active) {
    color: var(--bs-body-color);
    background: var(--admin-brand-soft);
}

.chat-mode-option.active {
    background: var(--admin-brand);
    color: #fff;
}

.chat-message-avatar {
    align-self: flex-end;
    margin-bottom: .15rem;
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.chat-main-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--admin-sidebar-border);
    background: var(--bs-body-bg, #fff);
}

.chat-main-identity {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .25rem;
    margin: -.25rem;
    border: none;
    background: transparent;
    border-radius: var(--admin-radius);
    text-align: left;
    cursor: pointer;
}

.chat-main-identity:hover,
.chat-main-identity:focus-visible {
    background: var(--admin-content-bg);
}

.chat-main-title {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    background: var(--admin-content-bg);
    min-height: 0;
}

.chat-day-divider {
    display: flex;
    justify-content: center;
    margin: .75rem 0 .5rem;
}

.chat-day-divider span {
    font-size: .7rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6b7280);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: 999px;
    padding: .2rem .75rem;
}

.chat-message-row {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    justify-content: flex-start;
}

.chat-message-row.mine {
    justify-content: flex-end;
}

.chat-bubble {
    max-width: min(30rem, 78%);
    padding: .55rem .8rem;
    border-radius: 1rem;
    border-bottom-left-radius: .35rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
}

.chat-message-row.mine .chat-bubble {
    background: var(--admin-btn-bg);
    border-color: var(--admin-btn-bg);
    color: #fff;
    border-radius: 1rem;
    border-bottom-right-radius: .35rem;
}

.chat-bubble-sender {
    font-size: .72rem;
    font-weight: 700;
    color: var(--admin-brand);
    margin-bottom: .15rem;
}

.chat-bubble-text {
    font-size: .875rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-bubble-time {
    font-size: .65rem;
    color: var(--bs-secondary-color, #6b7280);
    margin-top: .2rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
}

.chat-message-row.mine .chat-bubble-time {
    color: rgba(255, 255, 255, .75);
}

/* Delivery/read ticks on the sender's own messages. */
.chat-bubble-status {
    display: inline-flex;
    align-items: center;
    font-size: .62rem;
    line-height: 1;
}

.chat-bubble-status.read {
    color: #34b7f1;
}

/* Live "typing…" bubble with three pulsing dots. */
.chat-typing-bubble {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .7rem .9rem;
}

.chat-typing-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--bs-secondary-color, #9ca3af);
    animation: chat-typing-bounce 1.2s infinite ease-in-out;
}

.chat-typing-dot:nth-child(2) {
    animation-delay: .18s;
}

.chat-typing-dot:nth-child(3) {
    animation-delay: .36s;
}

@keyframes chat-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-.28rem); opacity: 1; }
}

.chat-header-typing {
    font-style: italic;
}

/* Presence indicator in the conversation header. */
.chat-header-presence {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.chat-presence-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--bs-secondary-color, #9ca3af);
    flex-shrink: 0;
}

.chat-presence-dot.online {
    background: #34c759;
}

/* In-app new-message popup, mounted in the layout so it appears on any page. */
.chat-toast {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1080;
    width: 22rem;
    max-width: calc(100vw - 2.5rem);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
    padding: .85rem;
    animation: chat-toast-in .2s ease-out;
}

@keyframes chat-toast-in {
    from { transform: translateY(1rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* A finished call's record in the thread. Centred and quiet: it is something that happened, not
   something anyone said. */
.chat-call-entry {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: .25rem auto;
    padding: .3rem .75rem;
    border-radius: 2rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .75rem;
}

.chat-call-entry-time { opacity: .75; }

/* A withdrawn message: present, but visibly not speech any more. */
.chat-bubble-deleted {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-style: italic;
    opacity: .7;
}

.chat-bubble-deleted i { font-size: .8em; }

/* The per-message menu. Hidden until the row is hovered or the menu itself is open, so a thread
   at rest is not a wall of icons - but kept in the DOM so keyboard users can still reach it. */
.chat-message-actions {
    position: relative;
    align-self: center;
    flex-shrink: 0;
}

.chat-message-menu-toggle {
    opacity: 0;
    transition: opacity .12s ease-in-out;
    background: none;
    border: 0;
    color: var(--bs-body-color);
    padding: .25rem .4rem;
    cursor: pointer;
}

.chat-message-row:hover .chat-message-menu-toggle,
.chat-message-menu-toggle:focus-visible { opacity: .65; }

.chat-message-menu-toggle:hover { opacity: 1; }

.chat-message-menu {
    position: absolute;
    top: 100%;
    z-index: 20;
    min-width: 11rem;
    padding: .25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-body-bg);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

/* Opens inward: on the sender's own messages the bubble sits hard right, so a menu anchored left
   would hang off the edge of the thread. */
.chat-message-menu { left: 0; }
.chat-message-row.mine .chat-message-menu { left: auto; right: 0; }

.chat-message-menu button {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .45rem .6rem;
    border: 0;
    border-radius: .35rem;
    background: none;
    color: var(--bs-body-color);
    font-size: .875rem;
    text-align: left;
    cursor: pointer;
}

.chat-message-menu button:hover { background: var(--admin-brand-soft); }

.chat-message-menu button i { width: 1rem; text-align: center; opacity: .75; }

.chat-message-menu-danger { color: var(--bs-danger) !important; }

/* A meeting entry is the same shape as a call record but clickable, and carries its date. */
.chat-meeting-entry {
    border: 1px solid color-mix(in srgb, var(--admin-brand) 35%, transparent);
    background: var(--admin-brand-soft);
    color: var(--bs-body-color);
}

.chat-meeting-entry:hover { background: color-mix(in srgb, var(--admin-brand) 22%, transparent); }

.chat-meeting-when { font-weight: 600; }

/* ----------------------------------------------------------------------------
   Presence status (Teams-style availability)
---------------------------------------------------------------------------- */
.presence-dot {
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    background: var(--bs-secondary-color);
}

/* Shape as well as colour: red and green are the two most commonly confused, and status must not
   depend on telling them apart. Busy is a solid ring, do-not-disturb carries a bar. */
.presence-available { background: #198754; }
.presence-busy { background: #dc3545; }
.presence-donotdisturb {
    background: #dc3545;
    position: relative;
}

.presence-donotdisturb::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: .34rem;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

.presence-berightback,
.presence-appearaway { background: #ffc107; }

.presence-inameeting { background: #6f42c1; }

.presence-appearoffline {
    background: transparent;
    border: 2px solid var(--bs-secondary-color);
}

/* Status badge sitting on an avatar. */
.presence-badge {
    position: absolute;
    right: -1px;
    bottom: -1px;
    box-shadow: 0 0 0 2px var(--bs-body-bg);
}

/* ----------------------------------------------------------------------------
   Account menu (topbar avatar dropdown)
   Two panes - account, and the availability picker behind it - so the resting
   height stays at four rows instead of eleven. On phones it docks to the bottom
   of the viewport as a sheet, where a top-anchored menu would overflow.
---------------------------------------------------------------------------- */
.account-menu {
    width: 16.5rem;
}

.account-menu-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
}

/* One row shape for every entry (status, profile, sign out, each status choice) so the two
   panes read as the same menu. Buttons and links both, hence the reset. */
.account-menu-row {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .625rem 1rem;
    border: 0;
    background: transparent;
    color: var(--bs-body-color);
    text-decoration: none;
    text-align: left;
}

.account-menu-row:hover,
.account-menu-row:focus-visible {
    background: var(--admin-nav-hover-bg, var(--bs-tertiary-bg));
    color: var(--bs-body-color);
}

.account-menu-row-selected {
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-weight: 600;
}

.account-menu-row-danger {
    border-top: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    color: var(--bs-danger);
}

.account-menu-row-danger:hover,
.account-menu-row-danger:focus-visible {
    background: rgba(220, 53, 69, .1);
    color: var(--bs-danger);
}

/* Fixed gutter so the icons line up with the presence dot on the status row. */
.account-menu-icon {
    width: .625rem;
    text-align: center;
    font-size: .8rem;
    flex-shrink: 0;
}

.account-menu-subhead {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
}

/* Still scrolls if the viewport is genuinely tiny (landscape phone). */
.account-status-list {
    max-height: min(20rem, 55vh);
    overflow-y: auto;
    padding: .25rem 0;
}

@media (max-width: 575.98px) {
    /* Stays anchored under the avatar (absolute, not fixed): .admin-topbar carries a
       backdrop-filter, which makes it the containing block for fixed descendants, so a
       bottom-docked sheet would anchor to the 3rem bar and grow off the top of the screen.
       Instead it widens to nearly the viewport and scrolls within the space below the bar. */
    .account-menu.dropdown-menu {
        width: min(20rem, calc(100vw - 1.5rem));
        max-height: calc(100dvh - var(--admin-topbar-height) - 1.5rem);
        overflow-y: auto;
    }

    /* Bigger touch targets on a phone. */
    .account-menu .account-menu-row {
        padding: .875rem 1.125rem;
    }

    /* The pane itself already scrolls; let the list run its natural length inside it. */
    .account-status-list {
        max-height: none;
        overflow-y: visible;
    }
}

/* ----------------------------------------------------------------------------
   Calendar (month view)
---------------------------------------------------------------------------- */
.cal-month-label {
    font-weight: 700;
    font-size: .95rem;
    min-width: 9rem;
    text-align: center;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--bs-border-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--admin-radius);
    overflow: hidden;
}

.cal-heading {
    background: var(--bs-tertiary-bg);
    padding: .375rem .5rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    text-align: center;
}

/* Whole day is a button so clicking empty space schedules something there. */
.cal-day {
    background: var(--bs-body-bg);
    border: none;
    text-align: left;
    padding: .25rem;
    min-height: 6.25rem;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    align-items: stretch;
}

.cal-day:hover { background: var(--bs-tertiary-bg); }

.cal-day.outside { opacity: .45; }

.cal-day.today .cal-day-number {
    background: var(--admin-brand);
    color: #fff;
}

.cal-day-number {
    align-self: flex-start;
    font-size: .7rem;
    font-weight: 700;
    min-width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--bs-secondary-color);
}

.cal-event {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .3rem;
    border-radius: .25rem;
    background: var(--admin-brand-soft);
    color: var(--bs-body-color);
    font-size: .7rem;
    min-width: 0;
    /* Full width of the cell: without this a flex item sizes to its content and the title is the
       first thing to be clipped away. */
    width: 100%;
}

.cal-event:hover { background: color-mix(in srgb, var(--admin-brand) 25%, transparent); }

/* In a month cell the time is the part that gives way: "09:00" with the title truncated to three
   characters tells you nothing, whereas the title alone still identifies the meeting. */
.cal-event-time { font-weight: 700; flex-shrink: 1; min-width: 0; overflow: hidden; }
.cal-event-title { min-width: 0; flex: 1; }

@media (max-width: 1199.98px) {
    /* Narrow month cells: drop the time entirely rather than starve the title. */
    .cal-event-time { display: none; }
}

.cal-event.cancelled {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    text-decoration: line-through;
}

/* A meeting you can join right now: flat brand fill, no gradient. */
.cal-event.live {
    background: var(--admin-brand);
    color: #fff;
}

.cal-more {
    font-size: .65rem;
    color: var(--bs-secondary-color);
    padding-left: .3rem;
}

/* ---- Week / day time grid --------------------------------------------------
   The day runs down the page at 48px per hour. Blocks are absolutely positioned from their start
   time and duration, so what you see is when things actually are - the JS-free equivalent of the
   Outlook/Teams layout. The hour rows are a repeating background, which keeps the lines and the
   blocks measured from exactly the same origin. */
.cal-week {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--admin-radius);
    overflow: hidden;
}

.cal-week-head {
    display: grid;
    grid-template-columns: 3.5rem repeat(7, 1fr);
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.cal-week-dayhead {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .375rem .25rem;
    border-left: 1px solid var(--bs-border-color);
}

.cal-week-dayname {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
}

.cal-week-daynum { font-size: .95rem; font-weight: 700; }

.cal-week-dayhead.today .cal-week-daynum {
    background: var(--admin-brand);
    color: #fff;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cal-week-body {
    display: grid;
    grid-template-columns: 3.5rem repeat(7, 1fr);
    /* Fixed viewport onto a 24-hour day: the whole day exists, you scroll to the part you want. */
    max-height: 60vh;
    overflow-y: auto;
}

.cal-day-body { grid-template-columns: 3.5rem 1fr; }

.cal-week-gutter { position: relative; }

.cal-hour-label {
    position: absolute;
    right: .375rem;
    transform: translateY(-.4rem);
    font-size: .65rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.cal-week-col {
    position: relative;
    border-left: 1px solid var(--bs-border-color);
    /* One line per hour, drawn from the same 48px origin as the blocks. */
    background-image: repeating-linear-gradient(
        to bottom,
        var(--bs-border-color) 0,
        var(--bs-border-color) 1px,
        transparent 1px,
        transparent 48px);
}

.cal-hour-slot {
    position: absolute;
    left: 0;
    right: 0;
    border: none;
    background: none;
    padding: 0;
}

.cal-hour-slot:hover { background: var(--bs-tertiary-bg); }

.cal-block {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: .05rem;
    overflow: hidden;
    padding: .15rem .3rem;
    border: none;
    border-left: 3px solid var(--admin-brand);
    border-radius: .25rem;
    background: var(--admin-brand-soft);
    color: var(--bs-body-color);
    text-align: left;
    /* Hairline gap so touching blocks in adjacent columns stay distinguishable. */
    margin-right: 1px;
}

.cal-block:hover { background: color-mix(in srgb, var(--admin-brand) 25%, transparent); }

/* The title is the point of the block, so it gets the space and the time yields. Without min-width:0
   a flex child refuses to shrink below its content, and the title gets pushed out of the clipped
   box entirely - present in the DOM, invisible on screen, readable only from the tooltip. */
.cal-block-title {
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.2;
    min-width: 0;
}

.cal-block-time {
    font-size: .62rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
    min-width: 0;
}

/* Too short to stack two lines, so they go side by side instead - both facts still fit on one row,
   which is better than dropping either. */
.cal-block.compact {
    flex-direction: row;
    align-items: baseline;
    gap: .3rem;
    padding: .05rem .3rem;
}

.cal-block.compact .cal-block-title { font-size: .68rem; }

.cal-block.compact .cal-block-time {
    /* The start alone on one line; the end is implied by where the block stops. */
    font-size: .6rem;
    flex-shrink: 0;
    order: -1;
}

.cal-block.live {
    background: var(--admin-brand);
    border-left-color: var(--admin-brand);
    color: #fff;
}

.cal-block.live .cal-block-time { color: rgba(255, 255, 255, .85); }

.cal-block.cancelled {
    background: var(--bs-tertiary-bg);
    border-left-color: var(--bs-secondary-color);
}

.cal-block.cancelled .cal-block-title {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
}

/* Where we are in the day. Red is the one convention every calendar shares. */
.cal-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #dc3545;
    z-index: 2;
    pointer-events: none;
}

.cal-now-line::before {
    content: "";
    position: absolute;
    left: -3px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc3545;
}

.cal-view-switch .btn {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Flat fill for the current view - no gradient. */
.cal-view-switch .btn.active {
    background: var(--admin-brand);
    border-color: var(--admin-brand);
    color: #fff;
}

/* ---- Mobile: compact month picker + agenda for the chosen day ---- */
.cal-grid-compact .cal-day {
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .25rem .125rem;
}

.cal-grid-compact .cal-day-number {
    align-self: center;
    font-size: .8rem;
}

.cal-grid-compact .cal-day.selected {
    background: var(--admin-brand-soft);
    box-shadow: inset 0 0 0 2px var(--admin-brand);
}

/* Dots answer "is anything on that day", which is what someone scans a month for. */
.cal-daydots {
    display: flex;
    gap: .1rem;
    height: .3rem;
    align-items: center;
}

.cal-daydot {
    width: .25rem;
    height: .25rem;
    border-radius: 50%;
    background: var(--admin-brand);
}

.cal-daydot.cancelled { background: var(--bs-secondary-color); }

.cal-agenda { margin-top: .75rem; }

.cal-agenda-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .25rem .25rem .5rem;
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: .25rem;
}

.cal-agenda-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    /* Comfortably tappable: a 44px target is the smallest that is reliably hit with a thumb. */
    min-height: 2.75rem;
    padding: .5rem .25rem;
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    background: none;
    text-align: left;
}

.cal-agenda-item:last-child { border-bottom: none; }

.cal-agenda-item.cancelled .cal-agenda-title {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
}

.cal-agenda-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 3rem;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.cal-agenda-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.cal-agenda-title { font-size: .85rem; font-weight: 600; }

/* The month controls wrap rather than overflow on a narrow screen. */
@media (max-width: 575.98px) {
    .cal-month-label { min-width: 6.5rem; font-size: .875rem; }
}

/* ----------------------------------------------------------------------------
   Voice calls: the incoming-call prompt and the in-call bar
---------------------------------------------------------------------------- */
.call-ring {
    position: fixed;
    top: calc(var(--admin-topbar-height) + .75rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1090; /* above the notification toasts: a ringing call outranks everything */
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 24rem;
    max-width: calc(100vw - 2rem);
    padding: .875rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .22);
    animation: call-ring-in .18s ease-out;
}

@keyframes call-ring-in {
    from { transform: translate(-50%, -.75rem); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

.call-ring-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--admin-btn-bg);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

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

.call-ring-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.call-ring-name { font-weight: 700; font-size: .9rem; }
.call-ring-sub { font-size: .75rem; color: var(--bs-secondary-color); }

.call-ring-actions { display: flex; gap: .5rem; flex-shrink: 0; }

/* Flat fills, no gradients: green answers, red hangs up - the one place in this UI where colour
   carries the whole meaning, so it must not be subtle. */
.call-btn-accept,
.call-btn-accept:hover {
    background: #198754 !important;
    border-color: #198754 !important;
    color: #fff !important;
}

.call-btn-decline,
.call-btn-decline:hover {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

.call-btn-muted,
.call-btn-muted:hover {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Video stage. Sits above the page but below the call bar, which stays reachable at all times -
   losing the hang-up button behind a full-screen video is the classic mistake here. */
.call-stage {
    position: fixed;
    inset: 0;
    bottom: 5rem;
    z-index: 1080;
    background: #0b0d10;
    padding: 1rem;
    display: flex;
}

.call-stage.minimised {
    inset: auto 1.25rem 5rem auto;
    width: 18rem;
    height: 11rem;
    padding: .375rem;
    border-radius: var(--admin-radius);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .35);
}

#call-video-stage {
    flex: 1;
    display: grid;
    gap: .5rem;
    min-width: 0;
    /* Rows must share the stage's height. Left at the default (auto) they size to content, and a
       tile whose only child is a height:100% video resolves to nothing - a black screen. */
    grid-auto-rows: 1fr;
    min-height: 0;
    grid-template-columns: 1fr;
}

/* Tile count comes from JS, which owns these nodes; the layout follows it. */
#call-video-stage[data-tiles="2"] { grid-template-columns: repeat(2, 1fr); }
#call-video-stage[data-tiles="3"],
#call-video-stage[data-tiles="4"] { grid-template-columns: repeat(2, 1fr); }
#call-video-stage[data-tiles="5"],
#call-video-stage[data-tiles="6"] { grid-template-columns: repeat(3, 1fr); }
#call-video-stage[data-tiles="7"],
#call-video-stage[data-tiles="8"],
#call-video-stage[data-tiles="9"] { grid-template-columns: repeat(3, 1fr); }

.call-tile {
    position: relative;
    background: #16191e;
    border-radius: var(--admin-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.call-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Your own preview is mirrored, because that is what people expect of a self-view. */
.call-tile-self video { transform: scaleX(-1); }

.call-tile-name {
    position: absolute;
    left: .5rem;
    bottom: .4rem;
    z-index: 1;
    padding: .1rem .45rem;
    border-radius: .75rem;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .7rem;
    max-width: calc(100% - 1rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-stage-toggle {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 2;
}

.call-bar {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1085;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: calc(100vw - 2rem);
    padding: .5rem .75rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: 2rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
}

.call-bar-status {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.call-bar-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #198754;
    animation: call-bar-pulse 1.6s ease-in-out infinite;
}

@keyframes call-bar-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.call-bar-who {
    font-size: .8rem;
    color: var(--bs-secondary-color);
    max-width: 16rem;
}

/* Who is on the call: overlapping faces, then the full roster on demand. */
.call-bar-roster-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    min-width: 0;
}

.call-avatars { display: inline-flex; }

.call-avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--admin-btn-bg);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .55rem;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
    /* Ring in the bar's own background so the stack reads as separate faces. */
    box-shadow: 0 0 0 2px var(--bs-body-bg);
}

.call-avatars .call-avatar + .call-avatar { margin-left: -.5rem; }

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

.call-avatar-more {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* Speaking: a brand ring, not a colour change - it must be legible at 1.5rem and must not imply
   an error or a warning. */
.call-avatar.speaking {
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--admin-brand);
}

.call-roster {
    position: absolute;
    bottom: calc(100% + .5rem);
    left: 50%;
    transform: translateX(-50%);
    width: 17rem;
    max-height: 14rem;
    overflow-y: auto;
    padding: .5rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
}

.call-roster-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .25rem;
}

.call-avatar-sm { width: 1.375rem; height: 1.375rem; font-size: .5rem; }

.call-roster-name {
    flex: 1;
    min-width: 0;
    font-size: .8rem;
}

.call-roster-state {
    font-size: .7rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.call-roster-state-incall { color: #198754; }
.call-roster-state-ringing { color: var(--admin-brand); }
.call-roster-state-declined { color: #dc3545; }

.call-bar-error {
    font-size: .7rem;
    color: #dc3545;
    max-width: 14rem;
}

.call-bar-actions { display: flex; gap: .375rem; }

/* A toggle that is currently on (presenting, hand up, chat open): the brand fill says "active". */
.call-btn-on,
.call-btn-on:hover {
    background: var(--admin-btn-bg) !important;
    border-color: var(--admin-btn-bg) !important;
    color: #fff !important;
}

/* Recording stays red while it runs - it is the one state people must never miss. */
.call-btn-rec,
.call-btn-rec:hover {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

.call-btn-chat { position: relative; }

.call-btn-badge {
    position: absolute;
    top: -.2rem;
    right: -.2rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 .25rem;
    border-radius: .5rem;
    background: var(--admin-accent);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

/* Status chips in the bar: presenting, recording, raised hands. */
.call-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border: none;
    border-radius: 1rem;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

button.call-chip { cursor: pointer; }

.call-chip-rec {
    background: rgba(220, 53, 69, .12);
    color: #dc3545;
}

.call-chip-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: currentColor;
    animation: call-bar-pulse 1.2s ease-in-out infinite;
}

.call-chip-hand {
    background: rgba(242, 101, 34, .14);
    color: var(--admin-accent);
}

.call-roster-hand {
    color: var(--admin-accent);
    font-size: .75rem;
}

/* Presenting: the shared screen takes the stage, cameras drop to a strip beneath it. */
#call-video-stage.has-screen {
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    grid-template-rows: minmax(0, 1fr);
    grid-auto-rows: 6.5rem;
    overflow-y: auto;
}

#call-video-stage .call-tile-screen {
    grid-column: 1 / -1;
    background: #000;
}

/* A shared screen is shown whole - cropping it would cut off the slide or code being presented. */
.call-tile-screen video { object-fit: contain; }

.call-stage.minimised #call-video-stage.has-screen .call-tile:not(.call-tile-screen) { display: none; }

/* Raised hand on a video tile. */
.call-tile.hand-raised {
    box-shadow: inset 0 0 0 3px var(--admin-accent);
}

.call-tile.hand-raised::after {
    content: "\f256"; /* fa-hand-paper */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--admin-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
}

/* In-call chat: slides in from the right, above the stage, clear of the call bar. */
.call-chat {
    position: fixed;
    top: 1rem;
    right: 1rem;
    bottom: 5.5rem;
    z-index: 1086;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius-lg);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .22);
    transform: translateX(calc(100% + 1.5rem));
    visibility: hidden;
    transition: transform .22s ease-out, visibility 0s linear .22s;
}

.call-chat.open {
    transform: none;
    visibility: visible;
    transition: transform .22s ease-out, visibility 0s;
}

.call-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem .75rem .625rem 1rem;
    border-bottom: 1px solid var(--admin-sidebar-border);
}

.call-chat-title { font-weight: 700; font-size: .9rem; }
.call-chat-sub { font-size: .72rem; color: var(--bs-secondary-color); }

.call-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.call-chat-empty {
    margin: auto;
    max-width: 15rem;
    text-align: center;
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.call-chat-msg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 85%;
}

.call-chat-msg.mine {
    align-self: flex-end;
    align-items: flex-end;
}

.call-chat-sender {
    font-size: .68rem;
    font-weight: 600;
    color: var(--admin-brand);
    margin: 0 0 .125rem .5rem;
}

.call-chat-bubble {
    padding: .45rem .7rem;
    border-radius: .9rem;
    background: var(--bs-tertiary-bg);
    font-size: .82rem;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.call-chat-msg.mine .call-chat-bubble {
    background: var(--admin-btn-bg);
    color: #fff;
}

.call-chat-file {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: inherit;
    text-decoration: underline;
}

.call-chat-time {
    font-size: .62rem;
    color: var(--bs-secondary-color);
    margin: .125rem .5rem 0;
}

.call-chat-error {
    padding: .25rem 1rem;
    font-size: .72rem;
    color: #dc3545;
}

.call-chat-compose {
    display: flex;
    gap: .5rem;
    padding: .625rem .75rem .75rem;
    border-top: 1px solid var(--admin-sidebar-border);
}

.call-chat-compose .form-control {
    border-radius: 1.25rem;
    font-size: .85rem;
}

@media (prefers-reduced-motion: reduce) {
    .call-ring { animation: none; }
    .call-bar-dot { animation: none; }
    .call-chip-dot { animation: none; }
    .call-chat, .call-chat.open { transition: none; }
}

@media (max-width: 575.98px) {
    .call-bar-who { display: none; }

    /* Phones: the controls get their own row so every button stays a comfortable tap target. */
    .call-bar {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: .5rem;
        width: calc(100vw - 1.5rem);
        bottom: .75rem;
        border-radius: 1.25rem;
    }

    .call-bar-actions {
        width: 100%;
        justify-content: space-evenly;
    }

    /* The chat takes the whole screen on a phone; its own header closes it. */
    .call-chat {
        inset: 0;
        width: auto;
        max-width: none;
        border-radius: 0;
        border: none;
        z-index: 1090;
    }

    .call-stage { bottom: 7.5rem; }
    .call-stage.minimised { bottom: 7.5rem; right: .75rem; width: 12rem; height: 8rem; }
}

/* ----------------------------------------------------------------------------
   Notification alert toasts (top-right; the chat toast owns the bottom-right)
---------------------------------------------------------------------------- */
.notif-toast-stack {
    position: fixed;
    top: calc(var(--admin-topbar-height) + .75rem);
    right: 1.25rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 22rem;
    max-width: calc(100vw - 2.5rem);
}

.notif-toast {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
    padding: .75rem;
    animation: notif-toast-in .2s ease-out;
}

@keyframes notif-toast-in {
    from { transform: translateX(1rem); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.notif-toast-body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    flex: 1;
}

.notif-toast-title {
    font-weight: 700;
    font-size: .875rem;
    line-height: 1.25;
}

/* Two-line clamp: enough to tell what arrived, never enough to take over the screen. */
.notif-toast-text {
    font-size: .78rem;
    color: var(--bs-secondary-color, #6b7280);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-toast-open {
    align-self: flex-start;
    margin-top: .25rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--admin-brand);
    font-size: .78rem;
    font-weight: 600;
}

.notif-toast-open:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .notif-toast { animation: none; }
}

/* Rows-per-page chooser, the one thing TablePager adds to the shared .mobile-pager format. */
.mobile-pager-size {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-bottom: 0;
}

.mobile-pager-size .form-select {
    width: auto;
    min-width: 4rem;
}

@media (max-width: 575.98px) {
    .mobile-pager { flex-wrap: wrap; justify-content: center; }
}

.chat-toast-header {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.chat-toast-heading {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    flex: 1;
}

.chat-toast-name {
    font-weight: 700;
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-toast-sub {
    font-size: .7rem;
    color: var(--bs-secondary-color, #6b7280);
}

.chat-toast-body {
    margin: .5rem 0 .65rem;
    font-size: .8125rem;
    color: var(--bs-body-color);
    white-space: pre-wrap;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chat-toast-error {
    font-size: .75rem;
    color: var(--bs-danger, #dc3545);
    margin-bottom: .5rem;
}

.chat-toast-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.chat-toast-reply {
    flex: 1;
    border-radius: 1.2rem;
}

.chat-toast-send {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-btn-bg);
    border: none;
    color: #fff;
}

.chat-toast-send:hover:not(:disabled),
.chat-toast-send:focus {
    background: var(--admin-btn-hover);
    color: #fff;
}

.chat-toast-send:disabled {
    opacity: .45;
}

.chat-toast-open {
    display: block;
    width: 100%;
    margin-top: .55rem;
    padding: 0;
    background: none;
    border: none;
    font-size: .75rem;
    color: var(--admin-brand);
    text-align: center;
}

.chat-attachment-image {
    max-width: 100%;
    max-height: 18rem;
    border-radius: .6rem;
    display: block;
    margin-bottom: .35rem;
}

.chat-attachment-video {
    max-width: 100%;
    max-height: 18rem;
    border-radius: .6rem;
    display: block;
    margin-bottom: .35rem;
    background: #000;
}

.chat-attachment-document {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: .6rem;
    background: var(--admin-content-bg);
    border: 1px solid var(--admin-sidebar-border);
    margin-bottom: .35rem;
    min-width: 12rem;
    max-width: 100%;
    font-size: .85rem;
    text-decoration: none;
    color: inherit;
}

.chat-message-row.mine .chat-attachment-document {
    background: rgba(255, 255, 255, .16);
    border-color: transparent;
    color: #fff;
}

.chat-attachment-doc-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-message-row.mine .chat-attachment-doc-icon {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

.chat-attachment-doc-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.chat-attachment-doc-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-attachment-doc-size {
    font-size: .7rem;
    opacity: .7;
}

.chat-attachment-doc-download {
    font-size: .8rem;
    opacity: .6;
    flex-shrink: 0;
}

.chat-attachment-document:hover .chat-attachment-doc-download {
    opacity: 1;
}

.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--admin-sidebar-border);
    background: var(--bs-body-bg, #fff);
}

.chat-composer-tools {
    display: flex;
    align-items: center;
    gap: .15rem;
    position: relative;
}

.chat-composer .btn-icon {
    width: 2.75rem;
    height: 2.75rem;
}

.chat-composer-input {
    flex: 1;
    resize: none;
    max-height: 7rem;
    min-height: 2.75rem;
    border-radius: 1.4rem;
    padding: .6rem 1rem;
    background: var(--admin-content-bg);
    border-color: transparent;
}

.chat-composer-input:focus {
    background: var(--bs-body-bg);
    border-color: var(--admin-brand);
    box-shadow: none;
}

.chat-send-btn {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-btn-bg);
    border: none;
    color: #fff;
}

.chat-send-btn:hover:not(:disabled),
.chat-send-btn:focus {
    background: var(--admin-btn-hover);
    color: #fff;
}

.chat-send-btn:disabled {
    opacity: .45;
}

.chat-file-input {
    display: none;
}

.chat-upload-status {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 1rem;
    padding: .5rem .75rem;
    border-radius: var(--admin-radius);
    background: var(--admin-content-bg);
    border: 1px solid var(--admin-sidebar-border);
    font-size: .8125rem;
}

.chat-upload-status-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-upload-status-error {
    background: rgba(var(--bs-danger-rgb, 220, 53, 69), .08);
    border-color: rgba(var(--bs-danger-rgb, 220, 53, 69), .35);
    color: var(--bs-danger, #dc3545);
}

.btn-close-sm {
    padding: .25rem;
    font-size: .65rem;
}

/* --- Conversation details modal --- */
.chat-details-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: .5rem 0 1.25rem;
    border-bottom: 1px solid var(--admin-sidebar-border);
}

.chat-details-subtitle {
    color: var(--bs-secondary-color, #6c757d);
    font-size: .85rem;
}

.chat-details-section {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--admin-sidebar-border);
}

.chat-details-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.chat-details-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}

.chat-details-heading {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: .75rem;
}

.chat-details-empty {
    color: var(--bs-secondary-color, #6c757d);
    font-size: .85rem;
    margin: 0;
}

.chat-details-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.chat-details-info-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.chat-details-info-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-details-info-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-break: break-word;
}

.chat-details-info-label {
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
}

.chat-details-member-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.chat-details-member {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4rem;
    border-radius: var(--admin-radius);
}

.chat-details-member:hover {
    background: var(--admin-content-bg);
}

.chat-details-member-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.25;
}

.chat-details-member-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-details-member-sub {
    font-size: .8rem;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-details-admin-badge {
    flex-shrink: 0;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .15rem .45rem;
    border-radius: 1rem;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
}

.chat-details-member-remove {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    color: var(--bs-danger, #dc3545);
}

.chat-details-member-promote {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    color: var(--admin-brand);
}

.chat-details-member-demote {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    color: var(--bs-warning, #d97706);
}

/* Editable group avatar (admins) - hover overlay with a camera icon over the hero avatar. */
.chat-details-avatar-editable {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.chat-details-avatar-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.chat-details-avatar-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    opacity: 0;
    transition: opacity .15s ease;
}

.chat-details-avatar-editable:hover .chat-details-avatar-overlay,
.chat-details-avatar-editable:focus-within .chat-details-avatar-overlay {
    opacity: 1;
}

.chat-details-edit-btn {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--bs-secondary-color, #6b7280);
}

.chat-details-description {
    font-size: .8125rem;
    color: var(--bs-body-color);
    white-space: pre-wrap;
    word-break: break-word;
    text-align: center;
    max-width: 20rem;
}

.chat-details-edit {
    width: 100%;
    max-width: 22rem;
    text-align: left;
}

.chat-details-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
}

.chat-details-media-item {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: var(--admin-radius);
    overflow: hidden;
    background: var(--admin-content-bg);
}

.chat-details-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-details-media-video {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: 1.25rem;
}

.chat-details-file-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.chat-details-file {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .65rem;
    border-radius: var(--admin-radius);
    background: var(--admin-content-bg);
    color: inherit;
    text-decoration: none;
}

.chat-details-file:hover {
    background: var(--admin-brand-soft);
}

.chat-details-file-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: var(--admin-radius);
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-details-file-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.chat-details-file-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-details-file-size {
    font-size: .78rem;
    color: var(--bs-secondary-color, #6c757d);
}

.chat-emoji-picker {
    position: absolute;
    bottom: 3.25rem;
    left: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: .15rem;
    padding: .5rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
}

.chat-emoji-choice {
    border: none;
    background: transparent;
    font-size: 1.15rem;
    padding: .25rem;
    border-radius: .35rem;
    cursor: pointer;
}

.chat-emoji-choice:hover {
    background: var(--admin-nav-hover-bg);
}

.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--bs-secondary-color, #6b7280);
    padding: 2rem 1rem;
}

.chat-empty-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: .75rem;
}

.chat-empty-state-main {
    flex: 1;
}

.chat-user-picker {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    max-height: 20rem;
    overflow-y: auto;
}

.chat-user-picker-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem;
    border: 1px solid transparent;
    border-radius: var(--admin-radius-sm);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.chat-user-picker-item:hover {
    background: var(--admin-nav-hover-bg);
}

.chat-user-picker-item.selected {
    border-color: var(--admin-brand);
    background: var(--admin-brand-soft);
}

@media (max-width: 767.98px) {
    .chat-page {
        height: calc(100dvh - var(--admin-topbar-height) - 1rem);
        min-height: 0;
        border-radius: var(--admin-radius);
    }

    .chat-sidebar {
        width: 100%;
        border-right: none;
    }

    .chat-sidebar-hidden-mobile,
    .chat-main-hidden-mobile {
        display: none;
    }

    .chat-messages {
        padding: 1rem .75rem .75rem;
    }

    .chat-bubble {
        max-width: 85%;
    }

    .chat-composer {
        padding: .6rem .75rem;
        /* Keep the send button clear of the iOS home-indicator area. */
        padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0));
    }
}

/* ============================================================================
   Searchable select (select2-style dropdown)
   ========================================================================== */
.searchable-select {
    position: relative;
}

.searchable-select-toggle {
    width: 100%;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchable-select-toggle:disabled {
    background-color: var(--bs-secondary-bg);
    cursor: default;
    opacity: .65;
}

.searchable-select-placeholder {
    color: var(--bs-secondary-color, #6b7280);
}

.searchable-select-value i {
    margin-right: .5rem;
    color: var(--admin-brand);
}

.searchable-select-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

.searchable-select-menu {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--admin-radius);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
    overflow: hidden;
}

.searchable-select-search {
    position: relative;
    padding: .5rem;
    border-bottom: 1px solid var(--admin-sidebar-border);
}

.searchable-select-search i {
    position: absolute;
    left: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .75rem;
    color: var(--bs-secondary-color, #6b7280);
    pointer-events: none;
}

.searchable-select-search .form-control {
    padding-left: 2rem;
    background: var(--admin-content-bg);
    border-color: transparent;
}

.searchable-select-search .form-control:focus {
    background: var(--bs-body-bg);
    border-color: var(--admin-brand);
    box-shadow: none;
}

.searchable-select-options {
    max-height: 15rem;
    overflow-y: auto;
    padding: .25rem;
}

.searchable-select-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .65rem;
    min-height: 2.5rem;
    border: none;
    border-radius: var(--admin-radius-sm);
    background: transparent;
    text-align: left;
    font-size: .875rem;
    color: var(--bs-body-color);
    cursor: pointer;
}

.searchable-select-option:hover {
    background: var(--admin-nav-hover-bg);
}

.searchable-select-option.selected {
    background: var(--admin-brand-soft);
    font-weight: 600;
}

.searchable-select-option i:first-child {
    color: var(--admin-brand);
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
}

.searchable-select-option-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchable-select-check {
    font-size: .7rem;
    color: var(--admin-brand);
    flex-shrink: 0;
}

.searchable-select-empty {
    padding: .75rem;
    text-align: center;
    font-size: .8rem;
    color: var(--bs-secondary-color, #6b7280);
}

/* Pager wraps on narrow screens */
.pagination {
    flex-wrap: wrap;
    row-gap: .5rem;
}

/* ----------------------------------------------------------------------------
   Broadcasts / Communications
---------------------------------------------------------------------------- */
/* Compose modal side panels (channels / recipients / delivery) */
.bc-panel {
    border: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    border-radius: var(--admin-radius);
    overflow: hidden;
}

.bc-panel-head {
    padding: .625rem .875rem;
    font-weight: 700;
    font-size: .8rem;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
}

.bc-panel-body {
    padding: .875rem;
}

/* "All users" summary tile */
.bc-allusers {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-brand-soft);
}

.bc-allusers > i {
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* Scrollable, server-searched people picker */
.bc-picker {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    border-radius: var(--admin-radius-sm);
    padding: .25rem;
}

.bc-picker-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    margin: 0;
    padding: .4rem .5rem;
    border-radius: var(--admin-radius-sm);
    cursor: pointer;
}

.bc-picker-item:hover {
    background: var(--admin-nav-hover-bg);
}

/* Rich HTML body rendered in the detail modal */
.bc-body {
    font-size: .875rem;
    line-height: 1.6;
    word-break: break-word;
}

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

/* Clickable list rows */
.cursor-pointer {
    cursor: pointer;
}

/* ----------------------------------------------------------------------------
   Utilities missing from the theme (were referenced but undefined — caused the
   navbar notification body to overflow instead of truncating).
---------------------------------------------------------------------------- */
.min-width-0 { min-width: 0 !important; }
.text-500 { color: var(--bs-secondary-color) !important; }

/* Full-page notifications feed: clamp the preview to two lines; the full message
   opens in the notification detail modal. */
.notification-feed-message {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----------------------------------------------------------------------------
   Notification detail modal — attachment rows
---------------------------------------------------------------------------- */
.bc-attachment {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem;
    border: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    border-radius: var(--admin-radius-sm);
    text-decoration: none;
    color: inherit;
    transition: background-color .12s ease-out, border-color .12s ease-out;
}

.bc-attachment:hover {
    background: var(--admin-nav-hover-bg);
    border-color: var(--admin-brand);
    color: inherit;
}

.bc-attachment-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: 1rem;
}

/* ----------------------------------------------------------------------------
   Delivery timeline chart (compose wizard live progress)
---------------------------------------------------------------------------- */
.bc-chart {
    border: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    border-radius: var(--admin-radius);
    padding: 1rem;
    background: var(--bs-body-bg);
}

/* Height comes from the viewBox aspect ratio: the SVG carries axis text now, so it must scale
   uniformly rather than being stretched to a fixed pixel height. */
.bc-chart-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.bc-chart-empty {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    font-size: .85rem;
}

.bc-chart-grid {
    stroke: var(--bs-border-color);
    stroke-width: 1;
    opacity: .5;
    vector-effect: non-scaling-stroke;
}

.bc-chart-axis {
    stroke: var(--bs-border-color);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.bc-chart-tick {
    fill: var(--bs-secondary-color);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.bc-chart-axis-title {
    fill: var(--bs-secondary-color);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bc-chart-marker {
    fill: var(--admin-brand);
    stroke: var(--bs-body-bg);
    stroke-width: 2;
}

.bc-chart-callout {
    fill: var(--bs-body-color);
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* A just-created communication row (a resend). Flat brand tint that fades out, so the new entry is
   findable at a glance without permanently marking it - a resend copy is otherwise identical to the
   row it came from. */
.bc-row-new > td {
    animation: bc-row-new-flash 2.5s ease-out;
}

@keyframes bc-row-new-flash {
    0%, 35% { background-color: var(--admin-brand-soft); }
    100% { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .bc-row-new > td {
        animation: none;
        background-color: var(--admin-brand-soft);
    }
}

/* Per-channel delivery breakdown bars (delivery-status view of a dispatched communication) */
.bc-bars {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.bc-bar-row {
    display: grid;
    grid-template-columns: 6.5rem 1fr auto;
    align-items: center;
    gap: .625rem;
}

.bc-bar-label {
    font-size: .8rem;
    color: var(--bs-body-color);
    white-space: nowrap;
}

.bc-bar {
    display: flex;
    height: .75rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bs-tertiary-bg);
}

.bc-bar-seg { display: block; height: 100%; }

.bc-bar-value {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bc-chart-area-total { fill: var(--bs-tertiary-bg); }
.bc-chart-area-sent  { fill: var(--admin-brand-soft); }
.bc-chart-line-sent {
    fill: none;
    stroke: var(--admin-brand);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.bc-chart-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin-top: 1rem;
}

.bc-kpi {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .5rem .625rem;
    border-radius: var(--admin-radius-sm);
    background: var(--bs-tertiary-bg);
}

.bc-kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.bc-kpi-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    color: var(--bs-secondary-color);
}

.bc-swatch {
    width: .625rem;
    height: .625rem;
    border-radius: 2px;
    flex-shrink: 0;
}

.bc-swatch-sent    { background: var(--admin-brand); }
.bc-swatch-pending { background: var(--bs-border-color); }
.bc-swatch-failed  { background: #dc3545; }
.bc-swatch-skipped { background: var(--bs-secondary-color); }

@media (max-width: 575.98px) {
    .bc-chart-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ----------------------------------------------------------------------------
   Compose wizard — step indicator, audience cards, review
---------------------------------------------------------------------------- */
.bc-steps {
    display: flex;
    align-items: center;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bc-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 0;
    min-width: 0;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    font-weight: 600;
}

.bc-step:not(:last-child)::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    background: var(--bs-border-color);
    border-radius: 2px;
}

.bc-step-dot {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
}

.bc-step.active { color: var(--admin-brand); }
.bc-step.active .bc-step-dot {
    background: var(--admin-brand);
    border-color: var(--admin-brand);
    color: #fff;
}

.bc-step.done .bc-step-dot {
    background: var(--admin-brand-soft);
    border-color: var(--admin-brand);
    color: var(--admin-brand);
}

.bc-step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 575.98px) {
    .bc-step-label { display: none; }
}

.bc-audience-card {
    display: flex;
    align-items: center;
    gap: .875rem;
    width: 100%;
    text-align: left;
    padding: .875rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--admin-radius);
    background: var(--bs-body-bg);
    color: inherit;
    cursor: pointer;
    transition: border-color .12s ease-out, background-color .12s ease-out;
}

.bc-audience-card:hover { background: var(--admin-nav-hover-bg); }

.bc-audience-card.selected {
    border-color: var(--admin-brand);
    background: var(--admin-brand-soft);
}

.bc-audience-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-brand-soft);
    color: var(--admin-brand);
    font-size: 1.05rem;
}

.bc-review {
    border: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
    border-radius: var(--admin-radius);
    overflow: hidden;
}

.bc-review-row {
    display: flex;
    gap: 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--admin-sidebar-border) 60%, transparent);
}

.bc-review-row:last-child { border-bottom: 0; }

.bc-review-key {
    flex: 0 0 7rem;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    font-weight: 600;
}

.bc-review-val { flex: 1 1 auto; min-width: 0; }

.bc-preview {
    max-height: 220px;
    overflow-y: auto;
}

/* Chart transitions honour reduced-motion (the SVG updates are discrete anyway; this guards any
   future CSS transition on the data paths). */
@media (prefers-reduced-motion: reduce) {
    .bc-chart-line-sent,
    .bc-chart-area-sent,
    .bc-chart-area-total { transition: none !important; }
}