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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.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."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* AI Home */

body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #1b1b1f;
    background: #fafafa;
    -webkit-font-smoothing: antialiased;
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: #1b1b3a;
    color: white;
}

.topnav .brand {
    font-weight: 700;
    font-size: 1.1rem;
    color: white;
    text-decoration: none;
}

.topnav nav {
    display: flex;
    gap: 1.25rem;
}

.topnav nav a {
    color: #d8d8f0;
    text-decoration: none;
}

.topnav nav a.active {
    color: white;
    font-weight: 600;
}

.topnav nav button.nav-link-button {
    color: #d8d8f0;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.topnav nav button.nav-link-button:hover {
    color: white;
}

main {
    padding: 1.5rem;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.muted {
    color: #666;
}

/* FocusOnNavigate focuses the page's h1 for accessibility; keep that
   behavior but drop the default browser focus ring, which reads as a
   rendering glitch rather than an intentional a11y cue here. */
h1:focus {
    outline: none;
}

.error {
    color: #b3261e;
}

.btn-primary, .btn-secondary {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.95rem;
    font-family: inherit;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, opacity 0.12s ease;
}

.btn-primary:hover:not(:disabled), .btn-secondary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.btn-primary:active:not(:disabled), .btn-secondary:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
    box-shadow: none;
}

.btn-primary:disabled, .btn-secondary:disabled {
    opacity: 0.5;
    cursor: default;
}

.btn-primary {
    background: #1b6ec2;
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: #1861ac;
}

.btn-secondary {
    background: #eee;
    color: #1b1b1f;
}

.btn-secondary:hover:not(:disabled) {
    background: #e2e2e2;
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary, .btn-secondary {
        transition: none;
    }

    .btn-primary:hover:not(:disabled), .btn-secondary:hover:not(:disabled),
    .btn-primary:active:not(:disabled), .btn-secondary:active:not(:disabled) {
        transform: none;
    }
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th, .data-table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e0e0e0;
}

.data-table th {
    /* Headers are short, fixed labels ("Subject", "Outcome", ...) — letting
       them wrap onto a squeezed narrow column turns them into an unreadable
       vertical letter-stack. Only data cells (which can hold a genuinely
       long value, e.g. an autogenerated Exchange system-mailbox address)
       need to wrap; see .table-scroll below for how narrow tables cope
       instead of squeezing headers. */
    white-space: nowrap;
}

.data-table td {
    overflow-wrap: anywhere;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
}

.sales-routing-table {
    min-width: 62rem;
}

.landing {
    text-align: center;
    padding-top: 3rem;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.25rem;
}

.chat-header-avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1b1b3a, #1b6ec2);
    font-size: 1.5rem;
    box-shadow: 0 4px 14px rgba(27, 110, 194, 0.25);
}

.chat-header h1 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
}

.chat-header p {
    margin: 0.15rem 0 0;
}

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
    min-height: 200px;
    max-height: 65vh;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding: 0.75rem;
    background: #f6f7fb;
    border-radius: 16px;
    border: 1px solid #ececec;
}

.chat-empty-state {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    background: white;
    border: 1px dashed #d5d5e0;
    border-radius: 12px;
}

.chat-empty-title {
    margin: 0 0 0.2rem 0;
    font-weight: 600;
}

.chat-empty-text {
    margin: 0;
    font-size: 0.85rem;
    color: #666;
}

.chat-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 82%;
    animation: chat-message-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes chat-message-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chat-row-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-row-assistant {
    align-self: flex-start;
}

.chat-avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 0.95rem;
    line-height: 1;
}

.chat-avatar-user {
    background: #1b6ec2;
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
}

