/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-anutcujvyz],
.components-reconnect-repeated-attempt-visible[b-anutcujvyz],
.components-reconnect-failed-visible[b-anutcujvyz],
.components-pause-visible[b-anutcujvyz],
.components-resume-failed-visible[b-anutcujvyz],
.components-rejoining-animation[b-anutcujvyz] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-anutcujvyz],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-anutcujvyz],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-anutcujvyz],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-anutcujvyz],
#components-reconnect-modal.components-reconnect-retrying[b-anutcujvyz],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-anutcujvyz],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-anutcujvyz],
#components-reconnect-modal.components-reconnect-failed[b-anutcujvyz],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-anutcujvyz] {
    display: block;
}


#components-reconnect-modal[b-anutcujvyz] {
    background-color: var(--cx-surface, white);
    color: var(--cx-ink, #16171A);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: var(--cx-card-shadow-hover, 0 3px 6px 2px rgba(0, 0, 0, 0.3));
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete, background-color .2s ease, color .2s ease;
    animation: components-reconnect-modal-fadeOutOpacity-b-anutcujvyz 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-anutcujvyz 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-anutcujvyz 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-anutcujvyz]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-anutcujvyz 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-anutcujvyz {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-anutcujvyz {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-anutcujvyz {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-anutcujvyz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-anutcujvyz] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-anutcujvyz] {
    border: 0;
    background-color: var(--cx-accent, #6b9ed2);
    color: var(--cx-white, white);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-anutcujvyz] {
        background-color: var(--cx-accent-dark, #3b6ea2);
    }

    #components-reconnect-modal button:active[b-anutcujvyz] {
        background-color: var(--cx-accent, #6b9ed2);
    }

.components-rejoining-animation[b-anutcujvyz] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-anutcujvyz] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-anutcujvyz 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-anutcujvyz] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-anutcujvyz {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/TicketsLayout.razor.rz.scp.css */
.tix-shell[b-qo5vapsbyg] {
    min-height: 100vh;
    background: var(--cx-gray-100);
    color: var(--cx-ink);
    font-family: var(--cx-font);
}

.tix-topbar[b-qo5vapsbyg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 24px;
    padding: 10px 20px;
    min-height: 56px;
    /* Always a dark bar with white text, in both themes — same as .app-sidebar elsewhere in
       the app. var(--cx-ink) was wrong here: it's the body TEXT color token, which flips to
       near-white in dark mode, so this background went near-white-on-white (washed out/
       "ghosted") instead of staying dark. var(--cx-black) is a true brand constant, dark in
       both themes. */
    background: var(--cx-black);
    color: var(--cx-white);
}

.tix-brand[b-qo5vapsbyg] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
}

.tix-brand-mark[b-qo5vapsbyg] {
    font-family: var(--cx-font-display);
    font-weight: 600;
    font-size: 0.8rem;
    opacity: 0.6;
}

.tix-brand-name[b-qo5vapsbyg] {
    font-weight: 700;
    font-size: 1.05rem;
}

.tix-nav[b-qo5vapsbyg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
}

.tix-nav-link[b-qo5vapsbyg] {
    display: inline-block;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
}

.tix-nav-link:hover[b-qo5vapsbyg] {
    color: var(--cx-white);
    background: rgba(255, 255, 255, 0.08);
}

.tix-nav-link.active[b-qo5vapsbyg] {
    color: var(--cx-white);
    background: var(--cx-accent);
}

.tix-topbar-right[b-qo5vapsbyg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tix-exit[b-qo5vapsbyg] {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: 0.85rem;
}

.tix-exit:hover[b-qo5vapsbyg] {
    color: var(--cx-white);
}

.tix-content[b-qo5vapsbyg] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 60px;
}

.tix-content[b-qo5vapsbyg]  > .qa-theme > :first-child {
    margin-top: 0;
}
/* /Components/Pages/Agents/WordSearchBuilderForm.razor.rz.scp.css */
.ws-builder-row[b-sy1eewfql5] {
    display: grid;
    grid-template-columns: 110px 1fr 32px;
    gap: .4rem;
    align-items: center;
}

.ws-builder-word[b-sy1eewfql5] {
    text-transform: uppercase;
}

.ws-builder-remove[b-sy1eewfql5] {
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home-dashboard[b-1pqr1pgbof] {
    /* Room for the original 1200px-wide main column PLUS the calendar strip beside it, so the
       calendar doesn't shrink the customizable widget grid — it just uses the extra width. */
    max-width: 1580px;
}

.home-dashboard-layout[b-1pqr1pgbof] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.home-main[b-1pqr1pgbof] {
    flex: 1 1 760px;
    min-width: 0;
    max-width: 1200px;
}

/* The calendar is pinned here always, outside the customizable widget grid — it can't be hidden,
   resized or reordered away (see HomeWidgetLayoutService's HomeWidgetCatalog). */
.home-calendar-col[b-1pqr1pgbof] {
    flex: 0 0 360px;
    width: 360px;
}

@media (max-width: 991.98px) {
    .home-calendar-col[b-1pqr1pgbof] {
        flex: 1 1 100%;
        width: 100%;
    }
}

.home-greeting[b-1pqr1pgbof] {
    margin-bottom: 1.5rem;
}

/* ---- Widget grid / edit mode (Home.razor's per-widget wrapper + toolbar) ---- */

.home-widget-wrap[b-1pqr1pgbof] {
    height: 100%;
    position: relative;
}

.home-widget-wrap.editing[b-1pqr1pgbof] {
    outline: 2px dashed var(--cx-gray-300);
    outline-offset: 3px;
    border-radius: 16px;
}

.home-widget-toolbar[b-1pqr1pgbof] {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-bottom: .4rem;
    padding: 0 .1rem;
}

.home-widget-toolbar-label[b-1pqr1pgbof] {
    font-size: .76rem;
    font-weight: 600;
    color: var(--cx-gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-widget-body[b-1pqr1pgbof] {
    height: 100%;
}

.btn-xs[b-1pqr1pgbof] {
    padding: .1rem .4rem;
    font-size: .72rem;
    line-height: 1.4;
}

.home-widget-palette[b-1pqr1pgbof] {
    background: var(--cx-surface-2);
    border: 1px dashed var(--cx-gray-300);
    border-radius: 12px;
    padding: .9rem 1rem;
}

.home-greeting h3[b-1pqr1pgbof] {
    font-family: var(--cx-font-display);
    font-weight: 700;
}

/* ---- KPI tiles ---- */

.home-kpi-row[b-1pqr1pgbof] {
    margin-bottom: 1.25rem;
}

.home-kpi-card[b-1pqr1pgbof] {
    background: var(--cx-surface);
    border-radius: 14px;
    box-shadow: var(--cx-card-shadow);
    padding: 1rem 1.1rem;
    height: 100%;
}

.home-kpi-top[b-1pqr1pgbof] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
}

.home-kpi-icon[b-1pqr1pgbof] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-kpi-badge[b-1pqr1pgbof] {
    font-size: .68rem;
    font-weight: 600;
    padding: .2rem .5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}

.home-kpi-value[b-1pqr1pgbof] {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
}

.home-kpi-label[b-1pqr1pgbof] {
    font-size: .78rem;
    color: var(--cx-gray-600);
}

/* tone palette, shared by KPI icons/badges and activity-row icons */
.tone-good[b-1pqr1pgbof]   { background: var(--cx-good-soft);   color: var(--cx-good); }
.tone-warn[b-1pqr1pgbof]   { background: var(--cx-warn-soft);   color: var(--cx-warn); }
.tone-bad[b-1pqr1pgbof]    { background: var(--cx-bad-soft);    color: var(--cx-bad); }
.tone-accent[b-1pqr1pgbof] { background: var(--cx-accent-light); color: var(--cx-accent); }

/* text-only tone variants, for figures inside the manager summary cards (no background) */
.tone-text-good[b-1pqr1pgbof] { color: var(--cx-good); }
.tone-text-warn[b-1pqr1pgbof] { color: var(--cx-warn); }
.tone-text-bad[b-1pqr1pgbof]  { color: var(--cx-bad); }

/* ---- Cards (Recent activity / Quick links) ---- */

.home-card[b-1pqr1pgbof] {
    background: var(--cx-surface);
    border-radius: 14px;
    box-shadow: var(--cx-card-shadow);
    padding: 1.1rem 1.2rem;
    height: 100%;
}

.home-card-header[b-1pqr1pgbof] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.home-card-header a[b-1pqr1pgbof] {
    color: var(--cx-accent);
    text-decoration: none;
}

.home-card-header a:hover[b-1pqr1pgbof] {
    text-decoration: underline;
}

.home-activity-row[b-1pqr1pgbof] {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--cx-gray-200);
}

.home-activity-row:last-child[b-1pqr1pgbof] {
    border-bottom: none;
    padding-bottom: 0;
}

.home-activity-icon[b-1pqr1pgbof] {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.home-activity-title[b-1pqr1pgbof] {
    font-size: .88rem;
    font-weight: 600;
}

.home-activity-meta[b-1pqr1pgbof] {
    font-size: .76rem;
    color: var(--cx-gray-600);
}

/* ---- Quick links ---- */

.home-quicklink[b-1pqr1pgbof] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    background: var(--cx-surface-2);
    border: 1px solid var(--cx-gray-200);
    border-radius: 12px;
    padding: .9rem;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
}

.home-quicklink:hover[b-1pqr1pgbof] {
    box-shadow: var(--cx-card-shadow-hover);
    transform: translateY(-1px);
    color: inherit;
}

.home-quicklink-icon[b-1pqr1pgbof] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cx-accent-light);
    color: var(--cx-accent);
}

