/* /Components/Chat/ChatWidget.razor.rz.scp.css */
/*
 * ChatWidget � structural / layout styles only.
 * All colours are applied via inline Style= in the razor so they
 * are guaranteed to pierce MudBlazor's component rendering.
 *
 * The few colours that must live here - the ones on elements MudBlazor renders itself, or that
 * only a pseudo-element can reach - read var(--chat-*) custom properties instead of literals.
 * ChatWidget publishes those on #chat-widget-root from the same C# palette, so a colour is still
 * decided in one place and this file follows the light/dark theme with it. See ChatWidget.razor.cs.
 */

/* ?? Root container ???????????????????????????????????????????????? */
/*
 * WAS: bottom: 24px; right: 24px.
 *
 * Kenneth, 2026-08-15: "the chat icon in the lower right hand corner is interfering with the
 * navigational functionality of some of the grids by blocking the right, next and last buttons.
 * We already have the chat available from the menu in the upper right... I don't want to lose the
 * visibility of the chat window in the lower right. Maybe we can make it so that it is absolutely
 * in the far right bottom corner and is smaller."
 *
 * A 56px circle inset 24px from two edges sits exactly where MudTable puts its pager. Flush in the
 * corner it clears more of that row, and the FAB is a size smaller as well.
 */
#chat-widget-root[b-k6dvjkxqjq] {
    position: fixed;
    bottom: 0;
    right: 0;
 z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
}
#chat-widget-root > *[b-k6dvjkxqjq] { pointer-events: auto; }

/* The open panel keeps its breathing room; only the button goes into the corner. */
#chat-widget-root .chat-window[b-k6dvjkxqjq] { margin: 0 16px 16px 0; }

/* ?? FAB ??????????????????????????????????????????????????????????? */
.chat-fab[b-k6dvjkxqjq] {
    align-self: flex-end;
    flex-shrink: 0;
    transition: transform 0.15s, box-shadow 0.15s;
}
/*
 * Nestled into the corner rather than floating clear of it: three of the four corners stay round
 * and the one in the screen corner is square, so it reads as a circle tucked into the corner
 * rather than a button somebody positioned badly. That is the "only show 2/3 of it" from the
 * item, done without hanging any of it off the viewport -- a fixed element that overflows can
 * raise a scrollbar on the whole page.
 *
 * The inline Style on the MudFab carries border-radius:50% !important, and an inline !important
 * beats a stylesheet !important, so the shape is set there rather than here.
 */
.chat-fab:hover[b-k6dvjkxqjq] { transform: scale(1.07); }

/* ?? Pin active rotation ??????????????????????????????????????????? */
.chat-pin-active[b-k6dvjkxqjq] {
    transform: rotate(45deg) !important;
}

/* ?? Undocked drag cursor ?????????????????????????????????????????? */
.chat-undocked .chat-header[b-k6dvjkxqjq] { cursor: grab; }
.chat-undocked .chat-header:active[b-k6dvjkxqjq] { cursor: grabbing; }

/* ?? MudTextField input text colour (inline Style= handles the rest) */
.chat-textfield input[b-k6dvjkxqjq],
.chat-textfield textarea[b-k6dvjkxqjq] {
    color: var(--chat-text) !important;
    caret-color: var(--chat-text) !important;
}
.chat-textfield input[b-k6dvjkxqjq]::placeholder,
.chat-textfield textarea[b-k6dvjkxqjq]::placeholder {
    color: var(--chat-placeholder) !important;
}
/* Outlined border colours */
.chat-textfield .mud-input-outlined-border[b-k6dvjkxqjq] {
    border-color: var(--chat-field-border) !important;
    border-radius: 8px !important;
}
.chat-textfield:hover .mud-input-outlined-border[b-k6dvjkxqjq] {
    border-color: var(--chat-field-border-hover) !important;
}
.chat-textfield .mud-input.mud-focused .mud-input-outlined-border[b-k6dvjkxqjq] {
    border-color: var(--chat-accent) !important;
}

/* ?? Typing bounce animation ??????????????????????????????????????? */
.chat-typing[b-k6dvjkxqjq] {
    display: flex;
    align-items: center;
    gap: 4px;
}
.chat-typing span[b-k6dvjkxqjq] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--chat-dot);
    animation: chatBounce-b-k6dvjkxqjq 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2)[b-k6dvjkxqjq] { animation-delay: 0.2s; }
