html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.header-title {
    position: absolute;
    top: 10px;
    left: 35px;
}

textarea {
    resize: none;
}

/* ===== Loading Overlay ===== */
.tc-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(36, 36, 36, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    overflow: hidden;
}

.tc-spinner {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: rgba(255, 255, 255, 0.60);
    animation: tc-spin 0.85s linear infinite;
}

@keyframes tc-spin {
    to { transform: rotate(360deg); }
}

.nav-item .icon {
    font-size: 18px;
}

.table .icon {
    line-height: 25px;
    cursor: pointer;
}

.table .icon:hover {
    color: blue;
}

/* ── Striped rows are the DEFAULT for every backoffice table ──────────────────
   Zircos/Bootstrap paints each CELL's shade through a box-shadow driven by the
   cascade var(--ct-table-bg-state, var(--ct-table-bg-type, --ct-table-accent-bg)).
   A <tr> background is painted over by that box-shadow and never shows — so
   striping/hover MUST set those variables, not a background. No need to add the
   `table-striped` class anywhere. tc-leads-grid and tc-leads-mini stripe at cell
   level themselves and are excluded so we don't double-paint or fight their
   custom (e.g. 4n+3) patterns. Using the explicit light token because the bundle's
   --ct-table-striped-bg resolves dark in the dark-theme block. */
.table:not(.tc-leads-grid):not(.tc-leads-mini) > tbody > tr:nth-of-type(even) > * {
    --ct-table-bg-type: rgba(238, 242, 247, 0.45);
}

/* --ct-table-bg-state wins over --ct-table-bg-type in the cascade above, so hover
   correctly overrides the stripe on every row, even or odd. */
.table:not(.tc-leads-grid):not(.tc-leads-mini) > tbody > tr:hover > * {
    --ct-table-bg-state: rgba(24, 138, 226, 0.06);
}
.table:not(.tc-leads-grid):not(.tc-leads-mini) > tbody > tr:hover {
    cursor: pointer;
}

/* Selected-row state retained from the legacy rule. */
.table tbody tr.active > * {
    --ct-table-bg-state: rgba(24, 138, 226, 0.12);
}

/* ===== TC Filter Bar ===== */
.tc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-bottom: 1rem;
}

.tc-filter-bar__left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.tc-filter-bar__search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.tc-filter-bar__daterange {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.tc-filter-bar__date-sep {
    font-size: .8125rem;
    color: #4c4c5c;
    line-height: 1;
}

.tc-filter-bar__search-label {
    font-size: .8125rem;
    color: #4c4c5c;
    white-space: nowrap;
    font-family: "Open Sans", sans-serif;
}

/* Remove the old icon approach � now using a label like Zircos */
.tc-filter-bar__search-icon { display: none; }

.tc-filter-search-field {
    width: 240px;
}

.tc-filter-search-field .mud-input-outlined-border {
    border-radius: 4px !important;
    border-color: #dee2e6 !important;
}

.tc-filter-search-field .mud-input-root {
    font-size: .8125rem !important;
    font-family: "Open Sans", sans-serif !important;
    height: 22px !important;
    padding: 0 8px !important;
}

.tc-filter-search-field .mud-input-outlined .mud-input-slot {
    padding: 4px 8px !important;
}

.tc-filter-bar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    align-self: center;
}

.tc-filter-chip {
    font-size: .75rem !important;
    font-family: "Open Sans", sans-serif !important;
    height: 26px !important;
    border-radius: 13px !important;
    cursor: pointer;
    transition: opacity .15s;
}

.tc-filter-chip:hover { opacity: .85; }

/* ===== Date range pickers � match search bar height ===== */
.tc-date-picker {
    width: 130px;
}

.tc-date-picker .mud-input-outlined-border {
    border-radius: 4px !important;
    border-color: #dee2e6 !important;
}

.tc-date-picker .mud-input-root {
    font-size: .8125rem !important;
    font-family: "Open Sans", sans-serif !important;
    padding: 0 8px !important;
}

.tc-date-picker .mud-input-outlined .mud-input-slot {
    padding: 4px 8px !important;
}

.tc-date-picker .mud-input-adornment-end .mud-icon-button {
    padding: 2px !important;
    width: 20px !important;
    height: 20px !important;
}

.tc-date-picker .mud-icon-root { font-size: 14px !important; }

/* use our own "Date:" label � suppress MudBlazor floating label */
.tc-date-picker .mud-input-label { display: none !important; }
.tc-date-picker .mud-input-control-input-slot { margin-top: 0 !important; }

/* ===== Date preset dropdown ===== */
.tc-date-preset-wrapper {
    position: relative;
}

.tc-date-preset-btn {
    height: 32px;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: .8125rem;
    font-family: "Open Sans", sans-serif;
    color: #4c4c5c;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: border-color .15s;
}