.home-quicklink-label[b-1pqr1pgbof] {
    font-size: .85rem;
    font-weight: 600;
}
/* /Components/Pages/Mail/Mail.razor.rz.scp.css */
.mail-connect[b-d0i0945lqc] {
    background: var(--cx-surface);
    border: 1px solid var(--cx-gray-200);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    max-width: 480px;
}

.mail-shell[b-d0i0945lqc] {
    display: grid;
    grid-template-columns: 220px 340px 1fr;
    gap: 1rem;
    height: calc(100vh - 220px);
    min-height: 480px;
}

/* ===== Sidebar: compose + search + labels ===== */
.mail-sidebar[b-d0i0945lqc] {
    display: flex;
    flex-direction: column;
    background: var(--cx-surface);
    border: 1px solid var(--cx-gray-200);
    border-radius: 12px;
    padding: .9rem;
    overflow-y: auto;
}

.mail-search[b-d0i0945lqc] {
    margin-bottom: .75rem;
}

.mail-labels[b-d0i0945lqc] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.mail-label-item[b-d0i0945lqc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .7rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: .86rem;
}

    .mail-label-item:hover[b-d0i0945lqc] {
        background: var(--cx-surface-2);
    }

    .mail-label-item.active[b-d0i0945lqc] {
        background: var(--cx-accent-light);
        color: var(--cx-accent-dark);
        font-weight: 600;
    }

