/* /Layout/MainLayout.razor.rz.scp.css */
/* App shell from the prototype: fixed sidebar, top bar, scrolling content. */
.hub-shell[b-mainlayout] {
    display: flex;
    height: 100vh;
    background: var(--hub-bg);
}

.hub-sidebar[b-mainlayout] {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--hub-panel);
    border-right: 1px solid var(--hub-border);
    transition: width 0.15s ease;
}

.hub-logo[b-mainlayout] {
    display: block;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--hub-border);
}

    .hub-logo img[b-mainlayout] {
        width: 100%;
        height: auto;
        display: block;
    }

.hub-sidebar-footer[b-mainlayout] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid var(--hub-border);
}

.hub-sidebar-user[b-mainlayout] {
    flex: 1;
    min-width: 0;
}

.hub-sidebar-name[b-mainlayout] {
    font-size: 13px;
    font-weight: 600;
    color: var(--hub-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-sidebar-role[b-mainlayout] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--hub-magenta);
}

.hub-icon-button[b-mainlayout] {
    background: none;
    border: none;
    color: var(--hub-muted-dark);
    padding: 4px;
    cursor: pointer;
}

    .hub-icon-button:hover[b-mainlayout] {
        color: var(--hub-text);
    }

.hub-main[b-mainlayout] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 0;
}

/* Soft cyan/magenta light behind the content. */
.hub-glow[b-mainlayout] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

    .hub-glow span[b-mainlayout] {
        position: absolute;
        border-radius: 50%;
        filter: blur(55px);
    }

        .hub-glow span:nth-child(1)[b-mainlayout] {
            top: -120px;
            left: -60px;
            width: 360px;
            height: 360px;
            background: radial-gradient(circle, var(--hub-glow-cyan), transparent 70%);
        }

        .hub-glow span:nth-child(2)[b-mainlayout] {
            top: 260px;
            right: -100px;
            width: 340px;
            height: 340px;
            background: radial-gradient(circle, var(--hub-glow-magenta), transparent 70%);
            filter: blur(60px);
        }

        .hub-glow span:nth-child(3)[b-mainlayout] {
            bottom: -140px;
            left: 35%;
            width: 320px;
            height: 320px;
            background: radial-gradient(circle, var(--hub-glow-cyan), transparent 70%);
            opacity: 0.5;
            filter: blur(60px);
        }

.hub-topbar[b-mainlayout] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 28px;
    border-bottom: 1px solid var(--hub-border);
    background: var(--hub-bg);
    position: relative;
}

.hub-topbar-text[b-mainlayout] {
    min-width: 0;
    flex: 1;
}

.hub-topbar-title[b-mainlayout] {
    font-size: 20px;
    font-weight: 700;
    color: var(--hub-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Keeps the bar's height while a page is still loading its title. */
    min-height: 1.5em;
}

.hub-topbar-subtitle[b-mainlayout] {
    font-size: 12.5px;
    color: var(--hub-muted);
    margin-top: 2px;
}

.hub-topbar-actions[b-mainlayout] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    /* Grows like the title block, so the clock pill sits in the middle. */
    flex: 1;
    min-width: 0;
}

.hub-topbar-date[b-mainlayout] {
    font-family: var(--hub-font-mono);
    font-size: 12px;
    color: var(--hub-muted);
}

.content[b-mainlayout] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Keep the scrollbar's space even when there's nothing to scroll, so the
       page doesn't narrow and shift the moment it gets tall enough to scroll. */
    scrollbar-gutter: stable;
    padding: 24px;
}

/* Phone: the sidebar collapses to a narrow icon rail, as in the prototype. */
@media (max-width: 780px) {
    .hub-sidebar[b-mainlayout] {
        width: 68px;
    }

    .hub-logo[b-mainlayout] {
        padding: 12px 10px;
    }

    .hub-sidebar-footer[b-mainlayout] {
        flex-direction: column;
        padding: 12px 6px;
    }

    .hub-sidebar-user[b-mainlayout] {
        display: none;
    }

    .hub-topbar[b-mainlayout] {
        padding: 14px;
    }

    .hub-topbar-subtitle:not(.text-danger)[b-mainlayout], .hub-topbar-date[b-mainlayout] {
        display: none;
    }

    .content[b-mainlayout] {
        padding: 14px;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.hub-nav[b-navmenu] {
    flex: 1;
    overflow-y: auto;
    padding: 14px 10px;
}

.hub-nav-group[b-navmenu] {
    margin-bottom: 18px;
}

.hub-nav-group-label[b-navmenu] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 6px;
    padding: 5px 10px;
    border: none;
    background: transparent;
    text-align: left;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hub-magenta);
    cursor: pointer;
}

    .hub-nav-group-label .lu[b-navmenu] {
        font-size: 12px;
        flex-shrink: 0;
        transition: transform 0.15s ease;
    }

        .hub-nav-group-label .lu.open[b-navmenu] {
            transform: rotate(90deg);
        }

[b-navmenu] .hub-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 2px;
    border-radius: 7px;
    border-left: 2px solid transparent;
    color: var(--hub-muted);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
}

    [b-navmenu] .hub-nav-item .lu {
        font-size: 17px;
        line-height: 1;
        color: var(--hub-cyan);
    }

    [b-navmenu] .hub-nav-item:hover {
        background: var(--hub-panel2);
        color: var(--hub-text);
    }

    [b-navmenu] .hub-nav-item.active {
        background: rgba(var(--hub-cyan-rgb), 0.12);
        border-left-color: var(--hub-cyan);
        color: var(--hub-cyan);
        font-weight: 600;
    }

        [b-navmenu] .hub-nav-item.active .lu {
            color: var(--hub-magenta);
        }

    /* Preview tab: shown, but not openable yet. */
    [b-navmenu] .hub-nav-item.disabled,
    [b-navmenu] .hub-nav-item.disabled:hover {
        background: none;
        color: var(--hub-muted);
        opacity: 0.4;
        cursor: not-allowed;
    }

        [b-navmenu] .hub-nav-item.disabled .lu {
            color: var(--hub-muted);
        }

/* Clock In / Out: lit while the user is clocked in. */
[b-navmenu] .hub-nav-dot {
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--hub-cyan);
    box-shadow: 0 0 8px var(--hub-cyan);
}

/* Phone icon rail: icon above a tiny label, no group headings. */
@media (max-width: 780px) {
    .hub-nav[b-navmenu] {
        padding: 10px 6px;
    }

    .hub-nav-group[b-navmenu] {
        margin-bottom: 6px;
    }

    .hub-nav-group-label[b-navmenu] {
        display: none;
    }

    [b-navmenu] .hub-nav-item {
        flex-direction: column;
        gap: 3px;
        padding: 9px 2px;
        border-left: none;
        border-radius: 8px;
    }

    [b-navmenu] .hub-nav-item-label {
        font-size: 8.5px;
        line-height: 1.05;
        text-align: center;
    }
}
/* /Pages/AdBuilderPrint.Page.razor.rz.scp.css */
.abp-loading[b-adbprint] {
    padding: 24px;
}

.abp-toolbar[b-adbprint] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 980px;
    margin: 0 auto 16px;
}

.abp-toolbar-title[b-adbprint] {
    font-weight: 700;
}

.abp-toolbar-sub[b-adbprint] {
    font-size: 12px;
    color: var(--hub-muted);
}

.abp-toolbar-actions[b-adbprint] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* White paper in both themes, one sheet per printed page. */
.abp-sheet[b-adbprint] {
    max-width: 980px;
    margin: 0 auto 24px;
    padding: 28px;
    border-radius: 10px;
    background: #fff;
    color: #111;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.abp-head[b-adbprint] {
    margin-bottom: 14px;
}

.abp-kicker[b-adbprint] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #555;
}

.abp-job[b-adbprint] {
    font-size: 18px;
    font-weight: 800;
    margin-top: 2px;
}

.abp-meta[b-adbprint] {
    font-size: 11.5px;
    color: #444;
    margin-top: 2px;
}

.abp-warning[b-adbprint] {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #d32f2f;
}

.abp-stats[b-adbprint] {
    display: flex;
    gap: 28px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid #ccc;
}

    .abp-stats > div[b-adbprint] {
        display: flex;
        flex-direction: column;
    }

.abp-stat-label[b-adbprint] {
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #666;
}

.abp-stat[b-adbprint] {
    font-size: 18px;
    font-weight: 800;
}

@media print {
    .abp-sheet[b-adbprint] {
        max-width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        break-after: page;
    }

        .abp-sheet:last-of-type[b-adbprint] {
            break-after: auto;
        }
}

/* Skeleton of a blueprint page: a header band, then a grid of regions. */
.abp-skel-page[b-adbprint] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

    .abp-skel-page[b-adbprint]  .abp-skel-wide {
        grid-column: 1 / -1;
    }
/* /Pages/AdBuilderProjectDetail.Page.razor.rz.scp.css */
/* ==========================================================================
   Ad Builder project — the prototype's AdBuilderProjectDetailView and its
   stage tabs. Every Ad Builder component (Shared/AdBuilder) renders inside
   .adb, so their shared styles live here as `.adb ::deep .adb-*` instead of
   being repeated in each component's own stylesheet.

   Accent colours the prototype uses identically in light and dark (offer
   types, warnings) are named once here; everything else is a --hub-* token.
   ========================================================================== */
.adb[b-adbproject] {
    --adb-amber: #F59E0B;
    --adb-amber-rgb: 245, 158, 11;
    --adb-green: #22C55E;
    --adb-green-rgb: 34, 197, 94;
    --adb-purple: #A855F7;
    --adb-purple-rgb: 168, 85, 247;
    --adb-pink: #EC4899;
    --adb-pink-rgb: 236, 72, 153;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* --- Page chrome: back link, stage tabs, progress buttons, workflow ------ */
.adb-topline[b-adbproject] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.adb-back[b-adbproject] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--hub-font-mono);
    font-size: 11.5px;
    color: var(--hub-cyan);
    text-decoration: none;
}

    .adb-back:hover[b-adbproject] { text-decoration: underline; }

.adb-topline-right[b-adbproject] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 12px;
}

.adb-jobname[b-adbproject] {
    font-family: var(--hub-font-mono);
    font-size: 13px;
    font-weight: 800;
    color: var(--hub-cyan);
}

.adb-customer[b-adbproject] {
    font-family: var(--hub-font-sans);
    font-size: 12px;
    color: var(--hub-muted-dark);
}

.adb-joblink[b-adbproject] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted);
    text-decoration: none;
}

    .adb-joblink:hover[b-adbproject] { color: var(--hub-cyan); }

.adb-stages[b-adbproject],
.adb-subtabs[b-adbproject] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.adb-subtabs[b-adbproject] {
    margin-bottom: -4px;
}

/* Prototype stage tabs: 8px 14px, 7px radius, mono 11 bold, not uppercase. */
.adb-stage[b-adbproject] {
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
}

    .adb-stage .lu[b-adbproject] { font-size: 13px; }

    .adb-stage .adb-stage-mark[b-adbproject] {
        font-size: 11px;
        opacity: 0.8;
    }

.adb-placeholder[b-adbproject] {
    padding: 40px;
    text-align: center;
    font-family: var(--hub-font-sans);
    font-size: 14px;
    color: var(--hub-muted-dark);
}

.adb-workflow[b-adbproject] {
    padding: 20px;
}

.adb-workflow-chart[b-adbproject] {
    margin-top: 18px;
}

/* --- Progress buttons: adBuilderProgressBtnStyle / TopProgressBtnStyle ---- */
.adb[b-adbproject]  .adb-continue-row {
    display: flex;
    justify-content: flex-end;
}

.adb[b-adbproject]  .btn.adb-continue {
    width: 100%;
    min-height: 54px;
    padding: 15px 22px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 10px 28px rgba(51, 171, 228, 0.18), 0 6px 20px rgba(255, 0, 240, 0.10);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

    .adb[b-adbproject]  .btn.adb-continue > span {
        display: inline-flex;
        align-items: center;
        gap: 9px;
    }

    .adb[b-adbproject]  .btn.adb-continue .lu { font-size: 16px; }

.adb[b-adbproject]  .btn.adb-continue-top {
    width: auto;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 11.5px;
    box-shadow: 0 7px 20px rgba(51, 171, 228, 0.16), 0 4px 14px rgba(255, 0, 240, 0.09);
}

    .adb[b-adbproject]  .btn.adb-continue-top .lu { font-size: 14px; }

.adb[b-adbproject]  .btn.adb-continue:disabled {
    background-image: none;
    background-color: var(--hub-panel2);
    border-color: var(--hub-border);
    color: var(--hub-muted-dark);
    box-shadow: none;
    opacity: 0.62;
}

/* --- Shared building blocks for every stage ------------------------------ */
.adb[b-adbproject]  .adb-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.adb[b-adbproject]  .adb-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    .adb[b-adbproject]  .adb-head .hub-eyebrow { margin-bottom: 0; }

.adb[b-adbproject]  .adb-desc {
    margin-top: 6px;
    font-family: var(--hub-font-sans);
    font-size: 11.5px;
    color: var(--hub-muted-dark);
    line-height: 1.45;
}

.adb[b-adbproject]  .adb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* labelStyle: mono 9.5px, muted-dark, above an input. */
.adb[b-adbproject]  .adb-label {
    display: block;
    margin-bottom: 3px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    font-weight: 400;
    color: var(--hub-muted-dark);
}

/* Section titles inside a panel ("Project Information", "Offer", …). */
.adb[b-adbproject]  .adb-section {
    margin-bottom: 12px;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hub-cyan);
}

    .adb[b-adbproject]  .adb-section.magenta { color: var(--hub-magenta); }
    .adb[b-adbproject]  .adb-section.amber { color: var(--adb-amber); }

.adb[b-adbproject]  .adb-hint {
    margin-top: 4px;
    font-family: var(--hub-font-mono);
    font-size: 8.5px;
    line-height: 1.4;
    color: var(--hub-muted-dark);
}

    .adb[b-adbproject]  .adb-hint.warn { color: var(--adb-amber); }

.adb[b-adbproject]  .adb-gap-14 { gap: 14px; }
.adb[b-adbproject]  .adb-gap-12 { gap: 12px; }
.adb[b-adbproject]  .adb-span-all { grid-column: 1 / -1; }

/* Bordered inner box (prototype's padding:12-16 / radius 8-10 / panel2 boxes). */
.adb[b-adbproject]  .adb-box {
    padding: 12px;
    border: 1px solid var(--hub-border);
    border-radius: 9px;
    background: var(--hub-panel2);
    min-width: 0;
}

    .adb[b-adbproject]  .adb-box.cyan {
        border-color: rgba(var(--hub-cyan-rgb), 0.33);
        background: rgba(var(--hub-cyan-rgb), 0.04);
    }

    .adb[b-adbproject]  .adb-box.magenta {
        border-color: rgba(var(--hub-magenta-rgb), 0.4);
        background: rgba(var(--hub-magenta-rgb), 0.035);
    }

/* "What happens next?" style note. */
.adb[b-adbproject]  .adb-note {
    padding: 10px 12px;
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.2);
    border-radius: 8px;
    background: rgba(var(--hub-cyan-rgb), 0.06);
    font-family: var(--hub-font-sans);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--hub-text);
}

    .adb[b-adbproject]  .adb-note strong { color: var(--hub-cyan); }

    .adb[b-adbproject]  .adb-note.warn {
        border-color: rgba(var(--adb-amber-rgb), 0.35);
        background: rgba(var(--adb-amber-rgb), 0.07);
    }

        .adb[b-adbproject]  .adb-note.warn strong,
        .adb[b-adbproject]  .adb-note.warn .lu { color: var(--adb-amber); }

    .adb[b-adbproject]  .adb-note.error {
        border-color: rgba(var(--hub-magenta-rgb), 0.35);
        background: rgba(var(--hub-magenta-rgb), 0.06);
        color: var(--hub-magenta);
    }

/* Rounded status pill ("In Progress", "Completed", "Current", …). */
.adb[b-adbproject]  .adb-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 20px;
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.33);
    background: rgba(var(--hub-cyan-rgb), 0.094);
    color: var(--hub-cyan);
    font-family: var(--hub-font-mono);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

    .adb[b-adbproject]  .adb-pill.magenta {
        border-color: rgba(var(--hub-magenta-rgb), 0.33);
        background: rgba(var(--hub-magenta-rgb), 0.094);
        color: var(--hub-magenta);
    }

    .adb[b-adbproject]  .adb-pill.amber {
        border-color: rgba(var(--adb-amber-rgb), 0.4);
        background: rgba(var(--adb-amber-rgb), 0.094);
        color: var(--adb-amber);
    }

    .adb[b-adbproject]  .adb-pill.muted {
        border-color: var(--hub-border);
        background: transparent;
        color: var(--hub-muted-dark);
    }

/* Text colours for status words. */
.adb[b-adbproject]  .adb-ok { color: var(--hub-cyan); }
.adb[b-adbproject]  .adb-warn { color: var(--adb-amber); }
.adb[b-adbproject]  .adb-bad { color: var(--hub-magenta); }

/* Bare icon button (pencil / trash / remove-from-slot). */
.adb[b-adbproject]  .adb-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border: none;
    background: none;
    color: var(--hub-cyan);
    cursor: pointer;
    font-size: 13px;
}

    .adb[b-adbproject]  .adb-icon-btn.danger { color: var(--hub-magenta); }
    .adb[b-adbproject]  .adb-icon-btn.muted { color: var(--hub-muted-dark); }
    .adb[b-adbproject]  .adb-icon-btn:hover { filter: brightness(1.2); }
    .adb[b-adbproject]  .adb-icon-btn:disabled { opacity: 0.35; cursor: default; }

/* Smaller segmented tabs (filters, view toggles, page tabs). */
.adb[b-adbproject]  .hub-tab.adb-chip {
    padding: 7px 12px;
    font-size: 10.5px;
    text-transform: none;
    letter-spacing: 0;
}

    .adb[b-adbproject]  .hub-tab.adb-chip.xs {
        padding: 5px 9px;
        font-size: 9.5px;
    }

/* Prototype data table: panel2 header row, mono 9.5 uppercase headings. */
.adb[b-adbproject]  .adb-table-wrap {
    overflow-x: auto;
}

.adb[b-adbproject]  .adb-table {
    width: 100%;
    border-collapse: collapse;
}

    .adb[b-adbproject]  .adb-table th {
        padding: 9px 10px;
        background: var(--hub-panel2);
        border-bottom: 1px solid var(--hub-border);
        text-align: left;
        font-family: var(--hub-font-mono);
        font-size: 9.5px;
        font-weight: 400;
        text-transform: uppercase;
        color: var(--hub-muted-dark);
        white-space: nowrap;
    }

    .adb[b-adbproject]  .adb-table td {
        padding: 8px 10px;
        border-bottom: 1px solid var(--hub-border);
        vertical-align: middle;
    }

    .adb[b-adbproject]  .adb-table tbody tr:last-child td { border-bottom: none; }

    .adb[b-adbproject]  .adb-table tbody tr:hover td { background: rgba(var(--hub-cyan-rgb), 0.035); }

.adb[b-adbproject]  .adb-empty-row {
    padding: 24px !important;
    text-align: center;
    font-family: var(--hub-font-sans);
    font-size: 12.5px;
    color: var(--hub-muted-dark);
}

/* Small figures in summary panels. */
.adb[b-adbproject]  .adb-stat-value {
    font-family: var(--hub-font-mono);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.adb[b-adbproject]  .adb-stat-label {
    font-family: var(--hub-font-mono);
    font-size: 9px;
    text-transform: uppercase;
    color: var(--hub-muted-dark);
}

/* Bulleted "Phase N Rules" panels. */
.adb[b-adbproject]  .adb-rules {
    margin: 10px 0 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .adb[b-adbproject]  .adb-rules li {
        font-family: var(--hub-font-sans);
        font-size: 11.5px;
        color: var(--hub-muted);
    }

/* Check rows: icon + label (+ detail), used by validation / health / preflight. */
.adb[b-adbproject]  .adb-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

    .adb[b-adbproject]  .adb-check > .lu {
        margin-top: 1px;
        font-size: 14px;
        flex-shrink: 0;
    }

.adb[b-adbproject]  .adb-check-label {
    font-family: var(--hub-font-sans);
    font-size: 12px;
    color: var(--hub-text);
    flex: 1;
}

.adb[b-adbproject]  .adb-check-count {
    font-family: var(--hub-font-mono);
    font-size: 12px;
    font-weight: 700;
}

/* Product image frame on a checkerboard (shows transparency) — the
   checker is image chrome, the same in both themes, like the prototype. */
.adb[b-adbproject]  .adb-checker {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--hub-border);
    border-radius: 10px;
    background: repeating-conic-gradient(#f7f7f7 0% 25%, #e9e9e9 0% 50%) 50% / 18px 18px;
}

    .adb[b-adbproject]  .adb-checker img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.adb[b-adbproject]  .adb-checker-empty {
    text-align: center;
    font-family: var(--hub-font-mono);
    font-size: 9px;
    color: rgba(0, 0, 0, 0.45);
}

    .adb[b-adbproject]  .adb-checker-empty .lu {
        display: block;
        margin: 0 auto 7px;
        font-size: 28px;
    }

/* --- Modals: the prototype's Panel dialogs -------------------------------- */
.adb[b-adbproject]  .adb-modal-section {
    padding: 18px 0;
    border-bottom: 1px solid var(--hub-border);
}

    .adb[b-adbproject]  .adb-modal-section:first-child { padding-top: 0; }
    .adb[b-adbproject]  .adb-modal-section:last-child { border-bottom: none; padding-bottom: 0; }

/* Validation messages from DataAnnotations, in the prototype's magenta. */
.adb[b-adbproject]  .validation-message {
    margin-top: 3px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-magenta);
}

@media (max-width: 640px) {
    .adb-topline-right[b-adbproject] { justify-content: flex-start; }
    .adb[b-adbproject]  .btn.adb-continue-top { width: 100%; }
}
/* /Pages/AdBuilderProjects.Page.razor.rz.scp.css */
/* Prototype AdBuilderProjectsTab: tabs + "New Project", then one Panel per
   project with its Job ID line and the workflow chart. */
.adbp[b-adbprojects] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.adbp-toolbar[b-adbprojects] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.adbp-tabs[b-adbprojects] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The prototype's project tabs: not uppercase, a little roomier than .hub-tab. */
.adbp-tab[b-adbprojects] {
    padding: 10px 16px;
    border-radius: 8px;
    text-transform: none;
    letter-spacing: 0;
}

    .adbp-tab .lu[b-adbprojects] {
        font-size: 14px;
    }

.adbp-list[b-adbprojects] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.adbp-card[b-adbprojects] {
    display: block;
    padding: 20px;
    color: var(--hub-text);
    text-decoration: none;
}

    .adbp-card:hover[b-adbprojects] {
        color: var(--hub-text);
        border-color: var(--hub-border-bright);
    }

.adbp-card-head[b-adbprojects] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.adbp-jobid-label[b-adbprojects] {
    font-family: var(--hub-font-sans);
    font-size: 13px;
    color: var(--hub-muted);
}

.adbp-jobid[b-adbprojects] {
    font-family: var(--hub-font-mono);
    font-size: 15px;
    font-weight: 800;
    color: var(--hub-cyan);
}

.adbp-jobtitle[b-adbprojects] {
    font-family: var(--hub-font-sans);
    font-size: 12px;
    color: var(--hub-muted-dark);
}

.adbp-meta[b-adbprojects] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
}

.adbp-built[b-adbprojects] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 20px;
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.33);
    background: rgba(var(--hub-cyan-rgb), 0.094);
    color: var(--hub-cyan);
    font-weight: 700;
}

.adbp-empty[b-adbprojects] {
    padding: 30px;
    text-align: center;
    font-family: var(--hub-font-sans);
    font-size: 13px;
    color: var(--hub-muted-dark);
}

.adbp-form[b-adbprojects] {
    gap: 12px 14px;
    margin-bottom: 14px;
}

.adbp-field[b-adbprojects] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.adbp-span[b-adbprojects] {
    grid-column: 1 / -1;
}

.adbp-none[b-adbprojects] {
    margin-bottom: 16px;
    font-family: var(--hub-font-sans);
    font-size: 12px;
    color: var(--hub-muted-dark);
}

@media (max-width: 640px) {
    .adbp-meta[b-adbprojects] {
        margin-left: 0;
        width: 100%;
    }
}

/* /Pages/AdminSettings.Page.razor.rz.scp.css */
/* AdminSettingsTab: content-pad column (gap 18) with the section switcher on top.
   The section components (Shared/Admin/*) share the styles below via ::deep. */
.admin-root[b-admin] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Section switcher: a row of tabs over a hairline. */
.admin-tabs[b-admin] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hub-border);
}

    .admin-tabs .hub-tab[b-admin] {
        text-transform: none;
        letter-spacing: 0;
    }

        .admin-tabs .hub-tab .lu[b-admin] {
            font-size: 13px;
        }

/* ---- Shared section bits ---------------------------------------------- */
.admin-root[b-admin]  .adm-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-root[b-admin]  .adm-count {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-root[b-admin]  .adm-note {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
    line-height: 1.5;
}

    .admin-root[b-admin]  .adm-note.small {
        font-size: 9.5px;
    }

.admin-root[b-admin]  .adm-loading {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
}

/* Form Panels (New Customer / New Vendor / Company Info): padding 20, maxWidth 560. */
.admin-root[b-admin]  .adm-form {
    padding: 20px;
    max-width: 560px;
}

.admin-root[b-admin]  .adm-form-grid {
    margin-top: 14px;
}

.admin-root[b-admin]  .adm-span {
    grid-column: 1 / -1;
}

.admin-root[b-admin]  .adm-form .validation-message {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    margin-top: 3px;
}

.admin-root[b-admin]  .adm-saved {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-cyan);
    margin-top: 8px;
}

/* ---- Tables (Employees & Roles, Roles) ---------------------------------- */
.admin-root[b-admin]  .adm-table-wrap {
    overflow-x: auto;
}

.admin-root[b-admin]  .adm-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--hub-font-sans);
    font-size: 12px;
    color: var(--hub-text);
}

    .admin-root[b-admin]  .adm-table thead tr,
    .admin-root[b-admin]  .adm-table tbody tr.adm-row {
        border-bottom: 1px solid var(--hub-border);
    }

    .admin-root[b-admin]  .adm-table th {
        text-align: left;
        padding: 6px 8px;
        color: var(--hub-muted-dark);
        font-family: var(--hub-font-mono);
        font-size: 9.5px;
        font-weight: 700;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .admin-root[b-admin]  .adm-table td {
        padding: 7px 8px;
        vertical-align: middle;
    }

    .admin-root[b-admin]  .adm-table .center {
        text-align: center;
    }

    .admin-root[b-admin]  .adm-table .right {
        text-align: right;
    }

    /* Wide enough for Confirm + Cancel, so asking doesn't move the columns. */
    .admin-root[b-admin]  .adm-table .adm-status {
        width: 160px;
        white-space: nowrap;
    }

    /* Employees: fixed columns (the name takes what's left), so the skeleton's
       columns are the loaded ones and nothing in a row can widen its column. */
    .admin-root[b-admin]  .adm-table.adm-emp-table {
        table-layout: fixed;
        min-width: 900px;
    }

        .admin-root[b-admin]  .adm-emp-table th:nth-child(2) { width: 220px; }
        .admin-root[b-admin]  .adm-emp-table th:nth-child(3) { width: 150px; }
        .admin-root[b-admin]  .adm-emp-table th:nth-child(4) { width: 170px; }
        .admin-root[b-admin]  .adm-emp-table th:nth-child(5) { width: 120px; }

        .admin-root[b-admin]  .adm-emp-table td {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .admin-root[b-admin]  .adm-table .muted {
        color: var(--hub-muted);
    }

    .admin-root[b-admin]  .adm-table tr.off {
        opacity: 0.45;
    }

    .admin-root[b-admin]  .adm-table .form-select {
        padding: 5px 28px 5px 8px;
        font-size: 11px;
        width: auto;
        min-width: 120px;
    }

.admin-root[b-admin]  .adm-emp {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-root[b-admin]  .adm-emp-name {
    font-weight: 600;
    color: var(--hub-text);
}

.admin-root[b-admin]  .adm-emp-email {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
}

/* Status button: btnStyle(colour) with a neutral border and no fill. */
.admin-root[b-admin]  .adm-status-btn {
    border: 1px solid var(--hub-border) !important;
    background: transparent !important;
    font-size: 10px !important;
    padding: 5px 9px !important;
}

    .admin-root[b-admin]  .adm-status-btn.deactivate {
        color: var(--hub-magenta) !important;
    }

    .admin-root[b-admin]  .adm-status-btn.reactivate {
        color: var(--hub-text) !important;
    }

    /* Its skeleton (the !important above would keep it a bare outline). */
    .admin-root[b-admin]  .adm-status-btn.hub-skel-as {
        border-color: transparent !important;
        background: color-mix(in srgb, var(--hub-text) 10%, transparent) !important;
    }

.admin-root[b-admin]  .adm-actions {
    display: inline-flex;
    gap: 6px;
    justify-content: flex-end;
}

.admin-root[b-admin]  .adm-you {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
}

/* Roles: a cyan category row above each group of tabs; role headers in the role's colour. */
.admin-root[b-admin]  .adm-group td {
    padding: 10px 8px 4px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-cyan);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-root[b-admin]  .adm-tab-name {
    display: flex;
    align-items: center;
    gap: 7px;
}

    .admin-root[b-admin]  .adm-tab-name .lu {
        font-size: 13px;
        color: var(--hub-muted);
    }

/* PERMISSION_ROLES colours (fixed in the prototype, both themes). */
.admin-root[b-admin]  .role-Admin { color: #FF00F0 !important; }
.admin-root[b-admin]  .role-Manager { color: #33ABE4 !important; }
.admin-root[b-admin]  .role-Sales { color: #4ade80 !important; }
.admin-root[b-admin]  .role-Artist { color: #facc15 !important; }
.admin-root[b-admin]  .role-Accounting { color: #f97316 !important; }
.admin-root[b-admin]  .role-Developer { color: #a78bfa !important; }
.admin-root[b-admin]  .role-Employee { color: #94a3b8 !important; }

/* ---- Labor Rates: one glass row per employee ---------------------------- */
.admin-root[b-admin]  .adm-rates {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 680px;
}

.admin-root[b-admin]  .adm-rate-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-root[b-admin]  .adm-rate-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--hub-panel2);
    border-radius: 7px;
    border: 1px solid var(--hub-border);
    flex-wrap: wrap;
}

.admin-root[b-admin]  .adm-rate-who {
    flex: 1 1 140px;
    min-width: 0;
}

.admin-root[b-admin]  .adm-rate-name {
    font-family: var(--hub-font-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hub-text);
}

.admin-root[b-admin]  .adm-rate-title {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
}

.admin-root[b-admin]  .adm-pay {
    display: flex;
    gap: 4px;
}

    .admin-root[b-admin]  .adm-pay button {
        padding: 5px 10px;
        border-radius: 6px;
        font-family: var(--hub-font-mono);
        font-size: 10px;
        font-weight: 700;
        cursor: pointer;
        border: 1px solid var(--hub-border);
        background: transparent;
        color: var(--hub-muted);
    }

        .admin-root[b-admin]  .adm-pay button.active {
            background: var(--hub-gradient);
            border-color: transparent;
            color: #fff;
        }

.admin-root[b-admin]  .adm-money {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .admin-root[b-admin]  .adm-money .dollar {
        position: absolute;
        left: 9px;
        top: 50%;
        transform: translateY(-50%);
        font-family: var(--hub-font-mono);
        font-size: 11.5px;
        color: var(--hub-muted-dark);
        pointer-events: none;
    }

    .admin-root[b-admin]  .adm-money input {
        padding-left: 20px;
    }

    .admin-root[b-admin]  .adm-money .per {
        font-family: var(--hub-font-mono);
        font-size: 9.5px;
        color: var(--hub-muted-dark);
        width: 18px;
    }

.admin-root[b-admin]  .adm-eff {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-cyan);
    width: 90px;
    text-align: right;
}

@media (max-width: 780px) {
    .admin-root[b-admin]  .adm-eff {
        width: auto;
    }
}
/* /Pages/ClockInOut.Page.razor.rz.scp.css */
/* ClockTab: directoryTileStyle status card, day bar, Today's Log panel, week/month totals. */
.clk[b-clock] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1560px;
}

.clk-status[b-clock] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 245px;
    padding: 36px;
}

.clk-eyebrow[b-clock] {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--hub-muted);
    text-transform: uppercase;
}

.clk-state[b-clock] {
    font-family: var(--hub-font-mono);
    font-size: 26px;
    font-weight: 800;
    color: var(--hub-muted-dark);
    margin-top: 6px;
}

    .clk-state.in[b-clock] {
        color: var(--hub-cyan);
    }

.clk-on[b-clock] {
    max-width: 100%;
    overflow: hidden;
    font-size: 13px;
    color: var(--hub-muted);
    margin-top: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.clk-job[b-clock] {
    width: 320px;
    max-width: 100%;
    margin-top: 18px;
}

.clk-status[b-clock]  .clk-button {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 8px;
    border: none;
    font-family: var(--hub-font-mono);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
}

    .clk-status[b-clock]  .clk-button.in {
        background: var(--hub-cyan);
        color: #04150c;
    }

    .clk-status[b-clock]  .clk-button.out {
        background: var(--hub-magenta);
        color: #2a0510;
    }

.clk-daybar[b-clock] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.clk-day[b-clock] {
    font-family: var(--hub-font-mono);
    font-size: 13px;
    font-weight: 700;
}

.clk-daynav[b-clock] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.clk-step[b-clock] {
    padding: 7px 9px;
}

.clk-date[b-clock] {
    position: relative;
    display: flex;
    align-items: center;
}

    .clk-date .lu[b-clock] {
        position: absolute;
        left: 10px;
        color: var(--hub-cyan);
        pointer-events: none;
        font-size: 13px;
    }

    .clk-date input[b-clock] {
        padding-left: 30px;
        font-family: var(--hub-font-mono);
        font-size: 11px;
    }

.clk-log[b-clock] {
    padding: 20px;
}

.clk-log-head[b-clock] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.clk-grid[b-clock] {
    display: grid;
    grid-template-columns: 1fr 1fr 0.8fr 2fr;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
}

.clk-cols[b-clock] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.clk-row[b-clock] {
    padding: 9px 10px;
    margin-bottom: 6px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 7px;
    font-size: 12px;
}

.clk-row-job[b-clock] {
    color: var(--hub-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clk-empty[b-clock] {
    font-size: 12.5px;
    color: var(--hub-muted-dark);
    padding: 8px 10px;
}

.clk-total[b-clock] {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--hub-border);
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.clk-total-hours[b-clock] {
    font-size: 15px;
    font-weight: 800;
    color: var(--hub-cyan);
}

.clk-sum[b-clock] {
    padding: 16px;
}

.clk-sum-hours[b-clock] {
    font-family: var(--hub-font-mono);
    font-size: 20px;
    font-weight: 800;
    margin-top: 4px;
}

@media (max-width: 575.98px) {
    .clk-status[b-clock] {
        padding: 24px 16px;
    }

    .clk-grid[b-clock] {
        grid-template-columns: 1fr 1fr 0.8fr;
    }

        .clk-grid > :nth-child(4)[b-clock] {
            grid-column: 1 / -1;
        }
}
/* /Pages/Customers.Page.razor.rz.scp.css */
/* Customers — the prototype's ClientsTab: search + Add button, count line and
   the logo-led-directory-grid of directoryTileStyle tiles (same tile as Team
   Directory, logo instead of a photo). */
.cus-toolbar[b-customers] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.cus-search[b-customers] {
    flex: 1;
}

.cus-count[b-customers] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
    margin-bottom: 14px;
}

.cus-empty[b-customers] {
    padding: 22px;
    color: var(--hub-muted);
    margin-bottom: 14px;
}

.cus-grid[b-customers] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    align-items: stretch;
}

/* Panel + directoryTileStyle({ padding: "28px 22px 20px", minHeight: 330 }) */
.cus-tile[b-customers] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    min-height: 330px;
    padding: 28px 22px 20px;
    color: var(--hub-text);
    font: inherit;
    cursor: pointer;
}

    .cus-tile:hover[b-customers] {
        transform: translateY(-3px);
    }

    .cus-tile:focus-visible[b-customers] {
        outline: 2px solid var(--hub-cyan);
        outline-offset: 2px;
    }

/* directoryMediaStyle() */
.cus-media[b-customers] {
    width: 112px;
    height: 112px;
    flex-shrink: 0;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

[data-bs-theme=dark] .cus-media[b-customers] {
    background: radial-gradient(circle at 92% 92%, rgba(255,0,226,0.20), transparent 38%), radial-gradient(circle at 8% 92%, rgba(0,178,255,0.20), transparent 42%), rgba(25,40,63,0.84);
    border: 1px solid rgba(131,202,255,0.68);
    box-shadow: 0 14px 34px rgba(0,0,0,0.32), 0 0 20px rgba(51,171,228,0.14), inset 0 1px 0 rgba(255,255,255,0.16);
}

[data-bs-theme=light] .cus-media[b-customers] {
    background: radial-gradient(circle at 92% 92%, rgba(255,0,220,0.14), transparent 36%), radial-gradient(circle at 8% 92%, rgba(0,173,255,0.13), transparent 40%), rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.98);
    box-shadow: 0 12px 28px rgba(35,75,112,0.14), inset 0 1px 0 #fff;
}

.cus-media[b-customers]  .cus-logo {
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
}

.cus-placeholder[b-customers] {
    font-size: 40px;
    color: var(--hub-cyan);
}

.cus-name[b-customers] {
    font-family: var(--hub-font-sans);
    font-size: 15px;
    font-weight: 700;
    margin-top: 22px;
    line-height: 1.25;
}

.cus-contact[b-customers] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted);
    margin-top: 5px;
}

.cus-divider[b-customers] {
    width: 76%;
    height: 1px;
    background: var(--hub-border);
    margin: 16px 0 12px;
}

.cus-meta[b-customers] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-cyan);
}

    .cus-meta.muted[b-customers] {
        color: var(--hub-muted-dark);
        margin-top: 6px;
    }

/* directoryArrowStyle() */
.cus-arrow-wrap[b-customers] {
    margin-top: auto;
    padding-top: 16px;
}

.cus-arrow[b-customers] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hub-border-bright);
    color: var(--hub-text);
}

@media (max-width: 575.98px) {
    .cus-toolbar[b-customers] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Pages/Directory.Page.razor.rz.scp.css */
/* Team Directory — the prototype's Directory: search, count line and the
   logo-led-directory-grid of directoryTileStyle tiles. */
.dir-search[b-directory] {
    max-width: 420px;
    margin-bottom: 8px;
}

.dir-count[b-directory] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
    margin-bottom: 14px;
}

.dir-grid[b-directory] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    align-items: stretch;
}

/* Panel + directoryTileStyle({ padding: "28px 22px 20px", minHeight: 340, ... }) */
.dir-tile[b-directory] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    min-height: 340px;
    padding: 28px 22px 20px;
    color: var(--hub-text);
    font: inherit;
    cursor: pointer;
}

    .dir-tile:hover[b-directory] {
        transform: translateY(-3px);
    }

    .dir-tile:focus-visible[b-directory] {
        outline: 2px solid var(--hub-cyan);
        outline-offset: 2px;
    }

    .dir-tile.deactivated[b-directory] {
        opacity: 0.5;
    }

/* directoryMediaStyle(active) */
.dir-media[b-directory] {
    width: 112px;
    height: 112px;
    flex-shrink: 0;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

[data-bs-theme=dark] .dir-media[b-directory] {
    background: radial-gradient(circle at 92% 92%, rgba(255,0,226,0.20), transparent 38%), radial-gradient(circle at 8% 92%, rgba(0,178,255,0.20), transparent 42%), rgba(25,40,63,0.84);
    border: 1px solid rgba(131,202,255,0.68);
    box-shadow: 0 14px 34px rgba(0,0,0,0.32), 0 0 20px rgba(51,171,228,0.14), inset 0 1px 0 rgba(255,255,255,0.16);
}

[data-bs-theme=light] .dir-media[b-directory] {
    background: radial-gradient(circle at 92% 92%, rgba(255,0,220,0.14), transparent 36%), radial-gradient(circle at 8% 92%, rgba(0,173,255,0.13), transparent 40%), rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.98);
    box-shadow: 0 12px 28px rgba(35,75,112,0.14), inset 0 1px 0 #fff;
}

[data-bs-theme] .dir-media.active[b-directory] {
    border-color: var(--hub-cyan);
}

[data-bs-theme=dark] .dir-media.active[b-directory] {
    box-shadow: 0 14px 34px rgba(0,0,0,0.32), 0 0 20px rgba(var(--hub-cyan-rgb), 0.16), inset 0 1px 0 rgba(255,255,255,0.16);
}

.dir-name-block[b-directory] {
    display: block;
    margin-top: 22px;
    width: 100%;
    min-width: 0;
}

.dir-name[b-directory] {
    display: block;
    font-family: var(--hub-font-sans);
    font-size: 16px;
    font-weight: 700;
    color: var(--hub-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dir-title[b-directory] {
    display: block;
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-muted);
    margin-top: 5px;
}

.dir-divider[b-directory] {
    display: block;
    width: 74%;
    border-top: 1px solid var(--hub-border);
    margin: 17px 0 14px;
}

.dir-status[b-directory] {
    display: block;
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-muted-dark);
    margin-bottom: 7px;
}

.dir-dept[b-directory] {
    display: block;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
}

.dir-arrow-wrap[b-directory] {
    display: block;
    margin-top: auto;
    padding-top: 16px;
}

/* directoryArrowStyle() */
.dir-arrow[b-directory] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hub-cyan);
    font-size: 17px;
}

[data-bs-theme=dark] .dir-arrow[b-directory] {
    border: 1px solid rgba(122,191,255,0.66);
    background: rgba(12,24,41,0.62);
    box-shadow: 0 0 18px rgba(51,171,228,0.16), inset 0 1px 0 rgba(255,255,255,0.10);
}

[data-bs-theme=light] .dir-arrow[b-directory] {
    border: 1px solid rgba(255,255,255,0.98);
    background: rgba(255,255,255,0.70);
    box-shadow: 0 8px 18px rgba(44,79,113,0.16), inset 0 1px 0 #fff;
}
/* /Pages/Home.Page.razor.rz.scp.css */
/* Home: a greeting card with the clock status, the user's job counts, their
   active jobs and tiles for the tabs they can open. */
.home[b-home] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 1200px;
}

.home-hero[b-home] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 30px;
}

.home-date[b-home] {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hub-cyan);
}

.home-greeting[b-home] {
    margin-top: 8px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.home-name[b-home] {
    background: var(--hub-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-role[b-home] {
    margin-top: 8px;
    font-size: 13px;
    color: var(--hub-muted);
}

.home-clock[b-home] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 260px;
    padding: 14px 16px;
    border: 1px solid var(--hub-border);
    border-radius: 12px;
    background: var(--hub-panel2);
    color: var(--hub-text);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

    .home-clock:hover[b-home] {
        border-color: var(--hub-cyan);
        color: var(--hub-text);
        transform: translateY(-1px);
    }

    .home-clock > .lu[b-home] {
        margin-left: auto;
        color: var(--hub-muted);
    }

.home-clock-dot[b-home] {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hub-muted-dark);
}

.home-clock.in .home-clock-dot[b-home] {
    background: #2fd47a;
    box-shadow: 0 0 0 4px rgba(47, 212, 122, 0.18);
    animation: home-pulse-b-home 2s ease-in-out infinite;
}

@keyframes home-pulse-b-home {
    50% { box-shadow: 0 0 0 7px rgba(47, 212, 122, 0.05); }
}

.home-clock-text[b-home] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-clock-state[b-home] {
    font-family: var(--hub-font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-clock-sub[b-home] {
    font-size: 12px;
    color: var(--hub-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-stats[b-home] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.home-stat[b-home] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
}

.home-stat-icon[b-home],
.home-link-icon[b-home] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(var(--hub-cyan-rgb), 0.12);
    color: var(--hub-cyan);
    font-size: 19px;
}

.home-stat:nth-child(2) .home-stat-icon[b-home] {
    background: rgba(var(--hub-magenta-rgb), 0.12);
    color: var(--hub-magenta);
}

.home-stat-value[b-home] {
    min-height: 30px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.home-stat-label[b-home] {
    font-size: 13px;
    font-weight: 600;
}

.home-stat-hint[b-home] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
}

.home-panel[b-home] {
    padding: 18px 20px;
}

.home-panel-head[b-home] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.home-more[b-home] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hub-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--hub-cyan);
    text-decoration: none;
}

.home-job[b-home] {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 130px 16px;
    align-items: center;
    gap: 14px;
    padding: 11px 10px;
    border-top: 1px solid var(--hub-border);
    border-radius: 0;
    color: var(--hub-text);
    text-decoration: none;
}

    a.home-job:hover[b-home] {
        background: rgba(var(--hub-cyan-rgb), 0.06);
        color: var(--hub-text);
    }

.home-job-number[b-home] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    font-family: var(--hub-font-mono);
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-job-title[b-home] {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-job-customer[b-home] {
    margin-left: 8px;
    font-weight: 400;
    color: var(--hub-muted);
}

.home-job-status[b-home] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hub-font-mono);
    font-size: 11px;
}

.home-job-chevron[b-home] {
    color: var(--hub-muted-dark);
}

.home-empty[b-home] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 10px 6px;
    border-top: 1px solid var(--hub-border);
    font-size: 13px;
    color: var(--hub-muted);
}

.home-links[b-home] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.home-link[b-home] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    color: var(--hub-text);
    text-decoration: none;
}

    .home-link:hover[b-home] {
        border-color: rgba(var(--hub-cyan-rgb), 0.55);
        color: var(--hub-text);
    }

.home-link-text[b-home] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-link-name[b-home] {
    font-size: 14px;
    font-weight: 700;
}

.home-link-blurb[b-home] {
    font-size: 12px;
    color: var(--hub-muted);
}

@media (max-width: 900px) {
    .home-stats[b-home] { grid-template-columns: 1fr; }
    .home-job[b-home] { grid-template-columns: minmax(0, 1fr) 16px; gap: 4px 10px; }
    .home-job-number[b-home], .home-job-title[b-home], .home-job-status[b-home] { grid-column: 1; }
    .home-job-chevron[b-home] { grid-column: 2; grid-row: 1 / span 3; }
}

@media (max-width: 480px) {
    .home-hero[b-home] { padding: 22px 18px; }
    .home-greeting[b-home] { font-size: 24px; }
    .home-clock[b-home] { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .home-clock.in .home-clock-dot[b-home] { animation: none; }
}
/* /Pages/JobDetail.Page.razor.rz.scp.css */
/* Job Detail — the prototype's JobDetail component. The .jd ::deep rules
   are shared with the child panels (Shared/Jobs/*) rendered inside it. */

.jd-back-group[b-jobdetail] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.jd-back[b-jobdetail] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin-bottom: 14px;
    font-family: var(--hub-font-mono);
    font-size: 12px;
    color: var(--hub-cyan);
    text-decoration: none;
}

.jd-back-group .jd-back[b-jobdetail] {
    margin-bottom: 0;
}

    .jd-back:hover[b-jobdetail] {
        text-decoration: underline;
    }

/* Stays at the top while the job scrolls under it. It takes the page's padding
   as its own, so at rest it sits where it always did. Sticky offsets count
   from inside the page's padding: -38px leaves 10px of its own
   padding showing above the buttons, and its background (the top bar's)
   comes in as the page starts to move. */
.jd-actions-row[b-jobdetail] {
    position: sticky;
    top: -38px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    /* The padding under the buttons stands in for the gap to the first panel. */
    margin: -24px -24px -10px;
    padding: 24px 24px 10px;
    background: var(--hub-bg);
}

@supports (animation-timeline: scroll()) {
    .jd-actions-row[b-jobdetail] {
        background: transparent;
        animation: jd-bar-stuck-b-jobdetail linear both;
        animation-timeline: scroll(nearest);
        animation-range: 0 14px;
    }
}

@keyframes jd-bar-stuck-b-jobdetail {
    to {
        background: var(--hub-bg);
        box-shadow: 0 1px 0 var(--hub-border), 0 10px 20px -12px rgba(0, 0, 0, 0.25);
    }
}

@media (max-width: 780px) {
    .jd-actions-row[b-jobdetail] {
        margin: -14px -14px -10px;
        padding: 14px 14px 10px;
        top: -18px;
    }
}

.jd-actions[b-jobdetail] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jd-confirm[b-jobdetail] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    font-family: var(--hub-font-mono);
    font-size: 11px;
}

.jd-head[b-jobdetail] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.jd-type[b-jobdetail] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
}

    .jd-type .lu[b-jobdetail] {
        font-size: 12px;
    }

.jd-title[b-jobdetail] {
    margin: 4px 0 0;
    font-family: var(--hub-font-sans);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--hub-text);
}

.jd-subtitle[b-jobdetail] {
    margin-top: 4px;
    font-size: 13px;
    color: var(--hub-muted);
}

/* Status: a select for job editors, a pill otherwise — in the statusMeta colour. */
.jd-status[b-jobdetail] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 7px;
    background: var(--hub-panel2);
    border: 1px solid currentColor;
    font-family: var(--hub-font-mono);
    font-size: 11.5px;
    outline: none;
}

    .jd-status.hub-status-pending[b-jobdetail] {
        border-color: var(--hub-border);
    }

    .jd-status option[b-jobdetail] {
        background: var(--hub-panel-solid);
        color: var(--hub-text);
    }

    .jd-status .lu[b-jobdetail] {
        font-size: 13px;
    }

select.jd-status[b-jobdetail] {
    cursor: pointer;
}

.jd-stats[b-jobdetail] {
    gap: 12px;
    margin-top: 20px;
}

.jd-stat[b-jobdetail] {
    padding: 14px;
}

.jd-stat-label[b-jobdetail] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hub-muted);
}

    .jd-stat-label .lu[b-jobdetail] {
        font-size: 11px;
    }

.jd-stat-value[b-jobdetail] {
    margin-top: 4px;
    font-family: var(--hub-font-mono);
    font-size: 17px;
    font-weight: 700;
    color: var(--hub-text);
    overflow-wrap: anywhere;
}

.jd-note[b-jobdetail] {
    margin: -4px 0 10px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
}

.jd-subjobs[b-jobdetail] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jd-subjob[b-jobdetail] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--hub-text);
}

    .jd-subjob:hover[b-jobdetail] {
        border-color: var(--hub-border-bright);
    }

.jd-subjob-icon[b-jobdetail] {
    font-size: 15px;
}

.jd-subjob-number[b-jobdetail] {
    font-family: var(--hub-font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--hub-cyan);
}

.jd-subjob-title[b-jobdetail] {
    font-size: 11.5px;
    color: var(--hub-muted);
}

.jd-subjob-status[b-jobdetail] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
}

.jd-timebar[b-jobdetail] {
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--hub-border);
}

    .jd-timebar > span[b-jobdetail] {
        display: block;
        height: 100%;
        background: var(--hub-cyan);
    }

.jd-notes[b-jobdetail] {
    font-size: 12.5px;
    color: var(--hub-muted);
    white-space: pre-wrap;
}

.jd-two-col[b-jobdetail] {
    gap: 16px;
    margin-top: 16px;
}

.jd-panel-flat[b-jobdetail] {
    padding: 18px;
    min-width: 0;
}

.jd-team[b-jobdetail] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jd-team-member[b-jobdetail] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jd-team-name[b-jobdetail] {
    font-size: 13px;
    color: var(--hub-text);
}

.jd-team-role[b-jobdetail] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted);
}

.jd-activity[b-jobdetail] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jd-activity-item[b-jobdetail] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
}

.jd-dot[b-jobdetail] {
    width: 6px;
    height: 6px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--hub-cyan);
    flex-shrink: 0;
}

.jd-actor[b-jobdetail] {
    color: var(--hub-text);
}

.jd-activity-time[b-jobdetail] {
    flex-shrink: 0;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
}

.jd-empty-state[b-jobdetail] {
    padding: 30px;
    text-align: center;
    font-size: 12.5px;
    color: var(--hub-muted-dark);
}

/* ---- Shared with the child panels (Shared/Jobs/*) ---- */
.jd[b-jobdetail]  .jd-panel {
    padding: 18px;
    margin-top: 16px;
}

.jd[b-jobdetail]  .jd-grow {
    flex: 1;
}

.jd[b-jobdetail]  .jd-min {
    min-width: 0;
}

.jd[b-jobdetail]  .jd-empty {
    font-size: 12.5px;
    color: var(--hub-muted-dark);
}

/* A label/value tile on panel2 (info fields, profitability figures, time log rows). */
.jd[b-jobdetail]  .jd-tile {
    padding: 10px 12px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 7px;
}

/* Small icon-only ghost button (task row actions). */
.jd[b-jobdetail]  .jd-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    border: 1px solid var(--hub-border);
    border-radius: 6px;
    background: none;
    color: var(--hub-muted);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

    .jd[b-jobdetail]  .jd-icon-btn:hover:not(:disabled) {
        color: var(--hub-text);
        border-color: var(--hub-border-bright);
    }

    .jd[b-jobdetail]  .jd-icon-btn:disabled {
        opacity: 0.35;
        cursor: default;
    }

    .jd[b-jobdetail]  .jd-icon-btn.danger:hover:not(:disabled) {
        color: var(--hub-red);
        border-color: var(--hub-red);
    }
/* /Pages/JobLog.Page.razor.rz.scp.css */
/* Job Log — the prototype's JobLog component. */

.jl-toolbar[b-joblog] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.jl-tabs[b-joblog] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hub-tab .lu[b-joblog] {
    font-size: 13px;
}

.jl-filters[b-joblog] {
    padding: 16px;
    margin-bottom: 16px;
}

.jl-dates[b-joblog] {
    display: flex;
    gap: 6px;
    min-width: 0;
}

    .jl-dates > input[b-joblog] {
        flex: 1;
        min-width: 0;
    }

.jl-toolbar-end[b-joblog] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.jl-search[b-joblog] {
    max-width: 420px;
    margin-bottom: 16px;
}

.jl-countline[b-joblog] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.jl-pagenav[b-joblog] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 0;
}

.jl-page-btn[b-joblog] {
    padding: 6px 10px !important;
}

.jl-page-text[b-joblog] {
    font-size: 11px;
}

.jl-list[b-joblog] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* One job = one glass row, laid out like the prototype's 9-column grid
   (minus the assignees/files columns the list API doesn't return). */
.jl-row[b-joblog] {
    display: grid;
    grid-template-columns: 120px 0.8fr 1fr 1.6fr 0.9fr 1.1fr 0.9fr 30px;
    gap: 12px;
    align-items: center;
    padding: 16px;
    cursor: pointer;
}

.jl-min[b-joblog] {
    min-width: 0;
}

/* Workflow / Handoff column (client video 1a): current phase · owner. */
.jl-workflow[b-joblog] {
    font-size: 12px;
    color: var(--hub-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .jl-workflow.none[b-joblog] {
        color: var(--hub-muted-dark);
    }

.jl-draft[b-joblog] {
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--hub-magenta);
    color: var(--hub-magenta);
    font-family: var(--hub-font-mono);
    font-size: 9px;
    text-transform: uppercase;
}

.jl-type[b-joblog] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
}

    .jl-type .lu[b-joblog] {
        font-size: 10px;
    }

.jl-number[b-joblog] {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-muted-dark);
}

.jl-date[b-joblog] {
    margin-top: 2px;
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-muted);
}

.jl-customer[b-joblog] {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--hub-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jl-title[b-joblog] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hub-text);
}

.jl-subtitle[b-joblog] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--hub-muted);
}

.jl-status[b-joblog] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hub-font-mono);
    font-size: 11px;
}

    .jl-status .lu[b-joblog] {
        font-size: 13px;
    }

.jl-hours[b-joblog] {
    margin-top: 4px;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted);
}

.jl-chevron[b-joblog] {
    font-size: 16px;
    color: var(--hub-muted-dark);
}

.jl-empty[b-joblog] {
    padding: 30px;
    text-align: center;
    font-size: 12.5px;
    color: var(--hub-muted-dark);
}

@media (max-width: 780px) {
    .jl-row[b-joblog] {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }

    .jl-chevron[b-joblog] {
        display: none;
    }
}

/* The count's line, so the list doesn't move when it fills in. */
.jl-countline .hub-count[b-joblog] {
    min-height: 1.5em;
}
/* /Pages/JobReport.Page.razor.rz.scp.css */
/* Client report — the prototype's ClientReportModal sheet. It is white
   "paper" in both themes on purpose (it's what gets printed / sent to the
   customer), so the sheet uses fixed print colours rather than theme tokens. */

.jr-toolbar[b-jobreport] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    max-width: 800px;
    margin: 0 auto 16px;
}

.jr-toolbar-actions[b-jobreport] {
    display: flex;
    gap: 10px;
}

.jr-back[b-jobreport] {
    font-family: var(--hub-font-mono);
    font-size: 12px;
    color: var(--hub-cyan);
    text-decoration: none;
}

    .jr-back:hover[b-jobreport] {
        text-decoration: underline;
    }

.jr-sheet[b-jobreport] {
    --jr-accent: #FF00F0;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 50px 56px;
    border-radius: 10px;
    background: #ffffff;
    color: #1a1c20;
    font-family: var(--hub-font-sans);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

    .jr-sheet.jr-print[b-jobreport] {
        --jr-accent: #33ABE4;
    }

.jr-header[b-jobreport] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 28px;
    border-bottom: 3px solid var(--jr-accent);
}

.jr-logo[b-jobreport] {
    display: block;
    height: 32px;
    width: auto;
}

.jr-company[b-jobreport] {
    margin-top: 6px;
    font-size: 10.5px;
    color: #888;
}

.jr-header-right[b-jobreport] {
    text-align: right;
}

.jr-kicker[b-jobreport] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
}

.jr-date[b-jobreport] {
    margin-top: 2px;
    font-size: 11.5px;
    color: #999;
}

.jr-type[b-jobreport] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jr-accent);
}

.jr-title[b-jobreport] {
    margin: 6px 0 2px;
    font-family: var(--hub-font-sans);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    color: #111;
}

.jr-prepared[b-jobreport] {
    margin-bottom: 26px;
    font-size: 14.5px;
    color: #555;
}

.jr-stats[b-jobreport] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.jr-stat[b-jobreport] {
    padding: 12px 14px;
    border-radius: 8px;
    background: #f7f8fa;
    border: 1px solid #ececef;
}

.jr-stat-label[b-jobreport] {
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #999;
}

.jr-stat-value[b-jobreport] {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #161719;
}

.jr-progress-block[b-jobreport] {
    margin-bottom: 30px;
}

.jr-progress-head[b-jobreport] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 11.5px;
    color: #666;
}

.jr-progress[b-jobreport] {
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: #ececef;
}

    .jr-progress > span[b-jobreport] {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, #33ABE4, #FF00F0);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

.jr-h2[b-jobreport] {
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ececef;
    font-family: var(--hub-font-sans);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #111;
}

.jr-details[b-jobreport] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 28px;
}

.jr-detail[b-jobreport] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #fafafb;
    border: 1px solid #f0f0f2;
    font-size: 12.5px;
}

.jr-detail-label[b-jobreport] {
    color: #888;
}

.jr-detail-value[b-jobreport] {
    font-weight: 600;
    text-align: right;
    color: #161719;
}

.jr-team[b-jobreport] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.jr-chip[b-jobreport] {
    padding: 5px 10px;
    border-radius: 6px;
    background: #f7f8fa;
    border: 1px solid #ececef;
    font-size: 12.5px;
    color: #161719;
}

.jr-list[b-jobreport] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 28px;
}

.jr-task[b-jobreport] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #161719;
}

.jr-mark[b-jobreport] {
    font-weight: 700;
    color: #ccc;
}

    .jr-mark.done[b-jobreport] {
        color: #33ABE4;
    }

.jr-grow[b-jobreport] {
    flex: 1;
}

.jr-done[b-jobreport] {
    color: #999;
    text-decoration: line-through;
}

.jr-owner[b-jobreport] {
    font-size: 11px;
    color: #999;
}

.jr-none[b-jobreport] {
    font-size: 12.5px;
    color: #999;
}

.jr-activity[b-jobreport] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 28px;
}

.jr-activity-item[b-jobreport] {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: #444;
}

    .jr-activity-item strong[b-jobreport] {
        color: #161719;
    }

.jr-activity-time[b-jobreport] {
    flex-shrink: 0;
    min-width: 70px;
    color: #999;
}

.jr-notes[b-jobreport] {
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: #333;
    white-space: pre-wrap;
}

.jr-footer[b-jobreport] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-top: 34px;
    padding-top: 16px;
    border-top: 1px solid #ececef;
    font-size: 11px;
    color: #aaa;
}

@media (max-width: 780px) {
    .jr-sheet[b-jobreport] {
        padding: 28px 20px;
    }

    .jr-stats[b-jobreport] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jr-details[b-jobreport] {
        grid-template-columns: 1fr;
    }
}

@media print {
    .jr-sheet[b-jobreport] {
        max-width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }
}
/* /Pages/Preview/ActivityFeed.Page.razor.rz.scp.css */
.af[b-dkzqj5kjoi] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.af-bar[b-dkzqj5kjoi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.af-filters[b-dkzqj5kjoi] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Employees picker */
.af-emp[b-dkzqj5kjoi] { position: relative; }

.af-emp-scrim[b-dkzqj5kjoi] {
    position: fixed;
    inset: 0;
    z-index: 39;
}

.af-emp-menu[b-dkzqj5kjoi] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    width: 240px;
    max-height: 340px;
    overflow-y: auto;
    margin-top: 6px;
    padding: 10px;
    background: var(--hub-panel-solid);
    border: 1px solid var(--hub-border);
    border-radius: 9px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
}

.af-emp-head[b-dkzqj5kjoi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.af-emp-title[b-dkzqj5kjoi] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.af-clear[b-dkzqj5kjoi] {
    background: none;
    border: none;
    padding: 0;
    color: var(--hub-magenta);
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    cursor: pointer;
}

.af-emp-list[b-dkzqj5kjoi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.af-emp-row[b-dkzqj5kjoi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--hub-text);
}

    .af-emp-row:hover[b-dkzqj5kjoi] { background: var(--hub-panel2); }

/* Day navigator */
.af-dates[b-dkzqj5kjoi] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.af-step[b-dkzqj5kjoi] { padding: 7px 9px; }

.af-date[b-dkzqj5kjoi] {
    position: relative;
    display: flex;
    align-items: center;
}

    .af-date > .lu[b-dkzqj5kjoi] {
        position: absolute;
        left: 10px;
        font-size: 13px;
        pointer-events: none;
    }

    .af-date > input[b-dkzqj5kjoi] {
        padding-left: 30px;
        font-family: var(--hub-font-mono);
        font-size: 11px;
    }

/* Single-day panel */
.af-panel[b-dkzqj5kjoi] { padding: 20px; }

.af-list[b-dkzqj5kjoi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.af-row[b-dkzqj5kjoi] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 8px;
    color: var(--hub-text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

    .af-row:hover[b-dkzqj5kjoi] { border-color: var(--hub-border-bright); }

    .af-row.static[b-dkzqj5kjoi] { cursor: default; }

.af-row-sm[b-dkzqj5kjoi] {
    gap: 8px;
    padding: 9px 10px;
    border-radius: 7px;
}

/* Category tone */
.cyan[b-dkzqj5kjoi] { --af-tone: var(--hub-cyan); }
.magenta[b-dkzqj5kjoi] { --af-tone: var(--hub-magenta); }
.text[b-dkzqj5kjoi] { --af-tone: var(--hub-text); }

.af-icon[b-dkzqj5kjoi] {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--af-tone) 14%, transparent);
    color: var(--af-tone);
    font-size: 12px;
}

.af-icon-sm[b-dkzqj5kjoi] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 10px;
}

.af-min[b-dkzqj5kjoi] { min-width: 0; }
.af-grow[b-dkzqj5kjoi] { flex: 1; }

.af-text[b-dkzqj5kjoi] {
    font-size: 12.5px;
    color: var(--hub-text);
}

.af-cat[b-dkzqj5kjoi] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.af-ago[b-dkzqj5kjoi] {
    flex-shrink: 0;
    margin-top: 2px;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
}

.af-empty[b-dkzqj5kjoi] {
    font-size: 12.5px;
    color: var(--hub-muted-dark);
}

/* One column per picked employee */
.af-columns[b-dkzqj5kjoi] {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.af-column[b-dkzqj5kjoi] {
    width: 240px;
    min-width: 240px;
    flex-shrink: 0;
}

.af-column-head[b-dkzqj5kjoi] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 8px;
}

.af-column-name[b-dkzqj5kjoi] {
    font-size: 12px;
    font-weight: 700;
    color: var(--hub-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.af-column-count[b-dkzqj5kjoi] {
    font-family: var(--hub-font-mono);
    font-size: 9px;
    color: var(--hub-muted-dark);
}

.af-column-list[b-dkzqj5kjoi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.af-text-sm[b-dkzqj5kjoi] {
    font-size: 11.5px;
    color: var(--hub-text);
}

.af-ago-sm[b-dkzqj5kjoi] {
    font-family: var(--hub-font-mono);
    font-size: 9px;
    color: var(--hub-muted-dark);
    margin-top: 2px;
}

.af-empty-sm[b-dkzqj5kjoi] {
    padding: 0 2px;
    font-size: 11.5px;
    color: var(--hub-muted-dark);
}
/* /Pages/Preview/Announcements.Page.razor.rz.scp.css */
/* AnnouncementsTab: filter tabs + New button, then a 3-col grid (maxWidth 1000). */
.an[b-9fg3szpxbu] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.an-top[b-9fg3szpxbu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.an-filters[b-9fg3szpxbu] {
    display: flex;
    gap: 6px;
}

    .an-filters .hub-tab[b-9fg3szpxbu] {
        text-transform: none;
        letter-spacing: 0;
    }

.an-new[b-9fg3szpxbu] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.an-grid[b-9fg3szpxbu] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 1000px;
}

@media (max-width: 780px) {
    .an-grid[b-9fg3szpxbu] { grid-template-columns: 1fr; }
}

.an-card[b-9fg3szpxbu] {
    position: relative;
    padding: 0;
    overflow: hidden;
}

    .an-card.unread[b-9fg3szpxbu] { border-color: rgba(var(--hub-magenta-rgb), 0.53); }

.an-new-badge[b-9fg3szpxbu] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 12px;
    padding: 3px 9px 3px 7px;
    font-family: var(--hub-font-mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hub-magenta);
}

    .an-new-badge > span[b-9fg3szpxbu] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--hub-magenta);
        flex-shrink: 0;
    }

.an-hero[b-9fg3szpxbu] {
    height: 100px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .an-hero.placeholder[b-9fg3szpxbu] {
        background: linear-gradient(135deg, rgba(var(--hub-cyan-rgb), 0.2), rgba(var(--hub-magenta-rgb), 0.2));
    }

        .an-hero.placeholder .lu[b-9fg3szpxbu] {
            font-size: 26px;
            color: var(--hub-text);
            opacity: 0.5;
        }

.an-body[b-9fg3szpxbu] { padding: 14px; }

.an-meta[b-9fg3szpxbu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.an-tag[b-9fg3szpxbu] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-cyan);
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.33);
    background: rgba(var(--hub-cyan-rgb), 0.1);
    padding: 2px 7px;
    border-radius: 5px;
}

.an-date[b-9fg3szpxbu] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
}

.an-title[b-9fg3szpxbu] {
    font-family: var(--hub-font-sans);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--hub-text);
    margin-top: 7px;
}

    .an-title.unread[b-9fg3szpxbu] { font-weight: 800; }

.an-short[b-9fg3szpxbu] {
    font-family: var(--hub-font-sans);
    font-size: 11.5px;
    color: var(--hub-muted);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.an-empty[b-9fg3szpxbu] {
    grid-column: 1 / -1;
    padding: 20px 0;
    text-align: center;
    font-family: var(--hub-font-sans);
    font-size: 12.5px;
    color: var(--hub-muted-dark);
}
/* /Pages/Preview/AnnouncementsDetailModal.razor.rz.scp.css */
/* AnnouncementDetailModal: Panel { width: 560, maxWidth: "94vw", padding: 0, maxHeight: "90vh" } */
.an-backdrop[b-xkr39vmvhb] { background: rgba(0, 0, 0, 0.65); }

.an-detail-dialog[b-xkr39vmvhb] {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 575.98px) {
    .an-detail-dialog[b-xkr39vmvhb] { max-width: 94vw; }
}

.an-detail-panel[b-xkr39vmvhb] {
    padding: 0;
    max-height: 90vh;
    overflow-y: auto;
}

.an-detail-hero[b-xkr39vmvhb] {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.an-detail-body[b-xkr39vmvhb] { padding: 24px; }

.an-detail-head[b-xkr39vmvhb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.an-detail-tag[b-xkr39vmvhb] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-cyan);
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.33);
    background: rgba(var(--hub-cyan-rgb), 0.1);
    padding: 2px 8px;
    border-radius: 5px;
}

.an-detail-x[b-xkr39vmvhb] { font-size: 18px; }

.an-detail-title[b-xkr39vmvhb] {
    font-family: var(--hub-font-sans);
    font-size: 20px;
    font-weight: 700;
    color: var(--hub-text);
    margin-top: 10px;
}

.an-detail-by[b-xkr39vmvhb] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
    margin-top: 4px;
}

.an-detail-action[b-xkr39vmvhb] {
    width: 100%;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .an-detail-action:disabled[b-xkr39vmvhb] { opacity: 0.6; cursor: default; }

.an-detail-text[b-xkr39vmvhb] {
    margin-top: 16px;
    font-family: var(--hub-font-sans);
    font-size: 13.5px;
    color: var(--hub-text);
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Pages/Preview/AnnouncementsNewModal.razor.rz.scp.css */
/* NewAnnouncementModal: Panel { width: 640, maxWidth: "94vw", padding: 24, maxHeight: "92vh" } */
.an-new-backdrop[b-q8gye86tef] { background: rgba(0, 0, 0, 0.65); }

.an-new-dialog[b-q8gye86tef] {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 575.98px) {
    .an-new-dialog[b-q8gye86tef] { max-width: 94vw; }
}

.an-new-panel[b-q8gye86tef] {
    padding: 24px;
    max-height: 92vh;
    overflow-y: auto;
}

.an-new-head[b-q8gye86tef] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.an-new-x[b-q8gye86tef] { font-size: 18px; }

.an-new-form[b-q8gye86tef] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.an-new-label[b-q8gye86tef] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
}

    .an-new-label.mt[b-q8gye86tef] { margin-top: 8px; }

.an-new-hint[b-q8gye86tef] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
    line-height: 1.5;
    margin-top: -4px;
}

.an-new-hero-row[b-q8gye86tef] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.an-new-hero[b-q8gye86tef] {
    width: 100px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 7px;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--hub-muted-dark);
    font-size: 20px;
}

    .an-new-hero img[b-q8gye86tef] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.an-new-small[b-q8gye86tef] {
    padding: 7px 11px;
    font-size: 11px;
    margin: 0;
}

.an-new-icon-btn[b-q8gye86tef] {
    background: none;
    border: none;
    color: var(--hub-muted-dark);
    cursor: pointer;
}

.an-new-swatches[b-q8gye86tef] {
    display: flex;
    gap: 8px;
}

.an-new-swatch[b-q8gye86tef] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--hub-border);
}

    .an-new-swatch.default[b-q8gye86tef] { background: linear-gradient(135deg, var(--hub-panel-solid), var(--hub-panel2)); }
    .an-new-swatch.active[b-q8gye86tef] { border-color: var(--hub-cyan); }

/* RichAnnouncementEditor: toolbar strip over the editing area. */
.an-new-editor[b-q8gye86tef] { position: relative; }

.an-new-toolbar[b-q8gye86tef] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.an-new-tool[b-q8gye86tef],
.an-new-tool-select[b-q8gye86tef] {
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel-solid);
    color: var(--hub-text);
    font-family: var(--hub-font-sans);
    font-size: 12.5px;
    cursor: pointer;
}

.an-new-tool[b-q8gye86tef] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 0 7px;
    font-weight: 700;
}

.an-new-tool-select[b-q8gye86tef] {
    font-size: 11.5px;
    padding: 0 6px;
}

.an-new-a[b-q8gye86tef] {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    text-decoration: underline;
    text-decoration-color: var(--hub-magenta);
    text-decoration-thickness: 2px;
}

.an-new-emoji[b-q8gye86tef] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    margin-top: 4px;
    width: 220px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    background: var(--hub-panel-solid);
    border: 1px solid var(--hub-border);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

    .an-new-emoji button[b-q8gye86tef] {
        background: none;
        border: none;
        font-size: 18px;
        cursor: pointer;
        padding: 3px;
    }

.an-new-text[b-q8gye86tef] {
    display: block;
    width: 100%;
    min-height: 220px;
    max-height: 360px;
    resize: vertical;
    padding: 14px;
    background: var(--hub-panel-solid);
    color: var(--hub-text);
    border: 1px solid var(--hub-border);
    border-radius: 0 0 8px 8px;
    font-family: var(--hub-font-sans);
    font-size: 13.5px;
    line-height: 1.6;
    outline: none;
}

.an-new-choice[b-q8gye86tef] {
    display: flex;
    gap: 6px;
}

.an-new-opt[b-q8gye86tef] {
    flex: 1;
    padding: 8px 10px;
    border-radius: 7px;
    border: 1px solid var(--hub-border);
    background: transparent;
    color: var(--hub-muted);
    font-family: var(--hub-font-mono);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

    .an-new-opt.cyan[b-q8gye86tef] {
        border-color: var(--hub-cyan);
        background: rgba(var(--hub-cyan-rgb), 0.12);
        color: var(--hub-cyan);
    }

    .an-new-opt.magenta[b-q8gye86tef] {
        border-color: var(--hub-magenta);
        background: rgba(var(--hub-magenta-rgb), 0.1);
        color: var(--hub-magenta);
    }

.an-new-action[b-q8gye86tef] {
    flex: 1;
    justify-content: center;
    padding: 8px 10px;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
}

/* EmployeeMultiSelect: name chips in a scrolling box. */
.an-new-people[b-q8gye86tef] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    max-height: 160px;
    overflow-y: auto;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 7px;
}

.an-new-chip[b-q8gye86tef] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 20px;
    border: 1px solid var(--hub-border);
    background: transparent;
    color: var(--hub-muted);
    font-family: var(--hub-font-sans);
    font-size: 11.5px;
    cursor: pointer;
}

    .an-new-chip.on[b-q8gye86tef] {
        border-color: var(--hub-cyan);
        background: rgba(var(--hub-cyan-rgb), 0.15);
        color: var(--hub-cyan);
    }

    .an-new-chip .lu[b-q8gye86tef] { font-size: 10px; }

.an-new-when[b-q8gye86tef] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .an-new-when > span[b-q8gye86tef] {
        flex-shrink: 0;
        font-family: var(--hub-font-mono);
        font-size: 10.5px;
        color: var(--hub-muted-dark);
    }

    .an-new-when > input[b-q8gye86tef] { flex: 1; }

    .an-new-when > .an-new-time[b-q8gye86tef] {
        flex: 0 0 110px;
    }

.an-new-send[b-q8gye86tef] {
    width: 100%;
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .an-new-send:disabled[b-q8gye86tef] {
        opacity: 0.5;
        cursor: not-allowed;
    }
/* /Pages/Preview/Approvals.Page.razor.rz.scp.css */
.ap[b-mazbe68cvq] {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ap-panel[b-mazbe68cvq] { padding: 20px; }

.ap-empty[b-mazbe68cvq] { font-size: 12.5px; color: var(--hub-muted-dark); }

.ap-list[b-mazbe68cvq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ap-row[b-mazbe68cvq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 7px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

    .ap-row:hover[b-mazbe68cvq] { border-color: var(--hub-border-bright); }

.ap-main[b-mazbe68cvq] { flex: 1; min-width: 0; }
.ap-title[b-mazbe68cvq] { font-size: 13px; color: var(--hub-text); }
.ap-sub[b-mazbe68cvq] { font-family: var(--hub-font-mono); font-size: 10.5px; color: var(--hub-muted); }
.ap-dollar[b-mazbe68cvq] { font-size: 16px; color: var(--hub-magenta); }

@media (max-width: 560px) {
    .ap-row[b-mazbe68cvq] { flex-wrap: wrap; }
    .ap-main[b-mazbe68cvq] { flex-basis: calc(100% - 46px); }
}
/* /Pages/Preview/ApprovalsDetailModal.razor.rz.scp.css */
.apd-dialog[b-11f10dhcyq] { max-width: 460px; }
.apd[b-11f10dhcyq] { padding: 24px; }

.apd-head[b-11f10dhcyq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.apd-person[b-11f10dhcyq] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.apd-name[b-11f10dhcyq] { font-size: 15px; font-weight: 700; color: var(--hub-text); }
.apd-role[b-11f10dhcyq] { font-family: var(--hub-font-mono); font-size: 11px; color: var(--hub-cyan); }

.apd-job[b-11f10dhcyq] { font-size: 16px; font-weight: 700; color: var(--hub-text); margin-bottom: 4px; }
.apd-number[b-11f10dhcyq] { font-family: var(--hub-font-mono); font-size: 11px; color: var(--hub-muted-dark); margin-bottom: 16px; }

.apd-grid[b-11f10dhcyq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.apd-cell[b-11f10dhcyq] {
    padding: 9px 11px;
    border-radius: 7px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
}

.apd-reason[b-11f10dhcyq] { margin-bottom: 20px; }

.apd-value[b-11f10dhcyq] { margin-top: 3px; font-size: 13px; color: var(--hub-text); }
.apd-cap[b-11f10dhcyq] { text-transform: capitalize; }

.apd-num[b-11f10dhcyq] {
    margin-top: 3px;
    font-family: var(--hub-font-mono);
    font-size: 15px;
    font-weight: 800;
}

    .apd-num.cyan[b-11f10dhcyq] { color: var(--hub-cyan); }
    .apd-num.magenta[b-11f10dhcyq] { color: var(--hub-magenta); }

.apd-team[b-11f10dhcyq] { margin-bottom: 20px; }
.apd-team-label[b-11f10dhcyq] { margin-bottom: 6px; }
.apd-chips[b-11f10dhcyq] { display: flex; flex-wrap: wrap; gap: 6px; }

.apd-chip[b-11f10dhcyq] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 4px;
    border-radius: 20px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    font-size: 11px;
    color: var(--hub-text);
}

.apd-actions[b-11f10dhcyq] { display: flex; gap: 8px; }
    .apd-actions .btn[b-11f10dhcyq] { flex: 1; }
/* /Pages/Preview/AssetLibrary.Page.razor.rz.scp.css */
/* AssetLibraryTab, AssetDetailModal and UpcBatchModal. */

/* assetStatusColor() / the stat tile colours. */
.al-tone-cyan[b-vncpdcr9k1], .al-tone-import[b-vncpdcr9k1] { --tone: var(--hub-cyan); --tone-rgb: var(--hub-cyan-rgb); }
.al-tone-alert[b-vncpdcr9k1] { --tone: var(--hub-magenta); --tone-rgb: var(--hub-magenta-rgb); }
.al-tone-ready[b-vncpdcr9k1] { --tone: rgb(34, 197, 94); --tone-rgb: 34, 197, 94; }
.al-tone-warn[b-vncpdcr9k1] { --tone: rgb(245, 158, 11); --tone-rgb: 245, 158, 11; }
.al-tone-violet[b-vncpdcr9k1] { --tone: rgb(139, 92, 246); --tone-rgb: 139, 92, 246; }
.al-tone-neutral[b-vncpdcr9k1] { --tone: var(--hub-text); --tone-rgb: var(--hub-cyan-rgb); }

.al-tone-text[b-vncpdcr9k1] { color: var(--tone); }

/* assetPillStyle() */
.al-pills[b-vncpdcr9k1] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.al-pill[b-vncpdcr9k1] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 99px;
    border: 1px solid rgba(var(--tone-rgb), 0.4);
    background: rgba(var(--tone-rgb), 0.09);
    font-family: var(--hub-font-mono);
    font-size: 8.5px;
    font-weight: 800;
    color: var(--tone);
}

/* btnStyle(colour) for the green / amber / neutral buttons. */
.al-tone-btn[b-vncpdcr9k1] {
    --bs-btn-color: var(--tone);
    --bs-btn-hover-color: var(--tone);
    --bs-btn-active-color: var(--tone);
    --bs-btn-disabled-color: var(--tone);
    --bs-btn-bg: rgba(var(--tone-rgb), 0.09);
    --bs-btn-hover-bg: rgba(var(--tone-rgb), 0.16);
    --bs-btn-active-bg: rgba(var(--tone-rgb), 0.16);
    --bs-btn-disabled-bg: rgba(var(--tone-rgb), 0.09);
    --bs-btn-border-color: var(--tone);
    --bs-btn-hover-border-color: var(--tone);
    --bs-btn-active-border-color: var(--tone);
    --bs-btn-disabled-border-color: var(--tone);
}

    .al-tone-btn.al-tone-neutral[b-vncpdcr9k1] {
        --bs-btn-bg: var(--hub-bg);
        --bs-btn-hover-bg: var(--hub-panel2);
        --bs-btn-border-color: var(--hub-border-bright);
        --bs-btn-hover-border-color: var(--hub-border-bright);
    }

.al-icon-btn[b-vncpdcr9k1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.al-banner[b-vncpdcr9k1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px;
    margin-bottom: 16px;
}

.al-banner-title[b-vncpdcr9k1] {
    font-size: 17px;
    font-weight: 800;
}

.al-banner-text[b-vncpdcr9k1] {
    max-width: 760px;
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--hub-muted);
}

.al-stats[b-vncpdcr9k1] { margin-bottom: 16px; }

.al-stat[b-vncpdcr9k1] { padding: 14px; }

    .al-stat .hub-eyebrow[b-vncpdcr9k1] { color: var(--tone); }

.al-stat-value[b-vncpdcr9k1] {
    font-family: var(--hub-font-mono);
    font-size: 23px;
    font-weight: 900;
    color: var(--tone);
}

.al-filters[b-vncpdcr9k1] {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 9px;
    padding: 14px;
    margin-bottom: 16px;
}

.al-toolbar[b-vncpdcr9k1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.al-count[b-vncpdcr9k1] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted);
}

.al-toolbar-actions[b-vncpdcr9k1] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.al-cards[b-vncpdcr9k1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.al-card[b-vncpdcr9k1] {
    min-height: 310px;
    padding: 0;
    text-align: left;
    color: var(--hub-text);
    cursor: pointer;
}

    .al-card:hover[b-vncpdcr9k1] { transform: translateY(-2px); }

.al-card-body[b-vncpdcr9k1] { padding: 14px; }

.al-card-head[b-vncpdcr9k1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.al-card-name[b-vncpdcr9k1] {
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.25;
}

.al-star[b-vncpdcr9k1] {
    flex-shrink: 0;
    font-size: 14px;
    color: rgb(34, 197, 94);
}

.al-card-meta[b-vncpdcr9k1] {
    margin-top: 5px;
    font-family: var(--hub-font-mono);
    font-size: 9px;
    color: var(--hub-muted);
}

.al-card-status[b-vncpdcr9k1] {
    margin-top: 12px;
    font-family: var(--hub-font-mono);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.al-card-id[b-vncpdcr9k1] {
    margin-top: 6px;
    font-size: 10.5px;
    color: var(--hub-muted-dark);
}

.al-empty[b-vncpdcr9k1] {
    padding: 36px;
    text-align: center;
    color: var(--hub-muted);
}

/* Modals */
.al-backdrop[b-vncpdcr9k1] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .72);
}

.al-modal[b-vncpdcr9k1] {
    width: 980px;
    max-width: 96vw;
    max-height: 90vh;
    overflow-y: auto;
    padding: 0;
    background: var(--hub-panel-solid);
}

    .al-modal.wide[b-vncpdcr9k1] {
        width: 1120px;
        max-height: 92vh;
    }

.al-modal-head[b-vncpdcr9k1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--hub-border);
}

.al-modal-title[b-vncpdcr9k1] {
    font-size: 21px;
    font-weight: 800;
}

.al-close[b-vncpdcr9k1] {
    display: flex;
    align-items: center;
    font-size: 15px;
}

.al-detail[b-vncpdcr9k1] {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
    gap: 20px;
    padding: 20px;
}

.al-box[b-vncpdcr9k1] {
    border-radius: 8px;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel2);
}

.al-desc[b-vncpdcr9k1] {
    margin-top: 12px;
    padding: 14px;
    border-radius: 10px;
}

.al-desc-text[b-vncpdcr9k1] {
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--hub-muted);
}

.al-facts[b-vncpdcr9k1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.al-fact[b-vncpdcr9k1] { padding: 9px 11px; }

.al-fact-label[b-vncpdcr9k1] {
    font-family: var(--hub-font-mono);
    font-size: 8.5px;
    text-transform: uppercase;
    color: var(--hub-muted-dark);
}

.al-fact-value[b-vncpdcr9k1] {
    margin-top: 3px;
    font-size: 11.5px;
    overflow-wrap: anywhere;
}

.al-use[b-vncpdcr9k1] {
    margin-top: 14px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.33);
    background: rgba(var(--hub-cyan-rgb), 0.06);
}

.al-use-row[b-vncpdcr9k1] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
}

.al-use-note[b-vncpdcr9k1] {
    margin-top: 9px;
    font-family: var(--hub-font-mono);
    font-size: 9px;
    color: var(--hub-muted);
}

.al-links[b-vncpdcr9k1] { margin-top: 12px; }

.al-link[b-vncpdcr9k1] {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 7px;
    border: 1px solid var(--hub-border);
    font-size: 11.5px;
}

.al-actions[b-vncpdcr9k1] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* UPC batch finder */
.al-upc-body[b-vncpdcr9k1] { padding: 20px; }

.al-upc-drop[b-vncpdcr9k1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px;
}

.al-upc-drop-title[b-vncpdcr9k1] {
    font-size: 14px;
    font-weight: 800;
}

.al-upc-drop-text[b-vncpdcr9k1] {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--hub-muted);
}

.al-upc-file[b-vncpdcr9k1] {
    margin-top: 7px;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-cyan);
}

.al-upc-stats[b-vncpdcr9k1] { margin-top: 14px; }

.al-upc-stat[b-vncpdcr9k1] { padding: 13px; }

.al-upc-stat-value[b-vncpdcr9k1] {
    margin-top: 3px;
    font-family: var(--hub-font-mono);
    font-size: 22px;
    font-weight: 900;
    color: var(--tone);
}

.al-upc-bar[b-vncpdcr9k1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0 10px;
}

.al-upc-list[b-vncpdcr9k1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.al-upc-row[b-vncpdcr9k1] {
    display: grid;
    grid-template-columns: 28px 76px minmax(220px, 1.5fr) minmax(130px, .8fr) minmax(140px, .8fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    cursor: pointer;
}

.al-upc-thumb[b-vncpdcr9k1] {
    width: 66px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid rgb(var(--asset-rgb));
    background: rgba(var(--asset-rgb), 0.2);
    font-family: var(--hub-font-mono);
    font-size: 8px;
    font-weight: 900;
    color: rgb(var(--asset-rgb));
}

.al-upc-name[b-vncpdcr9k1] {
    font-size: 12.5px;
    font-weight: 800;
}

.al-upc-sub[b-vncpdcr9k1] {
    margin-top: 2px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted);
}

    .al-upc-sub.al-tone-text[b-vncpdcr9k1] { color: var(--tone); }

.al-unmatched[b-vncpdcr9k1] { margin-top: 16px; }

.al-upc-empty[b-vncpdcr9k1] {
    padding: 38px 20px;
    text-align: center;
    font-size: 12.5px;
    color: var(--hub-muted-dark);
}

.al-upc-note[b-vncpdcr9k1] {
    margin-top: 16px;
    padding: 11px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    line-height: 1.5;
    color: var(--hub-muted);
}

@media (max-width: 850px) {
    .al-detail[b-vncpdcr9k1], .al-filters[b-vncpdcr9k1] { grid-template-columns: 1fr; }
    .al-cards[b-vncpdcr9k1] { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
    .al-use-row[b-vncpdcr9k1] { grid-template-columns: 1fr; }
    .al-upc-row[b-vncpdcr9k1] { grid-template-columns: 28px 76px 1fr; }
}
/* /Pages/Preview/AssetLibraryPreview.razor.rz.scp.css */
.alp[b-0o5nc4kedh] {
    position: relative;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    border: 1px solid var(--hub-border);
    background:
        radial-gradient(circle at 18% 20%, rgba(var(--asset-rgb), 0.4), transparent 42%),
        radial-gradient(circle at 88% 84%, rgba(var(--hub-magenta-rgb), 0.24), transparent 44%),
        linear-gradient(145deg, var(--hub-panel2), var(--hub-panel));
}

    .alp.large[b-0o5nc4kedh] {
        height: 240px;
        border-radius: 12px;
    }

.alp-grid[b-0o5nc4kedh] {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 18px 18px;
}

/* The glyph card is white in both themes, as in the prototype. */
.alp-glyph[b-0o5nc4kedh] {
    position: relative;
    min-width: 98px;
    min-height: 76px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .65);
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 12px 28px rgba(var(--asset-rgb), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--hub-font-mono);
    font-size: 13px;
    font-weight: 900;
    color: rgb(var(--asset-rgb));
}

.large .alp-glyph[b-0o5nc4kedh] {
    min-width: 150px;
    min-height: 120px;
    padding: 24px;
    font-size: 20px;
}

.alp-missing[b-0o5nc4kedh] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .48);
    font-family: var(--hub-font-mono);
    font-size: 12px;
    font-weight: 900;
    color: rgb(255, 255, 255);
}
/* /Pages/Preview/Benefits.Page.razor.rz.scp.css */
.bn[b-5gck0sk1wu] {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bn-cards[b-5gck0sk1wu] { gap: 14px; }

.bn-card[b-5gck0sk1wu] { padding: 16px; }
.bn-card-icon[b-5gck0sk1wu] { font-size: 18px; color: var(--hub-cyan); }

.bn-card-label[b-5gck0sk1wu] {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hub-text);
}

.bn-card-detail[b-5gck0sk1wu] {
    margin-top: 3px;
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-cyan);
}

.bn-panel[b-5gck0sk1wu] { padding: 20px; }
.bn-text[b-5gck0sk1wu] { font-size: 12.5px; color: var(--hub-muted); }
.bn-gap[b-5gck0sk1wu] { margin-bottom: 12px; }
/* /Pages/Preview/CompanyCalendar.Page.razor.rz.scp.css */
/* CompanyCalendarTab with the prototype's calendarSurfaceStyle /
   calendarCellStyle / calendarDayStyle / calendarEventStyle / nav group. */
.cc[b-9asr757vg3] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cc-top[b-9asr757vg3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* calendarNavGroupStyle */
.cc-group[b-9asr757vg3] {
    display: flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
}

[data-bs-theme=dark] .cc-group[b-9asr757vg3] {
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.53);
    box-shadow: 0 0 18px rgba(var(--hub-cyan-rgb), 0.13);
}

[data-bs-theme=light] .cc-group[b-9asr757vg3] {
    border: 1px solid rgba(255,255,255,0.98);
    background: rgba(255,255,255,0.82);
    box-shadow: 0 8px 22px rgba(35,72,108,0.14), inset 0 1px 0 rgba(255,255,255,1);
}

.cc-scope[b-9asr757vg3] {
    padding: 7px 13px;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    border: none;
    border-radius: 0;
}

.cc-sync[b-9asr757vg3] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* calendarSurfaceStyle */
.cc-surface[b-9asr757vg3] {
    border-radius: 14px;
    padding: 20px;
}

[data-bs-theme=dark] .cc-surface[b-9asr757vg3] {
    border: 1px solid rgba(76,170,235,0.34);
    background: linear-gradient(145deg, rgba(10,17,29,0.96), rgba(4,8,14,0.92));
    box-shadow: 0 20px 54px rgba(0,0,0,0.34), inset 0 1px 0 rgba(164,218,255,0.07);
}

[data-bs-theme=light] .cc-surface[b-9asr757vg3] {
    border: 1px solid rgba(255,255,255,0.96);
    background: radial-gradient(circle at 18% 8%, rgba(255,255,255,0.98), transparent 38%), linear-gradient(145deg, rgba(246,250,255,1), rgba(233,242,250,1));
    box-shadow: 0 18px 48px rgba(31,69,105,0.13), inset 0 1px 0 rgba(255,255,255,1);
}

.cc-month-row[b-9asr757vg3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cc-month[b-9asr757vg3] {
    font-family: var(--hub-font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--hub-text);
}

.cc-nav[b-9asr757vg3],
.cc-today[b-9asr757vg3] {
    font-family: var(--hub-font-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--hub-cyan);
    cursor: pointer;
    background: rgba(var(--hub-cyan-rgb), 0.10);
}

.cc-nav[b-9asr757vg3] {
    border: none;
    padding: 8px 11px;
    border-right: 1px solid rgba(var(--hub-cyan-rgb), 0.2);
}

.cc-today[b-9asr757vg3] {
    border: 1px solid var(--hub-cyan);
    border-radius: 10px;
    padding: 8px 13px;
}

/* 7 columns, gap 4 */
.cc-grid[b-9asr757vg3] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.cc-weekday[b-9asr757vg3] {
    text-align: center;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--hub-cyan);
    padding: 4px 0 6px;
    text-transform: uppercase;
}

.cc-cell[b-9asr757vg3] {
    min-height: 76px;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

    .cc-cell.out[b-9asr757vg3] { opacity: 0.42; }

[data-bs-theme=dark] .cc-cell[b-9asr757vg3] {
    border: 1px solid rgba(89,170,232,0.48);
    background: radial-gradient(circle at 86% 88%, rgba(255,0,240,0.13), transparent 38%), radial-gradient(circle at 66% 94%, rgba(0,153,255,0.20), transparent 44%), linear-gradient(145deg, rgba(23,35,56,1), rgba(11,20,34,1));
    box-shadow: inset 0 1px 0 rgba(216,239,255,0.08);
}

[data-bs-theme=light] .cc-cell[b-9asr757vg3] {
    border: 1px solid rgba(255,255,255,0.98);
    background: radial-gradient(circle at 92% 94%, rgba(255,0,222,0.15), transparent 34%), radial-gradient(circle at 68% 98%, rgba(0,155,255,0.18), transparent 42%), radial-gradient(circle at 16% 10%, rgba(255,255,255,1), transparent 58%), linear-gradient(145deg, rgba(249,252,255,1), rgba(231,241,250,1));
    box-shadow: 0 8px 22px rgba(34,76,112,0.12), inset 0 1px 0 rgba(255,255,255,1);
}

[data-bs-theme] .cc-cell.today[b-9asr757vg3] {
    border: 2px solid var(--hub-cyan);
    box-shadow: 0 0 0 1px rgba(var(--hub-cyan-rgb), 0.33), 0 0 18px rgba(var(--hub-cyan-rgb), 0.33);
}

.cc-day[b-9asr757vg3] {
    font-family: var(--hub-font-sans);
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    color: var(--hub-text);
    border-radius: 8px;
    padding: 2px;
}

    .cc-day.today[b-9asr757vg3] {
        color: var(--hub-bg);
        background: var(--hub-cyan);
        padding: 5px 8px;
        box-shadow: 0 0 16px rgba(var(--hub-cyan-rgb), 0.4);
    }

.cc-events[b-9asr757vg3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.cc-event[b-9asr757vg3] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--hub-font-mono);
    font-size: 8.5px;
    font-weight: 650;
    color: var(--hub-text);
    background: rgba(var(--hub-cyan-rgb), 0.12);
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.6);
    border-radius: 7px;
    padding: 3px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .cc-event.magenta[b-9asr757vg3] {
        background: rgba(var(--hub-magenta-rgb), 0.12);
        border-color: rgba(var(--hub-magenta-rgb), 0.6);
    }

.cc-dot[b-9asr757vg3],
.cc-day-dot[b-9asr757vg3] {
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--hub-cyan);
}

.cc-dot[b-9asr757vg3] {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 8px var(--hub-cyan);
}

    .cc-dot.magenta[b-9asr757vg3] {
        background: var(--hub-magenta);
        box-shadow: 0 0 8px var(--hub-magenta);
    }

.cc-more[b-9asr757vg3] {
    font-family: var(--hub-font-mono);
    font-size: 8.5px;
    color: var(--hub-muted-dark);
}

.cc-legend[b-9asr757vg3] {
    display: flex;
    gap: 14px;
    margin-top: 12px;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted);
}

    .cc-legend > div[b-9asr757vg3] {
        display: flex;
        align-items: center;
        gap: 6px;
    }

.cc-swatch[b-9asr757vg3] {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: var(--hub-cyan);
}

    .cc-swatch.magenta[b-9asr757vg3] { background: var(--hub-magenta); }

/* Day popup: Panel { width: 420, maxWidth: "92vw", padding: 22, maxHeight: "72vh" } */
.cc-backdrop[b-9asr757vg3] { background: var(--hub-overlay); }

.cc-day-dialog[b-9asr757vg3] {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 575.98px) {
    .cc-day-dialog[b-9asr757vg3] { max-width: 92vw; }
}

.cc-day-panel[b-9asr757vg3] {
    padding: 22px;
    max-height: 72vh;
    overflow-y: auto;
}

.cc-day-head[b-9asr757vg3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cc-none[b-9asr757vg3] {
    font-family: var(--hub-font-sans);
    font-size: 12.5px;
    color: var(--hub-muted-dark);
}

.cc-day-list[b-9asr757vg3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cc-day-item[b-9asr757vg3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    background: var(--hub-panel2);
    border-radius: 8px;
    border: 1px solid var(--hub-border);
    cursor: pointer;
    text-align: left;
    color: var(--hub-text);
}

    .cc-day-item:hover[b-9asr757vg3] { border-color: var(--hub-border-bright); }

.cc-day-dot[b-9asr757vg3] {
    width: 8px;
    height: 8px;
}

    .cc-day-dot.magenta[b-9asr757vg3] { background: var(--hub-magenta); }

.cc-day-text[b-9asr757vg3] {
    flex: 1;
    min-width: 0;
}

.cc-day-title[b-9asr757vg3] {
    font-family: var(--hub-font-sans);
    font-size: 12.5px;
    color: var(--hub-text);
}

.cc-day-meta[b-9asr757vg3] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
    margin-top: 2px;
}

@media (max-width: 780px) {
    .cc-surface[b-9asr757vg3] { padding: 12px; }
    .cc-cell[b-9asr757vg3] { min-height: 60px; padding: 5px; }
    .cc-event[b-9asr757vg3] { font-size: 8px; padding: 2px 4px; }
}
/* /Pages/Preview/CompanyCalendarMeetingModal.razor.rz.scp.css */
/* MeetingDetailModal: Panel { width: 460, maxWidth: "92vw", padding: 24, maxHeight: "86vh" } */
.cc-backdrop[b-zy26vz94tu] { background: var(--hub-overlay); }

.cc-mt-dialog[b-zy26vz94tu] {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 575.98px) {
    .cc-mt-dialog[b-zy26vz94tu] { max-width: 92vw; }
}

.cc-mt-panel[b-zy26vz94tu] {
    padding: 24px;
    max-height: 86vh;
    overflow-y: auto;
}

.cc-mt-head[b-zy26vz94tu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.cc-mt-kicker[b-zy26vz94tu] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cc-mt-x[b-zy26vz94tu] { font-size: 18px; }

.cc-mt-title[b-zy26vz94tu] {
    font-family: var(--hub-font-sans);
    font-size: 17px;
    font-weight: 700;
    color: var(--hub-text);
    margin-bottom: 10px;
}

.cc-mt-facts[b-zy26vz94tu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.cc-mt-box[b-zy26vz94tu] {
    padding: 9px 11px;
    background: var(--hub-panel2);
    border-radius: 7px;
    border: 1px solid var(--hub-border);
}

.cc-mt-value[b-zy26vz94tu] {
    font-family: var(--hub-font-sans);
    font-size: 12px;
    color: var(--hub-text);
    margin-top: 2px;
}

.cc-mt-teams[b-zy26vz94tu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(var(--hub-cyan-rgb), 0.14);
    border: 1px solid var(--hub-cyan);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--hub-cyan);
    font-family: var(--hub-font-mono);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 14px;
}

.cc-mt-organizer[b-zy26vz94tu] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.cc-mt-name[b-zy26vz94tu] {
    font-family: var(--hub-font-sans);
    font-size: 12.5px;
    color: var(--hub-text);
}

.cc-mt-desc[b-zy26vz94tu] {
    font-family: var(--hub-font-sans);
    font-size: 12.5px;
    color: var(--hub-muted);
    line-height: 1.5;
    margin-bottom: 14px;
}

.cc-mt-job[b-zy26vz94tu] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--hub-border);
    border-radius: 7px;
    padding: 8px 11px;
    cursor: pointer;
    color: var(--hub-cyan);
    font-family: var(--hub-font-mono);
    font-size: 11px;
    margin-bottom: 14px;
    text-align: left;
}

.cc-mt-att-label[b-zy26vz94tu] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.cc-mt-att[b-zy26vz94tu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cc-mt-person[b-zy26vz94tu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--hub-panel2);
    border-radius: 7px;
    border: 1px solid var(--hub-border);
}

.cc-mt-person-name[b-zy26vz94tu] {
    flex: 1;
    font-family: var(--hub-font-sans);
    font-size: 12px;
    color: var(--hub-text);
}

.cc-mt-rsvp[b-zy26vz94tu] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    border: 1px solid;
    border-radius: 5px;
    padding: 2px 7px;
}

    .cc-mt-rsvp.cyan[b-zy26vz94tu] { color: var(--hub-cyan); border-color: rgba(var(--hub-cyan-rgb), 0.33); }
    .cc-mt-rsvp.magenta[b-zy26vz94tu] { color: var(--hub-magenta); border-color: rgba(var(--hub-magenta-rgb), 0.33); }
    .cc-mt-rsvp.text[b-zy26vz94tu] { color: var(--hub-text); border-color: var(--hub-border); }
/* /Pages/Preview/ConnectedApps.Page.razor.rz.scp.css */
.ca[b-0cjd67ooyo] {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ca-app[b-0cjd67ooyo] {
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ca-app-main[b-0cjd67ooyo] { display: flex; gap: 12px; }

.ca-plug[b-0cjd67ooyo] { font-size: 18px; color: var(--hub-muted-dark); }
    .ca-plug.on[b-0cjd67ooyo] { color: var(--hub-cyan); }

.ca-name[b-0cjd67ooyo] { font-size: 13.5px; font-weight: 600; color: var(--hub-text); }
.ca-desc[b-0cjd67ooyo] { margin-top: 2px; font-size: 12px; color: var(--hub-muted); }
.ca-account[b-0cjd67ooyo] { margin-top: 4px; font-family: var(--hub-font-mono); font-size: 10px; color: var(--hub-muted-dark); }

.ca-status[b-0cjd67ooyo] {
    flex-shrink: 0;
    margin-left: 10px;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
    border: 1px solid var(--hub-border);
}

    .ca-status.on[b-0cjd67ooyo] { color: var(--hub-cyan); border-color: var(--hub-cyan); }

.ca-panel[b-0cjd67ooyo] { padding: 18px; }

.ca-tasks[b-0cjd67ooyo] { display: flex; flex-direction: column; gap: 8px; }

.ca-task[b-0cjd67ooyo] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 6px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
}

.ca-task-icon[b-0cjd67ooyo] { font-size: 14px; color: var(--hub-muted-dark); }
    .ca-task-icon.done[b-0cjd67ooyo] { color: var(--hub-text); }
    .ca-task-icon.in-progress[b-0cjd67ooyo] { color: var(--hub-cyan); }

.ca-task-main[b-0cjd67ooyo] { flex: 1; min-width: 0; }
.ca-task-name[b-0cjd67ooyo] { font-size: 12.5px; color: var(--hub-text); }
.ca-task-sub[b-0cjd67ooyo] { font-family: var(--hub-font-mono); font-size: 10px; color: var(--hub-muted-dark); }

.ca-note[b-0cjd67ooyo] {
    padding: 16px;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
}

@media (max-width: 560px) {
    .ca-app[b-0cjd67ooyo] { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ca-status[b-0cjd67ooyo] { margin-left: 30px; }
}
/* /Pages/Preview/Dashboard.Page.razor.rz.scp.css */
.db[b-xxspjhhcgs] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.db-top[b-xxspjhhcgs] {
    display: flex;
    justify-content: flex-end;
}

.db-iconbtn[b-xxspjhhcgs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* MyDaySummary */
.db-myday[b-xxspjhhcgs] { padding: 20px; }

.db-hello[b-xxspjhhcgs] {
    font-size: 22px;
    font-weight: 700;
    color: var(--hub-text);
}

.db-actions[b-xxspjhhcgs] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.db-widget[b-xxspjhhcgs] { padding: 20px; }

.db-list[b-xxspjhhcgs] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-row[b-xxspjhhcgs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 7px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    color: var(--hub-text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

    .db-row:hover[b-xxspjhhcgs] {
        border-color: var(--hub-border-bright);
        transform: translateY(-1px);
    }

.db-msg[b-xxspjhhcgs] {
    justify-content: flex-start;
    padding: 9px 11px;
    border-radius: 8px;
}

.db-row-main[b-xxspjhhcgs] {
    flex: 1;
    min-width: 0;
}

.db-row-title[b-xxspjhhcgs] {
    font-size: 12.5px;
    color: var(--hub-text);
}

.db-strong[b-xxspjhhcgs] { font-weight: 600; }

.db-row-sub[b-xxspjhhcgs] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
    margin-top: 2px;
}

.db-row-preview[b-xxspjhhcgs] {
    font-size: 11px;
    color: var(--hub-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-due[b-xxspjhhcgs] {
    flex-shrink: 0;
    margin-left: 8px;
    padding: 3px 7px;
    border-radius: 5px;
    border: 1px solid var(--hub-border);
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted);
}

    .db-due.today[b-xxspjhhcgs] {
        color: var(--hub-magenta);
        border-color: var(--hub-magenta);
        background: rgba(var(--hub-magenta-rgb), 0.1);
    }

.db-group[b-xxspjhhcgs] {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hub-panel);
    border: 1px solid var(--hub-border);
    color: var(--hub-magenta);
    font-size: 12px;
}

.db-time[b-xxspjhhcgs] {
    flex-shrink: 0;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
}

.db-empty[b-xxspjhhcgs] {
    font-size: 12.5px;
    color: var(--hub-muted-dark);
}

.db-allhidden[b-xxspjhhcgs] {
    padding: 30px;
    text-align: center;
    font-size: 13px;
    color: var(--hub-muted-dark);
}

/* CustomizeDashboardModal */
.db-backdrop[b-xxspjhhcgs] { background: var(--hub-overlay); }

.db-dialog[b-xxspjhhcgs] { max-width: 460px; }

.db-modal[b-xxspjhhcgs] {
    padding: 24px;
    max-height: 86vh;
    overflow-y: auto;
}

.db-modal-head[b-xxspjhhcgs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

    .db-modal-head .hub-eyebrow[b-xxspjhhcgs] { margin-bottom: 0; }

.db-x[b-xxspjhhcgs] { font-size: 18px; }

.db-modal-hint[b-xxspjhhcgs] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
    margin-bottom: 14px;
}

.db-wlist[b-xxspjhhcgs] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.db-wrow[b-xxspjhhcgs] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    cursor: grab;
}

    .db-wrow.over[b-xxspjhhcgs] {
        background: rgba(var(--hub-cyan-rgb), 0.1);
        border-color: var(--hub-cyan);
    }

    .db-wrow.dragging[b-xxspjhhcgs] { opacity: 0.4; }

.db-wlabel[b-xxspjhhcgs] {
    font-size: 12.5px;
    color: var(--hub-text);
}

    .db-wlabel.off[b-xxspjhhcgs] { color: var(--hub-muted); }

.db-wdesc[b-xxspjhhcgs] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
}

/* Toggle switch */
.db-switch[b-xxspjhhcgs] {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 21px;
    border-radius: 11px;
    border: none;
    background: var(--hub-border);
    cursor: pointer;
    transition: background 0.2s;
}

    .db-switch > span[b-xxspjhhcgs] {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background: var(--hub-panel-solid);
        transition: left 0.2s;
    }

    .db-switch.on[b-xxspjhhcgs] { background: var(--hub-cyan); }

        .db-switch.on > span[b-xxspjhhcgs] { left: 19px; }
/* /Pages/Preview/DashboardAvatar.razor.rz.scp.css */
.da[b-phqk49sqpf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel2);
    color: var(--hub-muted);
    font-family: var(--hub-font-mono);
    font-weight: 700;
}

    .da.on[b-phqk49sqpf] {
        border-color: var(--hub-cyan);
        background: var(--hub-cyan);
        color: var(--hub-bg);
    }
/* /Pages/Preview/DigitalBilling.Page.razor.rz.scp.css */
/* Digital Billing (UI-only preview). Covers the page and its child components
   (Overview, CustomerView, the three modals) through ::deep under .db-root. */

.db-root[b-0mupelr2it]  .db-stack { display: flex; flex-direction: column; gap: 18px; }
.db-root[b-0mupelr2it]  .db-stack-tight { gap: 14px; }
.db-root[b-0mupelr2it]  .db-grid-gap { gap: 12px; }

/* YTD button above the history list */
.db-root[b-0mupelr2it]  .db-ytd-bar { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.db-root[b-0mupelr2it]  .db-ytd-btn { gap: 8px; padding: 10px 16px; }
.db-root[b-0mupelr2it]  .db-ytd-year { font-size: 10px; text-transform: uppercase; }
.db-root[b-0mupelr2it]  .db-ytd-amount { font-size: 14px; font-weight: 800; }

/* History (DBHistoryTab) */
.db-root[b-0mupelr2it]  .db-history-head {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
}
.db-root[b-0mupelr2it]  .db-history-list { display: flex; flex-direction: column; gap: 10px; }
.db-root[b-0mupelr2it]  .db-history-row {
    display: grid; grid-template-columns: 150px 1fr 160px 24px; gap: 14px; align-items: center;
    padding: 16px; width: 100%; text-align: left; color: var(--hub-text);
}
.db-root[b-0mupelr2it]  .db-history-date { font-family: var(--hub-font-mono); font-size: 11.5px; color: var(--hub-muted); margin-top: 2px; }
.db-root[b-0mupelr2it]  .db-history-title { font-size: 14px; font-weight: 600; color: var(--hub-text); }
.db-root[b-0mupelr2it]  .db-history-total {
    font-family: var(--hub-font-mono); font-size: 17px; font-weight: 800; color: var(--hub-cyan); text-align: right;
}
.db-root[b-0mupelr2it]  .db-empty { padding: 30px; text-align: center; font-size: 12.5px; color: var(--hub-muted-dark); }

/* Sheet editor header */
.db-root[b-0mupelr2it]  .db-editor-head {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.db-root[b-0mupelr2it]  .db-editor-title-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.db-root[b-0mupelr2it]  .db-editor-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.db-root[b-0mupelr2it]  .db-editor-title { font-size: 15px; font-weight: 700; color: var(--hub-text); }
.db-root[b-0mupelr2it]  .db-editor-sub { font-family: var(--hub-font-mono); font-size: 9.5px; color: var(--hub-muted-dark); }
.db-root[b-0mupelr2it]  .db-unsaved {
    font-family: var(--hub-font-mono); font-size: 9px; color: var(--hub-magenta);
    border: 1px solid rgba(var(--hub-magenta-rgb), 0.33); border-radius: 5px; padding: 2px 7px;
}
.db-root[b-0mupelr2it]  .db-editor-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.db-root[b-0mupelr2it]  .db-upload-btn { padding: 10px 16px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.db-root[b-0mupelr2it]  .db-confirm {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: var(--hub-font-mono); font-size: 11px;
}

.db-root[b-0mupelr2it]  .db-subtabs {
    display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--hub-border);
}
.db-root[b-0mupelr2it]  .db-subtab { text-transform: none; letter-spacing: 0; }

/* Overview */
.db-root[b-0mupelr2it]  .db-note {
    padding: 8px 12px; background: var(--hub-panel2); border: 1px solid var(--hub-border); border-radius: 8px;
    font-family: var(--hub-font-mono); font-size: 10.5px; color: var(--hub-muted-dark);
}
.db-root[b-0mupelr2it]  .db-section-label {
    font-family: var(--hub-font-mono); font-size: 10px; color: var(--hub-muted-dark);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.db-root[b-0mupelr2it]  .db-cg-card { padding: 14px; }
.db-root[b-0mupelr2it]  .db-cg-name { font-size: 13px; font-weight: 600; color: var(--hub-text); }
.db-root[b-0mupelr2it]  .db-cg-total { font-family: var(--hub-font-mono); font-size: 20px; font-weight: 800; color: var(--hub-cyan); margin-top: 6px; }
.db-root[b-0mupelr2it]  .db-cg-count { font-family: var(--hub-font-mono); font-size: 9.5px; color: var(--hub-muted-dark); margin-top: 2px; }
.db-root[b-0mupelr2it]  .db-cat-tile {
    padding: 10px 12px; background: var(--hub-panel2); border: 1px solid var(--hub-border); border-radius: 8px;
}
.db-root[b-0mupelr2it]  .db-cat-total { font-family: var(--hub-font-mono); font-size: 15px; font-weight: 700; color: var(--hub-text); margin-top: 3px; }
.db-root[b-0mupelr2it]  .db-period-card { padding: 16px; }
.db-root[b-0mupelr2it]  .db-period-label { font-family: var(--hub-font-mono); font-size: 10px; color: var(--hub-muted-dark); text-transform: uppercase; }
.db-root[b-0mupelr2it]  .db-period-value { font-family: var(--hub-font-mono); font-size: 26px; font-weight: 800; color: var(--hub-text); margin-top: 4px; }
.db-root[b-0mupelr2it]  .db-period-value.hub-magenta { color: var(--hub-magenta); }

/* Customer view */
.db-root[b-0mupelr2it]  .db-cv-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.db-root[b-0mupelr2it]  .db-cv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.db-root[b-0mupelr2it]  .db-add-store { padding: 14px; display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.db-root[b-0mupelr2it]  .db-add-num { flex: 0 0 140px; }
.db-root[b-0mupelr2it]  .db-add-name { flex: 1 1 220px; }
.db-root[b-0mupelr2it]  .db-field-label { display: block; margin-bottom: 4px; }

.db-root[b-0mupelr2it]  .db-table-wrap { overflow-x: auto; }
.db-root[b-0mupelr2it]  .db-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.db-root[b-0mupelr2it]  .db-tr-line { border-bottom: 1px solid var(--hub-border); }
.db-root[b-0mupelr2it]  .db-th,
.db-root[b-0mupelr2it]  .db-th-icon { border-bottom: 1px solid var(--hub-border); vertical-align: bottom; }
.db-root[b-0mupelr2it]  .db-th-icon { width: 26px; }
.db-root[b-0mupelr2it]  .db-th {
    text-align: left; padding: 6px 8px; font-family: var(--hub-font-mono); font-size: 9.5px;
    text-transform: uppercase; color: var(--hub-muted-dark); white-space: nowrap;
}
.db-root[b-0mupelr2it]  .db-th-total { text-align: right; color: var(--hub-cyan); }
.db-root[b-0mupelr2it]  .db-th-group {
    text-align: center; padding: 5px 8px; font-family: var(--hub-font-mono); font-size: 9px;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--hub-cyan); white-space: nowrap;
    border-bottom: 1px solid var(--hub-border); border-left: 1px solid var(--hub-border);
    background: rgba(var(--hub-cyan-rgb), 0.06);
}
.db-root[b-0mupelr2it]  .db-th-cat {
    text-align: right; padding: 4px 8px; font-family: var(--hub-font-mono); font-size: 9px;
    color: var(--hub-muted-dark); white-space: nowrap; font-weight: 600;
}
.db-root[b-0mupelr2it]  .db-group-start { border-left: 1px solid var(--hub-border); }
.db-root[b-0mupelr2it]  .db-td { padding: 7px 8px; }
.db-root[b-0mupelr2it]  .db-td-icon { padding: 2px 4px; }
.db-root[b-0mupelr2it]  .db-td-num { font-family: var(--hub-font-mono); color: var(--hub-muted-dark); }
.db-root[b-0mupelr2it]  .db-td-name { font-weight: 600; color: var(--hub-text); white-space: nowrap; }
.db-root[b-0mupelr2it]  .db-td-total {
    text-align: right; font-family: var(--hub-font-mono); font-size: 13px; font-weight: 800; color: var(--hub-cyan); white-space: nowrap;
}
.db-root[b-0mupelr2it]  .db-td-cell { padding: 5px 8px; text-align: right; }

.db-root[b-0mupelr2it]  .db-move { display: flex; flex-direction: column; gap: 2px; }
.db-root[b-0mupelr2it]  .db-icon-btn {
    display: flex; justify-content: center; padding: 1px; border: none; background: none;
    color: var(--hub-muted-dark); cursor: pointer; font-size: 12px; line-height: 1;
}
.db-root[b-0mupelr2it]  .db-icon-btn:hover:not(:disabled) { color: var(--hub-text); }
.db-root[b-0mupelr2it]  .db-icon-btn:disabled { color: var(--hub-border); cursor: default; }
.db-root[b-0mupelr2it]  .db-icon-btn.hub-magenta { color: var(--hub-magenta); }
.db-root[b-0mupelr2it]  .db-del { padding: 4px; font-size: 13px; margin: 0 auto; }

/* "$" money input */
.db-root[b-0mupelr2it]  .db-money { position: relative; width: 66px; }
.db-root[b-0mupelr2it]  .db-money-right { margin-left: auto; }
.db-root[b-0mupelr2it]  .db-money > span {
    position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
    font-family: var(--hub-font-mono); font-size: 10px; color: var(--hub-muted-dark); pointer-events: none;
}
.db-root[b-0mupelr2it]  .db-money > input {
    width: 100%; padding: 4px 6px 4px 16px; font-size: 11px; text-align: right;
    -moz-appearance: textfield; appearance: textfield;
}
.db-root[b-0mupelr2it]  .db-money > input::-webkit-outer-spin-button,
.db-root[b-0mupelr2it]  .db-money > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.db-root[b-0mupelr2it]  .db-shared { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.db-root[b-0mupelr2it]  .db-split { font-family: var(--hub-font-mono); font-size: 8.5px; color: var(--hub-magenta); }
.db-root[b-0mupelr2it]  .db-shared-note { font-family: var(--hub-font-mono); font-size: 10.5px; font-style: italic; color: var(--hub-muted-dark); }

.db-root[b-0mupelr2it]  .db-foot-label {
    padding: 8px; text-align: right; font-family: var(--hub-font-mono); font-size: 11px; color: var(--hub-muted); text-transform: uppercase;
}
.db-root[b-0mupelr2it]  .db-foot-total {
    padding: 8px; text-align: right; font-family: var(--hub-font-mono); font-size: 15px; font-weight: 800; color: var(--hub-magenta); white-space: nowrap;
}
.db-root[b-0mupelr2it]  .db-footnote { font-family: var(--hub-font-mono); font-size: 9.5px; color: var(--hub-muted-dark); }

/* Modals: the prototype's Panel over a 60% black overlay */
.db-root[b-0mupelr2it]  .db-overlay { background: var(--hub-overlay); z-index: 1060; }
.db-root[b-0mupelr2it]  .db-dialog-420 { max-width: min(420px, 92vw); }
.db-root[b-0mupelr2it]  .db-dialog-480 { max-width: min(480px, 92vw); }
.db-root[b-0mupelr2it]  .db-modal { padding: 24px; }
.db-root[b-0mupelr2it]  .db-modal-body { overflow-y: auto; }
.db-root[b-0mupelr2it]  .db-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.db-root[b-0mupelr2it]  .db-close-icon { font-size: 18px; }
.db-root[b-0mupelr2it]  .db-modal-note {
    font-family: var(--hub-font-mono); font-size: 10.5px; color: var(--hub-muted-dark); margin-bottom: 14px; line-height: 1.5;
}
.db-root[b-0mupelr2it]  .db-muted-text { font-size: 12px; color: var(--hub-muted-dark); }

.db-root[b-0mupelr2it]  .db-rate-list { display: flex; flex-direction: column; gap: 8px; }
.db-root[b-0mupelr2it]  .db-rate-row { display: flex; align-items: center; gap: 10px; }
.db-root[b-0mupelr2it]  .db-rate-label { flex: 1; font-size: 12.5px; color: var(--hub-text); margin: 0; }
.db-root[b-0mupelr2it]  .db-rate-input { width: 110px; }
.db-root[b-0mupelr2it]  .db-rate-input > span { left: 9px; font-size: 11.5px; }
.db-root[b-0mupelr2it]  .db-rate-input > input { padding: 8px 10px 8px 20px; font-size: 12.5px; text-align: left; }

.db-root[b-0mupelr2it]  .db-sg-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.db-root[b-0mupelr2it]  .db-sg-card { padding: 10px 12px; background: var(--hub-panel2); border: 1px solid var(--hub-border); border-radius: 8px; }
.db-root[b-0mupelr2it]  .db-sg-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.db-root[b-0mupelr2it]  .db-sg-name { font-size: 12.5px; font-weight: 600; color: var(--hub-text); }
.db-root[b-0mupelr2it]  .db-sg-meta { font-family: var(--hub-font-mono); font-size: 9.5px; color: var(--hub-cyan); }
.db-root[b-0mupelr2it]  .db-sg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.db-root[b-0mupelr2it]  .db-sg-chip {
    display: flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 5px;
    font-family: var(--hub-font-mono); font-size: 10px; color: var(--hub-muted);
    background: var(--hub-panel); border: 1px solid var(--hub-border);
}
.db-root[b-0mupelr2it]  .db-sg-chip-x { display: flex; padding: 0; border: none; background: none; color: var(--hub-muted-dark); cursor: pointer; font-size: 10px; }
.db-root[b-0mupelr2it]  .db-sg-pick {
    display: flex; flex-direction: column; gap: 5px; max-height: 150px; overflow-y: auto; margin-bottom: 10px;
    padding: 8px; background: var(--hub-panel2); border: 1px solid var(--hub-border); border-radius: 7px;
}
.db-root[b-0mupelr2it]  .db-sg-pick-row { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--hub-text); }

.db-root[b-0mupelr2it]  .db-ytd-list { display: flex; flex-direction: column; gap: 6px; }
.db-root[b-0mupelr2it]  .db-ytd-row {
    display: flex; justify-content: space-between; padding: 7px 10px; font-size: 12.5px; color: var(--hub-text);
    background: var(--hub-panel2); border: 1px solid var(--hub-border); border-radius: 7px;
}
.db-root[b-0mupelr2it]  .db-ytd-row-amount { font-family: var(--hub-font-mono); font-weight: 700; color: var(--hub-cyan); }
.db-root[b-0mupelr2it]  .db-ytd-total {
    display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 8px;
    background: rgba(var(--hub-cyan-rgb), 0.1); border: 1px solid rgba(var(--hub-cyan-rgb), 0.33);
}
.db-root[b-0mupelr2it]  .db-ytd-total-label { font-family: var(--hub-font-mono); font-size: 12px; font-weight: 700; color: var(--hub-cyan); text-transform: uppercase; }
.db-root[b-0mupelr2it]  .db-ytd-total-amount { font-family: var(--hub-font-mono); font-size: 17px; font-weight: 800; color: var(--hub-cyan); }

@media (max-width: 640px) {
    .db-root[b-0mupelr2it]  .db-history-row { grid-template-columns: 1fr auto; }
    .db-root[b-0mupelr2it]  .db-history-row > :last-child { display: none; }
    .db-root[b-0mupelr2it]  .db-history-title { grid-column: 1 / -1; grid-row: 2; }
}
/* /Pages/Preview/HrPolicies.Page.razor.rz.scp.css */
.hr[b-qev2cebwbm] {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hr-panel[b-qev2cebwbm] { padding: 20px; }

.hr-docs[b-qev2cebwbm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hr-doc[b-qev2cebwbm] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 7px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

    .hr-doc:hover[b-qev2cebwbm] { border-color: var(--hub-border-bright); }

.hr-doc-icon[b-qev2cebwbm] { font-size: 16px; color: var(--hub-cyan); }
.hr-doc-main[b-qev2cebwbm] { flex: 1; display: flex; flex-direction: column; }
.hr-doc-name[b-qev2cebwbm] { font-size: 13px; color: var(--hub-text); }
.hr-doc-updated[b-qev2cebwbm] { font-family: var(--hub-font-mono); font-size: 10px; color: var(--hub-muted-dark); }
.hr-doc-link[b-qev2cebwbm] { font-size: 14px; color: var(--hub-muted-dark); }

.hr-text[b-qev2cebwbm] { font-size: 12.5px; color: var(--hub-muted); }
.hr-message[b-qev2cebwbm] { margin-top: 12px; }
/* /Pages/Preview/Inbox.Page.razor.rz.scp.css */
/* InboxTab: content-pad, maxWidth 760; one Panel per email. */
.ib[b-vrl6nsofsj] { max-width: 760px; }

.ib-top[b-vrl6nsofsj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.ib-btn[b-vrl6nsofsj],
.ib-tag[b-vrl6nsofsj] {
    display: inline-flex;
    align-items: center;
}

.ib-btn[b-vrl6nsofsj] { gap: 6px; }

.ib-list[b-vrl6nsofsj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ib-mail[b-vrl6nsofsj] {
    padding: 16px;
    cursor: pointer;
}

    .ib-mail:hover[b-vrl6nsofsj] { border-color: var(--hub-border-bright); }

.ib-mail-row[b-vrl6nsofsj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ib-mail-main[b-vrl6nsofsj] {
    display: flex;
    gap: 10px;
}

.ib-mail-icon[b-vrl6nsofsj] {
    font-size: 16px;
    margin-top: 2px;
    color: var(--hub-cyan);
}

    .ib-mail-icon.read[b-vrl6nsofsj] { color: var(--hub-muted-dark); }

.ib-subject[b-vrl6nsofsj] {
    font-family: var(--hub-font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--hub-text);
}

.ib-from[b-vrl6nsofsj] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted);
    margin-top: 2px;
}

.ib-preview[b-vrl6nsofsj] {
    font-family: var(--hub-font-sans);
    font-size: 12px;
    color: var(--hub-muted);
    margin-top: 6px;
}

.ib-time[b-vrl6nsofsj] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
    flex-shrink: 0;
    margin-left: 10px;
}

.ib-tags[b-vrl6nsofsj] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.ib-tag[b-vrl6nsofsj] {
    gap: 4px;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-cyan);
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.33);
    padding: 2px 7px;
    border-radius: 5px;
}

    .ib-tag.magenta[b-vrl6nsofsj] {
        color: var(--hub-magenta);
        border-color: rgba(var(--hub-magenta-rgb), 0.33);
    }
/* /Pages/Preview/InboxEmailPopup.razor.rz.scp.css */
/* EmailPopup: fixed top 16 / right 16, maxWidth 380, above the page. */
.ib-popup[b-rg2vgczgi7] {
    position: fixed;
    top: 16px;
    right: 16px;
    left: 16px;
    z-index: 1060;
    max-width: 380px;
    margin-left: auto;
}

.ib-popup-panel[b-rg2vgczgi7] {
    padding: 18px;
    background: var(--hub-panel-solid);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.ib-popup-head[b-rg2vgczgi7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ib-popup-title[b-rg2vgczgi7] {
    display: flex;
    gap: 8px;
}

    .ib-popup-title > .lu[b-rg2vgczgi7] {
        font-size: 16px;
        margin-top: 2px;
    }

.ib-popup-eyebrow[b-rg2vgczgi7] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-cyan);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ib-popup-subject[b-rg2vgczgi7] {
    font-family: var(--hub-font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--hub-text);
    margin-top: 4px;
}

.ib-popup-from[b-rg2vgczgi7] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted);
    margin-top: 8px;
}

.ib-popup-preview[b-rg2vgczgi7] {
    font-family: var(--hub-font-sans);
    font-size: 12.5px;
    color: var(--hub-muted);
    margin-top: 8px;
}

.ib-popup-actions[b-rg2vgczgi7] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.ib-popup-assign[b-rg2vgczgi7],
.ib-popup-create[b-rg2vgczgi7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ib-popup-assign[b-rg2vgczgi7] { flex: 1; }

.ib-popup-form[b-rg2vgczgi7] {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ib-popup-selects[b-rg2vgczgi7] {
    display: flex;
    gap: 8px;
}

    .ib-popup-selects > select[b-rg2vgczgi7] { flex: 1; }
/* /Pages/Preview/MyTasks.Page.razor.rz.scp.css */
.mt[b-rx02w5i3xc] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mt-bar[b-rx02w5i3xc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.mt-tabs[b-rx02w5i3xc] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mt-iconbtn[b-rx02w5i3xc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mt-count[b-rx02w5i3xc] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
}

.mt-search[b-rx02w5i3xc] { width: 240px; max-width: 100%; }

    .mt-search input[b-rx02w5i3xc] { font-size: 11.5px; }

.mt-panel[b-rx02w5i3xc] { padding: 20px; }

.mt-hint[b-rx02w5i3xc] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
    line-height: 1.5;
}

.mt-section[b-rx02w5i3xc] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 10px 0 6px;
}

/* List */
.mt-list[b-rx02w5i3xc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mt-list-tight[b-rx02w5i3xc] { gap: 6px; }

.mt-row[b-rx02w5i3xc] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 8px;
    color: var(--hub-text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

    .mt-row:hover[b-rx02w5i3xc] { border-color: var(--hub-border-bright); }

.mt-row-sm[b-rx02w5i3xc] {
    gap: 8px;
    padding: 8px 10px;
    border-radius: 7px;
}

.mt-status-icon[b-rx02w5i3xc] { font-size: 15px; }

.mt-main[b-rx02w5i3xc] { flex: 1; min-width: 0; }

.mt-row-title[b-rx02w5i3xc] {
    font-size: 12.5px;
    color: var(--hub-text);
}

    .mt-row-title.done[b-rx02w5i3xc] {
        color: var(--hub-muted);
        text-decoration: line-through;
    }

    .mt-row-title.done-strike[b-rx02w5i3xc] { text-decoration: line-through; }

.mt-sub[b-rx02w5i3xc] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
    margin-top: 2px;
}

.mt-prio[b-rx02w5i3xc] { font-size: 12px; }

.mt-due[b-rx02w5i3xc] {
    flex-shrink: 0;
    min-width: 66px;
    text-align: right;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted);
}

.mt-due-wide[b-rx02w5i3xc] { color: var(--hub-muted-dark); }

.mt-empty[b-rx02w5i3xc] {
    font-size: 12.5px;
    color: var(--hub-muted-dark);
}

.mt-empty-center[b-rx02w5i3xc] {
    padding: 20px 0;
    text-align: center;
}

/* Kanban */
.mt-kanban[b-rx02w5i3xc] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.mt-col[b-rx02w5i3xc] {
    width: 240px;
    flex-shrink: 0;
    padding: 8px;
    border-radius: 10px;
    border: 1px dashed transparent;
}

    .mt-col.over[b-rx02w5i3xc] {
        background: rgba(var(--hub-cyan-rgb), 0.06);
        border-color: var(--hub-cyan);
    }

.mt-col-head[b-rx02w5i3xc] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 10px;
}

.mt-dot[b-rx02w5i3xc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

    .mt-dot.pending[b-rx02w5i3xc] { background: var(--hub-muted-dark); }
    .mt-dot.active[b-rx02w5i3xc] { background: var(--hub-cyan); }
    .mt-dot.done[b-rx02w5i3xc] { background: var(--hub-text); }

.mt-col-label[b-rx02w5i3xc] {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--hub-text);
    text-transform: uppercase;
}

.mt-col-count[b-rx02w5i3xc] {
    margin-left: auto;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
}

.mt-col-body[b-rx02w5i3xc] { min-height: 60px; }

.mt-card[b-rx02w5i3xc] {
    background: var(--hub-panel);
    border: 1px solid var(--hub-border);
    border-radius: 9px;
    padding: 10px;
    margin-bottom: 8px;
    cursor: grab;
}

    .mt-card.dragging[b-rx02w5i3xc] { opacity: 0.4; }

.mt-card-title[b-rx02w5i3xc] {
    font-size: 12px;
    color: var(--hub-text);
}

.mt-card-job[b-rx02w5i3xc] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
    margin-top: 4px;
}

.mt-card-foot[b-rx02w5i3xc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
}

.mt-card-due[b-rx02w5i3xc] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
}

.mt-drop[b-rx02w5i3xc] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
    text-align: center;
    padding: 16px 0;
}

/* Calendar */
.mt-cal[b-rx02w5i3xc] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mt-cal-head[b-rx02w5i3xc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mt-cal-month[b-rx02w5i3xc] {
    font-family: var(--hub-font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--hub-text);
}

.mt-cal-nav[b-rx02w5i3xc] {
    display: flex;
    align-items: center;
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.55);
    border-radius: 10px;
    overflow: hidden;
}

    .mt-cal-nav button[b-rx02w5i3xc] {
        border: none;
        background: var(--hub-panel2);
        color: var(--hub-cyan);
        padding: 8px 11px;
        font-family: var(--hub-font-mono);
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
    }

        .mt-cal-nav button + button[b-rx02w5i3xc] { border-left: 1px solid rgba(var(--hub-cyan-rgb), 0.2); }

        .mt-cal-nav button:hover[b-rx02w5i3xc] { background: rgba(var(--hub-cyan-rgb), 0.12); }

.mt-cal-today[b-rx02w5i3xc] { text-transform: uppercase; }

.mt-cal-grid[b-rx02w5i3xc] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.mt-cal-wd[b-rx02w5i3xc] {
    text-align: center;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hub-cyan);
    padding: 4px 0 6px;
}

.mt-cal-cell[b-rx02w5i3xc] {
    min-height: 72px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.4);
    background: radial-gradient(circle at 86% 88%, rgba(var(--hub-magenta-rgb), 0.1), transparent 38%), radial-gradient(circle at 66% 94%, rgba(var(--hub-cyan-rgb), 0.14), transparent 44%), var(--hub-panel2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;
    cursor: pointer;
    color: var(--hub-text);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

    .mt-cal-cell:hover[b-rx02w5i3xc] { border-color: var(--hub-cyan); }

    .mt-cal-cell.out[b-rx02w5i3xc] { opacity: 0.42; }

    .mt-cal-cell.today[b-rx02w5i3xc] {
        border: 2px solid var(--hub-cyan);
        box-shadow: 0 0 18px var(--hub-glow-cyan);
    }

.mt-cal-day[b-rx02w5i3xc] {
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    padding: 2px;
    border-radius: 8px;
}

.mt-cal-cell.today .mt-cal-day[b-rx02w5i3xc] {
    background: var(--hub-cyan);
    color: var(--hub-bg);
    padding: 5px 8px;
}

.mt-cal-events[b-rx02w5i3xc] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    width: 100%;
}

.mt-cal-ev[b-rx02w5i3xc] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    border-radius: 7px;
    font-family: var(--hub-font-mono);
    font-size: 8.5px;
    font-weight: 650;
    color: var(--hub-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .mt-cal-ev.cyan[b-rx02w5i3xc] {
        background: rgba(var(--hub-cyan-rgb), 0.12);
        border: 1px solid rgba(var(--hub-cyan-rgb), 0.6);
    }

    .mt-cal-ev.magenta[b-rx02w5i3xc] {
        background: rgba(var(--hub-magenta-rgb), 0.12);
        border: 1px solid rgba(var(--hub-magenta-rgb), 0.6);
    }

.mt-cal-dot[b-rx02w5i3xc] {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
}

.mt-cal-ev.cyan .mt-cal-dot[b-rx02w5i3xc] { background: var(--hub-cyan); box-shadow: 0 0 8px var(--hub-cyan); }
.mt-cal-ev.magenta .mt-cal-dot[b-rx02w5i3xc] { background: var(--hub-magenta); box-shadow: 0 0 8px var(--hub-magenta); }

/* Gantt */
.mt-gantt[b-rx02w5i3xc] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mt-gantt-scroll[b-rx02w5i3xc] { overflow-x: auto; }

.mt-gantt-inner[b-rx02w5i3xc] { min-width: 900px; }

.mt-gantt-row[b-rx02w5i3xc] {
    display: grid;
    grid-template-columns: 160px repeat(14, minmax(0, 1fr));
    gap: 2px;
    align-items: center;
    margin-bottom: 4px;
}

.mt-gantt-days[b-rx02w5i3xc] { margin-bottom: 6px; }

.mt-gantt-day[b-rx02w5i3xc] {
    text-align: center;
    font-family: var(--hub-font-mono);
    font-size: 9px;
    color: var(--hub-muted-dark);
}

    .mt-gantt-day.today[b-rx02w5i3xc] { color: var(--hub-cyan); }

.mt-gantt-name[b-rx02w5i3xc] {
    padding-right: 8px;
    font-size: 11.5px;
    color: var(--hub-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .mt-gantt-name.done[b-rx02w5i3xc] {
        color: var(--hub-muted);
        text-decoration: line-through;
    }

.mt-gantt-cell[b-rx02w5i3xc] {
    height: 22px;
    border-left: 1px solid var(--hub-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mt-gantt-bar[b-rx02w5i3xc] {
    width: 80%;
    height: 14px;
    border: none;
    border-radius: 4px;
    background: currentColor;
    cursor: pointer;
}

    .mt-gantt-bar.done[b-rx02w5i3xc] { color: var(--hub-text); }

/* Modals (day list, New Task) */
.mt-backdrop[b-rx02w5i3xc] { background: var(--hub-overlay); }

.mt-day-dialog[b-rx02w5i3xc] { max-width: 380px; }
.mt-new-dialog[b-rx02w5i3xc] { max-width: 440px; }

.mt-modal[b-rx02w5i3xc] { padding: 24px; }

.mt-day-modal[b-rx02w5i3xc] {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.mt-modal-head[b-rx02w5i3xc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

    .mt-modal-head .hub-eyebrow[b-rx02w5i3xc] { margin-bottom: 0; }

.mt-modal-head-gap[b-rx02w5i3xc] { margin-bottom: 14px; }

.mt-x[b-rx02w5i3xc] { font-size: 18px; }

.mt-form[b-rx02w5i3xc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mt-form-row[b-rx02w5i3xc] {
    display: flex;
    gap: 10px;
}

.mt-grow[b-rx02w5i3xc] { flex: 1; min-width: 0; }

.mt-textarea[b-rx02w5i3xc] { resize: vertical; }

.mt-create[b-rx02w5i3xc] {
    width: 100%;
    margin-top: 16px;
}

@media (max-width: 640px) {
    .mt-search[b-rx02w5i3xc] { width: 100%; }
    .mt-cal-cell[b-rx02w5i3xc] { min-height: 56px; padding: 5px; }
    .mt-cal-ev[b-rx02w5i3xc] { display: none; }
}
/* /Pages/Preview/MyTasksDetailModal.razor.rz.scp.css */
.mt-backdrop[b-g43la01llb] { background: var(--hub-overlay); }

.mt-dialog[b-g43la01llb] { max-width: 440px; }

.mt-panel[b-g43la01llb] { padding: 24px; }

.mt-head[b-g43la01llb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.mt-source[b-g43la01llb] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mt-x[b-g43la01llb] { font-size: 18px; }

.mt-title[b-g43la01llb] {
    font-size: 16px;
    font-weight: 700;
    color: var(--hub-text);
    margin-bottom: 4px;
}

.mt-job[b-g43la01llb] {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 10px;
    cursor: pointer;
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-cyan);
    text-align: left;
}

.mt-facts[b-g43la01llb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.mt-fact[b-g43la01llb] {
    padding: 8px 11px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 7px;
}

.mt-fact-row[b-g43la01llb] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mt-fact-value[b-g43la01llb] {
    font-size: 12.5px;
    color: var(--hub-text);
    margin-top: 2px;
}

.mt-fact-row .mt-fact-value[b-g43la01llb] { margin-top: 0; }

.mt-section[b-g43la01llb] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 18px 0 8px;
}

.mt-status[b-g43la01llb] { display: flex; gap: 6px; }

.mt-status-btn[b-g43la01llb] {
    flex: 1;
    padding: 8px 6px;
    border-radius: 7px;
    border: 1px solid var(--hub-border);
    background: transparent;
    color: var(--hub-muted);
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    cursor: pointer;
}

    .mt-status-btn.on[b-g43la01llb] {
        border-color: var(--hub-cyan);
        background: rgba(var(--hub-cyan-rgb), 0.12);
        color: var(--hub-cyan);
    }

.mt-summary[b-g43la01llb] {
    padding: 10px 12px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 7px;
    font-size: 12.5px;
    color: var(--hub-muted);
    line-height: 1.55;
}

.mt-reassign[b-g43la01llb] { display: flex; gap: 8px; }

.mt-grow[b-g43la01llb] { flex: 1; min-width: 0; }

.mt-current[b-g43la01llb] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
    margin-top: 8px;
}
/* /Pages/Preview/NotificationCenter.Page.razor.rz.scp.css */
.nc-hero[b-ukyp9qrkov] {
    padding: 22px;
    margin-bottom: 18px;
}

.nc-hero-top[b-ukyp9qrkov] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.nc-hero-title[b-ukyp9qrkov] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nc-bell[b-ukyp9qrkov] {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(var(--hub-cyan-rgb), 0.25), rgba(var(--hub-magenta-rgb), 0.18));
    border: 1px solid var(--hub-border-bright);
    box-shadow: 0 0 28px var(--hub-glow-cyan);
    color: var(--hub-cyan);
    font-size: 23px;
}

.nc-h[b-ukyp9qrkov] {
    font-size: 20px;
    font-weight: 800;
    color: var(--hub-text);
}

.nc-sub[b-ukyp9qrkov] {
    font-size: 12.5px;
    color: var(--hub-muted);
    margin-top: 4px;
}

.nc-iconbtn[b-ukyp9qrkov] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.nc-lit[b-ukyp9qrkov] { border-color: var(--hub-magenta); }

.nc-stats[b-ukyp9qrkov] {
    display: grid;
    grid-template-columns: repeat(4, minmax(145px, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.nc-stat[b-ukyp9qrkov] {
    padding: 14px 16px;
    border-radius: 12px;
}

.nc-stat-value[b-ukyp9qrkov] {
    font-family: var(--hub-font-mono);
    font-size: 22px;
    font-weight: 800;
}

.nc-stat-label[b-ukyp9qrkov] {
    font-size: 11.5px;
    color: var(--hub-muted);
    margin-top: 2px;
}

.nc-filters[b-ukyp9qrkov] {
    padding: 14px;
    margin-bottom: 14px;
    background: var(--hub-panel-solid);
}

.nc-chips[b-ukyp9qrkov] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.nc-chip[b-ukyp9qrkov] {
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--hub-border);
    background: transparent;
    color: var(--hub-muted);
    font-size: 11.5px;
    cursor: pointer;
}

    .nc-chip:hover[b-ukyp9qrkov] { color: var(--hub-text); }

    .nc-chip.on[b-ukyp9qrkov] {
        border-color: var(--hub-cyan);
        background: rgba(var(--hub-cyan-rgb), 0.12);
        color: var(--hub-cyan);
    }

.nc-chip-count[b-ukyp9qrkov] {
    font-family: var(--hub-font-mono);
    opacity: 0.75;
}

.nc-search-row[b-ukyp9qrkov] {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.nc-search[b-ukyp9qrkov] { flex: 1 1 320px; }

.nc-list[b-ukyp9qrkov] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nc-item[b-ukyp9qrkov] {
    width: 100%;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    cursor: pointer;
}

    .nc-item.read[b-ukyp9qrkov] { opacity: 0.68; }

/* Tones: the notification type's colour. */
.cyan[b-ukyp9qrkov] { --nc-tone: var(--hub-cyan); }
.magenta[b-ukyp9qrkov] { --nc-tone: var(--hub-magenta); }
.red[b-ukyp9qrkov] { --nc-tone: var(--hub-red); }

.nc-icon[b-ukyp9qrkov] {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, color-mix(in srgb, var(--nc-tone) 15%, transparent), rgba(var(--hub-magenta-rgb), 0.1));
    border: 1px solid color-mix(in srgb, var(--nc-tone) 45%, transparent);
    color: var(--nc-tone);
    font-size: 19px;
}

.nc-main[b-ukyp9qrkov] { flex: 1; min-width: 0; }

.nc-kind[b-ukyp9qrkov] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nc-kind-label[b-ukyp9qrkov] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nc-tone);
}

.nc-unread[b-ukyp9qrkov] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hub-magenta);
    box-shadow: 0 0 10px var(--hub-magenta);
}

.nc-title[b-ukyp9qrkov] {
    font-size: 14px;
    font-weight: 800;
    color: var(--hub-text);
    margin-top: 3px;
}

.nc-item.read .nc-title[b-ukyp9qrkov] { font-weight: 600; }

.nc-body[b-ukyp9qrkov] {
    font-size: 12px;
    color: var(--hub-muted);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nc-time[b-ukyp9qrkov] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
    white-space: nowrap;
}

.nc-chev[b-ukyp9qrkov] {
    font-size: 16px;
    color: var(--hub-muted-dark);
}

.nc-empty[b-ukyp9qrkov] {
    padding: 44px;
    text-align: center;
    background: var(--hub-panel-solid);
}

.nc-empty-icon[b-ukyp9qrkov] { font-size: 30px; }

.nc-empty-title[b-ukyp9qrkov] {
    font-size: 15px;
    font-weight: 700;
    color: var(--hub-text);
    margin-top: 10px;
}

.nc-empty-sub[b-ukyp9qrkov] {
    font-size: 12px;
    color: var(--hub-muted);
    margin-top: 4px;
}

@media (max-width: 760px) {
    .nc-stats[b-ukyp9qrkov] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nc-time[b-ukyp9qrkov] { display: none; }
}
/* /Pages/Preview/Partners.Page.razor.rz.scp.css */
/* Partners — the prototype's PartnersTab: same logo-led directory tiles as
   Customers (directoryTileStyle, minHeight 330). */
.pt-toolbar[b-uqeo4ba944] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.pt-search[b-uqeo4ba944] {
    flex: 1 1 280px;
    max-width: 420px;
}

.pt-add[b-uqeo4ba944] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.pt-count[b-uqeo4ba944] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
    margin-bottom: 14px;
}

.pt-grid[b-uqeo4ba944] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.pt-tile[b-uqeo4ba944] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    min-height: 330px;
    padding: 28px 22px 20px;
    color: var(--hub-text);
    font: inherit;
    cursor: pointer;
}

    .pt-tile:hover[b-uqeo4ba944] { transform: translateY(-3px); }

    .pt-tile:focus-visible[b-uqeo4ba944] {
        outline: 2px solid var(--hub-cyan);
        outline-offset: 2px;
    }

/* directoryMediaStyle() */
.pt-media[b-uqeo4ba944] {
    width: 112px;
    height: 112px;
    flex-shrink: 0;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-bs-theme=dark] .pt-media[b-uqeo4ba944] {
    background: radial-gradient(circle at 92% 92%, rgba(255,0,226,0.20), transparent 38%), radial-gradient(circle at 8% 92%, rgba(0,178,255,0.20), transparent 42%), rgba(25,40,63,0.84);
    border: 1px solid rgba(131,202,255,0.68);
    box-shadow: 0 14px 34px rgba(0,0,0,0.32), 0 0 20px rgba(51,171,228,0.14), inset 0 1px 0 rgba(255,255,255,0.16);
}

[data-bs-theme=light] .pt-media[b-uqeo4ba944] {
    background: radial-gradient(circle at 92% 92%, rgba(255,0,220,0.14), transparent 36%), radial-gradient(circle at 8% 92%, rgba(0,173,255,0.13), transparent 40%), rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.98);
    box-shadow: 0 12px 28px rgba(35,75,112,0.14), inset 0 1px 0 #fff;
}

.pt-placeholder[b-uqeo4ba944] {
    font-size: 48px;
    color: var(--hub-cyan);
}

.pt-name[b-uqeo4ba944] {
    font-size: 16px;
    font-weight: 700;
    margin-top: 22px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-contact[b-uqeo4ba944] {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-muted);
    margin-top: 5px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-divider[b-uqeo4ba944] {
    width: 74%;
    height: 1px;
    background: var(--hub-border);
    margin: 17px 0 14px;
}

.pt-type[b-uqeo4ba944] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-cyan);
    min-height: 28px;
}

.pt-since[b-uqeo4ba944] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
    margin-top: 7px;
}

.pt-arrow-wrap[b-uqeo4ba944] {
    margin-top: auto;
    padding-top: 16px;
}

.pt-arrow[b-uqeo4ba944] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hub-border-bright);
    color: var(--hub-cyan);
}

@media (max-width: 575.98px) {
    .pt-search[b-uqeo4ba944] { max-width: none; }
}
/* /Pages/Preview/PartnersModal.razor.rz.scp.css */
/* PartnerModal: Panel { width: 960, maxWidth: 94vw, padding: 28, background: C.bg }. */
.ptm-backdrop[b-ehbpduqy4f] {
    background: rgba(0, 0, 0, 0.72);
}

.ptm-dialog[b-ehbpduqy4f] {
    max-width: min(960px, 94vw);
    margin-left: auto;
    margin-right: auto;
}

.ptm-panel[b-ehbpduqy4f] {
    padding: 28px;
    overflow-y: auto;
    background: var(--hub-bg);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.72);
    /* No blur: it would trap the store-map popup (position: fixed) inside the panel. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

    .ptm-panel > *[b-ehbpduqy4f] { flex-shrink: 0; }

.ptm-head[b-ehbpduqy4f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.ptm-head-left[b-ehbpduqy4f] {
    display: flex;
    gap: 13px;
    align-items: center;
}

/* directoryMediaStyle({ width: 58, height: 58 }) */
.ptm-media[b-ehbpduqy4f] {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 29px;
    color: var(--hub-cyan);
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border-bright);
}

.ptm-name[b-ehbpduqy4f] {
    font-size: 21px;
    font-weight: 800;
}

.ptm-since[b-ehbpduqy4f] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted);
    margin-top: 3px;
}

.ptm-x19[b-ehbpduqy4f] { font-size: 19px; }

.ptm-badges[b-ehbpduqy4f] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin: 10px 0;
}

.ptm-pill[b-ehbpduqy4f] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--hub-cyan);
    color: var(--hub-cyan);
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
}

.ptm-also[b-ehbpduqy4f] {
    padding: 5px 10px;
    font-size: 11px;
}

.ptm-badges-note[b-ehbpduqy4f] {
    font-size: 12px;
    color: var(--hub-muted);
}

.ptm-mt18[b-ehbpduqy4f] { margin-top: 18px; margin-bottom: 0; }

.ptm-logo-row[b-ehbpduqy4f] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.ptm-icon-btn[b-ehbpduqy4f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ptm-muted-note[b-ehbpduqy4f] {
    font-size: 11.5px;
    color: var(--hub-muted);
}

.ptm-fields[b-ehbpduqy4f] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.ptm-field[b-ehbpduqy4f] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-magenta);
}

    .ptm-field.wide[b-ehbpduqy4f] { grid-column: 1 / -1; }

    .ptm-field > .form-control[b-ehbpduqy4f] {
        margin-top: 5px;
        width: 100%;
    }

.ptm-notes[b-ehbpduqy4f] {
    min-height: 90px;
    resize: vertical;
}

.ptm-contacts-head[b-ehbpduqy4f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 22px 0 9px;
}

.ptm-stack[b-ehbpduqy4f] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ptm-contact[b-ehbpduqy4f] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 13px;
}

.ptm-contact-icon[b-ehbpduqy4f] {
    font-size: 15px;
    margin-top: 2px;
}

.ptm-grow[b-ehbpduqy4f] {
    flex: 1;
    min-width: 0;
}

.ptm-contact-name[b-ehbpduqy4f] {
    font-size: 13px;
    font-weight: 700;
}

.ptm-primary[b-ehbpduqy4f] {
    margin-left: 7px;
    font-family: var(--hub-font-mono);
    font-size: 8.5px;
    color: var(--hub-cyan);
}

.ptm-contact-title[b-ehbpduqy4f] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted);
    margin-top: 2px;
}

.ptm-contact-links[b-ehbpduqy4f] {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    margin-top: 5px;
}

    .ptm-contact-links a[b-ehbpduqy4f] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-family: var(--hub-font-mono);
        font-size: 10.5px;
        color: var(--hub-cyan);
        text-decoration: none;
    }

.ptm-x[b-ehbpduqy4f] {
    background: none;
    border: none;
    color: var(--hub-muted-dark);
    cursor: pointer;
    padding: 3px;
    display: flex;
}

    .ptm-x:hover[b-ehbpduqy4f] { color: var(--hub-text); }

.ptm-add[b-ehbpduqy4f] {
    padding: 13px;
    margin-top: 9px;
}

.ptm-add-title[b-ehbpduqy4f] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-magenta);
    margin-bottom: 8px;
}

.ptm-add-grid[b-ehbpduqy4f] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ptm-add-actions[b-ehbpduqy4f] {
    display: flex;
    justify-content: flex-end;
    margin-top: 9px;
}

.ptm-actions[b-ehbpduqy4f] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 20px;
}

@media (max-width: 640px) {
    .ptm-panel[b-ehbpduqy4f] { padding: 18px; }
    .ptm-fields[b-ehbpduqy4f], .ptm-add-grid[b-ehbpduqy4f] { grid-template-columns: 1fr; }
}
/* /Pages/Preview/ProductionCalendar.Page.razor.rz.scp.css */
/* ProductionCalendar: calendarSurfaceStyle panel, calendarCellStyle month grid,
   legend, selected-day list (jobLogRowStyle rows) and ProductionEventEditor. */

/* PRODUCTION_CALENDAR_TYPES colours (fixed in the prototype, same in both themes). */
.pcal-t-ad-start[b-ks93dg6qt8] { --ev-rgb: 34, 197, 94; }
.pcal-t-early-deadline[b-ks93dg6qt8] { --ev-rgb: 239, 68, 68; }
.pcal-t-planner-due[b-ks93dg6qt8] { --ev-rgb: 59, 130, 246; }
.pcal-t-press-day[b-ks93dg6qt8] { --ev-rgb: 250, 204, 21; }
.pcal-t-holiday[b-ks93dg6qt8] { --ev-rgb: 168, 85, 247; }

.pcal-hint[b-ks93dg6qt8] {
    font-size: 13px;
    color: var(--hub-muted);
}

.pcal-surface[b-ks93dg6qt8] {
    padding: 20px;
    border-radius: 14px;
}

[data-bs-theme=dark] .pcal-surface[b-ks93dg6qt8] {
    border: 1px solid rgba(76, 170, 235, 0.34);
    background: linear-gradient(145deg, rgba(10, 17, 29, 0.96), rgba(4, 8, 14, 0.92));
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(164, 218, 255, 0.07);
}

[data-bs-theme=light] .pcal-surface[b-ks93dg6qt8] {
    border: 1px solid rgba(255, 255, 255, 0.96);
    background: radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.98), transparent 38%), linear-gradient(145deg, rgb(246, 250, 255), rgb(233, 242, 250));
    box-shadow: 0 18px 48px rgba(31, 69, 105, 0.13), inset 0 1px 0 rgb(255, 255, 255);
}

.pcal-head[b-ks93dg6qt8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.pcal-month[b-ks93dg6qt8] {
    font-size: 20px;
    font-weight: 700;
}

.pcal-controls[b-ks93dg6qt8] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.pcal-mode[b-ks93dg6qt8] { min-width: 165px; }
.pcal-value[b-ks93dg6qt8] { min-width: 210px; }

/* calendarNavGroupStyle / calendarNavButtonStyle / calendarTodayButtonStyle */
.pcal-nav[b-ks93dg6qt8] {
    display: flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.53);
    box-shadow: 0 0 18px rgba(var(--hub-cyan-rgb), 0.13);
}

.pcal-nav-btn[b-ks93dg6qt8],
.pcal-today[b-ks93dg6qt8] {
    display: flex;
    align-items: center;
    padding: 8px 11px;
    border: none;
    font-family: var(--hub-font-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--hub-cyan);
    cursor: pointer;
}

    .pcal-nav-btn.left[b-ks93dg6qt8] { border-right: 1px solid rgba(var(--hub-cyan-rgb), 0.2); }
    .pcal-nav-btn.right[b-ks93dg6qt8] { border-left: 1px solid rgba(var(--hub-cyan-rgb), 0.2); }

.pcal-today[b-ks93dg6qt8] { padding: 8px 13px; }

[data-bs-theme=dark] .pcal-nav-btn[b-ks93dg6qt8],
[data-bs-theme=dark] .pcal-today[b-ks93dg6qt8] { background: rgba(16, 35, 58, 0.82); }

[data-bs-theme=light] .pcal-nav[b-ks93dg6qt8] { border-color: rgba(255, 255, 255, 0.98); background: rgba(255, 255, 255, 0.82); }
[data-bs-theme=light] .pcal-nav-btn[b-ks93dg6qt8],
[data-bs-theme=light] .pcal-today[b-ks93dg6qt8] { background: rgba(255, 255, 255, 0.62); }

.pcal-grid[b-ks93dg6qt8] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
}

.pcal-weekday[b-ks93dg6qt8] {
    text-align: center;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--hub-cyan);
    padding: 4px 0 6px;
}

[data-bs-theme=light] .pcal-weekday[b-ks93dg6qt8] { color: rgb(54, 82, 118); }

/* calendarCellStyle */
.pcal-cell[b-ks93dg6qt8] {
    min-height: 118px;
    min-width: 0;
    padding: 8px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

    .pcal-cell.out[b-ks93dg6qt8] { opacity: 0.42; }

[data-bs-theme=dark] .pcal-cell[b-ks93dg6qt8] {
    border: 1px solid rgba(89, 170, 232, 0.48);
    background: radial-gradient(circle at 86% 88%, rgba(255, 0, 240, 0.13), transparent 38%), radial-gradient(circle at 66% 94%, rgba(0, 153, 255, 0.20), transparent 44%), linear-gradient(145deg, rgb(23, 35, 56), rgb(11, 20, 34));
    box-shadow: inset 0 1px 0 rgba(216, 239, 255, 0.08);
}

[data-bs-theme=light] .pcal-cell[b-ks93dg6qt8] {
    border: 1px solid rgba(255, 255, 255, 0.98);
    background: radial-gradient(circle at 92% 94%, rgba(255, 0, 222, 0.15), transparent 34%), radial-gradient(circle at 68% 98%, rgba(0, 155, 255, 0.18), transparent 42%), radial-gradient(circle at 16% 10%, rgb(255, 255, 255), transparent 58%), linear-gradient(145deg, rgb(249, 252, 255), rgb(231, 241, 250));
    box-shadow: 0 8px 22px rgba(34, 76, 112, 0.12), inset 0 1px 0 rgb(255, 255, 255);
}

[data-bs-theme] .pcal-cell.active[b-ks93dg6qt8] {
    border: 2px solid var(--hub-cyan);
    box-shadow: 0 0 0 1px rgba(var(--hub-cyan-rgb), 0.33), 0 0 18px rgba(var(--hub-cyan-rgb), 0.33);
}

/* calendarDayStyle */
.pcal-day[b-ks93dg6qt8] {
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    padding: 2px;
    border-radius: 8px;
}

    .pcal-day.today[b-ks93dg6qt8] {
        padding: 5px 8px;
        background: var(--hub-cyan);
        color: var(--hub-bg);
        box-shadow: 0 0 16px rgba(var(--hub-cyan-rgb), 0.4);
    }

.pcal-chips[b-ks93dg6qt8] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
    width: 100%;
    min-width: 0;
}

.pcal-chip[b-ks93dg6qt8] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 5px;
    border-radius: 6px;
    border: 1px solid rgb(var(--ev-rgb));
    background: rgba(var(--ev-rgb), 0.13);
    font-size: 9.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .pcal-chip[role=button][b-ks93dg6qt8] { cursor: pointer; }

.pcal-dot[b-ks93dg6qt8] {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgb(var(--ev-rgb));
}

.pcal-more[b-ks93dg6qt8] {
    font-family: var(--hub-font-mono);
    font-size: 9px;
    color: var(--hub-muted);
}

.pcal-legend[b-ks93dg6qt8] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 15px;
}

    .pcal-legend > span[b-ks93dg6qt8] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: var(--hub-font-mono);
        font-size: 9.5px;
        color: var(--hub-muted);
    }

.pcal-swatch[b-ks93dg6qt8] {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-radius: 3px;
    background: rgb(var(--ev-rgb));
}

.pcal-day-panel[b-ks93dg6qt8] {
    margin-top: 14px;
    padding: 18px;
}

.pcal-day-list[b-ks93dg6qt8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pcal-row[b-ks93dg6qt8] {
    width: 100%;
    display: grid;
    grid-template-columns: 150px 1fr 1fr 180px 24px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    border-left: 4px solid rgb(var(--ev-rgb)) !important;
}

.pcal-row-holiday[b-ks93dg6qt8] {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-left: 4px solid rgb(var(--ev-rgb)) !important;
}

.pcal-row-type[b-ks93dg6qt8] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: rgb(var(--ev-rgb));
}

.pcal-row-title[b-ks93dg6qt8] {
    font-size: 12.5px;
    font-weight: 700;
}

.pcal-row-client[b-ks93dg6qt8] {
    font-size: 11.5px;
    color: var(--hub-muted);
}

.pcal-row-am[b-ks93dg6qt8] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted);
}

.pcal-none[b-ks93dg6qt8] {
    font-size: 12.5px;
    color: var(--hub-muted-dark);
}

/* ProductionEventEditor */
.pcal-backdrop[b-ks93dg6qt8] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.7);
}

.pcal-dialog[b-ks93dg6qt8] {
    width: 620px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid var(--hub-border);
    background: var(--hub-bg);
    color: var(--hub-text);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.pcal-dialog-title[b-ks93dg6qt8] {
    margin-top: 0;
    font-size: 1.5rem;
}

.pcal-form[b-ks93dg6qt8] {
    display: grid;
    gap: 12px;
}

    .pcal-form label[b-ks93dg6qt8] {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .pcal-form .hub-input[b-ks93dg6qt8] { width: 100%; }

.pcal-help[b-ks93dg6qt8] {
    margin: 0;
    font-size: 13px;
    color: var(--hub-muted);
}

.pcal-actions[b-ks93dg6qt8] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .pcal-cell[b-ks93dg6qt8] { min-height: 80px; padding: 5px; }
    .pcal-chip[b-ks93dg6qt8] { font-size: 8.5px; }
    .pcal-row[b-ks93dg6qt8] { grid-template-columns: 1fr 24px; }
    .pcal-row-type[b-ks93dg6qt8], .pcal-row-title[b-ks93dg6qt8], .pcal-row-client[b-ks93dg6qt8], .pcal-row-am[b-ks93dg6qt8] { grid-column: 1; }
}

@media (max-width: 560px) {
    .pcal-grid[b-ks93dg6qt8] { gap: 3px; }
    /* Phone width: chips shrink to their coloured dot; the day list below has the detail. */
    .pcal-chip[b-ks93dg6qt8] { padding: 2px; font-size: 0; gap: 0; }
}
/* /Pages/Preview/ProductionQueue.Page.razor.rz.scp.css */
/* ProductionQueue: stage tiles (directoryTileStyle), filter Panel, job rows (jobLogRowStyle). */

/* PRODUCTION_STAGES colours: Design = cyan, Proofing = violet, Approval = magenta, Export = green. */
.pq-st-design[b-ku2v6slodb] { --st: var(--hub-cyan); }
.pq-st-proofing[b-ku2v6slodb] { --st: rgb(139, 92, 246); }
.pq-st-approval[b-ku2v6slodb] { --st: var(--hub-magenta); }
.pq-st-export[b-ku2v6slodb] { --st: rgb(34, 197, 94); }

.pq-stages[b-ku2v6slodb] {
    gap: 12px;
    margin-bottom: 16px;
}

.pq-stage-tile[b-ku2v6slodb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 98px;
    padding: 16px;
    text-align: left;
    color: var(--hub-text);
    cursor: pointer;
}

    .pq-stage-tile:hover[b-ku2v6slodb] { transform: translateY(-2px); }

    .pq-stage-tile.active[b-ku2v6slodb] { border-color: var(--st) !important; }

.pq-st-color[b-ku2v6slodb] { color: var(--st); }

.pq-stage-count[b-ku2v6slodb] {
    font-family: var(--hub-font-mono);
    font-size: 25px;
    font-weight: 800;
    line-height: 1.2;
}

.pq-stage-sub[b-ku2v6slodb] {
    font-size: 11.5px;
    color: var(--hub-muted);
}

.pq-filters[b-ku2v6slodb] {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 10px;
    padding: 14px;
    margin-bottom: 16px;
}

.pq-summary[b-ku2v6slodb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.pq-count[b-ku2v6slodb] {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-muted);
}

.pq-bottlenecks[b-ku2v6slodb] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
}

.pq-list[b-ku2v6slodb] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pq-row[b-ku2v6slodb] {
    display: grid;
    grid-template-columns: minmax(230px, 1.5fr) minmax(150px, .9fr) minmax(170px, 1fr) minmax(190px, 1.1fr) minmax(170px, 1fr) 38px;
    gap: 16px;
    align-items: center;
    padding: 17px;
}

.pq-job[b-ku2v6slodb] { min-width: 0; }

.pq-job-number[b-ku2v6slodb] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-cyan);
}

.pq-job-title[b-ku2v6slodb] {
    margin-top: 3px;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pq-job-client[b-ku2v6slodb] {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--hub-muted);
}

.pq-deadline[b-ku2v6slodb] {
    margin-top: 5px;
    font-family: var(--hub-font-mono);
    font-size: 11.5px;
}

.pq-field-label[b-ku2v6slodb] { margin-bottom: 5px; }

.pq-select[b-ku2v6slodb] { width: 100%; }

    .pq-select option[b-ku2v6slodb] { color: var(--hub-text); background: var(--hub-panel-solid); }

.pq-ready-head[b-ku2v6slodb] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
}

.pq-ready-bar[b-ku2v6slodb] {
    height: 6px;
    border-radius: 99px;
    overflow: hidden;
    background: var(--hub-panel2);
}

    .pq-ready-bar > span[b-ku2v6slodb] {
        display: block;
        height: 100%;
        border-radius: 99px;
        background: currentColor;
    }

.pq-ready-note[b-ku2v6slodb] {
    margin-top: 7px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
}

/* directoryArrowStyle() */
.pq-arrow[b-ku2v6slodb] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hub-cyan);
    font-size: 17px;
    cursor: pointer;
}

[data-bs-theme=dark] .pq-arrow[b-ku2v6slodb] {
    border: 1px solid rgba(122, 191, 255, 0.66);
    background: rgba(12, 24, 41, 0.62);
    box-shadow: 0 0 18px rgba(51, 171, 228, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

[data-bs-theme=light] .pq-arrow[b-ku2v6slodb] {
    border: 1px solid rgba(255, 255, 255, 0.98);
    background: rgba(255, 255, 255, 0.70);
    box-shadow: 0 8px 18px rgba(44, 79, 113, 0.16), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.pq-empty[b-ku2v6slodb] {
    padding: 30px;
    text-align: center;
    color: var(--hub-muted-dark);
}

@media (max-width: 1100px) {
    .pq-row[b-ku2v6slodb] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pq-job[b-ku2v6slodb] { grid-column: 1 / -1; }
    .pq-arrow[b-ku2v6slodb] { justify-self: end; }
}

@media (max-width: 780px) {
    .pq-filters[b-ku2v6slodb] { grid-template-columns: 1fr; }
    .pq-row[b-ku2v6slodb] { grid-template-columns: 1fr; }
}
/* /Pages/Preview/Reporting.Page.razor.rz.scp.css */
/* Profitability & Reports (UI-only preview) — the prototype's ReportingTab. */

.rp-stack[b-5xe1fu831y] { display: flex; flex-direction: column; gap: 20px; }
.rp-gap[b-5xe1fu831y] { gap: 12px; }
.rp-mb[b-5xe1fu831y] { margin-bottom: 16px; }

.rp-stat[b-5xe1fu831y] { padding: 14px; }
.rp-stat-label[b-5xe1fu831y] {
    display: flex; align-items: center; gap: 5px;
    font-family: var(--hub-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hub-muted);
}
.rp-stat-label .lu[b-5xe1fu831y] { font-size: 11px; }
.rp-stat-value[b-5xe1fu831y] { font-family: var(--hub-font-mono); font-size: 20px; font-weight: 700; color: var(--hub-text); margin-top: 4px; }

.rp-panel[b-5xe1fu831y] { padding: 20px; }
.rp-note[b-5xe1fu831y] { font-family: var(--hub-font-mono); font-size: 10px; color: var(--hub-muted-dark); margin-bottom: 14px; }
.rp-empty[b-5xe1fu831y] { font-size: 12.5px; color: var(--hub-muted-dark); }

/* Job profitability */
.rp-tile[b-5xe1fu831y] { padding: 10px 12px; background: var(--hub-panel2); border: 1px solid var(--hub-border); border-radius: 7px; }
.rp-tile-value[b-5xe1fu831y] { font-family: var(--hub-font-mono); font-size: 18px; font-weight: 700; color: var(--hub-text); margin-top: 3px; }
.rp-tile-value.rp-strong[b-5xe1fu831y] { font-weight: 800; }
.rp-rows[b-5xe1fu831y] { display: flex; flex-direction: column; gap: 6px; }
.rp-profit-row[b-5xe1fu831y] {
    display: grid; grid-template-columns: 1fr 100px 100px 100px 70px; gap: 10px; align-items: center;
    padding: 8px 10px; background: var(--hub-panel2); border: 1px solid var(--hub-border); border-radius: 7px;
}
.rp-profit-job[b-5xe1fu831y] { min-width: 0; }
.rp-profit-title[b-5xe1fu831y] {
    font-size: 12px; font-weight: 600; color: var(--hub-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-profit-sub[b-5xe1fu831y] { font-family: var(--hub-font-mono); font-size: 9.5px; color: var(--hub-muted-dark); }
.rp-num[b-5xe1fu831y] { font-family: var(--hub-font-mono); font-size: 11.5px; color: var(--hub-text); text-align: right; }
.rp-num.rp-margin[b-5xe1fu831y] { font-size: 12px; font-weight: 700; }
.rp-num.rp-margin-pct[b-5xe1fu831y] { font-size: 11px; font-weight: 700; }
.rp-num.hub-cyan[b-5xe1fu831y] { color: var(--hub-cyan); }
.rp-num.hub-magenta[b-5xe1fu831y] { color: var(--hub-magenta); }

/* Horizontal bars (hours / revenue) */
.rp-bars[b-5xe1fu831y] { display: flex; flex-direction: column; gap: 12px; }
.rp-bar-head[b-5xe1fu831y] { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--hub-text); margin-bottom: 4px; }
.rp-bar-value[b-5xe1fu831y] { font-family: var(--hub-font-mono); font-size: 11px; color: var(--hub-muted); white-space: nowrap; }
.rp-bar-value.hub-magenta[b-5xe1fu831y] { color: var(--hub-magenta); }
.rp-track[b-5xe1fu831y] { height: 8px; border-radius: 4px; background: var(--hub-border); }
/* overflow stays visible so the hover bubble can sit above the bar; the
   fills clip themselves with their own radius instead. */
.rp-bar-estimate[b-5xe1fu831y],
.rp-bar-logged[b-5xe1fu831y] { position: absolute; top: 0; left: 0; height: 100%; }
.rp-bar-estimate[b-5xe1fu831y] { background: var(--hub-border); border-right: 1px solid var(--hub-muted-dark); border-radius: 4px 0 0 4px; }
.rp-bar-logged[b-5xe1fu831y] {
    background: var(--hub-cyan); border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.rp-bar-logged.over[b-5xe1fu831y] { background: var(--hub-magenta); }
.rp-bar-revenue[b-5xe1fu831y] {
    height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, rgba(var(--hub-magenta-rgb), 0.75), var(--hub-magenta));
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.rp-revenue-total[b-5xe1fu831y] { font-family: var(--hub-font-mono); font-size: 20px; font-weight: 800; color: var(--hub-text); margin-bottom: 14px; }
.rp-revenue-caption[b-5xe1fu831y] { font-size: 10.5px; font-weight: 400; color: var(--hub-muted); margin-left: 8px; }

/* Jobs by status */
.rp-status-list[b-5xe1fu831y] { display: flex; gap: 16px; flex-wrap: wrap; }
.rp-status[b-5xe1fu831y] { min-width: 110px; padding: 10px 16px; background: var(--hub-panel2); border: 1px solid var(--hub-border); border-radius: 8px; }
.rp-status-count[b-5xe1fu831y] { font-family: var(--hub-font-mono); font-size: 20px; font-weight: 700; color: var(--hub-text); }
.rp-status-label[b-5xe1fu831y] { font-family: var(--hub-font-mono); font-size: 10px; color: var(--hub-muted); }

/* Export */
.rp-export-note[b-5xe1fu831y] { font-size: 12px; color: var(--hub-muted); margin-bottom: 12px; }
.rp-export-actions[b-5xe1fu831y] { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 640px) {
    .rp-profit-row[b-5xe1fu831y] { grid-template-columns: 1fr 1fr 1fr; }
    .rp-profit-job[b-5xe1fu831y] { grid-column: 1 / -1; }
    .rp-profit-row .rp-num[b-5xe1fu831y] { text-align: left; }
}
/* /Pages/Preview/Roadmap.Page.razor.rz.scp.css */
.rm[b-2t5kxl3ha9] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rm-top[b-2t5kxl3ha9], .rm-bar[b-2t5kxl3ha9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.rm-sync[b-2t5kxl3ha9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--hub-cyan);
    background: rgba(var(--hub-cyan-rgb), 0.1);
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--hub-cyan);
}

.rm-sync-dot[b-2t5kxl3ha9] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hub-cyan);
}

.rm-space[b-2t5kxl3ha9], .rm-members[b-2t5kxl3ha9] { display: flex; align-items: center; }
.rm-space[b-2t5kxl3ha9] { gap: 10px; }
.rm-members[b-2t5kxl3ha9] { gap: 8px; }

.rm-space-label[b-2t5kxl3ha9] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rm-space-select[b-2t5kxl3ha9] {
    min-width: 220px;
    font-weight: 700;
    border-color: var(--hub-cyan);
    color: var(--hub-cyan);
}

.rm-members-label[b-2t5kxl3ha9] { font-family: var(--hub-font-mono); font-size: 10px; color: var(--hub-muted-dark); }
.rm-members-names[b-2t5kxl3ha9] { font-size: 11px; color: var(--hub-muted); }

.rm-stack[b-2t5kxl3ha9] { display: flex; padding-left: 6px; }
.rm-stack-item[b-2t5kxl3ha9] { margin-left: -6px; display: flex; }

.rm-board[b-2t5kxl3ha9] {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.rm-col[b-2t5kxl3ha9] {
    width: 270px;
    flex-shrink: 0;
    padding: 8px;
    border-radius: 10px;
    border: 1px dashed transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .rm-col.over[b-2t5kxl3ha9] {
        background: rgba(var(--hub-cyan-rgb), 0.06);
        border-color: var(--hub-cyan);
    }

.rm-col-head[b-2t5kxl3ha9] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 10px;
}

.rm-dot[b-2t5kxl3ha9] { width: 8px; height: 8px; border-radius: 50%; background: var(--hub-muted-dark); }
    .rm-dot.tone-text[b-2t5kxl3ha9] { background: var(--hub-text); }
    .rm-dot.tone-cyan[b-2t5kxl3ha9] { background: var(--hub-cyan); }
    .rm-dot.tone-magenta[b-2t5kxl3ha9] { background: var(--hub-magenta); }

.rm-col-label[b-2t5kxl3ha9] {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--hub-text);
    text-transform: uppercase;
}

.rm-col-count[b-2t5kxl3ha9] {
    margin-left: auto;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
}

.rm-col-body[b-2t5kxl3ha9] { min-height: 60px; }

.rm-card[b-2t5kxl3ha9] {
    margin-bottom: 8px;
    padding: 11px;
    border-radius: 9px;
    background: var(--hub-panel);
    border: 1px solid var(--hub-border);
    cursor: grab;
    transition: border-color 0.15s ease;
}

    .rm-card:hover[b-2t5kxl3ha9] { border-color: var(--hub-border-bright); }
    .rm-card.dragging[b-2t5kxl3ha9] { opacity: 0.4; }

.rm-card-title[b-2t5kxl3ha9] { font-size: 12.5px; font-weight: 600; color: var(--hub-text); }

.rm-card-desc[b-2t5kxl3ha9] {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--hub-muted);
}

.rm-card-meta[b-2t5kxl3ha9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.rm-priority[b-2t5kxl3ha9] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    border-radius: 5px;
    padding: 2px 6px;
    color: var(--hub-cyan);
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.33);
}

    .rm-priority.high[b-2t5kxl3ha9] { color: var(--hub-magenta); border-color: rgba(var(--hub-magenta-rgb), 0.33); }
    .rm-priority.low[b-2t5kxl3ha9] { color: var(--hub-muted-dark); border-color: var(--hub-border); }

.rm-quarter[b-2t5kxl3ha9] { font-family: var(--hub-font-mono); font-size: 9.5px; color: var(--hub-muted-dark); }

.rm-owner[b-2t5kxl3ha9] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
}

.rm-drop[b-2t5kxl3ha9] {
    padding: 16px 0;
    text-align: center;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
}

.rm-dialog[b-2t5kxl3ha9] { max-width: 440px; }
.rm-modal[b-2t5kxl3ha9] { padding: 24px; }

.rm-modal-head[b-2t5kxl3ha9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.rm-form[b-2t5kxl3ha9] { display: flex; flex-direction: column; gap: 10px; }
.rm-textarea[b-2t5kxl3ha9] { resize: vertical; }
.rm-form-row[b-2t5kxl3ha9] { display: flex; gap: 10px; }
    .rm-form-row > *[b-2t5kxl3ha9] { flex: 1; min-width: 0; }

.rm-add[b-2t5kxl3ha9] { width: 100%; margin-top: 16px; }
    .rm-add:disabled[b-2t5kxl3ha9] { opacity: 0.5; cursor: not-allowed; }
/* /Pages/Preview/SalesCrm.Page.razor.rz.scp.css */
/* Sales CRM — the prototype's SalesCRMTab and its sub-views. Every rule is
   `.crm ::deep …` so it also reaches the SalesCrm* child components (and
   their modals), which have no stylesheet of their own. */

.crm[b-918jm5mbmw] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---- Tab bar ---------------------------------------------------------- */
.crm[b-918jm5mbmw]  .crm-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid var(--hub-border);
    padding-bottom: 14px;
}

.crm[b-918jm5mbmw]  .crm-views {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

    .crm[b-918jm5mbmw]  .crm-views .hub-tab {
        padding: 7px 13px;
        font-size: 11px;
        text-transform: none;
        letter-spacing: 0;
    }

.crm[b-918jm5mbmw]  .crm-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ---- Shared bits ------------------------------------------------------ */
.crm[b-918jm5mbmw]  .crm-pad20 { padding: 20px; }
.crm[b-918jm5mbmw]  .crm-pad18 { padding: 18px; }
.crm[b-918jm5mbmw]  .crm-pad16 { padding: 16px; }
.crm[b-918jm5mbmw]  .crm-pad10 { padding: 10px; }
.crm[b-918jm5mbmw]  .crm-mt8 { margin-top: 8px; }
.crm[b-918jm5mbmw]  .crm-mt14 { margin-top: 14px; }
.crm[b-918jm5mbmw]  .crm-mt16 { margin-top: 16px; }
.crm[b-918jm5mbmw]  .crm-mt18 { margin-top: 18px; }
.crm[b-918jm5mbmw]  .crm-mb8 { margin-bottom: 8px; }
.crm[b-918jm5mbmw]  .crm-mb16 { margin-bottom: 16px; }

.crm[b-918jm5mbmw]  .crm-hint {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
    margin-bottom: 10px;
}

.crm[b-918jm5mbmw]  .crm-grow {
    flex: 1;
    min-width: 0;
}

.crm[b-918jm5mbmw]  .crm-box {
    padding: 9px 11px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 7px;
}

.crm[b-918jm5mbmw]  .crm-text {
    font-size: 12.5px;
    color: var(--hub-text);
}

.crm[b-918jm5mbmw]  .crm-mono {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
}

.crm[b-918jm5mbmw]  .crm-meta {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
    margin-top: 1px;
}

.crm[b-918jm5mbmw]  .crm-empty {
    font-size: 12px;
    color: var(--hub-muted-dark);
}

.crm[b-918jm5mbmw]  .crm-stack,
.crm[b-918jm5mbmw]  .crm-stack8,
.crm[b-918jm5mbmw]  .crm-stack10,
.crm[b-918jm5mbmw]  .crm-stack14,
.crm[b-918jm5mbmw]  .crm-stack16 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.crm[b-918jm5mbmw]  .crm-stack8 { gap: 8px; }
.crm[b-918jm5mbmw]  .crm-stack10 { gap: 10px; }
.crm[b-918jm5mbmw]  .crm-stack14 { gap: 14px; }
.crm[b-918jm5mbmw]  .crm-stack16 { gap: 16px; }

.crm[b-918jm5mbmw]  .crm-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
}

.crm[b-918jm5mbmw]  .crm-row-flex {
    display: flex;
    gap: 6px;
}

    .crm[b-918jm5mbmw]  .crm-row-flex > .form-control,
    .crm[b-918jm5mbmw]  .crm-row-flex > .form-select { flex: 1; min-width: 0; }

.crm[b-918jm5mbmw]  .crm-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    background: currentColor;
}

    .crm[b-918jm5mbmw]  .crm-dot.big { width: 8px; height: 8px; }

.crm[b-918jm5mbmw]  .tone-dark { color: var(--hub-muted-dark); }
.crm[b-918jm5mbmw]  .tone-cyan { color: var(--hub-cyan); }
.crm[b-918jm5mbmw]  .tone-magenta { color: var(--hub-magenta); }
.crm[b-918jm5mbmw]  .tone-text { color: var(--hub-text); }
.crm[b-918jm5mbmw]  .tone-text-dark { color: var(--hub-muted-dark); }
.crm[b-918jm5mbmw]  .tone-text-cyan { color: var(--hub-cyan); }
.crm[b-918jm5mbmw]  .tone-text-magenta { color: var(--hub-magenta); }
.crm[b-918jm5mbmw]  .tone-text-text { color: var(--hub-text); }

/* HEALTH_META: good = cyan, warning = text, risk = magenta */
.crm[b-918jm5mbmw]  .health-good { color: var(--hub-cyan); }
.crm[b-918jm5mbmw]  .health-warning { color: var(--hub-text); }
.crm[b-918jm5mbmw]  .health-risk { color: var(--hub-magenta); }

/* PRIORITY_META: high = magenta flame, medium = cyan star, low = mutedDark circle */
.crm[b-918jm5mbmw]  .crm-prio-high { color: var(--hub-magenta); }
.crm[b-918jm5mbmw]  .crm-prio-medium { color: var(--hub-cyan); }
.crm[b-918jm5mbmw]  .crm-prio-low { color: var(--hub-muted-dark); }

/* CompanyBadge */
.crm[b-918jm5mbmw]  .crm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(var(--hub-cyan-rgb), 0.18), rgba(var(--hub-magenta-rgb), 0.18));
    border: 1px solid var(--hub-border);
    font-family: var(--hub-font-mono);
    font-weight: 700;
    color: var(--hub-text);
}

/* Avatar (initials) */
.crm[b-918jm5mbmw]  .crm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    font-family: var(--hub-font-mono);
    font-weight: 700;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel2);
    color: var(--hub-muted);
}

    .crm[b-918jm5mbmw]  .crm-avatar.on {
        border-color: var(--hub-cyan);
        background: var(--hub-cyan);
        color: #04121a;
    }

/* ---- KPI cards -------------------------------------------------------- */
.crm[b-918jm5mbmw]  .crm-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.crm[b-918jm5mbmw]  .crm-kpi {
    padding: 14px 16px;
    border-top: 2px solid var(--hub-cyan);
}

    .crm[b-918jm5mbmw]  .crm-kpi.magenta { border-top-color: var(--hub-magenta); }

.crm[b-918jm5mbmw]  .crm-kpi-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

    .crm[b-918jm5mbmw]  .crm-kpi-label .lu { font-size: 12px; color: var(--hub-cyan); }
    .crm[b-918jm5mbmw]  .crm-kpi.magenta .crm-kpi-label .lu { color: var(--hub-magenta); }

.crm[b-918jm5mbmw]  .crm-kpi-value {
    font-family: var(--hub-font-mono);
    font-size: 21px;
    font-weight: 800;
    margin-top: 6px;
}

/* ---- Kanban ----------------------------------------------------------- */
.crm[b-918jm5mbmw]  .crm-kanban {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.crm[b-918jm5mbmw]  .crm-col {
    width: 250px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border: 1px dashed transparent;
    border-radius: 10px;
    padding: 6px;
}

    .crm[b-918jm5mbmw]  .crm-col.over {
        background: rgba(var(--hub-cyan-rgb), 0.06);
        border-color: var(--hub-cyan);
    }

.crm[b-918jm5mbmw]  .crm-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 6px 10px;
}

.crm[b-918jm5mbmw]  .crm-col-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hub-font-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

    .crm[b-918jm5mbmw]  .crm-col-title .crm-dot { width: 8px; height: 8px; }

.crm[b-918jm5mbmw]  .crm-col-count {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
}

.crm[b-918jm5mbmw]  .crm-col-value {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted);
    padding: 0 6px;
    margin-bottom: 8px;
}

.crm[b-918jm5mbmw]  .crm-col-body {
    flex: 1;
    padding: 0 2px;
    min-height: 60px;
}

.crm[b-918jm5mbmw]  .crm-card {
    background: var(--hub-panel);
    border: 1px solid var(--hub-border);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    cursor: grab;
    transition: opacity 0.1s, border-color 0.15s;
}

    .crm[b-918jm5mbmw]  .crm-card:hover { border-color: var(--hub-border-bright); }
    .crm[b-918jm5mbmw]  .crm-card.dragging { opacity: 0.4; }

.crm[b-918jm5mbmw]  .crm-card-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

    .crm[b-918jm5mbmw]  .crm-card-top > .lu { font-size: 13px; margin-top: 2px; flex-shrink: 0; }

.crm[b-918jm5mbmw]  .crm-card-name {
    font-size: 12.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .crm[b-918jm5mbmw]  .crm-card-name.big { font-size: 13px; }

.crm[b-918jm5mbmw]  .crm-card-contact {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm[b-918jm5mbmw]  .crm-card-mid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 9px;
}

.crm[b-918jm5mbmw]  .crm-card-value {
    font-family: var(--hub-font-mono);
    font-size: 14px;
    font-weight: 800;
}

.crm[b-918jm5mbmw]  .crm-prob {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-cyan);
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.33);
    border-radius: 5px;
    padding: 1px 6px;
}

    .crm[b-918jm5mbmw]  .crm-prob.big { font-size: 11px; padding: 2px 7px; }

.crm[b-918jm5mbmw]  .crm-card-date {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
}

.crm[b-918jm5mbmw]  .crm-card-line {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-top: 6px;
    font-size: 10.5px;
    color: var(--hub-muted);
}

    .crm[b-918jm5mbmw]  .crm-card-line > .lu { font-size: 10px; margin-top: 2px; flex-shrink: 0; }

    .crm[b-918jm5mbmw]  .crm-card-line > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .crm[b-918jm5mbmw]  .crm-card-line.next {
        margin-top: 4px;
        color: var(--hub-magenta);
    }

.crm[b-918jm5mbmw]  .crm-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--hub-border);
}

.crm[b-918jm5mbmw]  .crm-health {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--hub-font-mono);
    font-size: 9px;
}

.crm[b-918jm5mbmw]  .crm-drop-here {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
    text-align: center;
    padding: 20px 0;
}

/* ---- Modals ----------------------------------------------------------- */
.crm[b-918jm5mbmw]  .crm-backdrop { background: var(--hub-overlay); }
.crm[b-918jm5mbmw]  .crm-dialog-400 { max-width: min(400px, 92vw); }
.crm[b-918jm5mbmw]  .crm-dialog-460 { max-width: min(460px, 92vw); }
.crm[b-918jm5mbmw]  .crm-dialog-480 { max-width: min(480px, 92vw); }
.crm[b-918jm5mbmw]  .crm-dialog-620 { max-width: min(620px, 92vw); }

.crm[b-918jm5mbmw]  .crm-modal {
    padding: 24px;
    overflow-y: auto;
}

    .crm[b-918jm5mbmw]  .crm-modal > * { flex-shrink: 0; }

.crm[b-918jm5mbmw]  .crm-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.crm[b-918jm5mbmw]  .crm-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crm[b-918jm5mbmw]  .crm-modal-name {
    font-size: 16px;
    font-weight: 700;
}

.crm[b-918jm5mbmw]  .crm-modal-sub {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
}

.crm[b-918jm5mbmw]  .crm-x18 { font-size: 18px; }

.crm[b-918jm5mbmw]  .crm-modal-value-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.crm[b-918jm5mbmw]  .crm-modal-value {
    font-family: var(--hub-font-mono);
    font-size: 22px;
    font-weight: 800;
}

    .crm[b-918jm5mbmw]  .crm-modal-value.small { font-size: 20px; }

.crm[b-918jm5mbmw]  .crm-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    border: 1px solid currentColor;
    border-radius: 6px;
    padding: 3px 8px;
}

.crm[b-918jm5mbmw]  .crm-fact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.crm[b-918jm5mbmw]  .crm-fact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
}

.crm[b-918jm5mbmw]  .crm-fact-label {
    font-family: var(--hub-font-mono);
    font-size: 9px;
    color: var(--hub-muted-dark);
    text-transform: uppercase;
    margin-bottom: 2px;
}

    .crm[b-918jm5mbmw]  .crm-fact-label.magenta { color: var(--hub-magenta); }

.crm[b-918jm5mbmw]  .crm-fact-value { font-size: 12px; }

.crm[b-918jm5mbmw]  .crm-next-box {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 7px;
    background: rgba(var(--hub-magenta-rgb), 0.08);
    border: 1px solid rgba(var(--hub-magenta-rgb), 0.27);
}

.crm[b-918jm5mbmw]  .crm-section {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

    .crm[b-918jm5mbmw]  .crm-section.magenta { color: var(--hub-magenta); }

.crm[b-918jm5mbmw]  .crm-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0 8px;
}

    .crm[b-918jm5mbmw]  .crm-section-row .crm-section { margin: 0; }

.crm[b-918jm5mbmw]  .crm-small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    font-size: 10.5px;
}

.crm[b-918jm5mbmw]  .crm-plus {
    padding: 8px 10px;
    display: flex;
    align-items: center;
}

.crm[b-918jm5mbmw]  .crm-check {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    color: var(--hub-muted-dark);
    font-size: 15px;
}

    .crm[b-918jm5mbmw]  .crm-check.done { color: var(--hub-text); }

.crm[b-918jm5mbmw]  .crm-task-title { font-size: 12px; }

    .crm[b-918jm5mbmw]  .crm-task-title.done {
        color: var(--hub-muted);
        text-decoration: line-through;
    }

.crm[b-918jm5mbmw]  .crm-add-task {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 10px;
}

.crm[b-918jm5mbmw]  .crm-notes {
    max-height: 180px;
    overflow-y: auto;
}

.crm[b-918jm5mbmw]  .crm-note { padding: 8px 10px; }

    .crm[b-918jm5mbmw]  .crm-note .crm-meta { margin-top: 4px; }

.crm[b-918jm5mbmw]  .crm-stage-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.crm[b-918jm5mbmw]  .crm-stage-btn {
    padding: 6px 10px;
    border-radius: 6px;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    cursor: pointer;
    border: 1px solid var(--hub-border);
    background: transparent;
    color: var(--hub-muted);
}

    .crm[b-918jm5mbmw]  .crm-stage-btn:hover { color: var(--hub-text); }

    .crm[b-918jm5mbmw]  .crm-stage-btn.current {
        border-color: currentColor;
        background: rgba(var(--hub-cyan-rgb), 0.12);
    }

    .crm[b-918jm5mbmw]  .crm-stage-btn.current.tone-cyan,
    .crm[b-918jm5mbmw]  .crm-stage-btn.current.tone-text { color: var(--hub-cyan); }

/* ---- Revenue forecast ------------------------------------------------- */
.crm[b-918jm5mbmw]  .crm-forecast-tiles {
    gap: 12px;
    margin-bottom: 18px;
}

.crm[b-918jm5mbmw]  .crm-stat {
    padding: 10px 14px;
    border-radius: 8px;
}

.crm[b-918jm5mbmw]  .crm-stat-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted);
    text-transform: uppercase;
}

.crm[b-918jm5mbmw]  .crm-stat-value {
    font-family: var(--hub-font-mono);
    font-size: 18px;
    font-weight: 800;
    margin-top: 3px;
}

    .crm[b-918jm5mbmw]  .crm-stat-value.mid { font-size: 16px; margin-top: 4px; }

.crm[b-918jm5mbmw]  .crm-sub-label {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
    margin-bottom: 8px;
}

.crm[b-918jm5mbmw]  .crm-bars {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    height: 150px;
    padding: 0 4px;
}

.crm[b-918jm5mbmw]  .crm-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 100%;
}

.crm[b-918jm5mbmw]  .crm-bar-amount,
.crm[b-918jm5mbmw]  .crm-bar-label {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted);
}

.crm[b-918jm5mbmw]  .crm-bar-label { color: var(--hub-muted-dark); }

    .crm[b-918jm5mbmw]  .crm-bar-label.current {
        color: var(--hub-cyan);
        font-weight: 700;
    }

.crm[b-918jm5mbmw]  .crm-bar-fill {
    width: 62%;
    border-radius: 5px 5px 0 0;
    background: var(--hub-cyan);
}

    .crm[b-918jm5mbmw]  .crm-bar-fill.future {
        background: var(--hub-magenta);
        opacity: 0.75;
    }

.crm[b-918jm5mbmw]  .crm-stage-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 3px;
}

.crm[b-918jm5mbmw]  .crm-stage-count {
    color: var(--hub-muted-dark);
    font-family: var(--hub-font-mono);
    font-size: 10px;
}

.crm[b-918jm5mbmw]  .crm-stage-amount {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-muted);
}

.crm[b-918jm5mbmw]  .crm-track {
    height: 7px;
    background: var(--hub-border);
    border-radius: 4px;
}

.crm[b-918jm5mbmw]  .crm-track-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--hub-cyan), var(--hub-magenta));
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

    .crm[b-918jm5mbmw]  .crm-track-fill.dark { background: var(--hub-muted-dark); }

/* ---- Activity dashboard ----------------------------------------------- */
.crm[b-918jm5mbmw]  .crm-activity-tiles {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.crm[b-918jm5mbmw]  .crm-activity-tile {
    padding: 12px 10px;
    border-radius: 8px;
    text-align: center;
}

.crm[b-918jm5mbmw]  .crm-activity-icon {
    font-size: 16px;
    margin-bottom: 6px;
    color: var(--hub-cyan);
}

    .crm[b-918jm5mbmw]  .crm-activity-icon.magenta { color: var(--hub-magenta); }

.crm[b-918jm5mbmw]  .crm-activity-value {
    font-family: var(--hub-font-mono);
    font-size: 20px;
    font-weight: 800;
}

.crm[b-918jm5mbmw]  .crm-activity-label {
    font-family: var(--hub-font-mono);
    font-size: 9px;
    color: var(--hub-muted);
    margin-top: 2px;
}

.crm[b-918jm5mbmw]  .crm-appt {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crm[b-918jm5mbmw]  .crm-appt-time {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-magenta);
}

/* ---- Accounts / Prospects cards --------------------------------------- */
.crm[b-918jm5mbmw]  .crm-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .crm[b-918jm5mbmw]  .crm-view .crm-hint { margin-bottom: 0; }

.crm[b-918jm5mbmw]  .crm-view-search { max-width: 380px; }

.crm[b-918jm5mbmw]  .crm-cards { gap: 14px; }

.crm[b-918jm5mbmw]  .crm-card-panel {
    display: block;
    width: 100%;
    padding: 16px;
    text-align: left;
    color: var(--hub-text);
    font: inherit;
}

    .crm[b-918jm5mbmw]  .crm-card-panel .crm-card-top { align-items: center; gap: 10px; }

.crm[b-918jm5mbmw]  .crm-mrr {
    font-family: var(--hub-font-mono);
    font-size: 15px;
    font-weight: 800;
}

.crm[b-918jm5mbmw]  .crm-upsell-line {
    font-size: 10.5px;
    color: var(--hub-magenta);
    margin-top: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm[b-918jm5mbmw]  .crm-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.crm[b-918jm5mbmw]  .crm-tag {
    font-size: 11.5px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 6px;
    padding: 4px 9px;
}

.crm[b-918jm5mbmw]  .crm-upsell {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    background: rgba(var(--hub-magenta-rgb), 0.08);
    border: 1px solid rgba(var(--hub-magenta-rgb), 0.2);
    border-radius: 7px;
    padding: 8px 10px;
}

    .crm[b-918jm5mbmw]  .crm-upsell > .lu { margin-top: 2px; flex-shrink: 0; }

.crm[b-918jm5mbmw]  .crm-score {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    border: 1px solid var(--hub-border);
    border-radius: 6px;
    padding: 2px 6px;
}

.crm[b-918jm5mbmw]  .crm-qual {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted);
}

.crm[b-918jm5mbmw]  .crm-foot-label {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
    text-transform: uppercase;
}

.crm[b-918jm5mbmw]  .crm-eav {
    font-family: var(--hub-font-mono);
    font-size: 14px;
    font-weight: 800;
    color: var(--hub-magenta);
}

/* ---- Funnel ----------------------------------------------------------- */
.crm[b-918jm5mbmw]  .crm-funnel-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.crm[b-918jm5mbmw]  .crm-funnel-label {
    width: 140px;
    flex-shrink: 0;
    font-family: var(--hub-font-mono);
    font-size: 11px;
}

.crm[b-918jm5mbmw]  .crm-funnel-track {
    flex: 1;
    height: 26px;
    background: var(--hub-border);
    border-radius: 6px;
    overflow: hidden;
}

.crm[b-918jm5mbmw]  .crm-funnel-fill {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 8px;
    background: linear-gradient(90deg, var(--hub-cyan), var(--hub-magenta));
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
}

    .crm[b-918jm5mbmw]  .crm-funnel-fill.won {
        background: var(--hub-text);
        color: var(--hub-bg);
    }

.crm[b-918jm5mbmw]  .crm-funnel-conv {
    width: 60px;
    flex-shrink: 0;
    text-align: right;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-cyan);
}

    .crm[b-918jm5mbmw]  .crm-funnel-conv.first { color: var(--hub-muted-dark); }

/* ---- Map -------------------------------------------------------------- */
.crm[b-918jm5mbmw]  .crm-map-scroll { overflow-x: auto; }

.crm[b-918jm5mbmw]  .crm-map {
    display: grid;
    grid-template-columns: repeat(12, 34px);
    grid-auto-rows: 34px;
    gap: 4px;
    min-width: 460px;
}

.crm[b-918jm5mbmw]  .crm-map-cell {
    border-radius: 6px;
    border: 1px solid var(--hub-border);
    background: transparent;
    color: var(--hub-muted-dark);
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    padding: 0;
    cursor: default;
}

    .crm[b-918jm5mbmw]  .crm-map-cell.on {
        border-color: var(--hub-cyan);
        background: rgba(var(--hub-cyan-rgb), 0.12);
        color: var(--hub-text);
        font-weight: 700;
        cursor: pointer;
    }

    .crm[b-918jm5mbmw]  .crm-map-cell.selected { background: rgba(var(--hub-cyan-rgb), 0.28); }

/* ---- Calendar --------------------------------------------------------- */
.crm[b-918jm5mbmw]  .crm-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.crm[b-918jm5mbmw]  .crm-cal-month {
    font-family: var(--hub-font-mono);
    font-size: 13px;
    font-weight: 700;
}

.crm[b-918jm5mbmw]  .crm-cal-nav {
    display: inline-flex;
    border: 1px solid var(--hub-border);
    border-radius: 8px;
    overflow: hidden;
}

    .crm[b-918jm5mbmw]  .crm-cal-nav button {
        border: none;
        background: transparent;
        color: var(--hub-muted);
        padding: 5px 10px;
        display: flex;
        align-items: center;
        cursor: pointer;
        font-family: var(--hub-font-mono);
        font-size: 11px;
    }

        .crm[b-918jm5mbmw]  .crm-cal-nav button:hover { color: var(--hub-text); background: var(--hub-panel2); }

        .crm[b-918jm5mbmw]  .crm-cal-nav button.today {
            border-left: 1px solid var(--hub-border);
            border-right: 1px solid var(--hub-border);
            font-weight: 700;
        }

.crm[b-918jm5mbmw]  .crm-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.crm[b-918jm5mbmw]  .crm-cal-weekday {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
    text-transform: uppercase;
    text-align: center;
    padding: 4px 0;
}

.crm[b-918jm5mbmw]  .crm-cal-cell {
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel2);
    color: var(--hub-text);
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

    .crm[b-918jm5mbmw]  .crm-cal-cell:hover { border-color: var(--hub-border-bright); }
    .crm[b-918jm5mbmw]  .crm-cal-cell.out { opacity: 0.45; }
    .crm[b-918jm5mbmw]  .crm-cal-cell.today { border-color: var(--hub-cyan); }

.crm[b-918jm5mbmw]  .crm-cal-day {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    font-weight: 700;
}

.crm[b-918jm5mbmw]  .crm-cal-cell.today .crm-cal-day { color: var(--hub-cyan); }

.crm[b-918jm5mbmw]  .crm-cal-events {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.crm[b-918jm5mbmw]  .crm-cal-event {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    padding: 2px 5px;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--hub-text);
    background: rgba(var(--hub-cyan-rgb), 0.12);
}

    .crm[b-918jm5mbmw]  .crm-cal-event .crm-dot { color: var(--hub-cyan); }
    .crm[b-918jm5mbmw]  .crm-cal-event.magenta { background: rgba(var(--hub-magenta-rgb), 0.12); }
    .crm[b-918jm5mbmw]  .crm-cal-event.magenta .crm-dot { color: var(--hub-magenta); }

/* ---- Reports ---------------------------------------------------------- */
.crm[b-918jm5mbmw]  .crm-filter-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted);
    text-transform: uppercase;
}

.crm[b-918jm5mbmw]  .crm-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

    .crm[b-918jm5mbmw]  .crm-filters .form-select {
        width: auto;
        padding-top: 6px;
        padding-bottom: 6px;
        font-size: 11.5px;
    }

.crm[b-918jm5mbmw]  .crm-results-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.crm[b-918jm5mbmw]  .crm-results-count {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-muted);
}

.crm[b-918jm5mbmw]  .crm-results-scroll { overflow-x: auto; }

.crm[b-918jm5mbmw]  .crm-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 600px;
}

.crm[b-918jm5mbmw]  .crm-result-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr 0.8fr;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 6px;
}

    .crm[b-918jm5mbmw]  .crm-result-row .crm-text { font-size: 12px; }

/* ---- New prospect form ------------------------------------------------ */
.crm[b-918jm5mbmw]  .crm-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crm[b-918jm5mbmw]  .crm-form-2,
.crm[b-918jm5mbmw]  .crm-form-3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.crm[b-918jm5mbmw]  .crm-form-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.crm[b-918jm5mbmw]  .crm-form-section {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 6px;
}

.crm[b-918jm5mbmw]  .crm-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    justify-content: flex-end;
}

@media (max-width: 1024px) {
    .crm[b-918jm5mbmw]  .crm-activity-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .crm[b-918jm5mbmw]  .crm-activity-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm[b-918jm5mbmw]  .crm-fact-grid,
    .crm[b-918jm5mbmw]  .crm-form-2,
    .crm[b-918jm5mbmw]  .crm-form-3 { grid-template-columns: 1fr; }
    .crm[b-918jm5mbmw]  .crm-funnel-label { width: 96px; }
    .crm[b-918jm5mbmw]  .crm-cal-cell { min-height: 54px; padding: 4px; }
    .crm[b-918jm5mbmw]  .crm-cal-event { font-size: 0; padding: 3px; }
}
/* /Pages/Preview/TeamChat.Page.razor.rz.scp.css */
/* The prototype's chatShellStyle / chatRailStyle / chatThreadStyle /
   chatConversationStyle / chatBubbleStyle. The prototype's chat fills the
   whole content area; here it fills what's left under the top bar and the
   preview banner, so the page itself never scrolls. */
.tc-shell[b-56htv42oij] {
    display: flex;
    height: calc(100vh - 176px);
    min-height: 420px;
    overflow: hidden;
    border: 1px solid var(--hub-border);
    border-radius: 14px;
}

[data-bs-theme=dark] .tc-shell[b-56htv42oij] {
    background: radial-gradient(circle at 92% 92%, rgba(255,0,226,0.11), transparent 38%), linear-gradient(145deg, rgba(5,8,13,0.96), rgba(3,5,7,0.96));
}

[data-bs-theme=light] .tc-shell[b-56htv42oij] {
    background: radial-gradient(circle at 95% 95%, rgba(255,0,218,0.08), transparent 35%), linear-gradient(145deg, rgba(248,251,255,0.96), rgba(237,244,250,0.96));
}

/* ---- Conversation rail ---- */
.tc-rail[b-56htv42oij] {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
}

[data-bs-theme=dark] .tc-rail[b-56htv42oij] {
    border-right: 1px solid rgba(89,177,255,0.38);
    background: radial-gradient(circle at 96% 98%, rgba(255,0,226,0.30), transparent 38%), radial-gradient(circle at 0% 46%, rgba(0,169,255,0.30), transparent 45%), linear-gradient(160deg, rgba(21,35,57,0.96), rgba(11,18,34,0.96));
    box-shadow: 12px 0 38px rgba(0,0,0,0.30), inset -1px 0 0 rgba(255,0,226,0.16);
}

[data-bs-theme=light] .tc-rail[b-56htv42oij] {
    border-right: 1px solid rgba(255,255,255,0.96);
    background: radial-gradient(circle at 98% 98%, rgba(255,0,218,0.18), transparent 36%), radial-gradient(circle at 0% 48%, rgba(0,168,255,0.16), transparent 44%), linear-gradient(160deg, rgba(255,255,255,0.94), rgba(231,241,251,0.90));
    box-shadow: 12px 0 34px rgba(46,76,106,0.11), inset -1px 0 0 rgba(255,255,255,0.78);
}

.tc-rail-head[b-56htv42oij] {
    padding: 14px;
    border-bottom: 1px solid var(--hub-border);
}

.tc-new[b-56htv42oij] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
}

.tc-rail-list[b-56htv42oij] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.tc-convo[b-56htv42oij] {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border-radius: 11px;
    margin-bottom: 7px;
    color: var(--hub-text);
    cursor: pointer;
}

[data-bs-theme=dark] .tc-convo[b-56htv42oij] {
    border: 1px solid rgba(101,172,230,0.30);
    background: linear-gradient(135deg, rgba(25,40,62,0.68), rgba(36,21,49,0.58));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}

[data-bs-theme=light] .tc-convo[b-56htv42oij] {
    border: 1px solid rgba(255,255,255,0.68);
    background: linear-gradient(135deg, rgba(255,255,255,0.58), rgba(242,237,250,0.54));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.90);
}

[data-bs-theme=dark] .tc-convo.active[b-56htv42oij] {
    border-color: var(--hub-cyan);
    background: linear-gradient(135deg, rgba(15,71,111,0.80), rgba(44,24,71,0.72));
    box-shadow: 0 0 20px rgba(0,158,255,0.36), inset 0 1px 0 rgba(255,255,255,0.16);
}

[data-bs-theme=light] .tc-convo.active[b-56htv42oij] {
    border-color: var(--hub-cyan);
    background: linear-gradient(135deg, rgba(225,247,255,0.96), rgba(249,231,250,0.88));
    box-shadow: 0 8px 22px rgba(28,126,184,0.18), inset 0 1px 0 rgba(255,255,255,1);
}

.tc-group-icon[b-56htv42oij] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    color: var(--hub-magenta);
    font-size: 14px;
}

.tc-convo-text[b-56htv42oij] {
    flex: 1;
    min-width: 0;
}

.tc-convo-name[b-56htv42oij],
.tc-convo-last[b-56htv42oij] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-convo-name[b-56htv42oij] {
    font-family: var(--hub-font-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hub-text);
}

.tc-convo.active .tc-convo-name[b-56htv42oij] {
    color: var(--hub-cyan);
}

.tc-convo-last[b-56htv42oij] {
    font-family: var(--hub-font-sans);
    font-size: 11px;
    color: var(--hub-muted);
}

/* ---- Thread ---- */
.tc-thread[b-56htv42oij] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

[data-bs-theme=dark] .tc-thread[b-56htv42oij] {
    background: radial-gradient(circle at 96% 90%, rgba(255,0,226,0.08), transparent 34%), linear-gradient(145deg, rgba(4,7,11,0.96), rgba(2,4,7,0.98));
}

[data-bs-theme=light] .tc-thread[b-56htv42oij] {
    background: radial-gradient(circle at 95% 92%, rgba(255,0,218,0.06), transparent 34%), linear-gradient(145deg, rgba(255,255,255,0.72), rgba(242,247,252,0.76));
}

.tc-thread-head[b-56htv42oij] {
    padding: 14px 20px;
    border-bottom: 1px solid var(--hub-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.tc-back[b-56htv42oij] {
    display: none;
    background: none;
    border: none;
    color: var(--hub-muted);
    cursor: pointer;
    padding: 4px;
    margin-right: 2px;
    font-size: 17px;
}

.tc-magenta-icon[b-56htv42oij] {
    color: var(--hub-magenta);
    font-size: 16px;
}

.tc-thread-title[b-56htv42oij] {
    font-family: var(--hub-font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--hub-text);
}

.tc-thread-members[b-56htv42oij],
.tc-sender[b-56htv42oij],
.tc-time[b-56htv42oij] {
    font-family: var(--hub-font-mono);
    color: var(--hub-muted-dark);
}

.tc-thread-members[b-56htv42oij] { font-size: 10px; }

.tc-messages[b-56htv42oij] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tc-msg[b-56htv42oij] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .tc-msg.me[b-56htv42oij] { align-items: flex-end; }

.tc-sender[b-56htv42oij] {
    font-size: 10px;
    margin: 0 0 2px 4px;
}

.tc-bubble[b-56htv42oij] {
    max-width: 60%;
    padding: 9px 13px;
    border-radius: 11px;
    font-family: var(--hub-font-sans);
    font-size: 13px;
    color: var(--hub-text);
    overflow-wrap: anywhere;
}

    .tc-bubble.image-only[b-56htv42oij] { padding: 4px; }

[data-bs-theme=dark] .tc-bubble[b-56htv42oij] {
    background: linear-gradient(135deg, rgba(24,28,34,0.88), rgba(12,15,19,0.88));
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

[data-bs-theme=dark] .tc-bubble.me[b-56htv42oij] {
    background: linear-gradient(135deg, rgba(13,58,84,0.86), rgba(14,35,53,0.82));
    border-color: var(--hub-cyan);
    box-shadow: 0 0 16px rgba(51,171,228,0.10);
}

[data-bs-theme=light] .tc-bubble[b-56htv42oij] {
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(43,75,106,0.18);
    box-shadow: 0 7px 18px rgba(39,72,104,0.09), inset 0 1px 0 rgba(255,255,255,0.92);
}

[data-bs-theme=light] .tc-bubble.me[b-56htv42oij] {
    background: linear-gradient(135deg, rgba(221,246,255,0.90), rgba(238,248,255,0.82));
    border-color: var(--hub-cyan);
}

.tc-img[b-56htv42oij] {
    display: block;
    max-width: 100%;
    max-height: 220px;
    border-radius: 7px;
}

.tc-img-caption[b-56htv42oij] { padding: 6px 8px 2px; }

.tc-file[b-56htv42oij] {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--hub-text);
}

    .tc-file.with-text[b-56htv42oij] { padding-bottom: 6px; }
    .tc-file .lu[b-56htv42oij] { flex-shrink: 0; }

.tc-file-name[b-56htv42oij] {
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-time[b-56htv42oij] {
    font-size: 9.5px;
    margin-top: 3px;
}

.tc-pending-wrap[b-56htv42oij] {
    padding: 10px 14px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tc-pending[b-56htv42oij] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--hub-panel2);
    border-radius: 7px;
    border: 1px solid var(--hub-cyan);
}

    .tc-pending img[b-56htv42oij] {
        width: 28px;
        height: 28px;
        border-radius: 5px;
        object-fit: cover;
    }

.tc-pending-name[b-56htv42oij] {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-text);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-pending-x[b-56htv42oij] {
    background: none;
    border: none;
    color: var(--hub-muted-dark);
    cursor: pointer;
    padding: 2px;
}

.tc-compose[b-56htv42oij] {
    padding: 14px;
    border-top: 1px solid var(--hub-border);
    display: flex;
    gap: 8px;
}

.tc-attach[b-56htv42oij] {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--hub-border);
    border-radius: 7px;
    color: var(--hub-muted);
    cursor: pointer;
    margin: 0;
}

    .tc-attach:hover[b-56htv42oij] { color: var(--hub-text); }

.tc-draft[b-56htv42oij] { flex: 1; }

.tc-send[b-56htv42oij] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tc-empty[b-56htv42oij] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hub-font-sans);
    font-size: 13px;
    color: var(--hub-muted-dark);
}

/* Phone: list or thread, never both (prototype useMediaQuery(780)). */
@media (max-width: 780px) {
    .tc-shell[b-56htv42oij] { height: calc(100vh - 130px); }

    .tc-rail[b-56htv42oij] {
        width: 100%;
        border-right: none !important;
    }


    .tc-shell.show-list .tc-thread[b-56htv42oij],
    .tc-shell.show-thread .tc-rail[b-56htv42oij] {
        display: none;
    }

    .tc-back[b-56htv42oij] { display: block; }

    .tc-bubble[b-56htv42oij] { max-width: 82%; }
}
/* /Pages/Preview/TeamChatAvatar.razor.rz.scp.css */
.tc-avatar[b-738j8ki43m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    font-family: var(--hub-font-mono);
    font-weight: 700;
    color: var(--hub-muted);
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
}

    .tc-avatar.on[b-738j8ki43m] {
        color: var(--hub-bg);
        background: linear-gradient(135deg, var(--hub-cyan), rgba(var(--hub-cyan-rgb), 0.8));
        border-color: var(--hub-cyan);
    }
/* /Pages/Preview/TeamChatNewChatModal.razor.rz.scp.css */
/* NewChatModal: Panel { width: 420, maxWidth: "92vw", padding: 24, maxHeight: "85vh" } */
.tc-backdrop[b-o8vbpdoqtr] { background: var(--hub-overlay); }

.tc-dialog[b-o8vbpdoqtr] {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 575.98px) {
    .tc-dialog[b-o8vbpdoqtr] { max-width: 92vw; }
}

.tc-panel[b-o8vbpdoqtr] {
    padding: 24px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.tc-head[b-o8vbpdoqtr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.tc-x[b-o8vbpdoqtr] { font-size: 18px; }

.tc-types[b-o8vbpdoqtr] {
    display: flex;
    gap: 8px;
    margin: 8px 0 14px;
}

.tc-type[b-o8vbpdoqtr] {
    flex: 1;
    padding: 8px 10px;
    border-radius: 7px;
    border: 1px solid var(--hub-border);
    background: transparent;
    color: var(--hub-muted);
    font-family: var(--hub-font-mono);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

    .tc-type.active[b-o8vbpdoqtr] {
        border-color: var(--hub-cyan);
        background: rgba(var(--hub-cyan-rgb), 0.12);
        color: var(--hub-cyan);
    }

.tc-name[b-o8vbpdoqtr] { margin-bottom: 12px; }

.tc-pick-label[b-o8vbpdoqtr] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.tc-people[b-o8vbpdoqtr] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tc-person[b-o8vbpdoqtr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel2);
    cursor: pointer;
    text-align: left;
}

    .tc-person.selected[b-o8vbpdoqtr] {
        border-color: var(--hub-magenta);
        background: rgba(var(--hub-magenta-rgb), 0.1);
    }

.tc-person-text[b-o8vbpdoqtr] { flex: 1; }

.tc-person-name[b-o8vbpdoqtr] {
    font-family: var(--hub-font-sans);
    font-size: 12.5px;
    color: var(--hub-text);
}

.tc-person-role[b-o8vbpdoqtr] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
}

.tc-start[b-o8vbpdoqtr] { margin-top: 14px; }

    .tc-start:disabled[b-o8vbpdoqtr] {
        opacity: 0.5;
        cursor: not-allowed;
    }
/* /Pages/Preview/ThemeKits.Page.razor.rz.scp.css */
/* AdBuilderThemeKitsLibraryTab: filter + add button, New Theme Kit form,
   kit cards and the Edit Theme Kit panel. */
.tk[b-1s5t6k0odt] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tk-top[b-1s5t6k0odt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.tk-filter[b-1s5t6k0odt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 280px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted);
}

.tk-add-btn[b-1s5t6k0odt],
.tk-icon-btn[b-1s5t6k0odt] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tk-add-btn[b-1s5t6k0odt] {
    padding: 10px 16px;
    border-radius: 8px;
    font-family: var(--hub-font-mono);
    font-size: 11px;
    font-weight: 800;
}

.tk-form[b-1s5t6k0odt] { padding: 20px; }

.tk-form-new[b-1s5t6k0odt] { border-color: var(--hub-magenta); }
.tk-form-edit[b-1s5t6k0odt] { border-color: var(--hub-cyan); }

.tk-form-head[b-1s5t6k0odt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tk-new-grid[b-1s5t6k0odt] {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.tk-span-all[b-1s5t6k0odt] { grid-column: 1 / -1; }

.tk-label[b-1s5t6k0odt] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: var(--hub-font-mono);
    font-size: 9px;
    color: var(--hub-muted);
}

    .tk-label .hub-input[b-1s5t6k0odt] { width: 100%; }

.tk-section[b-1s5t6k0odt] { margin-top: 14px; }

.tk-chips[b-1s5t6k0odt] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* activeTabStyle when selected, outlined otherwise. */
.tk-chip[b-1s5t6k0odt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 9px;
    border-radius: 6px;
    border: 1px solid var(--hub-border);
    background: transparent;
    color: var(--hub-muted);
    font-family: var(--hub-font-mono);
    font-size: 9px;
    cursor: pointer;
}

    .tk-chip:hover[b-1s5t6k0odt] { color: var(--hub-text); border-color: var(--hub-border-bright); }

    .tk-chip.active[b-1s5t6k0odt] {
        border-color: transparent;
        background: var(--hub-gradient);
        color: rgb(255, 255, 255);
    }

    .tk-chip .lu[b-1s5t6k0odt] { font-size: 10px; }

.tk-chip-note[b-1s5t6k0odt] {
    margin-top: 6px;
    font-family: var(--hub-font-mono);
    font-size: 8.5px;
}

.tk-desc[b-1s5t6k0odt] {
    width: 100%;
    min-height: 58px;
    margin-top: 10px;
    resize: vertical;
}

.tk-form-edit .tk-desc[b-1s5t6k0odt] { min-height: 64px; margin-top: 9px; }

.tk-drop[b-1s5t6k0odt] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 18px;
    border: 1px dashed var(--hub-cyan);
    border-radius: 9px;
    background: transparent;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-cyan);
    cursor: pointer;
}

    .tk-drop .lu[b-1s5t6k0odt] { margin-right: 7px; font-size: 15px; vertical-align: -2px; }

.tk-drop-sub[b-1s5t6k0odt] {
    font-size: 9px;
    color: var(--hub-muted-dark);
}

/* ThemeAssetPicker */
.tk-picker[b-1s5t6k0odt] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
}

    .tk-picker .hub-input[b-1s5t6k0odt] { flex: 1; min-width: 200px; }

.tk-strip[b-1s5t6k0odt] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-top: 10px;
}

.tk-strip-item[b-1s5t6k0odt] {
    min-width: 120px;
    max-width: 120px;
    padding: 6px;
    border: 1px solid var(--hub-border);
    border-radius: 7px;
}

.tk-file-name[b-1s5t6k0odt] {
    margin-top: 4px;
    font-family: var(--hub-font-mono);
    font-size: 8px;
    color: var(--hub-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .tk-file-name.strong[b-1s5t6k0odt] { margin-top: 5px; color: var(--hub-text); }

.tk-hero-tag[b-1s5t6k0odt] {
    margin-top: 3px;
    font-family: var(--hub-font-mono);
    font-size: 7.5px;
    color: var(--hub-magenta);
}

.tk-save-row[b-1s5t6k0odt] {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

/* adBuilderProgressBtnStyle */
.tk-save[b-1s5t6k0odt] {
    min-height: 54px;
    padding: 15px 22px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--hub-font-mono);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 28px rgba(var(--hub-cyan-rgb), 0.18), 0 6px 20px rgba(var(--hub-magenta-rgb), 0.10);
}

    .tk-save:disabled[b-1s5t6k0odt] { box-shadow: none; cursor: not-allowed; }

/* Generated stand-in for an artwork file (the sample kits carry no image data). */
.tk-thumb[b-1s5t6k0odt] {
    display: grid;
    place-items: center;
    border-radius: 5px;
    background:
        radial-gradient(circle at 20% 25%, rgba(var(--art-rgb), 0.55), transparent 55%),
        radial-gradient(circle at 85% 85%, rgba(var(--hub-magenta-rgb), 0.22), transparent 50%),
        linear-gradient(145deg, rgba(var(--art-rgb), 0.28), var(--hub-panel2));
    font-family: var(--hub-font-mono);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: var(--hub-text);
}

    .tk-thumb.pdf[b-1s5t6k0odt] {
        background: var(--hub-panel2);
        color: var(--hub-muted);
        font-weight: 400;
    }

    .tk-thumb.small[b-1s5t6k0odt] { width: 108px; height: 72px; }
    .tk-thumb.medium[b-1s5t6k0odt] { width: 100%; height: 88px; }

    .tk-thumb.fill[b-1s5t6k0odt] {
        width: 100%;
        height: 100%;
        border-radius: 0;
        font-size: 18px;
    }

    .tk-thumb.hero[b-1s5t6k0odt] {
        width: 180px;
        height: 120px;
        border-radius: 8px;
        font-size: 16px;
    }

        .tk-thumb.hero.none[b-1s5t6k0odt] {
            background: var(--hub-panel2);
            color: var(--hub-muted-dark);
            font-weight: 400;
        }

.tk-empty[b-1s5t6k0odt] {
    padding: 42px;
    text-align: center;
}

.tk-empty-icon[b-1s5t6k0odt] { font-size: 30px; }

.tk-empty-title[b-1s5t6k0odt] {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 800;
}

.tk-empty-text[b-1s5t6k0odt] {
    margin-top: 5px;
    font-size: 10.5px;
    color: var(--hub-muted);
}

.tk-cards[b-1s5t6k0odt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.tk-card[b-1s5t6k0odt] {
    padding: 0;
    overflow: hidden;
    text-align: left;
    border-radius: 11px;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel);
    color: var(--hub-text);
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease;
}

    .tk-card:hover[b-1s5t6k0odt] { transform: translateY(-2px); border-color: var(--hub-border-bright); }

    .tk-card.selected[b-1s5t6k0odt] { border-color: var(--hub-magenta); }

.tk-card-hero[b-1s5t6k0odt] {
    position: relative;
    height: 145px;
    background: var(--hub-panel2);
}

.tk-card-nohero[b-1s5t6k0odt] {
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 30px;
    color: var(--hub-muted-dark);
}

/* The category badge sits on artwork, so it stays dark in both themes. */
.tk-category[b-1s5t6k0odt] {
    position: absolute;
    left: 9px;
    top: 9px;
    padding: 4px 7px;
    border-radius: 5px;
    background: rgba(0, 0, 0, .72);
    color: rgb(255, 255, 255);
    font-family: var(--hub-font-mono);
    font-size: 8.5px;
}

.tk-card-body[b-1s5t6k0odt] { padding: 13px; }

.tk-card-name[b-1s5t6k0odt] {
    font-size: 13px;
    font-weight: 800;
}

.tk-card-customers[b-1s5t6k0odt] {
    margin-top: 4px;
    font-family: var(--hub-font-mono);
    font-size: 9px;
    color: var(--hub-cyan);
}

.tk-card-date[b-1s5t6k0odt] {
    margin-top: 9px;
    font-family: var(--hub-font-mono);
    font-size: 8.5px;
    color: var(--hub-muted);
}

.tk-card-age[b-1s5t6k0odt] {
    margin-top: 3px;
    font-family: var(--hub-font-mono);
    font-size: 8.5px;
    color: var(--hub-muted-dark);
}

.tk-stamp[b-1s5t6k0odt],
.tk-hint[b-1s5t6k0odt] {
    margin-top: 5px;
    font-family: var(--hub-font-mono);
    font-size: 8.5px;
    color: var(--hub-muted-dark);
}

.tk-hint[b-1s5t6k0odt] { font-size: 8px; }

.tk-edit-grid[b-1s5t6k0odt] {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 16px;
    margin-top: 14px;
}

.tk-edit-fields[b-1s5t6k0odt] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 9px;
}

.tk-files-head[b-1s5t6k0odt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.tk-files[b-1s5t6k0odt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 9px;
    margin-top: 9px;
}

.tk-file[b-1s5t6k0odt] {
    min-width: 0;
    padding: 7px;
    border: 1px solid var(--hub-border);
    border-radius: 8px;
}

    .tk-file.hero[b-1s5t6k0odt] { border-color: var(--hub-magenta); }

.tk-file-actions[b-1s5t6k0odt] {
    display: flex;
    gap: 5px;
    margin-top: 6px;
}

.tk-hero-btn[b-1s5t6k0odt] {
    flex: 1;
    padding: 4px;
    border: 1px solid var(--hub-border);
    border-radius: 5px;
    background: transparent;
    color: var(--hub-muted);
    font-family: var(--hub-font-mono);
    font-size: 7.5px;
    cursor: pointer;
}

    .tk-hero-btn.on[b-1s5t6k0odt] {
        background: rgba(var(--hub-magenta-rgb), .12);
        color: var(--hub-magenta);
        cursor: default;
    }

.tk-remove[b-1s5t6k0odt] {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    border: 1px solid var(--hub-red);
    border-radius: 5px;
    background: transparent;
    color: var(--hub-red);
    font-size: 11px;
    cursor: pointer;
}

@media (max-width: 780px) {
    .tk-new-grid[b-1s5t6k0odt], .tk-edit-grid[b-1s5t6k0odt], .tk-edit-fields[b-1s5t6k0odt] { grid-template-columns: 1fr; }
    .tk-filter[b-1s5t6k0odt] { min-width: 0; width: 100%; }
}
/* /Pages/Preview/TimeOff.Page.razor.rz.scp.css */
.to[b-mnrbwtt88q] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.to-tiles[b-mnrbwtt88q] { gap: 14px; }

.to-panel[b-mnrbwtt88q] { padding: 20px; }

.to-form[b-mnrbwtt88q] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.to-date[b-mnrbwtt88q] { width: 150px; }
.to-reason[b-mnrbwtt88q] { flex: 1; min-width: 160px; }

.to-summary[b-mnrbwtt88q] {
    margin-top: 14px;
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-muted);
}

.to-list[b-mnrbwtt88q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.to-row[b-mnrbwtt88q] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
}

.to-name[b-mnrbwtt88q] { font-size: 12.5px; color: var(--hub-text); }
.to-dates[b-mnrbwtt88q] { font-family: var(--hub-font-mono); font-size: 11.5px; color: var(--hub-muted); }

.to-status[b-mnrbwtt88q] {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    text-transform: capitalize;
    color: var(--hub-magenta);
}

    .to-status.approved[b-mnrbwtt88q] { color: var(--hub-cyan); }
    .to-status.denied[b-mnrbwtt88q] { color: var(--hub-muted-dark); }

@media (max-width: 600px) {
    .to-date[b-mnrbwtt88q] { width: auto; flex: 1; min-width: 120px; }
}
/* /Pages/Preview/TimeOffAvatar.razor.rz.scp.css */
.toa[b-nettcc40lg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    font-family: var(--hub-font-mono);
    font-weight: 700;
    color: var(--hub-muted);
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
}

    .toa.active[b-nettcc40lg] {
        color: var(--hub-bg);
        background: var(--hub-cyan);
        border-color: var(--hub-cyan);
    }
/* /Pages/Preview/TimeOffMetricTile.razor.rz.scp.css */
.tom[b-7jzb72q5ff] {
    --tone: var(--hub-cyan);
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: 18px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: border-color 0.2s ease;
}

    .tom:hover[b-7jzb72q5ff] { border-color: var(--tone); }
    .tom:hover .tom-arrow[b-7jzb72q5ff] { transform: translateX(2px); }

.tone-magenta[b-7jzb72q5ff] { --tone: var(--hub-magenta); }
.tone-violet[b-7jzb72q5ff] { --tone: color-mix(in srgb, var(--hub-cyan) 35%, var(--hub-magenta)); }

.tom-head[b-7jzb72q5ff], .tom-title[b-7jzb72q5ff], .tom-body[b-7jzb72q5ff] { display: flex; align-items: center; }
.tom-head[b-7jzb72q5ff] { justify-content: space-between; }
.tom-title[b-7jzb72q5ff] { gap: 8px; }

.tom-chip[b-7jzb72q5ff] {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--tone);
    background: color-mix(in srgb, var(--tone) 13%, transparent);
    font-size: 13px;
}

.tom-label[b-7jzb72q5ff] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tom-arrow[b-7jzb72q5ff] {
    font-size: 13px;
    color: var(--hub-muted-dark);
    transition: transform 0.2s ease;
}

.tom-body[b-7jzb72q5ff] {
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 12px;
}

.tom-value[b-7jzb72q5ff] {
    font-family: var(--hub-font-mono);
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
    color: var(--hub-text);
}

.tom-change[b-7jzb72q5ff] {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 5px;
    font-family: var(--hub-font-mono);
    font-size: 10px;
}

    .tom-change.up[b-7jzb72q5ff] { color: var(--hub-cyan); }
    .tom-change.down[b-7jzb72q5ff] { color: var(--hub-magenta); }

.tom-spark[b-7jzb72q5ff] {
    display: block;
    overflow: visible;
    color: var(--tone);
}
/* /Pages/Preview/TimeOffMonthCalendar.razor.rz.scp.css */
/* calendarSurfaceStyle and friends, on theme tokens. */
.tcal[b-w79tqpvrxv] {
    padding: 20px;
    border-radius: 14px;
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.34);
    background: var(--hub-panel);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--hub-shadow);
}

.tcal-head[b-w79tqpvrxv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.tcal-nav[b-w79tqpvrxv] {
    display: flex;
    align-items: center;
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.53);
    border-radius: 10px;
    overflow: hidden;
}

.tcal-step[b-w79tqpvrxv], .tcal-today[b-w79tqpvrxv] {
    border: none;
    background: rgba(var(--hub-cyan-rgb), 0.12);
    color: var(--hub-cyan);
    font-family: var(--hub-font-mono);
    font-size: 11.5px;
    font-weight: 700;
    padding: 8px 11px;
    cursor: pointer;
}

    .tcal-step:hover[b-w79tqpvrxv], .tcal-today:hover[b-w79tqpvrxv] { background: rgba(var(--hub-cyan-rgb), 0.22); }

.tcal-today[b-w79tqpvrxv] {
    border-left: 1px solid rgba(var(--hub-cyan-rgb), 0.3);
    border-right: 1px solid rgba(var(--hub-cyan-rgb), 0.3);
}

.tcal-month[b-w79tqpvrxv] {
    font-family: var(--hub-font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--hub-text);
    padding: 6px 10px;
}

.tcal-grid[b-w79tqpvrxv] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.tcal-weekday[b-w79tqpvrxv] {
    text-align: center;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hub-cyan);
    padding: 4px 0 6px;
}

.tcal-cell[b-w79tqpvrxv] {
    min-height: 76px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 7px;
    border-radius: 10px;
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.4);
    background:
        radial-gradient(circle at 86% 88%, rgba(var(--hub-magenta-rgb), 0.12), transparent 38%),
        radial-gradient(circle at 66% 94%, rgba(var(--hub-cyan-rgb), 0.16), transparent 44%),
        var(--hub-panel2);
    text-align: left;
    cursor: pointer;
}

    .tcal-cell.out[b-w79tqpvrxv] { opacity: 0.42; }

    .tcal-cell.today[b-w79tqpvrxv] {
        border: 2px solid var(--hub-cyan);
        box-shadow: 0 0 18px var(--hub-glow-cyan);
    }

.tcal-day[b-w79tqpvrxv] {
    font-family: var(--hub-font-sans);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    color: var(--hub-text);
    padding: 2px;
    border-radius: 8px;
}

.tcal-cell.today .tcal-day[b-w79tqpvrxv] {
    background: var(--hub-cyan);
    color: var(--hub-bg);
    padding: 5px 8px;
}

.tcal-chips[b-w79tqpvrxv] { display: flex; flex-wrap: wrap; gap: 2px; }

.tcal-chip[b-w79tqpvrxv] {
    font-family: var(--hub-font-mono);
    font-size: 8px;
    font-weight: 700;
    border-radius: 3px;
    padding: 1px 4px;
}

    .tcal-chip.approved[b-w79tqpvrxv] { background: var(--hub-cyan); color: var(--hub-bg); }
    .tcal-chip.pending[b-w79tqpvrxv] { border: 1px solid var(--hub-magenta); color: var(--hub-magenta); }

.tcal-legend[b-w79tqpvrxv] {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted);
}

    .tcal-legend span[b-w79tqpvrxv] { display: flex; align-items: center; gap: 6px; }

.tcal-key[b-w79tqpvrxv] { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }
    .tcal-key.approved[b-w79tqpvrxv] { background: var(--hub-cyan); }
    .tcal-key.pending[b-w79tqpvrxv] { border: 1px solid var(--hub-magenta); }

.tcal-dialog[b-w79tqpvrxv] { max-width: 380px; }
.tcal-modal[b-w79tqpvrxv] { padding: 20px; max-height: 70vh; overflow-y: auto; }

.tcal-modal-head[b-w79tqpvrxv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.tcal-none[b-w79tqpvrxv] { font-size: 12.5px; color: var(--hub-muted-dark); }
.tcal-list[b-w79tqpvrxv] { display: flex; flex-direction: column; gap: 8px; }

.tcal-row[b-w79tqpvrxv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
}

.tcal-row-main[b-w79tqpvrxv] { flex: 1; min-width: 0; }
.tcal-row-name[b-w79tqpvrxv] { font-size: 12.5px; color: var(--hub-text); }
.tcal-row-sub[b-w79tqpvrxv] { font-family: var(--hub-font-mono); font-size: 10px; color: var(--hub-muted-dark); }

.tcal-badge[b-w79tqpvrxv] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    border-radius: 5px;
    padding: 2px 7px;
    text-transform: capitalize;
}

    .tcal-badge.approved[b-w79tqpvrxv] { color: var(--hub-cyan); border: 1px solid rgba(var(--hub-cyan-rgb), 0.33); }
    .tcal-badge.pending[b-w79tqpvrxv] { color: var(--hub-magenta); border: 1px solid rgba(var(--hub-magenta-rgb), 0.33); }

@media (max-width: 600px) {
    .tcal-cell[b-w79tqpvrxv] { min-height: 54px; padding: 4px; }
    .tcal-chip[b-w79tqpvrxv] { font-size: 7px; padding: 0 2px; }
}
/* /Pages/Preview/Vendors.Page.razor.rz.scp.css */
/* Vendors — the prototype's VendorsTab: same logo-led directory tiles as
   Customers (directoryTileStyle, minHeight 350) plus the Add Vendor modal. */
.vd-toolbar[b-6hd7s4fbqz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.vd-search[b-6hd7s4fbqz] {
    flex: 1 1 280px;
    max-width: 420px;
}

.vd-add[b-6hd7s4fbqz] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.vd-count[b-6hd7s4fbqz] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
    margin-bottom: 14px;
}

.vd-grid[b-6hd7s4fbqz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.vd-tile[b-6hd7s4fbqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    min-height: 350px;
    padding: 28px 22px 20px;
    color: var(--hub-text);
    font: inherit;
    cursor: pointer;
}

    .vd-tile:hover[b-6hd7s4fbqz] { transform: translateY(-3px); }

    .vd-tile:focus-visible[b-6hd7s4fbqz] {
        outline: 2px solid var(--hub-cyan);
        outline-offset: 2px;
    }

/* directoryMediaStyle() */
.vd-media[b-6hd7s4fbqz] {
    width: 112px;
    height: 112px;
    flex-shrink: 0;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-bs-theme=dark] .vd-media[b-6hd7s4fbqz] {
    background: radial-gradient(circle at 92% 92%, rgba(255,0,226,0.20), transparent 38%), radial-gradient(circle at 8% 92%, rgba(0,178,255,0.20), transparent 42%), rgba(25,40,63,0.84);
    border: 1px solid rgba(131,202,255,0.68);
    box-shadow: 0 14px 34px rgba(0,0,0,0.32), 0 0 20px rgba(51,171,228,0.14), inset 0 1px 0 rgba(255,255,255,0.16);
}

[data-bs-theme=light] .vd-media[b-6hd7s4fbqz] {
    background: radial-gradient(circle at 92% 92%, rgba(255,0,220,0.14), transparent 36%), radial-gradient(circle at 8% 92%, rgba(0,173,255,0.13), transparent 40%), rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.98);
    box-shadow: 0 12px 28px rgba(35,75,112,0.14), inset 0 1px 0 #fff;
}

.vd-placeholder[b-6hd7s4fbqz] {
    font-size: 48px;
    color: var(--hub-cyan);
}

.vd-name[b-6hd7s4fbqz] {
    font-size: 16px;
    font-weight: 700;
    margin-top: 22px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vd-sub[b-6hd7s4fbqz] {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-muted);
    margin-top: 5px;
}

.vd-divider[b-6hd7s4fbqz] {
    width: 74%;
    height: 1px;
    background: var(--hub-border);
    margin: 17px 0 14px;
}

.vd-meta[b-6hd7s4fbqz] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted);
    margin-top: 6px;
}

    .vd-meta.cyan[b-6hd7s4fbqz] {
        color: var(--hub-cyan);
        font-size: 11px;
        margin-top: 0;
    }

    .vd-meta.dark[b-6hd7s4fbqz] { color: var(--hub-muted-dark); }

.vd-arrow-wrap[b-6hd7s4fbqz] {
    margin-top: auto;
    padding-top: 16px;
}

.vd-arrow[b-6hd7s4fbqz] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hub-border-bright);
    color: var(--hub-cyan);
}

/* NewDirectoryRecordModal (vendor) */
.vd-backdrop[b-6hd7s4fbqz] {
    background: rgba(0, 0, 0, 0.68);
}

.vd-new-dialog[b-6hd7s4fbqz] {
    max-width: 620px;
}

.vd-new-panel[b-6hd7s4fbqz] {
    padding: 24px;
    overflow-y: auto;
}

.vd-new-head[b-6hd7s4fbqz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.vd-new-title[b-6hd7s4fbqz] {
    font-size: 19px;
    font-weight: 700;
}

.vd-new-hint[b-6hd7s4fbqz] {
    font-size: 12px;
    color: var(--hub-muted-dark);
    margin-top: 4px;
}

.vd-close-icon[b-6hd7s4fbqz] { font-size: 18px; }

.vd-form[b-6hd7s4fbqz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.vd-field[b-6hd7s4fbqz] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .vd-field.wide[b-6hd7s4fbqz] { grid-column: 1 / -1; }

    .vd-field > span[b-6hd7s4fbqz] {
        font-family: var(--hub-font-mono);
        font-size: 9.5px;
        color: var(--hub-muted-dark);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

.vd-error[b-6hd7s4fbqz] {
    margin-top: 12px;
    padding: 9px 11px;
    border-radius: 7px;
    border: 1px solid var(--hub-red);
    color: var(--hub-red);
    font-size: 12px;
}

.vd-new-actions[b-6hd7s4fbqz] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 18px;
}

    .vd-new-actions .btn[b-6hd7s4fbqz] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

@media (max-width: 575.98px) {
    .vd-search[b-6hd7s4fbqz] { max-width: none; }
    .vd-form[b-6hd7s4fbqz] { grid-template-columns: 1fr; }
}
/* /Pages/Preview/VendorsDetailModal.razor.rz.scp.css */
/* VendorDetailModal: Panel { width: 960, maxWidth: 94vw, padding: 28, background: C.bg }.
   Section headings: mono 10px magenta uppercase; rows: panel2 boxes. */
.vdm-backdrop[b-9bvqtnnrt1] {
    background: var(--hub-overlay);
}

.vdm-dialog[b-9bvqtnnrt1] {
    max-width: min(960px, 94vw);
    margin-left: auto;
    margin-right: auto;
}

.vdm-panel[b-9bvqtnnrt1] {
    padding: 28px;
    overflow-y: auto;
    background: var(--hub-bg);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.72);
    /* No blur: it would trap the store-map popup (position: fixed) inside the panel. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

    .vdm-panel > *[b-9bvqtnnrt1] { flex-shrink: 0; }

.vdm-head[b-9bvqtnnrt1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.vdm-head-left[b-9bvqtnnrt1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vdm-head-logo[b-9bvqtnnrt1],
.vdm-logo[b-9bvqtnnrt1] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--hub-cyan);
    font-size: 18px;
}

.vdm-logo[b-9bvqtnnrt1] {
    width: 56px;
    height: 56px;
    background: var(--hub-panel);
    color: var(--hub-muted-dark);
    font-size: 22px;
}

.vdm-name[b-9bvqtnnrt1] {
    font-size: 16px;
    font-weight: 700;
}

.vdm-cat[b-9bvqtnnrt1],
.vdm-mono-dark[b-9bvqtnnrt1] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
}

.vdm-x18[b-9bvqtnnrt1] { font-size: 18px; }

/* RelationshipBadges */
.vdm-badges[b-9bvqtnnrt1] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin: 10px 0;
}

.vdm-pill[b-9bvqtnnrt1] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--hub-cyan);
    color: var(--hub-cyan);
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
}

.vdm-also[b-9bvqtnnrt1] {
    padding: 5px 10px;
    font-size: 11px;
}

.vdm-badges-note[b-9bvqtnnrt1] {
    font-size: 12px;
    color: var(--hub-muted);
}

.vdm-section[b-9bvqtnnrt1] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-magenta);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 18px 0 8px;
}

.vdm-section-row[b-9bvqtnnrt1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 18px 0 8px;
}

.vdm-label[b-9bvqtnnrt1] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 18px 0 8px;
}

.vdm-box[b-9bvqtnnrt1] {
    padding: 9px 11px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 7px;
    color: var(--hub-text);
}

.vdm-logo-row[b-9bvqtnnrt1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}

.vdm-logo-side[b-9bvqtnnrt1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vdm-small[b-9bvqtnnrt1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    font-size: 10.5px;
}

.vdm-stack[b-9bvqtnnrt1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vdm-contact[b-9bvqtnnrt1] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.vdm-contact-icon[b-9bvqtnnrt1] { margin-top: 2px; }

.vdm-grow[b-9bvqtnnrt1] {
    flex: 1;
    min-width: 0;
}

.vdm-contact-name[b-9bvqtnnrt1] { font-size: 12.5px; }

.vdm-contact-title[b-9bvqtnnrt1] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
    margin-top: 1px;
}

.vdm-contact-links[b-9bvqtnnrt1] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

    .vdm-contact-links a[b-9bvqtnnrt1] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        text-decoration: none;
        color: var(--hub-cyan);
        font-family: var(--hub-font-mono);
        font-size: 10.5px;
    }

.vdm-x[b-9bvqtnnrt1] {
    background: none;
    border: none;
    color: var(--hub-muted-dark);
    cursor: pointer;
    padding: 2px;
    flex-shrink: 0;
    display: flex;
}

    .vdm-x:hover[b-9bvqtnnrt1] { color: var(--hub-text); }

.vdm-add-contact[b-9bvqtnnrt1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.vdm-row-flex[b-9bvqtnnrt1] {
    display: flex;
    gap: 6px;
}

    .vdm-row-flex > .form-control[b-9bvqtnnrt1] { flex: 1; min-width: 0; }

.vdm-flex2[b-9bvqtnnrt1] { flex: 2 !important; }

.vdm-plus[b-9bvqtnnrt1] {
    padding: 8px 10px;
    display: flex;
    align-items: center;
}

.vdm-mt8[b-9bvqtnnrt1] { margin-top: 8px; }
.vdm-mt10[b-9bvqtnnrt1] { margin-top: 10px; }
.vdm-mt16[b-9bvqtnnrt1] { margin-top: 16px; }

.vdm-info[b-9bvqtnnrt1] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    text-decoration: none;
}

a.vdm-info:hover[b-9bvqtnnrt1] { border-color: var(--hub-border-bright); color: var(--hub-text); }

.vdm-icon-input[b-9bvqtnnrt1] {
    position: relative;
}

    .vdm-icon-input > .lu[b-9bvqtnnrt1] {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
        pointer-events: none;
    }

    .vdm-icon-input > input[b-9bvqtnnrt1] { padding-left: 30px; }

.vdm-visit[b-9bvqtnnrt1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    text-decoration: none;
}

/* AppBadge */
.vdm-app[b-9bvqtnnrt1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 7px;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel2);
    color: var(--hub-text);
    text-decoration: none;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
}

.vdm-ext[b-9bvqtnnrt1] {
    font-size: 10px;
    color: var(--hub-muted-dark);
}

.vdm-grid2[b-9bvqtnnrt1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.vdm-mini-label[b-9bvqtnnrt1] {
    font-family: var(--hub-font-mono);
    font-size: 9px;
    color: var(--hub-magenta);
    text-transform: uppercase;
}

.vdm-mini-value[b-9bvqtnnrt1] {
    font-size: 12px;
    margin-top: 2px;
}

.vdm-notes[b-9bvqtnnrt1] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 7px;
    background: rgba(var(--hub-magenta-rgb), 0.06);
    border: 1px solid rgba(var(--hub-magenta-rgb), 0.2);
}

.vdm-notes-text[b-9bvqtnnrt1] {
    font-size: 12.5px;
    margin-top: 3px;
}

.vdm-line[b-9bvqtnnrt1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 12px;
}

.vdm-ellipsis[b-9bvqtnnrt1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vdm-job-title[b-9bvqtnnrt1] { font-size: 12px; }

.vdm-price[b-9bvqtnnrt1] {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-cyan);
    flex-shrink: 0;
}

.vdm-unit[b-9bvqtnnrt1] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
    flex-shrink: 0;
    min-width: 62px;
    text-align: right;
}

.vdm-empty[b-9bvqtnnrt1] {
    font-size: 12px;
    color: var(--hub-muted-dark);
}

@media (max-width: 640px) {
    .vdm-panel[b-9bvqtnnrt1] { padding: 18px; }
    .vdm-grid2[b-9bvqtnnrt1] { grid-template-columns: 1fr; }
    .vdm-row-flex[b-9bvqtnnrt1] { flex-wrap: wrap; }
}
/* /Pages/Preview/VendorsStoreLocations.razor.rz.scp.css */
/* StoreLocationsSection + StoreMiniMap */
.sl-head[b-kborf5chwi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 18px 0 8px;
}

.sl-title[b-kborf5chwi] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-magenta);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sl-small-btn[b-kborf5chwi] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    font-size: 10.5px;
}

.sl-map[b-kborf5chwi] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 2px;
    aspect-ratio: 12 / 8;
    max-height: 260px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 8px;
    padding: 6px;
}

.sl-map-cell[b-kborf5chwi] {
    border: none;
    border-radius: 3px;
    background: var(--hub-border);
    color: var(--hub-muted-dark);
    font-family: var(--hub-font-mono);
    font-size: 7px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: default;
}

    .sl-map-cell.on[b-kborf5chwi] {
        color: #04121a;
        cursor: pointer;
    }

.sl-map-hint[b-kborf5chwi] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
    margin-top: 6px;
}

.sl-search[b-kborf5chwi] {
    margin-top: 10px;
}

.sl-list[b-kborf5chwi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 4px 14px;
    margin-top: 10px;
    max-height: 320px;
    overflow-y: auto;
}

.sl-row[b-kborf5chwi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    min-height: 66px;
    flex-shrink: 0;
}

.sl-row-text[b-kborf5chwi] {
    flex: 1;
    min-width: 0;
}

.sl-row-name[b-kborf5chwi] {
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-row-addr[b-kborf5chwi] {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.sl-x[b-kborf5chwi] {
    background: none;
    border: none;
    color: var(--hub-muted-dark);
    cursor: pointer;
    padding: 2px;
    flex-shrink: 0;
    display: flex;
}

    .sl-x:hover[b-kborf5chwi] { color: var(--hub-text); }

.sl-empty[b-kborf5chwi] {
    font-size: 12px;
    color: var(--hub-muted-dark);
}

.sl-add[b-kborf5chwi] {
    display: grid;
    grid-template-columns: 1.3fr 1.3fr 1fr 0.6fr 0.8fr auto;
    gap: 6px;
    margin-top: 10px;
}

    .sl-add .btn[b-kborf5chwi] {
        padding: 8px 10px;
        display: flex;
        align-items: center;
    }

.sl-backdrop[b-kborf5chwi] {
    background: var(--hub-overlay);
    z-index: 1065;
}

.sl-state-dialog[b-kborf5chwi] {
    max-width: 360px;
}

.sl-state-panel[b-kborf5chwi] {
    padding: 18px;
    max-height: 70vh;
    overflow-y: auto;
    gap: 6px;
}

.sl-state-head[b-kborf5chwi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.sl-state-row[b-kborf5chwi] {
    padding: 8px 10px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 7px;
}

.sl-state-name[b-kborf5chwi] { font-size: 12px; }

.sl-state-addr[b-kborf5chwi] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
    margin-top: 2px;
}

@media (max-width: 640px) {
    .sl-add[b-kborf5chwi] { grid-template-columns: 1fr 1fr; }
}
/* /Shared/AdBuilder/ArtistChips.razor.rz.scp.css */
.artist-chips[b-artists] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.artist-chip[b-artists] {
    padding: 6px 11px;
    font-size: 12.5px;
}

.artist-other[b-artists] {
    display: inline-flex;
    align-items: center;
    border: 1px dashed var(--hub-border);
    border-radius: 7px;
    color: var(--hub-muted);
}

.artist-none[b-artists] {
    font-size: 12px;
    color: var(--hub-muted-dark);
}
/* /Shared/AdBuilder/AssetBadge.razor.rz.scp.css */
.asset-badge[b-8i6rg5kfk8] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

    .asset-badge.ready[b-8i6rg5kfk8] { color: var(--hub-cyan); }
    .asset-badge.missing[b-8i6rg5kfk8] { color: var(--hub-magenta); }
    .asset-badge.waiting[b-8i6rg5kfk8] { color: var(--adb-amber, #F59E0B); }
/* /Shared/AdBuilder/BlueprintPage.razor.rz.scp.css */
/* White paper in both themes: it's what the customer sees on a proof. */
.bp-page[b-ganfv7fnk4] {
    padding: 16px;
    border-radius: 8px;
    background: #fff;
    color: #111;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}

    .bp-page.print[b-ganfv7fnk4] {
        padding: 0;
        box-shadow: none;
        border-radius: 0;
    }

.bp-title[b-ganfv7fnk4] {
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 10px;
}

.bp-grid[b-ganfv7fnk4] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
}

.bp-region[b-ganfv7fnk4] {
    border: 1.5px solid #333;
    border-radius: 4px;
    padding: 6px;
    min-width: 0;
}

.bp-region-name[b-ganfv7fnk4] {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bp-component[b-ganfv7fnk4] {
    margin-top: 6px;
}

.bp-component-name[b-ganfv7fnk4] {
    font-size: 10px;
    color: #555;
    margin-bottom: 4px;
}

.bp-content-only[b-ganfv7fnk4] {
    padding: 10px;
    border: 1px dashed #aaa;
    font-size: 10px;
    color: #666;
    text-align: center;
}

.bp-slots[b-ganfv7fnk4] {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: 4px;
}

.bp-slot[b-ganfv7fnk4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 10px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

    .bp-slot.empty[b-ganfv7fnk4] {
        border-style: dashed;
        justify-content: center;
    }

.bp-slot-no[b-ganfv7fnk4] {
    font-size: 8px;
    color: #888;
    text-transform: uppercase;
}

.bp-empty[b-ganfv7fnk4] {
    color: #d32f2f;
    font-weight: 700;
}

.bp-slot[b-ganfv7fnk4]  .bp-img {
    width: 100%;
    height: 54px;
    object-fit: contain;
}

.bp-name[b-ganfv7fnk4] {
    font-weight: 700;
}

.bp-size[b-ganfv7fnk4],
.bp-qualifier[b-ganfv7fnk4] {
    color: #555;
}

.bp-price[b-ganfv7fnk4] {
    color: #d32f2f;
    font-weight: 800;
    font-size: 12px;
}

.bp-none[b-ganfv7fnk4] {
    grid-column: 1 / -1;
    padding: 30px;
    text-align: center;
    color: #777;
}

/* A skeleton (Build's page card while it loads): the same boxes, lighter, with
   their text hidden, so the page arrives in the shape it was drawn in. */
.bp-page.outline[b-ganfv7fnk4] {
    color: transparent;
}

    .bp-page.outline *[b-ganfv7fnk4] {
        color: transparent !important;
        border-color: #e3e5e9 !important;
    }
/* /Shared/AdBuilder/BuildAdStage.razor.rz.scp.css */
/* Readiness banner: tinted by state (prototype buildState colours). */
.build-state-panel[b-kjlzm1ihzx] {
    padding: 0;
    overflow: hidden;
}

.build-state[b-kjlzm1ihzx] {
    --state-color: var(--hub-cyan);
    --state-rgb: var(--hub-cyan-rgb);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 20px;
    background: rgba(var(--state-rgb), 0.08);
    border-bottom: 1px solid rgba(var(--state-rgb), 0.27);
}

    .build-state.blocked[b-kjlzm1ihzx] {
        --state-color: var(--hub-magenta);
        --state-rgb: var(--hub-magenta-rgb);
    }

    .build-state.assets[b-kjlzm1ihzx] {
        --state-color: var(--adb-amber);
        --state-rgb: var(--adb-amber-rgb);
    }

    .build-state.pending[b-kjlzm1ihzx] {
        --state-color: var(--hub-muted);
        --state-rgb: var(--hub-cyan-rgb);
    }

.build-state-main[b-kjlzm1ihzx] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.build-state-icon[b-kjlzm1ihzx] {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(var(--state-rgb), 0.4);
    background: rgba(var(--state-rgb), 0.086);
    color: var(--state-color);
    font-size: 20px;
}

.build-state-label[b-kjlzm1ihzx] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--state-color);
}

.build-state-detail[b-kjlzm1ihzx] {
    margin-top: 3px;
    font-family: var(--hub-font-sans);
    font-size: 12.5px;
    color: var(--hub-text);
}

/* Six figure tiles. */
.build-stats[b-kjlzm1ihzx] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 18px;
}

.build-stat[b-kjlzm1ihzx] {
    --stat-color: var(--hub-cyan);
    padding: 12px;
    border: 1px solid var(--hub-border);
    border-radius: 9px;
    background: var(--hub-panel2);
    color: var(--stat-color);
    min-width: 0;
}

    .build-stat.build-warn[b-kjlzm1ihzx] { --stat-color: var(--adb-amber); }
    .build-stat.build-bad[b-kjlzm1ihzx] { --stat-color: var(--hub-magenta); }
    .build-stat > .lu[b-kjlzm1ihzx] { font-size: 13px; }

.build-stat-value[b-kjlzm1ihzx] {
    margin-top: 7px;
    font-family: var(--hub-font-mono);
    font-size: 20px;
    font-weight: 900;
}

.build-stat-label[b-kjlzm1ihzx] {
    margin-top: 2px;
    font-family: var(--hub-font-mono);
    font-size: 8.5px;
    text-transform: uppercase;
    color: var(--hub-muted-dark);
}

.build-grid[b-kjlzm1ihzx] {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 18px;
    align-items: start;
}

.build-side[b-kjlzm1ihzx] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.build-card[b-kjlzm1ihzx] {
    padding: 18px;
    min-width: 0;
}

.build-ready-flag[b-kjlzm1ihzx] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    font-weight: 800;
}

.build-groups[b-kjlzm1ihzx] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.build-muted-text[b-kjlzm1ihzx] {
    font-family: var(--hub-font-sans);
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--hub-muted);
}

.build-packages[b-kjlzm1ihzx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.build-package[b-kjlzm1ihzx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--hub-border);
    border-radius: 8px;
    background: var(--hub-panel2);
}

    .build-package > .lu[b-kjlzm1ihzx] { font-size: 16px; }

.build-package-text[b-kjlzm1ihzx] {
    flex: 1;
    min-width: 0;
}

.build-package-date[b-kjlzm1ihzx] {
    font-family: var(--hub-font-sans);
    font-size: 12px;
    font-weight: 700;
    color: var(--hub-text);
}

.build-package-hash[b-kjlzm1ihzx] {
    display: block;
    font-size: 9px;
    color: var(--hub-muted-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.build-config[b-kjlzm1ihzx] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.build-config-row[b-kjlzm1ihzx] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hub-border);
}

    .build-config-row:last-child[b-kjlzm1ihzx] {
        padding-bottom: 0;
        border-bottom: none;
    }

.build-config-label[b-kjlzm1ihzx] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    color: var(--hub-muted-dark);
}

.build-config-value[b-kjlzm1ihzx] {
    font-family: var(--hub-font-sans);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--hub-text);
    text-align: right;
}

@media (max-width: 1200px) {
    .build-stats[b-kjlzm1ihzx] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .build-grid[b-kjlzm1ihzx] { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
    .build-groups[b-kjlzm1ihzx] { grid-template-columns: 1fr; }
    .build-stats[b-kjlzm1ihzx] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* /Shared/AdBuilder/BuildPagePreview.razor.rz.scp.css */
.bpp[b-igw9tdh9oj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
}

.bpp-head[b-igw9tdh9oj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.bpp-title[b-igw9tdh9oj] {
    font-size: 17px;
    font-weight: 700;
}

.bpp-size[b-igw9tdh9oj] {
    font-size: 12px;
    color: var(--hub-muted);
}

.bpp-actions[b-igw9tdh9oj] {
    display: flex;
    gap: 8px;
}

.bpp-note[b-igw9tdh9oj] {
    font-size: 11.5px;
    color: var(--hub-muted-dark);
}

.bpp-pills[b-igw9tdh9oj] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bpp-empty[b-igw9tdh9oj] {
    padding: 24px;
    text-align: center;
    font-size: 13px;
    color: var(--hub-muted-dark);
}

/* The skeleton's pills and page, spaced as they are once loaded. */
.bpp-stack[b-igw9tdh9oj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* /Shared/AdBuilder/ChecklistView.razor.rz.scp.css */
.check-group[b-checklist] {
    height: 100%;
    padding: 12px;
    border: 1px solid var(--hub-border);
    border-radius: 9px;
    background: var(--hub-panel2);
    min-width: 0;
}

.check-group-title[b-checklist] {
    margin-bottom: 10px;
    font-family: var(--hub-font-mono);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--hub-cyan);
}

.check-rows[b-checklist] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.check-row[b-checklist] {
    --check-color: var(--hub-cyan);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

    .check-row.warn[b-checklist] { --check-color: var(--adb-amber, #F59E0B); }
    .check-row.bad[b-checklist] { --check-color: var(--hub-magenta); }

    .check-row > .lu[b-checklist] {
        margin-top: 1px;
        flex-shrink: 0;
        font-size: 13px;
        color: var(--check-color);
    }

.check-text[b-checklist] {
    min-width: 0;
}

.check-label[b-checklist] {
    font-family: var(--hub-font-sans);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--check-color);
    overflow-wrap: anywhere;
}

.check-detail[b-checklist] {
    margin-top: 2px;
    font-family: var(--hub-font-sans);
    font-size: 9.5px;
    line-height: 1.35;
    color: var(--hub-muted-dark);
    overflow-wrap: anywhere;
}
/* /Shared/AdBuilder/ImageResolverModal.razor.rz.scp.css */
/* Prototype Product Image Manager: a wide two-pane panel (38% list / 62% detail). */

.resolver-progress[b-0d1j6xleh3] {
    flex-shrink: 0;
    padding: 9px 20px;
    border-bottom: 1px solid rgba(var(--hub-cyan-rgb), 0.27);
    background: rgba(var(--hub-cyan-rgb), 0.08);
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-cyan);
}

.resolver-body[b-0d1j6xleh3] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 38% minmax(0, 62%);
    overflow: hidden;
}

.resolver-left[b-0d1j6xleh3] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    padding: 12px;
    border-right: 1px solid var(--hub-border);
    overflow: hidden;
}

.resolver-confirm[b-0d1j6xleh3] {
    display: flex;
    gap: 6px;
}

.resolver-filters[b-0d1j6xleh3] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 9px;
}

.resolver-result[b-0d1j6xleh3] {
    flex-shrink: 0;
    margin-bottom: 9px;
    font-size: 10.5px;
}

.resolver-list[b-0d1j6xleh3] {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
}

.resolver-item[b-0d1j6xleh3] {
    width: 100%;
    margin-bottom: 5px;
    padding: 9px 10px;
    border: 1px solid var(--hub-border);
    border-radius: 7px;
    background: transparent;
    color: var(--hub-text);
    text-align: left;
    cursor: pointer;
}

    .resolver-item:hover[b-0d1j6xleh3] { border-color: var(--hub-border-bright); }

    .resolver-item.active[b-0d1j6xleh3] {
        border-color: var(--hub-cyan);
        background: rgba(var(--hub-cyan-rgb), 0.08);
    }

.resolver-item-row[b-0d1j6xleh3] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.resolver-mark[b-0d1j6xleh3] {
    width: 12px;
    font-size: 12px;
    flex-shrink: 0;
}

.resolver-item-name[b-0d1j6xleh3] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--hub-font-sans);
    font-size: 10.5px;
    font-weight: 800;
}

.resolver-item-meta[b-0d1j6xleh3] {
    margin-top: 3px;
    padding-left: 19px;
    font-family: var(--hub-font-mono);
    font-size: 8.5px;
    color: var(--hub-muted-dark);
}

.resolver-right[b-0d1j6xleh3] {
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
}

.resolver-detail-head[b-0d1j6xleh3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.resolver-detail-title[b-0d1j6xleh3] {
    min-width: 0;
}

.resolver-name[b-0d1j6xleh3] {
    font-family: var(--hub-font-sans);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.18;
    color: var(--hub-text);
    overflow-wrap: anywhere;
}

.resolver-variety[b-0d1j6xleh3] {
    margin-top: 4px;
    font-family: var(--hub-font-sans);
    font-size: 11px;
    color: var(--hub-muted);
}

.resolver-ids[b-0d1j6xleh3] {
    margin-top: 5px;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-cyan);
}

.resolver-images[b-0d1j6xleh3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
    margin-bottom: 16px;
}

.resolver-image-label[b-0d1j6xleh3] {
    margin-bottom: 6px;
    font-family: var(--hub-font-mono);
    font-size: 9px;
    color: var(--hub-magenta);
}

.resolver-images .resolver-image[b-0d1j6xleh3] {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-color: var(--hub-magenta);
}

.resolver-options[b-0d1j6xleh3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 21px;
}

.resolver-option[b-0d1j6xleh3] {
    padding: 12px;
    border: 1px solid var(--hub-border);
    border-radius: 8px;
}

.resolver-option-title[b-0d1j6xleh3] {
    margin-bottom: 7px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    font-weight: 900;
    color: var(--hub-cyan);
}

.resolver-option-text[b-0d1j6xleh3] {
    margin-top: 7px;
    font-family: var(--hub-font-sans);
    font-size: 9.5px;
    line-height: 1.45;
    color: var(--hub-muted-dark);
}

.resolver-status[b-0d1j6xleh3] {
    font-size: 12px;
}

@media (max-width: 780px) {
    .resolver-body[b-0d1j6xleh3] { grid-template-columns: 1fr; overflow-y: auto; }
    .resolver-left[b-0d1j6xleh3] { border-right: none; border-bottom: 1px solid var(--hub-border); }
    .resolver-list[b-0d1j6xleh3] { max-height: 40vh; }
    .resolver-images[b-0d1j6xleh3] { grid-template-columns: 1fr; }
    .resolver-options[b-0d1j6xleh3] { padding-top: 0; }
}
/* /Shared/AdBuilder/ItemChip.razor.rz.scp.css */
/* Prototype AdBuilderItemCard. --card-accent tints border, background, badge and price. */
.item-card[b-yk984t6qf1] {
    --card-accent: var(--hub-cyan);
    --card-accent-rgb: var(--hub-cyan-rgb);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    width: 100%;
    min-width: 0;
    padding: 10px;
    border: 1.5px solid var(--hub-border);
    border-radius: 8px;
    background: var(--hub-panel2);
    overflow: hidden;
    box-sizing: border-box;
}

    .item-card.compact[b-yk984t6qf1] {
        gap: 7px;
        padding: 8px;
    }

    .item-card.has-badge[b-yk984t6qf1] { padding-bottom: 32px; }
    .item-card.compact.has-badge[b-yk984t6qf1] { padding-bottom: 30px; }

    .item-card.coupon[b-yk984t6qf1] { --card-accent: var(--adb-green, #22C55E); --card-accent-rgb: var(--adb-green-rgb, 34, 197, 94); }
    .item-card.bogo[b-yk984t6qf1] { --card-accent: var(--adb-amber, #F59E0B); --card-accent-rgb: var(--adb-amber-rgb, 245, 158, 11); }
    .item-card.rewards[b-yk984t6qf1] { --card-accent: var(--adb-purple, #A855F7); --card-accent-rgb: var(--adb-purple-rgb, 168, 85, 247); }

    .item-card.coupon[b-yk984t6qf1],
    .item-card.bogo[b-yk984t6qf1],
    .item-card.rewards[b-yk984t6qf1],
    .item-card.promo[b-yk984t6qf1] {
        border-color: var(--card-accent);
        background: rgba(var(--card-accent-rgb), 0.07);
    }

.item-card-grip[b-yk984t6qf1] {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: flex;
    padding: 2px;
    border-radius: 4px;
    background: var(--hub-panel);
    color: var(--hub-muted-dark);
    font-size: 12px;
}

.item-card-badge[b-yk984t6qf1] {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 2;
    max-width: calc(100% - 12px);
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid rgba(var(--card-accent-rgb), 0.53);
    background: rgba(var(--card-accent-rgb), 0.133);
    color: var(--card-accent);
    font-family: var(--hub-font-mono);
    font-size: 7.5px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact .item-card-badge[b-yk984t6qf1] {
    padding: 2px 5px;
    font-size: 7px;
}

.item-card-image-row[b-yk984t6qf1] {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.item-card-image[b-yk984t6qf1] {
    width: 92px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel);
}

    .item-card-image.pending[b-yk984t6qf1] { border-color: rgba(var(--adb-amber-rgb, 245, 158, 11), 0.33); }

.compact .item-card-image[b-yk984t6qf1] { width: 62px; }

.item-card-image[b-yk984t6qf1]  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.item-card-pending[b-yk984t6qf1] {
    font-size: 26px;
    color: var(--adb-amber, #F59E0B);
}

.compact .item-card-pending[b-yk984t6qf1] { font-size: 18px; }

.item-card-pending-text[b-yk984t6qf1] {
    padding: 0 4px;
    font-family: var(--hub-font-mono);
    font-size: 7.5px;
    line-height: 1.2;
    text-align: center;
    color: var(--adb-amber, #F59E0B);
}

.item-card-none[b-yk984t6qf1] {
    font-size: 24px;
    color: var(--hub-muted-dark);
}

.item-card-body[b-yk984t6qf1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

    .item-card-body > *[b-yk984t6qf1] {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

.item-card-priority[b-yk984t6qf1] {
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel);
    font-family: var(--hub-font-mono);
    font-size: 8px;
    text-transform: uppercase;
    color: var(--hub-muted-dark);
}

.item-card-name[b-yk984t6qf1] {
    width: 100%;
    font-family: var(--hub-font-sans);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--hub-text);
}

.compact .item-card-name[b-yk984t6qf1] { font-size: 10.5px; }

.item-card-variety[b-yk984t6qf1],
.item-card-size[b-yk984t6qf1] {
    width: 100%;
    font-family: var(--hub-font-sans);
    font-size: 10px;
    line-height: 1.25;
    color: var(--hub-muted);
}

.item-card-size[b-yk984t6qf1] { color: var(--hub-muted-dark); }

.compact .item-card-variety[b-yk984t6qf1],
.compact .item-card-size[b-yk984t6qf1] { font-size: 9px; }

.item-card-offer[b-yk984t6qf1] {
    width: 100%;
    font-family: var(--hub-font-mono);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--hub-magenta);
}

.item-card:not(.plain) .item-card-offer[b-yk984t6qf1] { color: var(--card-accent); }

.compact .item-card-offer[b-yk984t6qf1] { font-size: 11.5px; }
/* /Shared/AdBuilder/ItemEditorModal.razor.rz.scp.css */
/* Prototype AdBuilderItemFormModal: a 760px Panel. */

.editor-text[b-dda6qn7vxy] {
    margin-bottom: 10px;
    font-family: var(--hub-font-sans);
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--hub-muted);
}

.editor-preview[b-dda6qn7vxy] {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel2);
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-text);
}

    .editor-preview strong[b-dda6qn7vxy] { color: var(--hub-magenta); }

.editor-event[b-dda6qn7vxy] {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    border: 1px solid rgba(var(--adb-amber-rgb), 0.3);
    background: rgba(var(--adb-amber-rgb), 0.06);
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--adb-amber);
}

.editor-images[b-dda6qn7vxy] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.editor-image[b-dda6qn7vxy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.editor-image-label[b-dda6qn7vxy] {
    font-family: var(--hub-font-mono);
    font-size: 9px;
    text-transform: uppercase;
    color: var(--hub-muted);
}

.editor-image .editor-image-frame[b-dda6qn7vxy] {
    height: 110px;
    border-radius: 8px;
}

.editor-box-title[b-dda6qn7vxy] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    font-weight: 900;
    color: var(--hub-cyan);
}

.editor-assort-head[b-dda6qn7vxy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

.editor-assort-text[b-dda6qn7vxy] {
    flex: 1;
    min-width: 220px;
}

    .editor-assort-text .editor-text[b-dda6qn7vxy] { margin-top: 5px; font-size: 9.5px; }

.editor-assort-select[b-dda6qn7vxy] {
    min-width: 220px;
}

.editor-small-note[b-dda6qn7vxy] {
    font-size: 11px;
    color: var(--hub-muted);
}

.editor-status[b-dda6qn7vxy] {
    margin-right: auto;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
}

.editor-submit[b-dda6qn7vxy] {
    flex: 1 1 14rem;
    max-width: 22rem;
}

@media (max-width: 640px) {
    .editor-images[b-dda6qn7vxy] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .editor-submit[b-dda6qn7vxy] { max-width: none; }
}
/* /Shared/AdBuilder/ItemEntryStage.razor.rz.scp.css */
.items-grid[b-xev4pvhwva] {
    display: grid;
    grid-template-columns: 2.6fr 1fr;
    gap: 18px;
    align-items: start;
}

.items-main[b-xev4pvhwva],
.items-side[b-xev4pvhwva] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.items-side[b-xev4pvhwva] { gap: 16px; }

.items-filters[b-xev4pvhwva] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.items-table-panel[b-xev4pvhwva] {
    padding: 0;
    overflow: hidden;
}

/* Fixed columns (the product takes what's left): the skeleton's columns are the
   loaded ones, and a long name or offer can't push the others about. */
.items-table[b-xev4pvhwva] {
    min-width: 980px;
    table-layout: fixed;
}

    .items-table th:nth-child(1)[b-xev4pvhwva] { width: 34px; }
    .items-table th:nth-child(2)[b-xev4pvhwva] { width: 100px; }
    .items-table th:nth-child(3)[b-xev4pvhwva] { width: 84px; }
    .items-table th:nth-child(5)[b-xev4pvhwva] { width: 130px; }
    .items-table th:nth-child(6)[b-xev4pvhwva] { width: 140px; }
    .items-table th:nth-child(7)[b-xev4pvhwva] { width: 110px; }
    .items-table th:nth-child(8)[b-xev4pvhwva] { width: 84px; }
    .items-table th:nth-child(9)[b-xev4pvhwva] { width: 104px; } /* room for Delete + its Cancel */

.items-dot[b-xev4pvhwva] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hub-cyan);
}

    .items-dot.warn[b-xev4pvhwva] { background: var(--adb-amber); }
    .items-dot.bad[b-xev4pvhwva] { background: var(--hub-magenta); }

.items-dept[b-xev4pvhwva] {
    font-family: var(--hub-font-sans);
    font-size: 11px;
    color: var(--hub-muted);
}

.items-sub[b-xev4pvhwva] {
    margin-top: 2px;
    font-family: var(--hub-font-mono);
    font-size: 9px;
    color: var(--hub-muted-dark);
}

.items-priority[b-xev4pvhwva] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--hub-muted);
}

    .items-priority.hero[b-xev4pvhwva] { color: var(--hub-magenta); }
    .items-priority.feature[b-xev4pvhwva] { color: var(--hub-cyan); }

.items-product[b-xev4pvhwva] {
    min-width: 210px;
}

.items-product-row[b-xev4pvhwva] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.items-product-row[b-xev4pvhwva]  .items-thumb,
.items-thumb[b-xev4pvhwva] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 6px;
}

.items-thumb-empty[b-xev4pvhwva] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel2);
    color: var(--hub-muted-dark);
    font-size: 13px;
}

.items-name[b-xev4pvhwva] {
    font-family: var(--hub-font-sans);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--hub-text);
}

.items-variety[b-xev4pvhwva] {
    min-width: 140px;
    font-family: var(--hub-font-sans);
    font-size: 10.5px;
    color: var(--hub-muted);
}

    .items-variety .items-sub[b-xev4pvhwva] { font-size: 9.5px; }

.items-offer[b-xev4pvhwva] {
    font-family: var(--hub-font-mono);
    font-size: 11.5px;
    font-weight: 800;
    color: var(--hub-magenta);
    white-space: nowrap;
}

.items-promo[b-xev4pvhwva] {
    margin-top: 3px;
    font-size: 8.5px;
    color: var(--adb-amber);
    white-space: normal;
}

.items-upc[b-xev4pvhwva] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
}

.items-actions[b-xev4pvhwva] {
    white-space: nowrap;
}

    .items-actions > * + *[b-xev4pvhwva] { margin-left: 6px; }

.items-pager[b-xev4pvhwva] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.items-showing[b-xev4pvhwva] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
}

.items-pager-controls[b-xev4pvhwva] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.items-per-page[b-xev4pvhwva] {
    width: auto;
}

.items-page-btn[b-xev4pvhwva] {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    border: 1px solid var(--hub-border);
    border-radius: 6px;
    background: none;
    color: var(--hub-muted);
    cursor: pointer;
}

    .items-page-btn:disabled[b-xev4pvhwva] {
        opacity: 0.4;
        cursor: default;
    }

.items-page-num[b-xev4pvhwva] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted);
}

.items-card[b-xev4pvhwva] {
    padding: 18px;
}

.items-summary[b-xev4pvhwva] {
    margin-top: 12px;
}

.items-checks[b-xev4pvhwva] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.items-alerts-toggle[b-xev4pvhwva] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-cyan);
    cursor: pointer;
}

.items-alerts[b-xev4pvhwva] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--hub-border);
}

.items-alert-name[b-xev4pvhwva] {
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    font-family: var(--hub-font-sans);
    font-size: 11px;
    font-weight: 700;
    color: var(--hub-text);
    cursor: pointer;
}

    .items-alert-name:hover[b-xev4pvhwva] { color: var(--hub-cyan); }

.items-alert-text[b-xev4pvhwva] {
    margin-top: 2px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
}

@media (max-width: 1200px) {
    .items-grid[b-xev4pvhwva] { grid-template-columns: 1fr; }
}
/* /Shared/AdBuilder/LayoutPlannerStage.razor.rz.scp.css */
/* Prototype AdBuilderLayoutPlannerTab. app.css's lp-drop-target / lp-draggable /
   lp-handle (drag feedback) are reused as-is; dragdrop.js relies on
   .lp-handle inside .lp-drag-preview for the drag image. */

/* --- Sticky page bar ----------------------------------------------------- */
.lp-bar[b-o3rpk0s7t2] {
    z-index: 5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 8px 0;
}

.lp-bar-label[b-o3rpk0s7t2] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
}

.lp-page-tabs[b-o3rpk0s7t2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.lp-bar-right[b-o3rpk0s7t2] {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.lp-bar-count[b-o3rpk0s7t2] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
}

.lp-empty-panel[b-o3rpk0s7t2] {
    padding: 24px;
    font-family: var(--hub-font-sans);
    font-size: 13px;
    color: var(--hub-muted-dark);
}

/* --- Recipe banner (prototype "Phase 1 Page Layout") ---------------------- */
.lp-recipe[b-o3rpk0s7t2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.2);
    border-radius: 8px;
    background: rgba(var(--hub-cyan-rgb), 0.06);
}

.lp-recipe-main[b-o3rpk0s7t2] {
    flex: 1 1 260px;
    min-width: 0;
}

.lp-recipe-select[b-o3rpk0s7t2] {
    max-width: 380px;
    font-weight: 700;
}

.lp-confirm[b-o3rpk0s7t2] {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--adb-amber-rgb), 0.4);
    border-radius: 8px;
    background: rgba(var(--adb-amber-rgb), 0.08);
    font-family: var(--hub-font-sans);
    font-size: 12px;
    color: var(--hub-text);
}

/* --- Pages 2–3 spread preview -------------------------------------------- */
.lp-spread-panel[b-o3rpk0s7t2] {
    padding: 16px;
    border-color: rgba(var(--hub-magenta-rgb), 0.4);
    background: rgba(var(--hub-magenta-rgb), 0.025);
}

.lp-spread-tag[b-o3rpk0s7t2] {
    font-family: var(--hub-font-mono);
    font-size: 9px;
    font-weight: 900;
    color: var(--hub-magenta);
}

.lp-spread[b-o3rpk0s7t2] {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 2px solid var(--hub-text);
    background: var(--hub-panel2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.lp-spread-page[b-o3rpk0s7t2] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 220px;
    padding: 10px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--hub-text);
}

    .lp-spread-page + .lp-spread-page[b-o3rpk0s7t2] {
        border-left: 2px dashed rgba(var(--hub-magenta-rgb), 0.6);
    }

    .lp-spread-page.active[b-o3rpk0s7t2] {
        background: rgba(var(--hub-cyan-rgb), 0.08);
    }

.lp-spread-page-head[b-o3rpk0s7t2] {
    display: flex;
    justify-content: space-between;
    font-family: var(--hub-font-mono);
    font-size: 9px;
    font-weight: 900;
}

.lp-spread-page.active .lp-spread-page-head[b-o3rpk0s7t2] { color: var(--hub-cyan); }

.lp-mini-grid[b-o3rpk0s7t2] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-content: start;
    gap: 4px;
}

.lp-mini-region[b-o3rpk0s7t2] {
    display: flex;
    flex-direction: column;
    min-height: 44px;
    padding: 5px;
    overflow: hidden;
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.47);
    background: rgba(var(--hub-cyan-rgb), 0.08);
}

.lp-mini-name[b-o3rpk0s7t2] {
    font-family: var(--hub-font-mono);
    font-size: 7.5px;
    font-weight: 900;
    color: var(--hub-cyan);
    overflow-wrap: anywhere;
}

.lp-mini-comp[b-o3rpk0s7t2] {
    margin-top: 2px;
    font-family: var(--hub-font-mono);
    font-size: 7px;
    color: var(--hub-muted-dark);
}

/* --- Three columns: controls · blueprint · summary ------------------------ */
.lp-grid[b-o3rpk0s7t2] {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) 270px;
    gap: 18px;
    align-items: start;
}

.lp-col[b-o3rpk0s7t2] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.lp-card[b-o3rpk0s7t2] {
    padding: 16px;
    min-width: 0;
}

.lp-sub-label[b-o3rpk0s7t2] {
    margin: 12px 0 6px;
    font-family: var(--hub-font-mono);
    font-size: 9px;
    text-transform: uppercase;
    color: var(--hub-muted-dark);
}

.lp-views[b-o3rpk0s7t2] {
    display: flex;
    gap: 6px;
}

    .lp-views > .hub-tab[b-o3rpk0s7t2] {
        flex: 1;
        justify-content: center;
        gap: 4px;
    }

.lp-toggle[b-o3rpk0s7t2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    font-family: var(--hub-font-sans);
    font-size: 11.5px;
    color: var(--hub-text);
    cursor: pointer;
}

.lp-controls[b-o3rpk0s7t2] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--hub-border);
}

.lp-page-moves[b-o3rpk0s7t2] {
    display: flex;
    gap: 6px;
}

.lp-legend-desc[b-o3rpk0s7t2] {
    margin: 8px 0 10px;
    font-family: var(--hub-font-sans);
    font-size: 9.5px;
    line-height: 1.4;
    color: var(--hub-muted-dark);
}

.lp-legend[b-o3rpk0s7t2],
.lp-library[b-o3rpk0s7t2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lp-library[b-o3rpk0s7t2] {
    margin-top: 12px;
    max-height: 340px;
    overflow-y: auto;
}

.lp-legend-row[b-o3rpk0s7t2],
.lp-library-row[b-o3rpk0s7t2] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.lp-swatch[b-o3rpk0s7t2] {
    width: 10px;
    height: 10px;
    margin-top: 2px;
    flex-shrink: 0;
    border-radius: 3px;
    border: 1px solid var(--hub-muted-dark);
    background: var(--hub-border);
}

    .lp-swatch.coupon[b-o3rpk0s7t2] { background: var(--adb-green); border-color: var(--adb-green); }
    .lp-swatch.bogo[b-o3rpk0s7t2] { background: var(--adb-amber); border-color: var(--adb-amber); }
    .lp-swatch.rewards[b-o3rpk0s7t2] { background: var(--adb-purple); border-color: var(--adb-purple); }
    .lp-swatch.promo[b-o3rpk0s7t2] { background: var(--hub-cyan); border-color: var(--hub-cyan); }

.lp-dot[b-o3rpk0s7t2] {
    width: 8px;
    height: 8px;
    margin-top: 4px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgb(var(--comp-rgb));
}

.lp-library-name[b-o3rpk0s7t2] {
    font-family: var(--hub-font-sans);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--hub-text);
}

.lp-library-desc[b-o3rpk0s7t2] {
    margin-top: 1px;
    font-family: var(--hub-font-sans);
    font-size: 9px;
    line-height: 1.25;
    color: var(--hub-muted-dark);
}

/* --- Blueprint ------------------------------------------------------------ */
.lp-blueprint[b-o3rpk0s7t2] {
    padding: 18px;
}

.lp-blueprint-head[b-o3rpk0s7t2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.lp-blueprint-title[b-o3rpk0s7t2] {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--hub-cyan);
}

.lp-zoom[b-o3rpk0s7t2] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.lp-zoom-btn[b-o3rpk0s7t2] {
    display: flex;
    padding: 4px 6px;
    border: 1px solid var(--hub-border);
    border-radius: 5px;
    background: none;
    color: var(--hub-muted);
    cursor: pointer;
}

    .lp-zoom-btn:disabled[b-o3rpk0s7t2] { opacity: 0.4; cursor: default; }

.lp-zoom-value[b-o3rpk0s7t2] {
    min-width: 34px;
    text-align: center;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted);
}

.lp-regions[b-o3rpk0s7t2] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.lp-region[b-o3rpk0s7t2] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--hub-border);
    border-radius: 9px;
}

.lp-region-head[b-o3rpk0s7t2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    background: var(--hub-panel2);
    border-bottom: 1px solid var(--hub-border);
}

.lp-grip[b-o3rpk0s7t2] {
    color: var(--hub-muted-dark);
    font-size: 13px;
}

.lp-region-name[b-o3rpk0s7t2] {
    flex: 1 1 8rem;
    min-width: 7rem;
    font-size: 10.5px;
    font-weight: 700;
}

.lp-mini-select[b-o3rpk0s7t2] {
    width: auto;
    font-size: 9.5px;
    padding: 4px 1.6rem 4px 6px;
    background-position: right 0.35rem center;
}

.lp-head-actions[b-o3rpk0s7t2] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin-left: auto;
}

.lp-region-body[b-o3rpk0s7t2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

.lp-component[b-o3rpk0s7t2] {
    overflow: hidden;
    border: 1px solid rgba(var(--comp-rgb), 0.33);
    border-radius: 8px;
}

.lp-component-head[b-o3rpk0s7t2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(var(--comp-rgb), 0.07);
}

.lp-component-type[b-o3rpk0s7t2] {
    flex: 1 1 9rem;
    min-width: 8rem;
    font-size: 9.5px;
    padding: 4px 1.6rem 4px 6px;
    background-position: right 0.35rem center;
    color: rgb(var(--comp-rgb));
    font-weight: 700;
}

.lp-slots-label[b-o3rpk0s7t2] {
    font-family: var(--hub-font-mono);
    font-size: 8.5px;
    color: var(--hub-muted-dark);
}

.lp-slots-input[b-o3rpk0s7t2] {
    width: 3.4rem;
    font-size: 9.5px;
    padding: 4px 5px;
}

.lp-cols-select[b-o3rpk0s7t2] {
    width: 3.2rem;
    font-size: 9.5px;
    padding: 4px 1.3rem 4px 6px;
    background-position: right 0.3rem center;
}

.lp-content-only[b-o3rpk0s7t2] {
    padding: 8px 10px;
    font-family: var(--hub-font-sans);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
}

.lp-slots[b-o3rpk0s7t2] {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 7px;
    padding: 8px;
}

.lp-slot-cell[b-o3rpk0s7t2] {
    position: relative;
    min-width: 0;
    min-height: 132px;
    padding: 18px 7px 7px;
    border: 1px dashed var(--hub-border);
    border-radius: 7px;
    background: var(--hub-panel2);
}

    .lp-slot-cell.compact[b-o3rpk0s7t2] { min-height: 98px; }

    .lp-slot-cell.filled[b-o3rpk0s7t2] {
        border-color: rgba(var(--hub-cyan-rgb), 0.4);
        background: rgba(var(--hub-cyan-rgb), 0.035);
    }

.lp-slot-no[b-o3rpk0s7t2] {
    position: absolute;
    top: 4px;
    left: 6px;
    z-index: 2;
    font-family: var(--hub-font-mono);
    font-size: 7.5px;
    color: var(--hub-muted-dark);
}

.lp-slot-remove[b-o3rpk0s7t2] {
    position: absolute;
    top: 2px;
    right: 4px;
    z-index: 3;
    padding: 1px;
    font-size: 11px;
}

/* The prototype puts the card's grip in the top-right corner; in a slot that
   corner holds the remove "x", so drop the card's grip there. */
.lp-slot-cell[b-o3rpk0s7t2]  .item-card-grip { display: none; }

.lp-slot-pick[b-o3rpk0s7t2] {
    border: none;
    background-color: transparent;
    color: var(--hub-muted-dark);
    font-size: 10px;
    padding-left: 2px;
}

.lp-add-row[b-o3rpk0s7t2] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lp-add-component[b-o3rpk0s7t2] {
    border-style: dashed;
    background-color: transparent;
    color: var(--hub-muted-dark);
    font-size: 10.5px;
}

.lp-drop-zone[b-o3rpk0s7t2] {
    padding: 4px 10px;
    border: 1px dashed var(--hub-cyan);
    border-radius: 6px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-cyan);
    white-space: nowrap;
}

.lp-drop-zone-wide[b-o3rpk0s7t2] {
    grid-column: 1 / -1;
    padding: 10px;
    text-align: center;
}

.lp-add-region[b-o3rpk0s7t2] {
    grid-column: 1 / -1;
    padding: 12px;
    border: 1px dashed var(--hub-border);
    border-radius: 7px;
    background: transparent;
    font-family: var(--hub-font-sans);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
    cursor: pointer;
}

/* List view cells. */
.lp-list-region[b-o3rpk0s7t2] {
    font-family: var(--hub-font-sans);
    font-size: 11px;
    font-weight: 700;
    color: var(--hub-text);
}

.lp-list-muted[b-o3rpk0s7t2] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted);
}

.lp-list-product[b-o3rpk0s7t2] {
    font-family: var(--hub-font-sans);
    font-size: 11px;
    color: var(--hub-text);
}

.lp-list-offer[b-o3rpk0s7t2] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--hub-magenta);
    white-space: nowrap;
}

/* --- Unassigned items ----------------------------------------------------- */
.lp-unassigned[b-o3rpk0s7t2] {
    margin-top: 14px;
    padding: 10px;
    border: 1px dashed rgba(var(--hub-magenta-rgb), 0.4);
    border-radius: 8px;
}

.lp-unassigned-title[b-o3rpk0s7t2] {
    margin-bottom: 8px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--hub-magenta);
}

.lp-unassigned-empty[b-o3rpk0s7t2] {
    font-family: var(--hub-font-sans);
    font-size: 11px;
    color: var(--hub-muted-dark);
}

.lp-unassigned-grid[b-o3rpk0s7t2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.lp-palette-item[b-o3rpk0s7t2] {
    position: relative;
    min-width: 0;
}

.lp-palette-page[b-o3rpk0s7t2] {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel);
    font-family: var(--hub-font-mono);
    font-size: 8px;
    color: var(--hub-muted-dark);
}

    .lp-palette-page.here[b-o3rpk0s7t2] {
        border-color: var(--hub-cyan);
        color: var(--hub-cyan);
    }

/* --- Right column --------------------------------------------------------- */
.lp-summary[b-o3rpk0s7t2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 12px;
}

.lp-summary-box[b-o3rpk0s7t2] {
    padding: 9px;
    border: 1px solid var(--hub-border);
    border-radius: 7px;
    background: var(--hub-panel2);
}

.lp-health[b-o3rpk0s7t2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.lp-health-text[b-o3rpk0s7t2] {
    font-family: var(--hub-font-sans);
    font-size: 11px;
    line-height: 1.35;
    color: var(--hub-text);
}

/* --- Narrower screens ----------------------------------------------------- */
@media (max-width: 1500px) {
    .lp-grid[b-o3rpk0s7t2] { grid-template-columns: minmax(0, 1fr) 260px; }
    .lp-col-left[b-o3rpk0s7t2] { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .lp-grid[b-o3rpk0s7t2] { grid-template-columns: minmax(0, 1fr); }
    .lp-col-left[b-o3rpk0s7t2] { grid-template-columns: 1fr; }
    .lp-col-right[b-o3rpk0s7t2] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

@media (max-width: 780px) {
    .lp-regions[b-o3rpk0s7t2] { grid-template-columns: minmax(0, 1fr); }
    .lp-region[b-o3rpk0s7t2] { grid-column: 1 / -1 !important; }
    .lp-slots[b-o3rpk0s7t2] { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .lp-spread[b-o3rpk0s7t2] { grid-template-columns: 1fr; }
    .lp-spread-page + .lp-spread-page[b-o3rpk0s7t2] { border-left: none; border-top: 2px dashed rgba(var(--hub-magenta-rgb), 0.6); }
    .lp-bar-right[b-o3rpk0s7t2] { margin-left: 0; }
}

/* Skeleton of the blueprint while the layout loads: a header band, then a
   grid of regions. */
.lp-skel-page[b-o3rpk0s7t2] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

    .lp-skel-page[b-o3rpk0s7t2]  .lp-skel-wide {
        grid-column: 1 / -1;
    }
/* /Shared/AdBuilder/ProjectSetupStage.razor.rz.scp.css */
/* Main column + a side column with Next phase, the checklist and the summary
   (frames v4/043–080). The side column drops below on narrow screens. */
.setup-layout[b-adbsetup] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.setup-side[b-adbsetup] {
    position: sticky;
    top: 12px;
}

.setup-card[b-adbsetup] {
    padding: 18px 20px;
}

.setup-card-head[b-adbsetup] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.setup-aside[b-adbsetup] {
    font-size: 11.5px;
    color: var(--hub-muted-dark);
}

.setup-h[b-adbsetup] {
    font-size: 19px;
    font-weight: 700;
}

    .setup-h.small[b-adbsetup] {
        font-size: 15px;
    }

.setup-sub[b-adbsetup] {
    font-size: 12.5px;
    color: var(--hub-muted);
    margin: 2px 0 14px;
}

.setup-fields[b-adbsetup] {
    gap: 12px 14px;
    margin-bottom: 14px;
}

.setup-field[b-adbsetup] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* readonlyStyle: dimmed, not-allowed. */
.setup-readonly[b-adbsetup],
.setup-readonly:focus[b-adbsetup] {
    color: var(--hub-muted);
    cursor: not-allowed;
    box-shadow: none;
}

.setup-linked-note[b-adbsetup] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--hub-panel2);
    font-size: 12px;
    color: var(--hub-muted);
}

/* Starting layout: current choice + "choose another" tiles, then the library. */
.setup-tiles[b-adbsetup] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.setup-tile[b-adbsetup] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel2);
    color: var(--hub-text);
    text-align: left;
}

    .setup-tile.chosen[b-adbsetup] {
        border-color: var(--hub-cyan);
    }

.setup-tile-action[b-adbsetup] {
    justify-content: center;
    border-style: dashed;
    cursor: pointer;
}

    .setup-tile-action:hover[b-adbsetup] {
        border-color: var(--hub-cyan);
    }

.setup-tile-meta[b-adbsetup] {
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
}

.setup-tile-name[b-adbsetup] {
    font-weight: 700;
    font-size: 13.5px;
}

.setup-tile-check[b-adbsetup] {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--hub-cyan);
}

.setup-thumb[b-adbsetup] {
    display: inline-flex;
    gap: 3px;
    flex-shrink: 0;
}

    .setup-thumb i[b-adbsetup] {
        display: block;
        width: 13px;
        height: 22px;
        border-radius: 2px;
        border: 1px solid var(--hub-cyan);
        background: rgba(var(--hub-cyan-rgb), 0.12);
    }

        .setup-thumb i.empty[b-adbsetup] {
            border-style: dashed;
            border-color: var(--hub-border-bright);
            background: none;
        }

.setup-library[b-adbsetup] {
    margin-top: 14px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--hub-border);
}

.setup-library-title[b-adbsetup] {
    font-weight: 700;
}

.setup-library-desc[b-adbsetup] {
    font-size: 12px;
    color: var(--hub-muted);
    margin: 4px 0 12px;
}

.setup-library-grid[b-adbsetup] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.setup-layout-card[b-adbsetup] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px;
    border-radius: 9px;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel2);
    color: var(--hub-text);
    text-align: left;
    cursor: pointer;
}

    .setup-layout-card:hover[b-adbsetup],
    .setup-layout-card.active[b-adbsetup] {
        border-color: var(--hub-cyan);
    }

    .setup-layout-card.active[b-adbsetup] {
        background: rgba(var(--hub-cyan-rgb), 0.08);
    }

.setup-layout-desc[b-adbsetup] {
    font-size: 11.5px;
    color: var(--hub-muted);
}

.setup-layout-foot[b-adbsetup] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
}

.setup-facts[b-adbsetup] {
    gap: 14px;
    margin-top: 16px;
}

.setup-fact[b-adbsetup] {
    font-weight: 600;
    font-size: 13px;
    margin: 4px 0 2px;
}

/* Page size & format: fields beside the wireframe. */
.setup-size[b-adbsetup] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 18px;
    align-items: start;
}

.setup-wire[b-adbsetup] {
    margin: 0;
    text-align: center;
}

    .setup-wire svg[b-adbsetup] {
        width: 100%;
        max-height: 280px;
    }

    .setup-wire figcaption[b-adbsetup] {
        margin-top: 6px;
        font-size: 11.5px;
        color: var(--hub-muted);
    }

.setup-wire-panel[b-adbsetup] {
    fill: rgba(var(--hub-cyan-rgb), 0.06);
    stroke: var(--hub-cyan);
    stroke-width: 0.06;
}

.setup-wire-fold[b-adbsetup] {
    stroke: var(--hub-magenta);
    stroke-width: 0.08;
    stroke-dasharray: 0.4 0.3;
}

.setup-wire-empty[b-adbsetup] {
    padding: 30px 12px;
    border: 1px dashed var(--hub-border);
    border-radius: 8px;
    text-align: center;
    font-size: 12px;
    color: var(--hub-muted-dark);
}

.setup-footnote[b-adbsetup] {
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--hub-muted-dark);
}

.setup-advanced > summary[b-adbsetup],
.setup-advanced-head[b-adbsetup] {
    font-weight: 700;
    font-size: 13.5px;
}

.setup-advanced > summary[b-adbsetup] {
    cursor: pointer;
}

.setup-groups[b-adbsetup] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.setup-group[b-adbsetup] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .setup-group input:first-of-type[b-adbsetup] { flex: 1 1 auto; }

.setup-version[b-adbsetup] {
    flex: 0 0 9rem;
    width: 9rem;
}

.setup-save-row[b-adbsetup] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.setup-bottom[b-adbsetup] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.setup-bottom-next[b-adbsetup] {
    width: 320px;
    max-width: 100%;
}

/* "NEXT PHASE": grey until the checklist passes, bright when it does. */
.setup-next[b-adbsetup] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .setup-next[b-adbsetup]  .setup-next-btn {
        width: 100%;
        padding: 12px;
        font-size: 13px;
    }

    .setup-next:not(.ready)[b-adbsetup]  .setup-next-btn {
        filter: grayscale(1);
    }

.setup-summary[b-adbsetup] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.setup-summary-row[b-adbsetup] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
}

.setup-summary-label[b-adbsetup] {
    color: var(--hub-muted);
    flex-shrink: 0;
}

.setup-summary-value[b-adbsetup] {
    text-align: right;
    font-weight: 600;
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .setup-layout[b-adbsetup] {
        grid-template-columns: 1fr;
    }

    .setup-side[b-adbsetup] {
        position: static;
    }
}

@media (max-width: 640px) {
    .setup-tiles[b-adbsetup],
    .setup-size[b-adbsetup] {
        grid-template-columns: 1fr;
    }

    .setup-version[b-adbsetup] { flex-basis: 6rem; width: 6rem; }
}
/* /Shared/AdBuilder/VarietyImages.razor.rz.scp.css */
.variety-bar[b-qcnmqntp96] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* btnStyle("#22C55E"): the prototype's green variety button. */
.variety-add[b-qcnmqntp96] {
    --bs-btn-color: var(--adb-green, #22C55E);
    --bs-btn-bg: rgba(var(--adb-green-rgb, 34, 197, 94), 0.094);
    --bs-btn-border-color: var(--adb-green, #22C55E);
    --bs-btn-hover-color: var(--adb-green, #22C55E);
    --bs-btn-hover-bg: rgba(var(--adb-green-rgb, 34, 197, 94), 0.18);
    --bs-btn-hover-border-color: var(--adb-green, #22C55E);
    --bs-btn-active-color: var(--adb-green, #22C55E);
    --bs-btn-active-bg: rgba(var(--adb-green-rgb, 34, 197, 94), 0.24);
    --bs-btn-active-border-color: var(--adb-green, #22C55E);
    --bs-btn-disabled-color: var(--adb-green, #22C55E);
    --bs-btn-disabled-border-color: var(--adb-green, #22C55E);
}

.variety-full[b-qcnmqntp96] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted);
}

.variety-count[b-qcnmqntp96] {
    font-family: var(--hub-font-mono);
    font-size: 8.5px;
    color: var(--hub-muted-dark);
}

.variety-grid[b-qcnmqntp96] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.variety-tile[b-qcnmqntp96] {
    min-width: 0;
    padding: 7px;
    border: 1px solid var(--hub-border);
    border-radius: 7px;
}

.variety-tile .variety-frame[b-qcnmqntp96] {
    aspect-ratio: 1 / 1;
    border: none;
    border-radius: 6px;
    background-size: 14px 14px;
}

.variety-label[b-qcnmqntp96] {
    margin: 5px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--hub-font-sans);
    font-size: 8.5px;
    color: var(--hub-text);
}
/* /Shared/AdBuilder/WorkflowChart.razor.rz.scp.css */
/* Prototype AdBuilderWorkflowChart: circles 40px (32 small) on a 1px line. */
/* Scrolls sideways on a narrow screen. That clips the other way too, so the
   current phase's ring and a circle's lift on hover get room inside it. */
.wf-scroll[b-wfchart] {
    overflow-x: auto;
    margin: -6px;
    padding: 6px;
}

.wf[b-wfchart] {
    --wf-circle: 40px;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 560px;
}

.wf-small[b-wfchart] {
    --wf-circle: 32px;
}

.wf-line[b-wfchart] {
    position: absolute;
    top: calc(var(--wf-circle) / 2);
    left: 8%;
    right: 8%;
    height: 1px;
    background: var(--hub-border);
    z-index: 0;
}

.wf-step[b-wfchart] {
    --wf-color: var(--hub-muted-dark);
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    color: var(--hub-text);
    cursor: default;
}

button.wf-step:not(:disabled)[b-wfchart] {
    cursor: pointer;
}

button.wf-step:disabled[b-wfchart] {
    opacity: 1;
}

.wf-done[b-wfchart] { --wf-color: var(--hub-cyan); }
.wf-active[b-wfchart] { --wf-color: var(--hub-magenta); }

.wf-circle[b-wfchart] {
    width: var(--wf-circle);
    height: var(--wf-circle);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--wf-color);
    background: var(--hub-panel2);
    color: var(--wf-color);
    font-size: 17px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wf-small .wf-circle[b-wfchart] {
    font-size: 14px;
}

.wf-done .wf-circle[b-wfchart] {
    background: rgba(var(--hub-cyan-rgb), 0.133);
}

.wf-active .wf-circle[b-wfchart] {
    background: rgba(var(--hub-magenta-rgb), 0.133);
}

.wf-na .wf-circle[b-wfchart] {
    border-style: dashed;
}

.wf-current .wf-circle[b-wfchart] {
    box-shadow: 0 0 0 4px rgba(var(--hub-cyan-rgb), 0.18);
}

button.wf-step:not(:disabled):hover .wf-circle[b-wfchart] {
    transform: translateY(-2px);
}

.wf-label[b-wfchart] {
    font-family: var(--hub-font-sans);
    font-size: 11px;
    font-weight: 700;
    color: var(--hub-text);
    text-align: center;
    line-height: 1.25;
}

.wf-state[b-wfchart] {
    font-family: var(--hub-font-mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--wf-color);
    text-align: center;
}

.wf-small .wf-label[b-wfchart] { font-size: 10.5px; }
.wf-small .wf-state[b-wfchart] { font-size: 8.5px; }

/* Skeleton: not-started circles in the border colour, bars for the text. */
.wf-skel .wf-circle[b-wfchart] {
    border-color: var(--hub-border);
}
/* /Shared/Admin/AdminWorkflowsSection.razor.rz.scp.css */
.awf-card[b-slumg0tei1] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.awf-head[b-slumg0tei1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.awf-name[b-slumg0tei1] {
    font-weight: 700;
    max-width: 360px;
}

.awf-phase[b-slumg0tei1] {
    display: grid;
    grid-template-columns: 24px 1fr 1fr auto auto;
    gap: 8px;
    align-items: center;
}

.awf-num[b-slumg0tei1] {
    font-family: var(--hub-font-mono);
    font-size: 12px;
    color: var(--hub-muted);
}

.awf-actions[b-slumg0tei1] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

.awf-new[b-slumg0tei1] {
    align-self: flex-start;
}

@media (max-width: 575.98px) {
    .awf-phase[b-slumg0tei1] {
        grid-template-columns: 24px 1fr auto auto;
    }

        .awf-phase > :nth-child(3)[b-slumg0tei1] {
            grid-column: 2 / -1;
            grid-row: 2;
        }
}
/* /Shared/ClockPill.razor.rz.scp.css */
/* ClockWidget: jobLogRowStyle pill, cyan border while clocked in. */
.clock-pill[b-wu04qegrj4] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-radius: 10px;
    border-color: var(--hub-border-bright) !important;
    cursor: pointer;
    font: inherit;
    min-width: 0;
}

    .clock-pill.in[b-wu04qegrj4] {
        border-color: var(--hub-cyan) !important;
    }

.clock-dot[b-wu04qegrj4] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--hub-muted-dark);
}

.clock-pill.in .clock-dot[b-wu04qegrj4] {
    background: var(--hub-cyan);
}

.clock-text[b-wu04qegrj4] {
    font-family: var(--hub-font-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--hub-muted);
    white-space: nowrap;
}

.clock-pill.in .clock-text[b-wu04qegrj4] {
    color: var(--hub-cyan);
}

.clock-job[b-wu04qegrj4] {
    font-size: 11px;
    color: var(--hub-muted);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 780px) {
    .clock-job[b-wu04qegrj4] {
        display: none;
    }

    .clock-pill[b-wu04qegrj4] {
        padding: 7px 10px;
    }
}
/* /Shared/ConfirmClose.razor.rz.scp.css */
.confirm-close[b-sjocruuyxf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hub-border);
    font-size: 12px;
}

    .confirm-close:focus[b-sjocruuyxf] {
        outline: none;
    }
/* /Shared/ConfirmRemove.razor.rz.scp.css */
/* Both states sit at the end of their row, where the × always was. */
.confirm-remove-x[b-4t1t4v9ocm] {
    margin: 0 0 0 auto;
}

/* Exactly as tall as the × (its 1em icon and 6px padding), the buttons
   centred in it: asking doesn't change the row's height. */
.confirm-remove[b-4t1t4v9ocm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: calc(1em + 12px);
    margin-left: auto;
    flex-shrink: 0;
}
/* /Shared/Customers/CustomerProfileModal.razor.rz.scp.css */
/* ClientDetailModal: Panel { width: 960, maxWidth: "94vw", background: C.bg }.
   Section headings: mono 10px, magentaBright, uppercase, letter-spacing .08em. */
.cp-body[b-2jeypahxgo] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* A flex column: without this the overflow:hidden glass rows would shrink to
   a sliver instead of the body scrolling. */
.cp-body > *[b-2jeypahxgo] {
    flex-shrink: 0;
}

.cp-head[b-2jeypahxgo] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cp-head-logo[b-2jeypahxgo] {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    color: var(--hub-cyan);
}

    .cp-head-logo[b-2jeypahxgo]  img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.cp-head-text[b-2jeypahxgo] {
    flex: 1;
    min-width: 0;
}

.cp-name[b-2jeypahxgo] {
    font-size: 17px;
    font-weight: 700;
}

.cp-since[b-2jeypahxgo] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted);
}

.cp-chips[b-2jeypahxgo] {
    margin-top: 8px;
}

.cp-chip[b-2jeypahxgo] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--hub-cyan);
    color: var(--hub-cyan);
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
}

.cp-card[b-2jeypahxgo] {
    padding: 16px;
}

    .cp-card > summary[b-2jeypahxgo] {
        cursor: pointer;
        list-style: none;
    }

.cp-check[b-2jeypahxgo] {
    margin-bottom: 10px;
    font-size: 12.5px;
}

.cp-grid-2[b-2jeypahxgo],
.cp-grid-4[b-2jeypahxgo] {
    display: grid;
    gap: 8px 10px;
    margin-bottom: 8px;
}

.cp-grid-2[b-2jeypahxgo] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-grid-4[b-2jeypahxgo] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cp-field[b-2jeypahxgo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
}

.cp-hint[b-2jeypahxgo] {
    font-size: 11px;
    color: var(--hub-muted);
    margin: 4px 0 10px;
}

.cp-text[b-2jeypahxgo] {
    font-size: 13px;
    margin-bottom: 10px;
}

.cp-subhead[b-2jeypahxgo] {
    font-size: 12px;
    font-weight: 700;
    color: var(--hub-magenta);
    margin: 4px 0 8px;
}

.cp-exception[b-2jeypahxgo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 6px 10px;
    margin-bottom: 6px;
    border-radius: 7px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    font-family: var(--hub-font-mono);
    font-size: 11px;
}

    .cp-exception .btn[b-2jeypahxgo] {
        margin-left: auto;
    }

.cp-buttons[b-2jeypahxgo] {
    margin-top: 8px;
}

.cp-section-label[b-2jeypahxgo] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hub-magenta);
    margin-top: 10px;
}

.cp-section-head[b-2jeypahxgo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

    .cp-section-head .cp-section-label[b-2jeypahxgo] {
        margin-top: 0;
    }

.cp-muted[b-2jeypahxgo] {
    font-size: 12px;
    color: var(--hub-muted);
    margin: 0;
}

/* The dialog's footer, its contents on the left as a delete's are. */
.cp-delete[b-2jeypahxgo] {
    justify-content: flex-start;
    gap: 6px;
    font-size: 12px;
}

/* Closing with unsaved schedule or printer changes: asked under the header. */
.cp-confirm-close[b-2jeypahxgo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hub-border);
    font-size: 12px;
}

    .cp-confirm-close:focus[b-2jeypahxgo] {
        outline: none;
    }

/* Keyboard focus. The borderless row inputs show it on their row; the
   prototype's tinted buttons get a ring in their own colour instead of
   Bootstrap's default blue (or none, for magenta); and an upload button —
   a label for a hidden file input — shows the ring of its input. */
.cp-input-row:focus-within[b-2jeypahxgo] {
    outline: 2px solid rgba(var(--hub-cyan-rgb), 0.6);
    outline-offset: 1px;
}

.cp-body[b-2jeypahxgo]  .btn-primary,
.cp-body[b-2jeypahxgo]  .btn-secondary {
    --bs-btn-focus-shadow-rgb: var(--hub-cyan-rgb);
}

.cp-body[b-2jeypahxgo]  .btn-magenta {
    --bs-btn-focus-shadow-rgb: var(--hub-magenta-rgb);
}

.cp-body[b-2jeypahxgo]  .btn-danger {
    --bs-btn-focus-shadow-rgb: 255, 107, 107;
}

.cp-row[b-2jeypahxgo],
.cp-stores[b-2jeypahxgo]  .cp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 13px;
}

    .cp-row > .lu[b-2jeypahxgo],
    .cp-stores[b-2jeypahxgo]  .cp-row > .lu {
        color: var(--hub-cyan);
        flex-shrink: 0;
    }

.cp-logo-thumb[b-2jeypahxgo] {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--hub-muted-dark);
}

    .cp-logo-thumb[b-2jeypahxgo]  img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.cp-logo-row[b-2jeypahxgo] {
    flex-wrap: wrap;
}

.cp-contact[b-2jeypahxgo] {
    align-items: flex-start;
}

.cp-contact-text[b-2jeypahxgo] {
    min-width: 0;
    flex: 1;
}

.cp-contact-name[b-2jeypahxgo],
.cp-stores[b-2jeypahxgo]  .cp-contact-name {
    font-size: 13px;
    font-weight: 600;
}

.cp-mono-small[b-2jeypahxgo],
.cp-stores[b-2jeypahxgo]  .cp-mono-small {
    display: block;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted);
}

.cp-contact-links[b-2jeypahxgo] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 3px;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
}

    .cp-contact-links a[b-2jeypahxgo] {
        color: var(--hub-cyan);
        text-decoration: none;
    }

.cp-add-row[b-2jeypahxgo] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
}

.cp-rows[b-2jeypahxgo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.cp-input-row[b-2jeypahxgo] {
    padding: 2px 4px 2px 12px;
}

    [data-bs-theme] .cp-input-row.invalid[b-2jeypahxgo] {
        border-color: var(--bs-danger);
    }

/* Under a field: the expected format, or the error when the value doesn't fit. */
.cp-format[b-2jeypahxgo],
.cp-error[b-2jeypahxgo] {
    font-size: 11px;
    margin: 4px 2px 0;
}

.cp-format[b-2jeypahxgo] {
    color: var(--hub-muted-dark);
}

.cp-error[b-2jeypahxgo] {
    color: var(--bs-danger);
}

    .cp-input-row input[b-2jeypahxgo] {
        flex: 1;
        min-width: 0;
        border: none;
        background: transparent;
        color: var(--hub-text);
        font-size: 13px;
        padding: 7px 4px;
        outline: none;
    }

        .cp-input-row input[b-2jeypahxgo]::placeholder {
            color: var(--hub-muted-dark);
        }

.cp-link-field[b-2jeypahxgo] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .cp-link-field > :first-child[b-2jeypahxgo] {
        flex: 1;
    }

.cp-pricing-file[b-2jeypahxgo] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-store-search[b-2jeypahxgo] {
    max-width: 320px;
}

.cp-stores[b-2jeypahxgo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
}

    /* A scrolling flex column would squash its rows instead of scrolling them. */
    .cp-stores > *[b-2jeypahxgo] {
        flex-shrink: 0;
    }

/* StoreLocationsSection add row: 1.3fr 1.3fr 1fr .6fr .8fr auto */
.cp-store-add[b-2jeypahxgo] {
    display: grid;
    grid-template-columns: 1.3fr 1.3fr 1fr 0.6fr 0.8fr auto;
    gap: 6px;
}

.cp-file-name[b-2jeypahxgo] {
    flex: 1;
    min-width: 0;
    text-align: left;
    border: none;
    background: none;
    color: var(--hub-text);
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .cp-file-name:hover[b-2jeypahxgo] {
        color: var(--hub-cyan);
    }

.cp-job[b-2jeypahxgo] {
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.cp-job-text[b-2jeypahxgo] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cp-job-status[b-2jeypahxgo] {
    font-family: var(--hub-font-mono);
    font-size: 10px;
    white-space: nowrap;
}

@media (max-width: 780px) {
    .cp-grid-4[b-2jeypahxgo] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-store-add[b-2jeypahxgo] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575.98px) {
    .cp-body[b-2jeypahxgo] { padding: 16px; }
    .cp-grid-2[b-2jeypahxgo], .cp-grid-4[b-2jeypahxgo], .cp-add-row[b-2jeypahxgo] { grid-template-columns: 1fr; }
}
/* /Shared/EmployeeDetailModal.razor.rz.scp.css */
/* DirectoryDetailModal: Panel { width: 400, maxWidth: "92vw", padding: 24 } */
.emp-head[b-5ji5aoyopi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.emp-photo[b-5ji5aoyopi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.emp-photo-btn[b-5ji5aoyopi] {
    padding: 6px 9px !important;
    font-size: 10px !important;
    gap: 5px !important;
    margin: 0;
}

    .emp-photo-btn .lu[b-5ji5aoyopi] {
        font-size: 12px;
    }

.emp-name[b-5ji5aoyopi] {
    font-family: var(--hub-font-sans);
    font-size: 17px;
    font-weight: 700;
    color: var(--hub-text);
    margin-top: 10px;
}

.emp-title[b-5ji5aoyopi] {
    font-family: var(--hub-font-mono);
    font-size: 11.5px;
    color: var(--hub-muted);
    margin-top: 2px;
}

.emp-badges[b-5ji5aoyopi] {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.emp-badge[b-5ji5aoyopi] {
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-magenta);
    border: 1px solid rgba(var(--hub-magenta-rgb), 0.33);
    padding: 2px 7px;
    border-radius: 5px;
}

    .emp-badge.muted[b-5ji5aoyopi] {
        color: var(--hub-muted);
        border-color: var(--hub-border);
    }

.emp-rows[b-5ji5aoyopi] {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.emp-row[b-5ji5aoyopi] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    background: var(--hub-panel2);
    border-radius: 7px;
    border: 1px solid var(--hub-border);
    text-decoration: none;
    font-family: var(--hub-font-sans);
    font-size: 12.5px;
    color: var(--hub-text);
    min-width: 0;
    overflow-wrap: anywhere;
}

    .emp-row > .lu[b-5ji5aoyopi] {
        font-size: 14px;
        color: var(--hub-cyan);
        flex-shrink: 0;
    }

a.emp-row:hover[b-5ji5aoyopi] {
    border-color: var(--hub-border-bright);
    color: var(--hub-text);
}

.emp-kind[b-5ji5aoyopi] {
    color: var(--hub-muted-dark);
    font-family: var(--hub-font-mono);
    font-size: 10px;
}
/* /Shared/Jobs/JobEditModal.razor.rz.scp.css */
/* Edit Job — the prototype's JobFormModal (edit mode). */

.je-types[b-98ddtu265r] {
    display: flex;
    gap: 8px;
    margin: 0 0 14px;
}

.je-type[b-98ddtu265r] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 7px;
    border: 1px solid var(--hub-border);
    color: var(--hub-muted);
    font-family: var(--hub-font-mono);
    font-size: 11.5px;
    font-weight: 700;
    opacity: 0.4;
}

    .je-type.on[b-98ddtu265r] {
        opacity: 1;
    }

    .je-type.on.print[b-98ddtu265r] {
        border-color: var(--hub-cyan);
        background: rgba(var(--hub-cyan-rgb), 0.12);
        color: var(--hub-cyan);
    }

    .je-type.on.digital[b-98ddtu265r] {
        border-color: var(--hub-magenta);
        background: rgba(var(--hub-magenta-rgb), 0.12);
        color: var(--hub-magenta);
    }

.je-number[b-98ddtu265r] {
    margin-bottom: 16px;
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-muted-dark);
}

.je-stack[b-98ddtu265r] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.je-grid[b-98ddtu265r] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.je-label[b-98ddtu265r] {
    display: block;
    margin-bottom: 3px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
}

.je-box[b-98ddtu265r] {
    padding: 14px;
    border: 1px solid var(--hub-border);
    border-radius: 10px;
}

.je-section[b-98ddtu265r] {
    margin-top: 6px;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hub-muted-dark);
}

.je-check[b-98ddtu265r] {
    display: flex;
    align-items: center;
    gap: 7px;
    align-self: end;
    padding: 8px 10px;
    border-radius: 7px;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel2);
    font-size: 12.5px;
    color: var(--hub-text);
    cursor: pointer;
}

.je-notes[b-98ddtu265r] {
    resize: vertical;
}

.je-people[b-98ddtu265r] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
    padding: 10px;
    border-radius: 7px;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel2);
}

.je-person[b-98ddtu265r] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 20px;
    border: 1px solid var(--hub-border);
    background: transparent;
    color: var(--hub-muted);
    font-size: 11.5px;
    cursor: pointer;
}

    .je-person.on[b-98ddtu265r] {
        border-color: var(--hub-cyan);
        background: rgba(var(--hub-cyan-rgb), 0.15);
        color: var(--hub-cyan);
    }

    .je-person .lu[b-98ddtu265r] {
        font-size: 10px;
    }

@media (max-width: 420px) {
    .je-grid[b-98ddtu265r] {
        grid-template-columns: 1fr;
    }
}
/* /Shared/Jobs/JobFilesPanel.razor.rz.scp.css */
.jf-chips[b-fwkdy5iyz6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.jf-chip[b-fwkdy5iyz6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 10px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 6px;
    font-family: var(--hub-font-mono);
    font-size: 11px;
}

.jf-name[b-fwkdy5iyz6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--hub-cyan);
    font: inherit;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

    .jf-name:hover[b-fwkdy5iyz6] {
        text-decoration: underline;
    }

    .jf-name .lu[b-fwkdy5iyz6] {
        font-size: 12px;
        flex-shrink: 0;
    }

.jf-size[b-fwkdy5iyz6] {
    color: var(--hub-muted-dark);
    white-space: nowrap;
}

.jf-delete[b-fwkdy5iyz6] {
    display: inline-flex;
    padding: 0;
    border: none;
    background: none;
    color: var(--hub-muted-dark);
    cursor: pointer;
}

    .jf-delete:hover[b-fwkdy5iyz6] {
        color: var(--hub-red);
    }

.jf-empty[b-fwkdy5iyz6] {
    margin-bottom: 12px;
}
/* /Shared/Jobs/JobInfoPanel.razor.rz.scp.css */
.ji-field[b-jobinfo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 8px 11px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 7px;
}

.ji-label[b-jobinfo] {
    flex-shrink: 0;
    font-family: var(--hub-font-mono);
    font-size: 10.5px;
    color: var(--hub-muted-dark);
}

.ji-value[b-jobinfo] {
    min-width: 0;
    font-size: 12.5px;
    color: var(--hub-text);
    text-align: right;
    overflow-wrap: anywhere;
}

    .ji-value.hub-muted-dark[b-jobinfo] {
        color: var(--hub-muted-dark);
    }

.ji-flag[b-jobinfo] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border: 1px solid var(--hub-border);
    border-radius: 5px;
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-muted-dark);
}

    .ji-flag.on[b-jobinfo] {
        border-color: var(--hub-cyan);
        color: var(--hub-cyan);
    }

    .ji-flag .lu[b-jobinfo] {
        font-size: 10px;
    }
/* /Shared/Jobs/JobProfitabilityPanel.razor.rz.scp.css */
.jp-grid[b-z6uehwbedl] {
    gap: 12px;
}

.jp-value[b-z6uehwbedl] {
    margin-top: 3px;
    font-family: var(--hub-font-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--hub-text);
}

    .jp-value.jp-strong[b-z6uehwbedl] {
        font-weight: 800;
    }

    .jp-value.hub-cyan[b-z6uehwbedl] { color: var(--hub-cyan); }
    .jp-value.hub-magenta[b-z6uehwbedl] { color: var(--hub-magenta); }

.jp-lines[b-z6uehwbedl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
}

.jp-line[b-z6uehwbedl] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-text);
}

.jp-cost[b-z6uehwbedl] {
    min-width: 80px;
    text-align: right;
}

.jp-foot[b-z6uehwbedl] {
    margin-top: 10px;
    font-family: var(--hub-font-mono);
    font-size: 9px;
    color: var(--hub-muted-dark);
}
/* /Shared/Jobs/JobTasksPanel.razor.rz.scp.css */
.jtk-elsewhere[b-ge8om1cz24] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: -4px 0 10px;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-magenta);
    text-decoration: none;
}

.jtk-list[b-ge8om1cz24] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jtk-row[b-ge8om1cz24] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jtk-toggle[b-ge8om1cz24] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

.jtk-check[b-ge8om1cz24] {
    font-size: 15px;
    color: var(--hub-muted-dark);
    flex-shrink: 0;
}

.jtk-toggle.done .jtk-check[b-ge8om1cz24] {
    color: var(--hub-text);
}

.jtk-name[b-ge8om1cz24] {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--hub-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jtk-toggle.done .jtk-name[b-ge8om1cz24] {
    color: var(--hub-muted);
    text-decoration: line-through;
}

.jtk-hours[b-ge8om1cz24] {
    flex-shrink: 0;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-cyan);
}

.jtk-owner[b-ge8om1cz24] {
    flex-shrink: 0;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
}

/* Play / running-timer button (BusyButton renders the <button>). */
.jtk[b-ge8om1cz24]  .jtk-timer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 3px 6px;
    border: 1px solid var(--hub-border);
    border-radius: 6px;
    background: none;
    color: var(--hub-cyan);
    font-family: var(--hub-font-mono);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
}

    .jtk[b-ge8om1cz24]  .jtk-timer > span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .jtk[b-ge8om1cz24]  .jtk-timer.running {
        padding: 3px 8px;
        border-color: var(--hub-magenta);
        background: rgba(var(--hub-magenta-rgb), 0.12);
        color: var(--hub-magenta);
    }

    .jtk[b-ge8om1cz24]  .jtk-timer:disabled {
        opacity: 0.6;
    }

.jtk-tools[b-ge8om1cz24] {
    display: inline-flex;
    gap: 3px;
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.jtk-row:hover .jtk-tools[b-ge8om1cz24],
.jtk-tools:focus-within[b-ge8om1cz24] {
    opacity: 1;
}

@media (hover: none) {
    .jtk-tools[b-ge8om1cz24] {
        opacity: 1;
    }
}

/* Editing a task: name, owner and the buttons on one line (wrapping on narrow
   screens), set off from the rows around it. */
.jtk-edit[b-ge8om1cz24] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    padding: 10px;
    border: 1px solid rgba(var(--hub-cyan-rgb), 0.35);
    border-radius: 8px;
    background: rgba(var(--hub-cyan-rgb), 0.05);
}

.jtk-edit-name[b-ge8om1cz24] {
    flex: 1 1 14rem;
    min-width: 10rem;
}

.jtk-edit-owner[b-ge8om1cz24] {
    flex: 0 0 auto;
    width: auto;
    min-width: 10rem;
}

.jtk-edit-actions[b-ge8om1cz24] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.jtk-add[b-ge8om1cz24] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

    .jtk-add > input[b-ge8om1cz24] {
        flex: 1;
        min-width: 0;
    }
/* /Shared/Jobs/JobTimeLog.razor.rz.scp.css */
.jt-list[b-95ro06a5rj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jt-row[b-95ro06a5rj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-radius: 7px;
}

.jt-date[b-95ro06a5rj] {
    min-width: 78px;
    flex-shrink: 0;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
}

.jt-what[b-95ro06a5rj] {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--hub-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jt-hours[b-95ro06a5rj] {
    flex-shrink: 0;
    font-family: var(--hub-font-mono);
    font-size: 11px;
    color: var(--hub-cyan);
}

.jt-total[b-95ro06a5rj] {
    display: flex;
    justify-content: space-between;
    padding: 4px 10px 0;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hub-muted);
}
/* /Shared/Jobs/JobWorkflowPanel.razor.rz.scp.css */
.jwf[b-jobworkflow] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.jwf-head[b-jobworkflow] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.jwf-name[b-jobworkflow] {
    font-size: 19px;
    font-weight: 700;
}

.jwf-sub[b-jobworkflow] {
    font-size: 12.5px;
    color: var(--hub-muted);
    margin-top: 2px;
}

.jwf-head-actions[b-jobworkflow],
.jwf-actions[b-jobworkflow] {
    display: flex;
    gap: 8px;
}

.jwf-progress[b-jobworkflow] {
    margin: 2px 0;
}

/* Frame v4/021: Phase | Accountable owner | Due date | Required deliverable. */
.jwf-table[b-jobworkflow] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jwf-row[b-jobworkflow] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.8fr 1.2fr 130px;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    border-radius: 7px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    border-left: 3px solid var(--hub-border);
    font-size: 12.5px;
}

    .jwf-row.current[b-jobworkflow] {
        border-left-color: var(--hub-cyan);
    }

    .jwf-row.done[b-jobworkflow] {
        opacity: 0.7;
    }

.jwf-cols[b-jobworkflow] {
    background: none;
    border-color: transparent;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 0;
    padding-bottom: 0;
}

.jwf-phase[b-jobworkflow] {
    font-weight: 600;
}

.jwf-state[b-jobworkflow] {
    text-align: right;
    font-family: var(--hub-font-mono);
    font-size: 11px;
}

@media (max-width: 780px) {
    .jwf-row[b-jobworkflow] {
        grid-template-columns: 1fr 1fr;
    }

    .jwf-cols[b-jobworkflow] {
        display: none;
    }
}
/* /Shared/Jobs/WorkflowEditor.razor.rz.scp.css */
.wfe[b-f81r2cow6q] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wfe-box[b-f81r2cow6q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--hub-border);
    background: var(--hub-panel2);
}

.wfe-field[b-f81r2cow6q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}

/* Numbered phase card with the cyan bar on the left (frame v4/018). */
.wfe-phase[b-f81r2cow6q] {
    padding: 12px 14px;
    border-left: 3px solid var(--hub-cyan);
    border-radius: 4px;
    background: var(--hub-panel);
}

.wfe-phase-title[b-f81r2cow6q] {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

.wfe-grid[b-f81r2cow6q] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    margin-bottom: 6px;
}

.wfe-check[b-f81r2cow6q] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-bottom: 6px;
    font-size: 12px;
    cursor: pointer;
}

@media (max-width: 575.98px) {
    .wfe-grid[b-f81r2cow6q] {
        grid-template-columns: 1fr;
    }
}
/* /Shared/MediaSelectModal.razor.rz.scp.css */
/* New Job picker — the prototype's MediaTileSelectModal. */

.ms-grid[b-fgwlrscn9w] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

/* Each tile carries its prototype colour (cyan / magenta alternating). */
.ms-cyan[b-fgwlrscn9w] {
    --ms-color: var(--hub-cyan);
    --ms-rgb: var(--hub-cyan-rgb);
}

.ms-magenta[b-fgwlrscn9w] {
    --ms-color: var(--hub-magenta);
    --ms-rgb: var(--hub-magenta-rgb);
}

.ms-tile[b-fgwlrscn9w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 14px;
    border-radius: 12px;
    border: 2px solid var(--hub-border);
    background: var(--hub-panel2);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .ms-tile:hover[b-fgwlrscn9w] {
        border-color: var(--hub-border-bright);
    }

    .ms-tile.selected[b-fgwlrscn9w] {
        border-color: var(--ms-color);
        background: rgba(var(--ms-rgb), 0.08);
    }

.ms-tile-icon[b-fgwlrscn9w] {
    font-size: 30px;
    color: var(--ms-color);
}

.ms-tile-name[b-fgwlrscn9w] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ms-color);
}

.ms-tile-blurb[b-fgwlrscn9w] {
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--hub-muted-dark);
}

.ms-tile-code[b-fgwlrscn9w] {
    margin-top: 2px;
    font-family: var(--hub-font-mono);
    font-size: 9px;
    color: var(--hub-muted-dark);
}

.ms-label[b-fgwlrscn9w] {
    display: block;
    margin-bottom: 3px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    color: var(--hub-muted-dark);
}

.ms-instructions[b-fgwlrscn9w] {
    margin-top: 20px;
}

    .ms-instructions textarea[b-fgwlrscn9w] {
        resize: vertical;
    }

.ms-create-row[b-fgwlrscn9w] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--hub-border);
}

.ms-field[b-fgwlrscn9w] {
    flex: 1;
    min-width: 160px;
}

    .ms-field > .form-control[b-fgwlrscn9w],
    .ms-field > .form-select[b-fgwlrscn9w] {
        width: 100%;
    }

.ms-foot-note[b-fgwlrscn9w] {
    flex: 1 1 16rem;
    margin-right: auto;
    font-size: 12px;
    color: var(--hub-muted);
}

    .ms-foot-note.hub-red[b-fgwlrscn9w] {
        color: var(--hub-red);
    }

.ms-hint[b-fgwlrscn9w] {
    margin-top: 10px;
    font-family: var(--hub-font-mono);
    font-size: 10px;
    color: var(--hub-muted-dark);
}

.ms-dates[b-fgwlrscn9w] {
    margin-top: 16px;
}

.ms-dates-text[b-fgwlrscn9w] {
    font-size: 12px;
    color: var(--hub-muted);
}

.ms-dates-grid[b-fgwlrscn9w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

@media (max-width: 1024px) {
    .ms-grid[b-fgwlrscn9w] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .ms-grid[b-fgwlrscn9w] {
        grid-template-columns: 1fr;
    }
}
/* /Shared/ThemeToggle.razor.rz.scp.css */
.theme-toggle[b-themetoggle] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--hub-border);
    background: transparent;
    color: var(--hub-muted);
}

    .theme-toggle:hover[b-themetoggle] {
        color: var(--hub-text);
        border-color: var(--hub-border-bright);
    }