.tc-date-preset-btn:hover { border-color: #188ae2; }

/* Match the native form-select chevron weight/color (used on the study filter) */
.tc-date-preset-chevron { font-size: 1rem; opacity: 1; color: #343a40; }

.tc-date-preset-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.tc-date-preset-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    min-width: 175px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    padding: 4px 0;
    display: flex;
    flex-direction: column;
}

.tc-date-preset-option {
    padding: 8px 16px;
    font-size: .8125rem;
    font-family: "Open Sans", sans-serif;
    color: #4c4c5c;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: background .1s;
}

.tc-date-preset-option:hover { background: #f5f5f5; }

.tc-date-preset-option--active {
    font-weight: 600;
    color: #3d4fff;
}

/* ── Perspective switcher (dashboard lens) ─────────────────────────────────
   The primary dashboard control — styled bolder than the date/study filters so
   it reads as the context selector, not just another filter. */
.tc-persp-wrapper {
    position: relative;
}

.tc-persp-btn {
    height: 32px;
    box-sizing: border-box;
    padding: 0 12px;
    font-size: .8125rem;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
    color: #fff;
    background: linear-gradient(90deg, #727cf5, #6571ff);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(101, 113, 255, .35);
}

.tc-persp-btn:hover { filter: brightness(1.05); }

.tc-persp-icon { font-size: 1rem; }
.tc-persp-chevron { font-size: 1rem; opacity: .9; margin-left: 2px; }

.tc-persp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.tc-persp-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    min-width: 300px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0,0,0,.14);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tc-persp-option {
    padding: 9px 10px;
    font-family: "Open Sans", sans-serif;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: background .1s;
}

.tc-persp-option:hover { background: #f5f6ff; }

.tc-persp-option--active { background: #eef0ff; }

.tc-persp-option-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #727cf51a;
    color: #6571ff;
    font-size: 16px;
}

.tc-persp-option-text { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.tc-persp-option-title { font-size: .8125rem; font-weight: 600; color: #313a46; }
.tc-persp-option-blurb { font-size: .6875rem; color: #98a6ad; line-height: 1.3; margin-top: 1px; }
.tc-persp-check { color: #6571ff; font-size: 1rem; align-self: center; flex-shrink: 0; }

/* Speed-to-lead / RAG status dot */
.tc-speed-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

/* Recommended Actions — interactive (clickable) vs informational (read-only) cards.
   The difference must be obvious at a glance: action cards get a colored left rail,
   pointer + hover-lift and a CTA button; info cards are dashed/flat with no CTA. */
.tc-rec-card { border: 1px solid #eef0f2; }

.tc-rec-card--action {
    cursor: pointer;
    border-left-width: 4px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.tc-rec-card--action:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.10); }
.tc-rec-card--action:focus-visible { outline: 3px solid #3b5de7; outline-offset: 2px; }

.tc-rec-card--info { border-style: dashed; background: #fbfcfd; }

.tc-rec-card--success { border-left-color: #0acf97; }
.tc-rec-card--warning { border-left-color: #ffbc00; }
.tc-rec-card--danger  { border-left-color: #fa5c7c; }
.tc-rec-card--primary { border-left-color: #727cf5; }

.tc-rec-icon {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.tc-rec-icon--success { background: rgba(10,207,151,.12);  color: #0acf97; }
.tc-rec-icon--warning { background: rgba(255,188,0,.16);   color: #d8a200; }
.tc-rec-icon--danger  { background: rgba(250,92,124,.12);  color: #fa5c7c; }
.tc-rec-icon--primary { background: rgba(114,124,245,.12); color: #727cf5; }

.tc-rec-pill-action { background: #313a46; color: #fff; }
.tc-rec-pill-info   { background: #eef0f2; color: #6c757d; }

.tc-rec-legend { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.tc-rec-legend--action { background: #727cf5; }
.tc-rec-legend--info   { background: #fbfcfd; border: 1px dashed #c8ccd4; }

/* Study Performance — expandable rows. Cells paint via --ct-table-bg-type (box-shadow
   trick), so hover/open/detail must set that variable, not a background. */
.tc-study-perf tbody tr.tc-study-row:hover > * { --ct-table-bg-type: rgba(59,93,231,.06); }
.tc-study-perf tbody tr.tc-study-row--open > * { --ct-table-bg-type: rgba(101,113,255,.10); }
.tc-study-perf tbody tr.tc-study-detail > td { --ct-table-bg-type: #f7f8fa; padding: .25rem .5rem; }

/* Dashboard widgets: every widget card is at least 500px tall — empty OR full —
   then grows with content. KPI tiles (.tc-kpi-card, no .card-title) are excluded. */
#dashboard-tabContent .card:has(.card-title) { min-height: 500px; }
#dashboard-tabContent .card:has(.card-title) > .card-body { display: flex; flex-direction: column; }

/* No-data indicator — fills the widget and centers on both axes. */
.tc-empty-state {
    flex: 1 1 auto;
    min-height: 500px;            /* floor for standalone (title-less) empty cards */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* Inside a titled widget the card already supplies the 500 floor — don't stack a second one. */
#dashboard-tabContent .card:has(.card-title) .tc-empty-state { min-height: 0; }

/* Study Performance — per-axis reveal controls */
.tc-study-chevron { line-height: 1; border: 0; }
.tc-breakdown-toggle {
    display: inline-flex; align-items: center; gap: .25rem;
    background: transparent; border: 1px solid transparent; border-radius: 6px;
    padding: .1rem .4rem; font-size: .8125rem; color: inherit; cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.tc-breakdown-toggle:hover { background: rgba(101,113,255,.08); border-color: rgba(101,113,255,.25); }
.tc-breakdown-toggle--open { background: rgba(101,113,255,.12); border-color: rgba(101,113,255,.35); }
.tc-breakdown-toggle i { font-size: .9rem; opacity: .7; }

/* ── Communications (inbox + chat two-pane) ────────────────────────────────── */

/* Page wrapper: fills the viewport below the sticky topbar.
   Height flows from this anchor down through the flex chain — no magic pixel calcs
   on inner elements. The Zircos CSS variable keeps this in sync with the template. */
.tc-comms-page {
    display: flex;
    flex-direction: column;
    width: 100%;                 /* parent .page-container is a flex ROW — without this the page collapses to content width */
    align-self: stretch;         /* parent uses align-items:center — override so we fill full height, not centre */
    height: calc(100dvh - var(--ct-topbar-height) - 1.5rem);  /* viewport fill, minus topbar + breathing room so it never overflows into page scroll */
}

.tc-comms {
    flex: 1 1 0;
    min-height: 560px;   /* floor: won't collapse on short laptops */
}

/* The .row (.tc-comms) computes align-items:flex-start (Zircos/vendor override), so its
   columns size to content instead of stretching to the row height. Force both panes to
   the full row height so the list / thread fill. Verified via Playwright (cols = 1067px). */
.tc-comms-inbox,
.tc-comms-chat { height: 100%; min-height: 0; }

.tc-comms-inbox {
    border-right: 1px solid #eef0f2;
    display: flex;
    flex-direction: column;
}

/* Filter / search header — pinned, subtle brand tint */
.tc-comms-inbox-head {
    flex-shrink: 0;
    background: #f9fbff;
}

.tc-comms-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Empty state — left column when no conversations match */
.tc-comms-list-empty {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    gap: 6px;
    color: #adb5bd;
}
.tc-comms-list-empty i { font-size: 2rem; opacity: .5; }
.tc-comms-list-empty-title { font-size: .8125rem; font-weight: 600; color: #6c757d; }
.tc-comms-list-empty-hint { font-size: .72rem; color: #adb5bd; }

.tc-comms-item {
    width: 100%;
    border: none;
    border-left: 3px solid transparent;
    background: none;
    border-bottom: 1px solid #f1f3f5;
    display: flex;
    align-items: stretch;
    position: relative;
    transition: background .15s, border-left-color .15s;
}

.tc-comms-item:hover { background: #f8f9fb; border-left-color: #d1d5ff; }
.tc-comms-item--active { background: #eef0ff; border-left-color: #6571ff; }
.tc-comms-item--active:hover { background: #e7eaff; border-left-color: #6571ff; }

/* Inner select button (all content, transparent so parent hover/active shows) */
.tc-comms-item-select {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 8px 11px 11px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

/* Per-row trash — hidden until row hover, red on button hover */
.tc-comms-item-del {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    border: 0;
    background: transparent;
    color: #adb5bd;
    opacity: 0;
    font-size: 15px;
    cursor: pointer;
    transition: color .15s, opacity .15s;
    padding: 0;
}
.tc-comms-item:hover .tc-comms-item-del { opacity: 1; }
.tc-comms-item-del:hover { color: #dc3545; }

/* Mark-as-read quick action — mirrors the delete button layout, green on hover.
   Used in both the /communications list and the global CommPanel rows. */
.tc-comms-item-read,
.tc-comm-row-read {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    border: 0;
    background: transparent;
    color: #adb5bd;
    opacity: 0;
    font-size: 14px;
    cursor: pointer;
    transition: color .15s, opacity .15s;
    padding: 0;
}
.tc-comms-item:hover .tc-comms-item-read,
.tc-comm-row:hover .tc-comm-row-read { opacity: 1; }
.tc-comms-item-read:hover,
.tc-comm-row-read:hover { color: #0acf97; }

.tc-comms-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.tc-comms-unread {
    position: absolute;
    top: 14px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fa5c7c;
}

.tc-comms-chat {
    display: flex;
    flex-direction: column;
}

/* Chat header and reply bar pinned; thread flex-fills the gap */
.tc-comms-chat-head { flex-shrink: 0; }
.tc-comms-reply { flex-shrink: 0; }

.tc-comms-thread {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    background: #f7f8fa;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tc-comms-bubble-row { display: flex; }
.tc-comms-bubble-row--mine { justify-content: flex-end; }

.tc-comms-bubble {
    max-width: 78%;
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 12px 12px 12px 2px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.tc-comms-bubble--mine {
    background: #6571ff;
    border-color: #6571ff;
    color: #fff;
    border-radius: 12px 12px 2px 12px;
}

.tc-comms-bubble-time {
    font-size: .65rem;
    opacity: .6;
    margin-top: 3px;
    text-align: right;
}

.tc-comms-bubble-sender {
    font-size: .65rem;
    font-weight: 700;
    opacity: .7;
    margin-bottom: 2px;
}

@media (max-width: 767px) {
    /* Release the viewport-fill so each pane sizes to content and the page scrolls */
    .tc-comms-page {
        height: auto;
    }
    .tc-comms {
        flex: none;
        min-height: 0;
    }
    /* Stacked panes size to content on mobile — release the forced full height */
    .tc-comms-inbox,
    .tc-comms-chat {
        height: auto;
    }
    .tc-comms-inbox {
        border-right: none;
        border-bottom: 1px solid #eef0f2;
    }
    /* No fixed/max heights on mobile — natural content sizing, page scrolls */
    .tc-comms-list {
        flex: none;
        max-height: none;
    }
    .tc-comms-thread {
        flex: none;
        max-height: none;
    }
}

@media (max-width: 767px) {
    .tc-persp-wrapper { flex: 1 0 100%; }
    .tc-persp-btn { width: 100%; justify-content: space-between; }
    .tc-persp-menu { left: 0; right: 0; min-width: 0; max-width: calc(100vw - 16px); }
}

/* ── Equal-height card rows ────────────────────────────────────────────── */
/*  Guarantees all cards in a row match the tallest card's height.
    Apply .tc-equal-row to any .row that contains .card siblings. */
.tc-equal-row {
    align-items: stretch !important;
}
.tc-equal-row > [class*="col"] {
    display: flex !important;
    flex-direction: column !important;
}
.tc-equal-row > [class*="col"] > .card {
    flex: 1 1 auto !important;
    height: auto !important;      /* override any fixed height from template */
    min-height: 0 !important;
}

/* ── Chart centering ───────────────────────────────────────────────────────
   Wrap a dashboard chart in .tc-chart-center (inside a d-flex flex-column
   card-body) so it sits centered — vertically AND horizontally — in the card's
   leftover space, like the empty-state text. IMPORTANT: this must stay a normal
   full-width BLOCK (not display:flex) — an ApexCharts donut inside a flex item
   can't measure its width and collapses to a broken crosshair. Auto block
   margins absorb the free space above/below, centering it within the
   flex-column card-body. */
.tc-chart-center {
    width: 100%;
    margin-block: auto;
    min-height: 0;
    text-align: center;   /* horizontal center for inline/inline-block chart content */
}

/* ── Geographic Lead Map (Leaflet) ─────────────────────────────────────── */
.tc-lead-map {
    width: 100%;
    min-height: 320px;            /* real height so Leaflet can paint tiles (flex-grows taller) */
    border-radius: 8px;
    overflow: hidden;
    z-index: 0;                   /* keep tiles under Bootstrap dropdowns/modals */
    background: #e9edf2;          /* visible while tiles load */
}
/* Leaflet hardening: the admin/Bootstrap theme sets img{max-width:100%}, which distorts
   map tiles — force tiles back to their natural size, and give the canvas a height. */
.leaflet-container img.leaflet-tile,
.leaflet-container .leaflet-tile { max-width: none !important; max-height: none !important; }
.leaflet-container { height: 100%; }
.leaflet-control-attribution { font-size: 10px; }

/* Click-to-sort table headers (plain HTML geo tables) */
.tc-sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.tc-sortable-th:hover { color: var(--ct-primary, #727cf5); }
.tc-lead-map .leaflet-container { font: inherit; }

/* Lead Map fullscreen expand + bubble drill-down panel + legend */
.tc-lead-map { position: relative; }
.tc-geo-expand { line-height: 1; }
.tc-geo-expand:hover { color: var(--ct-primary, #727cf5); }
.tc-geo-legend { position:absolute; left:8px; bottom:8px; z-index:4; display:flex; align-items:center; gap:4px; padding:3px 10px; background:rgba(255,255,255,.92); border-radius:999px; box-shadow:0 1px 4px rgba(0,0,0,.12); pointer-events:none; }

/* Fullscreen modal two-pane layout: map left (~2/3) + docked leads panel right (~1/3),
   with a 10px inset from the popup edges and a 10px gap between the two panes. */
.tc-geo-modal-body { padding:20px; gap:20px; overflow:hidden; }
.tc-geo-modal-map { flex:1 1 auto; min-width:0; }
.tc-geo-modal-map .tc-lead-map { height:100%; }
.tc-geo-modal-panel { flex:0 0 32%; max-width:460px; min-width:280px; background:#fff; border:1px solid var(--ct-border-color, #e3ebf6); border-radius:8px; overflow:hidden; }
.tc-geo-panel__list { flex:1 1 auto; min-height:0; overflow-y:auto; }
@media (max-width:767.98px){
    .tc-geo-modal-body { flex-direction:column; }
    .tc-geo-modal-map { flex:1 1 60%; min-height:240px; }
    .tc-geo-modal-panel { flex:1 1 40%; max-width:none; min-width:0; width:100%; }
}

/* Lead Map fullscreen popup — near-full with a 10px gutter from the viewport edge (not edge-to-edge). */
.tc-modal-near-full { max-width: none; height: calc(100vh - 20px); margin: 10px; }
.tc-modal-near-full .modal-content { height: 100%; }

/* No black browser focus box when a bubble is clicked — selection is shown by recoloring the
   bubble (SELECTED_STYLE in tc-geo-map.js). */
.tc-lead-map path.leaflet-interactive:focus,
.tc-lead-map path.leaflet-interactive:focus-visible { outline: none; }

/* ── Dashboard KPI Cards ───────────────────────────────────────────────── */
.tc-kpi-card {
    border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: box-shadow .15s;
}
/* Hover lift + pointer only on cards that actually navigate (Overview KPIs).
   Plain display cards must not signal interactivity. */
.tc-kpi-card--clickable { cursor: pointer; display: block; }
.tc-kpi-card--clickable:hover { box-shadow: 0 4px 12px rgba(0,0,0,.10); }
.tc-kpi-card--clickable:focus-visible {
    outline: 3px solid #3b5de7;
    outline-offset: -2px;                       /* sit on the card, not outside it */
    background-color: rgba(59, 93, 231, 0.03);  /* fallback cue if outline is suppressed (High Contrast) */
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
}

.tc-kpi-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Recommended Action Cards ──────────────────────────────────────────── */
.tc-action-card {
    border: none;
    border-left: 3px solid transparent;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: box-shadow .15s;
}
.tc-action-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.10); }
.tc-action-card--high  { border-left-color: #fa5c7c; }
.tc-action-card--medium { border-left-color: #ffbc00; }
.tc-action-card--low   { border-left-color: #39afd1; }

.tc-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tc-action-icon--high   { background: rgba(250,92,124,.12); color: #fa5c7c; }
.tc-action-icon--medium { background: rgba(255,188,0,.12);  color: #ffbc00; }
.tc-action-icon--low    { background: rgba(57,175,209,.12); color: #39afd1; }

.tc-date-preset-check {
    font-size: 13px;
    color: #3d4fff;
}

/* ===== TC Leads MudDataGrid � Zircos card style ===== */

/* Strip all MudBlazor chrome � card provides the frame */
.tc-leads-grid {
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    background-color: transparent !important;
    width: 100%;
    font-family: "Open Sans", sans-serif !important;
    font-size: .8125rem !important;
}

/* Table sits naturally inside card-body padding � no bleed */
.card-body .tc-leads-grid {
    width: 100%;
}

/* th � Zircos: font-family secondary (Montserrat), .75rem, uppercase, weight 600 */
.tc-leads-grid .mud-table-head th {
    padding: .5rem .6rem !important;
    background-color: transparent !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
    font-size: .75rem !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: #6c757d !important;
    white-space: nowrap;
    border-bottom: none !important;
    border-top: none !important;
    box-shadow: none !important;
    height: 44px;
}

/* Sort icon � make MudBlazor sort button visible and Zircos-sized */
.tc-leads-grid .mud-table-head th .mud-button-root {
    opacity: 1 !important;
    visibility: visible !important;
    color: #adb5bd !important;
    padding: 0 !important;
    min-width: unset !important;
    min-height: unset !important;
}

.tc-leads-grid .mud-table-head th .mud-button-root:hover {
    color: #4c4c5c !important;
}

/* Sort icon size matches Zircos ti-chevrons */
.tc-leads-grid .mud-table-head th .mud-button-root .mud-icon-root {
    font-size: 1rem !important;
    width: 1rem !important;
    height: 1rem !important;
}

.tc-leads-grid .mud-table-head th:last-child  { padding-right: 1.5rem !important; }

/* td � Open Sans 0.8125rem, padding matches Zircos .table */
.tc-leads-grid .mud-table-body td {
    padding: .5rem .6rem !important;
    height: 44px;
    max-height: 44px;
    border-bottom: 1px solid #e7e9eb !important;
    border-top: none !important;
    font-size: .8125rem !important;
    font-family: "Open Sans", sans-serif !important;
    color: #4c4c5c !important;
    vertical-align: middle;
    box-shadow: none !important;
}

.tc-leads-grid .mud-table-body td:last-child  { padding-right: 1.5rem !important; }

/* Striped — Zircos .table-striped colors: white vs rgba(238,242,247,.45).
   ChildRowContent makes MudDataGrid emit TWO <tr> per item (main row + a
   collapsed/expanded child row), so a plain odd/even stripe shades the invisible
   child rows and leaves every visible main row white (= no stripes at all).
   Stripe on a 4-row cadence instead: item N occupies rows 2N-1 (main) and 2N
   (child). Odd items → 4n+1/4n+2 (white); even items → 4n+3/4n+4 (shaded), so the
   child row always matches its parent. */
.tc-leads-grid .mud-table-body tr:nth-child(4n+1) td,
.tc-leads-grid .mud-table-body tr:nth-child(4n+2) td { background-color: #fff; }
.tc-leads-grid .mud-table-body tr:nth-child(4n+3) td,
.tc-leads-grid .mud-table-body tr:nth-child(4n+4) td { background-color: rgba(238, 242, 247, 0.45); }

/* Clickable rows */
.tc-leads-grid--clickable .mud-table-body tr {
    cursor: pointer;
}

.tc-leads-grid--clickable .mud-table-body .tc-col-actions {
    cursor: default;
}

/* Hover � Zircos primary tint */
.tc-leads-grid .mud-table-body tr:hover td {
    background-color: rgba(24, 138, 226, 0.05) !important;
    cursor: pointer;
}

/* Remove MudBlazor toolbar / header chrome */
.tc-leads-grid .mud-toolbar,
.tc-leads-grid .mud-table-toolbar {
    display: none !important;
}

/* Keyword suggestions — "recommended for SEO" row highlight (Bootstrap table) */
.tc-leads-grid tr.tc-kw-recommended > td {
    background-color: #e9f9ef;
}
.tc-leads-grid tr.tc-kw-recommended:hover > td {
    background-color: #ddf4e6;
}
.tc-kw-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background-color: #e9f9ef;
    border: 1px solid #bfe6cd;
    vertical-align: -2px;
}

/* Pager � flush with card bottom, matches dataTables_info + pagination-rounded */
.tc-leads-grid .mud-table-pagination {
    border-top: none !important;
    padding: .6rem 1.5rem !important;
    font-size: .8125rem !important;
    font-family: "Open Sans", sans-serif !important;
    color: #6c757d !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Round pager buttons � Zircos pagination-rounded */
.tc-leads-grid .mud-table-pagination .mud-button-root,
.tc-leads-grid .mud-table-pagination .mud-icon-button {
    border-radius: 50% !important;
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 2px !important;
    border: none !important;
    padding: 0 !important;
    font-size: .8125rem !important;
}

/* Active page � Zircos #188ae2 */
.tc-leads-grid .mud-table-pagination .mud-selected .mud-button-root,
.tc-leads-grid .mud-table-pagination .mud-pagination-item-active .mud-button-root {
    background-color: #188ae2 !important;
    color: #fff !important;
}

/* Page content background */
.page-content {
    background: rgb(245, 245, 245) !important;
}

/* Filter chip � active state uses status-matching colour via border + text only */
.tc-filter-chip.mud-chip-color-primary {
    background-color: #3d4fff !important;
    color: #fff !important;
}

.tc-filter-chip.mud-chip-color-warning {
    background-color: #fff3cd !important;
    color: #856404 !important;
    border: 1px solid #ffc107 !important;
    box-shadow: none !important;
}

.tc-filter-chip.mud-chip-color-error {
    background-color: #f8d7da !important;
    color: #842029 !important;
    border: 1px solid #dc3545 !important;
    box-shadow: none !important;
}

.tc-filter-chip.mud-chip-color-success {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
    border: 1px solid #198754 !important;
    box-shadow: none !important;
}

/* Inactive chips � neutral pill */
.tc-filter-chip.mud-chip-color-default {
    background-color: #f0f0f0 !important;
    color: #444 !important;
    border: 1px solid rgba(0,0,0,.1) !important;
}

.tc-action-btns {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
}

/* Native trash button � replaces MudIconButton so Blazor owns the click fully */
.tc-trash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #dc3545;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}

.tc-trash-btn:hover {
    background: rgba(220, 53, 69, 0.12);
    color: #b02a37;
}

.tc-trash-btn:focus-visible {
    outline: 2px solid #dc3545;
    outline-offset: 2px;
}

/* Secondary row action button (e.g. "View Leads") — same chrome as trash, blue accent */
.tc-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
    font-size: 12px;
}

.tc-secondary-btn:hover {
    background: rgba(13, 110, 253, 0.12);
    color: #0a58ca;
}

.tc-secondary-btn:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Compact leads list (Patients page side card) — Zircos striped rows.
   Striping is applied only to the clickable data rows so expanded detail rows
   stay white and don't break the stripe rhythm. */
.tc-leads-mini__row { cursor: pointer; }
.tc-leads-mini__row > td { background-color: #fff; }
.tc-leads-mini__row:nth-of-type(4n+3) > td { background-color: rgba(238, 242, 247, .55); }
.tc-leads-mini__row:hover > td { background-color: rgba(24, 138, 226, 0.05) !important; }
.tc-leads-mini__detail > td { background-color: #fff !important; }

/* All Bootstrap rows default to top-aligned columns — no card-height stretching. */
.row { align-items: flex-start; }

/* Side-panel column simply aligns to the top of the row — no inner scroll,
   no max-height. The page scrolls naturally. */
.tc-sticky-top {
    position: relative;
}

/* Custom Bootstrap-style pager appended below ZircosDataTable's grid. */
.tc-pager .page-link {
    border-radius: 50% !important;
    min-width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    font-size: 12px;
    color: #4c4c5c;
    border-color: #dee2e6;
}
.tc-pager .page-item.active .page-link {
    background-color: #188ae2;
    border-color: #188ae2;
    color: #fff;
}
.tc-pager .page-item.disabled .page-link {
    color: #adb5bd;
    background-color: #fff;
}
.tc-pager__size { width: auto; }

.tc-secondary-badge {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(13, 110, 253, 0.15);
    color: #0a58ca;
}

.tc-no-records {
    padding: 24px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

/* Status chips in table */
.tc-status-chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    white-space: nowrap;
}

.tc-status-pending {
    background: #fff3cd;
    color: #856404;
}

.tc-status-not-answered {
    background: #f8d7da;
    color: #842029;
}

.tc-status-processed {
    background: #d1e7dd;
    color: #0f5132;
}

.tc-status-screened {
    background: #cfe2ff;
    color: #084298;
}

/* Generic status palette � used when DB status values don't match named classes */
.tc-status-0 { background: #d1e7dd; color: #0f5132; } /* green  */
.tc-status-1 { background: #fff3cd; color: #856404; } /* yellow */
.tc-status-2 { background: #cfe2ff; color: #084298; } /* blue   */
.tc-status-3 { background: #f8d7da; color: #842029; } /* red    */
.tc-status-4 { background: #e2d9f3; color: #432874; } /* purple */
.tc-status-5 { background: #fde8d8; color: #7d3a08; } /* orange */

/* Named status badges � match chip colours exactly */
.tc-status-recruiting  { background: #d1e7dd; color: #0f5132; } /* green  � Success  */
.tc-status-coming-soon { background: #fff3cd; color: #856404; } /* yellow — Warning  */

/* Copy-to-clipboard button — no focus ring; icon swap is the visual feedback */
.tc-copy-btn:focus,
.tc-copy-btn:focus-visible { outline: none; box-shadow: none; }

/* Referral type badges */
.tc-status-ref-team       { background: #cfe2ff; color: #084298; } /* blue   — Info       */
.tc-status-ref-influencer { background: #e2d9f3; color: #432874; } /* purple — Secondary  */
.tc-status-ref-campaign   { background: #fde8d8; color: #7d3a08; } /* orange — Warning    */

/* Referrer-code channel badges */
.tc-status-ch-meta     { background: #dce7fb; color: #1c3d6e; } /* Facebook & Instagram */
.tc-status-ch-google   { background: #fde2e1; color: #842029; } /* Google               */
.tc-status-ch-sms      { background: #d1f2e1; color: #0f5132; } /* SMS                  */
.tc-status-ch-email    { background: #fff3cd; color: #664d03; } /* Email                */
.tc-status-ch-external { background: #e2e3e5; color: #41464b; } /* External             */

/* Dropdown filter in the filter bar */
.tc-filter-bar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 0 0 auto;
    margin-left: auto;
}

.tc-filter-bar__dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tc-filter-select {
    height: 40px;
    box-sizing: border-box;
    min-width: 160px;
    max-width: 220px;
    font-size: .8125rem;
    font-family: "Open Sans", sans-serif;
    color: #4c4c5c;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234c4c5c'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 10px 6px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.tc-filter-select:hover {
    border-color: #188ae2;
}

.tc-filter-select:focus {
    outline: none;
    border-color: #188ae2;
    box-shadow: 0 0 0 2px rgba(24,138,226,.15);
}

/* ===== Mobile responsive: hide non-critical columns ===== */

/* tc-leads-grid applied to a native <table> (no MudBlazor grid chrome) */
table.tc-leads-grid {
    font-family: "Open Sans", sans-serif !important;
    font-size: .8125rem !important;
    width: 100%;
    border-collapse: collapse;
}

table.tc-leads-grid thead th {
    padding: .5rem 1rem !important;
    background-color: transparent !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
    font-size: .75rem !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: #6c757d !important;
    white-space: nowrap;
    border-bottom: 1px solid #e5e8ef !important;
    border-top: none !important;
    height: 44px;
    vertical-align: middle;
}

table.tc-leads-grid tbody td {
    padding: .6rem 1rem !important;
    font-size: .8125rem !important;
    color: #2c2c3e !important;
    border-bottom: 1px solid #f0f1f5 !important;
    vertical-align: middle;
}

table.tc-leads-grid tbody tr:last-child td { border-bottom: none !important; }

table.tc-leads-grid tbody tr:nth-child(odd)  td { background-color: #fff; }
table.tc-leads-grid tbody tr:nth-child(even) td { background-color: rgba(238,242,247,.45); }

table.tc-leads-grid tbody tr:hover td { background-color: rgba(59,93,231,.04) !important; }

/* Native tc-leads-grid: mobile stacked-card layout (≤767px).
   Each row becomes a card; each cell shows its column label via data-label.
   The thead is visually hidden but kept in the a11y tree (screen readers still
   announce the table semantics). Mirrors the MudBlazor grid's mobile pattern. */
@media (max-width: 767px) {
    table.tc-leads-grid thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    table.tc-leads-grid,
    table.tc-leads-grid tbody,
    table.tc-leads-grid tbody tr,
    table.tc-leads-grid tbody td {
        display: block;
        width: 100%;
    }

    table.tc-leads-grid tbody tr {
        border: 1px solid #e5e8ef;
        border-radius: 8px;
        margin-bottom: 12px;
        overflow: hidden;
        background-color: #fff;
    }

    table.tc-leads-grid tbody tr:last-child { margin-bottom: 0; }

    /* Flatten desktop zebra striping — cards carry their own surface */
    table.tc-leads-grid tbody tr:nth-child(odd)  td,
    table.tc-leads-grid tbody tr:nth-child(even) td,
    table.tc-leads-grid tbody tr:hover td {
        background-color: transparent !important;
    }

    table.tc-leads-grid tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: right;
        padding: .55rem .9rem !important;
        border-bottom: 1px solid #f0f1f5 !important;
        white-space: normal;
        overflow-wrap: anywhere;   /* break long emails / GUIDs so they never spill past the card */
    }

    table.tc-leads-grid tbody td:last-child { border-bottom: none !important; }

    /* Long / multi-line cells: label on its own line, value full-width & left-aligned.
       Side-by-side reads poorly once the value wraps (emails, GUIDs, descriptions). */
    table.tc-leads-grid tbody td.tc-cell-stack {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 3px;
    }

    table.tc-leads-grid tbody td.tc-cell-stack::before {
        margin-right: 0;
    }

    /* Labeled cells: column title on the left, value on the right */
    table.tc-leads-grid tbody td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        flex: 0 0 auto;
        margin-right: auto;
        font-family: "Montserrat", sans-serif;
        font-weight: 600;
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #6c757d;
        text-align: left;
    }

    /* Unlabeled cells (e.g. selection checkbox) align left, no pseudo-label */
    table.tc-leads-grid tbody td:not([data-label]),
    table.tc-leads-grid tbody td[data-label=""] {
        justify-content: flex-start;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .tc-col-hide-xs {
        display: none !important;
    }

    /* Dashboard Overview: study filter fills the row to match the date dropdown width */
    .tc-dash-study-select {
        width: 100% !important;
        flex: 1 0 100%;
    }

    .tc-filter-bar {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .tc-filter-bar__left {
        flex-direction: column;
        align-items: stretch;
    }

    .tc-filter-bar__search {
        max-width: 100%;
    }

    .tc-filter-bar__right {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .tc-filter-bar__daterange {
        width: 100%;
        flex-wrap: wrap;
    }

    .tc-date-preset-wrapper {
        flex: 1;
    }

    .tc-date-preset-btn {
        width: 100%;
        height: 32px;
        justify-content: space-between;
    }

    .tc-filter-bar__dropdown {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .tc-filter-select {
        width: 100%;
        max-width: 100%;
        min-width: unset;
        height: 40px;
    }

    .tc-date-picker { width: 120px; }
}

/* ===== Mobile expand button ===== */
.tc-subject-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.tc-subject-name {
    flex: 1;
}

/* expand + delete pushed to right on mobile */
.tc-mobile-delete {
    margin-left: auto;
    flex-shrink: 0;
}

.tc-expand-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    color: #188ae2;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.tc-expand-btn:focus { outline: none; }

/* Child row tr: ALWAYS hidden on desktop */
.tc-leads-grid .mud-table-body tr:has(.tc-child-row-cell) {
    display: none !important;
}

/* Also always hide the collapsed sentinel row */
.tc-leads-grid .mud-table-body tr:has(.tc-child-collapsed) {
    display: none !important;
}

/* ===== Mobile (?767px) ===== */
@media (max-width: 767px) {

    /* Hide non-mobile columns */
    .tc-col-hide-sm {
        display: none !important;
    }

    /* Mobile layout: the main row shows ONLY the subject cell (title + optional
       right-aligned total). Every other column collapses into the expand panel,
       so values never stack onto their own orphan rows. */
    .tc-leads-grid .mud-table-body tr:not(:has(.tc-child-row-cell)) > td:not(:first-child) {
        display: none !important;
    }

    /* The subject (IsMain) cell is not always the first column — tables that lead with a
       "#"/order column flagged HideOnMobile push it to 2nd, where the rule above would hide
       it and leave the whole row visually empty. Always re-show the cell carrying the subject
       content, wherever it sits, and give it the same flush treatment as a first-child cell. */
    .tc-leads-grid .mud-table-body tr:not(:has(.tc-child-row-cell)) > td:has(.tc-subject-cell) {
        display: table-cell !important;
        padding: 0 !important;
    }

    /* Right-aligned "total" beside the title on the subject row */
    .tc-subject-total {
        margin-left: auto;
        flex-shrink: 0;
        font-weight: 700;
        font-size: .8125rem;
        color: #313a46;
        padding-right: .4rem;
        white-space: nowrap;
    }

    /* Hide the entire thead on mobile � we replace it with our own bar */
    .tc-leads-grid .mud-table-head {
        display: none !important;
    }

    /* Suppress MudBlazor data-label::before on all cells */
    .tc-leads-grid .mud-table-body .mud-table-cell::before {
        display: none !important;
        content: none !important;
    }

    /* Our custom mobile column header bar � full row is clickable */
    .tc-mobile-header-bar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: .55rem .6rem;
        border-bottom: 1px solid #e7e9eb;
        font-family: "Montserrat", sans-serif;
        font-weight: 700;
        font-size: .8125rem;
        color: #313a46;
        cursor: pointer;
        user-select: none;
    }

    .tc-mobile-header-bar:hover { background: rgba(24,138,226,.03); }

    /* Chevron aligned to match trash icon height (32px MudIconButton) */
    .tc-mobile-sort-icon {
        font-size: 1.1rem;
        color: #adb5bd;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tc-mobile-header-bar:hover .tc-mobile-sort-icon { color: #4c4c5c; }

    /* Show expanded child row only when expanded */
    .tc-leads-grid .mud-table-body tr:has(.tc-child-expanded) {
        display: table-row !important;
        cursor: default;
    }

    /* Strip ALL padding from the child row td MudBlazor generates */
    .tc-leads-grid .mud-table-body tr:has(.tc-child-expanded) td,
    .tc-leads-grid .mud-table-body tr:has(.tc-child-expanded) td > * {
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        max-height: none !important;
        background-color: #fff !important;
        border-bottom: 2px solid #e7e9eb !important;
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    /* Subject cell: icon | name | delete � flush to left edge */
    .tc-leads-grid .mud-table-body td:first-child {
        padding: 0 !important;
    }

    .tc-subject-cell {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 0 .6rem 0 .5rem;
    }

    /* Mobile detail block � flush to left */
    .tc-mobile-detail {
        padding: 0;
        width: 100%;
    }

    .tc-mobile-detail__row {
        display: flex;
        align-items: baseline;
        gap: 12px;
        padding: .45rem .6rem .45rem .5rem;
        border-bottom: 1px solid rgba(231,233,235,.7);
        font-size: .8125rem;
    }

    .tc-mobile-detail__row:last-child {
        border-bottom: none;
    }
}

/* ===== Mobile detail expansion � Zircos dtr-details style ===== */
.tc-mobile-detail {
    padding: .5rem 1rem .5rem 2.5rem;
    background: #f8f9fa;
    border-top: 1px solid #e7e9eb;
}

.tc-mobile-detail__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: .3rem 0;
    border-bottom: 1px solid rgba(231,233,235,.6);
    font-size: .8125rem;
    font-family: "Open Sans", sans-serif;
}

.tc-mobile-detail__row:last-child {
    border-bottom: none;
}

.tc-mobile-detail__label {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    min-width: 80px;
    flex-shrink: 0;
}

.tc-mobile-detail__value {
    color: #4c4c5c;
}

.hidden {
    display: none !important;
}

.pull-right {
    float: right;
}

.text-right {
    text-align: right;
}

form h4 {
    font-size: 20px;
}

.login-logo {
    background: url(images/emr-brief-logo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 120px;
    height: 59px;
    opacity: 1;
    margin-top: 0px;
    margin-left: 5px;
}

.gradient-background {
    background-image: linear-gradient(169deg, #0a4b7d 0%, #8cc63f 90%);
    height: 100vh;
    position: sticky;
    top: 0;
}

.login-logo {
    margin: 25px auto;
    width: 170px;
}

.flex-centered-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-wrapper {
    margin-top: -155px;
}

    .login-wrapper form {
        background: #FFFFFF;
        padding: 20px;
        border-radius: 5px;
    }

.user-menu {
    padding: 0;
    vertical-align: top;
    margin-top: -19px;
    margin-right: 5px;
}

.sidebar {
    z-index: 1;
    background-image: linear-gradient(180deg, #0a4b7d 18%, #8cc63f 120%) !important;
}

/* ===== MudBlazor DatePicker popover � force light theme regardless of Zircos dark vars ===== */
.mud-picker,
.mud-picker-content,
.mud-picker-container {
    background-color: #fff !important;
    color: #212529 !important;
    border-radius: 6px !important;
}

.mud-popover.mud-popover-open {
    background-color: #fff !important;
    color: #212529 !important;
}

.mud-picker-calendar-header,
.mud-picker-month-selection,
.mud-picker-year-selection {
    background-color: #fff !important;
    color: #212529 !important;
}

.mud-picker-calendar-header-switch,
.mud-picker-calendar-header-transition,
.mud-picker-calendar-content {
    background-color: #fff !important;
    color: #212529 !important;
}

.mud-day button,
.mud-picker-calendar-day {
    color: #212529 !important;
}

.mud-button-root.mud-icon-button.mud-ripple.mud-ripple-icon {
    color: #4c4c5c !important;
}

.mud-picker .mud-button-month,

/* ===== Detail Page Layout ===== */

.tc-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: 1rem 0 .75rem;
    border-bottom: 1px solid #e5e8ef;
    margin-bottom: .25rem;
}

.tc-detail-header__title h4 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #2c2c3e;
}

.tc-detail-header__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.tc-detail-status-select {
    width: 220px;
    min-width: 160px;
}

.tc-detail-tabs .nav-link {
    font-size: .875rem;
    font-weight: 500;
    color: #4c4c5c;
    padding: .5rem .9rem;
}

.tc-detail-tabs .nav-link.active {
    color: #3b5de7;
    font-weight: 600;
    border-bottom-color: #3b5de7;
}

.tc-detail-tab-content {
    padding-top: .5rem;
}

/* Pill / pushed-button tab strip (Portal Content sub-tabs) */
.tc-pill-tabs {
    border-bottom: 0;
    gap: .4rem;
    flex-wrap: wrap;
    background: #f2f4f7;
    padding: .4rem;
    border-radius: .6rem;
}

.tc-pill-tabs .nav-link {
    font-size: .8125rem;
    font-weight: 500;
    color: #4c4c5c;
    padding: .4rem .8rem;
    border: 1px solid #e3e6ef;
    border-radius: .45rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 23, 39, .04);
    transition: all .15s ease;
}

.tc-pill-tabs .nav-link:hover {
    color: #3b5de7;
    border-color: #c7d2f7;
    transform: translateY(-1px);
}

.tc-pill-tabs .nav-link.active {
    color: #fff;
    font-weight: 600;
    background: #3b5de7;
    border-color: #3b5de7;
    box-shadow: 0 2px 6px rgba(59, 93, 231, .35);
    transform: translateY(0);
}

/* Dashboard tabs — sticky + mobile scroll */
.tc-dashboard-tabs-wrap {
    position: sticky;
    top: 70px;
    z-index: 98;
    background: var(--ct-body-bg, #f2f4f7);
    margin: 0 -12px;
    padding: 0 12px;
}

@media (max-width: 767px) {
    /* Date preset menu: prevent right-edge overflow on narrow phones.
       Flip anchor to right:0 so the menu opens leftward when the button
       is near the right side of the viewport. */
    .tc-date-preset-menu {
        left: auto;
        right: 0;
        max-width: calc(100vw - 16px);
    }

    .tc-dashboard-tabs-wrap {
        box-shadow: 0 2px 6px rgba(0,0,0,.09);
    }

    .tc-dashboard-tabs-wrap #dashboard-tab {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 1px;
    }

    .tc-dashboard-tabs-wrap #dashboard-tab::-webkit-scrollbar {
        display: none;
    }

    .tc-dashboard-tabs-wrap #dashboard-tab .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: .8rem;
        padding: .45rem .7rem;
    }

    /* Gradient edge fade — hints at hidden tabs on either side */
    .tc-dashboard-tabs-wrap::before,
    .tc-dashboard-tabs-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 4px; /* stop above the border line */
        width: 28px;
        pointer-events: none;
        z-index: 2;
    }

    .tc-dashboard-tabs-wrap::before {
        left: 0;
        background: linear-gradient(to right, var(--ct-body-bg, #f2f4f7) 20%, transparent);
    }

    .tc-dashboard-tabs-wrap::after {
        right: 0;
        background: linear-gradient(to left, var(--ct-body-bg, #f2f4f7) 20%, transparent);
    }

    /* Slide animation for tab content on mobile */
    #dashboard-tabContent[data-slide-dir] .tab-pane.fade.show.active {
        animation-duration: .2s;
        animation-timing-function: ease-out;
        animation-fill-mode: both;
    }

    #dashboard-tabContent[data-slide-dir="1"] .tab-pane.fade.show.active {
        animation-name: tc-tab-slide-from-right;
    }

    #dashboard-tabContent[data-slide-dir="-1"] .tab-pane.fade.show.active {
        animation-name: tc-tab-slide-from-left;
    }
}

@keyframes tc-tab-slide-from-right {
    from { transform: translateX(22px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes tc-tab-slide-from-left {
    from { transform: translateX(-22px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

/* REPORTS PAGE */
.tc-report-list-card {
    overflow: hidden;
}

.tc-report-list {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    border-top: 0;
}

.tc-report-item {
    border: 0;
    border-bottom: 1px solid #f1f3f6;
    padding: .75rem 1rem;
    text-align: left;
    transition: background-color .15s ease;
}

.tc-report-item:last-child {
    border-bottom: 0;
}

/* Striped rows — alternate report items. Exclude the selected item (its --active
   class is lower specificity than :nth-of-type, so without this the stripe would
   override the selected colour); :hover follows in source order and wins on ties. */
.tc-report-item:nth-of-type(even):not(.tc-report-item--active) {
    background-color: rgba(238, 242, 247, 0.45);
}

.tc-report-item:hover {
    background: #f7f8fc;
}

.tc-report-item--active {
    background: #eef0ff;
}

.tc-report-item--active:hover {
    background: #e6e9ff;
}

.tc-report-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f3f6;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.tc-report-item-icon--active {
    background: #727cf5;
    color: #fff;
}

/* Lead Activity Log (Dashboard) — table layout.
   Striping and base hover come from the global .table even-row rule (lines 113–120).
   Only table-specific overrides live here. */

/* Stronger hover tint on clickable rows to signal interactivity */
.table > tbody > tr.tc-activity-row--clickable:hover > * {
    --ct-table-bg-state: rgba(24, 138, 226, 0.10);
}
/* Clickable rows — pointer cursor + WCAG focus ring */
tr.tc-activity-row--clickable {
    cursor: pointer;
    user-select: none;
}
tr.tc-activity-row--clickable:focus-visible {
    outline: 2px solid #188ae2;
    outline-offset: -2px;
}
/* Worklist Call Queue — clickable row navigates to lead details */
a.tc-worklist-row--clickable {
    cursor: pointer;
    user-select: none;
    display: flex;
}
a.tc-worklist-row--clickable:hover {
    background: rgba(24, 138, 226, 0.06);
}
a.tc-worklist-row--clickable:focus-visible {
    outline: 2px solid #188ae2;
    outline-offset: -2px;
}
/* Note cell — constrain so long notes don't blow out the column */
.tc-activity-note-cell {
    max-width: 200px;
}
/* Right-hand meta column (time + chevron) */
.tc-activity-row-meta {
    min-width: 90px;
}
/* Thin rows — tighten vertical padding on body + header cells */
.tc-activity-table > tbody > tr > td {
    padding-top: .3rem;
    padding-bottom: .3rem;
}
.tc-activity-table > thead > tr > th {
    padding-top: .35rem;
    padding-bottom: .35rem;
}
/* Patient deep-link inside an activity row — inherit row color, reveal underline on interaction */
.tc-patient-link {
    color: inherit;
    text-decoration: none;
}
.tc-patient-link:hover,
.tc-patient-link:focus-visible {
    color: var(--bs-link-color, #727cf5);
    text-decoration: underline;
    outline: none;
}

.tc-report-viewer-card {
    height: calc(100vh - 210px);
    min-height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tc-report-viewer-body {
    flex: 1;
    min-height: 0;
    background: #525659;
    position: relative;
}

.tc-report-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 991px) {
    .tc-report-viewer-card {
        height: 720px;
        min-height: 480px;
    }
    .tc-report-list {
        max-height: 380px;
    }
}

/* Info cards */
.tc-info-card {
    border: 1px solid #e5e8ef;
    border-radius: .5rem;
    box-shadow: 0 1px 4px rgba(44,44,62,.06);
}

.tc-info-card__header {
    background: #f7f8fc;
    border-bottom: 1px solid #e5e8ef;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
    padding: .6rem 1rem;
    border-radius: .5rem .5rem 0 0;
}

/* Definition list inside info cards */
.tc-info-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem .75rem;
    margin: 0;
    font-size: .875rem;
}

.tc-info-dl dt {
    font-weight: 600;
    color: #4c4c5c;
    white-space: nowrap;
}

.tc-info-dl dd {
    margin: 0;
    color: #2c2c3e;
    word-break: break-word;
}

/* Screening Q&A */
.tc-screening-item {
    border-bottom: 1px solid #f0f1f5;
    padding: .5rem 0;
}

.tc-screening-item:last-child { border-bottom: none; }

.tc-screening-q {
    font-size: .83rem;
    font-weight: 600;
    color: #2c2c3e;
    margin-bottom: .15rem;
}

.tc-screening-a {
    font-size: .875rem;
    color: #4c4c5c;
    margin: 0;
}

/* Tables inside detail cards */
.tc-detail-table thead th {
    background: #f7f8fc;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    border-bottom: 1px solid #e5e8ef;
    padding: .6rem 1rem;
}

.tc-detail-table tbody td {
    font-size: .875rem;
    padding: .6rem 1rem;
    color: #2c2c3e;
    border-bottom: 1px solid #f0f1f5;
    vertical-align: top;
}

.tc-detail-table tbody tr:last-child td { border-bottom: none; }

.tc-detail-table .tc-col-date {
    width: 11rem;
    white-space: nowrap;
}

/* Mobile responsiveness for detail header */
@media (max-width: 767px) {
    .tc-detail-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .tc-detail-header__actions {
        margin-left: 0;
        width: 100%;
    }

    .tc-detail-status-select {
        width: 100%;
    }

    .tc-detail-header__actions .btn {
        flex: 1;
    }
}

.mud-picker .mud-picker-calendar-header-content {
    color: #212529 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: .875rem !important;
}

/* Selected day highlight */
.mud-day.mud-selected button,
.mud-day.mud-current button {
    color: #fff !important;
}

/* Year/month picker items */
.mud-picker-year-button,
.mud-picker-month-btn {
    color: #212529 !important;
}

.mud-picker-year-button.mud-picker-year-selected,
.mud-picker-month-btn.mud-picker-month-selected {
    color: #fff !important;
}

.hidden {
    display: none !important;
}

.nav-item {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

/* ?? Mobile sidebar: always overlay, never push content ?? */
@media (max-width: 1140px) {
    .sidenav-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        /* iOS Safari: 100vh extends behind the bottom browser toolbar, hiding the
           last menu items (Settings) + footer. dvh tracks the *visible* viewport. */
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 1055 !important;
        transform: translateX(-100%) !important;
        transition: transform .25s ease-in-out !important;
        margin-left: 0 !important;
        opacity: 1 !important;
    }

    /* Scroll area must also follow the visible viewport, not 100vh */
    .sidenav-menu [data-simplebar] {
        height: calc(100vh - var(--ct-topbar-height)) !important;
        height: calc(100dvh - var(--ct-topbar-height)) !important;
    }

    /* Clear the Safari toolbar / home indicator so the footer never sits under chrome */
    .sidenav-menu > .position-absolute.bottom-0 {
        padding-bottom: calc(.5rem + env(safe-area-inset-bottom)) !important;
    }

    html.sidebar-enable .sidenav-menu {
        transform: translateX(0) !important;
    }

    .content-page {
        margin-left: 0 !important;
    }
}

.tall-textarea {
    height: 200px;  
}
.medium-textarea {
    height: 155px;
}

.tab-pane {
    padding: 25px 5px;
}

/* STUDY STEPPER */

.tc-study-stepper {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding: 4px 0 2px;
}

.tc-stepper-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Connector line: border-to-border (18px = circle radius) */
.tc-stepper-item:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 17px;
    left: calc(-50% + 18px);
    right: calc(50% + 18px);
    height: 2px;
    background-color: #e2e5e8;
    z-index: 0;
}

.tc-stepper-item.completed:not(:first-child)::before,
.tc-stepper-item.active:not(:first-child)::before {
    background-color: var(--stepper-color);
}

.tc-stepper-node {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #ced4da;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #98a6ad;
    position: relative;
    z-index: 1;
    margin-bottom: 7px;
}

.tc-stepper-item.completed .tc-stepper-node,
.tc-stepper-item.active .tc-stepper-node {
    background-color: var(--stepper-color);
    border-color: var(--stepper-color);
    color: var(--stepper-text);
}

.tc-stepper-label {
    font-size: 11px;
    text-align: center;
    color: #98a6ad;
    line-height: 1.3;
    max-width: 80px;
    word-break: break-word;
}

@media (max-width: 767px) {
    .tc-stepper-label {
        display: none;
    }
}

.tc-stepper-item.active .tc-stepper-label {
    color: #343a40;
    font-weight: 600;
}

@media only screen and (max-width: 564px) {
    .user-menu {
        margin-right: 60px;
    }
}
/* Soft variant buttons: restore brand bg/color when disabled (vendor overrides to grey) */
.btn-soft-danger:disabled, .btn-soft-danger.disabled { background-color: rgba(var(--ct-danger-rgb), .1) !important; color: var(--ct-danger) !important; border-color: transparent !important; }
.btn-soft-success:disabled, .btn-soft-success.disabled { background-color: rgba(var(--ct-success-rgb), .1) !important; color: var(--ct-success) !important; border-color: transparent !important; }
.btn-soft-primary:disabled, .btn-soft-primary.disabled { background-color: rgba(var(--ct-primary-rgb), .1) !important; color: var(--ct-primary) !important; border-color: transparent !important; }

/* Sidebar scroll clearance: the "Powered by" footer is position:absolute bottom:0
   and overlays the scroll content, hiding the last nav item (Settings) behind it.
   Reserve bottom padding on the scrolled list (≥ footer height) so the last item
   can scroll clear, and make the informational footer non-interactive so it never
   intercepts taps on the items beneath it (ADA target-size safety). */
.sidenav-menu [data-simplebar] .side-nav {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

.sidenav-menu > .position-absolute.bottom-0 {
    pointer-events: none;
    background-color: var(--ct-menu-bg);
}

/* Nav menu active state � persists after focus/hover ends */
.side-nav .side-nav-item .side-nav-link:active,
.side-nav .side-nav-item .side-nav-link:focus,
.side-nav .side-nav-item .side-nav-link:hover,
.side-nav .side-nav-item.active > .side-nav-link,
.side-nav .side-nav-item .side-nav-link.active {
    color: var(--ct-menu-item-active-color) !important;
    background-color: var(--ct-menu-item-active-bg) !important;
}

/* ===== Global Communications panel (staff, all pages) ===== */
/* Topbar trigger button + unanswered badge */
.tc-comm-trigger { position: relative; }
.tc-comm-trigger-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #dc3545;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    font-weight: 700;
    text-align: center;
}
@keyframes tcCommFlash {
    0%, 100% { transform: scale(1); }
    25%, 75% { transform: scale(1.18); }
    50%      { transform: scale(1); }
}
.tc-comm-trigger--flash { animation: tcCommFlash .7s ease-in-out 3; }

/* Drawer pushes the page content left (not a floating overlay).
   Zircos .wrapper is width:100%, so margin-right just overflows — shrink the width instead. */
.wrapper { transition: width .28s cubic-bezier(.4,0,.2,1); }
body:has(.tc-comm-panel--open) .wrapper { width: calc(100% - 370px); }
@media (max-width: 767.98px) {
    body:has(.tc-comm-panel--open) .wrapper { width: 100%; }   /* mobile: overlay, no push */
}

.tc-comm-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1046;
    width: 370px;
    max-width: 92vw;
    height: 100vh;
    background: var(--ct-card-bg, #fff);
    border-left: 1px solid var(--ct-border-color, #e5e7eb);
    box-shadow: -6px 0 22px rgba(0,0,0,.16);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.tc-comm-panel--open { transform: translateX(0); }
.tc-comm-panel-head {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--ct-border-color, #e5e7eb);
}
.tc-comm-panel-body { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; }
/* "No conversations" — vertically centered in the panel body */
.tc-comm-empty { margin: auto; padding: 1.5rem; }

.tc-comm-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: transparent;
    border-bottom: 1px solid var(--ct-border-color, #f1f1f1);
}
.tc-comm-row:hover { background: rgba(0,0,0,.03); }

/* Inner select button */
.tc-comm-row-select {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .5rem .65rem 1rem;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

/* Per-row trash — hidden until row hover, red on button hover */
.tc-comm-row-del {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    border: 0;
    background: transparent;
    color: #adb5bd;
    opacity: 0;
    font-size: 13px;
    cursor: pointer;
    transition: color .15s, opacity .15s;
    padding: 0 .25rem;
}
.tc-comm-row:hover .tc-comm-row-del { opacity: 1; }
.tc-comm-row-del:hover { color: #dc3545; }

.tc-comm-row-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* End conversation button bar (below reply input in panel) */
.tc-comm-end-bar {
    padding: .5rem .75rem .6rem;
    border-top: 1px solid var(--ct-border-color, #e5e7eb);
    margin-top: .25rem;
}

.tc-comm-thread-head {
    display: flex; align-items: center; padding: .6rem 1rem;
    border-bottom: 1px solid var(--ct-border-color, #e5e7eb);
}
.tc-comm-thread { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.tc-comm-bubble-row { display: flex; }
.tc-comm-bubble-row--mine { justify-content: flex-end; }
.tc-comm-bubble {
    max-width: 80%;
    padding: .45rem .7rem;
    border-radius: 12px;
    background: var(--ct-light, #f1f3f5);
    font-size: 13px;
}
.tc-comm-bubble--mine { background: var(--ct-primary, #0d6efd); color: #fff; }
.tc-comm-bubble-sender { display: block; font-size: 10px; font-weight: 700; opacity: .7; margin-bottom: 1px; }
.tc-comm-bubble-text { display: block; }
.tc-comm-bubble-time { display: block; font-size: 9px; opacity: .6; margin-top: 2px; text-align: right; }
.tc-comm-reply {
    display: flex; gap: .4rem; padding: .6rem .75rem;
    border-top: 1px solid var(--ct-border-color, #e5e7eb);
    align-items: center;
}
/* visible keyboard focus (WCAG 2.4.7) */
.tc-comm-tab:focus-visible,
.tc-comm-row-select:focus-visible,
.tc-comm-row-del:focus-visible,
.tc-comm-thread-head button:focus-visible,
.tc-comm-reply input:focus-visible,
.tc-comm-reply textarea:focus-visible,
.tc-comm-reply button:focus-visible,
.tc-comm-end-bar button:focus-visible,
.tc-comms-item-select:focus-visible,
.tc-comms-item-del:focus-visible {
    outline: 3px solid var(--ct-primary, #0d6efd);
    outline-offset: 2px;
}

/* /communications empty state (no conversation selected) */
.tc-comms-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1 1 0;
    padding: 2rem;
}
.tc-comms-empty-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ct-primary, #6571ff) 12%, transparent);
    color: var(--ct-primary, #6571ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin-bottom: 1rem;
}

/* ---- Ended-conversation notice (panel + /communications page) ---- */
/* Panel thread: sits between the message log and the (disabled) reply form */
.tc-comm-ended-notice {
    flex-shrink: 0;
    padding: 10px 16px;
    text-align: center;
    color: #6b7280;
    font-size: 12px;
    background: #f8f9fb;
    border-top: 1px solid var(--ct-border-color, #e9ecef);
}
/* /communications page: fixed bar above the reply box (consistent with the panel) */
.tc-comms-ended-notice {
    flex-shrink: 0;
    padding: 10px 16px;
    text-align: center;
    color: #6b7280;
    font-size: 12px;
    background: #f8f9fb;
    border-top: 1px solid var(--ct-border-color, #e9ecef);
}