@import '_content/Companion.Shared.Ui/Companion.Shared.Ui.kmmjv00q4p.bundle.scp.css';

/* /Components/Brand/BrandHeader.razor.rz.scp.css */
.brand-header[b-y5p38yqlcj] {
    position: sticky;
    /* W10.1 Task 7 — pin BELOW MainLayout's MudAppBar (default Dense=false height
       64px). z-index is lower than MudAppBar's (~1300) so the main nav strip
       (Logo / Dashboard / Conversations tabs) stays visible on top, with the
       BrandHeader as a second-tier sticky strip immediately below it. Prior
       value `top: 0; z-index: 100;` caused the BrandHeader to overlap and
       cut off the MainLayout AppBar — the W10 eyeball Vince reported. */
    top: 64px;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid #98BA66;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

.brand-top[b-y5p38yqlcj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
}

.brand-left[b-y5p38yqlcj] { display: flex; align-items: center; gap: 14px; }
.brand-swirl[b-y5p38yqlcj] { width: 26px; height: 26px; flex-shrink: 0; }

/* W10.1 Task 8 — swirl-as-homepage-link affordance. Anchor reset (no underline,
   no inherited color) + a subtle hover/focus drop-shadow + scale so the AM gets
   visual feedback that the swirl is clickable. The focus-visible outline is the
   keyboard-navigation surface; the hover state covers pointer use. */
.brand-swirl-link[b-y5p38yqlcj] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-radius: 50%;
    transition: filter 0.15s, transform 0.15s;
}

.brand-swirl-link:hover .brand-swirl[b-y5p38yqlcj],
.brand-swirl-link:focus-visible .brand-swirl[b-y5p38yqlcj] {
    filter: drop-shadow(0 0 4px rgba(12, 120, 185, 0.35));
    transform: scale(1.05);
}

.brand-swirl-link:focus-visible[b-y5p38yqlcj] {
    outline: 2px solid #0C78B9;
    outline-offset: 2px;
}
.brand-divider[b-y5p38yqlcj] { width: 1px; height: 28px; background: #e8e8e8; }
.brand-meta[b-y5p38yqlcj] { display: flex; flex-direction: column; gap: 2px; }

.brand-eyebrow[b-y5p38yqlcj] {
    font-size: 9px;
    letter-spacing: 2.5px;
    color: #98BA66;
    font-weight: 700;
    text-transform: uppercase;
}

.brand-title[b-y5p38yqlcj] {
    font-size: 15px;
    font-weight: 700;
    color: #1A1A1A;
    line-height: 1;
}

.brand-right[b-y5p38yqlcj] { display: flex; align-items: center; gap: 10px; }
.brand-am-name[b-y5p38yqlcj] { font-size: 11px; color: #666; }
.brand-avatar[b-y5p38yqlcj] {
    width: 26px; height: 26px; border-radius: 50%;
    background: #0C78B9; color: #fff;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

.brand-nav[b-y5p38yqlcj] {
    display: flex;
    gap: 28px;
    padding: 0 24px;
    border-top: 1px solid #f0f0f0;
    background: #fff;
}

.brand-nav-item[b-y5p38yqlcj] {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    color: #999;
    padding: 10px 0 11px;
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    transition: color 0.15s, border-color 0.15s;
}

.brand-nav-item:hover[b-y5p38yqlcj] { color: #555; }
.brand-nav-item.active[b-y5p38yqlcj] { color: #1A1A1A; border-bottom-color: #98BA66; }
.brand-nav-item.hidden[b-y5p38yqlcj] { text-decoration: line-through; opacity: 0.5; }

/* W10.1 Task 9 — 'Refresh all' button sits in the right-hand affordance slot
   and occupies the `margin-left: auto` spacer (pushing all section nav items to
   the left). 'Show all' (when rendered) sits next to it via fixed `margin-left`.
   The uppercase letter-spacing + primary blue ink match the brand-nav tier's
   typography rhythm; the soft hover background is a lift cue without competing
   with the green active-section underline. */
.brand-refresh-all[b-y5p38yqlcj] {
    margin-left: auto;
    font-size: 10px;
    color: #0C78B9;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
    transition: background-color 0.15s, border-color 0.15s;
}

.brand-refresh-all:hover[b-y5p38yqlcj] {
    background-color: rgba(12, 120, 185, 0.08);
    border-color: rgba(12, 120, 185, 0.25);
}

/* W10.1 Task 9 — 'Show all' no longer owns the `margin-left: auto` slot when
   'Refresh all' is present. Use a fixed 8px gap so they sit adjacent on the
   right edge. When 'Refresh all' is absent (route without cascade), the
   `margin-left: auto` here still pushes 'Show all' to the right. */
.brand-show-all[b-y5p38yqlcj] {
    margin-left: auto;
    font-size: 10px;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}

/* When both affordances are rendered, the cascade puts Refresh-all first (it
   gets margin-left:auto). The CSS adjacent-sibling selector demotes Show-all's
   margin-left to a fixed 8px so they're a tight pair on the right edge. */
.brand-refresh-all + .brand-show-all[b-y5p38yqlcj] {
    margin-left: 8px;
}

.brand-show-all:hover[b-y5p38yqlcj] { color: #555; }
/* /Components/Pages/Picker/Clients.razor.rz.scp.css */
/* W2.3 — picker page chrome. UI-SPEC § "picker layout":
   - Single column, 800px max-width centered (MaxWidth.Medium = 800px).
   - Header row: title + scope chip inline.
*/

.amd-picker-header[b-jc2tpp20al] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.amd-picker-search[b-jc2tpp20al] {
    width: 100%;
}

.amd-picker-list[b-jc2tpp20al]  .mud-list-item {
    border-bottom: 1px solid var(--amd-border-subtle, rgba(0, 0, 0, 0.08));
    padding-block: 12px;
}

.amd-picker-list[b-jc2tpp20al]  .mud-list-item:hover {
    background-color: var(--amd-surface-hover, rgba(0, 0, 0, 0.02));
}

.amd-picker-skeletons[b-jc2tpp20al] {
    display: flex;
    flex-direction: column;
}
/* /Components/Sections/FollowupsComposition.razor.rz.scp.css */
/* W6.1 — Follow-ups composition surface scoped styles per UI-SPEC.
   - Single MudPaper Outlined card containing three textareas.
   - gap-6 (24px) between fields per UI-SPEC.
   - 75ch line-length cap on textarea content (full-width visual width matches
     section cards above for vertical rhythm). */

.amd-followups-card[b-tc12ihrk7s] {
    padding: 24px;
}

.amd-followups-header[b-tc12ihrk7s] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.amd-followups-fields[b-tc12ihrk7s] {
    display: flex;
    flex-direction: column;
    gap: 24px; /* gap-6 per UI-SPEC */
}

/* 75ch line-length cap on textarea CONTENT — visual field width stays full-width
   for rhythm with section cards above (UI-SPEC §Layout Grid). */
.amd-followups-fields[b-tc12ihrk7s]  textarea {
    max-width: 75ch;
}

.ink-muted[b-tc12ihrk7s] {
    color: rgba(0, 0, 0, 0.6);
}