.mail-label-name[b-d0i0945lqc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-label-badge[b-d0i0945lqc] {
    background: var(--cx-accent);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .05rem .45rem;
    margin-left: .4rem;
}

.mail-labels-divider[b-d0i0945lqc] {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cx-gray-500);
    margin: .9rem 0 .3rem .7rem;
}

/* Custom/nested Gmail labels, grouped by their top path segment — same collapsible convention as
   the permission tree in RoleForm.razor (chevron rotates on open, native marker hidden). */
.mail-label-group[b-d0i0945lqc] {
    margin-bottom: .05rem;
}

.mail-label-group-summary[b-d0i0945lqc] {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .7rem;
    border-radius: 8px;
    font-size: .86rem;
}

    .mail-label-group-summary[b-d0i0945lqc]::-webkit-details-marker {
        display: none;
    }

    .mail-label-group-summary[b-d0i0945lqc]::after {
        content: "▾";
        color: var(--cx-gray-600);
        font-size: .72rem;
        transition: transform .15s;
    }

.mail-label-group[open] > .mail-label-group-summary[b-d0i0945lqc]::after {
    transform: rotate(180deg);
}

.mail-label-group-summary:hover[b-d0i0945lqc] {
    background: var(--cx-surface-2);
}

.mail-label-group-summary.active[b-d0i0945lqc] {
    background: var(--cx-accent-light);
    color: var(--cx-accent-dark);
    font-weight: 600;
}

.mail-label-child[b-d0i0945lqc] {
    padding-left: 1.9rem;
}

/* ===== Message list ===== */
.mail-list[b-d0i0945lqc] {
    display: flex;
    flex-direction: column;
    background: var(--cx-surface);
    border: 1px solid var(--cx-gray-200);
    border-radius: 12px;
    overflow: hidden;
}