.chat-typing span:nth-child(3)[b-k6dvjkxqjq] { animation-delay: 0.4s; }

@keyframes chatBounce-b-k6dvjkxqjq {
    0%, 60%, 100% { transform: translateY(0); }
 30%            { transform: translateY(-6px); }
}

/* ?? Scrollbar ????????????????????????????????????????????????????? */
.chat-messages[b-k6dvjkxqjq]::-webkit-scrollbar { width: 5px; }
.chat-messages[b-k6dvjkxqjq]::-webkit-scrollbar-thumb {
    background: var(--chat-scroll);
    border-radius: 4px;
}
/* /Components/Chat/TypingDots.razor.rz.scp.css */
.typing-dots[b-zymgdzhryl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 14px;
    border-bottom-left-radius: 3px;
    background: rgba(127, 127, 127, 0.18);
    width: fit-content;
}

.typing-dots span[b-zymgdzhryl] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.3;
    animation: typing-pulse-b-zymgdzhryl 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(2)[b-zymgdzhryl] { animation-delay: 0.2s; }
.typing-dots span:nth-child(3)[b-zymgdzhryl] { animation-delay: 0.4s; }

@keyframes typing-pulse-b-zymgdzhryl {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-m0hkcredlh] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-m0hkcredlh] {
    flex: 1;
}

.sidebar[b-m0hkcredlh] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-m0hkcredlh] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-m0hkcredlh]  a, .top-row[b-m0hkcredlh]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-m0hkcredlh]  a:hover, .top-row[b-m0hkcredlh]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-m0hkcredlh]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-m0hkcredlh] {
        justify-content: space-between;
    }

    .top-row[b-m0hkcredlh]  a, .top-row[b-m0hkcredlh]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-m0hkcredlh] {
        flex-direction: row;
    }

    .sidebar[b-m0hkcredlh] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-m0hkcredlh] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-m0hkcredlh]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-m0hkcredlh], article[b-m0hkcredlh] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

.fsh-shadow[b-m0hkcredlh] {
    box-shadow: 0 30px 60px rgba(0,0,0,0.12) !important;
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-fdael4biov] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-fdael4biov] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-fdael4biov] {
    font-size: 1.1rem;
}

.bi[b-fdael4biov] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-fdael4biov] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-fdael4biov] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-fdael4biov] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-fdael4biov] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-fdael4biov] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-fdael4biov] {
        padding-bottom: 1rem;
    }

    .nav-item[b-fdael4biov]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-fdael4biov]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-fdael4biov]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-fdael4biov] {
        display: none;
    }

    .collapse[b-fdael4biov] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
    
    .nav-scrollable[b-fdael4biov] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Catalog/Buildings/DesignCanvas.razor.rz.scp.css */
/* Grid size here (24px) must match GridPx in DesignCanvas.razor.cs -- that constant is what
   turns a drag's pixel delta back into a Location.PositionX/Y/Width/Height grid unit. */

.design-canvas-scroll[b-lqbunakswa] {
    overflow: auto;
    max-height: 70vh;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.design-canvas[b-lqbunakswa] {
    position: relative;
    background-image:
        linear-gradient(to right, var(--mud-palette-lines-default) 1px, transparent 1px),
        linear-gradient(to bottom, var(--mud-palette-lines-default) 1px, transparent 1px);
    background-size: 24px 24px;
    background-color: var(--mud-palette-background-grey);
}

.design-run[b-lqbunakswa] {
    position: absolute;
    box-sizing: border-box;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-primary);
    border-radius: 4px;
    padding: 4px 6px;
    overflow: hidden;
    cursor: move;
    touch-action: none;
    box-shadow: var(--mud-elevation-1);
}

.design-run-out-of-service[b-lqbunakswa] {
    background-color: var(--mud-palette-background-grey);
    border: 1px dashed var(--mud-palette-lines-default);
    background-image: repeating-linear-gradient(
        45deg,
        var(--mud-palette-lines-default) 0,
        var(--mud-palette-lines-default) 1px,
        transparent 1px,
        transparent 8px
    );
    opacity: 0.75;
}

.design-run-out-of-service .design-run-name[b-lqbunakswa] {
    color: var(--mud-palette-text-disabled);
}