.chat-avatar-assistant {
    background: linear-gradient(135deg, #1b1b3a, #1b6ec2);
}

.chat-message {
    padding: 0.55rem 0.85rem;
    border-radius: 14px;
    line-height: 1.5;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.chat-row:hover .chat-message {
    box-shadow: 0 3px 12px rgba(20, 20, 40, 0.08);
}

.chat-message-user {
    background: #1b6ec2;
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-message-assistant {
    background: white;
    border: 1px solid #e7e7ef;
    border-bottom-left-radius: 4px;
}

.chat-content p {
    margin: 0 0 0.5rem;
}

.chat-content p:last-child {
    margin-bottom: 0;
}

.chat-content ol, .chat-content ul {
    margin: 0.25rem 0 0.5rem;
    padding-left: 1.25rem;
}

.chat-content ol:last-child, .chat-content ul:last-child {
    margin-bottom: 0;
}

.chat-content li {
    margin-bottom: 0.3rem;
}

.chat-content li:last-child {
    margin-bottom: 0;
}

.chat-content strong {
    font-weight: 700;
}

.chat-message .open-email-link {
    display: inline-block;
    margin-top: 0.4rem;
}

.chat-message-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}

.chat-role {
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.75;
}

.chat-timestamp {
    font-size: 0.68rem;
    opacity: 0.55;
}

/* Moving-light ring, built to animate on every browser rather than only
   ones with CSS Houdini's @property (Firefox didn't gain that until
   version 128, mid-2024 — anyone on an older Firefox, or any other browser
   without it, would see the gradient rendered but frozen, since an
   unregistered custom property can't be interpolated: the keyframe just
   snaps straight to its end value with no animation in between). A plain
   `transform: rotate()` on a generated layer has no such gap — it's been
   animatable everywhere CSS animations exist at all.

   That still isn't quite enough on its own, though: this bubble is wide
   and short, not square, and *rotating a rectangle* swings its corners
   well outside its own footprint at 45/135/etc degrees (a first pass at
   this literally painted a diagonal bar shooting out of the bubble). The
   fix is the standard one — rotate a large, fixed-size *square* instead
   of the bubble's own rectangular shape, and let the wrapper's own
   overflow:hidden do the clipping down to the rounded-rect ring, so the
   spinner's shape never has to match the content's shape at all. */
.chat-message-thinking-wrap {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 16px;
    padding: 2px;
    box-shadow: 0 4px 20px rgba(27, 110, 194, 0.25);
}

.chat-message-thinking-wrap::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    /* Large enough to fully cover any realistic bubble size at every
       rotation angle — the square only needs to exceed the wrap's own
       diagonal, and this clears that by a wide margin. */
    width: 600px;
    height: 600px;
    background: conic-gradient(from 0deg,
        #1b1b3a 0%, #1b6ec2 28%, #6ec6ff 46%, #ffffff 50%, #6ec6ff 54%, #1b6ec2 72%, #1b1b3a 100%);
    animation: chat-ring-spin 2.2s linear infinite;
}

@keyframes chat-ring-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.chat-message-thinking {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-width: 210px;
    padding: 0.65rem 1.1rem;
    border-radius: 14px;
    background: white;
}

/* Pulsing glow ring on Merlin's avatar while a reply is in flight — an
   opacity/box-shadow/transform animation only, so it's guaranteed to
   actually play (unlike a background-position text shimmer, which silently
   never animates in browsers that don't fill the clipped text via
   -webkit-text-fill-color). */
.chat-avatar-thinking {
    animation: chat-avatar-pulse 1.6s ease-in-out infinite;
}

@keyframes chat-avatar-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(27, 110, 194, 0.45);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(27, 110, 194, 0);
        transform: scale(1.08);
    }
}

.chat-thinking-label {
    font-size: 0.85rem;
    color: #555;
    animation: chat-label-pulse 1.6s ease-in-out infinite;
}

@keyframes chat-label-pulse {
    0%, 100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

.chat-thinking-dots {
    display: inline-flex;
    gap: 3px;
}

.chat-thinking-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #1b6ec2;
    animation: chat-dot-bounce 1.1s ease-in-out infinite;
}

.chat-thinking-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.chat-thinking-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes chat-dot-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* The ring spinners are left animating even here: they're the only signal
       that a request is in flight, not decoration, so muting them under
       reduced-motion would leave a frozen "is this stuck?" bubble instead of
       a quieter one. Everything purely cosmetic still gets turned off. */
    .chat-row, .chat-avatar-thinking, .chat-thinking-label, .chat-thinking-dots span {
        animation: none;
    }

    .chat-row:hover .chat-message {
        box-shadow: none;
    }
}