.mail-list-header[b-d0i0945lqc] {
    padding: .8rem 1rem;
    font-weight: 700;
    border-bottom: 1px solid var(--cx-gray-200);
    font-size: .95rem;
}

.mail-rows[b-d0i0945lqc] {
    overflow-y: auto;
    flex: 1;
}

.mail-row[b-d0i0945lqc] {
    display: flex;
    gap: .5rem;
    padding: .65rem .9rem;
    border-bottom: 1px solid var(--cx-gray-100);
    cursor: pointer;
}

    .mail-row:hover[b-d0i0945lqc] {
        background: var(--cx-surface-2);
    }

    .mail-row.is-selected[b-d0i0945lqc] {
        background: var(--cx-accent-light);
    }

    .mail-row.is-unread .mail-row-from[b-d0i0945lqc],
    .mail-row.is-unread .mail-row-subject[b-d0i0945lqc] {
        font-weight: 700;
    }

.mail-row-star[b-d0i0945lqc] {
    flex: none;
    padding-top: .1rem;
    cursor: pointer;
    font-size: .95rem;
}

.mail-star-filled[b-d0i0945lqc] {
    color: #f5b400;
}

.mail-star-empty[b-d0i0945lqc] {
    color: var(--cx-gray-300);
}

.mail-row-body[b-d0i0945lqc] {
    min-width: 0;
    flex: 1;
}

.mail-row-top[b-d0i0945lqc] {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}

.mail-row-from[b-d0i0945lqc] {
    font-size: .84rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-row-date[b-d0i0945lqc] {
    font-size: .72rem;
    color: var(--cx-gray-600);
    flex: none;
}

.mail-row-subject[b-d0i0945lqc] {
    font-size: .84rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-attach-icon[b-d0i0945lqc] {
    margin-left: .3rem;
    font-size: .75rem;
}

.mail-row-snippet[b-d0i0945lqc] {
    font-size: .76rem;
    color: var(--cx-gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Reading pane ===== */
.mail-reading[b-d0i0945lqc] {
    background: var(--cx-surface);
    border: 1px solid var(--cx-gray-200);
    border-radius: 12px;
    overflow-y: auto;
    padding: 1.1rem;
}

.mail-empty-state[b-d0i0945lqc] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: .9rem;
}

.mail-detail-header[b-d0i0945lqc] {
    border-bottom: 1px solid var(--cx-gray-200);
    padding-bottom: .7rem;
    margin-bottom: .7rem;
}

.mail-detail-meta > div[b-d0i0945lqc] {
    margin-bottom: .1rem;
}

.mail-detail-actions[b-d0i0945lqc] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .8rem;
}

.mail-attachments[b-d0i0945lqc] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .8rem;
}

.mail-attachment-chip[b-d0i0945lqc] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: var(--cx-surface-2);
    border: 1px solid var(--cx-gray-200);
    border-radius: 999px;
    padding: .25rem .7rem;
    font-size: .78rem;
    text-decoration: none;
    color: var(--cx-graphite);
}

    .mail-attachment-chip:hover[b-d0i0945lqc] {
        border-color: var(--cx-accent);
    }

.mail-detail-body[b-d0i0945lqc] {
    border-top: 1px solid var(--cx-gray-200);
    padding-top: .8rem;
}

.mail-body-frame[b-d0i0945lqc] {
    width: 100%;
    min-height: 360px;
    border: 0;
}

.mail-body-plain[b-d0i0945lqc] {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: .88rem;
    margin: 0;
}

/* ===== Compose / reply panel ===== */
.mail-compose[b-d0i0945lqc] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mail-compose-header[b-d0i0945lqc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--cx-gray-200);
    padding-bottom: .6rem;
    margin-bottom: .7rem;
}

.mail-compose-row[b-d0i0945lqc] {
    margin-bottom: .5rem;
}

.mail-compose-body[b-d0i0945lqc] {
    flex: 1;
    display: flex;
}

    .mail-compose-body textarea[b-d0i0945lqc] {
        flex: 1;
        resize: vertical;
    }

.mail-compose-actions[b-d0i0945lqc] {
    display: flex;
    gap: .5rem;
    margin-top: .6rem;
}