/* Work item #320. The colour comes from the kennel's settings via --run-condition-color. */
.design-run-condition[b-lqbunakswa] {
    border: 2px solid var(--run-condition-color);
}

/* A dirty run has to be unmistakable without reading anything: a large X across the box. */
.design-run-condition-mark[b-lqbunakswa] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: 2.5rem;
    transform: translate(-50%, -50%);
    opacity: 0.85;
    pointer-events: none;
}

.design-run-dragging[b-lqbunakswa] {
    opacity: 0.85;
    box-shadow: var(--mud-elevation-4);
    z-index: 10;
}

.design-run-resizing[b-lqbunakswa] {
    z-index: 10;
}

.design-run-header[b-lqbunakswa] {
    cursor: move;
}

.design-run-name[b-lqbunakswa] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.design-run-actions[b-lqbunakswa] {
    flex-shrink: 0;
}

.design-run-meta[b-lqbunakswa] {
    margin-top: 2px;
}

.design-resize-handle[b-lqbunakswa] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    touch-action: none;
    background: linear-gradient(135deg, transparent 50%, var(--mud-palette-primary) 50%);
}

/* Set-capacity mode: runs are click targets, not drag targets (kennelDesignCanvas.js skips the
   gesture while the canvas carries this class). */
.design-canvas-config .design-run[b-lqbunakswa],
.design-canvas-config .design-run-header[b-lqbunakswa] {
    cursor: pointer;
}

.design-canvas-config .design-resize-handle[b-lqbunakswa] {
    display: none;
}

.design-run-selected[b-lqbunakswa] {
    border: 2px solid var(--mud-palette-tertiary);
    box-shadow: var(--mud-elevation-4);
}

/* Multi-segment run (#289). The run is drawn as ONE svg path -- the union outline of its
   rectangles -- so there is no per-rectangle border to leave a seam. The box itself carries no
   border, fill or shadow and ignores the pointer; only the painted path and the text block take
   it, so the empty notch of an L or U does not grab clicks or drags. */
.design-run-shaped[b-lqbunakswa] {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    pointer-events: none;
}

.design-run-outline[b-lqbunakswa] {
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
    pointer-events: none;
}

.design-run-outline path[b-lqbunakswa] {
    fill: var(--mud-palette-surface);
    stroke: var(--mud-palette-primary);
    stroke-width: 1;
    stroke-linejoin: miter;
    pointer-events: visiblePainted;
    cursor: move;
}

.design-run-shaped.design-run-out-of-service .design-run-outline path[b-lqbunakswa] {
    fill: var(--mud-palette-background-grey);
    stroke: var(--mud-palette-lines-default);
    stroke-dasharray: 4 3;
}

.design-run-shaped.design-run-selected .design-run-outline path[b-lqbunakswa] {
    stroke: var(--mud-palette-tertiary);
    stroke-width: 2;
}

.design-canvas-config .design-run-outline path[b-lqbunakswa] {
    cursor: pointer;
}

.design-run-shaped .design-run-content[b-lqbunakswa] {
    position: absolute;
    box-sizing: border-box;
    padding: 4px 6px;
    overflow: hidden;
    pointer-events: auto;
}
/* /Pages/Catalog/Buildings/RunPickerDialog.razor.rz.scp.css */
/* Canvas classes duplicated from UsageCanvas.razor.css -- CSS isolation scopes them to their own
   file. Grid size (24px) must match GridPx in RunPickerDialog.razor.cs. */