.chat-input {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

/* <textarea> can't carry a ::before (form controls don't support generated
   content in any evergreen browser), so the moving-light ring lives on a
   wrapper div instead — same fixed-square-spinner-clipped-by-overflow
   technique as the "thinking" bubble above (a rotating rectangle, and the
   composer is a far more extreme rectangle than that bubble, swings its
   corners well outside itself — see the comment up there), shown through
   a 2px gap around the textarea via :focus-within (a plain, universally-
   supported pseudo-class — no JS needed to track focus state). */
.chat-input-box-wrap {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 1;
    border-radius: 22px;
    padding: 2px;
    background: #ccc;
    transition: background-color 0.15s;
}

.chat-input-box-wrap::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 1600px;
    height: 1600px;
    background: conic-gradient(from 0deg,
        #1b1b3a 0%, #1b6ec2 28%, #6ec6ff 46%, #ffffff 50%, #6ec6ff 54%, #1b6ec2 72%, #1b1b3a 100%);
    opacity: 0;
}

.chat-input-box-wrap:focus-within {
    background: transparent;
}

.chat-input-box-wrap:focus-within::before {
    opacity: 1;
    animation: chat-ring-spin 2.2s linear infinite;
    box-shadow: 0 4px 20px rgba(27, 110, 194, 0.25);
}

.chat-input-box-wrap textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 1rem;
    border-radius: 20px;
    border: none;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    resize: none;
    min-height: 2.6rem;
    max-height: 160px;
    overflow-y: auto;
    background: white;
}

.chat-input-box-wrap textarea:focus {
    outline: none;
}

.chat-input .btn-primary {
    border-radius: 20px;
    padding: 0.65rem 1.4rem;
    flex-shrink: 0;
}

/* Dashboard: status palette (fixed, never reused for categorical data) */

:root {
    --status-good: #0ca30c;
    --status-good-surface: #e6f6e6;
    --status-warning: #b8790a;
    --status-warning-surface: #fdf1da;
    --status-serious: #c1502a;
    --status-serious-surface: #fbe6dc;
    --status-critical: #d03b3b;
    --status-critical-surface: #fbe2e2;
    --status-neutral: #1b6ec2;
    --status-neutral-surface: #e5f0fa;
}

.ai-summary {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    background: linear-gradient(135deg, #1b1b3a, #2f2f6b);
    color: white;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.ai-summary-icon {
    font-size: 1.4rem;
    line-height: 1.4rem;
}

.ai-summary-label {
    margin: 0 0 0.15rem 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #c9c9f2;
}

.ai-summary-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
}

.stat-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
    .stat-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.stat-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: #f2f2f2;
    border: none;
    border-left: 4px solid transparent;
    /* These render as <button> so the stat tiles are keyboard/AT operable as
       filters — reset the button chrome back to matching the old <div>s. */
    font: inherit;
    text-align: left;
    cursor: pointer;
    outline-offset: 2px;
}

.stat-tile:hover {
    filter: brightness(0.97);
}

.stat-tile-selected {
    box-shadow: 0 0 0 2px rgba(27, 110, 194, 0.5) inset;
}

.link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #1b6ec2;
    text-decoration: underline;
    cursor: pointer;
}

.stat-tile-icon {
    font-size: 1.1rem;
}

.stat-tile-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.stat-tile-label {
    font-size: 0.8rem;
    color: #555;
}

.stat-tile-critical {
    background: var(--status-critical-surface);
    border-left-color: var(--status-critical);
}

.stat-tile-critical .stat-tile-value {
    color: var(--status-critical);
}

.stat-tile-warning {
    background: var(--status-warning-surface);
    border-left-color: var(--status-warning);
}

.stat-tile-warning .stat-tile-value {
    color: var(--status-warning);
}

.stat-tile-neutral {
    background: var(--status-neutral-surface);
    border-left-color: var(--status-neutral);
}

.stat-tile-neutral .stat-tile-value {
    color: var(--status-neutral);
}

.stat-tile-good {
    background: var(--status-good-surface);
    border-left-color: var(--status-good);
}

.stat-tile-good .stat-tile-value {
    color: var(--status-good);
}

.followup-group {
    margin-bottom: 1.5rem;
}

.followup-group-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    margin: 0 0 0.6rem 0;
}

.followup-group-count {
    font-size: 0.8rem;
    color: #777;
    font-weight: 400;
}

.status-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: inline-block;
}

.status-dot-critical {
    background: var(--status-critical);
}

.status-dot-warning {
    background: var(--status-warning);
}

.status-dot-neutral {
    background: var(--status-neutral);
}