@media (max-width: 1199.98px) {
    .mail-shell[b-d0i0945lqc] {
        grid-template-columns: 180px 1fr;
    }

    .mail-reading[b-d0i0945lqc] {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .mail-shell[b-d0i0945lqc] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .mail-sidebar[b-d0i0945lqc] {
        order: 1;
    }

    .mail-list[b-d0i0945lqc] {
        order: 2;
        max-height: 50vh;
    }
}
/* /Components/Shared/MyCalendarWidget.razor.rz.scp.css */
.mycal-card[b-dln7jsbfvq] {
    display: flex;
    flex-direction: column;
}

.mycal-nav[b-dln7jsbfvq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .15rem;
}

.mycal-nav button[b-dln7jsbfvq] {
    text-decoration: none;
    font-weight: 600;
}

/* View-mode gear menu — reuses the app's .filter-dropdown mechanics, just sized down to an icon
   trigger instead of the wide labeled dropdowns elsewhere (AuditLog filters, etc.). */
.mycal-view-dropdown[b-dln7jsbfvq] {
    display: inline-block;
}

    .mycal-view-dropdown > summary[b-dln7jsbfvq] {
        min-width: 0;
        padding: .3rem .5rem;
        font-size: 1rem;
        line-height: 1;
    }

        .mycal-view-dropdown > summary[b-dln7jsbfvq]::after {
            content: "";
        }

.mycal-view-panel[b-dln7jsbfvq] {
    min-width: 150px;
    padding: .3rem;
    right: 0;
    left: auto;
}

.mycal-view-option[b-dln7jsbfvq] {
    padding: .4rem .6rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: .88rem;
    white-space: nowrap;
}

    .mycal-view-option:hover[b-dln7jsbfvq] {
        background: var(--cx-surface-2);
    }

    .mycal-view-option.active[b-dln7jsbfvq] {
        background: var(--cx-accent-light);
        color: var(--cx-accent-dark);
        font-weight: 600;
    }

.mycal-connect[b-dln7jsbfvq] {
    text-align: center;
    padding: 1.5rem 0;
}

.mycal-detail[b-dln7jsbfvq] {
    background: var(--cx-surface-2);
    border: 1px solid var(--cx-gray-200);
    border-radius: 10px;
    padding: .7rem .8rem;
    margin-bottom: .6rem;
}

.mycal-detail-header[b-dln7jsbfvq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .3rem;
}

.mycal-detail-header .btn-close[b-dln7jsbfvq] {
    transform: scale(.75);
    flex: none;
}

.mycal-detail-row[b-dln7jsbfvq] {
    font-size: .8rem;
    margin-bottom: .2rem;
}

.mycal-detail-desc[b-dln7jsbfvq] {
    font-size: .78rem;
    color: var(--cx-gray-600);
    white-space: pre-wrap;
    max-height: 90px;
    overflow-y: auto;
    margin: .3rem 0 .5rem;
}

.mycal-detail-actions[b-dln7jsbfvq] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.mycal-create-panel .mycal-create-row[b-dln7jsbfvq] {
    margin-bottom: .4rem;
}

.mycal-create-panel .mycal-create-row-title-date[b-dln7jsbfvq] {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: .4rem;
}

.mycal-create-panel .mycal-create-row-2[b-dln7jsbfvq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
}

.mycal-create-panel .mycal-create-row-2 input[type="time"][b-dln7jsbfvq] {
    /* Without this, a narrow column clips the AM/PM part of the browser's native time control. */
    min-width: 0;
}

.mycal-create-panel .form-check.mycal-create-row[b-dln7jsbfvq] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding-left: 0;
}

.mycal-create-panel .form-check.mycal-create-row .form-check-input[b-dln7jsbfvq] {
    margin: 0;
}

.mycal-guest-chips[b-dln7jsbfvq] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .35rem;
}

.mycal-guest-chip[b-dln7jsbfvq] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--cx-accent-light);
    color: var(--cx-accent-dark);
    border-radius: 999px;
    padding: .1rem .3rem .1rem .55rem;
    font-size: .76rem;
    line-height: 1.5;
}

.mycal-guest-chip button[b-dln7jsbfvq] {
    border: none;
    background: none;
    color: inherit;
    font-size: .95rem;
    line-height: 1;
    padding: 0 .15rem;
    cursor: pointer;
    opacity: .7;
}