.design-canvas-scroll[b-qcgx9yymg7] {
    overflow: auto;
    max-height: 65vh;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.design-canvas[b-qcgx9yymg7] {
    position: relative;
    background-image:
        linear-gradient(to right, var(--mud-palette-lines-default) 1px, transparent 1px),
        linear-gradient(to bottom, var(--mud-palette-lines-default) 1px, transparent 1px);
    background-size: 24px 24px;
    background-color: var(--mud-palette-background-grey);
}

.design-run[b-qcgx9yymg7] {
    position: absolute;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 4px 6px;
    overflow: hidden;
    box-shadow: var(--mud-elevation-1);
}

.design-run-name[b-qcgx9yymg7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-run-count[b-qcgx9yymg7] {
    flex: 0 0 auto;
    height: 18px;
    font-size: 0.65rem;
}

/* Can take the pet for the whole stay: green, and clickable. */
.picker-run-ok[b-qcgx9yymg7] {
    background-color: var(--mud-palette-success-lighten);
    border: 2px solid var(--mud-palette-success);
    cursor: pointer;
}

.picker-run-ok:hover[b-qcgx9yymg7],
.picker-run-ok:focus-visible[b-qcgx9yymg7] {
    border-width: 3px;
    box-shadow: var(--mud-elevation-6);
    outline: none;
}

/* Cannot: grey and quiet, not red -- here it is not a warning, just not a choice. */
.picker-run-no[b-qcgx9yymg7] {
    background-color: var(--mud-palette-surface);
    border: 1px dashed var(--mud-palette-lines-default);
    opacity: 0.5;
    cursor: not-allowed;
}

/* The run the booking has now. Same gold as the who's-here board's outline, so it reads as the
   same thing in both places. */
.picker-run-current[b-qcgx9yymg7] {
    outline: 4px solid #d4a017;
    outline-offset: 3px;
    box-shadow: 0 0 0 7px rgba(212, 160, 23, 0.35), var(--mud-elevation-4);
    opacity: 1;
    z-index: 2;
}
/* /Pages/Catalog/Buildings/UsageCanvas.razor.rz.scp.css */
/* Shares .design-canvas-scroll/.design-canvas/.design-run from DesignCanvas.razor.css --
   CSS isolation scopes those to their own file, so the layout classes are duplicated here
   rather than shared across components. Grid size (24px) must match GridPx in UsageCanvas.razor.cs. */

.design-canvas-scroll[b-9vlcg8jx0a] {
    overflow: auto;
    max-height: 70vh;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.design-canvas[b-9vlcg8jx0a] {
    position: relative;
    background-image:
        linear-gradient(to right, var(--mud-palette-lines-default) 1px, transparent 1px),
        linear-gradient(to bottom, var(--mud-palette-lines-default) 1px, transparent 1px);
    background-size: 24px 24px;
    background-color: var(--mud-palette-background-grey);
}

.design-run[b-9vlcg8jx0a] {
    position: absolute;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 4px 6px;
    overflow: hidden;
    box-shadow: var(--mud-elevation-1);
}

.design-run-name[b-9vlcg8jx0a] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Usage mode's own states -- an empty run reads as empty at a glance, not just a blank box. */

.usage-run-empty[b-9vlcg8jx0a] {
    background-color: var(--mud-palette-surface);
    border: 1px dashed var(--mud-palette-lines-default);
}

.usage-run-empty .usage-run-status[b-9vlcg8jx0a] {
    color: var(--mud-palette-text-disabled);
    font-style: italic;
}

.usage-run-occupied[b-9vlcg8jx0a] {
    background-color: var(--mud-palette-success-lighten);
    border: 1px solid var(--mud-palette-success);
}

/* At capacity: red, so it reads apart from a run that is occupied but still has room. */
.usage-run-full[b-9vlcg8jx0a] {
    background-color: var(--mud-palette-error-lighten);
    border: 2px solid var(--mud-palette-error);
}

.usage-run-count[b-9vlcg8jx0a] {
    flex: 0 0 auto;
    height: 18px;
    font-size: 0.65rem;
}

.usage-run-pets[b-9vlcg8jx0a] {
    margin-top: 2px;
}

/* Draggable pet card. Transform-only movement (set by kennelUsageCanvas.js) so the run
   underneath never reflows; the run itself has no drag handler in this mode. */

.usage-pet-card[b-9vlcg8jx0a] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    margin-bottom: 2px;
    border-radius: 4px;
    background-color: var(--mud-palette-surface);
    cursor: grab;
    touch-action: none;
    user-select: none;
    overflow: hidden;
}

.usage-pet-avatar[b-9vlcg8jx0a] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    font-size: 0.7rem;
}

/* Work item #321. Stay-kind icons sit side by side after the name; the icon shape carries the
   meaning and the colour only reinforces it. */
.usage-pet-kinds[b-9vlcg8jx0a] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.usage-pet-text[b-9vlcg8jx0a] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.1;
}