.status-dot-good {
    background: var(--status-good);
}

.followup-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.followup-card {
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    border-left: 4px solid transparent;
    padding: 0.75rem 0.9rem;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.followup-card-critical {
    border-left-color: var(--status-critical);
}

.followup-card-warning {
    border-left-color: var(--status-warning);
}

.followup-card-neutral {
    border-left-color: var(--status-neutral);
}

.followup-card-good {
    border-left-color: var(--status-good);
}

.followup-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.followup-card-subject {
    font-weight: 600;
}

.followup-card-due {
    font-size: 0.78rem;
    color: #666;
    white-space: nowrap;
    font-weight: 600;
}

.followup-card-due-critical {
    color: var(--status-critical);
}

.followup-card-due-warning {
    color: var(--status-warning);
}

.followup-card-due-neutral {
    color: #666;
    font-weight: 400;
}

.followup-card-sender {
    margin: 0;
    font-size: 0.78rem;
    color: #777;
}

.followup-card-summary {
    margin: 0;
    font-size: 0.88rem;
    color: #444;
    flex-grow: 1;
}

.followup-card-sync {
    display: flex;
    gap: 0.6rem;
}

.sync-badge {
    font-size: 0.72rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #f2f2f2;
    color: #888;
    cursor: default;
}

.sync-badge-on {
    background: var(--status-good-surface);
    color: var(--status-good);
}

.followup-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem 1rem;
}

.followup-card-actions .mark-done-link {
    margin-left: auto;
}

.ask-ai-link,
.open-email-link {
    font-size: 0.82rem;
    color: #1b6ec2;
    text-decoration: none;
}

.ask-ai-link:hover,
.open-email-link:hover {
    text-decoration: underline;
}

.mark-done-link {
    font-size: 0.82rem;
    color: var(--status-good);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

.mark-done-link:hover:not(:disabled) {
    text-decoration: underline;
}

.mark-done-link:disabled {
    color: #999;
    cursor: default;
}

.followup-card-snoozed {
    margin: 0;
    font-size: 0.78rem;
    color: #7a5c00;
}

.followup-card-archive-status {
    margin: 0;
    font-size: 0.78rem;
    color: #777;
    font-weight: 600;
}

.followup-card-recurrence {
    margin: 0;
    font-size: 0.78rem;
    color: #1f5c8b;
    font-weight: 600;
}

.snooze-select {
    font: inherit;
    font-size: 0.82rem;
    color: #1b6ec2;
    background: none;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.15rem 0.3rem;
    cursor: pointer;
}

.snooze-select:disabled {
    color: #999;
    cursor: default;
}

.dismiss-select {
    font: inherit;
    font-size: 0.82rem;
    color: #999;
    background: none;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.15rem 0.3rem;
    cursor: pointer;
}

/* The select's own #999 (a muted "placeholder" look while closed) would
   otherwise carry into the dropdown's option list too, making the open
   menu barely readable — options get their own normal, dark text color. */
.dismiss-select option {
    color: #1b1b1f;
    background: white;
}

.dismiss-select:disabled {
    color: #ccc;
    cursor: default;
}

.track-search {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    max-width: 40rem;
}

.track-search input[type="text"] {
    flex: 1;
    padding: 0.55rem 0.85rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font: inherit;
    font-size: 0.95rem;
}

.track-result-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.track-result-actions input[type="date"] {
    padding: 0.3rem 0.4rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font: inherit;
    font-size: 0.82rem;
}

.track-result-actions input[type="text"] {
    flex: 1;
    min-width: 12rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font: inherit;
    font-size: 0.82rem;
}

.sales-routing-sync-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.sales-routing-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.sales-routing-filters label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.82rem;
    color: #555;
}

.sales-routing-filters select,
.sales-routing-filters input[type="search"] {
    padding: 0.3rem 0.5rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font: inherit;
    font-size: 0.9rem;
}

.sales-routing-pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.whoami-diagnostic {
    margin-top: 1rem;
    max-width: 40rem;
}

.whoami-diagnostic .data-table th[scope="row"] {
    width: 12rem;
    white-space: nowrap;
    vertical-align: top;
    color: #555;
    font-weight: 600;
}

.whoami-diagnostic ul {
    margin: 0;
    padding-left: 1.2rem;
}