.mycal-guest-chip button:hover[b-dln7jsbfvq] {
    opacity: 1;
}

.mycal-guest-input-wrap[b-dln7jsbfvq] {
    position: relative;
}

.mycal-guest-suggestions[b-dln7jsbfvq] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--cx-surface);
    border: 1px solid var(--cx-gray-300);
    border-radius: 8px;
    box-shadow: var(--cx-card-shadow-hover, 0 4px 14px rgba(0,0,0,.12));
    margin-top: .2rem;
    max-height: 170px;
    overflow-y: auto;
}

.mycal-guest-suggestion-item[b-dln7jsbfvq] {
    display: flex;
    flex-direction: column;
    padding: .35rem .6rem;
    cursor: pointer;
}

.mycal-guest-suggestion-item:hover[b-dln7jsbfvq] {
    background: var(--cx-surface-2);
}

.mycal-guest-suggestion-name[b-dln7jsbfvq] {
    font-size: .8rem;
    font-weight: 600;
}

.mycal-guest-suggestion-email[b-dln7jsbfvq] {
    font-size: .72rem;
    color: var(--cx-gray-600);
}

.mycal-grid[b-dln7jsbfvq] {
    display: grid;
    overflow-x: auto;
    column-gap: 2px;
}

.mycal-gutter[b-dln7jsbfvq] {
    display: flex;
    flex-direction: column;
}

.mycal-gutter-spacer[b-dln7jsbfvq] {
    visibility: hidden;
}

.mycal-hour-label[b-dln7jsbfvq] {
    height: 48px;
    font-size: .68rem;
    color: var(--cx-gray-600);
    text-align: right;
    padding-right: .35rem;
    transform: translateY(-.5em);
}

.mycal-day-col[b-dln7jsbfvq] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mycal-day-header[b-dln7jsbfvq] {
    text-align: center;
    padding: .2rem 0 .4rem;
    border-bottom: 1px solid var(--cx-gray-200);
    margin-bottom: 2px;
}

.mycal-day-header.is-today .mycal-day-num[b-dln7jsbfvq] {
    background: var(--cx-accent);
    color: #fff;
    border-radius: 999px;
}

.mycal-day-name[b-dln7jsbfvq] {
    font-size: .68rem;
    color: var(--cx-gray-600);
    text-transform: uppercase;
}

.mycal-day-num[b-dln7jsbfvq] {
    font-size: .85rem;
    font-weight: 700;
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
}

.mycal-day-body[b-dln7jsbfvq] {
    position: relative;
    background-image: linear-gradient(var(--cx-gray-200) 1px, transparent 1px);
    background-size: 100% 48px;
    border-left: 1px solid var(--cx-gray-200);
}

.mycal-hour-line[b-dln7jsbfvq] {
    height: 48px;
}

.mycal-event[b-dln7jsbfvq] {
    /* left/width are set inline per event by EventStyle() — side-by-side column packing for
       overlapping meetings — so they're intentionally not fixed here. */
    position: absolute;
    background: var(--cx-accent-light);
    border-left: 3px solid var(--cx-accent);
    border-radius: 4px;
    padding: .15rem .3rem;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
}

.mycal-event:hover[b-dln7jsbfvq] {
    box-shadow: var(--cx-card-shadow-hover);
}

.mycal-event-title[b-dln7jsbfvq] {
    font-size: .68rem;
    font-weight: 600;
    color: var(--cx-accent-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mycal-event-time[b-dln7jsbfvq] {
    font-size: .62rem;
    color: var(--cx-gray-600);
}

/* Live "now" indicator, same convention as Google Calendar's own red line — moved every 30s by
   NowLineLoopAsync, hidden entirely (not clamped) when the current time falls outside the visible
   hour range. */
.mycal-now-line[b-dln7jsbfvq] {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #ea4335;
    z-index: 5;
    pointer-events: none;
}

    .mycal-now-line[b-dln7jsbfvq]::before {
        content: "";
        position: absolute;
        left: -4px;
        top: -3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ea4335;
    }

.mycal-allday-chip[b-dln7jsbfvq] {
    font-size: .62rem;
    font-weight: 600;
    background: var(--cx-accent-light);
    color: var(--cx-accent-dark);
    border-radius: 4px;
    padding: .1rem .3rem;
    margin: 0 2px 2px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}