.usage-pet-name[b-9vlcg8jx0a],
.usage-pet-breed[b-9vlcg8jx0a] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usage-pet-name[b-9vlcg8jx0a] {
    font-size: 0.8rem;
    font-weight: 500;
}

.usage-pet-breed[b-9vlcg8jx0a] {
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
}

.usage-pet-card-dragging[b-9vlcg8jx0a] {
    position: relative;
    z-index: 10;
    cursor: grabbing;
    box-shadow: var(--mud-elevation-6);
}

/* While a card is held, let it draw outside the run it came from. */
.usage-canvas-dragging .design-run[b-9vlcg8jx0a] {
    overflow: visible;
}

/* Drag-start availability (#297). Painted over the run's own state for the length of one drag,
   so it wins over usage-run-full/-occupied. The run the pet already sits in is left alone. */
.usage-run.usage-drop-ok[b-9vlcg8jx0a] {
    background-color: var(--mud-palette-success-lighten);
    border: 3px solid var(--mud-palette-success);
}

.usage-run.usage-drop-no[b-9vlcg8jx0a] {
    background-color: var(--mud-palette-error-lighten);
    border: 3px solid var(--mud-palette-error);
    opacity: 0.85;
}

/* A run the Vacant/Occupied filter does not match. It stays in place, dotted and faded, because a
   kennel is read spatially -- "the run by the door" should go quiet, not disappear and take the
   shape of the building with it. Kept below the drop-target rules so a drag still shows clearly. */
.usage-run.usage-run-muted[b-9vlcg8jx0a] {
    opacity: 0.35;
    border-style: dashed;
    border-width: 2px;
    background-color: transparent;
    box-shadow: none;
}

.usage-run.usage-run-muted .usage-run-pets[b-9vlcg8jx0a],
.usage-run.usage-run-muted .usage-run-count[b-9vlcg8jx0a] {
    opacity: 0.8;
}

/* The run a reservation sent staff here to find. An outline, not a border, so it sits outside the
   run's own green/red/dashed state instead of replacing it -- staff still need to read whether the
   run is full. Last in the file and at full opacity so neither the filter nor a drag can hide it. */
.usage-run.usage-run-focus[b-9vlcg8jx0a] {
    outline: 4px solid #d4a017;
    outline-offset: 3px;
    box-shadow: 0 0 0 7px rgba(212, 160, 23, 0.35), var(--mud-elevation-4);
    opacity: 1;
    z-index: 2;
}

/* A move being saved (MoveAsync): both runs involved get a veil and a spinner, and the veil takes
   the pointer so a card in either run cannot be picked up again mid-save. */
.usage-run.usage-run-busy[b-9vlcg8jx0a] {
    overflow: hidden;
}

.usage-run-busy-overlay[b-9vlcg8jx0a] {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* The theme's own surface, so the veil is light on the light theme and dark on the dark one. */
    background-color: color-mix(in srgb, var(--mud-palette-surface) 70%, transparent);
    cursor: progress;
}

.usage-focus-alert[b-9vlcg8jx0a] {
    border-left: 4px solid #d4a017;
}

.usage-pet-move[b-9vlcg8jx0a] {
    flex: 0 0 auto;
    padding: 2px;
}
/* /Pages/Identity/Roles/RolePermissions.razor.rz.scp.css */
/* One table of resources whose rows scroll under a pinned header -- Kenneth, 2026-09-25. The page
   title, search, filters and Save sit above this box and never move: the box is sized to what is
   left of the window, so the page itself has nothing to scroll. */

.role-permissions-scroll[b-s2tudy2od7] {
    max-height: calc(100vh - 290px);
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background-color: var(--mud-palette-surface);
}

.role-permissions-table[b-s2tudy2od7] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.role-permissions-table th[b-s2tudy2od7] {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 10px 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.role-permissions-table td[b-s2tudy2od7] {
    padding: 0 8px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    height: 40px;
}

.role-permissions-table tbody tr:nth-of-type(odd)[b-s2tudy2od7] {
    background-color: var(--mud-palette-table-striped);
}

.role-permissions-table tbody tr:hover[b-s2tudy2od7] {
    background-color: var(--mud-palette-table-hover);
}

.rp-resource[b-s2tudy2od7] {
    text-align: left;
    width: 28%;
}

.rp-action[b-s2tudy2od7] {
    text-align: center;
}