/* /Components/Layout/AuthenticatedLayout.razor.rz.scp.css */
.layout[b-fuzg6mpe0h] {
    display: flex;
    /* Size to the real html/body height chain (both are height:100%) rather than 100vh. With the text-size
       `zoom` feature and scrollbars, 100vh doesn't equal the visible height, which left a thin
       differently-shaded strip at the bottom. 100% tracks the actual (zoomed) viewport exactly.
       .layout is rendered as a direct child of <body> (Blazor emits no wrapper element), so this resolves. */
    height: 100%;
    overflow: hidden;
}

/* Main content sits to the right of the sidebar, below the topbar.
   CSS custom properties are set by JS (applyTheme) so the sidebar width
   transition is handled via the sidebar element itself. */
.layout-main[b-fuzg6mpe0h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 52px;                      /* topbar height */
    padding-left: 220px;                    /* default expanded width */
    transition: padding-left .2s ease;
    min-width: 0;
    overflow-y: auto;
    position: relative;   /* anchor for absolutely-positioned page content; NO z-index, so page-level
                             modals (position:fixed) aren't trapped in a context below the sidebar */
    background: color-mix(in srgb, var(--bg) 50%, transparent);
}

#blazor-error-ui[b-fuzg6mpe0h] {
    background: rgba(192, 88, 74, 0.12);
    border-top: 1px solid rgba(192, 88, 74, 0.3);
    color: var(--danger);
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    letter-spacing: .04em;
}

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

/* Light mode: semi-transparent so the background image shows through */
[data-theme="light"] .layout-main[b-fuzg6mpe0h] {
    background: color-mix(in srgb, var(--bg) 60%, transparent);
}

/* ── Responsive layout ── */

/* Tablet: sidebar always collapsed (52px icon strip) */
@media (max-width: 991px) {
    .layout-main[b-fuzg6mpe0h] {
        padding-left: 52px;
    }
}

/* Mobile: the collapsed icon rail stays visible (the open menu overlays the page), so the page keeps
   the rail's 52px. app.js sets the same value inline once the menu has loaded. */
@media (max-width: 576px) {
    .layout-main[b-fuzg6mpe0h] {
        padding-left: 52px;
    }
}
/* /Components/Layout/GlobalSearchBox.razor.rz.scp.css */
/* Top-bar search. Sits in the top bar's stacking context (z-index 200), so its panel and backdrop use the same
   300 / 299 layers as the notifications panel, and the field is lifted above its own backdrop so it stays
   clickable while the results are open. */
.gs[b-1gye8ayk2r] {
    position: relative;
    display: flex;
    align-items: center;
}

.gs-field[b-1gye8ayk2r] {
    position: relative;
    z-index: 301;
    display: flex;
    align-items: center;
}

.gs-field-icon[b-1gye8ayk2r] {
    position: absolute;
    left: 10px;
    color: var(--muted);
    pointer-events: none;
}

.gs-input[b-1gye8ayk2r] {
    width: clamp(260px, 34vw, 460px);
    height: 32px;
    padding: 0 10px 0 30px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    outline: none;
    transition: border-color .15s;
}

    .gs-input:focus[b-1gye8ayk2r] { border-color: var(--accent); }

/* Phone: an icon in the top bar; the field only appears once it is tapped. */
.gs-icon-btn[b-1gye8ayk2r] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    cursor: pointer;
}

    .gs-icon-btn:hover[b-1gye8ayk2r] { color: var(--text); border-color: var(--border); }

.gs-backdrop[b-1gye8ayk2r] {
    position: fixed;
    inset: 0;
    z-index: 299;
}

/* Under the field and as wide as it, so the centred box opens straight down. */
.gs-panel[b-1gye8ayk2r] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 300;
    width: 100%;
    min-width: 320px;
    max-height: min(520px, calc(100dvh - 80px));
    overflow-y: auto;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
}

.gs-hint[b-1gye8ayk2r] {
    padding: 10px;
    font-size: 12px;
    color: var(--muted);
}

.gs-error[b-1gye8ayk2r] { color: var(--danger); }

.gs-section-head[b-1gye8ayk2r] {
    padding: 8px 10px 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

/* A result is a link (for the browser's new-tab gestures) laid out as a row: number, then title. */
.gs-item[b-1gye8ayk2r] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 5px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
}

    .gs-item:hover[b-1gye8ayk2r],
    .gs-item--active[b-1gye8ayk2r] { background: var(--surface2); color: var(--text); text-decoration: none; }

.gs-num[b-1gye8ayk2r] {
    flex-shrink: 0;
    font-family: 'Consolas', monospace;
    font-size: 12px;
    color: var(--accent);
}

.gs-title[b-1gye8ayk2r] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gs-mark[b-1gye8ayk2r] {
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    color: inherit;
    padding: 0;
    border-radius: 2px;
}

.gs-spinner[b-1gye8ayk2r] {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 6px;
    width: 13px;
    height: 13px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: gs-spin-b-1gye8ayk2r .6s linear infinite;
}

@keyframes gs-spin-b-1gye8ayk2r { to { transform: rotate(360deg); } }

/* Tablet: a narrower field, so the brand and the top bar's buttons still fit either side of it. */
@media (max-width: 991px) {
    .gs-input[b-1gye8ayk2r] { width: clamp(200px, 32vw, 300px); }
}

/* Phone: the icon replaces the field; tapped, the field spans the top bar and the results fill the width under it. */
@media (max-width: 767px) {
    .gs-icon-btn[b-1gye8ayk2r] { display: flex; }
    .gs-field[b-1gye8ayk2r] { display: none; }

    .gs--mobile-open .gs-field[b-1gye8ayk2r] {
        display: flex;
        position: fixed;
        top: 8px;
        left: 8px;
        right: 8px;
    }

    .gs--mobile-open .gs-input[b-1gye8ayk2r] { width: 100%; height: 36px; font-size: 14px; }

    .gs-panel[b-1gye8ayk2r] {
        position: fixed;
        top: 52px;
        left: 8px;
        right: 8px;
        width: auto;
        min-width: 0;
        max-height: calc(100dvh - 68px);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.layout[b-lge6cphz92] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.layout-main[b-lge6cphz92] {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

#blazor-error-ui[b-lge6cphz92] {
    background: rgba(192, 88, 74, 0.12);
    border-top: 1px solid rgba(192, 88, 74, 0.3);
    color: var(--danger);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    letter-spacing: .04em;
}

#blazor-error-ui .dismiss[b-lge6cphz92] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ── Top bar ── */
.topbar[b-jvex1ld4zv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: 52px;
    /* Three columns: brand, search, actions. The two outer ones share what is left equally, so the search in the
       middle is centred on the window whatever the brand and the buttons measure. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 12px;
    padding: 0 20px 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar-brand[b-jvex1ld4zv] {
    justify-self: start;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.sidebar-toggle[b-jvex1ld4zv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color .15s, border-color .15s;
    flex-shrink: 0;
    margin-right: 6px;
}

    .sidebar-toggle:hover[b-jvex1ld4zv] { color: var(--text); border-color: var(--border); }

/* Global back button — sits next to the sidebar toggle; matches its icon-button look. */
.topbar-back[b-jvex1ld4zv] {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;              /* .topbar-brand aligns to baseline; keep the icon centered */
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    transition: color .15s, border-color .15s;
    flex-shrink: 0;
}

    .topbar-back:hover[b-jvex1ld4zv] { color: var(--text); border-color: var(--border); }

.brand-name[b-jvex1ld4zv] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
}

.brand-tagline[b-jvex1ld4zv] {
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}

/* The search sits in the middle column of the top bar, centred on the window rather than between its neighbours. */
.topbar-search[b-jvex1ld4zv] {
    justify-self: center;
}

.topbar-actions[b-jvex1ld4zv] {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-btn[b-jvex1ld4zv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

    .action-btn:hover:not(:disabled)[b-jvex1ld4zv] { color: var(--text); border-color: var(--border); }
    .action-btn:disabled[b-jvex1ld4zv] { cursor: default; opacity: .4; }

/* Planned-update indicator — a text pill that opens a small notice dropdown (like the notifications one). */
.update-anchor[b-jvex1ld4zv] { position: relative; display: inline-flex; }

.update-btn[b-jvex1ld4zv] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 17px;
    color: var(--accent);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

    .update-btn:hover[b-jvex1ld4zv],
    .update-btn--open[b-jvex1ld4zv] {
        background: var(--accent);
        color: #000;
    }

/* In-progress state — red, to signal maintenance is happening right now. */
.update-btn--live[b-jvex1ld4zv] {
    border-color: var(--danger, #e05252);
    color: var(--danger, #e05252);
}

    .update-btn--live:hover[b-jvex1ld4zv],
    .update-btn--live.update-btn--open[b-jvex1ld4zv] {
        background: var(--danger, #e05252);
        color: #fff;
    }

.update-dot[b-jvex1ld4zv] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Notice dropdown (reuses .notif-panel for the shell) */
.update-panel[b-jvex1ld4zv] { width: min(320px, calc(100vw - 24px)); }

.update-when[b-jvex1ld4zv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px;
    border-bottom: 1px solid var(--border);
}

.update-when-label[b-jvex1ld4zv] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
}

.update-when-value[b-jvex1ld4zv] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.update-note[b-jvex1ld4zv] {
    margin: 0;
    padding: 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

/* ── User avatar / account menu ── */
.user-menu-anchor[b-jvex1ld4zv] {
    position: relative;
}

.user-avatar-btn[b-jvex1ld4zv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--surface2);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    flex-shrink: 0;
    transition: border-color .15s;
}

    .user-avatar-btn:hover[b-jvex1ld4zv] { border-color: var(--accent); }

.user-avatar-img[b-jvex1ld4zv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.user-avatar-initial[b-jvex1ld4zv] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1;
}

.user-menu-backdrop[b-jvex1ld4zv] {
    position: fixed;
    inset: 0;
    z-index: 299;
}

.user-menu-panel[b-jvex1ld4zv] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 300;
    width: 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
}

.user-menu-header[b-jvex1ld4zv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 14px;
}

.user-menu-avatar-lg[b-jvex1ld4zv] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

    .user-menu-avatar-lg .user-avatar-initial[b-jvex1ld4zv] { font-size: 20px; }

.user-menu-info[b-jvex1ld4zv] {
    min-width: 0;
    flex: 1;
}

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

.user-menu-email[b-jvex1ld4zv] {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.user-menu-jobtitle[b-jvex1ld4zv] {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
  opacity: .7;
}
.user-menu-dep[b-jvex1ld4zv] {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
  opacity: .7;
}


.user-menu-separator[b-jvex1ld4zv] {
  height: 1px;
  background: var(--border);
}

.user-menu-item[b-jvex1ld4zv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: color .12s, background .12s;
}

    .user-menu-item:hover[b-jvex1ld4zv] { color: var(--text); background: var(--surface2); }
    .user-menu-item.user-menu-signout:hover[b-jvex1ld4zv] { color: var(--danger); }

.user-menu-theme[b-jvex1ld4zv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
}

.user-menu-theme-label[b-jvex1ld4zv] {
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
}

.user-menu-theme-btns[b-jvex1ld4zv] {
    display: flex;
    gap: 4px;
}

    .user-menu-theme-btns .theme-btn[b-jvex1ld4zv] {
        flex: 1;
        padding: 6px 8px;
        font-size: 10px;
    }

/* ── Settings popup ── */
.settings-anchor[b-jvex1ld4zv] {
    position: relative;
}

.settings-backdrop[b-jvex1ld4zv] {
    position: fixed;
    inset: 0;
    z-index: 299;
}

.settings-panel[b-jvex1ld4zv] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 300;
    width: 240px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
}

.settings-panel-header[b-jvex1ld4zv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.settings-panel-title[b-jvex1ld4zv] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.settings-section[b-jvex1ld4zv] {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-section-label[b-jvex1ld4zv] {
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
}

.settings-theme-btns[b-jvex1ld4zv] {
    display: flex;
    gap: 4px;
}

    .settings-theme-btns .theme-btn[b-jvex1ld4zv] {
        flex: 1;
        padding: 6px 8px;
        font-size: 10px;
    }

.settings-panel-footer[b-jvex1ld4zv] {
    border-top: 1px solid var(--border);
    padding: 4px 0;
}

.settings-more-btn[b-jvex1ld4zv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color .12s, background .12s;
}

    .settings-more-btn:hover[b-jvex1ld4zv] {
        color: var(--accent);
        background: var(--surface2);
    }

/* ── Notification bell anchor + badge ── */
.notif-anchor[b-jvex1ld4zv] {
    position: relative;
}

.notif-btn[b-jvex1ld4zv] {
    position: relative;
}

.notif-badge[b-jvex1ld4zv] {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--danger, #e05252);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    pointer-events: none;
}

/* ── Notification backdrop (closes panel on outside click) ── */
.notif-backdrop[b-jvex1ld4zv] {
    position: fixed;
    inset: 0;
    z-index: 299;
}

/* ── Notification panel ── */
.notif-panel[b-jvex1ld4zv] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 300;
    /* Slightly wider than before (340px), but never wider than the viewport allows — it shrinks
       to fit rather than overflowing on narrow windows. Small screens use the fixed override below. */
    width: min(400px, calc(100vw - 24px));
    max-height: 480px;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.notif-panel-header[b-jvex1ld4zv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.notif-panel-title[b-jvex1ld4zv] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.notif-panel-actions[b-jvex1ld4zv] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notif-mark-all-btn[b-jvex1ld4zv] {
    background: transparent;
    border: none;
    font-size: 11px;
    color: var(--accent);
    cursor: pointer;
    padding: 2px 0;
    letter-spacing: .03em;
}

    .notif-mark-all-btn:hover[b-jvex1ld4zv] { text-decoration: underline; }

.notif-clear-all-btn[b-jvex1ld4zv] {
    background: transparent;
    border: none;
    font-size: 11px;
    color: var(--muted);
    cursor: pointer;
    padding: 2px 0;
    letter-spacing: .03em;
}

    .notif-clear-all-btn:hover[b-jvex1ld4zv] { color: var(--danger, #e05252); text-decoration: underline; }

.notif-panel-body[b-jvex1ld4zv] {
    overflow-y: auto;
    flex: 1;
    /* Show ~5 rows; the rest are reachable by scrolling. */
    max-height: 320px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.notif-empty[b-jvex1ld4zv] {
    padding: 32px 16px;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
}

/* ── Individual notification row ── */
.notif-item[b-jvex1ld4zv] {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s;
    color: inherit;
}

    .notif-item:last-child[b-jvex1ld4zv] { border-bottom: none; }
    .notif-item:hover[b-jvex1ld4zv] { background: var(--surface2); }

/* A notification with a destination is a link (for the browser's new-tab gestures); it reads as the row. */
a.notif-item[b-jvex1ld4zv],
a.notif-item:hover[b-jvex1ld4zv] { text-decoration: none; color: inherit; }

.notif-unread[b-jvex1ld4zv] {
    border-left: 3px solid var(--accent);
}

.notif-read[b-jvex1ld4zv] {
    border-left: 3px solid transparent;
    opacity: .7;
}

.notif-item-head[b-jvex1ld4zv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2px;
}

.notif-item-title[b-jvex1ld4zv] {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-item-body[b-jvex1ld4zv] {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-item-time[b-jvex1ld4zv] {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: .04em;
}

/* ── Notifications footer ── */
.notif-panel-footer[b-jvex1ld4zv] {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
}

.notif-show-all-btn[b-jvex1ld4zv] {
    display: block;
    width: 100%;
    padding: 11px 14px;
    background: transparent;
    border: none;
    color: var(--accent);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .12s;
}

    .notif-show-all-btn:hover[b-jvex1ld4zv] { background: var(--surface2); }

/* ── Sidebar ── */
.sidebar[b-jvex1ld4zv] {
    position: fixed;
    top: 52px;
    left: 0;
    bottom: 0;
    width: 220px;
    z-index: 100;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: width .2s ease;
    overflow: hidden;
}

  .sidebar.collapsed[b-jvex1ld4zv] {
    width: 52px;
/*    display: none;*/
  }

/* ── Scrollable nav area ── */
.sidebar-scroll[b-jvex1ld4zv] {
    flex: 1;
    min-height: 0;            /* allow the flex item to shrink below content so it can scroll */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 0 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

    /* Keep every nav item at its natural height. As a flex column the children would otherwise
       shrink (flex-shrink:1) to fit a short window — squashing sections and hiding the pages under
       them. Pinning them lets the nav area scroll instead, so all sections/pages stay reachable. */
    .sidebar-scroll > *[b-jvex1ld4zv] {
        flex-shrink: 0;
    }

/* ── Bottom action links ── */
.sidebar-footer[b-jvex1ld4zv] {
    flex-shrink: 0;
    padding: 6px 0;
    border-top: 1px solid var(--border);
}

/* ── Help link — highlighted with a blue border so it stands out ──
   (scoped under .sidebar-footer so it beats the later, equal-specificity
   `.sidebar-link { border-left: 2px solid transparent }` rule) */
.sidebar-footer .sidebar-link-help[b-jvex1ld4zv] {
    margin: 4px 12px 8px;
    padding: 9px 12px;
    border: 1.5px solid #3b82f6;
    border-radius: 8px;
    color: #3b82f6;
    background: color-mix(in srgb, #3b82f6 8%, transparent);
}

    .sidebar-footer .sidebar-link-help:hover[b-jvex1ld4zv] {
        color: #fff;
        background: #3b82f6;
        border-color: #3b82f6;
    }

    .sidebar-footer .sidebar-link-help:hover .sidebar-icon[b-jvex1ld4zv] {
        transform: scale(1.12);
    }

/* Collapsed sidebar: keep it a compact blue-outlined square */
.sidebar.collapsed .sidebar-footer .sidebar-link-help[b-jvex1ld4zv] {
    margin: 4px auto 8px;
    padding: 9px 0;
    width: 40px;
}

/* ── Version footer ── */
.sidebar-version[b-jvex1ld4zv] {
    flex-shrink: 0;
    padding: 10px 16px 14px;
    font-size: 10px;
    letter-spacing: .14em;
    color: var(--muted);
    white-space: nowrap;
    opacity: .6;
    overflow: hidden;
    transition: opacity .15s;
}

.sidebar.collapsed .sidebar-version[b-jvex1ld4zv] {
    opacity: 0;
    pointer-events: none;
}

/* ── Section label ── */
.sidebar-section-label[b-jvex1ld4zv] {
    font-size: 12px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 16px 16px 6px;
    white-space: nowrap;
    opacity: 1;
    transition: opacity .15s;
}

.sidebar.collapsed .sidebar-section-label[b-jvex1ld4zv] {
  opacity: 0;
  pointer-events: none;
/*  display: none;*/
}
/* ── Nav entrance animation ── */
@keyframes navSlideIn-b-jvex1ld4zv {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Shared tooltip mixin (used by both links and group headers when collapsed) ── */
.sidebar.collapsed .sidebar-link[b-jvex1ld4zv]::after,
.sidebar.collapsed .sidebar-group-header[b-jvex1ld4zv]::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

.sidebar.collapsed .sidebar-link:hover[b-jvex1ld4zv]::after,
.sidebar.collapsed .sidebar-group-header:hover[b-jvex1ld4zv]::after {
  opacity: 1;
}

/* ── Group header (collapsible section) ── */
.sidebar-group-header[b-jvex1ld4zv] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 16px;
  width: 100%;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: color .15s, background .15s;
  animation: navSlideIn-b-jvex1ld4zv .3s ease both;
  position: relative;
}

.sidebar-group-header:hover[b-jvex1ld4zv] { color: var(--text); background: var(--surface2); }

.sidebar-group-header.active[b-jvex1ld4zv] {
    color: var(--accent);
    border-left-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-weight: 600;
}

/* ── Chevron ── */
.sidebar-chevron[b-jvex1ld4zv] {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform .22s ease, opacity .15s;
  opacity: .6;
}

  .sidebar-chevron.expanded[b-jvex1ld4zv] {
    transform: rotate(180deg);
  }

.sidebar.collapsed .sidebar-chevron[b-jvex1ld4zv] {
  display: none;
}

/* ── Sub-item group ── */
.sidebar-sub-group[b-jvex1ld4zv] {
  overflow: hidden;
  max-height: 0;
  transition: max-height .25s ease;
  position: relative;
  margin-left: 36px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

  .sidebar-sub-group.expanded[b-jvex1ld4zv] {
    max-height: 600px;
  }

.sidebar.collapsed .sidebar-sub-group[b-jvex1ld4zv] {
  display: none;
}

/* ── Nav links ── */
.sidebar-link[b-jvex1ld4zv] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-left: 2px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
  animation: navSlideIn-b-jvex1ld4zv .3s ease both;
  position: relative;
}

  .sidebar-link:hover[b-jvex1ld4zv] {
    color: var(--text);
    background: var(--surface2);
  }

  .sidebar-link.active[b-jvex1ld4zv] {
    color: var(--accent);
    border-left-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-weight: 600;
  }

/* ── Sub-items ── */
.sidebar-sub-link[b-jvex1ld4zv] {
  padding: 7px 10px;
  font-size: 11px;
  border-left: none;
  animation: none;
}

  .sidebar-sub-link:hover[b-jvex1ld4zv] {
    color: var(--text);
    background: var(--surface2);
  }

  .sidebar-sub-link.active[b-jvex1ld4zv] {
    color: var(--accent);
    border-left: none;
    font-weight: 600;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }

/* ── Icon ── */
.sidebar-icon[b-jvex1ld4zv] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  transition: transform .15s ease;
}

.sidebar-link:hover .sidebar-icon[b-jvex1ld4zv],
.sidebar-group-header:hover .sidebar-icon[b-jvex1ld4zv] {
  transform: scale(1.18);
}

/* ── Collapsed state — centre icons ── */
.sidebar.collapsed .sidebar-link[b-jvex1ld4zv] {
  padding: 9px 0;
  justify-content: center;
}

.sidebar.collapsed .sidebar-group-header[b-jvex1ld4zv] {
  padding: 9px 0;
  justify-content: center;
}

.sidebar-link-label[b-jvex1ld4zv] {
  opacity: 1;
  transition: opacity .15s;
  overflow: hidden;
}

.sidebar.collapsed .sidebar-link-label[b-jvex1ld4zv],
.sidebar.collapsed .sidebar-group-header .sidebar-link-label[b-jvex1ld4zv] {
  opacity: 0;
  width: 0;
}


/* ── Theme buttons (used in user menu) ── */
.theme-btn[b-jvex1ld4zv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}

    .theme-btn:hover[b-jvex1ld4zv] { border-color: var(--accent); color: var(--accent); }
    .theme-btn.active[b-jvex1ld4zv] { border-color: var(--accent); color: var(--accent); background: rgba(240,165,0,.08); }

/* Divider between stacked settings sections (Theme / Text Size) */
.settings-section + .settings-section[b-jvex1ld4zv] {
    border-top: 1px solid var(--border);
}

/* "A" glyph for the Text Size buttons — fixed box so buttons keep equal height
   while the letter grows to signal the relative size. */
.fontsize-glyph[b-jvex1ld4zv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    line-height: 1;
    font-weight: 700;
}

    .fontsize-glyph--sm[b-jvex1ld4zv] { font-size: 9px; }
    .fontsize-glyph--md[b-jvex1ld4zv] { font-size: 12px; }
    .fontsize-glyph--lg[b-jvex1ld4zv] { font-size: 15px; }

/* Text Size buttons stack the glyph above the label so the wider labels
   ("Medium" / "Large") fit in the narrow popup instead of being clipped. */
.settings-theme-btns .theme-btn:has(.fontsize-glyph)[b-jvex1ld4zv] {
    flex-direction: column;
    gap: 3px;
    padding: 7px 4px;
    letter-spacing: .04em;
}

/* ── Flyout backdrop ── */
.nav-flyout-backdrop[b-jvex1ld4zv] {
    position: fixed;
    inset: 0;
    z-index: 149;
}

/* ── Flyout panel ── */
.nav-flyout[b-jvex1ld4zv] {
    position: fixed;
    left: 56px;
    z-index: 150;
    min-width: 180px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}

.nav-flyout-title[b-jvex1ld4zv] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 8px 14px 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.nav-flyout-item[b-jvex1ld4zv] {
    display: block;
    padding: 8px 14px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color .12s, background .12s;
    white-space: nowrap;
}

    .nav-flyout-item:hover[b-jvex1ld4zv] { color: var(--text); background: var(--surface2); }
    .nav-flyout-item.active[b-jvex1ld4zv] { color: var(--accent); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet (577–991 px): hide tagline to free topbar space ── */
@media (max-width: 991px) {
    .brand-tagline[b-jvex1ld4zv] { display: none; }
}

/* ── Below 768 px the search is an icon, which sits with the other buttons rather than alone in the middle ── */
@media (max-width: 767px) {
    .topbar-search[b-jvex1ld4zv] { justify-self: end; }
}

/* ── Mobile (≤576 px) ── */
@media (max-width: 576px) {
    .brand-tagline[b-jvex1ld4zv] { display: none; }

    /* Collapsed, the 52px icon rail stays on screen, as on a tablet — the page sits beside it (app.js
       keeps .layout-main 52px in), so the left edge is never an empty strip. Opened, the menu widens to
       220px OVER the page (above the backdrop) instead of pushing it off the right edge. */
    .sidebar[b-jvex1ld4zv] {
        z-index: 150;
        box-shadow: none;
    }

    .sidebar.collapsed[b-jvex1ld4zv] {
        width: 52px;
    }

    .sidebar:not(.collapsed)[b-jvex1ld4zv] {
        width: 220px;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .32);
    }

    /* Backdrop sits behind the open sidebar */
    .sidebar-mobile-backdrop[b-jvex1ld4zv] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 99; /* below sidebar z-index:150, above page content */
    }

    /* Larger tap targets for topbar icon buttons */
    .action-btn[b-jvex1ld4zv],
    .sidebar-toggle[b-jvex1ld4zv] {
        width: 40px;
        height: 40px;
    }

    /* Notification panel: span full viewport width */
    .notif-panel[b-jvex1ld4zv] {
        position: fixed;
        top: 52px;
        left: 8px;
        right: 8px;
        width: auto;
        max-height: calc(100dvh - 68px);
    }

    /* User menu + settings panels: same treatment */
    .user-menu-panel[b-jvex1ld4zv],
    .settings-panel[b-jvex1ld4zv] {
        position: fixed;
        top: 52px;
        left: 8px;
        right: 8px;
        width: auto;
    }

    /* Flyout is unused on mobile (sidebar is already full-width) */
    .nav-flyout[b-jvex1ld4zv] { display: none; }

    /* Restore sub-group visibility when sidebar is open on mobile */
    .sidebar:not(.collapsed) .sidebar-sub-group.expanded[b-jvex1ld4zv] {
        max-height: 600px;
    }

    /* Restore sidebar section labels when open on mobile */
    .sidebar:not(.collapsed) .sidebar-section-label[b-jvex1ld4zv] {
        opacity: 1;
        pointer-events: auto;
    }

    /* Restore link/header layout when open on mobile */
    .sidebar:not(.collapsed) .sidebar-link[b-jvex1ld4zv] {
        padding: 9px 16px;
        justify-content: flex-start;
    }

    .sidebar:not(.collapsed) .sidebar-group-header[b-jvex1ld4zv] {
        padding: 9px 14px 9px 16px;
        justify-content: flex-start;
    }

    .sidebar:not(.collapsed) .sidebar-link-label[b-jvex1ld4zv],
    .sidebar:not(.collapsed) .sidebar-group-header .sidebar-link-label[b-jvex1ld4zv] {
        opacity: 1;
        width: auto;
    }

    .sidebar:not(.collapsed) .sidebar-chevron[b-jvex1ld4zv] {
        display: flex;
    }
}

/* /Components/MentionTextArea.razor.rz.scp.css */
.mention-ta[b-ae5hwju7q0] {
    position: relative;
    /* Fill flex containers (e.g. the PDF reply box) as the bare input used to. */
    flex: 1;
    min-width: 0;
}

.mention-ta textarea[b-ae5hwju7q0],
.mention-ta input[b-ae5hwju7q0] {
    width: 100%;
}

/* Anchored to the textarea (unlike the Quill dropdown, which is fixed to the caret). */
.mention-ta-dropdown[b-ae5hwju7q0] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10000;
    min-width: 220px;
    max-width: 320px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
    margin-top: 4px;
}
/* /Components/OrgNode.razor.rz.scp.css */
/* OrgNode scoped styles — these apply inside each recursive node component */

/* The node box is clickable (selects the department) — show a pointer cursor.
   The .org-node rules in Organogram.razor.css are scoped to that component and
   don't reach this child element, so the cursor must be declared here. */
.org-node[b-fptn7utfhq] {
    cursor: pointer;
}

.org-node-wrap[b-fptn7utfhq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Vertical stem down from this node to the children bar */
.org-node-wrap[b-fptn7utfhq]  .org-children {
    position: relative;
    display: flex;
    gap: 24px;
    margin-top: 28px;
    padding-top: 28px;
}

/* The horizontal bar connecting children */
.org-node-wrap[b-fptn7utfhq]  .org-children::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--muted);
    opacity: .45;
}

/* Vertical line from this node box downward to the horizontal bar */
.org-node-wrap[b-fptn7utfhq]  .org-children::after {
    content: '';
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 28px;
    background: var(--muted);
    opacity: .45;
}

/* Vertical line from horizontal bar down to each child */
.org-node-wrap[b-fptn7utfhq]  .org-children > .org-node-wrap::before {
    content: '';
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 28px;
    background: var(--muted);
    opacity: .45;
}

/* ── Manager row(s) inside tree node ──────────────────────────────────────── */

/* Multiple managers sit next to each other and wrap onto a new line if needed. */
.org-node-mgrs[b-fptn7utfhq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 12px;
    margin-top: 4px;
}

.org-node-mgr[b-fptn7utfhq] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.org-node-avatar[b-fptn7utfhq] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    flex-shrink: 0;
    overflow: hidden;
}

    .org-node-avatar img[b-fptn7utfhq] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.org-node-mgr-name[b-fptn7utfhq] {
    font-size: 11px;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
/* /Components/Pages/Administration/CategoryStatusesEditor.razor.rz.scp.css */
/* DEV-SW-113 stage 3: the Statuses list in the category editor. */

.cst-panel[b-uyv15gdn8s] { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; min-width: 0; }

.cst-title[b-uyv15gdn8s] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text);
}

.cst-note[b-uyv15gdn8s] { margin: 0; max-width: 75ch; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cst-state[b-uyv15gdn8s] { display: flex; justify-content: center; padding: 16px 0; }
.cst-error[b-uyv15gdn8s] { color: var(--danger); font-size: 13px; }
.cst-hint[b-uyv15gdn8s] { font-size: 12px; color: var(--muted); }

.cst-pill[b-uyv15gdn8s] {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--muted);
}

.cst-pill.status-neutral[b-uyv15gdn8s] { border-color: var(--border);  color: var(--muted); }
.cst-pill.status-muted[b-uyv15gdn8s]   { border-color: var(--muted);   color: var(--muted); }
.cst-pill.status-accent[b-uyv15gdn8s]  { border-color: var(--accent);  color: var(--accent); }
.cst-pill.status-success[b-uyv15gdn8s] { border-color: var(--success); color: var(--success); }
.cst-pill.status-danger[b-uyv15gdn8s]  { border-color: var(--danger);  color: var(--danger); }
.cst-pill.status-info[b-uyv15gdn8s]    { border-color: var(--info);    color: var(--info); }
.cst-pill.status-warning[b-uyv15gdn8s] { border-color: var(--warning); color: var(--warning); }
.cst-pill.status-purple[b-uyv15gdn8s] { border-color: var(--purple); color: var(--purple); }
.cst-pill.status-pink[b-uyv15gdn8s] { border-color: var(--pink); color: var(--pink); }
.cst-pill.status-teal[b-uyv15gdn8s] { border-color: var(--teal); color: var(--teal); }
.cst-pill.status-orange[b-uyv15gdn8s] { border-color: var(--orange); color: var(--orange); }

.cst-col-order[b-uyv15gdn8s] { width: 1%; white-space: nowrap; }
.cst-order[b-uyv15gdn8s] { display: inline-flex; gap: 4px; }

.cst-arrow[b-uyv15gdn8s] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    cursor: pointer;
}

.cst-arrow:hover:not(:disabled)[b-uyv15gdn8s] { border-color: var(--accent); color: var(--accent); }
.cst-arrow:disabled[b-uyv15gdn8s] { opacity: .3; cursor: default; }

.cst-radio[b-uyv15gdn8s] { display: inline-flex; padding: 4px; cursor: pointer; }
.cst-radio input[b-uyv15gdn8s] { width: 16px; height: 16px; cursor: pointer; }

.cst-add[b-uyv15gdn8s] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cst-input[b-uyv15gdn8s] {
    padding: 7px 10px;
    background: var(--bg, var(--surface));
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    min-width: 0;
    max-width: 100%;
}

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

.cst-confirm[b-uyv15gdn8s] {
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cst-move[b-uyv15gdn8s] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
/* /Components/Pages/Administration/DepartmentEditor.razor.rz.scp.css */
.ds-shell[b-6ads37vmqt] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Header ── */
.ds-header[b-6ads37vmqt] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 36px 48px 24px;
    border-bottom: 1px solid var(--border);
    position: relative;
    gap: 20px;
}

.ds-eyebrow[b-6ads37vmqt] {
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.ds-title[b-6ads37vmqt] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

.ds-dept-selector[b-6ads37vmqt] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
    min-width: 200px;
}

.ds-selector-label[b-6ads37vmqt] {
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}

.ds-selector-select[b-6ads37vmqt] {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 8px 12px;
    outline: none;
    min-width: 200px;
    transition: border-color .15s;
}

    .ds-selector-select:focus[b-6ads37vmqt] { border-color: var(--accent); }

/* ── Tabs ── */
.ds-tabs[b-6ads37vmqt] {
    flex-shrink: 0;
    display: flex;
    background: var(--bg);
    gap: 0;
    padding: 0 48px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.ds-tab[b-6ads37vmqt] {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    margin-bottom: -1px;
}

    .ds-tab:hover[b-6ads37vmqt] { color: var(--text); }
    .ds-tab.ds-tab-active[b-6ads37vmqt] { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Body ── */
.ds-body[b-6ads37vmqt] {
    padding: 32px 48px 60px;
}

.ds-state[b-6ads37vmqt] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.error-text[b-6ads37vmqt] { color: var(--danger); font-size: 13px; }

/* ── Sections ── */
.ds-section[b-6ads37vmqt] {
    max-width: 900px;
    margin-bottom: 0;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 36px;
}

    .ds-section:last-child[b-6ads37vmqt] { border-bottom: none; margin-bottom: 0; }

.ds-section-header[b-6ads37vmqt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.ds-section-title[b-6ads37vmqt] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
}

.ds-section-header .ds-section-title[b-6ads37vmqt] { margin-bottom: 0; }

/* ── Info grid ── */
.ds-info-grid[b-6ads37vmqt] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.ds-info-footer[b-6ads37vmqt] {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ── Fields ── */
.field[b-6ads37vmqt] { display: flex; flex-direction: column; }

.field-label[b-6ads37vmqt] {
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.field-hint[b-6ads37vmqt] {
    font-size: 10px;
    color: var(--muted);
    margin-top: 5px;
    letter-spacing: .02em;
}

.field-input[b-6ads37vmqt] {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 10px 13px;
    outline: none;
    transition: border-color .15s;
    resize: none;
}

    .field-input:focus[b-6ads37vmqt]  { border-color: var(--accent); }

.field-textarea[b-6ads37vmqt] { resize: vertical; min-height: 64px; }

.field-select[b-6ads37vmqt] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.form-row-3[b-6ads37vmqt] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

/* ── Toggle ── */
.toggle-label[b-6ads37vmqt] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px 0;
}

.toggle-check[b-6ads37vmqt] { display: none; }

.toggle-track[b-6ads37vmqt] {
    width: 36px;
    height: 20px;
    background: var(--border);
    border-radius: 10px;
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
}

.toggle-check:checked ~ .toggle-track[b-6ads37vmqt] { background: var(--accent); }

.toggle-thumb[b-6ads37vmqt] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: left .2s;
}

/* This page moves the thumb with `left`; neutralise the global app.css rule that also adds
   `transform: translateX(16px)` on checked, otherwise the two combine and the thumb overshoots
   the track and covers the label text. */
.toggle-check:checked ~ .toggle-track .toggle-thumb[b-6ads37vmqt] { left: 19px; transform: none; }

.toggle-text[b-6ads37vmqt] { font-size: 13px; color: var(--text); }

/* SW-166: cross-department visibility toggles — switch beside a single-line label, stacked,
   with a gap separating them from the Key/Name row above. */
.cross-dept-toggles[b-6ads37vmqt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 18px;
}
.toggle-inline-text[b-6ads37vmqt] { white-space: nowrap; }

/* ── Buttons ── */
.btn-save[b-6ads37vmqt] {
    padding: 9px 22px;
    background: var(--accent);
    color: var(--bg);
    border: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-save:hover:not(:disabled)[b-6ads37vmqt] { background: var(--accent2); }
    .btn-save:disabled[b-6ads37vmqt] { opacity: .5; cursor: default; }

.btn-add[b-6ads37vmqt] {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    flex-shrink: 0;
}

    .btn-add:hover[b-6ads37vmqt], .btn-add.active[b-6ads37vmqt] { border-color: var(--accent); color: var(--accent); }

.btn-row-action[b-6ads37vmqt] {
    padding: 3px 10px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    transition: all .15s;
}

    .btn-row-action:hover[b-6ads37vmqt] { border-color: var(--danger); color: var(--danger); }

.btn-row-primary:hover[b-6ads37vmqt] { border-color: var(--accent) !important; color: var(--accent) !important; }

.save-ok[b-6ads37vmqt] {
    font-size: 12px;
    color: var(--success);
    letter-spacing: .06em;
}

/* ── Table ── */
.ds-table[b-6ads37vmqt] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ds-table th[b-6ads37vmqt] {
    padding: 8px 14px;
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.ds-table td[b-6ads37vmqt] { padding: 12px 14px; border-bottom: 1px solid var(--border); }

.ds-table tr:last-child td[b-6ads37vmqt] { border-bottom: none; }

.ds-row-inactive td[b-6ads37vmqt] { opacity: .45; }

.ds-row-active td[b-6ads37vmqt] { background: rgba(240,165,0,.04); }

.muted[b-6ads37vmqt] { color: var(--muted); font-size: 12px; }

.mono[b-6ads37vmqt] {
    font-family: 'Barlow Condensed', monospace;
    font-size: 13px;
    letter-spacing: .06em;
}

/* ── Status pills ── */
.status-pill[b-6ads37vmqt] {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pill-active[b-6ads37vmqt]   { color: var(--success); border: 1px solid var(--success); }
.pill-inactive[b-6ads37vmqt] { color: var(--muted);   border: 1px solid var(--border);  }

.key-badge[b-6ads37vmqt] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--accent);
    background: rgba(240,165,0,.08);
    border: 1px solid rgba(240,165,0,.2);
    padding: 2px 6px;
}

/* ── Collapsible form ── */
.ds-form-wrap[b-6ads37vmqt] {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s;
    opacity: 0;
}

    .ds-form-wrap.visible[b-6ads37vmqt] {
        max-height: 500px;
        opacity: 1;
        margin-bottom: 28px;
    }

.ds-form[b-6ads37vmqt] {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 24px;
}

.ds-form-title[b-6ads37vmqt] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 20px;
}

.ds-form-footer[b-6ads37vmqt] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.ds-empty-state[b-6ads37vmqt] {
    color: var(--muted);
    font-size: 13px;
}

/* ── Inline form ── */
.ds-inline-form[b-6ads37vmqt] {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 20px;
    margin-bottom: 20px;
}

.ds-inline-form-narrow[b-6ads37vmqt] { max-width: 340px; }

.inline-error[b-6ads37vmqt] {
    background: rgba(192,88,74,.08);
    border: 1px solid rgba(192,88,74,.25);
    color: var(--danger);
    padding: 8px 12px;
    font-size: 12px;
    margin-bottom: 14px;
}

/* ── Category pills ── */
.ds-subsection-label[b-6ads37vmqt] {
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

.ds-pills[b-6ads37vmqt] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cat-pill[b-6ads37vmqt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 11px;
    letter-spacing: .08em;
}

.cat-pill-dept[b-6ads37vmqt]   { border: 1px solid var(--accent); color: var(--accent); }
.cat-pill-global[b-6ads37vmqt] { border: 1px solid var(--border);  color: var(--muted);  }

.cat-pill-key[b-6ads37vmqt] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    opacity: .75;
}

.field-hint-inline[b-6ads37vmqt] {
    font-size: 9px;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 400;
    text-transform: none;
}

.ds-empty[b-6ads37vmqt] {
    font-size: 12px;
    color: var(--muted);
    padding: 12px 0;
}

/* ── Category field editor ── */
.ds-field-editor[b-6ads37vmqt] {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
}

.ds-field-sections[b-6ads37vmqt] {
    margin-bottom: 20px;
}

.ds-field-section[b-6ads37vmqt] {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

    .ds-field-section:last-child[b-6ads37vmqt] {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.ds-field-section-header[b-6ads37vmqt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ds-field-editor-footer[b-6ads37vmqt] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.ds-empty-sm[b-6ads37vmqt] {
    font-size: 12px;
    color: var(--muted);
    padding: 4px 0 8px;
}

.btn-add-sm[b-6ads37vmqt] {
    padding: 4px 10px;
    font-size: 9px;
}

/* ── Field list (read-only rows) ── */
.ds-field-list[b-6ads37vmqt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.ds-field-item[b-6ads37vmqt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
}

.ds-field-item-name[b-6ads37vmqt] {
    flex: 1;
    font-size: 13px;
    color: var(--text);
}

.ds-field-item-type[b-6ads37vmqt] {
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 2px 7px;
}

.ds-field-item-req[b-6ads37vmqt] {
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid rgba(240,165,0,.3);
    padding: 2px 6px;
}

.btn-remove[b-6ads37vmqt] {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1;
    transition: color .15s;
    flex-shrink: 0;
}

    .btn-remove:hover[b-6ads37vmqt] { color: var(--danger); }

/* ── Add field form ── */
.ds-field-add-form[b-6ads37vmqt] {
    margin-top: 8px;
    margin-bottom: 0;
}

.ds-field-add-row[b-6ads37vmqt] {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 16px;
    align-items: start;
}

.ds-field-required[b-6ads37vmqt] {
    min-width: 80px;
}

/* ── BU row actions ── */
/* On a DIV inside the cell, never on the <td> itself. display:flex takes a cell out of the
   table layout algorithm: it stops sizing with its column, and the border-bottom from the
   table's td rule draws across the collapsed box — a stray horizontal line in every row where
   the cell happens to be empty. */
.bu-row-actions[b-6ads37vmqt] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.bu-row-open td[b-6ads37vmqt] { background: rgba(240,165,0,.03); }

.btn-row-action.active[b-6ads37vmqt] { border-color: var(--accent); color: var(--accent); }

/* ── BU expandable panels ── */
.bu-panel-row td[b-6ads37vmqt] {
    padding: 0;
    border-bottom: 1px solid var(--border);
}

.bu-panel-loading[b-6ads37vmqt] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* ── BU sub-panel (sprints / categories) ── */
.bu-sub-panel[b-6ads37vmqt] {
    padding: 16px 20px 20px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.bu-sub-panel-header[b-6ads37vmqt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.bu-sub-panel-title[b-6ads37vmqt] {
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}

.bu-sub-form[b-6ads37vmqt] {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 16px;
    margin-bottom: 16px;
}

.bu-sub-form-footer[b-6ads37vmqt] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.bu-sub-table[b-6ads37vmqt] { margin-top: 4px; }

.bu-sub-empty[b-6ads37vmqt] {
    font-size: 12px;
    color: var(--muted);
    padding: 6px 0;
}

/* ── BU members panel ── */
.bu-members-loading[b-6ads37vmqt] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bu-members-panel[b-6ads37vmqt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.bu-members-section[b-6ads37vmqt] {
    padding: 16px 20px 20px;
}

    .bu-members-section:first-child[b-6ads37vmqt] {
        border-right: 1px solid var(--border);
    }

.bu-members-section-title[b-6ads37vmqt] {
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

.bu-members-empty[b-6ads37vmqt] {
    font-size: 12px;
    color: var(--muted);
    padding: 4px 0 8px;
}

.bu-chips[b-6ads37vmqt] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.bu-chip[b-6ads37vmqt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--text);
    background: var(--surface2, var(--bg));
}

.bu-chip-remove[b-6ads37vmqt] {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0 2px;
    font-size: 11px;
    line-height: 1;
    transition: color .15s;
}

    .bu-chip-remove:hover[b-6ads37vmqt] { color: var(--danger); }

.bu-chip-subtree[b-6ads37vmqt] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 3px;
    padding: 1px 4px;
    line-height: 1.4;
}

.bu-add-row[b-6ads37vmqt] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}

.bu-add-select[b-6ads37vmqt] {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    padding: 7px 28px 7px 10px;
}

.bu-add-btn[b-6ads37vmqt] {
    flex-shrink: 0;
    padding: 7px 16px;
    font-size: 11px;
}

.bu-add-subtree-toggle[b-6ads37vmqt] {
    flex-shrink: 0;
    padding: 0;
    font-size: 11px;
    white-space: nowrap;
}

/* ── Category field editor ── */
.cat-fields-section[b-6ads37vmqt] {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px;
}

.cat-fields-title[b-6ads37vmqt] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
}

.cat-fields-hint[b-6ads37vmqt] {
    font-weight: 400;
    color: var(--muted);
    margin-left: 6px;
}

.cat-field-row[b-6ads37vmqt] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.cat-field-name[b-6ads37vmqt]  { flex: 1; min-width: 120px; font-size: 12px; }
.cat-field-type[b-6ads37vmqt]  { width: 110px; font-size: 12px; flex-shrink: 0; }
.cat-field-options[b-6ads37vmqt] { flex: 1; min-width: 140px; font-size: 12px; }

.cat-field-required[b-6ads37vmqt] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    cursor: pointer;
}

.cat-field-remove[b-6ads37vmqt] {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    flex-shrink: 0;
}

    .cat-field-remove:hover[b-6ads37vmqt] { color: var(--danger); }

.cat-field-add[b-6ads37vmqt] {
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 4px;
    color: var(--muted);
    cursor: pointer;
    font-size: 11px;
    padding: 4px 10px;
    margin-top: 4px;
}

    .cat-field-add:hover[b-6ads37vmqt] { border-color: var(--accent); color: var(--accent); }

.field-section-label[b-6ads37vmqt] {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 10px;
}

/* ── Spinner ── */
.spinner[b-6ads37vmqt] {
    width: 13px;
    height: 13px;
    border: 1.5px solid rgba(13,17,23,.3);
    border-top-color: var(--bg);
    border-radius: 50%;
    animation: spin-b-6ads37vmqt .6s linear infinite;
}

.spinner-lg[b-6ads37vmqt] {
    width: 22px;
    height: 22px;
    border-width: 2px;
    border-color: var(--border);
    border-top-color: var(--accent);
}

@keyframes spin-b-6ads37vmqt { to { transform: rotate(360deg); } }
/* /Components/Pages/Administration/DepartmentSettings.razor.rz.scp.css */
.ds-shell[b-pl02hr9xr3] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Header ── */
.ds-header[b-pl02hr9xr3] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 24px 24px 18px;
    border-bottom: 1px solid var(--border);
    position: relative;
    gap: 20px;
}

.ds-title[b-pl02hr9xr3] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

.ds-dept-selector[b-pl02hr9xr3] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
    min-width: 200px;
}

.ds-selector-label[b-pl02hr9xr3] {
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}

.ds-selector-select[b-pl02hr9xr3] {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 8px 12px;
    outline: none;
    min-width: 200px;
    transition: border-color .15s;
}

    .ds-selector-select:focus[b-pl02hr9xr3] { border-color: var(--accent); }

/* ── Body ── */
.ds-body[b-pl02hr9xr3] {
    padding: 24px 24px 60px;
}

.ds-state[b-pl02hr9xr3] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.error-text[b-pl02hr9xr3] { color: var(--danger); font-size: 13px; }

/* ── Sections ── */
.ds-section[b-pl02hr9xr3] {
    max-width: 900px;
    margin-bottom: 0;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 36px;
}

    .ds-section:last-child[b-pl02hr9xr3] { border-bottom: none; margin-bottom: 0; }

.ds-section-header[b-pl02hr9xr3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.ds-section-title[b-pl02hr9xr3] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
}

.ds-section-header .ds-section-title[b-pl02hr9xr3] { margin-bottom: 0; }

/* ── Info grid ── */
.ds-info-grid[b-pl02hr9xr3] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.ds-info-footer[b-pl02hr9xr3] {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ── Fields ── */
.field[b-pl02hr9xr3] { display: flex; flex-direction: column; }

.field-label[b-pl02hr9xr3] {
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.field-hint[b-pl02hr9xr3] {
    font-size: 10px;
    color: var(--muted);
    margin-top: 5px;
    letter-spacing: .02em;
}

.field-input[b-pl02hr9xr3] {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 10px 13px;
    outline: none;
    transition: border-color .15s;
    resize: none;
}

    .field-input:focus[b-pl02hr9xr3]  { border-color: var(--accent); }

.field-textarea[b-pl02hr9xr3] { resize: vertical; min-height: 64px; }

.field-select[b-pl02hr9xr3] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.form-row-3[b-pl02hr9xr3] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

/* ── Toggle ── */
.toggle-label[b-pl02hr9xr3] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px 0;
}

.toggle-check[b-pl02hr9xr3] { display: none; }

.toggle-track[b-pl02hr9xr3] {
    width: 36px;
    height: 20px;
    background: var(--border);
    border-radius: 10px;
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
}

.toggle-check:checked ~ .toggle-track[b-pl02hr9xr3] { background: var(--accent); }

.toggle-thumb[b-pl02hr9xr3] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: left .2s;
}

/* This page moves the thumb with `left`; neutralise the global app.css rule that also adds
   `transform: translateX(16px)` on checked, otherwise the two combine and the thumb overshoots
   the track and covers the label text. */
.toggle-check:checked ~ .toggle-track .toggle-thumb[b-pl02hr9xr3] { left: 19px; transform: none; }

.toggle-text[b-pl02hr9xr3] { font-size: 13px; color: var(--text); }

/* ── Buttons ── */
.btn-save[b-pl02hr9xr3] {
    padding: 9px 22px;
    background: var(--accent);
    color: var(--bg);
    border: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-save:hover:not(:disabled)[b-pl02hr9xr3] { background: var(--accent2); }
    .btn-save:disabled[b-pl02hr9xr3] { opacity: .5; cursor: default; }

.btn-add[b-pl02hr9xr3] {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    flex-shrink: 0;
}

    .btn-add:hover[b-pl02hr9xr3], .btn-add.active[b-pl02hr9xr3] { border-color: var(--accent); color: var(--accent); }

.btn-row-action[b-pl02hr9xr3] {
    padding: 3px 10px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    transition: all .15s;
}

    .btn-row-action:hover[b-pl02hr9xr3] { border-color: var(--danger); color: var(--danger); }

.btn-row-primary:hover[b-pl02hr9xr3] { border-color: var(--accent) !important; color: var(--accent) !important; }

.save-ok[b-pl02hr9xr3] {
    font-size: 12px;
    color: var(--success);
    letter-spacing: .06em;
}

/* ── Table ── */
.ds-table[b-pl02hr9xr3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ds-table th[b-pl02hr9xr3] {
    padding: 8px 14px;
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.ds-table td[b-pl02hr9xr3] { padding: 12px 14px; border-bottom: 1px solid var(--border); }

.ds-table tr:last-child td[b-pl02hr9xr3] { border-bottom: none; }

.ds-row-inactive td[b-pl02hr9xr3] { opacity: .45; }

.ds-row-active td[b-pl02hr9xr3] { background: rgba(240,165,0,.04); }

.muted[b-pl02hr9xr3] { color: var(--muted); font-size: 12px; }

.mono[b-pl02hr9xr3] {
    font-family: 'Barlow Condensed', monospace;
    font-size: 13px;
    letter-spacing: .06em;
}

/* ── Status pills ── */
.status-pill[b-pl02hr9xr3] {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 999px;
}

.pill-active[b-pl02hr9xr3]   { color: var(--success); border: 1px solid var(--success); }
.pill-inactive[b-pl02hr9xr3] { color: var(--muted);   border: 1px solid var(--border);  }

.key-badge[b-pl02hr9xr3] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--accent);
    background: rgba(240,165,0,.08);
    border: 1px solid rgba(240,165,0,.2);
    padding: 2px 6px;
}

/* ── Collapsible form ── */
.ds-form-wrap[b-pl02hr9xr3] {
    flex-shrink: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s;
    opacity: 0;
    padding: 0 48px;
}

    .ds-form-wrap.visible[b-pl02hr9xr3] {
        max-height: 500px;
        opacity: 1;
        margin-top: 24px;
    }

.ds-form[b-pl02hr9xr3] {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 24px;
}

.ds-form-title[b-pl02hr9xr3] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 20px;
}

.ds-form-footer[b-pl02hr9xr3] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.ds-empty-state[b-pl02hr9xr3] {
    color: var(--muted);
    font-size: 13px;
}

/* ── Inline form ── */
.ds-inline-form[b-pl02hr9xr3] {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 20px;
    margin-bottom: 20px;
}

.ds-inline-form-narrow[b-pl02hr9xr3] { max-width: 340px; }

.inline-error[b-pl02hr9xr3] {
    background: rgba(192,88,74,.08);
    border: 1px solid rgba(192,88,74,.25);
    color: var(--danger);
    padding: 8px 12px;
    font-size: 12px;
    margin-bottom: 14px;
}

/* ── Category pills ── */
.ds-subsection-label[b-pl02hr9xr3] {
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

.ds-pills[b-pl02hr9xr3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cat-pill[b-pl02hr9xr3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 11px;
    letter-spacing: .08em;
}

.cat-pill-dept[b-pl02hr9xr3]   { border: 1px solid var(--accent); color: var(--accent); }
.cat-pill-global[b-pl02hr9xr3] { border: 1px solid var(--border);  color: var(--muted);  }

.cat-pill-key[b-pl02hr9xr3] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    opacity: .75;
}

.field-hint-inline[b-pl02hr9xr3] {
    font-size: 9px;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 400;
    text-transform: none;
}

.ds-empty[b-pl02hr9xr3] {
    font-size: 12px;
    color: var(--muted);
    padding: 12px 0;
}

/* ── Category field editor ── */
.ds-field-editor[b-pl02hr9xr3] {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
}

.ds-field-sections[b-pl02hr9xr3] {
    margin-bottom: 20px;
}

.ds-field-section[b-pl02hr9xr3] {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

    .ds-field-section:last-child[b-pl02hr9xr3] {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.ds-field-section-header[b-pl02hr9xr3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ds-field-editor-footer[b-pl02hr9xr3] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.ds-empty-sm[b-pl02hr9xr3] {
    font-size: 12px;
    color: var(--muted);
    padding: 4px 0 8px;
}

.btn-add-sm[b-pl02hr9xr3] {
    padding: 4px 10px;
    font-size: 9px;
}

/* ── Field list (read-only rows) ── */
.ds-field-list[b-pl02hr9xr3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.ds-field-item[b-pl02hr9xr3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
}

.ds-field-item-name[b-pl02hr9xr3] {
    flex: 1;
    font-size: 13px;
    color: var(--text);
}

.ds-field-item-type[b-pl02hr9xr3] {
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 2px 7px;
}

.ds-field-item-req[b-pl02hr9xr3] {
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid rgba(240,165,0,.3);
    padding: 2px 6px;
}

.btn-remove[b-pl02hr9xr3] {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1;
    transition: color .15s;
    flex-shrink: 0;
}

    .btn-remove:hover[b-pl02hr9xr3] { color: var(--danger); }

/* ── Add field form ── */
.ds-field-add-form[b-pl02hr9xr3] {
    margin-top: 8px;
    margin-bottom: 0;
}

.ds-field-add-row[b-pl02hr9xr3] {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 16px;
    align-items: start;
}

.ds-field-required[b-pl02hr9xr3] {
    min-width: 80px;
}

/* ── BU row actions ── */
/* On a DIV inside the cell, never on the <td> itself. display:flex takes a cell out of the
   table layout algorithm: it stops sizing with its column, and the border-bottom from the
   table's td rule draws across the collapsed box — a stray horizontal line in every row where
   the cell happens to be empty. */
.bu-row-actions[b-pl02hr9xr3] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.bu-row-open td[b-pl02hr9xr3] { background: rgba(240,165,0,.03); }

.btn-row-action.active[b-pl02hr9xr3] { border-color: var(--accent); color: var(--accent); }

/* ── BU expandable panels ── */
.bu-panel-row td[b-pl02hr9xr3] {
    padding: 0;
    border-bottom: 1px solid var(--border);
}

.bu-panel-loading[b-pl02hr9xr3] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* ── BU sub-panel (sprints / categories) ── */
.bu-sub-panel[b-pl02hr9xr3] {
    padding: 16px 20px 20px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.bu-sub-panel-header[b-pl02hr9xr3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.bu-sub-panel-title[b-pl02hr9xr3] {
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}

.bu-sub-form[b-pl02hr9xr3] {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 16px;
    margin-bottom: 16px;
}

.bu-sub-form-footer[b-pl02hr9xr3] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.bu-sub-table[b-pl02hr9xr3] { margin-top: 4px; }

.bu-sub-empty[b-pl02hr9xr3] {
    font-size: 12px;
    color: var(--muted);
    padding: 6px 0;
}

/* ── BU members panel ── */
.bu-members-loading[b-pl02hr9xr3] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bu-members-panel[b-pl02hr9xr3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.bu-members-section[b-pl02hr9xr3] {
    padding: 16px 20px 20px;
}

    .bu-members-section:first-child[b-pl02hr9xr3] {
        border-right: 1px solid var(--border);
    }

.bu-members-section-title[b-pl02hr9xr3] {
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

.bu-members-empty[b-pl02hr9xr3] {
    font-size: 12px;
    color: var(--muted);
    padding: 4px 0 8px;
}

.bu-chips[b-pl02hr9xr3] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.bu-chip[b-pl02hr9xr3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--text);
    background: var(--surface2, var(--bg));
}

.bu-chip-remove[b-pl02hr9xr3] {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0 2px;
    font-size: 11px;
    line-height: 1;
    transition: color .15s;
}

    .bu-chip-remove:hover[b-pl02hr9xr3] { color: var(--danger); }

.bu-chip-subtree[b-pl02hr9xr3] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 3px;
    padding: 1px 4px;
    line-height: 1.4;
}

.bu-add-row[b-pl02hr9xr3] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}

.bu-add-select[b-pl02hr9xr3] {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    padding: 7px 28px 7px 10px;
}

.bu-add-btn[b-pl02hr9xr3] {
    flex-shrink: 0;
    padding: 7px 16px;
    font-size: 11px;
}

.bu-add-subtree-toggle[b-pl02hr9xr3] {
    flex-shrink: 0;
    padding: 0;
    font-size: 11px;
    white-space: nowrap;
}

/* ── Category field editor ── */
.cat-fields-section[b-pl02hr9xr3] {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px;
}

.cat-fields-title[b-pl02hr9xr3] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
}

.cat-fields-hint[b-pl02hr9xr3] {
    font-weight: 400;
    color: var(--muted);
    margin-left: 6px;
}

.cat-field-row[b-pl02hr9xr3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.cat-field-name[b-pl02hr9xr3]  { flex: 1; min-width: 120px; font-size: 12px; }
.cat-field-type[b-pl02hr9xr3]  { width: 110px; font-size: 12px; flex-shrink: 0; }
.cat-field-options[b-pl02hr9xr3] { flex: 1; min-width: 140px; font-size: 12px; }

.cat-field-required[b-pl02hr9xr3] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    cursor: pointer;
}

.cat-field-remove[b-pl02hr9xr3] {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    flex-shrink: 0;
}

    .cat-field-remove:hover[b-pl02hr9xr3] { color: var(--danger); }

.cat-field-add[b-pl02hr9xr3] {
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 4px;
    color: var(--muted);
    cursor: pointer;
    font-size: 11px;
    padding: 4px 10px;
    margin-top: 4px;
}

    .cat-field-add:hover[b-pl02hr9xr3] { border-color: var(--accent); color: var(--accent); }

.field-section-label[b-pl02hr9xr3] {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 10px;
}

/* ── Spinner ── */
.spinner[b-pl02hr9xr3] {
    width: 13px;
    height: 13px;
    border: 1.5px solid rgba(13,17,23,.3);
    border-top-color: var(--bg);
    border-radius: 50%;
    animation: spin-b-pl02hr9xr3 .6s linear infinite;
}

.spinner-lg[b-pl02hr9xr3] {
    width: 22px;
    height: 22px;
    border-width: 2px;
    border-color: var(--border);
    border-top-color: var(--accent);
}

@keyframes spin-b-pl02hr9xr3 { to { transform: rotate(360deg); } }

/* DEV-SW-113: team history under the team edit form. */
.ds-team-history[b-pl02hr9xr3] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
/* /Components/Pages/Administration/DepartmentStatusesPanel.razor.rz.scp.css */
/* DEV-SW-113 stage 3: Department Editor → Statuses. Tables use the global .rec-table; only what is
   unique to this panel lives here. */

.dst-panel[b-hg4f97jpn3] { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.dst-header[b-hg4f97jpn3] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.dst-title[b-hg4f97jpn3] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text);
}

.dst-note[b-hg4f97jpn3] { margin: 0; max-width: 75ch; font-size: 13px; line-height: 1.5; color: var(--muted); }

.dst-state[b-hg4f97jpn3] { display: flex; justify-content: center; padding: 20px 0; }
.dst-error[b-hg4f97jpn3] { color: var(--danger); font-size: 13px; }

.dst-pill[b-hg4f97jpn3] {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--muted);
}

.dst-pill.status-neutral[b-hg4f97jpn3] { border-color: var(--border);  color: var(--muted); }
.dst-pill.status-muted[b-hg4f97jpn3]   { border-color: var(--muted);   color: var(--muted); }
.dst-pill.status-accent[b-hg4f97jpn3]  { border-color: var(--accent);  color: var(--accent); }
.dst-pill.status-success[b-hg4f97jpn3] { border-color: var(--success); color: var(--success); }
.dst-pill.status-danger[b-hg4f97jpn3]  { border-color: var(--danger);  color: var(--danger); }
.dst-pill.status-info[b-hg4f97jpn3]    { border-color: var(--info);    color: var(--info); }
.dst-pill.status-warning[b-hg4f97jpn3] { border-color: var(--warning); color: var(--warning); }
.dst-pill.status-purple[b-hg4f97jpn3] { border-color: var(--purple); color: var(--purple); }
.dst-pill.status-pink[b-hg4f97jpn3] { border-color: var(--pink); color: var(--pink); }
.dst-pill.status-teal[b-hg4f97jpn3] { border-color: var(--teal); color: var(--teal); }
.dst-pill.status-orange[b-hg4f97jpn3] { border-color: var(--orange); color: var(--orange); }

.dst-pills[b-hg4f97jpn3] { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dst-off[b-hg4f97jpn3] { display: inline-flex; align-items: center; gap: 6px; opacity: .75; }

.dst-subhead[b-hg4f97jpn3] {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.dst-col-order[b-hg4f97jpn3] { width: 1%; white-space: nowrap; }
.dst-order[b-hg4f97jpn3] { display: inline-flex; gap: 4px; }

.dst-arrow[b-hg4f97jpn3] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    cursor: pointer;
}

.dst-arrow:hover:not(:disabled)[b-hg4f97jpn3] { border-color: var(--accent); color: var(--accent); }
.dst-arrow:disabled[b-hg4f97jpn3] { opacity: .3; cursor: default; }

/* ── Form ── */
.dst-form[b-hg4f97jpn3] {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dst-form-title[b-hg4f97jpn3] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
}

/* Bootstrap's grid is not loaded in this app. */
.dst-grid[b-hg4f97jpn3] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 20px; }

.dst-field[b-hg4f97jpn3] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dst-label[b-hg4f97jpn3] { font-size: 12px; font-weight: 600; color: var(--muted); }

.dst-input[b-hg4f97jpn3] {
    padding: 8px 10px;
    background: var(--bg, var(--surface));
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    width: 100%;
}

.dst-input:focus[b-hg4f97jpn3] { outline: none; border-color: var(--accent); }
.dst-hint[b-hg4f97jpn3] { font-size: 11px; color: var(--muted); }

.dst-colour-row[b-hg4f97jpn3] { display: flex; align-items: center; gap: 10px; }
.dst-colour-row .dst-input[b-hg4f97jpn3] { flex: 1; min-width: 0; }

.dst-form-actions[b-hg4f97jpn3] { display: flex; gap: 8px; flex-wrap: wrap; }

/* The "this will close N tickets" question. Amber, not red: nothing is wrong yet, it needs a decision. */
.dst-confirm[b-hg4f97jpn3] {
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* /Components/Pages/Administration/Permissions.razor.rz.scp.css */
/* The shell, header, tabs, buttons, search box, badges, toggle, boxes (CollapsibleBox) and the sections
   table are global (app.css). What is here is only this page's own: the master/detail picker, the rule
   builder and the audit list. Colours come from the theme tokens, so both themes follow. */

.perms-state[b-mcx2b7f4ay] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px 0;
}

.perms-state-label[b-mcx2b7f4ay] {
    font-size: 13px;
    color: var(--muted);
}

.perms-placeholder[b-mcx2b7f4ay],
.perms-empty[b-mcx2b7f4ay] {
    font-size: 13px;
    color: var(--muted);
    padding: 10px 2px;
}

.perms-muted[b-mcx2b7f4ay] {
    color: var(--muted);
}

.perms-hint[b-mcx2b7f4ay] {
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 10px;
}

    .perms-hint strong[b-mcx2b7f4ay] {
        color: var(--text);
    }

.perms-label[b-mcx2b7f4ay] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.perms-code[b-mcx2b7f4ay] {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 12px;
    color: var(--muted);
}

/* ── Inputs: the house field look (dark well, accent on focus) ── */
.perms-input[b-mcx2b7f4ay] {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 7px 10px;
}

    .perms-input:focus[b-mcx2b7f4ay] {
        border-color: var(--accent);
        outline: none;
    }

    .perms-input:disabled[b-mcx2b7f4ay] {
        opacity: .6;
    }

textarea.perms-input[b-mcx2b7f4ay] {
    resize: vertical;
}

.perms-select[b-mcx2b7f4ay] {
    max-width: 320px;
}

.perms-code-input[b-mcx2b7f4ay] {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 12.5px;
}

/* ── Two-column master/detail ── */
.perms-layout[b-mcx2b7f4ay] {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* The picker stays in view while a long editor scrolls past it. */
.perms-keys[b-mcx2b7f4ay] {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* .list-search is sized for a toolbar row; here it is the full width of the column. */
.perms-search[b-mcx2b7f4ay] {
    flex: none;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

.perms-key-list[b-mcx2b7f4ay] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: calc(100vh - 290px);
    min-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    padding: 6px;
}

.perms-section-label[b-mcx2b7f4ay] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 8px 4px;
}

.perms-key-item[b-mcx2b7f4ay] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding: 7px 10px;
    border: none;
    border-left: 2px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

    .perms-key-item:hover[b-mcx2b7f4ay] {
        background: var(--surface);
    }

    .perms-key-item.active[b-mcx2b7f4ay] {
        background: var(--surface);
        border-left-color: var(--accent);
    }

.perms-key-item-top[b-mcx2b7f4ay] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.perms-key-item-label[b-mcx2b7f4ay] {
    font-size: 13px;
    font-weight: 500;
}

.perms-key-item-code[b-mcx2b7f4ay] {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 11px;
    color: var(--muted);
}

/* ── Editor (detail) ── */
.perms-editor[b-mcx2b7f4ay] {
    min-width: 0;
}

.perms-editor-header[b-mcx2b7f4ay] {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    padding: 16px 18px;
    margin-bottom: 10px;
}

.perms-editor-title[b-mcx2b7f4ay] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.perms-editor-name[b-mcx2b7f4ay] {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}

.perms-editor-header .perms-code[b-mcx2b7f4ay] {
    display: block;
    margin-top: 4px;
}

.perms-editor-desc[b-mcx2b7f4ay] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    margin-top: 8px;
    max-width: 72ch;
}

    .perms-editor-desc > span:first-child[b-mcx2b7f4ay] {
        flex: 1;
    }

.perms-name-editor[b-mcx2b7f4ay] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.perms-desc-editor[b-mcx2b7f4ay] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    max-width: 72ch;
}

.perms-icon-btn[b-mcx2b7f4ay] {
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 4px;
}

    .perms-icon-btn:hover[b-mcx2b7f4ay] {
        color: var(--accent);
    }

.perms-field[b-mcx2b7f4ay] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

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

/* Inside a CollapsibleBox. */
.perms-box-body[b-mcx2b7f4ay] {
    padding: 4px 2px 6px;
}

/* ── Chips (gate users, implied permissions) ── */
.perms-chips[b-mcx2b7f4ay] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.perms-chip[b-mcx2b7f4ay] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12.5px;
    background: var(--surface);
}

.perms-chip-remove[b-mcx2b7f4ay] {
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 4px;
    border-radius: 999px;
}

    .perms-chip-remove:hover[b-mcx2b7f4ay] {
        color: var(--danger);
    }

    .perms-chip-remove:disabled[b-mcx2b7f4ay] {
        cursor: default;
        opacity: .4;
    }

.perms-add-row[b-mcx2b7f4ay] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* ── Rule builder ── */
.perms-box-body > .toggle-label[b-mcx2b7f4ay] {
    margin: 4px 0 12px;
}

.perms-group[b-mcx2b7f4ay] {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--surface);
}

.perms-group-head[b-mcx2b7f4ay] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.perms-cond[b-mcx2b7f4ay] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.perms-cond-kind[b-mcx2b7f4ay] {
    flex: 0 0 140px;
}

.perms-or-sep[b-mcx2b7f4ay] {
    display: flex;
    align-items: center;
    margin: 8px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--muted);
}

    .perms-or-sep[b-mcx2b7f4ay]::before,
    .perms-or-sep[b-mcx2b7f4ay]::after {
        content: "";
        flex: 1;
        border-top: 1px solid var(--border);
    }

    .perms-or-sep span[b-mcx2b7f4ay] {
        padding: 0 10px;
    }

.perms-add-group[b-mcx2b7f4ay] {
    margin-top: 10px;
}

.perms-note[b-mcx2b7f4ay] {
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13px;
    margin-bottom: 12px;
}

/* The expression and its Save, with the unsaved state marked so a draft is not mistaken for the rule. */
.perms-save-bar[b-mcx2b7f4ay] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    transition: border-color .15s;
}

    .perms-save-bar.is-dirty[b-mcx2b7f4ay] {
        border-color: var(--accent);
    }

.perms-built[b-mcx2b7f4ay] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

    .perms-built .perms-code[b-mcx2b7f4ay] {
        color: var(--text);
        word-break: break-all;
    }

.perms-dirty[b-mcx2b7f4ay] {
    font-size: 12px;
    color: var(--accent);
}

.perms-advanced-toggle[b-mcx2b7f4ay] {
    display: block;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    padding: 12px 0 6px;
}

    .perms-advanced-toggle:hover[b-mcx2b7f4ay] {
        color: var(--accent);
    }

.perms-code-input + .perms-actions[b-mcx2b7f4ay] {
    justify-content: flex-end;
    margin-top: 8px;
}

.perms-expr-help[b-mcx2b7f4ay] {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 10px;
}

    .perms-expr-help ul[b-mcx2b7f4ay] {
        margin: 6px 0;
        padding-left: 20px;
    }

    .perms-expr-help code[b-mcx2b7f4ay] {
        color: var(--text);
    }

/* ── Audits tab ── */
.perms-audit-keys[b-mcx2b7f4ay] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
}

.perms-audit-key[b-mcx2b7f4ay] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

    .perms-audit-key:last-child[b-mcx2b7f4ay] {
        border-bottom: none;
    }

.perms-audit-key-label[b-mcx2b7f4ay] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    flex-wrap: wrap;
}

.perms-reason-list[b-mcx2b7f4ay] {
    margin: 6px 0 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
    color: var(--muted);
}

/* ── Sections tab (the table itself is the global .rec-table) ── */
.perms-col-order[b-mcx2b7f4ay] {
    width: 90px;
}

.perms-section-new td[b-mcx2b7f4ay] {
    border-top: 1px solid var(--border);
}

/* ── Below desktop: one column, the picker above the editor ── */
@media (max-width: 991px) {
    .perms-layout[b-mcx2b7f4ay] {
        grid-template-columns: minmax(0, 1fr);
    }

    .perms-keys[b-mcx2b7f4ay] {
        position: static;
    }

    .perms-key-list[b-mcx2b7f4ay] {
        max-height: 40vh;
    }

    .perms-select[b-mcx2b7f4ay] {
        max-width: none;
    }
}

@media (max-width: 576px) {
    .perms-cond[b-mcx2b7f4ay] {
        flex-wrap: wrap;
    }

    .perms-cond-kind[b-mcx2b7f4ay] {
        flex: 1 1 100%;
    }

    .perms-field[b-mcx2b7f4ay] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
}
/* /Components/Pages/Administration/ReportSettings.razor.rz.scp.css */
.rs-shell[b-55s2cmkyyk] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    height: 100%;
}

/* ── Header ── */
.rs-header[b-55s2cmkyyk] {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.rs-title[b-55s2cmkyyk] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0;
}

/* ── Body ── */
.rs-body[b-55s2cmkyyk] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rs-state[b-55s2cmkyyk] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.rs-denied[b-55s2cmkyyk] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--muted);
    font-size: 13px;
}

.error-text[b-55s2cmkyyk] { color: var(--danger); font-size: 13px; }

/* ── Sections ── */
.rs-section[b-55s2cmkyyk] {
    max-width: 900px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--border);
}

    .rs-section:last-child[b-55s2cmkyyk] { border-bottom: none; padding-bottom: 0; }

.rs-section-header[b-55s2cmkyyk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.rs-section-title[b-55s2cmkyyk] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

.rs-section-header .rs-section-title[b-55s2cmkyyk] { margin-bottom: 0; }

.rs-section-note[b-55s2cmkyyk] {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
    max-width: 720px;
    margin: 0 0 18px;
}

/* ── Fields ── */
.rs-field[b-55s2cmkyyk] { display: flex; flex-direction: column; }

.rs-field-label[b-55s2cmkyyk] {
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.rs-field-input[b-55s2cmkyyk] {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 10px 13px;
    outline: none;
    transition: border-color .15s;
}

    .rs-field-input:focus[b-55s2cmkyyk] { border-color: var(--accent); }

/* A value shown for information only — the responsible department is set elsewhere (designated SHERQ). */
.rs-field-readonly[b-55s2cmkyyk] {
    background: var(--surface2);
    color: var(--muted);
    cursor: default;
}

.rs-field-select[b-55s2cmkyyk] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.rs-receiver-row[b-55s2cmkyyk] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    max-width: 480px;
}

    .rs-receiver-row .rs-field[b-55s2cmkyyk] { flex: 1; }

/* ── Buttons ── */
.btn-save[b-55s2cmkyyk] {
    padding: 9px 22px;
    background: var(--accent);
    color: var(--bg);
    border: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-save:hover:not(:disabled)[b-55s2cmkyyk] { background: var(--accent2); }
    .btn-save:disabled[b-55s2cmkyyk] { opacity: .5; cursor: default; }

.btn-add[b-55s2cmkyyk] {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    align-self: flex-start;
}

    .btn-add:hover[b-55s2cmkyyk] { border-color: var(--accent); color: var(--accent); }

.btn-add-sm[b-55s2cmkyyk] { padding: 4px 10px; font-size: 9px; }

.btn-row-action[b-55s2cmkyyk] {
    padding: 3px 10px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    transition: all .15s;
}

    .btn-row-action:hover[b-55s2cmkyyk] { border-color: var(--accent); color: var(--accent); }

/* ── Inline form ── */
.rs-inline-form[b-55s2cmkyyk] {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 560px;
}

.rs-form-title[b-55s2cmkyyk] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text);
}

.rs-form-footer[b-55s2cmkyyk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.inline-error[b-55s2cmkyyk] {
    background: rgba(192,88,74,.08);
    border: 1px solid rgba(192,88,74,.25);
    color: var(--danger);
    padding: 8px 12px;
    font-size: 12px;
}

/* ── Example editor rows ── */
.rs-example-row[b-55s2cmkyyk] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

    .rs-example-row .rs-field-input[b-55s2cmkyyk] { flex: 1; }

.rs-example-remove[b-55s2cmkyyk] {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1;
    transition: color .15s;
    flex-shrink: 0;
}

    .rs-example-remove:hover[b-55s2cmkyyk] { color: var(--danger); }

.rs-empty-sm[b-55s2cmkyyk] {
    font-size: 12px;
    color: var(--muted);
    padding: 2px 0 6px;
}

/* ── Toggle ── */
.rs-toggle-label[b-55s2cmkyyk] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.rs-toggle-check[b-55s2cmkyyk] { display: none; }

.rs-toggle-track[b-55s2cmkyyk] {
    width: 36px;
    height: 20px;
    background: var(--border);
    border-radius: 10px;
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
}

.rs-toggle-check:checked ~ .rs-toggle-track[b-55s2cmkyyk] { background: var(--accent); }

.rs-toggle-thumb[b-55s2cmkyyk] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: left .2s;
}

.rs-toggle-check:checked ~ .rs-toggle-track .rs-toggle-thumb[b-55s2cmkyyk] { left: 19px; }

.rs-toggle-text[b-55s2cmkyyk] { font-size: 13px; color: var(--text); }

/* ── Table ── */
.rs-table[b-55s2cmkyyk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.rs-table th[b-55s2cmkyyk] {
    padding: 8px 14px;
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.rs-table td[b-55s2cmkyyk] { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }

.rs-table tr:last-child td[b-55s2cmkyyk] { border-bottom: none; }

.rs-row-inactive td[b-55s2cmkyyk] { opacity: .45; }

.muted[b-55s2cmkyyk] { color: var(--muted); font-size: 12px; }

.rs-row-actions[b-55s2cmkyyk] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Chips ── */
.rs-chips[b-55s2cmkyyk] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rs-chip[b-55s2cmkyyk] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--text);
    border: 1px solid var(--border);
    background: var(--surface2, var(--bg));
    border-radius: 999px;
}

/* ── Status pill ── */
.rs-pill[b-55s2cmkyyk] {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 999px;
}

.rs-pill-inactive[b-55s2cmkyyk] { color: var(--muted); border: 1px solid var(--border); }

.rs-empty[b-55s2cmkyyk] {
    font-size: 12px;
    color: var(--muted);
    padding: 12px 0;
}

/* ── Spinner ── */
.spinner[b-55s2cmkyyk] {
    width: 13px;
    height: 13px;
    border: 1.5px solid rgba(13,17,23,.3);
    border-top-color: var(--bg);
    border-radius: 50%;
    animation: spin-b-55s2cmkyyk .6s linear infinite;
}

.spinner-lg[b-55s2cmkyyk] {
    width: 22px;
    height: 22px;
    border-width: 2px;
    border-color: var(--border);
    border-top-color: var(--accent);
}

@keyframes spin-b-55s2cmkyyk { to { transform: rotate(360deg); } }

/* ── NCR tabs (moved from NCR Settings) — inline add-row + specific-people picker.
   Global rep-* / tab-strip supply the rest. ── */
.rep-inline-form[b-55s2cmkyyk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}
    .rep-inline-form select[b-55s2cmkyyk],
    .rep-inline-form input[b-55s2cmkyyk] {
        background: var(--bg);
        border: 1px solid var(--border);
        color: var(--text);
        font-family: 'Barlow', sans-serif;
        font-size: 13px;
        padding: 7px 10px;
        border-radius: 6px;
        outline: none;
    }
    .rep-inline-form input[b-55s2cmkyyk] { min-width: 220px; }

.ncr-user-checklist[b-55s2cmkyyk] {
    max-width: 360px;
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
}
.ncr-user-check[b-55s2cmkyyk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}
    .ncr-user-check input[type="checkbox"][b-55s2cmkyyk] { width: auto; accent-color: var(--accent); }
/* /Components/Pages/Administration/SharedAccessUsers.razor.rz.scp.css */
/* Mirrors Users.razor.css so this page shares the Administration look (scoped CSS doesn't cross
   components, so the shared classes are redeclared here), plus the search bar + password modal. */

.usr-shell[b-enhmjfw9jd] {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 1;
}

/* ── Header ── */
.usr-header[b-enhmjfw9jd] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 24px 24px 18px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.usr-title[b-enhmjfw9jd] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

/* ── Fields ── */
.field[b-enhmjfw9jd] {
    display: flex;
    flex-direction: column;
}

.field-label[b-enhmjfw9jd] {
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.field-input[b-enhmjfw9jd] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 10px 13px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

    .field-input:focus[b-enhmjfw9jd] {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(240,165,0,.08);
    }

    .field-input.error[b-enhmjfw9jd] { border-color: var(--danger); }

.field-select[b-enhmjfw9jd] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.error-msg[b-enhmjfw9jd] {
    margin-top: 5px;
    font-size: 11px;
    color: var(--danger);
    letter-spacing: .04em;
}

.global-error[b-enhmjfw9jd] {
    background: rgba(192,88,74,.1);
    border: 1px solid rgba(192,88,74,.3);
    color: var(--danger);
    padding: 10px 13px;
    font-size: 12px;
    letter-spacing: .04em;
    margin-bottom: 16px;
}

/* ── Buttons ── */
.btn-secondary[b-enhmjfw9jd] {
    padding: 9px 18px;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

    .btn-secondary:hover:not(:disabled)[b-enhmjfw9jd] {
        border-color: var(--accent);
        color: var(--accent);
    }

    .btn-secondary:disabled[b-enhmjfw9jd] { opacity: .5; cursor: default; }

.btn-create[b-enhmjfw9jd] {
    padding: 11px 24px;
    background: var(--accent);
    color: var(--bg);
    border: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-create:hover:not(:disabled)[b-enhmjfw9jd] { background: var(--accent2); }
    .btn-create:disabled[b-enhmjfw9jd] { opacity: .5; cursor: default; }

/* ── List states ── */
.usr-body[b-enhmjfw9jd] {
}

.usr-state[b-enhmjfw9jd] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.usr-empty[b-enhmjfw9jd] {
    flex-direction: column;
    gap: 12px;
    opacity: .25;
}

.usr-empty-icon[b-enhmjfw9jd] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 48px;
    color: var(--accent);
}

.usr-empty-label[b-enhmjfw9jd] {
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--muted);
}

.error-text[b-enhmjfw9jd] { color: var(--danger); font-size: 13px; }

/* ── Table ── */
.usr-table[b-enhmjfw9jd] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.usr-table th[b-enhmjfw9jd] {
    padding: 10px 16px;
    font-size: 9px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 1;
}

.usr-row[b-enhmjfw9jd] {
    border-bottom: 1px solid var(--border);
    transition: background .1s;
}

    .usr-row:hover[b-enhmjfw9jd] { background: var(--surface); }

.usr-table td[b-enhmjfw9jd] { padding: 12px 16px; vertical-align: middle; }

.muted[b-enhmjfw9jd] { color: var(--muted); font-size: 12px; }

/* ── Column widths ── */
.col-name[b-enhmjfw9jd]      { min-width: 160px; font-weight: 500; }
.col-email[b-enhmjfw9jd]     { min-width: 160px; }
.col-team[b-enhmjfw9jd]      { width: 160px; }
.col-status[b-enhmjfw9jd]    { width: 200px; }
.col-authorise[b-enhmjfw9jd] { width: 260px; }
.col-action[b-enhmjfw9jd]    { text-align: right; white-space: nowrap; }

/* ── Badges ── */
.status-badge[b-enhmjfw9jd] {
    display: inline-block;
    padding: 2px 8px;
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
}

.status-enabled[b-enhmjfw9jd]  { border-color: var(--success); color: var(--success); }
.status-disabled[b-enhmjfw9jd] { border-color: var(--border);  color: var(--muted);   opacity: .6; }

/* ── Spinner ── */
.spinner[b-enhmjfw9jd] {
    width: 13px;
    height: 13px;
    border: 1.5px solid rgba(13,17,23,.3);
    border-top-color: var(--bg);
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

.spinner-lg[b-enhmjfw9jd] {
    width: 22px;
    height: 22px;
    border-width: 2px;
    border-color: var(--border);
    border-top-color: var(--accent);
}

/* ── Shared-access specifics ── */
/* No horizontal padding — the toolbar already sits inside .page-body's 24px, so this keeps the search
   box's left edge flush with the table box below it. */
.sa-toolbar[b-enhmjfw9jd] {
    padding: 0 0 14px;
}

.sa-search[b-enhmjfw9jd] {
    width: 340px;
    max-width: 100%;
}

.sa-inline[b-enhmjfw9jd] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sa-inline-end[b-enhmjfw9jd] {
    justify-content: flex-end;
}

/* ── Password modal ── */
.sa-overlay[b-enhmjfw9jd] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.sa-modal[b-enhmjfw9jd] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 28px;
    width: 420px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.sa-modal-title[b-enhmjfw9jd] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

.sa-modal-sub[b-enhmjfw9jd] {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 18px;
}

.sa-modal-tools[b-enhmjfw9jd] {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.sa-modal-actions[b-enhmjfw9jd] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}
/* /Components/Pages/Administration/TicketStatuses.razor.rz.scp.css */
/* DEV-SW-113 stage 2: Administration → Ticket Statuses. Tables use the global .rec-table, boxes the shared
   CollapsibleBox, buttons the global .btn-*; only what is unique to this page lives here. */

.tsa-shell[b-xeofitde7m] {
    /* A flex item of the layout's <main>: without min-width 0 it grows to its widest table and the page
       runs off the right edge on a phone. With it, the tables scroll inside their own boxes instead. */
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    max-width: 1040px;
    margin: 0 auto;
    padding: 28px 24px 48px;
    overflow-y: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tsa-header[b-xeofitde7m] { margin-bottom: 4px; }

.tsa-eyebrow[b-xeofitde7m] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.tsa-title[b-xeofitde7m] {
    margin: 4px 0 8px;
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
}

.tsa-subtitle[b-xeofitde7m],
.tsa-note[b-xeofitde7m] {
    margin: 0;
    max-width: 75ch;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.tsa-note[b-xeofitde7m] { margin-bottom: 12px; }

.tsa-state[b-xeofitde7m] { display: flex; justify-content: center; padding: 48px 0; }
.tsa-denied[b-xeofitde7m] { padding: 40px 0; text-align: center; color: var(--muted); }
.tsa-error[b-xeofitde7m] { color: var(--danger); font-size: 13px; }

/* The company-wide warning: amber edge, not a red alarm — nothing is wrong, it is a reminder of reach. */
.tsa-warning[b-xeofitde7m] {
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    border-radius: 6px;
    background: var(--surface);
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}

/* ── Status pill: same colour keys as the ticket pages (status-{key}) ── */
.tsa-pill[b-xeofitde7m] {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--muted);
}

.tsa-pill.status-neutral[b-xeofitde7m] { border-color: var(--border);  color: var(--muted); }
.tsa-pill.status-muted[b-xeofitde7m]   { border-color: var(--muted);   color: var(--muted); }
.tsa-pill.status-accent[b-xeofitde7m]  { border-color: var(--accent);  color: var(--accent); }
.tsa-pill.status-success[b-xeofitde7m] { border-color: var(--success); color: var(--success); }
.tsa-pill.status-danger[b-xeofitde7m]  { border-color: var(--danger);  color: var(--danger); }
.tsa-pill.status-info[b-xeofitde7m]    { border-color: var(--info);    color: var(--info); }
.tsa-pill.status-warning[b-xeofitde7m] { border-color: var(--warning); color: var(--warning); }
.tsa-pill.status-purple[b-xeofitde7m] { border-color: var(--purple); color: var(--purple); }
.tsa-pill.status-pink[b-xeofitde7m] { border-color: var(--pink); color: var(--pink); }
.tsa-pill.status-teal[b-xeofitde7m] { border-color: var(--teal); color: var(--teal); }
.tsa-pill.status-orange[b-xeofitde7m] { border-color: var(--orange); color: var(--orange); }

.tsa-pills[b-xeofitde7m] { display: flex; flex-wrap: wrap; gap: 6px; }

.tsa-start[b-xeofitde7m] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
}

/* ── Order arrows ── */
.tsa-col-order[b-xeofitde7m] { width: 1%; white-space: nowrap; }

.tsa-order[b-xeofitde7m] { display: inline-flex; gap: 4px; }

.tsa-arrow[b-xeofitde7m] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    cursor: pointer;
}

.tsa-arrow:hover:not(:disabled)[b-xeofitde7m] { border-color: var(--accent); color: var(--accent); }
.tsa-arrow:disabled[b-xeofitde7m] { opacity: .3; cursor: default; }

.tsa-subhead[b-xeofitde7m] {
    margin: 16px 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.tsa-row-inactive td[b-xeofitde7m] { opacity: .6; }

/* ── Inline form ── */
.tsa-form[b-xeofitde7m] {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    padding: 16px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tsa-form-title[b-xeofitde7m] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
}

.tsa-field[b-xeofitde7m] { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }

/* Two fields per row where there is room, one on a phone. Bootstrap's grid is not loaded in this app. */
.tsa-grid[b-xeofitde7m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 20px;
}

.tsa-grid .tsa-field[b-xeofitde7m] { max-width: none; }

.tsa-label[b-xeofitde7m] { font-size: 12px; font-weight: 600; color: var(--muted); }

.tsa-input[b-xeofitde7m] {
    padding: 8px 10px;
    background: var(--bg, var(--surface));
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    width: 100%;
}

.tsa-input:focus[b-xeofitde7m] { outline: none; border-color: var(--accent); }

.tsa-readonly[b-xeofitde7m] { color: var(--muted); cursor: default; }

.tsa-hint[b-xeofitde7m] { font-size: 11px; color: var(--muted); }

.tsa-colour-row[b-xeofitde7m] { display: flex; align-items: center; gap: 10px; }
.tsa-colour-row .tsa-input[b-xeofitde7m] { flex: 1; min-width: 0; }

.tsa-form-actions[b-xeofitde7m] { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 576px) {
    .tsa-shell[b-xeofitde7m] { padding: 20px 16px 40px; }
    .tsa-title[b-xeofitde7m] { font-size: 22px; }
    .tsa-field[b-xeofitde7m] { max-width: none; }
}
/* /Components/Pages/Administration/UpdateManagement.razor.rz.scp.css */
.um-shell[b-dg1qzy3m8x] {
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 24px 48px;
    overflow-y: auto;
    height: 100%;
}

.um-header[b-dg1qzy3m8x] { margin-bottom: 22px; }

.um-eyebrow[b-dg1qzy3m8x] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.um-title[b-dg1qzy3m8x] {
    margin: 4px 0 8px;
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
}

.um-subtitle[b-dg1qzy3m8x] {
    margin: 0;
    max-width: 60ch;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.um-state[b-dg1qzy3m8x] {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.um-denied[b-dg1qzy3m8x] {
    padding: 40px 0;
    text-align: center;
    color: var(--muted);
}

.um-error[b-dg1qzy3m8x] { color: var(--danger); font-size: 13px; }

.um-card[b-dg1qzy3m8x] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.um-current[b-dg1qzy3m8x] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.um-current-label[b-dg1qzy3m8x] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.um-current-value[b-dg1qzy3m8x] { font-size: 14px; color: var(--text); }
.um-muted[b-dg1qzy3m8x] { color: var(--muted); }

.um-toggle[b-dg1qzy3m8x] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

.um-toggle input[b-dg1qzy3m8x] { width: 16px; height: 16px; cursor: pointer; }

.um-fields[b-dg1qzy3m8x] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.um-field[b-dg1qzy3m8x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}

.um-field-label[b-dg1qzy3m8x] {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.um-input[b-dg1qzy3m8x] {
    padding: 8px 10px;
    background: var(--bg, var(--surface));
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
}

.um-input:focus[b-dg1qzy3m8x] {
    outline: none;
    border-color: var(--accent);
}

.um-actions[b-dg1qzy3m8x] { display: flex; }

.um-save[b-dg1qzy3m8x] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 24px;
    background: var(--accent);
    border: none;
    border-radius: 4px;
    color: #000;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .15s;
}

    .um-save:hover:not(:disabled)[b-dg1qzy3m8x] { opacity: .85; }
    .um-save:disabled[b-dg1qzy3m8x] { opacity: .5; cursor: default; }
/* /Components/Pages/Administration/Users.razor.rz.scp.css */
.usr-shell[b-xo9y71fbjy] {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 1;
}

/* ── Header ── */
.usr-header[b-xo9y71fbjy] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 24px 24px 18px;
    border-bottom: 1px solid var(--border);
    position: relative;
}


.usr-eyebrow[b-xo9y71fbjy] {
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.usr-title[b-xo9y71fbjy] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

/* ── Form ── */
.usr-form-wrap[b-xo9y71fbjy] {
    flex-shrink: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .3s ease, opacity .3s ease;
}

    .usr-form-wrap.visible[b-xo9y71fbjy] {
        max-height: 1200px;
        opacity: 1;
    }

.usr-form[b-xo9y71fbjy] {
    padding: 28px 48px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.usr-form-title[b-xo9y71fbjy] {
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
}

.form-row-3[b-xo9y71fbjy] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-row-2[b-xo9y71fbjy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-row-1[b-xo9y71fbjy] {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 20px;
}

/* ── Fields ── */
.field[b-xo9y71fbjy] {
    display: flex;
    flex-direction: column;
}

.field-label[b-xo9y71fbjy] {
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.field-input[b-xo9y71fbjy] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 10px 13px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

    .field-input:focus[b-xo9y71fbjy] {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(240,165,0,.08);
    }

    .field-input.error[b-xo9y71fbjy] { border-color: var(--danger); }

    .field-input.field-readonly[b-xo9y71fbjy] {
        opacity: .45;
        cursor: not-allowed;
    }

.field-select[b-xo9y71fbjy] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.error-msg[b-xo9y71fbjy] {
    margin-top: 5px;
    font-size: 11px;
    color: var(--danger);
    letter-spacing: .04em;
}

.global-error[b-xo9y71fbjy] {
    background: rgba(192,88,74,.1);
    border: 1px solid rgba(192,88,74,.3);
    color: var(--danger);
    padding: 10px 13px;
    font-size: 12px;
    letter-spacing: .04em;
    margin-bottom: 20px;
}

/* ── Form footer ── */
.form-footer[b-xo9y71fbjy] {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 4px;
}

/* ── Toggle ── */
.toggle-label[b-xo9y71fbjy] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.toggle-check[b-xo9y71fbjy] {
    display: none;
}

.toggle-track[b-xo9y71fbjy] {
    position: relative;
    width: 34px;
    height: 18px;
    background: var(--border);
    border-radius: 9px;
    transition: background .2s;
    flex-shrink: 0;
}

    .toggle-check:checked + .toggle-track[b-xo9y71fbjy] {
        background: var(--accent);
    }

.toggle-thumb[b-xo9y71fbjy] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    background: var(--muted);
    border-radius: 50%;
    transition: transform .2s, background .2s;
}

    .toggle-check:checked + .toggle-track .toggle-thumb[b-xo9y71fbjy] {
        transform: translateX(16px);
        background: var(--bg);
    }

.toggle-text[b-xo9y71fbjy] {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    min-width: 52px;
}

/* ── Reset password row ── */
.field-reset-row[b-xo9y71fbjy] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.field-reset-ok[b-xo9y71fbjy] {
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--success);
}

/* ── Buttons ── */
.btn-secondary[b-xo9y71fbjy] {
    padding: 9px 18px;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-secondary:hover:not(:disabled)[b-xo9y71fbjy] {
        border-color: var(--accent);
        color: var(--accent);
    }

    .btn-secondary:disabled[b-xo9y71fbjy] { opacity: .5; cursor: default; }

.btn-create[b-xo9y71fbjy] {
    padding: 11px 24px;
    background: var(--accent);
    color: var(--bg);
    border: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-create:hover:not(:disabled)[b-xo9y71fbjy] { background: var(--accent2); }
    .btn-create:disabled[b-xo9y71fbjy] { opacity: .5; cursor: default; }

/* ── User list ── */
.usr-body[b-xo9y71fbjy] {
}

/* Search toolbar — no horizontal padding so the box aligns with the table below (both sit inside
   .page-body's 24px). */
.usr-toolbar[b-xo9y71fbjy] {
    padding: 0 0 14px;
}

.usr-search[b-xo9y71fbjy] {
    width: 340px;
    max-width: 100%;
}

.usr-state[b-xo9y71fbjy] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.usr-empty[b-xo9y71fbjy] {
    flex-direction: column;
    gap: 12px;
    opacity: .25;
}

.usr-empty-icon[b-xo9y71fbjy] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 48px;
    color: var(--accent);
}

.usr-empty-label[b-xo9y71fbjy] {
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--muted);
}

.error-text[b-xo9y71fbjy] { color: var(--danger); font-size: 13px; }

/* ── Table ── */
.usr-table[b-xo9y71fbjy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.usr-table th[b-xo9y71fbjy] {
    padding: 10px 16px;
    font-size: 9px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 1;
}

.usr-row[b-xo9y71fbjy] {
    border-bottom: 1px solid var(--border);
    transition: background .1s;
}

    .usr-row:hover[b-xo9y71fbjy] { background: var(--surface); }

.usr-table td[b-xo9y71fbjy] { padding: 12px 16px; vertical-align: middle; }

.muted[b-xo9y71fbjy] { color: var(--muted); font-size: 12px; }

/* ── Column widths ── */
.col-id[b-xo9y71fbjy]      { width: 48px; }
.col-name[b-xo9y71fbjy]    { min-width: 160px; font-weight: 500; }
.col-email[b-xo9y71fbjy]   { min-width: 200px; }
.col-dept[b-xo9y71fbjy]    { width: 140px; }
.col-role[b-xo9y71fbjy]    { width: 90px; }
.col-status[b-xo9y71fbjy]  { width: 90px; }
.col-verified[b-xo9y71fbjy] { width: 100px; }
.col-mfa[b-xo9y71fbjy]     { width: 90px; }
.col-created[b-xo9y71fbjy] { width: 120px; }
.col-action[b-xo9y71fbjy]  { width: 60px; text-align: right; }

/* ── Badges ── */
.role-badge[b-xo9y71fbjy],
.status-badge[b-xo9y71fbjy] {
    display: inline-block;
    padding: 2px 8px;
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
}

.role-admin[b-xo9y71fbjy] {
    border-color: var(--accent);
    color: var(--accent);
}

.status-enabled[b-xo9y71fbjy]  { border-color: var(--success); color: var(--success); }
.status-disabled[b-xo9y71fbjy] { border-color: var(--border);  color: var(--muted);   opacity: .6; }

/* ── Edit button ── */
.btn-edit[b-xo9y71fbjy] {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 4px 10px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    white-space: nowrap;
}

    .btn-edit:hover[b-xo9y71fbjy] {
        border-color: var(--accent);
        color: var(--accent);
    }

/* ── Spinner ── */
.spinner[b-xo9y71fbjy] {
    width: 13px;
    height: 13px;
    border: 1.5px solid rgba(13,17,23,.3);
    border-top-color: var(--bg);
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

.spinner-lg[b-xo9y71fbjy] {
    width: 22px;
    height: 22px;
    border-width: 2px;
    border-color: var(--border);
    border-top-color: var(--accent);
}

/* ── Profile photo (edit form) ── */
.usr-photo-row[b-xo9y71fbjy] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.usr-photo-thumb[b-xo9y71fbjy] {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.usr-photo-thumb img[b-xo9y71fbjy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.usr-photo-initials[b-xo9y71fbjy] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--muted);
    text-transform: uppercase;
}

.usr-photo-actions[b-xo9y71fbjy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.usr-photo-hint[b-xo9y71fbjy] {
    font-size: 11px;
    color: var(--muted);
}
/* /Components/Pages/Company/Announcements.razor.rz.scp.css */
/* ── Shell ── */
.ann-shell[b-srqurrrs4m] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 24px 24px 0;
}

/* ── Header ── */
.ann-header[b-srqurrrs4m] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    flex-shrink: 0;
}

.ann-title[b-srqurrrs4m] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
    flex: 1;
}

/* ── Buttons ── */
.btn-create[b-srqurrrs4m] {
    padding: 7px 16px;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

    .btn-create:hover:not(:disabled)[b-srqurrrs4m] {
        background: var(--accent);
        color: var(--bg);
    }

    .btn-create:disabled[b-srqurrrs4m] { opacity: .5; cursor: default; }

.btn-secondary[b-srqurrrs4m] {
    padding: 7px 16px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .btn-secondary:hover:not(:disabled)[b-srqurrrs4m] { border-color: var(--accent); color: var(--accent); }
    .btn-secondary:disabled[b-srqurrrs4m] { opacity: .5; cursor: default; }

.btn-attach[b-srqurrrs4m] {
    display: inline-block;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .btn-attach:hover[b-srqurrrs4m] { border-color: var(--accent); color: var(--accent); }
    .btn-attach--uploading[b-srqurrrs4m] { opacity: .6; cursor: default; }

/* ── State views (loading/error/empty) ── */
.ann-state[b-srqurrrs4m] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 48px 24px;
    color: var(--muted);
    font-size: 14px;
}

.ann-state--error[b-srqurrrs4m] { color: var(--danger); }

.ann-error[b-srqurrrs4m] {
    color: var(--danger);
    font-size: 13px;
    margin-bottom: 12px;
}

.ann-error--sm[b-srqurrrs4m] { font-size: 12px; margin-top: 6px; margin-bottom: 0; }

/* ── Body split layout ── */
.ann-body[b-srqurrrs4m] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── List panel ── */
.ann-list[b-srqurrrs4m] {
    width: 100%;
    overflow-y: auto;
    border-right: 1px solid var(--border);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    flex-shrink: 0;
}

.ann-body--split .ann-list[b-srqurrrs4m] {
    width: 300px;
}

.ann-list[b-srqurrrs4m]::-webkit-scrollbar       { width: 4px; }
.ann-list[b-srqurrrs4m]::-webkit-scrollbar-track  { background: transparent; }
.ann-list[b-srqurrrs4m]::-webkit-scrollbar-thumb  { background: var(--border); }

.ann-list-item[b-srqurrrs4m] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}

    .ann-list-item:hover[b-srqurrrs4m] { background: var(--surface2); }
    .ann-list-item--active[b-srqurrrs4m] { background: color-mix(in srgb, var(--accent) 8%, transparent); }

.ann-list-item-dot[b-srqurrrs4m] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
    margin-top: 5px;
    border: 1.5px solid var(--border);
    transition: background .15s, border-color .15s;
}

.ann-list-item--unread .ann-list-item-dot[b-srqurrrs4m] {
    background: var(--accent);
    border-color: var(--accent);
}

.ann-list-item-content[b-srqurrrs4m] { flex: 1; min-width: 0; }

.ann-list-item-title[b-srqurrrs4m] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.ann-list-item--unread .ann-list-item-title[b-srqurrrs4m] { font-weight: 600; }

.ann-list-item-meta[b-srqurrrs4m] {
    display: flex;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
    flex-wrap: wrap;
    align-items: center;
}

.ann-list-tag[b-srqurrrs4m] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    opacity: .8;
}

/* ── Detail panel ── */
.ann-detail[b-srqurrrs4m] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 24px 28px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    min-width: 0;
}

.ann-detail[b-srqurrrs4m]::-webkit-scrollbar       { width: 4px; }
.ann-detail[b-srqurrrs4m]::-webkit-scrollbar-track  { background: transparent; }
.ann-detail[b-srqurrrs4m]::-webkit-scrollbar-thumb  { background: var(--border); }

.ann-detail-header[b-srqurrrs4m] {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
}

.ann-detail-title[b-srqurrrs4m] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--text);
    margin-bottom: 6px;
}

.ann-detail-meta[b-srqurrrs4m] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
}

.ann-detail-tags[b-srqurrrs4m] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.ann-tag-pill[b-srqurrrs4m] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 2px;
}

.ann-tag-pill--dept[b-srqurrrs4m] {
    border-color: var(--border);
    color: var(--muted);
}

.ann-detail-sep[b-srqurrrs4m] { opacity: .5; }

.ann-detail-body[b-srqurrrs4m] {
    line-height: 1.65;
    margin-bottom: 28px;
    flex-shrink: 0;
}

.ann-detail-body[b-srqurrrs4m]  p  { margin: 0 0 .6em; }
.ann-detail-body[b-srqurrrs4m]  h1 { font-size: 1.35em; font-weight: 600; margin: .8em 0 .4em; }
.ann-detail-body[b-srqurrrs4m]  h2 { font-size: 1.15em; font-weight: 600; margin: .8em 0 .4em; }
.ann-detail-body[b-srqurrrs4m]  h3 { font-size: 1em;    font-weight: 600; margin: .8em 0 .4em; }
.ann-detail-body[b-srqurrrs4m]  ul,
.ann-detail-body[b-srqurrrs4m]  ol { padding-left: 1.5em; margin: 0 0 .6em; }
.ann-detail-body[b-srqurrrs4m]  li { margin-bottom: .25em; }
.ann-detail-body[b-srqurrrs4m]  blockquote {
    border-left: 3px solid var(--accent);
    margin: .6em 0;
    padding: .3em 1em;
    color: var(--muted);
}
.ann-detail-body[b-srqurrrs4m]  pre {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: .75em 1em;
    font-size: 12px;
    overflow-x: auto;
    margin: .6em 0;
}
.ann-detail-body[b-srqurrrs4m]  code {
    background: var(--surface2);
    border-radius: 2px;
    padding: .1em .35em;
    font-size: 12px;
}
.ann-detail-body[b-srqurrrs4m]  a { color: var(--accent); }
.ann-detail-body[b-srqurrrs4m]  img { max-width: 100%; border-radius: 3px; }

.ann-detail-empty-body[b-srqurrrs4m] {
    color: var(--muted);
    font-size: 13px;
    font-style: italic;
    margin-bottom: 28px;
}

/* ── Attachments section ── */
.ann-attachments[b-srqurrrs4m] {
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.ann-attachments-header[b-srqurrrs4m] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ann-attachments-title[b-srqurrrs4m] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    flex: 1;
}

.ann-attachments-empty[b-srqurrrs4m] {
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
}

.ann-attach-list[b-srqurrrs4m] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ann-attach-item[b-srqurrrs4m] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.ann-attach-thumb[b-srqurrrs4m] {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}

.ann-attach-preview-link[b-srqurrrs4m] { flex-shrink: 0; }

.ann-attach-icon[b-srqurrrs4m] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--muted);
    flex-shrink: 0;
}

.ann-attach-info[b-srqurrrs4m] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ann-attach-name[b-srqurrrs4m] {
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .ann-attach-name:hover[b-srqurrrs4m] { color: var(--accent); text-decoration: underline; }

.ann-attach-size[b-srqurrrs4m] {
    font-size: 11px;
    color: var(--muted);
}

.ann-attach-delete[b-srqurrrs4m] {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    transition: color .12s, background .12s;
    flex-shrink: 0;
}

    .ann-attach-delete:hover[b-srqurrrs4m] { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* ── Create form ── */
.ann-create-panel[b-srqurrrs4m] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 4px 28px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.ann-create-header[b-srqurrrs4m] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.ann-create-heading[b-srqurrrs4m] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text);
}

.ann-form-row[b-srqurrrs4m] {
    margin-bottom: 16px;
}

.ann-form-label[b-srqurrrs4m] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.ann-form-input[b-srqurrrs4m] {
    width: 100%;
    max-width: 640px;
    padding: 8px 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    transition: border-color .15s;
}

    .ann-form-input:focus[b-srqurrrs4m] {
        outline: none;
        border-color: var(--accent);
    }

.ann-rte[b-srqurrrs4m] {
    max-width: 760px;
}

/* Comment editors — match the tickets page's default height. */
[b-srqurrrs4m] .comment-rte .ql-editor {
    min-height: 120px;
}

.ann-form-actions[b-srqurrrs4m] {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.ann-tag-select[b-srqurrrs4m] {
    max-width: 280px;
}

.ann-filter-bar[b-srqurrrs4m] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.ann-filter-select[b-srqurrrs4m] {
    max-width: 100%;
    font-size: 12px;
    padding: 6px 10px;
}

.ann-dept-checks[b-srqurrrs4m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    max-width: 640px;
}

.ann-dept-check-item[b-srqurrrs4m] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

    .ann-dept-check-item input[type="checkbox"][b-srqurrrs4m] {
        accent-color: var(--accent);
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        cursor: pointer;
    }

@media (max-width: 576px) {
    .ann-tag-select[b-srqurrrs4m] {
        max-width: 100%;
    }
}

/* ── Spinners ── */
.spinner[b-srqurrrs4m] {
    width: 13px;
    height: 13px;
    border: 1.5px solid rgba(13,17,23,.3);
    border-top-color: var(--bg);
    border-radius: 50%;
    animation: spin-b-srqurrrs4m .6s linear infinite;
    display: inline-block;
}

.spinner-lg[b-srqurrrs4m] {
    width: 22px;
    height: 22px;
    border-width: 2px;
    border-color: var(--border);
    border-top-color: var(--accent);
}

.spinner-sm[b-srqurrrs4m] {
    width: 12px;
    height: 12px;
    border-width: 1.5px;
    border-color: var(--border);
    border-top-color: var(--accent);
}

@keyframes spin-b-srqurrrs4m { to { transform: rotate(360deg); } }

/* ── Responsive ── */
@media (max-width: 576px) {
    .ann-shell[b-srqurrrs4m] { padding: 16px 16px 0; }

    .ann-body--split .ann-list[b-srqurrrs4m] { width: 100%; border-right: none; }

    /* On mobile: when a detail is selected, hide the list and show only the detail */
    .ann-body--split .ann-list[b-srqurrrs4m] { display: none; }
    .ann-body--split .ann-detail[b-srqurrrs4m] { display: flex; }

    .ann-detail[b-srqurrrs4m] { padding: 16px; }
}

@media (max-width: 991px) {
    .ann-body--split .ann-list[b-srqurrrs4m] { width: 240px; }
}

/* ── Comments ── */
.ann-comments[b-srqurrrs4m] {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.ann-comments-title[b-srqurrrs4m] {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 14px;
}

.ann-comments-empty[b-srqurrrs4m] {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 14px;
}

.ann-comment-list[b-srqurrrs4m] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

.ann-comment[b-srqurrrs4m] {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--surface);
}

.ann-comment-head[b-srqurrrs4m] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
}

.ann-comment-author[b-srqurrrs4m] { font-weight: 600; color: var(--text); }
.ann-comment-date[b-srqurrrs4m] { font-size: 11.5px; }

.ann-comment-actions[b-srqurrrs4m] {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

/* Comment edit button now uses the global .btn-comment-action (app.css). */

.ann-comment-body[b-srqurrrs4m] {
    font-size: 13.5px;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

.ann-comment-edit[b-srqurrrs4m] { display: flex; flex-direction: column; }
.ann-comment-edit-actions[b-srqurrrs4m] { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

.ann-comment-new[b-srqurrrs4m] {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* editor + its (sibling) toolbar both span full width */
}
.ann-comment-new > button[b-srqurrrs4m] { align-self: flex-end; margin-top: 8px; }   /* right-aligned, spaced below the editor */

/* ── Follow (subscribe) button ── */
.ann-sub-btn[b-srqurrrs4m] { margin-left: auto; }
.ann-sub-btn--on[b-srqurrrs4m] {
    border-color: var(--accent);
    color: var(--accent);
}
/* /Components/Pages/Company/Clients.razor.rz.scp.css */
.cl-shell[b-3suaeyxjuu] {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 100%;
    position: relative;
    z-index: 1;
}

.cl-header[b-3suaeyxjuu] {
    flex-shrink: 0;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--border);
}

.cl-eyebrow[b-3suaeyxjuu] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--muted);
}

.cl-title[b-3suaeyxjuu] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: var(--text);
    margin: 2px 0 0;
}

.cl-state[b-3suaeyxjuu] {
    padding: 40px;
    text-align: center;
    color: var(--muted);
}

/* ── Master-detail layout ── */
.cl-layout[b-3suaeyxjuu] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 320px 1fr;
}

/* Left: client list */
.cl-clients[b-3suaeyxjuu] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--border);
}

.cl-clients-toolbar[b-3suaeyxjuu] {
    display: flex;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.cl-search[b-3suaeyxjuu] {
    flex: 1;
    min-width: 0;
    padding: 8px 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 13px;
}

    .cl-search[b-3suaeyxjuu]::placeholder { color: var(--muted); opacity: .7; }

.cl-client-list[b-3suaeyxjuu] {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.cl-client-row[b-3suaeyxjuu] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .12s;
}

    .cl-client-row:hover[b-3suaeyxjuu] { background: color-mix(in srgb, var(--accent) 6%, transparent); }

.cl-active[b-3suaeyxjuu] {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    box-shadow: inset 3px 0 0 var(--accent);
}

.cl-client-main[b-3suaeyxjuu] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl-client-name[b-3suaeyxjuu] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.cl-client-sub[b-3suaeyxjuu] {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 3px;
}

.cl-inactive-text[b-3suaeyxjuu] { color: var(--muted); text-decoration: line-through; }

/* Right: detail */
.cl-detail[b-3suaeyxjuu] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

.cl-detail-head[b-3suaeyxjuu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.cl-detail-name[b-3suaeyxjuu] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--text);
}

.cl-detail-sub[b-3suaeyxjuu] {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.cl-detail-actions[b-3suaeyxjuu] { display: flex; gap: 8px; flex-shrink: 0; }

.cl-cols[b-3suaeyxjuu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px 24px;
}

.cl-card[b-3suaeyxjuu] {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    overflow: hidden;
}

.cl-card-head[b-3suaeyxjuu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.cl-card-title[b-3suaeyxjuu] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.cl-rows[b-3suaeyxjuu] { display: flex; flex-direction: column; }

.cl-row[b-3suaeyxjuu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
}

    .cl-row:last-child[b-3suaeyxjuu] { border-bottom: none; }

.cl-row-off[b-3suaeyxjuu] { opacity: .55; }

.cl-row-main[b-3suaeyxjuu] { min-width: 0; }

.cl-row-name[b-3suaeyxjuu] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--text);
}

.cl-row-sub[b-3suaeyxjuu] {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-row-actions[b-3suaeyxjuu] { display: flex; gap: 6px; flex-shrink: 0; }

.cl-empty[b-3suaeyxjuu] {
    padding: 20px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

/* ── Pills ── */
.cl-pill[b-3suaeyxjuu] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid;
}

.cl-pill-off[b-3suaeyxjuu] {
    color: var(--muted);
    border-color: var(--border);
    background: color-mix(in srgb, var(--muted) 10%, transparent);
}

/* ── Buttons ── */
.cl-btn-new[b-3suaeyxjuu] {
    padding: 7px 14px;
    background: var(--accent);
    border: none;
    border-radius: 4px;
    color: #000;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

    .cl-btn-new:hover[b-3suaeyxjuu] { opacity: .85; }

.cl-btn-ghost[b-3suaeyxjuu],
.cl-btn-mini[b-3suaeyxjuu] {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.cl-btn-ghost[b-3suaeyxjuu] { padding: 6px 14px; font-size: 11px; }
.cl-btn-mini[b-3suaeyxjuu] { padding: 4px 9px; font-size: 10px; }

    .cl-btn-ghost:hover[b-3suaeyxjuu],
    .cl-btn-mini:hover[b-3suaeyxjuu] { border-color: var(--accent); color: var(--accent); }

/* ── Modal ── */
.cl-modal-overlay[b-3suaeyxjuu] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 24px;
}

.cl-modal[b-3suaeyxjuu] {
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 26px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.cl-modal-title[b-3suaeyxjuu] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
}

.cl-modal-sub[b-3suaeyxjuu] {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
    margin-bottom: 16px;
}

.cl-modal-error[b-3suaeyxjuu] {
    background: rgba(192, 88, 74, .1);
    border: 1px solid rgba(192, 88, 74, .25);
    border-left: 3px solid var(--danger);
    color: var(--danger);
    padding: 10px 12px;
    font-size: 13px;
    margin: 14px 0;
}

.cl-field[b-3suaeyxjuu] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 14px;
}

.cl-field-label[b-3suaeyxjuu] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.cl-field-hint[b-3suaeyxjuu] {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
}

.cl-input[b-3suaeyxjuu] {
    padding: 9px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 13px;
}

    .cl-input:focus[b-3suaeyxjuu] { outline: none; border-color: var(--accent); }

/* Assign list */
.cl-assign-list[b-3suaeyxjuu] {
    margin-top: 8px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.cl-assign-row[b-3suaeyxjuu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

    .cl-assign-row:last-child[b-3suaeyxjuu] { border-bottom: none; }
    .cl-assign-row:hover[b-3suaeyxjuu] { background: color-mix(in srgb, var(--accent) 6%, transparent); }

    .cl-assign-row input[type="checkbox"][b-3suaeyxjuu] {
        width: 15px;
        height: 15px;
        cursor: pointer;
        accent-color: var(--accent);
        flex-shrink: 0;
    }

.cl-assign-name[b-3suaeyxjuu] { font-size: 13px; color: var(--text); }

.cl-assign-email[b-3suaeyxjuu] {
    font-size: 11.5px;
    color: var(--muted);
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-modal-actions[b-3suaeyxjuu] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.cl-btn-cancel[b-3suaeyxjuu] {
    padding: 9px 20px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

    .cl-btn-cancel:hover:not(:disabled)[b-3suaeyxjuu] { border-color: var(--accent); }
    .cl-btn-cancel:disabled[b-3suaeyxjuu] { opacity: .5; cursor: default; }

.cl-btn-save[b-3suaeyxjuu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 24px;
    background: var(--accent);
    border: none;
    color: #000;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .15s;
}

    .cl-btn-save:hover:not(:disabled)[b-3suaeyxjuu] { opacity: .85; }
    .cl-btn-save:disabled[b-3suaeyxjuu] { opacity: .5; cursor: default; }

@media (max-width: 900px) {
    .cl-layout[b-3suaeyxjuu] { grid-template-columns: 1fr; }
    .cl-clients[b-3suaeyxjuu] { border-right: none; border-bottom: 1px solid var(--border); max-height: 40vh; }
    .cl-cols[b-3suaeyxjuu] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Company/Organogram.razor.rz.scp.css */
/* ── Shell ────────────────────────────────────────────────────────────────── */

.org-shell[b-07jo7qdv58] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 40px 48px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.org-header[b-07jo7qdv58] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
    position: relative;
    flex-shrink: 0;
}

    .org-header[b-07jo7qdv58]::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 40px;
        height: 1px;
        background: var(--accent);
    }

.org-eyebrow[b-07jo7qdv58] {
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.org-title[b-07jo7qdv58] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

/* ── Body ─────────────────────────────────────────────────────────────────── */

.org-body[b-07jo7qdv58] {
    flex: 1;
    display: flex;
    gap: 0;
    min-height: 0;
    position: relative;
}

.org-state[b-07jo7qdv58] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Canvas (scrollable tree area) ───────────────────────────────────────── */

.org-canvas[b-07jo7qdv58] {
    flex: 1;
    overflow: auto;
    padding: 24px 0 40px;
    transition: width .2s;
}

/* ── Tree layout ──────────────────────────────────────────────────────────── */

.org-tree[b-07jo7qdv58] {
    display: flex;
    gap: 40px;
    justify-content: flex-start;
    align-items: flex-start;
    padding-right: 40px;
}

/* Node wrapper: node box + its children below */
.org-node-wrap[b-07jo7qdv58] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
}

/* Connector from parent to children row */
.org-node-wrap > .org-children[b-07jo7qdv58] {
    position: relative;
    display: flex;
    gap: 24px;
    padding-top: 28px;
    margin-top: 0;
}

/* Vertical line from node down */
.org-node-wrap:has(.org-children)[b-07jo7qdv58]::after {
    content: '';
    position: absolute;
    top: 96px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 28px;
    background: var(--muted);
    opacity: .45;
}

/* Horizontal line across children */
.org-children[b-07jo7qdv58]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--muted);
    opacity: .45;
}

/* Vertical connectors from horizontal line down to each child */
.org-node-wrap > .org-children > .org-node-wrap[b-07jo7qdv58]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 28px;
    background: var(--muted);
    opacity: .45;
}

/* ── Node box ─────────────────────────────────────────────────────────────── */

.org-node[b-07jo7qdv58] {
    width: 196px;
    min-height: 72px;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color .15s, background .15s;
    position: relative;
    z-index: 1;
}

    .org-node:hover[b-07jo7qdv58] {
        border-color: var(--accent);
        background: var(--hover, rgba(255,255,255,.04));
    }

    .org-node--selected[b-07jo7qdv58] {
        border-color: var(--accent);
        background: var(--hover, rgba(255,255,255,.06));
    }

        .org-node--selected[b-07jo7qdv58]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--accent);
        }

    .org-node--empty[b-07jo7qdv58] {
        opacity: .55;
    }

.org-node-name[b-07jo7qdv58] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1.2;
}

.org-node-meta[b-07jo7qdv58] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.org-node-manager[b-07jo7qdv58] {
    font-size: 11px;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-node-count[b-07jo7qdv58] {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: .05em;
}

    .org-node-count--empty[b-07jo7qdv58] {
        font-style: italic;
    }

/* ── Side panel ───────────────────────────────────────────────────────────── */

.org-panel[b-07jo7qdv58] {
    width: 340px;
    flex-shrink: 0;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--surface);
    animation: slideIn-b-07jo7qdv58 .15s ease;
}

@keyframes slideIn-b-07jo7qdv58 {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.org-panel-header[b-07jo7qdv58] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 8px;
}

.org-panel-eyebrow[b-07jo7qdv58] {
    font-size: 9px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.org-panel-title[b-07jo7qdv58] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

.org-panel-description[b-07jo7qdv58] {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
    line-height: 1.5;
}

.org-panel-close[b-07jo7qdv58] {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    transition: color .15s;
    flex-shrink: 0;
}

    .org-panel-close:hover[b-07jo7qdv58] { color: var(--text); }

.org-panel-empty[b-07jo7qdv58] {
    padding: 24px 20px;
    font-size: 13px;
    color: var(--muted);
}

/* ── Panel sections ───────────────────────────────────────────────────────── */

.org-panel-section[b-07jo7qdv58] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .org-panel-section:last-child[b-07jo7qdv58] { border-bottom: none; }

.org-panel-section-label[b-07jo7qdv58] {
    font-size: 9px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
}

/* ── Person cards ─────────────────────────────────────────────────────────── */

.org-person[b-07jo7qdv58] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.org-person-avatar[b-07jo7qdv58] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--border);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .05em;
    flex-shrink: 0;
    overflow: hidden;
}

    .org-person-avatar img[b-07jo7qdv58] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 50%;
    }

.org-person--manager .org-person-avatar[b-07jo7qdv58],
.org-person-avatar--manager[b-07jo7qdv58] {
    background: var(--accent);
    color: #fff;
    width: 48px;
    height: 48px;
    font-size: 16px;
}

.org-person-info[b-07jo7qdv58] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.org-person-name[b-07jo7qdv58] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-person-role[b-07jo7qdv58] {
    font-size: 11px;
    color: var(--accent);
    opacity: .8;
}

.org-person-email[b-07jo7qdv58] {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Sub-departments list in panel ───────────────────────────────────────── */

.org-subdepts[b-07jo7qdv58] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.org-subdept[b-07jo7qdv58] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color .12s;
    font-size: 13px;
    color: var(--text);
}

    .org-subdept:hover[b-07jo7qdv58] { border-color: var(--accent); }

.org-subdept-name[b-07jo7qdv58] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.org-subdept-count[b-07jo7qdv58] {
    font-size: 11px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 1px 7px;
}
/* /Components/Pages/Company/ProjectRegister.razor.rz.scp.css */
/* Body fills the shell below the header/tabs; children scroll internally. */
.pr-body[b-mdz7pf9o1u] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Short/resized viewports: the fixed top bar + header/tabs leave so little height that the internal-
   scroll panes collapse the table to an unusable sliver (and the global short-viewport rule sets
   .fs-pg-shell to auto height, which makes these flex:1 children shrink toward zero). Switch to natural
   sizing so the whole page scrolls (via .layout-main) beneath the fixed top bar and the full table is
   reachable. Horizontal scrolling of a wide table still happens inside its own wrapper. */
@media (max-height: 600px) {
    .pr-body[b-mdz7pf9o1u] { flex: 0 0 auto; overflow: visible; }
    .reg-content[b-mdz7pf9o1u] { flex: 0 0 auto; overflow-y: visible; }
    .reg-table-wrap[b-mdz7pf9o1u] { flex: 0 0 auto; }
}

/* ── Padded, scrollable content (list / settings) ── */
.reg-content[b-mdz7pf9o1u] {
    /* Fill .pr-body (a flex column) so the flex:1 table wrapper inside gets real height — without this
       .reg-content only sizes to its content and the table collapses to an unusable sliver of scroll. */
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 28px 48px 24px;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.reg-toolbar[b-mdz7pf9o1u] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.docs-search[b-mdz7pf9o1u] {
    flex: 1 1 320px;
    max-width: 460px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    padding: 7px 12px;
    outline: none;
    transition: border-color .15s;
    border-radius: 6px;
}
    .docs-search:focus[b-mdz7pf9o1u] { border-color: var(--accent); }

.reg-new-btn[b-mdz7pf9o1u] {
    margin-left: auto;
    padding: 7px 18px;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
    .reg-new-btn:hover[b-mdz7pf9o1u] { background: var(--accent); color: var(--bg); }

/* Light mode: the outline style (amber text on a light background) is too faint, so make the button
   a solid amber fill with dark text for a clear call-to-action. */
[data-theme="light"] .reg-new-btn[b-mdz7pf9o1u] {
    background: var(--accent);
    border-color: var(--accent);
    color: #1a1a1a;
    font-weight: 600;
}
    [data-theme="light"] .reg-new-btn:hover[b-mdz7pf9o1u] { background: var(--accent2); border-color: var(--accent2); color: #1a1a1a; }

.docs-state[b-mdz7pf9o1u] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.docs-error[b-mdz7pf9o1u] { color: var(--danger); }
.docs-empty-center[b-mdz7pf9o1u] { flex: 1; flex-direction: column; gap: 12px; opacity: .35; }
.docs-empty-label[b-mdz7pf9o1u] { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }

/* ── Table ── */
.reg-table-wrap[b-mdz7pf9o1u] { overflow-x: auto; flex: 1; }

.reg-table[b-mdz7pf9o1u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    /* Global table-heading format — matches .rep-table th in app.css. */
    .reg-table th[b-mdz7pf9o1u] {
        font-size: 11px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
        text-align: left;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

    .reg-table td[b-mdz7pf9o1u] {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }

.reg-table-row[b-mdz7pf9o1u] { cursor: pointer; transition: background .1s; }
    .reg-table-row:hover[b-mdz7pf9o1u] { background: var(--surface); }
    .reg-table-row:last-child td[b-mdz7pf9o1u] { border-bottom: none; }

.reg-row-inactive[b-mdz7pf9o1u] { opacity: .55; }
.reg-actions-cell[b-mdz7pf9o1u] { text-align: right; white-space: nowrap; }
.reg-btn-xs[b-mdz7pf9o1u] { padding: 3px 10px !important; margin-left: 6px; }

.reg-cell-main[b-mdz7pf9o1u] { color: var(--text); }
.reg-cell-muted[b-mdz7pf9o1u] { color: var(--muted); font-size: 11px; }
.reg-cell-date[b-mdz7pf9o1u] { color: var(--muted); font-size: 11px; white-space: nowrap; }
/* Identifier cells (project #, sales part #, doc #) — plain bold text, no badge block. */
.reg-cell-id[b-mdz7pf9o1u] { color: var(--text); font-weight: 700; white-space: nowrap; }

/* ── Badges / tags ── */
.reg-project-badge[b-mdz7pf9o1u] {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow Condensed', monospace;
    font-size: 11px;
    letter-spacing: .06em;
    margin: 2px 2px 2px 0;
    white-space: nowrap;
}
    .reg-project-badge.reg-badge-lg[b-mdz7pf9o1u] { font-size: 16px; font-weight: 600; padding: 3px 10px; color: var(--text); }
    .reg-badge-sm[b-mdz7pf9o1u] { font-size: 10px; padding: 1px 5px; }
/* Clickable "Uses Projects" badge — navigates to the linked project. */
button.reg-badge-link[b-mdz7pf9o1u] {
    cursor: pointer;
    background: none;
    transition: color .12s, border-color .12s;
}
    button.reg-badge-link:hover[b-mdz7pf9o1u] { color: var(--accent); border-color: var(--accent); }

.reg-part-tag[b-mdz7pf9o1u] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 11px;
    margin: 2px 2px 2px 0;
    white-space: nowrap;
}
.reg-part-tag-removable[b-mdz7pf9o1u] { padding-right: 4px; }
.reg-tag-remove[b-mdz7pf9o1u] {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 14px; padding: 0 2px; line-height: 1; transition: color .1s;
}
    .reg-tag-remove:hover[b-mdz7pf9o1u] { color: var(--danger); }

.reg-status-badge[b-mdz7pf9o1u] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}
.reg-status-badge.st-future[b-mdz7pf9o1u]      { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.reg-status-badge.st-selected[b-mdz7pf9o1u]    { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
.reg-status-badge.st-development[b-mdz7pf9o1u] { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.reg-status-badge.st-handover[b-mdz7pf9o1u]    { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.reg-status-badge.st-production[b-mdz7pf9o1u]  { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.reg-status-badge.st-onhold[b-mdz7pf9o1u]      { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.reg-status-badge.st-departmental[b-mdz7pf9o1u]{ background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }

/* ── Detail / form (full page) ── */
.reg-detail[b-mdz7pf9o1u] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.reg-detail-header[b-mdz7pf9o1u] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 48px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.reg-back-btn[b-mdz7pf9o1u] {
    background: none; border: none; color: var(--muted);
    font-family: 'Barlow', sans-serif; font-size: 11px; letter-spacing: .1em;
    cursor: pointer; padding: 4px 0; transition: color .15s;
}
    .reg-back-btn:hover[b-mdz7pf9o1u] { color: var(--accent); }

.reg-detail-title[b-mdz7pf9o1u] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reg-detail-actions[b-mdz7pf9o1u] { display: flex; gap: 10px; align-items: center; }

.reg-detail-single[b-mdz7pf9o1u] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 32px 48px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.reg-view-row[b-mdz7pf9o1u] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 16px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.reg-view-label[b-mdz7pf9o1u] { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.reg-view-value[b-mdz7pf9o1u] { font-size: 13px; color: var(--text); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; line-height: 1.5; }

/* ── Buttons ── */
.reg-edit-btn[b-mdz7pf9o1u], .reg-save-btn[b-mdz7pf9o1u] {
    padding: 8px 22px;
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--bg);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 72px;
    justify-content: center;
    transition: opacity .15s;
}
    .reg-edit-btn:hover[b-mdz7pf9o1u], .reg-save-btn:hover:not(:disabled)[b-mdz7pf9o1u] { opacity: .85; }
    .reg-save-btn:disabled[b-mdz7pf9o1u] { opacity: .5; cursor: default; }

.reg-cancel-btn[b-mdz7pf9o1u] {
    padding: 8px 18px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: border-color .15s, color .15s;
}
    .reg-cancel-btn:hover[b-mdz7pf9o1u] { border-color: var(--accent); color: var(--accent); }

/* ── Inline form (products) ── */
.reg-form[b-mdz7pf9o1u] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px 28px;
    margin-bottom: 24px;
    flex-shrink: 0;
}
.reg-form-title[b-mdz7pf9o1u] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 18px;
}
.reg-form-error[b-mdz7pf9o1u] {
    font-size: 12px;
    color: var(--danger);
    margin-bottom: 14px;
    padding: 8px 12px;
    border: 1px solid var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border-radius: 6px;
}

.reg-form-row[b-mdz7pf9o1u] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px 16px;
    align-items: start;
    margin-bottom: 14px;
}
.reg-form-label[b-mdz7pf9o1u] { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 8px; }
.reg-required[b-mdz7pf9o1u] { color: var(--accent); }

.reg-form-input[b-mdz7pf9o1u], .reg-form-textarea[b-mdz7pf9o1u] {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 8px 12px;
    outline: none;
    transition: border-color .15s;
    border-radius: 6px;
    appearance: none;
    -webkit-appearance: none;
}
    .reg-form-input:focus[b-mdz7pf9o1u], .reg-form-textarea:focus[b-mdz7pf9o1u] { border-color: var(--accent); }
.reg-form-textarea[b-mdz7pf9o1u] { resize: vertical; min-height: 72px; }
.reg-status-select[b-mdz7pf9o1u] { max-width: 260px; }

.reg-used-check-list[b-mdz7pf9o1u] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 150px;
    overflow-y: auto;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.reg-check-label[b-mdz7pf9o1u] { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; white-space: nowrap; }
.reg-check-all[b-mdz7pf9o1u] { width: 100%; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.reg-check-empty[b-mdz7pf9o1u] { font-size: 11px; color: var(--muted); font-style: italic; }

.reg-tag-area[b-mdz7pf9o1u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.reg-tag-input[b-mdz7pf9o1u] {
    background: none; border: none; outline: none; color: var(--text);
    font-family: 'Barlow', sans-serif; font-size: 12px; flex: 1; min-width: 120px; padding: 2px 4px;
}
.reg-add-tag-btn[b-mdz7pf9o1u] {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    border-radius: 4px;
    transition: color .1s, border-color .1s;
    flex-shrink: 0;
}
    .reg-add-tag-btn:hover[b-mdz7pf9o1u] { color: var(--accent); border-color: var(--accent); }

/* Sales-part (product) picker in the project form */
.reg-part-picker[b-mdz7pf9o1u] { display: flex; flex-direction: column; gap: 8px; }
.reg-part-filter[b-mdz7pf9o1u] { max-width: 320px; }
.reg-part-selected[b-mdz7pf9o1u] { margin-top: 2px; }

/* Searchable sales-part dropdown (combobox) */
.reg-combo[b-mdz7pf9o1u] { position: relative; max-width: 320px; }
.reg-combo-results[b-mdz7pf9o1u] {
    list-style: none;
    margin: 4px 0 0;
    padding: 4px;
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
    .reg-combo-results li[b-mdz7pf9o1u] { list-style: none; }
.reg-combo-option[b-mdz7pf9o1u] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 7px 8px;
    border-radius: 4px;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}
    .reg-combo-option:hover[b-mdz7pf9o1u] { background: var(--bg); }
.reg-combo-old[b-mdz7pf9o1u] { color: var(--muted); font-size: 12px; white-space: nowrap; }
.reg-combo-empty[b-mdz7pf9o1u] { padding: 8px; color: var(--muted); font-size: 12px; }

/* ── Table / Gallery view toggle ── */
.reg-view-toggle[b-mdz7pf9o1u] {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.reg-view-btn[b-mdz7pf9o1u] {
    background: none;
    border: none;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    transition: background .12s, color .12s;
}
    .reg-view-btn:not(:last-child)[b-mdz7pf9o1u] { border-right: 1px solid var(--border); }
    .reg-view-btn:hover[b-mdz7pf9o1u] { color: var(--accent); }
    .reg-view-btn.active[b-mdz7pf9o1u] { background: var(--accent); color: var(--bg); }

/* ── Gallery view (projects + products) ── */
.reg-gallery[b-mdz7pf9o1u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    padding: 4px 0 8px;
}
.reg-gallery-card[b-mdz7pf9o1u] {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: var(--surface);
    transition: border-color .12s, transform .12s;
}
    .reg-gallery-card:hover[b-mdz7pf9o1u] { border-color: var(--accent); transform: translateY(-2px); }
    .reg-gallery-card.reg-row-inactive[b-mdz7pf9o1u] { opacity: .55; }
.reg-gallery-img-wrap[b-mdz7pf9o1u] {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.reg-gallery-img[b-mdz7pf9o1u] { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg); }
.reg-gallery-status[b-mdz7pf9o1u] { position: absolute; top: 8px; right: 8px; }
.reg-gallery-caption[b-mdz7pf9o1u] {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Image preview + upload in the project detail / product form */
.reg-img-preview[b-mdz7pf9o1u] {
    width: 180px;
    height: 135px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    display: block;
}
.reg-img-actions[b-mdz7pf9o1u] { margin-top: 8px; }

/* A project's or part's details, laid out like a person's profile: the image on the left and the details in a
   box beside it, so a handful of short fields no longer take a full-width row each. */
.rec-summary[b-mdz7pf9o1u] {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    max-width: 1100px;
}

.rec-summary-image[b-mdz7pf9o1u] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.rec-summary-img[b-mdz7pf9o1u] {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    display: block;
}

.rec-summary-grid[b-mdz7pf9o1u] {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 10px 16px;
    align-items: baseline;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.rec-summary-label[b-mdz7pf9o1u] {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.rec-summary-value[b-mdz7pf9o1u] {
    min-width: 0;
    font-size: 14px;
    color: var(--text);
    overflow-wrap: break-word;
}

/* A description keeps its line breaks. */
.rec-summary-text[b-mdz7pf9o1u] { white-space: pre-line; }

@media (max-width: 576px) {
    .rec-summary[b-mdz7pf9o1u] { flex-direction: column; align-items: stretch; gap: 16px; }
    .rec-summary-img[b-mdz7pf9o1u] { width: 100%; height: 200px; }
    .rec-summary-grid[b-mdz7pf9o1u] { grid-template-columns: 1fr; gap: 2px 0; }
    .rec-summary-value[b-mdz7pf9o1u] { margin-bottom: 8px; }
}

.reg-form-actions[b-mdz7pf9o1u] { display: flex; gap: 10px; margin-top: 18px; }

/* Documents list inside the project detail view */
.pr-doc-section[b-mdz7pf9o1u] { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.pr-doc-head[b-mdz7pf9o1u] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

/* Search + "Group by type" above the project's documents table. A row of its own rather than part of
   .pr-doc-head, which is a space-between row holding the title and the Add button — dropping controls into
   the middle of it would push those two apart. Wraps so the search keeps its own line on a phone, where
   .docs-search (flex: 1 1 320px) takes the full width and the toggle falls underneath.
   The toggle itself uses the global .toggle-* classes from app.css; nothing new is defined for it. */
.pr-doc-tools[b-mdz7pf9o1u] { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }

/* Type heading inside the grouped documents table. Matches .doc-group-hdr on the Documents page, which is
   scoped to that page and so cannot be reused from here. */
.pr-doc-group-hdr td[b-mdz7pf9o1u] {
    background: var(--surface);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
}

.pr-doc-title[b-mdz7pf9o1u] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
}

.reg-settings-hint[b-mdz7pf9o1u] {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 18px;
    max-width: 740px;
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
.dash-shell[b-jg12dotodm] {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── Header ── */
.dash-header[b-jg12dotodm] {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 36px 48px 24px;
  border-bottom: 1px solid var(--border);
  position: relative;
  gap: 20px;
}

  .dash-header[b-jg12dotodm]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 48px;
    width: 40px;
    height: 1px;
    background: var(--accent);
  }

.dash-eyebrow[b-jg12dotodm] {
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.dash-title[b-jg12dotodm] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

/* ── Edit layout button ── */

.btn-edit-layout[b-jg12dotodm] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    flex-shrink: 0;
}

    .btn-edit-layout:hover[b-jg12dotodm] { border-color: var(--accent); color: var(--accent); }

    .btn-edit-layout--active[b-jg12dotodm] {
        border-color: var(--accent);
        color: var(--accent);
        background: rgba(240,165,0,.08);
    }

/* ── Body ── */

.dash-body[b-jg12dotodm] {
}

.dash-loading[b-jg12dotodm] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

/* ── Empty state ── */

.dash-empty[b-jg12dotodm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    text-align: center;
    opacity: .5;
}

.dash-empty-icon[b-jg12dotodm] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 56px;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 14px;
}

.dash-empty-label[b-jg12dotodm] {
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

.dash-empty-hint[b-jg12dotodm] {
    font-size: 13px;
    color: var(--muted);
}

    .dash-empty-hint a[b-jg12dotodm] {
        color: var(--accent);
        text-decoration: none;
    }

        .dash-empty-hint a:hover[b-jg12dotodm] { text-decoration: underline; }

/* ── Widget grid ── */

.dash-grid[b-jg12dotodm] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

/* ── Edit mode widget wrapper ── */

.dash-widget-wrap[b-jg12dotodm] {
    display: flex;
    flex-direction: column;
    position: relative;
}

    .dash-widget-wrap--dragging[b-jg12dotodm] {
        opacity: 0.35;
    }

    .dash-widget-wrap--target[b-jg12dotodm]::after {
        content: '';
        position: absolute;
        inset: 0;
        border: 2px solid var(--accent);
        background: rgba(240,165,0,.09);
        pointer-events: none;
        z-index: 10;
    }

.dash-widget-drag-area[b-jg12dotodm] {
    position: absolute;
    inset: 0;
    z-index: 5;
    cursor: grab;
    user-select: none;
    background: rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
}

    .dash-widget-drag-area:active[b-jg12dotodm] { cursor: grabbing; }

.dash-widget-edit-bar[b-jg12dotodm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    flex-shrink: 0;
}
/* /Components/Pages/Documentation/Documents.razor.rz.scp.css */
/* Document list: status chip, clickable project badge, and last-updated by-line. */
.doc-status[b-7y27ipofxh] {
    display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px;
    border-radius: 10px; white-space: nowrap; border: 1px solid transparent;
}
.doc-status--approved[b-7y27ipofxh] { color: var(--success); border-color: var(--success); }
.doc-status--approved-activity[b-7y27ipofxh] { color: var(--accent); border-color: var(--accent); }
.doc-status--requested[b-7y27ipofxh] { color: var(--accent); border-color: var(--accent); }
.doc-status--review[b-7y27ipofxh] { color: var(--accent); border-color: var(--accent); }
.doc-status--draft[b-7y27ipofxh] { color: var(--muted); border-color: var(--border); }
.doc-status--none[b-7y27ipofxh] { color: var(--muted); }
.doc-proj-link[b-7y27ipofxh] { text-decoration: none; cursor: pointer; }
    .doc-proj-link:hover[b-7y27ipofxh] { text-decoration: underline; }
.doc-updatedby[b-7y27ipofxh] { font-size: 11px; color: var(--muted); margin-top: 2px; }
/* Small explanatory line under a form control (e.g. the doc-type subscribers picker). */
.reg-form-hint[b-7y27ipofxh] { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* Body fills the shell below the header/tabs; children scroll internally. */
.pr-body[b-7y27ipofxh] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Padded, scrollable content (list) ── */
.reg-content[b-7y27ipofxh] {
    flex: 1;                 /* fill the tab body so tall content scrolls here instead of being clipped */
    display: flex;
    flex-direction: column;
    padding: 28px 48px 24px;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.reg-toolbar[b-7y27ipofxh] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-shrink: 0;
    /* Wrap on narrow viewports so the right-aligned "+ Add New" button drops to the next line
       instead of being pushed off the right edge and clipped. */
    flex-wrap: wrap;
}

.docs-search[b-7y27ipofxh] {
    flex: 1 1 320px;
    max-width: 460px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    padding: 7px 12px;
    outline: none;
    transition: border-color .15s;
    border-radius: 6px;
}
    .docs-search:focus[b-7y27ipofxh] { border-color: var(--accent); }

.reg-filter-select[b-7y27ipofxh] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 6px;
    outline: none;
    max-width: 240px;
}
    .reg-filter-select:focus[b-7y27ipofxh] { border-color: var(--accent); }

.reg-new-btn[b-7y27ipofxh] {
    margin-left: auto;
    padding: 7px 18px;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
    .reg-new-btn:hover[b-7y27ipofxh] { background: var(--accent); color: var(--bg); }

.doc-filter-banner[b-7y27ipofxh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 16px;
}

.docs-state[b-7y27ipofxh] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.docs-error[b-7y27ipofxh] { color: var(--danger); }
.docs-empty-center[b-7y27ipofxh] { flex: 1; flex-direction: column; gap: 12px; opacity: .35; }
.docs-empty-label[b-7y27ipofxh] { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }

/* ── Table ── */
.reg-table-wrap[b-7y27ipofxh] { overflow-x: auto; flex: 1; }

.reg-table[b-7y27ipofxh] { width: 100%; border-collapse: collapse; font-size: 12px; }
    /* Global table-heading format — matches .rep-table th in app.css. */
    .reg-table th[b-7y27ipofxh] {
        font-size: 11px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
        text-align: left;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }
    .reg-table td[b-7y27ipofxh] {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }
.reg-table-row[b-7y27ipofxh] { cursor: pointer; transition: background .1s; }
    .reg-table-row:hover[b-7y27ipofxh] { background: var(--surface); }
    .reg-table-row.active[b-7y27ipofxh] { background: var(--surface); box-shadow: inset 2px 0 0 var(--accent); }
/* Download = green (built on the global .btn-accent so it matches the yellow buttons' shape/size),
   with a larger arrow glyph. Open keeps the global amber .btn-accent look. */
/* Open + Download: both green outline (override the yellow btn-accent-outline base).
   Green stays legible in light mode where the thin amber outline washed out. */
.doc-dl-btn[b-7y27ipofxh], .doc-open-btn[b-7y27ipofxh] { color: var(--success); border-color: var(--success); }
    .doc-dl-btn:hover:not(:disabled)[b-7y27ipofxh], .doc-open-btn:hover:not(:disabled)[b-7y27ipofxh] { background: var(--success); color: var(--bg); }
.doc-dl-btn[b-7y27ipofxh] { font-size: 18px; line-height: 1; }
    .reg-table-row:last-child td[b-7y27ipofxh] { border-bottom: none; }

.reg-actions-cell[b-7y27ipofxh] { text-align: right; white-space: nowrap; }
.reg-btn-xs[b-7y27ipofxh] { padding: 3px 10px !important; margin-left: 6px; }

/* Open/Download actions sit in the leftmost column (before Doc #), stacked vertically. */
.reg-table th.doc-num-col[b-7y27ipofxh], .reg-table td.doc-num-col[b-7y27ipofxh] { padding-right: 6px; }
.doc-act-cell[b-7y27ipofxh] { white-space: nowrap; padding-right: 6px; vertical-align: middle; }
    .doc-act-cell .reg-btn-xs[b-7y27ipofxh] {
        display: block;
        width: 100%;
        margin: 0 0 4px 0;
        text-align: center;
    }
    .doc-act-cell .reg-btn-xs:last-child[b-7y27ipofxh] { margin-bottom: 0; }

.reg-cell-main[b-7y27ipofxh] { color: var(--text); }
.reg-cell-muted[b-7y27ipofxh] { color: var(--muted); font-size: 11px; }
/* Identifier cells (Doc #) — plain bold text at the normal table size (no badge block).
   min-width just stops the column collapsing awkwardly; the nowrap number itself (~90px, e.g.
   "MD00000123-1") sets the real width, so this never truncates. */
.reg-cell-id[b-7y27ipofxh] { color: var(--text); font-weight: 700; white-space: nowrap; min-width: 90px; }
.reg-cell-date[b-7y27ipofxh] { color: var(--muted); font-size: 11px; white-space: nowrap; }

.doc-files-yes[b-7y27ipofxh] { color: var(--accent); font-size: 11px; }

/* Group-by-set list */
.doc-group-hdr td[b-7y27ipofxh] {
    background: var(--surface);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
}
.doc-group-count[b-7y27ipofxh] { color: var(--muted); font-size: 10px; letter-spacing: .12em; margin-left: 8px; }

/* ── Badges / tags ── */
.reg-project-badge[b-7y27ipofxh] {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow Condensed', monospace;
    font-size: 11px;
    letter-spacing: .06em;
    margin: 2px 2px 2px 0;
    white-space: nowrap;
}
    .reg-project-badge.reg-badge-lg[b-7y27ipofxh] { font-size: 16px; font-weight: 600; padding: 3px 10px; color: var(--text); }
    .reg-badge-sm[b-7y27ipofxh] { font-size: 10px; padding: 1px 5px; }

.reg-part-tag[b-7y27ipofxh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 11px;
    margin: 2px 2px 2px 0;
    white-space: nowrap;
}

    /* A tag for a part opens the part's own page. */
    a.reg-part-tag[b-7y27ipofxh] { text-decoration: none; }
    a.reg-part-tag:hover[b-7y27ipofxh] { border-color: var(--accent); }
.reg-tag-remove[b-7y27ipofxh] {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 14px; padding: 0 2px; line-height: 1; transition: color .1s;
}
    .reg-tag-remove:hover[b-7y27ipofxh] { color: var(--danger); }

/* ── Detail / form (full page) ── */
.reg-detail[b-7y27ipofxh] { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

.reg-detail-header[b-7y27ipofxh] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 48px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.reg-back-btn[b-7y27ipofxh] {
    background: none; border: none; color: var(--muted);
    font-family: 'Barlow', sans-serif; font-size: 11px; letter-spacing: .1em;
    cursor: pointer; padding: 4px 0; transition: color .15s;
}
    .reg-back-btn:hover[b-7y27ipofxh] { color: var(--accent); }

.reg-detail-title[b-7y27ipofxh] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reg-detail-actions[b-7y27ipofxh] { display: flex; gap: 10px; align-items: center; }

.reg-detail-single[b-7y27ipofxh] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 48px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.reg-view-row[b-7y27ipofxh] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 16px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.reg-view-label[b-7y27ipofxh] { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.reg-view-value[b-7y27ipofxh] { font-size: 13px; color: var(--text); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; line-height: 1.5; }

/* ── Doc sub-tabs (attachments/details/…) ── */
.reg-doc-tabs[b-7y27ipofxh] {
    display: flex;
    gap: 4px;
    padding: 0 48px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.reg-doc-tab[b-7y27ipofxh] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 12px 16px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
    .reg-doc-tab:hover[b-7y27ipofxh] { color: var(--text); }
    .reg-doc-tab.active[b-7y27ipofxh] { color: var(--accent); border-bottom-color: var(--accent); }

/* ── DEV-SW-38: reference-documents add form + row actions ── */
.ref-add-form[b-7y27ipofxh] {
    padding-bottom: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.ref-row-actions[b-7y27ipofxh] {
    white-space: nowrap;
    text-align: right;
}
.ref-row-actions .doc-icon-btn[b-7y27ipofxh] { margin-left: 6px; }
.ref-type-picker[b-7y27ipofxh] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ref-type-picker .reg-form-input[b-7y27ipofxh] { flex: 1 1 auto; min-width: 160px; }
.ref-type-picker .reg-cancel-btn[b-7y27ipofxh] { flex: 0 0 auto; }

/* ── Buttons ── */
.reg-edit-btn[b-7y27ipofxh], .reg-save-btn[b-7y27ipofxh] {
    padding: 8px 22px;
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--bg);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 72px;
    justify-content: center;
    transition: opacity .15s;
}
    .reg-edit-btn:hover[b-7y27ipofxh], .reg-save-btn:hover:not(:disabled)[b-7y27ipofxh] { opacity: .85; }
    .reg-save-btn:disabled[b-7y27ipofxh] { opacity: .5; cursor: default; }

.reg-cancel-btn[b-7y27ipofxh] {
    padding: 8px 18px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: border-color .15s, color .15s;
}
    .reg-cancel-btn:hover[b-7y27ipofxh] { border-color: var(--accent); color: var(--accent); }
.doc-danger-btn:hover[b-7y27ipofxh] { border-color: var(--danger); color: var(--danger); }

/* ── Inline form (doc types) ── */
.reg-form[b-7y27ipofxh] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px 28px;
    margin-bottom: 24px;
    flex-shrink: 0;
}
.reg-form-title[b-7y27ipofxh] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 18px;
}
.reg-form-error[b-7y27ipofxh] {
    font-size: 12px;
    color: var(--danger);
    margin-bottom: 14px;
    padding: 8px 12px;
    border: 1px solid var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border-radius: 6px;
}

.reg-form-row[b-7y27ipofxh] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px 16px;
    align-items: start;
    margin-bottom: 14px;
}
.reg-form-label[b-7y27ipofxh] { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 8px; }
.reg-required[b-7y27ipofxh] { color: var(--accent); }

.reg-form-input[b-7y27ipofxh], .reg-form-textarea[b-7y27ipofxh] {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 8px 12px;
    outline: none;
    transition: border-color .15s;
    border-radius: 6px;
    appearance: none;
    -webkit-appearance: none;
}
    .reg-form-input:focus[b-7y27ipofxh], .reg-form-textarea:focus[b-7y27ipofxh] { border-color: var(--accent); }
.reg-form-textarea[b-7y27ipofxh] { resize: vertical; min-height: 72px; }

.reg-used-check-list[b-7y27ipofxh] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 170px;
    overflow-y: auto;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.reg-check-label[b-7y27ipofxh] { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; white-space: nowrap; }
.reg-check-all[b-7y27ipofxh] { width: 100%; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.reg-check-empty[b-7y27ipofxh] { font-size: 11px; color: var(--muted); font-style: italic; }
.reg-check-hint[b-7y27ipofxh] { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

.reg-tag-area[b-7y27ipofxh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.reg-part-picker[b-7y27ipofxh] { display: flex; flex-direction: column; gap: 8px; }

/* The add-a-part box above a document's Parts list: its own width in the tab's controls row. */
.doc-part-add[b-7y27ipofxh] { flex: 1 1 360px; max-width: 460px; }
.reg-part-filter[b-7y27ipofxh] { max-width: 320px; }

.reg-form-actions[b-7y27ipofxh] { display: flex; gap: 10px; margin-top: 18px; }

.doc-sig-opts[b-7y27ipofxh] { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 8px; }

/* ── Document group member editor ── */
.doc-member-hint[b-7y27ipofxh] { font-size: 11px; color: var(--muted); line-height: 1.5; margin-bottom: 4px; }
.doc-member-hint code[b-7y27ipofxh] { font-family: 'Barlow Condensed', monospace; background: var(--bg); padding: 0 4px; border-radius: 3px; }
.doc-member-table[b-7y27ipofxh] { width: 100%; border-collapse: collapse; font-size: 12px; }
    /* Global table-heading format — matches .rep-table th (compact padding kept for this dense table). */
    .doc-member-table th[b-7y27ipofxh] {
        font-size: 11px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
        text-align: left;
        padding: 4px 8px;
        white-space: nowrap;
    }
    .doc-member-table td[b-7y27ipofxh] { padding: 4px 8px; vertical-align: middle; }
    .doc-member-table td:first-child[b-7y27ipofxh] { width: 42%; }
.doc-member-center[b-7y27ipofxh] { text-align: center; }
.doc-member-order[b-7y27ipofxh] { white-space: nowrap; }
.doc-member-order button[b-7y27ipofxh] { font-size: 13px; padding: 0 4px; }
.doc-member-order button:disabled[b-7y27ipofxh] { opacity: .3; cursor: default; }
.doc-member-flag[b-7y27ipofxh] {
    display: inline-block;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 4px;
}

/* ── Overflow menu (⋮) ── */
.doc-menu-wrap[b-7y27ipofxh] { position: relative; }
/* Invisible full-screen catcher so clicking anywhere outside an open dropdown closes it.
   Sits just below the dropdown (z-index 20) but above the page content. */
.doc-menu-backdrop[b-7y27ipofxh] { position: fixed; inset: 0; z-index: 19; }
.doc-icon-btn[b-7y27ipofxh] {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    width: 30px; height: 30px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    text-decoration: none;
    transition: color .1s, border-color .1s;
}
    .doc-icon-btn:hover[b-7y27ipofxh] { color: var(--accent); border-color: var(--accent); }
.doc-menu-dropdown[b-7y27ipofxh] {
    position: absolute;
    right: 0; top: 34px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    z-index: 20;
    min-width: 150px;
    padding: 4px;
}
.doc-menu-item[b-7y27ipofxh] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
}
    .doc-menu-item:hover[b-7y27ipofxh] { background: var(--bg); }
.doc-menu-danger[b-7y27ipofxh] { color: var(--danger); }

/* ── Attachments + preview layout ── */
.doc-view-layout[b-7y27ipofxh] {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 0;
    overflow: hidden;
}
.doc-attach-col[b-7y27ipofxh] {
    /* Preview opens at ~30%, so attachments take ~70% by default; drag the handle to resize. */
    flex: 0 0 auto;
    width: 70%;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    padding: 20px 24px 20px 48px;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
/* When the preview is collapsed the attachments fill the row (override any dragged inline width). */
.doc-attach-col--full[b-7y27ipofxh] {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
}

/* Documents-list column of the list+preview split (mirrors .doc-attach-col but sits inside the padded
   .reg-content, so it needs no left padding of its own). */
.doc-list-col[b-7y27ipofxh] {
    /* Shrinkable (min-width:0) so, when space is tight, the column narrows and the table scrolls
       horizontally inside it — rather than pushing the preview pane off-screen. */
    flex: 0 1 auto;
    width: 70%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
    padding-right: 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* When the preview panel is open the list column is narrow, so tighten the inter-column gaps to fit
   more columns before the overflow-x scroll fallback engages. Roomy gaps return when the preview is
   closed (the column has the --full class then). Plain class-based — no container-type, which breaks
   the column's flex growth in Chromium and collapses the table. */
.doc-list-col:not(.doc-attach-col--full) .reg-table th[b-7y27ipofxh],
.doc-list-col:not(.doc-attach-col--full) .reg-table td[b-7y27ipofxh] {
    padding-left: 6px;
    padding-right: 6px;
}
/* When the preview is collapsed, the list fills the row — drop the gap it kept for the preview. */
.doc-list-col.doc-attach-col--full[b-7y27ipofxh] { padding-right: 0; }

/* The documents list keeps the normal page margins (like the attachments list inside a document): the
   preview pane / collapsed rail sits at the standard right margin rather than bleeding to the screen
   edge, so the list defaults to the same width as the in-document attachments list. */
/* Documents list keeps the preview on the right at every width (never stacks); the preview stays visible
   and the table scrolls horizontally inside the (shrinking) list column when the screen is narrow. */
.reg-content--docs .doc-view-layout[b-7y27ipofxh] { flex-direction: row; overflow: hidden; }
.reg-content--docs .doc-preview-col[b-7y27ipofxh] { min-width: 300px; }
/* Keep the split's controls in their side-by-side form at all widths for the list. */
.reg-content--docs .doc-resize-handle[b-7y27ipofxh] { display: block; }
.reg-content--docs .doc-preview-rail[b-7y27ipofxh] { width: 20px; flex-direction: column; padding: 0; border-left: 1px solid var(--border); }
.reg-content--docs .doc-preview-rail-text[b-7y27ipofxh] { writing-mode: vertical-rl; }

/* ── Resize handle ── */
.doc-resize-handle[b-7y27ipofxh] {
    width: 8px;
    flex-shrink: 0;
    background: var(--border);
    cursor: col-resize;
    position: relative;
    transition: background .15s;
}
    /* centre grip so it's obviously draggable */
    .doc-resize-handle[b-7y27ipofxh]::before {
        content: '⋮';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        line-height: 1;
        color: var(--muted);
        pointer-events: none;
    }
    /* wider invisible hit area */
    .doc-resize-handle[b-7y27ipofxh]::after {
        content: '';
        position: absolute;
        inset: 0 -5px;
    }
    .doc-resize-handle:hover[b-7y27ipofxh] { background: var(--accent); }

.doc-preview-col[b-7y27ipofxh] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}
.doc-preview-head[b-7y27ipofxh] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
    .doc-preview-head .doc-preview-name[b-7y27ipofxh] { flex: 1; }
.doc-preview-content[b-7y27ipofxh] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}
/* Collapse arrow shown in the open preview's header */
.doc-preview-collapse[b-7y27ipofxh] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    transition: color .12s, border-color .12s;
}
    .doc-preview-collapse:hover[b-7y27ipofxh] { color: var(--accent); border-color: var(--accent); }

/* Collapsed state — a vertical bar on the right edge that reopens the preview */
.doc-preview-rail[b-7y27ipofxh] {
    flex-shrink: 0;
    width: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--surface);
    border: none;
    border-left: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    transition: color .12s, background .12s;
}
    .doc-preview-rail:hover[b-7y27ipofxh] { color: var(--accent); background: var(--bg); }
.doc-preview-rail-arrow[b-7y27ipofxh] { font-size: 13px; line-height: 1; }
.doc-preview-rail-text[b-7y27ipofxh] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.doc-attach-table-wrap[b-7y27ipofxh] { overflow-x: auto; }
.doc-attach-table[b-7y27ipofxh] { width: 100%; border-collapse: collapse; font-size: 12px; }
    /* Typography matches the app's standard table header (.rep-table th in app.css): 11px Barlow,
       uppercase, .08em, muted. Only the padding stays tighter than the standard 10px/14px — this
       table carries nine columns and the wider gutters push it into a horizontal scroll. */
    .doc-attach-table th[b-7y27ipofxh] {
        font-size: 11px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
        text-align: left;
        padding: 8px 8px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }
    .doc-attach-table td[b-7y27ipofxh] { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.doc-attach-grouphdr td[b-7y27ipofxh] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface);
    padding: 6px 8px;
}

/* A revision with an approved version collapses to just that final version — the header toggles it. */
.doc-attach-grouphdr--toggle td[b-7y27ipofxh] { cursor: pointer; }
.doc-attach-grouphdr--toggle:hover td[b-7y27ipofxh] { background: var(--surface2); color: var(--text); }

.doc-rev-chevron[b-7y27ipofxh] {
    display: inline-block;
    margin-right: 6px;
    font-size: 13px;
    line-height: 1;
    color: var(--muted);
    transition: transform .15s ease;
}

.doc-rev-chevron.open[b-7y27ipofxh] { transform: rotate(90deg); }

.doc-rev-label[b-7y27ipofxh] { color: inherit; }

.doc-rev-approved-tag[b-7y27ipofxh] {
    margin-left: 8px;
    padding: 1px 7px;
    border: 1px solid var(--success);
    border-radius: 10px;
    color: var(--success);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.doc-rev-hint[b-7y27ipofxh] {
    margin-left: 8px;
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
    font-style: italic;
}
.doc-attach-row[b-7y27ipofxh] { cursor: pointer; transition: background .1s; }
    .doc-attach-row:hover[b-7y27ipofxh] { background: var(--surface); }
    .doc-attach-row.active[b-7y27ipofxh] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.doc-attach-type[b-7y27ipofxh] { font-size: 11px; color: var(--text); }
.doc-attach-actions[b-7y27ipofxh] { white-space: nowrap; text-align: right; }

/* Type column: type label stacked above its download button. */
.doc-attach-dl[b-7y27ipofxh] { width: 1%; white-space: nowrap; }
    .doc-attach-dl .doc-attach-type[b-7y27ipofxh] { display: block; margin-bottom: 4px; }
.doc-dl-btns[b-7y27ipofxh] { display: flex; gap: 4px; align-items: center; }

.doc-mini-btn[b-7y27ipofxh] {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 4px;
    transition: color .1s, border-color .1s;
}
    .doc-mini-btn:hover:not(:disabled)[b-7y27ipofxh] { color: var(--accent); border-color: var(--accent); }
    .doc-mini-btn:disabled[b-7y27ipofxh] { opacity: .5; cursor: default; }
.doc-mini-btn.doc-approve:hover:not(:disabled)[b-7y27ipofxh] { color: #15803d; border-color: #15803d; }
.doc-mini-btn.doc-danger:hover:not(:disabled)[b-7y27ipofxh] { color: var(--danger); border-color: var(--danger); }

.doc-approved-tag[b-7y27ipofxh] { color: #15803d; font-size: 11px; font-weight: 600; white-space: nowrap; }
.doc-reverted-tag[b-7y27ipofxh] { color: var(--accent); font-size: 11px; font-weight: 600; white-space: nowrap; }

/* PDF review / annotation overlay in the attachments table */
.doc-no-reviews[b-7y27ipofxh] { color: var(--muted); font-size: 11px; }
.doc-review-chips[b-7y27ipofxh] { display: flex; flex-wrap: wrap; gap: 4px; }
.doc-review-chip[b-7y27ipofxh] {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; padding: 1px 6px; border-radius: 10px;
    border: 1px solid var(--border); white-space: nowrap; color: var(--muted);
}
    .doc-review-chip.done[b-7y27ipofxh] { color: #15803d; border-color: #15803d; }
.doc-cmt-unresolved[b-7y27ipofxh] { color: var(--danger); font-size: 11px; font-weight: 600; }
.doc-cmt-resolved[b-7y27ipofxh] { color: #15803d; font-size: 11px; }
.doc-closed-tag[b-7y27ipofxh] { color: var(--muted); font-size: 10px; white-space: nowrap; margin-right: 4px; }

/* ── Dev-matched attachments-table styling ── */
.doc-rev-it[b-7y27ipofxh] { font-weight: 600; white-space: nowrap; }
.doc-iter[b-7y27ipofxh] { color: var(--muted); white-space: nowrap; }

/* Inline revision editing in the attachments table. */
.doc-rev-cell[b-7y27ipofxh] { white-space: nowrap; }
.doc-rev-edit[b-7y27ipofxh] { display: inline-flex; align-items: center; gap: 4px; }
.doc-rev-input[b-7y27ipofxh] { width: 84px; padding: 2px 6px; font-size: 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); }
/* Small, quiet icon buttons (edit / save / cancel) that firm up on hover. */
.doc-rev-iconbtn[b-7y27ipofxh] {
    border: none; background: transparent; color: var(--muted); cursor: pointer;
    font-size: 12px; padding: 1px 4px; border-radius: 4px; line-height: 1;
}
    .doc-rev-iconbtn:hover[b-7y27ipofxh] { color: var(--text); background: var(--hover, rgba(127,127,127,.15)); }
.doc-rev-save[b-7y27ipofxh] { color: var(--success); }
.doc-rev-cancel[b-7y27ipofxh] { color: var(--muted); }
/* Up/down move controls in a revision group header — arrange revisions, latest at top. */
.doc-rev-move[b-7y27ipofxh] { display: inline-flex; gap: 1px; margin-right: 8px; vertical-align: middle; }
    .doc-rev-move .doc-rev-iconbtn[b-7y27ipofxh] { font-size: 10px; padding: 0 4px; }
    .doc-rev-move .doc-rev-iconbtn:disabled[b-7y27ipofxh] { opacity: .35; cursor: default; }
/* Marks the document's current (latest) revision. */
.doc-rev-latest-tag[b-7y27ipofxh] { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--success); white-space: nowrap; }
.doc-attach-uploaded .doc-attach-date[b-7y27ipofxh] { white-space: nowrap; }
.doc-attach-uploaded .doc-attach-uploadedby[b-7y27ipofxh] { font-size: 11px; color: var(--muted); margin-top: 2px; }

.doc-review-chip.done[b-7y27ipofxh] { color: #166534; background: color-mix(in srgb, #16a34a 16%, transparent); border-color: #16a34a; }
.doc-review-chip.pending[b-7y27ipofxh] { color: var(--muted); background: var(--surface); }

.doc-attach-comments[b-7y27ipofxh] { white-space: nowrap; font-size: 12px; }
.doc-cmt-breakdown[b-7y27ipofxh] { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.doc-cmt-closed[b-7y27ipofxh] { display: block; color: var(--muted); font-weight: 600; font-size: 12px; }
/* Note under the unresolved-comment count explaining why close-off is blocked. */
.doc-cmt-blockhint[b-7y27ipofxh] { display: block; color: var(--muted); font-size: 11px; font-style: italic; margin-top: 3px; white-space: normal; line-height: 1.3; }

/* Close-off greyed out while unresolved comments block it. */
.doc-close-blocked[b-7y27ipofxh], .doc-close-blocked:disabled[b-7y27ipofxh] {
    background: var(--bg);
    color: var(--muted);
    border-color: var(--border);
    opacity: .6;
    cursor: not-allowed;
}
.doc-approve-note[b-7y27ipofxh] { color: var(--muted); font-size: 11px; font-style: italic; white-space: normal; }

/* Expiry date highlight (the date value only): red = past expiry, yellow = expiring soon. */
.doc-exp-overdue[b-7y27ipofxh] { color: #b91c1c; font-weight: 700; }
.doc-exp-soon[b-7y27ipofxh] { background: #fef08a; color: #713f12; font-weight: 600; border-radius: 4px; padding: 1px 6px; }

/* On the Doc Types tab, let the table take its natural height so the whole tab scrolls (via
   .reg-content) instead of the table getting its own thin scroll strip when the edit form is open. */
.doc-types-table-wrap[b-7y27ipofxh] { flex: none; }

/* Standard templates section on the Doc Types tab. */
/* SW-184: per-document Permissions tab. */
.doc-perms-head[b-7y27ipofxh] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.doc-perm-person[b-7y27ipofxh] { background: var(--accent-soft, rgba(99,102,241,.12)); }

/* SW-184: document form — type dropdown + "request new type" button on one row. */
.doc-type-picker-row[b-7y27ipofxh] { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.doc-type-picker-row select[b-7y27ipofxh] { flex: 1; min-width: 180px; }
.doc-type-picker-ss[b-7y27ipofxh] { flex: 1; min-width: 180px; }

/* Searchable filter dropdowns in the toolbar (replace the old <select class="reg-filter-select">). */
.docs-filter-ss[b-7y27ipofxh] { width: 200px; flex: 0 0 auto; }

/* SW-184: doc-types table Access column — one level per line. */
.doc-access-lines[b-7y27ipofxh] { display: flex; flex-direction: column; gap: 2px; }
.doc-access-line[b-7y27ipofxh] { font-size: 12px; color: var(--muted); line-height: 1.4; }
.doc-access-lvl[b-7y27ipofxh] { font-weight: 600; color: var(--text); }

.doc-std-templates[b-7y27ipofxh] { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.doc-std-tmpl[b-7y27ipofxh] { display: inline-flex; align-items: center; gap: 2px; }
.doc-std-add[b-7y27ipofxh] { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
/* SW-184: per-template department editor + row actions. */
.doc-std-table[b-7y27ipofxh] { margin-top: 12px; }
/* The Follow column on the doc types table. Right-aligned and non-wrapping like the standard-templates
   table's action cell — the label swaps between "Follow" and "Following", and a column that resizes as
   people follow things makes the whole table jump. */
.doc-types-table-wrap .reg-cell-actions[b-7y27ipofxh] { white-space: nowrap; text-align: right; }

.doc-std-table .reg-cell-actions[b-7y27ipofxh] { white-space: nowrap; text-align: right; }
.doc-std-table .reg-cell-actions > *[b-7y27ipofxh] { margin-left: 4px; }
.doc-std-editor[b-7y27ipofxh] { margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2, rgba(127,127,127,.05)); }

/* Obsolete document badge. */
/* The document's type, first in the title bar's actions: a tinted pill in the theme's info colour, so it
   stands out from the buttons beside it in both themes. */
.doc-type-tag[b-7y27ipofxh] {
    display: inline-block;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--info);
    background: color-mix(in srgb, var(--info) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--info) 45%, transparent);
    border-radius: 999px;
    padding: 3px 12px;
    white-space: nowrap;
}

.doc-obsolete-badge[b-7y27ipofxh] {
    display: inline-block;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: #7c2d12;
    background: #fed7aa;
    border: 1px solid #fdba74;
    border-radius: 4px;
    padding: 2px 8px;
    margin-left: 8px;
}

/* Actions stacked one per line */
.doc-attach-actions-stack[b-7y27ipofxh] { white-space: nowrap; min-width: 130px; vertical-align: top; }
    .doc-attach-actions-stack .btn-sm[b-7y27ipofxh] { display: block; width: 100%; margin: 0 0 6px; text-align: center; }
    .doc-attach-actions-stack .btn-sm:last-child[b-7y27ipofxh] { margin-bottom: 0; }

/* Approval column */
/* On a DIV inside the cell, never on the <td> itself. display:flex takes a cell out of the
   table layout algorithm: it stops sizing with its column, and the border-bottom from the
   table's td rule draws across the collapsed box — a stray horizontal line in every row where
   the cell happens to be empty. */
.doc-attach-approve[b-7y27ipofxh] { white-space: nowrap; vertical-align: top; }
    .doc-attach-approve[b-7y27ipofxh] { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.doc-approvedby-name[b-7y27ipofxh] { font-size: 11px; color: var(--muted); white-space: normal; line-height: 1.3; }
.doc-approve-btn[b-7y27ipofxh], .doc-revert-btn[b-7y27ipofxh] {
    font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
/* Outline, not a solid block — fills on hover, matching the app's .btn-accent-outline convention.
   Uses var(--success) so it tracks light/dark instead of being a fixed green. */
.doc-approve-btn[b-7y27ipofxh] { background: transparent; color: var(--success); border-color: var(--success); }
    .doc-approve-btn:hover:not(:disabled)[b-7y27ipofxh] { background: var(--success); color: var(--bg); }
/* The documents-admin approve (may bypass the signature requirement) is deliberately distinct from
   the green signature-flow Approve — it uses the accent colour so it reads as a separate, privileged
   management action. */
.doc-approve-admin-btn[b-7y27ipofxh] { color: var(--accent); border-color: var(--accent); }
    .doc-approve-admin-btn:hover:not(:disabled)[b-7y27ipofxh] { background: var(--accent); color: var(--bg); }
/* Deliberately quiet — reverting an approval is a rare, corrective action, so it recedes next to
   Approve: clear background, muted text, hairline border. It only firms up on hover. */
.doc-revert-btn[b-7y27ipofxh] { background: transparent; color: var(--muted); border-color: var(--border); }
    .doc-revert-btn:hover:not(:disabled)[b-7y27ipofxh] { color: var(--text); border-color: var(--muted); }
    .doc-approve-btn:disabled[b-7y27ipofxh], .doc-revert-btn:disabled[b-7y27ipofxh] { opacity: .6; cursor: default; }

/* ── Pending approval requests (who was asked, by whom, when) ── */
.doc-approval-pending[b-7y27ipofxh] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 6px 8px; border: 1px dashed var(--border); border-radius: 6px;
    background: var(--surface-2, rgba(127, 127, 127, .06)); white-space: normal;
}
.doc-approval-pending-label[b-7y27ipofxh] { font-size: 11px; font-weight: 600; color: var(--muted); }
.doc-approval-pending-list[b-7y27ipofxh] { margin: 0; padding-left: 16px; font-size: 12px; color: var(--text); line-height: 1.4; }
.doc-approval-pending-meta[b-7y27ipofxh] { color: var(--muted); font-size: 11px; }
.doc-approval-cancel-btn[b-7y27ipofxh] {
    margin-top: 2px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 6px;
    background: transparent; color: var(--muted); border: 1px solid var(--border); cursor: pointer; white-space: nowrap;
}
    .doc-approval-cancel-btn:hover[b-7y27ipofxh] { color: var(--danger); border-color: var(--danger); }

/* ── Approval column: signature breakdown (who signed / what's missing) ── */
.doc-sig-summary[b-7y27ipofxh] { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; line-height: 1.4; }
.doc-sig-ok[b-7y27ipofxh]      { color: var(--success); font-weight: 600; }
.doc-sig-short[b-7y27ipofxh]   { color: var(--accent);  font-weight: 600; }
.doc-sig-list[b-7y27ipofxh]    { list-style: none; margin: 2px 0; padding: 0; }
.doc-sig-list li[b-7y27ipofxh] { display: block; color: var(--text); }

/* Light mode: the amber accent (#d49200) is far too low-contrast for 11px text on a white surface —
   darken it so the "missing signatures" detail is actually readable. Dark mode keeps the accent. */
[data-theme="light"] .doc-sig-short[b-7y27ipofxh] { color: #8a5000; }

/* The approval rules, under the column heading — small, plain, and never in the header's caps style. */
.doc-approve-req[b-7y27ipofxh] {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
    white-space: normal;
}

/* Row ⋮ menu column */
.doc-attach-menu[b-7y27ipofxh] { text-align: right; white-space: nowrap; vertical-align: top; }
.doc-menu-btn[b-7y27ipofxh] { font-size: 18px; line-height: 1; font-weight: 700; }

/* ── Request-review modal ── */
.pm-modal-backdrop[b-7y27ipofxh] {
    position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .45);
    display: flex; align-items: center; justify-content: center;
}
.pm-modal[b-7y27ipofxh] {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    width: min(460px, 92vw); max-height: 80vh; display: flex; flex-direction: column;
    padding: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}
.pm-modal-title[b-7y27ipofxh] { font-size: 16px; font-weight: 600; color: var(--text); }
.pm-modal-sub[b-7y27ipofxh] { font-size: 12px; color: var(--muted); margin: 4px 0 12px; }
.pm-modal-empty[b-7y27ipofxh] { color: var(--muted); font-size: 13px; padding: 12px 0; }
.pm-state[b-7y27ipofxh] { display: flex; justify-content: center; padding: 16px; }
.pm-reviewer-list[b-7y27ipofxh] { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.pm-reviewer-row[b-7y27ipofxh] {
    display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; cursor: pointer;
}
    .pm-reviewer-row:hover[b-7y27ipofxh] { background: var(--bg); }
.pm-reviewer-name[b-7y27ipofxh] { font-size: 13px; color: var(--text); }
.pm-reviewer-email[b-7y27ipofxh] { font-size: 11px; color: var(--muted); margin-left: auto; }
.pm-error[b-7y27ipofxh] { color: var(--danger); font-size: 12px; margin-top: 8px; }
.pm-modal-actions[b-7y27ipofxh] { display: flex; gap: 10px; margin-top: 16px; }

.doc-upload-row[b-7y27ipofxh] { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }

/* Upload button — yellow (accent) border so it stands out at the top of the tab. */
.doc-upload-btn[b-7y27ipofxh] {
    border: 1px solid var(--accent);
    color: var(--accent);
    font-weight: 600;
}
    .doc-upload-btn:hover[b-7y27ipofxh] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }

/* Preview panel */
.doc-preview-bar[b-7y27ipofxh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.doc-preview-name[b-7y27ipofxh] { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-preview-name-lg[b-7y27ipofxh] { font-size: 14px; color: var(--text); margin: 8px 0 4px; }
.doc-preview-frame[b-7y27ipofxh] { flex: 1; width: 100%; border: none; background: #fff; min-height: 0; }
.doc-preview-empty[b-7y27ipofxh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    padding: 24px;
    text-align: center;
}
.doc-preview-icon[b-7y27ipofxh] { font-size: 40px; opacity: .6; }

.doc-assoc-link[b-7y27ipofxh] { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; margin-right: 10px; }
    .doc-assoc-link:hover[b-7y27ipofxh] { color: var(--accent); }

/* ── History timeline ── */
.doc-history[b-7y27ipofxh] { list-style: none; margin: 0; padding: 0; }
.doc-history-item[b-7y27ipofxh] { display: flex; gap: 12px; padding: 0 0 18px; position: relative; }
    .doc-history-item:not(:last-child)[b-7y27ipofxh]::before {
        content: '';
        position: absolute;
        left: 4px; top: 14px; bottom: 0;
        width: 1px;
        background: var(--border);
    }
.doc-history-dot[b-7y27ipofxh] { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 4px; flex-shrink: 0; z-index: 1; }
.doc-history-body[b-7y27ipofxh] { flex: 1; min-width: 0; }
.doc-history-head[b-7y27ipofxh] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.doc-history-event[b-7y27ipofxh] { font-size: 13px; color: var(--text); font-weight: 600; }
.doc-history-date[b-7y27ipofxh] { font-size: 11px; color: var(--muted); white-space: nowrap; }
.doc-history-detail[b-7y27ipofxh] { font-size: 12px; color: var(--text); margin-top: 2px; }
.doc-history-actor[b-7y27ipofxh] { font-size: 11px; color: var(--muted); margin-top: 2px; }

@media (max-width: 1000px) {
    .doc-view-layout[b-7y27ipofxh] { flex-direction: column; overflow-y: auto; }
    /* Stack the panes (attachments view only); the drag handle only makes sense side-by-side.
       The documents list intentionally stays side-by-side at all widths (see .reg-content--docs). */
    .doc-attach-col[b-7y27ipofxh] { flex: none; width: 100% !important; max-width: 100%; padding-right: 0; border-bottom: 1px solid var(--border); }
    .doc-resize-handle[b-7y27ipofxh] { display: none; }
    .doc-preview-col[b-7y27ipofxh] { min-height: 420px; }
    /* Collapsed rail becomes a full-width bar along the bottom. */
    .doc-preview-rail[b-7y27ipofxh] {
        width: 100%;
        flex-direction: row;
        padding: 10px 0;
        border-left: none;
        border-top: 1px solid var(--border);
    }
    .doc-preview-rail-text[b-7y27ipofxh] { writing-mode: horizontal-tb; }
}

/* ── Document comments (discussion thread shown under Attachments) ── */
/* Comments now render in their own detail tab (inside .reg-detail-single, which
   supplies the standard 48px side margins), so no top separator is needed. */
.doc-comments[b-7y27ipofxh] {
    max-width: 900px;
}
.doc-comments-title[b-7y27ipofxh] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 12px;
}
.comments-thread[b-7y27ipofxh] { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.comment-item[b-7y27ipofxh] { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; }
.comment-header[b-7y27ipofxh] { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.comment-author[b-7y27ipofxh] { font-size: 12px; font-weight: 600; color: var(--text); }
.comment-time[b-7y27ipofxh] { font-size: 11px; color: var(--muted); }
/* .btn-comment-action is now a global style (app.css). */
.comment-body[b-7y27ipofxh] { font-size: 13px; color: var(--text); line-height: 1.5; }
    .comment-body p[b-7y27ipofxh] { margin: 0 0 4px; }
    .comment-body p:last-child[b-7y27ipofxh] { margin-bottom: 0; }
    .comment-body img[b-7y27ipofxh] { max-width: 100%; height: auto; }
.comment-edit-actions[b-7y27ipofxh] { display: flex; gap: 8px; margin-top: 8px; }
.comment-input-row[b-7y27ipofxh] { border-top: 1px solid var(--border); padding-top: 12px; }

/* Loader (page-scoped) — used by the list state and the comments thread. */
.spinner[b-7y27ipofxh] {
    width: 13px; height: 13px;
    border: 1.5px solid rgba(128,128,128,.35);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: doc-spin-b-7y27ipofxh .6s linear infinite;
    display: inline-block;
    vertical-align: middle;
}
.spinner-lg[b-7y27ipofxh] { width: 22px; height: 22px; border-width: 2px; }
@keyframes doc-spin-b-7y27ipofxh { to { transform: rotate(360deg); } }
/* /Components/Pages/Documentation/Handovers.razor.rz.scp.css */
/* SW-186 Handovers.
   NOTE: the .reg-* family is NOT global — it is defined independently inside ProjectRegister.razor.css
   and Documents.razor.css, and Blazor scoped CSS won't reach this component. So the subset this page
   uses is copied here verbatim, with the handover-specific .ho-* rules added at the bottom. */

/* Body fills the shell below the header; children scroll internally. */
.pr-body[b-u6u0cr6k3c] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.reg-content[b-u6u0cr6k3c] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 28px 48px 24px;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.reg-toolbar[b-u6u0cr6k3c] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.docs-search[b-u6u0cr6k3c] {
    flex: 1 1 320px;
    max-width: 460px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    padding: 7px 12px;
    outline: none;
    transition: border-color .15s;
    border-radius: 6px;
}
    .docs-search:focus[b-u6u0cr6k3c] { border-color: var(--accent); }

.reg-filter-select[b-u6u0cr6k3c] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 6px;
    outline: none;
    max-width: 240px;
}
    .reg-filter-select:focus[b-u6u0cr6k3c] { border-color: var(--accent); }

.reg-new-btn[b-u6u0cr6k3c] {
    margin-left: auto;
    padding: 7px 18px;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
    .reg-new-btn:hover[b-u6u0cr6k3c] { background: var(--accent); color: var(--bg); }

/* Light mode: the outline style is too faint, so use a solid amber fill. */
[data-theme="light"] .reg-new-btn[b-u6u0cr6k3c] {
    background: var(--accent);
    border-color: var(--accent);
    color: #1a1a1a;
    font-weight: 600;
}
    [data-theme="light"] .reg-new-btn:hover[b-u6u0cr6k3c] { background: var(--accent2); border-color: var(--accent2); color: #1a1a1a; }

.docs-state[b-u6u0cr6k3c] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.docs-error[b-u6u0cr6k3c] { color: var(--danger); }
.docs-empty-center[b-u6u0cr6k3c] { flex: 1; flex-direction: column; gap: 12px; opacity: .35; }
.docs-empty-label[b-u6u0cr6k3c] { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }

.spinner[b-u6u0cr6k3c] {
    width: 13px;
    height: 13px;
    border: 1.5px solid rgba(13,17,23,.3);
    border-top-color: var(--bg);
    border-radius: 50%;
    animation: spin-b-u6u0cr6k3c .6s linear infinite;
}
.spinner-lg[b-u6u0cr6k3c] {
    width: 22px;
    height: 22px;
    border-width: 2px;
    border-color: var(--border);
    border-top-color: var(--accent);
}
@keyframes spin-b-u6u0cr6k3c { to { transform: rotate(360deg); } }

/* ── Table ── */
.reg-table-wrap[b-u6u0cr6k3c] { overflow-x: auto; }

.reg-table[b-u6u0cr6k3c] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .reg-table th[b-u6u0cr6k3c] {
        font-size: 11px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
        text-align: left;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

    .reg-table td[b-u6u0cr6k3c] {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }

.reg-table-row[b-u6u0cr6k3c] { cursor: pointer; transition: background .1s; }
    .reg-table-row:hover[b-u6u0cr6k3c] { background: var(--surface); }
    .reg-table-row:last-child td[b-u6u0cr6k3c] { border-bottom: none; }

.reg-actions-cell[b-u6u0cr6k3c] { text-align: right; white-space: nowrap; }
.reg-btn-xs[b-u6u0cr6k3c] { padding: 3px 10px !important; margin-left: 6px; }

.reg-cell-main[b-u6u0cr6k3c] { color: var(--text); }
.reg-cell-muted[b-u6u0cr6k3c] { color: var(--muted); font-size: 11px; }
.reg-cell-date[b-u6u0cr6k3c] { color: var(--muted); font-size: 11px; white-space: nowrap; }
.reg-cell-id[b-u6u0cr6k3c] { color: var(--text); font-weight: 700; white-space: nowrap; }

/* ── Badges / tags ── */
.reg-project-badge[b-u6u0cr6k3c] {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow Condensed', monospace;
    font-size: 11px;
    letter-spacing: .06em;
    margin: 2px 2px 2px 0;
    white-space: nowrap;
}
    .reg-project-badge.reg-badge-lg[b-u6u0cr6k3c] { font-size: 16px; font-weight: 600; padding: 3px 10px; color: var(--text); }
    .reg-badge-sm[b-u6u0cr6k3c] { font-size: 10px; padding: 1px 5px; }

.reg-tag-remove[b-u6u0cr6k3c] {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 14px; padding: 0 2px; line-height: 1; transition: color .1s;
}
    .reg-tag-remove:hover[b-u6u0cr6k3c] { color: var(--danger); }

/* ── Detail header ── */
.reg-detail-header[b-u6u0cr6k3c] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    flex-shrink: 0;
}

.reg-back-btn[b-u6u0cr6k3c] {
    background: none; border: none; color: var(--muted);
    font-family: 'Barlow', sans-serif; font-size: 11px; letter-spacing: .1em;
    cursor: pointer; padding: 4px 0; transition: color .15s;
}
    .reg-back-btn:hover[b-u6u0cr6k3c] { color: var(--accent); }

.reg-detail-title[b-u6u0cr6k3c] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reg-detail-actions[b-u6u0cr6k3c] { display: flex; gap: 10px; align-items: center; }

/* ── Read-only view ── */
.reg-view-row[b-u6u0cr6k3c] {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 8px 16px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.reg-view-label[b-u6u0cr6k3c] { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.reg-view-value[b-u6u0cr6k3c] { font-size: 13px; color: var(--text); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; line-height: 1.5; }

/* Notes keep their line breaks and read as a paragraph, not a row of chips. */
.ho-view-notes[b-u6u0cr6k3c] { display: block; white-space: pre-wrap; }

.ho-view-meta[b-u6u0cr6k3c] {
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--muted);
}

/* ── Buttons ── */
.reg-edit-btn[b-u6u0cr6k3c],
.reg-save-btn[b-u6u0cr6k3c] {
    padding: 8px 22px;
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--bg);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 72px;
    justify-content: center;
    transition: opacity .15s;
}
    .reg-edit-btn:hover[b-u6u0cr6k3c], .reg-save-btn:hover:not(:disabled)[b-u6u0cr6k3c] { opacity: .85; }
    .reg-save-btn:disabled[b-u6u0cr6k3c] { opacity: .5; cursor: default; }

.reg-cancel-btn[b-u6u0cr6k3c] {
    padding: 8px 18px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: border-color .15s, color .15s;
}
    .reg-cancel-btn:hover[b-u6u0cr6k3c] { border-color: var(--accent); color: var(--accent); }

/* ── Form ── */
.reg-form-title[b-u6u0cr6k3c] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 12px;
}
.reg-form-error[b-u6u0cr6k3c] {
    font-size: 12px;
    color: var(--danger);
    margin-bottom: 14px;
    padding: 8px 12px;
    border: 1px solid var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border-radius: 6px;
}

.reg-form-row[b-u6u0cr6k3c] {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 10px 16px;
    align-items: start;
    margin-bottom: 14px;
}
.reg-form-label[b-u6u0cr6k3c] { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 8px; }
.reg-required[b-u6u0cr6k3c] { color: var(--accent); }

.reg-form-input[b-u6u0cr6k3c], .reg-form-textarea[b-u6u0cr6k3c] {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 8px 12px;
    outline: none;
    transition: border-color .15s;
    border-radius: 6px;
    appearance: none;
    -webkit-appearance: none;
}
    .reg-form-input:focus[b-u6u0cr6k3c], .reg-form-textarea:focus[b-u6u0cr6k3c] { border-color: var(--accent); }
.reg-form-textarea[b-u6u0cr6k3c] { resize: vertical; min-height: 72px; }

.reg-check-hint[b-u6u0cr6k3c] { font-size: 11px; color: var(--muted); margin-top: 6px; margin-bottom: 10px; line-height: 1.5; }
.reg-part-picker[b-u6u0cr6k3c] { display: flex; flex-direction: column; gap: 8px; }

/* ── Handover-specific ───────────────────────────────────────────────────── */

/* Read-only users get the whole form disabled rather than a separate view mode. */
.ho-fieldset[b-u6u0cr6k3c] { border: none; margin: 0; padding: 0; min-width: 0; }
    .ho-fieldset:disabled[b-u6u0cr6k3c] { opacity: .75; }

.ho-section[b-u6u0cr6k3c] {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.ho-tags[b-u6u0cr6k3c] { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 22px; }
.ho-tag-add[b-u6u0cr6k3c] { display: flex; gap: 8px; align-items: center; }

.ho-statement[b-u6u0cr6k3c] {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
    max-width: 720px;
    margin: 0 0 16px;
}

.ho-signoff[b-u6u0cr6k3c] { display: flex; flex-wrap: wrap; gap: 20px; }
.ho-signoff-box[b-u6u0cr6k3c] {
    flex: 1 1 260px;
    min-width: 240px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.ho-signoff-label[b-u6u0cr6k3c] {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}

.ho-sig-img[b-u6u0cr6k3c] { max-height: 56px; max-width: 100%; background: #fff; border-radius: 4px; padding: 2px; }
.ho-sig-text[b-u6u0cr6k3c] { font-family: 'Barlow Condensed', cursive; font-size: 15px; color: var(--text); }

/* Delete sits next to Save, so tint it on hover rather than colouring it permanently. */
.ho-danger-btn:hover[b-u6u0cr6k3c] { border-color: var(--danger) !important; color: var(--danger) !important; }
/* /Components/Pages/Feedback.razor.rz.scp.css */
.fb-shell[b-ustawlgrax] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Header ── */
.fb-header[b-ustawlgrax] {
    flex-shrink: 0;
    padding: 24px 24px 18px;
    border-bottom: 1px solid var(--border);
}

.fb-title[b-ustawlgrax] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

.fb-lead[b-ustawlgrax] {
    font-size: 13px;
    color: var(--muted);
    margin-top: 8px;
    max-width: 620px;
    line-height: 1.6;
}

/* ── Body ── */
.fb-body[b-ustawlgrax] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 24px 60px;
}

.fb-form[b-ustawlgrax] {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.fb-field[b-ustawlgrax] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fb-field-narrow[b-ustawlgrax] { max-width: 200px; }

/* Title: half the form width, so its length reads as a deliberate constraint rather than an
   invitation to keep typing. Full width below tablet, where a half column is unusably short. */
.fb-field-half[b-ustawlgrax] { max-width: 50%; }

@media (max-width: 991px) {
    .fb-field-half[b-ustawlgrax] { max-width: 100%; }
}

.fb-optional[b-ustawlgrax] {
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--muted);
    text-transform: none;
}

/* .fb-warn became the global .field-warn — see app.css, "Soft field limits". The only difference was
   that this one had no margin-top; the shared 4px reads better under the input anyway. */

.fb-label[b-ustawlgrax] {
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
}

.fb-input[b-ustawlgrax],
.fb-textarea[b-ustawlgrax] {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 10px 13px;
    outline: none;
    transition: border-color .15s;
}

    .fb-input:focus[b-ustawlgrax],
    .fb-textarea:focus[b-ustawlgrax] { border-color: var(--accent); }

    /* Over the title limit: now .field-input--warn, global in app.css ("Soft field limits"), so the
       outline looks the same here as on a ticket or a concession. */

.fb-textarea[b-ustawlgrax] {
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}

.fb-actions[b-ustawlgrax] { margin-top: 8px; }

.fb-hint[b-ustawlgrax] {
    font-size: 11px;
    color: var(--muted);
}

.fb-muted[b-ustawlgrax] { color: var(--muted); }

/* ── Attachments ── */
.fb-upload-btn[b-ustawlgrax] {
    display: inline-block;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .fb-upload-btn:hover[b-ustawlgrax] { border-color: var(--accent); color: var(--accent); }

.fb-attach-list[b-ustawlgrax] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.fb-attach-item[b-ustawlgrax] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text);
}

.fb-attach-name[b-ustawlgrax] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fb-attach-remove[b-ustawlgrax] {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
}

    .fb-attach-remove:hover[b-ustawlgrax] { color: var(--danger); }

/* ── Existing list ── */
.fb-list-header[b-ustawlgrax] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    max-width: 820px;
}

.fb-list-count[b-ustawlgrax] {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}

.fb-refresh[b-ustawlgrax] {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 12px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .fb-refresh:hover:not(:disabled)[b-ustawlgrax] { border-color: var(--accent); color: var(--accent); }
    .fb-refresh:disabled[b-ustawlgrax] { opacity: .5; cursor: default; }

.fb-table[b-ustawlgrax] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.fb-table th[b-ustawlgrax] {
    padding: 10px 14px;
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.fb-table td[b-ustawlgrax] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.fb-table tr:last-child td[b-ustawlgrax] { border-bottom: none; }

.fb-col-type[b-ustawlgrax]   { width: 90px; }
.fb-col-ref[b-ustawlgrax]    { width: 110px; }
.fb-col-status[b-ustawlgrax] { width: 120px; }
.fb-col-date[b-ustawlgrax]   { width: 110px; }

.fb-table .fb-muted[b-ustawlgrax] { color: var(--muted); font-size: 12px; }

.fb-type-badge[b-ustawlgrax] {
    display: inline-block;
    padding: 2px 9px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
}

    .fb-type-badge.is-bug[b-ustawlgrax] { color: var(--danger); border-color: var(--danger); }
    .fb-type-badge.is-feature[b-ustawlgrax] { color: var(--accent); border-color: var(--accent); }

.fb-status[b-ustawlgrax] {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Clickable rows open the detail window */
.fb-row[b-ustawlgrax] { cursor: pointer; transition: background .1s; }
.fb-row:hover[b-ustawlgrax] { background: var(--surface); }

/* List tab: make the table wrapper a bounded scroller so the global sticky
   `thead th` header stays pinned while scrolling. Scoped to the list tab so the
   form/success views keep normal block flow. */
.fb-body--list[b-ustawlgrax] { display: flex; flex-direction: column; }
.fb-body--list .fb-list-header[b-ustawlgrax] { flex-shrink: 0; }
.fb-body--list .data-table-wrap[b-ustawlgrax] { flex: 1; min-height: 0; }

/* ── Ticket detail window (JIRA-style) ── */
.fb-modal-backdrop[b-ustawlgrax] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1000;
}

.fb-modal[b-ustawlgrax] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    width: min(720px, calc(100vw - 48px));
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .4);
    overflow: hidden;
}

.fb-modal-header[b-ustawlgrax] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.fb-modal-head-left[b-ustawlgrax] { display: flex; align-items: center; gap: 10px; }

.fb-modal-ref[b-ustawlgrax] {
    font-size: 12px;
    letter-spacing: .1em;
    font-weight: 600;
    color: var(--muted);
}

.fb-modal-close[b-ustawlgrax] {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}

    .fb-modal-close:hover[b-ustawlgrax] { color: var(--text); }

.fb-modal-body[b-ustawlgrax] {
    overflow-y: auto;
    padding: 20px 22px 26px;
}

.fb-modal-title[b-ustawlgrax] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--text);
    margin-bottom: 16px;
}

.fb-modal-meta[b-ustawlgrax] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--text);
}

    .fb-modal-meta > div[b-ustawlgrax] { display: flex; flex-direction: column; gap: 3px; }

.fb-meta-label[b-ustawlgrax] {
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
}

.fb-modal-section-label[b-ustawlgrax] {
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 8px;
}

.fb-modal-desc[b-ustawlgrax] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 18px;
    word-wrap: break-word;
}

    .fb-modal-desc p[b-ustawlgrax] { margin: 0 0 8px; }
    .fb-modal-desc p:last-child[b-ustawlgrax] { margin-bottom: 0; }

.fb-attach-dl[b-ustawlgrax] {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 10px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .fb-attach-dl:hover[b-ustawlgrax] { border-color: var(--accent); color: var(--accent); }

/* ── States ── */
.fb-state[b-ustawlgrax] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    color: var(--muted);
    font-size: 13px;
}

.fb-error[b-ustawlgrax] {
    color: var(--danger);
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    line-height: 1.6;
}

/* ── Success ── */
.fb-success[b-ustawlgrax] {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.fb-success-icon[b-ustawlgrax] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 40px;
    line-height: 1;
    color: var(--accent);
}

.fb-success-title[b-ustawlgrax] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text);
}

.fb-success-text[b-ustawlgrax] {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
}

/* ── Spinner ── */
.spinner[b-ustawlgrax] {
    display: inline-block;
    vertical-align: middle;
    width: 13px;
    height: 13px;
    border: 1.5px solid rgba(13,17,23,.3);
    border-top-color: var(--bg);
    border-radius: 50%;
    animation: spin-b-ustawlgrax .6s linear infinite;
}

.spinner-lg[b-ustawlgrax] {
    width: 22px;
    height: 22px;
    border-width: 2px;
    border-color: var(--border);
    border-top-color: var(--accent);
}

@keyframes spin-b-ustawlgrax { to { transform: rotate(360deg); } }

/* Rich-text editors on the feedback form — keep the multiple sections compact. */
[b-ustawlgrax] .fb-rte .ql-editor {
    min-height: 90px;
}
/* /Components/Pages/Help/Help.razor.rz.scp.css */
/* Two-pane help layout. Reuses global fs-pg-shell / fs-pg-header / fs-pg-title. */

/* Keep the shell bounded to the viewport height. Without min-height:0 a flex item defaults to
   min-height:auto and grows to fit its content, so on a short window the nav expanded past the
   shell and its lower sections were clipped by .help-shell's overflow:hidden. Bounding it lets the
   nav (and content) panes scroll internally instead, keeping every section/topic reachable. */
.fs-pg-shell[b-yn2gymddqi] {
    min-height: 0;
}

.help-shell[b-yn2gymddqi] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}

/* ── Left: grouped, searchable nav ── */
.help-nav[b-yn2gymddqi] {
    flex: 0 0 260px;
    width: 260px;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 12px;
    border-right: 1px solid var(--border);
    background: var(--surface2);
}

.help-search[b-yn2gymddqi] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
}

.help-search:focus[b-yn2gymddqi] {
    outline: none;
    border-color: var(--accent);
}

/* Expand/collapse-all controls */
.help-expand-bar[b-yn2gymddqi] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 4px 6px;
}

.help-expand-btn[b-yn2gymddqi] {
    padding: 2px 4px;
    border: none;
    background: transparent;
    color: var(--accent);
    font-size: 0.74rem;
    cursor: pointer;
}

.help-expand-btn:hover[b-yn2gymddqi] {
    text-decoration: underline;
}

.help-expand-btn:disabled[b-yn2gymddqi] {
    color: var(--muted);
    cursor: default;
    text-decoration: none;
}

.help-expand-sep[b-yn2gymddqi] {
    color: var(--muted);
    font-size: 0.74rem;
}

/* Collapsible section heading */
.help-section-title[b-yn2gymddqi] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 8px 8px;
    margin: 2px 0 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.help-section-title:hover[b-yn2gymddqi] {
    background: var(--surface);
}

.help-section-chevron[b-yn2gymddqi] {
    flex: none;
    font-size: 1rem;
    line-height: 1;
    color: var(--muted);
    transition: transform 0.15s ease;
}

.help-section-title.open .help-section-chevron[b-yn2gymddqi] {
    transform: rotate(90deg);
}

.help-section-icon[b-yn2gymddqi] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.help-section-title.open .help-section-icon[b-yn2gymddqi],
.help-section-title:hover .help-section-icon[b-yn2gymddqi] {
    color: var(--accent);
}

.help-section-name[b-yn2gymddqi] {
    flex: 1 1 auto;
}

.help-section-count[b-yn2gymddqi] {
    flex: none;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
}

.help-section-title:hover .help-section-count[b-yn2gymddqi] {
    background: var(--bg);
}

.help-section-topics[b-yn2gymddqi] {
    margin: 2px 0 4px 8px;
    padding-left: 6px;
    border-left: 1px solid var(--border);
}

.help-topic[b-yn2gymddqi] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    margin: 1px 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.help-topic:hover[b-yn2gymddqi] {
    background: var(--surface);
}

.help-topic.active[b-yn2gymddqi] {
    background: var(--accent);
    color: #1a1a1a;
    font-weight: 600;
}

/* ── Right: selected topic ── */
.help-content[b-yn2gymddqi] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 28px 32px;
}

.help-topic-title[b-yn2gymddqi] {
    margin: 0 0 8px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
}

.help-intro[b-yn2gymddqi] {
    margin: 0 0 18px;
    color: var(--muted);
    line-height: 1.55;
    max-width: 70ch;
}

.help-video[b-yn2gymddqi] {
    display: block;
    width: 100%;
    max-width: 720px;
    margin: 0 0 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #000;
}

.help-video-soon[b-yn2gymddqi] {
    display: inline-block;
    margin: 0 0 22px;
    padding: 8px 14px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.85rem;
}

/* Screenshots — click to open full size in a new tab */
.help-images[b-yn2gymddqi] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 22px;
}

.help-image-link[b-yn2gymddqi] {
    display: block;
    max-width: 100%;
    line-height: 0;
}

.help-image[b-yn2gymddqi] {
    display: block;
    max-width: 100%;
    max-height: 420px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface2);
    transition: border-color 0.12s ease;
}

.help-image-link:hover .help-image[b-yn2gymddqi] {
    border-color: var(--accent);
}

.help-steps-label[b-yn2gymddqi] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 8px;
}

.help-steps[b-yn2gymddqi] {
    margin: 0 0 20px;
    padding-left: 22px;
    max-width: 70ch;
}

.help-steps li[b-yn2gymddqi] {
    margin: 0 0 8px;
    line-height: 1.5;
    color: var(--text);
}

.help-tips[b-yn2gymddqi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 70ch;
}

.help-tip[b-yn2gymddqi] {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface2);
    border-left: 3px solid var(--accent);
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.5;
}

.help-empty[b-yn2gymddqi] {
    color: var(--muted);
    font-size: 0.9rem;
    padding: 12px 6px;
}

.help-state[b-yn2gymddqi] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.help-error[b-yn2gymddqi] { color: var(--danger); }

/* ── Install app (PWA) ── */

.help-install-btn[b-yn2gymddqi] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.help-installed-chip[b-yn2gymddqi] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--success);
    border-radius: 12px;
    color: var(--success);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Fallback instructions modal (non-Chromium browsers) */
.help-modal-backdrop[b-yn2gymddqi] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.help-modal[b-yn2gymddqi] {
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

.help-modal-title[b-yn2gymddqi] {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.help-modal-text[b-yn2gymddqi] {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.help-modal-block[b-yn2gymddqi] { margin-bottom: 14px; }

.help-modal-h[b-yn2gymddqi] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}

.help-modal-block .help-steps[b-yn2gymddqi] { margin-bottom: 0; }
.help-modal-actions[b-yn2gymddqi] { justify-content: flex-end; margin-top: 18px; }

/* ── Admin edit mode (SW-182) — only rendered for holders of manage.help ── */

.help-edit-hint[b-yn2gymddqi] {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.help-topic-head[b-yn2gymddqi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* Small square tool buttons (reorder / rename / remove) */
.help-tool[b-yn2gymddqi] {
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.4;
    cursor: pointer;
}

.help-tool:hover:not(:disabled)[b-yn2gymddqi] { border-color: var(--accent); color: var(--accent); }
.help-tool:disabled[b-yn2gymddqi] { opacity: .5; cursor: default; }
.help-tool--danger:hover:not(:disabled)[b-yn2gymddqi] { border-color: var(--danger); color: var(--danger); }

.help-add-btn[b-yn2gymddqi] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    margin: 4px 0;
    border: 1px dashed var(--border);
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: 0.8rem;
    cursor: pointer;
}

.help-add-btn:hover:not(:disabled)[b-yn2gymddqi] { border-color: var(--accent); color: var(--accent); }
.help-add-btn:disabled[b-yn2gymddqi] { opacity: .5; cursor: default; }
.help-add-btn--section[b-yn2gymddqi] { margin-top: 10px; }

.help-sec-tools[b-yn2gymddqi],
.help-topic-tools[b-yn2gymddqi] {
    display: flex;
    gap: 4px;
    padding: 2px 8px 6px;
}

.help-topic-row[b-yn2gymddqi] { display: flex; align-items: center; gap: 4px; }
.help-topic-row .help-topic[b-yn2gymddqi] { flex: 1 1 auto; }
.help-topic-tools[b-yn2gymddqi] { padding: 0; }

.help-sec-edit[b-yn2gymddqi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    margin: 4px 0;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--surface);
}

/* Form controls — mirror the app's input styling */
.help-input[b-yn2gymddqi] {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 0.88rem;
}

.help-input:focus[b-yn2gymddqi] { outline: none; border-color: var(--accent); }

.help-textarea[b-yn2gymddqi] { min-height: 90px; resize: vertical; line-height: 1.5; }

.help-label[b-yn2gymddqi] {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 16px 0 6px;
}

.help-form[b-yn2gymddqi] { max-width: 70ch; }
.help-form .help-label:first-child[b-yn2gymddqi] { margin-top: 0; }

.help-list-row[b-yn2gymddqi] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.help-list-num[b-yn2gymddqi] {
    flex: none;
    width: 22px;
    text-align: right;
    color: var(--muted);
    font-size: 0.8rem;
}

.help-edit-actions[b-yn2gymddqi] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.help-form-actions[b-yn2gymddqi] { margin-top: 22px; }

/* Media manager */
.help-media-box[b-yn2gymddqi] {
    margin-top: 26px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface2);
    max-width: 70ch;
}

.help-media-row[b-yn2gymddqi] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.help-media-label[b-yn2gymddqi] { flex: 1 1 auto; font-size: 0.85rem; color: var(--muted); }
.help-media-label strong[b-yn2gymddqi] { color: var(--text); }

/* <InputFile> is hidden inside the label, so the label is the button */
.help-file-btn[b-yn2gymddqi] { cursor: pointer; }

.help-media-busy[b-yn2gymddqi] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--muted);
}

/* Screenshot tile: the remove button sits over the image in edit mode */
.help-image-wrap[b-yn2gymddqi] { position: relative; display: inline-block; line-height: 0; }

.help-image-del[b-yn2gymddqi] {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--surface);
}

/* ── Responsive: stack the panes on narrow screens ── */
@media (max-width: 768px) {
    .help-shell[b-yn2gymddqi] {
        flex-direction: column;
    }

    .help-nav[b-yn2gymddqi] {
        flex: none;
        width: auto;
        max-height: 42vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .help-content[b-yn2gymddqi] {
        padding: 18px 16px 26px;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ── Page layout ── */
.login-page[b-41bixtrxmc] {
    display: grid;
    grid-template-columns: 1fr 480px;
    min-height: 100vh;
}

/* ── Left branding panel ── */
.login-left[b-41bixtrxmc] {
    background: linear-gradient(160deg, #0d1117 0%, #1a2035 60%, #0f1a2e 100%);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: fadeUp .8s ease .1s forwards;
}

/* Diagonal accent stripe */
.login-left[b-41bixtrxmc]::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
    opacity: .6;
}

.login-left-inner[b-41bixtrxmc] {
    /* Match the logo's max width so the text below it lines up with the image. */
    max-width: 66%;
}

.brand-logo[b-41bixtrxmc] {
    /* Render at the image's natural size (never upscaled past it), but never wider
       than two-thirds of the branding section — scaling down with the section. */
    width: auto;
    height: auto;
    max-width: 66%;
    max-height: 70vh;
    margin-bottom: 40px;
    display: block;
}

.brand-divider[b-41bixtrxmc] {
    width: 48px;
    height: 3px;
    background: var(--accent);
    margin-bottom: 24px;
}

.brand-desc[b-41bixtrxmc] {
    font-family: 'Barlow', sans-serif;
    font-size: 16px;
    font-weight: 300;
    /* Fixed light tone — the branding panel is always dark, so this stays readable in
       both themes (brighter than the previous muted grey). */
    color: rgba(230, 237, 243, 0.9);
    line-height: 1.7;
    letter-spacing: .02em;
    margin-bottom: 48px;
}

.brand-stats[b-41bixtrxmc] {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

.brand-stat-value[b-41bixtrxmc] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .04em;
    line-height: 1;
    margin-bottom: 4px;
}

.brand-stat-label[b-41bixtrxmc] {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ── Right form panel ── */
.login-right[b-41bixtrxmc] {
    background: var(--surface);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 60px 48px;
    opacity: 0;
    animation: fadeUp .8s ease .25s forwards;
}

/* ── Card ── */
/* Fills the space above the bottom group and keeps the sign-in card centred. */
.login-right-main[b-41bixtrxmc] {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.login-card[b-41bixtrxmc] {
    width: 100%;
    max-width: 380px;
}

.login-card-header[b-41bixtrxmc] {
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.login-card-eyebrow[b-41bixtrxmc] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}

.login-card-title[b-41bixtrxmc] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1;
}

/* ── Fields ── */
.field[b-41bixtrxmc] {
    margin-bottom: 20px;
}

.field-label[b-41bixtrxmc] {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.field-input[b-41bixtrxmc] {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    padding: 12px 14px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
}

.field-input[b-41bixtrxmc]::placeholder {
    color: var(--muted);
    opacity: .5;
}

.field-input:focus[b-41bixtrxmc] {
    border-color: var(--border);
    border-left-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(240,165,0,.08);
}

.field-input.error[b-41bixtrxmc] {
    border-left-color: var(--danger);
}

.error-msg[b-41bixtrxmc] {
    margin-top: 6px;
    font-size: 12px;
    color: var(--danger);
    letter-spacing: .04em;
}

.global-error[b-41bixtrxmc] {
    background: rgba(192,88,74,.1);
    border: 1px solid rgba(192,88,74,.25);
    border-left: 3px solid var(--danger);
    color: var(--danger);
    padding: 12px 14px;
    font-size: 13px;
    margin-bottom: 20px;
}

/* Account-not-validated notice — a warning, distinct from a credentials error. */
.global-notice[b-41bixtrxmc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(214,158,46,.10);
    border: 1px solid rgba(214,158,46,.28);
    border-left: 3px solid #d69e2e;
    color: var(--text);
    padding: 12px 14px;
    font-size: 13px;
    margin-bottom: 20px;
}

.global-notice strong[b-41bixtrxmc] { font-size: 13px; }

.login-recheck[b-41bixtrxmc] {
    align-self: flex-start;
    margin-top: 6px;
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
}

    .login-recheck:hover:not(:disabled)[b-41bixtrxmc] { border-color: var(--accent); color: var(--accent); }
    .login-recheck:disabled[b-41bixtrxmc] { opacity: .6; cursor: default; }

.global-notice a[b-41bixtrxmc] { color: #d69e2e; font-weight: 600; }

/* ── Button ── */
.btn-submit[b-41bixtrxmc] {
    width: 100%;
    margin-top: 8px;
    padding: 14px;
    background: var(--accent);
    color: #0d1117;
    border: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background .2s, transform .1s;
}

.btn-submit:hover:not(:disabled)[b-41bixtrxmc] {
    background: var(--accent2);
}

.btn-submit:active:not(:disabled)[b-41bixtrxmc] {
    transform: translateY(1px);
}

.btn-submit:disabled[b-41bixtrxmc] {
    opacity: .5;
    cursor: not-allowed;
}

.spinner[b-41bixtrxmc] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0,0,0,.2);
    border-top-color: #0d1117;
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

/* ── Card footer ── */
.login-card-footer[b-41bixtrxmc] {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 12px;
    color: var(--muted);
}

.login-card-footer a[b-41bixtrxmc] {
    color: var(--muted);
    text-decoration: none;
    transition: color .2s;
}

.login-card-footer a:hover[b-41bixtrxmc] {
    color: var(--accent);
}

.footer-divider[b-41bixtrxmc] {
    color: var(--border);
}

/* ── Theme toggle ── */
.login-theme[b-41bixtrxmc] {
    display: flex;
    gap: 8px;
    justify-content: center;
    /* Clear of whatever ends the card above: the Microsoft button, Forgot password, or the Sign In
       button on the Shared access tab, which shows neither. */
    margin-top: 24px;
    width: 100%;
    max-width: 380px;
}

.login-theme-btn[b-41bixtrxmc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

    .login-theme-btn:hover[b-41bixtrxmc] { border-color: var(--accent); color: var(--accent); }

    .login-theme-btn.active[b-41bixtrxmc] {
        border-color: var(--accent);
        color: var(--accent);
        background: rgba(240, 165, 0, .08);
    }

/* ── Page footer ── */
.login-right-footer[b-41bixtrxmc] {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 380px;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .06em;
}

/* ── Success overlay ── */
.success-overlay[b-41bixtrxmc] {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: fadeUp .4s ease forwards;
}

.success-icon[b-41bixtrxmc] {
    font-size: 56px;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 20px;
}

.success-text[b-41bixtrxmc] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ── Session-limit (pick a session to revoke) modal ── */
.sl-overlay[b-41bixtrxmc] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 24px;
    animation: fadeUp .25s ease forwards;
}

.sl-modal[b-41bixtrxmc] {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.sl-title[b-41bixtrxmc] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text);
    margin-bottom: 8px;
}

.sl-sub[b-41bixtrxmc] {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 20px;
    line-height: 1.5;
}

.sl-list[b-41bixtrxmc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 22px;
}

.sl-item[b-41bixtrxmc] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.sl-item:hover[b-41bixtrxmc] { border-color: var(--accent); }

.sl-item.selected[b-41bixtrxmc] {
    border-color: var(--accent);
    background: rgba(240, 165, 0, .08);
}

.sl-item input[type="radio"][b-41bixtrxmc] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.sl-item-body[b-41bixtrxmc] { display: flex; flex-direction: column; gap: 3px; }

.sl-device[b-41bixtrxmc] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.sl-when[b-41bixtrxmc] {
    font-size: 12px;
    color: var(--muted);
}

.sl-actions[b-41bixtrxmc] {
    display: flex;
    gap: 12px;
}

.sl-actions .btn-submit[b-41bixtrxmc] { margin-top: 0; }

.sl-btn-cancel[b-41bixtrxmc] {
    flex: 0 0 auto;
    padding: 14px 20px;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.sl-btn-cancel:hover:not(:disabled)[b-41bixtrxmc] { border-color: var(--accent); }
.sl-btn-cancel:disabled[b-41bixtrxmc] { opacity: .5; cursor: not-allowed; }

/* ── Responsive ── */
@media (max-width: 860px) {
    .login-page[b-41bixtrxmc] {
        grid-template-columns: 1fr;
    }

    .login-left[b-41bixtrxmc] {
        display: none;
    }

    .login-right[b-41bixtrxmc] {
        min-height: 100vh;
        padding: 40px 24px;
    }
}

/* ── Sign in with Microsoft ─────────────────────────────────────────────────
   Rendered only where the feature is enabled (the API decides), so these styles sit unused in
   environments that have no Azure redirect URIs registered. */

.login-sep[b-41bixtrxmc] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 14px;
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .5;
}

    .login-sep[b-41bixtrxmc]::before,
    .login-sep[b-41bixtrxmc]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--border);
    }

/* Deliberately the OUTLINE treatment, not the accent fill of the Sign In button: password remains the
   primary path, and two solid buttons stacked would give no hint which is which. */
.btn-ms-signin[b-41bixtrxmc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 18px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, opacity .15s;
}

    .btn-ms-signin:hover:not(:disabled)[b-41bixtrxmc] { border-color: var(--accent); }
    .btn-ms-signin:disabled[b-41bixtrxmc] { opacity: .4; cursor: default; }

.login-ms-error[b-41bixtrxmc] {
    margin-top: 10px;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    color: var(--danger, #e05555);
}
/* /Components/Pages/MicrosoftLoginCallback.razor.rz.scp.css */
/* Styles for the Microsoft sign-in callback. Self-contained on purpose: this page renders OUTSIDE the
   authenticated shell and before the login card exists, so it cannot borrow Login.razor's scoped classes.
   Everything below uses the global colour tokens from app.css, so it follows the theme. */

.mscb-shell[b-rry09z2qgr] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--bg);
    color: var(--text);
}

.mscb-state[b-rry09z2qgr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    color: var(--text-muted, var(--text));
}

.mscb-card[b-rry09z2qgr] {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 24px;
}

.mscb-title[b-rry09z2qgr] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.mscb-text[b-rry09z2qgr] {
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 16px;
}

.mscb-error[b-rry09z2qgr] {
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    color: var(--danger, #e05555);
    margin-bottom: 12px;
}

.mscb-sessions[b-rry09z2qgr] { list-style: none; margin: 0 0 18px; padding: 0; }

.mscb-session[b-rry09z2qgr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s;
}

    .mscb-session:hover[b-rry09z2qgr] { border-color: var(--accent); }
    .mscb-session.selected[b-rry09z2qgr] { border-color: var(--accent); background: var(--bg); }

.mscb-session-device[b-rry09z2qgr] { font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 600; }
.mscb-session-meta[b-rry09z2qgr] { font-family: 'Barlow', sans-serif; font-size: 11px; opacity: .7; }

/* Wraps so the two buttons stack rather than overflow at phone width. */
.mscb-actions[b-rry09z2qgr] { display: flex; flex-wrap: wrap; gap: 10px; }

.mscb-btn[b-rry09z2qgr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s;
}

.mscb-btn--primary[b-rry09z2qgr] { background: var(--accent); border-color: var(--accent); color: #000; }

    .mscb-btn:hover:not(:disabled)[b-rry09z2qgr] { opacity: .85; }
    .mscb-btn:disabled[b-rry09z2qgr] { opacity: .4; cursor: default; }
/* /Components/Pages/Notifications.razor.rz.scp.css */
/* The title bar is the global .fs-pg-header; these are the page's own buttons in it. */
.ntf-btn[b-j9r82o3vcc] {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .ntf-btn:hover:not(:disabled)[b-j9r82o3vcc] { border-color: var(--accent); color: var(--accent); }
    .ntf-btn--danger:hover:not(:disabled)[b-j9r82o3vcc] { border-color: var(--danger); color: var(--danger); }
    .ntf-btn:disabled[b-j9r82o3vcc] { opacity: .5; cursor: default; }

/* ── Body ── */
.ntf-body[b-j9r82o3vcc] {
    padding: 24px 48px 60px;
}

.ntf-state[b-j9r82o3vcc] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    color: var(--muted);
    font-size: 13px;
}

.ntf-error[b-j9r82o3vcc] { color: var(--danger); }

/* ── Toolbar: search, filters, grouping ── */
.ntf-toolbar[b-j9r82o3vcc] {
    max-width: 820px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 18px;
}

.ntf-search[b-j9r82o3vcc] {
    flex: 1 1 260px;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    padding: 7px 12px;
    border-radius: 6px;
    outline: none;
    transition: border-color .15s;
}

.ntf-select[b-j9r82o3vcc] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 6px;
    outline: none;
    max-width: 220px;
}

    .ntf-search:focus[b-j9r82o3vcc],
    .ntf-select:focus[b-j9r82o3vcc] { border-color: var(--accent); }

.ntf-group-toggle[b-j9r82o3vcc] { margin-left: auto; }

/* ── Grouped view ── */
.ntf-group[b-j9r82o3vcc] {
    max-width: 820px;
    margin-bottom: 18px;
}

.ntf-group-head[b-j9r82o3vcc] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 2px;
    margin-bottom: 6px;
    background: none;
    border: none;
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    text-align: left;
    cursor: pointer;
}

.ntf-chevron[b-j9r82o3vcc] {
    display: inline-block;
    color: var(--muted);
    font-size: 11px;
    transition: transform .15s;
}

.ntf-chevron--open[b-j9r82o3vcc] { transform: rotate(90deg); }

.ntf-group-label[b-j9r82o3vcc] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ntf-group-count[b-j9r82o3vcc] {
    font-size: 10px;
    padding: 0 7px;
    border-radius: 9px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--muted);
}

.ntf-group-unread[b-j9r82o3vcc] {
    font-size: 11px;
    color: var(--accent);
}

/* ── List ── */
.ntf-list[b-j9r82o3vcc] {
    max-width: 820px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
}

.ntf-item[b-j9r82o3vcc] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    transition: background .1s;
}

    .ntf-item:last-child[b-j9r82o3vcc] { border-bottom: none; }
    .ntf-item:hover[b-j9r82o3vcc] { background: var(--surface2); }

.ntf-item--unread[b-j9r82o3vcc] { border-left-color: var(--accent); }

/* A link, so the browser's own new-tab gestures work on it; it reads as the row, not as underlined text. */
.ntf-main[b-j9r82o3vcc] {
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

    .ntf-main:hover[b-j9r82o3vcc] { color: inherit; text-decoration: none; }

.ntf-main--static[b-j9r82o3vcc] { cursor: default; }

.ntf-item-head[b-j9r82o3vcc] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 3px;
}

.ntf-item-title[b-j9r82o3vcc] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ntf-item-time[b-j9r82o3vcc] {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .04em;
}

.ntf-item-sub[b-j9r82o3vcc] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ntf-kind[b-j9r82o3vcc] {
    flex-shrink: 0;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 9px;
    border: 1px solid var(--border);
    color: var(--muted);
}

.ntf-item-body[b-j9r82o3vcc] {
    min-width: 0;
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ntf-item-actions[b-j9r82o3vcc] {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
}

.ntf-act[b-j9r82o3vcc] {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}

    .ntf-act:hover[b-j9r82o3vcc] { border-color: var(--accent); color: var(--accent); }
    .ntf-act--danger:hover[b-j9r82o3vcc] { border-color: var(--danger); color: var(--danger); }

/* ── Narrow screens: the row's buttons go under its text, and the toggle joins the filters. ── */
@media (max-width: 576px) {
    .ntf-body[b-j9r82o3vcc] { padding: 16px 16px 48px; }
    .ntf-select[b-j9r82o3vcc] { flex: 1 1 140px; max-width: none; }
    .ntf-group-toggle[b-j9r82o3vcc] { margin-left: 0; }
    .ntf-item[b-j9r82o3vcc] { flex-wrap: wrap; gap: 8px; }
    .ntf-main[b-j9r82o3vcc] { flex-basis: 100%; }
}

/* ── Spinner ── */
.spinner[b-j9r82o3vcc] {
    display: inline-block;
    vertical-align: middle;
    width: 13px;
    height: 13px;
    border: 1.5px solid rgba(13,17,23,.3);
    border-top-color: var(--bg);
    border-radius: 50%;
    animation: spin-b-j9r82o3vcc .6s linear infinite;
}

.spinner-lg[b-j9r82o3vcc] {
    width: 22px;
    height: 22px;
    border-width: 2px;
    border-color: var(--border);
    border-top-color: var(--accent);
}

@keyframes spin-b-j9r82o3vcc { to { transform: rotate(360deg); } }
/* /Components/Pages/Passwords/ChangePassword.razor.rz.scp.css */
.cp-shell[b-5wpyicgg7h] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 16px;
    position: relative;
    z-index: 1;
}

.cp-card[b-5wpyicgg7h] {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cp-header[b-5wpyicgg7h] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp-eyebrow[b-5wpyicgg7h] {
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--accent);
}

.cp-title[b-5wpyicgg7h] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

.cp-desc[b-5wpyicgg7h] {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 4px;
}

.cp-form[b-5wpyicgg7h] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cp-field[b-5wpyicgg7h] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cp-label[b-5wpyicgg7h] {
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
}

.cp-input[b-5wpyicgg7h] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 10px 13px;
    outline: none;
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
}

    .cp-input:focus[b-5wpyicgg7h] {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(240,165,0,.08);
    }

    .cp-input[b-5wpyicgg7h]::placeholder { color: var(--muted); opacity: .6; }
    .cp-input:disabled[b-5wpyicgg7h] { opacity: .35; cursor: not-allowed; }

.cp-input--error[b-5wpyicgg7h] {
    border-color: var(--danger);
}

.cp-field-hint[b-5wpyicgg7h] {
    font-size: 11px;
    color: var(--muted);
    opacity: .75;
    letter-spacing: .02em;
}

.cp-field-error[b-5wpyicgg7h] {
    font-size: 11px;
    color: var(--danger);
    letter-spacing: .04em;
}

.cp-error[b-5wpyicgg7h] {
    padding: 10px 14px;
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    color: var(--danger);
    font-size: 12px;
    letter-spacing: .02em;
}

.cp-success[b-5wpyicgg7h] {
    padding: 10px 14px;
    background: color-mix(in srgb, var(--success) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
    color: var(--success);
    font-size: 12px;
    letter-spacing: .04em;
}

.cp-submit[b-5wpyicgg7h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    background: var(--accent);
    border: none;
    color: #000;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .15s;
}

    .cp-submit:hover:not(:disabled)[b-5wpyicgg7h] { opacity: .85; }
    .cp-submit:disabled[b-5wpyicgg7h] { opacity: .4; cursor: default; }
/* /Components/Pages/Passwords/ForgotPassword.razor.rz.scp.css */
/* ── Shell ── */
.fp-shell[b-jvgfrt80oi] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 16px;
}

/* ── Card ── */
.fp-card[b-jvgfrt80oi] {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ── Header ── */
.fp-header[b-jvgfrt80oi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fp-eyebrow[b-jvgfrt80oi] {
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--accent);
}

.fp-title[b-jvgfrt80oi] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0;
}

.fp-desc[b-jvgfrt80oi] {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin: 4px 0 0;
}

    .fp-desc strong[b-jvgfrt80oi] { color: var(--text); }

/* ── Form ── */
.fp-form[b-jvgfrt80oi] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fp-field[b-jvgfrt80oi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fp-label[b-jvgfrt80oi] {
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
}

.fp-input[b-jvgfrt80oi] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 10px 13px;
    outline: none;
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
}

    .fp-input:focus[b-jvgfrt80oi] {
        border-left-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(240,165,0,.08);
    }

    .fp-input--error[b-jvgfrt80oi] { border-left-color: var(--danger); }
    .fp-input[b-jvgfrt80oi]::placeholder { color: var(--muted); opacity: .6; }
    .fp-input:disabled[b-jvgfrt80oi] { opacity: .35; cursor: not-allowed; }

.fp-field-error[b-jvgfrt80oi] {
    font-size: 11px;
    color: var(--danger);
    letter-spacing: .04em;
}

/* ── Submit button ── */
.fp-submit[b-jvgfrt80oi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    background: var(--accent);
    border: none;
    color: #000;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .15s;
}

    .fp-submit:hover:not(:disabled)[b-jvgfrt80oi] { opacity: .85; }
    .fp-submit:disabled[b-jvgfrt80oi] { opacity: .4; cursor: default; }

/* ── Spinner ── */
.fp-spinner[b-jvgfrt80oi] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1.5px solid rgba(0,0,0,.25);
    border-top-color: #000;
    border-radius: 50%;
    animation: fp-spin-b-jvgfrt80oi .6s linear infinite;
}

@keyframes fp-spin-b-jvgfrt80oi {
    to { transform: rotate(360deg); }
}

/* ── Success state ── */
.fp-success[b-jvgfrt80oi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.fp-success-icon[b-jvgfrt80oi] {
    font-size: 36px;
    color: var(--accent);
    opacity: .6;
}

/* ── Card footer ── */
.fp-footer[b-jvgfrt80oi] {
    text-align: center;
    font-size: 12px;
}

    .fp-footer a[b-jvgfrt80oi],
    .fp-back-link[b-jvgfrt80oi] {
        color: var(--muted);
        text-decoration: none;
        letter-spacing: .04em;
        transition: color .15s;
    }

    .fp-footer a:hover[b-jvgfrt80oi],
    .fp-back-link:hover[b-jvgfrt80oi] { color: var(--accent); }
/* /Components/Pages/Passwords/SetPassword.razor.rz.scp.css */
/* ── Shell ── */
.sp-shell[b-fvtzvuoyt8] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 16px;
    position: relative;
    z-index: 1;
}

/* ── Card ── */
.sp-card[b-fvtzvuoyt8] {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ── Header ── */
.sp-header[b-fvtzvuoyt8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-eyebrow[b-fvtzvuoyt8] {
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--accent);
}

.sp-title[b-fvtzvuoyt8] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

.sp-desc[b-fvtzvuoyt8] {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 4px;
}

    .sp-desc strong[b-fvtzvuoyt8] { color: var(--text); }

/* ── Form ── */
.sp-form[b-fvtzvuoyt8] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sp-field[b-fvtzvuoyt8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-label[b-fvtzvuoyt8] {
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
}

.sp-input[b-fvtzvuoyt8] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 10px 13px;
    outline: none;
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
}

    .sp-input:focus[b-fvtzvuoyt8] {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(240,165,0,.08);
    }

    .sp-input[b-fvtzvuoyt8]::placeholder { color: var(--muted); opacity: .6; }
    .sp-input:disabled[b-fvtzvuoyt8] { opacity: .35; cursor: not-allowed; }

.sp-input--error[b-fvtzvuoyt8] {
    border-color: var(--danger);
}

.sp-field-hint[b-fvtzvuoyt8] {
    font-size: 11px;
    color: var(--muted);
    opacity: .75;
    letter-spacing: .02em;
}

.sp-field-error[b-fvtzvuoyt8] {
    font-size: 11px;
    color: var(--danger);
    letter-spacing: .04em;
}

/* ── Feedback banners ── */
.sp-error[b-fvtzvuoyt8] {
    padding: 10px 14px;
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    color: var(--danger);
    font-size: 12px;
    letter-spacing: .02em;
}

/* ── Submit button ── */
.sp-submit[b-fvtzvuoyt8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    background: var(--accent);
    border: none;
    color: #000;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .15s;
}

    .sp-submit:hover:not(:disabled)[b-fvtzvuoyt8] { opacity: .85; }
    .sp-submit:disabled[b-fvtzvuoyt8] { opacity: .4; cursor: default; }

/* ── Spinner ── */
.sp-spinner[b-fvtzvuoyt8] {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 1.5px solid rgba(0,0,0,.25);
    border-top-color: #000;
    border-radius: 50%;
    animation: sp-spin-b-fvtzvuoyt8 .6s linear infinite;
}

.sp-spinner--btn[b-fvtzvuoyt8] {
    width: 12px;
    height: 12px;
}

@keyframes sp-spin-b-fvtzvuoyt8 {
    to { transform: rotate(360deg); }
}

/* ── Loading / invalid states ── */
.sp-centered[b-fvtzvuoyt8] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

    .sp-centered .sp-spinner[b-fvtzvuoyt8] {
        width: 22px;
        height: 22px;
        border-width: 2px;
        border-color: var(--border);
        border-top-color: var(--accent);
    }

.sp-invalid[b-fvtzvuoyt8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.sp-invalid-icon[b-fvtzvuoyt8] {
    font-size: 36px;
    color: var(--accent);
    opacity: .4;
}

.sp-back-link[b-fvtzvuoyt8] {
    font-size: 12px;
    color: var(--accent);
    letter-spacing: .06em;
    text-decoration: none;
}

    .sp-back-link:hover[b-fvtzvuoyt8] { opacity: .75; }
/* /Components/Pages/Profile.razor.rz.scp.css */
.profile-shell[b-7t0rrhk4sj] {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  position: relative;
  z-index: 1;
  overflow-y: auto;
}

/* Consistent button rounding, matching the rest of the app. */
.profile-shell button[b-7t0rrhk4sj] { border-radius: 3px; }

.profile-header[b-7t0rrhk4sj] {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.profile-eyebrow[b-7t0rrhk4sj] {
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.profile-title[b-7t0rrhk4sj] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

.profile-body[b-7t0rrhk4sj] {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 640px;
}

.profile-state[b-7t0rrhk4sj] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

/* ── Sections ─────────────────────────────────────────────────────── */

.profile-section[b-7t0rrhk4sj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-section-title[b-7t0rrhk4sj] {
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.profile-section-desc[b-7t0rrhk4sj] {
    font-size: 13px;
    color: var(--muted);
    margin-top: -8px;
}

/* ── Profile top row (avatar + info grid) ──────────────────────────── */

.profile-top-row[b-7t0rrhk4sj] {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.profile-avatar-wrap[b-7t0rrhk4sj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.profile-avatar[b-7t0rrhk4sj] {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
}

.profile-avatar--img[b-7t0rrhk4sj] {
    width: 128px;
    height: 128px;
    object-fit: cover;
    border: none;
}

.profile-avatar--placeholder[b-7t0rrhk4sj] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 52px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--muted);
    text-transform: uppercase;
}

.profile-avatar--loading[b-7t0rrhk4sj] {
    opacity: .5;
}

.profile-pic-btn[b-7t0rrhk4sj] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}


    .profile-pic-btn:hover[b-7t0rrhk4sj] {
        border-color: var(--accent);
        color: var(--accent);
    }


.profile-pic-input[b-7t0rrhk4sj] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: auto;
}

.profile-pic-error[b-7t0rrhk4sj] {
    font-size: 12px;
    text-align: center;
    max-width: 100px;
}

/* ── Section header with action button ──────────────────────────────── */

.profile-section-header[b-7t0rrhk4sj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-edit-profile[b-7t0rrhk4sj] {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    padding: 4px 14px;
    cursor: pointer;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: all .15s;
}

    .btn-edit-profile:hover[b-7t0rrhk4sj] {
        border-color: var(--accent);
        color: var(--accent);
    }

/* ── Edit form ───────────────────────────────────────────────────────── */

.profile-edit-form[b-7t0rrhk4sj] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.form-row-2[b-7t0rrhk4sj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-row-3[b-7t0rrhk4sj] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.field[b-7t0rrhk4sj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-7t0rrhk4sj] {
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
}

.field-input[b-7t0rrhk4sj] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 10px 13px;
    outline: none;
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
}

    .field-input:focus[b-7t0rrhk4sj] {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(240,165,0,.08);
    }

    .field-input[b-7t0rrhk4sj]::placeholder { color: var(--muted); opacity: .6; }
    .field-input:disabled[b-7t0rrhk4sj] { opacity: .35; cursor: not-allowed; }


.field-hint[b-7t0rrhk4sj] {
    font-size: 11px;
    color: var(--muted);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.profile-edit-actions[b-7t0rrhk4sj] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-top: 4px;
}

.btn-save-profile[b-7t0rrhk4sj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 24px;
    background: var(--accent);
    border: none;
    color: #000;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .15s;
}

    .btn-save-profile:hover:not(:disabled)[b-7t0rrhk4sj] { opacity: .85; }
    .btn-save-profile:disabled[b-7t0rrhk4sj] { opacity: .4; cursor: default; }

.btn-cancel-edit[b-7t0rrhk4sj] {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    padding: 9px 20px;
    cursor: pointer;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: border-color .15s, color .15s;
}

    .btn-cancel-edit:hover[b-7t0rrhk4sj] {
        border-color: var(--text);
        color: var(--text);
    }

.profile-edit-success[b-7t0rrhk4sj] {
    padding: 10px 14px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 6px;
    color: var(--accent);
    font-size: 12px;
    letter-spacing: .04em;
}

/* ── Account info ─────────────────────────────────────────────────── */

.profile-info-grid[b-7t0rrhk4sj] {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 8px 16px;
    align-items: center;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.profile-info-label[b-7t0rrhk4sj] {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.profile-info-value[b-7t0rrhk4sj] {
    font-size: 14px;
    color: var(--text);
}

/* ── Multi-Factor Authentication box ──────────────────────────────── */

.profile-mfa-box[b-7t0rrhk4sj] {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.mfa-login-row[b-7t0rrhk4sj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.mfa-login-label[b-7t0rrhk4sj] {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.mfa-login-value[b-7t0rrhk4sj] {
    font-size: 13px;
    color: var(--text);
}

.mfa-method[b-7t0rrhk4sj] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
}

.mfa-method-head[b-7t0rrhk4sj] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mfa-method-name[b-7t0rrhk4sj] {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text);
}

.mfa-method-desc[b-7t0rrhk4sj] {
    margin-top: 0;
}

/* ── Integrations ── */

.integration-row[b-7t0rrhk4sj] {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding: 20px 0;
    border-top: 1px solid var(--border);
}

.integration-info[b-7t0rrhk4sj] {
    flex: 0 0 240px;
}

.integration-name[b-7t0rrhk4sj] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.integration-desc[b-7t0rrhk4sj] {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}

.integration-field[b-7t0rrhk4sj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.integration-input-row[b-7t0rrhk4sj] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.integration-success[b-7t0rrhk4sj] {
    font-size: 12px;
    color: var(--success);
}

.integration-error[b-7t0rrhk4sj] {
    font-size: 12px;
    color: var(--danger);
}

/* ── Two-Factor Authentication ── */

.totp-badge[b-7t0rrhk4sj] {
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
}

.totp-badge--on[b-7t0rrhk4sj]  { border-color: var(--success); color: var(--success); }
.totp-badge--off[b-7t0rrhk4sj] { border-color: var(--border);  color: var(--muted);   }

.totp-success[b-7t0rrhk4sj] {
    padding: 10px 14px;
    background: color-mix(in srgb, var(--success) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
    border-radius: 6px;
    color: var(--success);
    font-size: 12px;
    letter-spacing: .04em;
}

.totp-error[b-7t0rrhk4sj] {
    padding: 10px 14px;
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    border-radius: 6px;
    color: var(--danger);
    font-size: 12px;
    letter-spacing: .04em;
}

.totp-setup[b-7t0rrhk4sj] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.totp-setup-step[b-7t0rrhk4sj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.totp-step-label[b-7t0rrhk4sj] {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.totp-qr[b-7t0rrhk4sj] {
    width: 180px;
    height: 180px;
    image-rendering: pixelated;
    border: 4px solid #fff;
}

.totp-uri-details[b-7t0rrhk4sj] {
    font-size: 11px;
}

.totp-uri-summary[b-7t0rrhk4sj] {
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    letter-spacing: .04em;
}

.totp-uri-text[b-7t0rrhk4sj] {
    margin-top: 6px;
    font-family: monospace;
    font-size: 11px;
    color: var(--muted);
    word-break: break-all;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.totp-code-row[b-7t0rrhk4sj] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.totp-code-input[b-7t0rrhk4sj] {
    width: 120px;
    font-family: monospace;
    font-size: 16px;
    letter-spacing: .2em;
    text-align: center;
}

.totp-actions[b-7t0rrhk4sj] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-totp-action[b-7t0rrhk4sj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--accent);
    border: none;
    color: #000;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .15s;
}

    .btn-totp-action:hover:not(:disabled)[b-7t0rrhk4sj] { opacity: .85; }
    .btn-totp-action:disabled[b-7t0rrhk4sj] { opacity: .4; cursor: default; }

/* ── Microsoft account ── */
.ms-linked[b-7t0rrhk4sj] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.ms-badge[b-7t0rrhk4sj] {
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
}

.ms-badge--on[b-7t0rrhk4sj] { border-color: var(--success); color: var(--success); }

.ms-linked-email[b-7t0rrhk4sj] {
    font-size: 13px;
    color: var(--muted);
}

.btn-ms-register[b-7t0rrhk4sj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 20px;
    background: var(--accent);
    border: none;
    color: #000;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .15s;
}

    .btn-ms-register:hover:not(:disabled)[b-7t0rrhk4sj] { opacity: .85; }
    .btn-ms-register:disabled[b-7t0rrhk4sj] { opacity: .4; cursor: default; }

.btn-totp-confirm[b-7t0rrhk4sj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: var(--accent);
    border: none;
    color: #000;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .15s;
}

    .btn-totp-confirm:hover:not(:disabled)[b-7t0rrhk4sj] { opacity: .85; }
    .btn-totp-confirm:disabled[b-7t0rrhk4sj] { opacity: .4; cursor: default; }

.btn-totp-cancel[b-7t0rrhk4sj] {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    padding: 8px 16px;
    cursor: pointer;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: border-color .15s, color .15s;
}

    .btn-totp-cancel:hover[b-7t0rrhk4sj] { border-color: var(--text); color: var(--text); }

.btn-totp-danger[b-7t0rrhk4sj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: none;
    border: 1px solid var(--danger);
    color: var(--danger);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
}

    .btn-totp-danger:hover:not(:disabled)[b-7t0rrhk4sj] {
        background: color-mix(in srgb, var(--danger) 12%, transparent);
    }

    .btn-totp-danger:disabled[b-7t0rrhk4sj] { opacity: .4; cursor: default; }

/* -- Active sessions + PATs -- */
.sessions-list[b-7t0rrhk4sj],
.pat-list[b-7t0rrhk4sj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.session-row[b-7t0rrhk4sj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.session-row--current[b-7t0rrhk4sj] {
    border-color: var(--accent);
}

.session-info[b-7t0rrhk4sj] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.session-device[b-7t0rrhk4sj] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.session-current-badge[b-7t0rrhk4sj] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: 1px 7px;
}

.session-meta[b-7t0rrhk4sj] {
    font-size: 12px;
    color: var(--muted);
}

.btn-session-revoke[b-7t0rrhk4sj] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    padding: 7px 16px;
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .btn-session-revoke:hover:not(:disabled)[b-7t0rrhk4sj] {
        border-color: var(--danger);
        color: var(--danger);
    }

    .btn-session-revoke:disabled[b-7t0rrhk4sj] { opacity: .5; cursor: default; }

.btn-pat-create[b-7t0rrhk4sj] {
    margin-top: 14px;
    padding: 9px 24px;
    background: var(--accent);
    border: none;
    color: #000;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .15s;
}

    .btn-pat-create:hover[b-7t0rrhk4sj] { opacity: .85; }

/* PAT scope chips (list) */
.pat-scopes[b-7t0rrhk4sj] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0;
}

.pat-chip[b-7t0rrhk4sj] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 8px;
}

.pat-chip--all[b-7t0rrhk4sj] {
    color: var(--accent);
    border-color: var(--accent);
}

.pat-chip--none[b-7t0rrhk4sj] {
    color: var(--danger);
    border-color: var(--danger);
}

/* PAT create form — access mode + scope pickers */
.pat-mode-row[b-7t0rrhk4sj] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pat-mode-option[b-7t0rrhk4sj] {
    flex: 1 1 220px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .15s;
}

    .pat-mode-option--on[b-7t0rrhk4sj] { border-color: var(--accent); }

    .pat-mode-option--disabled[b-7t0rrhk4sj] { opacity: .5; cursor: default; }

    .pat-mode-option input[b-7t0rrhk4sj] { margin-top: 3px; }

.pat-mode-name[b-7t0rrhk4sj] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.pat-mode-desc[b-7t0rrhk4sj] {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.pat-scope-checks[b-7t0rrhk4sj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.pat-scope-check[b-7t0rrhk4sj] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.pat-form[b-7t0rrhk4sj] { margin-top: 16px; }

.pat-reveal[b-7t0rrhk4sj] {
    margin: 14px 0;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid var(--accent);
    border-radius: 4px;
}

.pat-reveal-warn[b-7t0rrhk4sj] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
}

.pat-reveal-row[b-7t0rrhk4sj] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 12px;
}

.pat-reveal-value[b-7t0rrhk4sj] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    padding: 9px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    color: var(--text);
}

.btn-pat-copy[b-7t0rrhk4sj] {
    flex: 0 0 auto;
    padding: 0 18px;
    background: var(--accent);
    border: none;
    color: #000;
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .15s;
}

    .btn-pat-copy:hover[b-7t0rrhk4sj] { opacity: .85; }

.pat-qr-block[b-7t0rrhk4sj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.pat-qr-label[b-7t0rrhk4sj] {
    font-size: 12px;
    color: var(--text-muted, var(--text));
    text-align: center;
}

.pat-qr[b-7t0rrhk4sj] {
    width: 200px;
    height: 200px;
    image-rendering: pixelated;
    border: 6px solid #fff;
    border-radius: 4px;
}
/* /Components/Pages/Reports/Concessions.razor.rz.scp.css */
/* DEV-SW-102 — Concessions.
   Everything structural comes from app.css: fs-pg-shell/header/title/actions, page-body, rep-modal*,
   rep-view-group, rep-eyebrow, btn-*, toggle-*, and the rep-badge status pills. Only what is genuinely
   particular to this page is below, with the "conc-" prefix so it cannot collide if any of it is later
   promoted to a global. */

/* .spinner is defined per page across this project rather than globally, so it is repeated here for the
   same reason every other page repeats it. */
.spinner[b-tz7q26qulj] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: conc-spin-b-tz7q26qulj .7s linear infinite;
}

.spinner-lg[b-tz7q26qulj] { width: 26px; height: 26px; border-width: 3px; }

@keyframes conc-spin-b-tz7q26qulj { to { transform: rotate(360deg); } }

/* The search/filter toolbar is global (.list-toolbar in app.css), shared with the licences list. */

/* ── List ────────────────────────────────────────────────────────────────── */
/* The table that used to live here (.conc-table / .conc-row / .conc-cell-*) moved to app.css as
   .rec-table / .rec-row / .rec-cell-*. It was the best-looking list on the page and three other places
   wanted it, but being in a SCOPED stylesheet it could only ever apply to this one file — a shared
   component such as AttachmentList carries a different scope id, so the rules would not have reached it.
   Global was the prerequisite for using one list everywhere, not a tidy-up. */

/* Follow toggle. Following is the quieter state on purpose — it is the one people are usually already in
   without having asked, so it should not shout. */
.conc-follow[b-tz7q26qulj] { display: inline-flex; align-items: center; gap: 8px; }

    .conc-follow.is-following[b-tz7q26qulj] { border-color: var(--accent); color: var(--accent); }

.conc-follow-count[b-tz7q26qulj] {
    font-size: 10px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--muted);
}

/* The relative expiry sits under the date: the absolute date is the fact, "expires in 3 days" is the
   thing someone actually reacts to. */
.conc-expiry[b-tz7q26qulj] { display: block; font-size: 11px; opacity: .7; }
.conc-expiry.overdue[b-tz7q26qulj] { color: var(--danger, #e05555); opacity: 1; }

.conc-state[b-tz7q26qulj] { display: flex; justify-content: center; padding: 48px 0; }
.conc-empty[b-tz7q26qulj] { padding: 32px 0; text-align: center; font-family: 'Barlow', sans-serif; font-size: 13px; opacity: .7; }
.conc-empty-inline[b-tz7q26qulj] { font-family: 'Barlow', sans-serif; font-size: 12px; opacity: .7; }

.conc-error[b-tz7q26qulj] {
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    color: var(--danger, #e05555);
    margin-bottom: 10px;
}

/* ── Detail ──────────────────────────────────────────────────────────────── */
/* This was `grid-template-columns: 1fr 300px` with a sidebar — except there is no sidebar element and
   there never was one here; the record is .conc-detail's only child. So 324px of every window was
   reserved for nothing, and because that reservation was a FIXED width it came entirely out of the
   content as the window narrowed, until the 991px media query dropped it in one step and the boxes
   snapped to full width.

   A max-width instead of a phantom column. The content is capped so it does not run to an unreadable
   line length on a wide monitor — which is the look that was wanted, and roughly what the old grid
   produced at 1920 — and below the cap it simply fills the space and shrinks smoothly. No fixed strip,
   no breakpoint, nothing to snap. */
.conc-detail[b-tz7q26qulj] { max-width: 1400px; }

.conc-detail-main[b-tz7q26qulj] { min-width: 0; }

/* ── Group spacing ───────────────────────────────────────────────────────── */
/* Stays SCOPED: ::deep only means anything in a scoped stylesheet. .rep-view-group is global, so the
   scope marker attaches to this page's wrapper rather than to the group itself — hence ::deep. Without
   it the boxes sit flush against one another and read as one block rather than as separate sections. */
.conc-detail-main[b-tz7q26qulj]  .rep-view-group { margin-bottom: 20px; }

.conc-detail-main[b-tz7q26qulj]  .rep-view-group:last-child { margin-bottom: 0; }

/* A collapsible box (attachments) sits between the groups, so it needs the same gap — it draws its own
   box and is therefore NOT inside a .rep-view-group. ::deep for the same reason as above. */
.conc-detail-main[b-tz7q26qulj]  .cbox { margin-bottom: 20px; }

.conc-grid[b-tz7q26qulj] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 14px; }

/* Same type as .rep-view-label in app.css — this is the reports pages' field label, not a title. */
.conc-flabel[b-tz7q26qulj] {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .7;
}

.conc-fvalue[b-tz7q26qulj] { font-family: 'Barlow', sans-serif; font-size: 13px; }

.conc-para[b-tz7q26qulj] { font-family: 'Barlow', sans-serif; font-size: 13px; line-height: 1.55; white-space: pre-wrap; margin: 4px 0 14px; }

/* Rich text brings its own paragraphs and lists; pre-wrap on top of that doubles every line break. */
.conc-para.rte-content[b-tz7q26qulj] { white-space: normal; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
}



/* ── History timeline ────────────────────────────────────────────────────── */
/* Mirrors the ticket detail's timeline. Those classes are scoped to that page, so they are repeated
   here rather than reached for — same shape, same names, so the two stay recognisably one thing. */
.history-timeline[b-tz7q26qulj] {
    display: flex;
    flex-direction: column;
    padding-left: 12px;
    border-left: 2px solid var(--border);
}

.history-entry[b-tz7q26qulj] { position: relative; padding: 0 0 16px 20px; }

    .history-entry:last-child[b-tz7q26qulj] { padding-bottom: 0; }

.history-dot[b-tz7q26qulj] {
    position: absolute;
    left: -7px;
    top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    border: 2px solid var(--surface);
}

.history-content[b-tz7q26qulj] { display: flex; flex-direction: column; gap: 4px; }

.history-text-row[b-tz7q26qulj] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.history-text[b-tz7q26qulj] { font-size: 13px; color: var(--text); line-height: 1.5; }
.history-time[b-tz7q26qulj] { font-size: 10px; color: var(--muted); letter-spacing: .04em; }
/* /Components/Pages/Reports/IncidentReports.razor.rz.scp.css */
/* ── Comments (mirrors the TicketDetail thread) ── */
.rep-comments[b-9quy0e1q4q] {
    margin-top: 24px;
}

[b-9quy0e1q4q] .comment-rte .ql-editor {
    min-height: 120px;
}

.comments-thread[b-9quy0e1q4q] {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.comment-item[b-9quy0e1q4q] {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

    .comment-item:first-child[b-9quy0e1q4q] { padding-top: 0; }
    .comment-item:last-child[b-9quy0e1q4q]  { border-bottom: none; }

.comment-header[b-9quy0e1q4q] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.comment-author[b-9quy0e1q4q]  { font-size: 12px; font-weight: 600; color: var(--text); }
.comment-time[b-9quy0e1q4q]    { font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.comment-actions[b-9quy0e1q4q] { margin-left: auto; display: flex; gap: 6px; }

.comment-body[b-9quy0e1q4q] {
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 0;
}

.comment-edit-actions[b-9quy0e1q4q] { display: flex; gap: 8px; margin-top: 8px; }
.comment-input-row[b-9quy0e1q4q]    { margin-top: 4px; }

/* .btn-comment-action is now a global style (app.css). */
/* /Components/Pages/Reports/Ncrs.razor.rz.scp.css */
/* SW-187 NCR page — small helpers on top of the global rep-* / fs-pg-* / tab-strip classes. */

/* SW-204 Create-NCR modal: field labels above each input. */
.ncr-create-label[b-bz3s8ltn7f] {
    display: block;
    margin: 10px 0 3px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

/* NCR number field: fixed "NCR-" prefix, user types only the number. */
.ncr-create-numwrap[b-bz3s8ltn7f] { display: flex; align-items: center; gap: 6px; }
.ncr-create-prefix[b-bz3s8ltn7f] { font-weight: 700; color: var(--muted); }
.ncr-create-num[b-bz3s8ltn7f] { flex: 1; letter-spacing: 1px; }

.rep-inline-form[b-bz3s8ltn7f] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}
    .rep-inline-form select[b-bz3s8ltn7f],
    .rep-inline-form input[b-bz3s8ltn7f] {
        background: var(--bg);
        border: 1px solid var(--border);
        color: var(--text);
        font-family: 'Barlow', sans-serif;
        font-size: 13px;
        padding: 7px 10px;
        border-radius: 6px;
        outline: none;
    }
    .rep-inline-form input[b-bz3s8ltn7f] { min-width: 200px; }

.rep-subtabs[b-bz3s8ltn7f] {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.rep-comment-input[b-bz3s8ltn7f] {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 6px;
    outline: none;
    resize: vertical;
    margin-bottom: 8px;
}
    .rep-comment-input:focus[b-bz3s8ltn7f] { border-color: var(--accent); }

.rep-ncr-link[b-bz3s8ltn7f] {
    font-size: 11px;
    color: var(--accent);
    text-decoration: none;
    margin-left: 6px;
    white-space: nowrap;
}
    .rep-ncr-link:hover[b-bz3s8ltn7f] { text-decoration: underline; }

/* ── Detail layout: main column + sticky right-hand info sidebar (ported from Dev) ── */
.ncr-detail-layout[b-bz3s8ltn7f] {
    display: flex;
    gap: 0;
    align-items: flex-start;
}
.ncr-detail-main[b-bz3s8ltn7f] {
    flex: 1;
    min-width: 0;
}
.ncr-detail-sidebar[b-bz3s8ltn7f] {
    width: 240px;
    flex-shrink: 0;
    border-left: 1px solid var(--border);
    padding: 4px 24px 24px;
    position: sticky;
    top: -40px;
    align-self: flex-start;
}
.sidebar-field[b-bz3s8ltn7f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 14px;
}
.sidebar-label[b-bz3s8ltn7f] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}
.sidebar-value[b-bz3s8ltn7f] {
    font-size: 13px;
    color: var(--text);
    word-break: break-word;
}
.sidebar-divider[b-bz3s8ltn7f] {
    border-top: 1px solid var(--border);
    margin: 4px 0 14px;
}
.ncr-subscribe-check[b-bz3s8ltn7f] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 10px;
}
    .ncr-subscribe-check input[type="checkbox"][b-bz3s8ltn7f] {
        accent-color: var(--accent);
        cursor: pointer;
        flex-shrink: 0;
    }
.ncr-number[b-bz3s8ltn7f] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .05em;
    white-space: nowrap;
}

/* Priority badges (sidebar). */
.badge[b-bz3s8ltn7f] {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    color: var(--muted);
}
.badge--critical[b-bz3s8ltn7f] { color: #e55; border-color: #e55; }
.badge--high[b-bz3s8ltn7f]     { color: #e87f3a; border-color: #e87f3a; }
.badge--medium[b-bz3s8ltn7f]   { color: #c9a43a; border-color: #c9a43a; }
.badge--low[b-bz3s8ltn7f]      { color: var(--muted); border-color: var(--border); }

@media (max-width: 900px) {
    .ncr-detail-layout[b-bz3s8ltn7f] { flex-direction: column; }
    .ncr-detail-sidebar[b-bz3s8ltn7f] { width: 100%; border-left: none; border-top: 1px solid var(--border); padding: 16px 0 0; position: static; }
}

/* ── Top detail tabs (Steps | Linked Tickets) ── */
.ncr-detail-tabs[b-bz3s8ltn7f] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 20px;
}
.ncr-detail-tab[b-bz3s8ltn7f] {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
    .ncr-detail-tab:hover[b-bz3s8ltn7f] { color: var(--text); }
    .ncr-detail-tab.active[b-bz3s8ltn7f] { color: var(--text); border-bottom-color: var(--accent); }

/* ── Linked Tickets tab ── */
.ncr-linked-tickets[b-bz3s8ltn7f] { flex: 1; }
.rep-cell-actions[b-bz3s8ltn7f] { text-align: right; white-space: nowrap; }
.rep-table-subrow > td[b-bz3s8ltn7f] { padding: 0 12px 10px; border-top: none; }
.rep-subtask-for[b-bz3s8ltn7f] { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Standard sub-task formatting: a child linked ticket is indented (offset right) under its parent, with a
   ↳ arrow — mirrors the Tickets list. Indent is applied inline via padding-left = depth * 20px. */
.ncr-tkt-ref[b-bz3s8ltn7f] { display: inline-flex; align-items: center; gap: 4px; }
.ncr-subtask-arrow[b-bz3s8ltn7f] { color: var(--muted); font-size: 13px; line-height: 1; }
.ncr-subtask-row > td:first-child[b-bz3s8ltn7f] { border-left: 2px solid var(--border); }
.ncr-linked-empty[b-bz3s8ltn7f] {
    padding: 32px 0;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

/* ── Ownership / pass-on + bottom history list ── */
.ncr-ownership[b-bz3s8ltn7f], .ncr-history-panel[b-bz3s8ltn7f] {
    margin-top: 24px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}
.ncr-history-list[b-bz3s8ltn7f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ncr-history-row[b-bz3s8ltn7f] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.ncr-history-body[b-bz3s8ltn7f] { flex: 1; display: flex; flex-direction: column; gap: 1px; }
/* Actor name + time share one line at the top of each history entry. */
.ncr-history-head[b-bz3s8ltn7f] { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ncr-history-actor[b-bz3s8ltn7f] { font-weight: 600; color: var(--text); }
.ncr-history-event[b-bz3s8ltn7f] { color: var(--muted); font-size: 12px; }
.ncr-history-time[b-bz3s8ltn7f] { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ── Per-step activity (collapsed Comments | History tabs) ── */
.ncr-activity[b-bz3s8ltn7f] { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 14px; }
.ncr-activity-toggle[b-bz3s8ltn7f] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 2px 0;
    cursor: pointer;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}
    .ncr-activity-toggle:hover[b-bz3s8ltn7f] { color: var(--text); }
.ncr-activity-count[b-bz3s8ltn7f] {
    background: var(--accent);
    color: var(--bg);
    border-radius: 10px;
    padding: 0 7px;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: 0;
}
.ncr-activity-tabs[b-bz3s8ltn7f] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin: 10px 0 12px;
}
.ncr-mini-tab[b-bz3s8ltn7f] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 5px 14px;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
    .ncr-mini-tab:hover[b-bz3s8ltn7f] { color: var(--text); }
    .ncr-mini-tab.active[b-bz3s8ltn7f] { color: var(--text); border-bottom-color: var(--accent); }

.ncr-act-empty[b-bz3s8ltn7f] { font-size: 12px; color: var(--muted); font-style: italic; display: block; padding: 6px 0 12px; }
.ncr-comments-thread[b-bz3s8ltn7f] { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.ncr-comment-item[b-bz3s8ltn7f] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
}
.ncr-comment-header[b-bz3s8ltn7f] { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.ncr-comment-author[b-bz3s8ltn7f] { font-size: 12px; font-weight: 600; color: var(--text); }
.ncr-comment-time[b-bz3s8ltn7f] { font-size: 11px; color: var(--muted); }
.ncr-comment-body[b-bz3s8ltn7f] { font-size: 13px; color: var(--text); line-height: 1.5; }
    .ncr-comment-body p[b-bz3s8ltn7f] { margin: 0 0 4px; }
    .ncr-comment-body p:last-child[b-bz3s8ltn7f] { margin-bottom: 0; }
    .ncr-comment-body img[b-bz3s8ltn7f] { max-width: 100%; height: auto; }
.ncr-comment-input[b-bz3s8ltn7f] { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.ncr-comment-edit-actions[b-bz3s8ltn7f] { display: flex; gap: 8px; margin-top: 8px; }

/* ── Per-step attachments panel ── */
.ncr-attach-panel[b-bz3s8ltn7f] { display: flex; flex-direction: column; gap: 10px; }
.ncr-attach-list[b-bz3s8ltn7f] { display: flex; flex-direction: column; gap: 6px; }
.ncr-attach-item[b-bz3s8ltn7f] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 7px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
}
.ncr-attach-name[b-bz3s8ltn7f] { color: var(--accent); text-decoration: none; font-weight: 500; word-break: break-word; }
    .ncr-attach-name:hover[b-bz3s8ltn7f] { text-decoration: underline; }
.ncr-attach-meta[b-bz3s8ltn7f] { font-size: 11px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.ncr-attach-upload[b-bz3s8ltn7f] { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.ncr-attach-uploading[b-bz3s8ltn7f] { font-size: 12px; color: var(--muted); font-style: italic; }

/* 5 Whys inputs — single-line by default, grow in height as text wraps (field-sizing:
   content works in the Chromium/Edge target; min/max-height keep it usable if unsupported). */
.ncr-why-input[b-bz3s8ltn7f] {
    field-sizing: content;
    min-height: 2.4em;
    max-height: 200px;
    overflow-y: auto;
    resize: vertical;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Manager "Request Further Investigation" control at the top of Step 3 (reopens Step 2). */
.ncr-reinvestigate[b-bz3s8ltn7f] { margin-bottom: 16px; }

/* Step 3 meeting boxes — date field + "Add minutes" toggle, revealing a rich editor + file upload. */
.ncr-meeting-box[b-bz3s8ltn7f] {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ncr-meeting-header[b-bz3s8ltn7f] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}
.ncr-meeting-date[b-bz3s8ltn7f] { flex: 0 0 auto; }
    .ncr-meeting-date label[b-bz3s8ltn7f] {
        display: block;
        font-size: 11px;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 4px;
    }
.ncr-meeting-toggle[b-bz3s8ltn7f] { margin-left: auto; }
.ncr-meeting-minutes[b-bz3s8ltn7f] { display: flex; flex-direction: column; gap: 10px; }
.ncr-meeting-attach[b-bz3s8ltn7f] { display: flex; align-items: center; gap: 10px; }
.ncr-meeting-files[b-bz3s8ltn7f] { display: flex; flex-direction: column; gap: 6px; }
.ncr-meeting-file[b-bz3s8ltn7f] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
}
    .ncr-meeting-file .ncr-attach-meta[b-bz3s8ltn7f] { margin-left: auto; }
.ncr-meeting-file-del[b-bz3s8ltn7f] {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
}
    .ncr-meeting-file-del:hover[b-bz3s8ltn7f] { color: #e55; }

/* Evidence-attached yes/no with the "upload attachments" button to its right (Step 2). */
.ncr-evidence-row[b-bz3s8ltn7f] { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
    .ncr-evidence-row .rep-yesno-group[b-bz3s8ltn7f] { margin-bottom: 0; }
.ncr-upload-btn[b-bz3s8ltn7f] { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* ── Collapsible step sections (stacked, expand/collapse below one another) ── */
.ncr-step[b-bz3s8ltn7f] {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.ncr-step-header[b-bz3s8ltn7f] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
}
.ncr-step-header--toggle[b-bz3s8ltn7f] { cursor: pointer; user-select: none; transition: background .12s; }
    .ncr-step-header--toggle:hover[b-bz3s8ltn7f] { background: var(--bg); }

.ncr-step-num[b-bz3s8ltn7f] {
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    white-space: nowrap;
}
.ncr-step-title[b-bz3s8ltn7f] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text);
    flex: 1;
}
.ncr-step-chevron[b-bz3s8ltn7f] { font-size: 10px; color: var(--muted); }
.ncr-step-locked[b-bz3s8ltn7f] { font-size: 11px; color: var(--muted); font-style: italic; }

/* Submitted indicator next to a step's Submit/Re-submit button (matches the Dev version). */
.ncr-submitted-badge[b-bz3s8ltn7f] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--success);
    border: 1px solid var(--success);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Per-step "Edit" button in the step header — right-aligned before any other header buttons/chevron. */
.ncr-step-edit-btn[b-bz3s8ltn7f] { margin-left: auto; }

/* Acknowledge control in the Step 2 header — pushed to the right, before the chevron. */
.ncr-ack-btn[b-bz3s8ltn7f] { margin-left: auto; }
/* When Acknowledge isn't shown, keep the Pass On button right-aligned too. */
.ncr-passon-btn:first-of-type[b-bz3s8ltn7f] { margin-left: auto; }
.ncr-passon-btn.active[b-bz3s8ltn7f] { border-color: var(--accent); color: var(--accent); }
.ncr-ack-badge[b-bz3s8ltn7f] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--success);
    border: 1px solid var(--success);
    border-radius: 999px;
    padding: 2px 10px;
    white-space: nowrap;
}

.ncr-step-body[b-bz3s8ltn7f] {
    padding: 18px;
    border-top: 1px solid var(--border);
}

/* ── Linked reports (escalated into this NCR) ── the rep-link-* card classes are global (app.css). */
.ncr-linked-reports[b-bz3s8ltn7f] { margin-bottom: 20px; }
.ncr-subsection-title[b-bz3s8ltn7f] {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

/* ── Step-3 sign-off approvals (per-type cards + list chips; ported from Dev) ── */
.ncr-appr-panel[b-bz3s8ltn7f] {
    margin: 16px 0;
    padding: 14px 16px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.ncr-appr-grid[b-bz3s8ltn7f] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 10px;
}
@media (max-width: 1100px) { .ncr-appr-grid[b-bz3s8ltn7f] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .ncr-appr-grid[b-bz3s8ltn7f] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ncr-appr-grid[b-bz3s8ltn7f] { grid-template-columns: 1fr; } }
.ncr-appr-card[b-bz3s8ltn7f] {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--surface);
}
.ncr-appr-card--approved[b-bz3s8ltn7f] { border-color: var(--success); }
.ncr-appr-card--rejected[b-bz3s8ltn7f] { border-color: var(--danger); }
.ncr-appr-card--pending[b-bz3s8ltn7f]  { border-color: var(--accent); }
.ncr-appr-card--na[b-bz3s8ltn7f]       { opacity: .55; }
.ncr-appr-type[b-bz3s8ltn7f] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.ncr-appr-status[b-bz3s8ltn7f] { font-size: 13px; font-weight: 600; }
.ncr-appr-badge--approved[b-bz3s8ltn7f] { color: var(--success); }
.ncr-appr-badge--rejected[b-bz3s8ltn7f] { color: var(--danger); }
.ncr-appr-badge--pending[b-bz3s8ltn7f]  { color: var(--accent); }
.ncr-appr-badge--none[b-bz3s8ltn7f]     { color: var(--muted); }
.ncr-appr-meta[b-bz3s8ltn7f] { font-size: 11px; color: var(--muted); }
.ncr-appr-notes[b-bz3s8ltn7f] {
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
    border-left: 2px solid var(--border);
    padding-left: 8px;
    margin-top: 2px;
}
.ncr-appr-actions[b-bz3s8ltn7f] { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ncr-appr-picker[b-bz3s8ltn7f] { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ncr-appr-manager-select[b-bz3s8ltn7f] {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 8px;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    border-radius: 6px;
}
.ncr-appr-picker-actions[b-bz3s8ltn7f] { display: flex; gap: 6px; }

/* Approval chips in the NCR list "Approvals" column. */
/* On a DIV inside the cell, never on the <td> itself. display:flex takes a cell out of the
   table layout algorithm: it stops sizing with its column, and the border-bottom from the
   table's td rule draws across the collapsed box — a stray horizontal line in every row where
   the cell happens to be empty. */
.ncr-appr-cell[b-bz3s8ltn7f] { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.ncr-appr-chip[b-bz3s8ltn7f] {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.ncr-appr-chip--approved[b-bz3s8ltn7f] { color: var(--success); border-color: var(--success); }
.ncr-appr-chip--rejected[b-bz3s8ltn7f] { color: var(--danger);  border-color: var(--danger); }
.ncr-appr-chip--pending[b-bz3s8ltn7f]  { color: var(--accent);  border-color: var(--accent); }
.ncr-appr-chip--none[b-bz3s8ltn7f]     { color: var(--muted);   border-color: var(--border); }
/* /Components/Pages/Reports/ProcessReports.razor.rz.scp.css */
/* ── Comments (mirrors the TicketDetail / Incident thread so all report pages match tickets) ── */
.rep-comments[b-wbey608emt] {
    margin-top: 24px;
}

[b-wbey608emt] .comment-rte .ql-editor {
    min-height: 120px;
}

.comments-thread[b-wbey608emt] {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.comment-item[b-wbey608emt] {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

    .comment-item:first-child[b-wbey608emt] { padding-top: 0; }
    .comment-item:last-child[b-wbey608emt]  { border-bottom: none; }

.comment-header[b-wbey608emt] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.comment-author[b-wbey608emt]  { font-size: 12px; font-weight: 600; color: var(--text); }
.comment-time[b-wbey608emt]    { font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.comment-actions[b-wbey608emt] { margin-left: auto; display: flex; gap: 6px; }

.comment-body[b-wbey608emt] {
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 0;
}

.comment-edit-actions[b-wbey608emt] { display: flex; gap: 8px; margin-top: 8px; }
.comment-input-row[b-wbey608emt]    { margin-top: 4px; }

/* .btn-comment-action is a global style (app.css). */
/* /Components/Pages/Reports/ProductFaultReports.razor.rz.scp.css */
/* ── Comments (mirrors the TicketDetail / Incident thread so all report pages match tickets) ── */
.rep-comments[b-hwtayr39rq] {
    margin-top: 24px;
}

[b-hwtayr39rq] .comment-rte .ql-editor {
    min-height: 120px;
}

.comments-thread[b-hwtayr39rq] {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.comment-item[b-hwtayr39rq] {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

    .comment-item:first-child[b-hwtayr39rq] { padding-top: 0; }
    .comment-item:last-child[b-hwtayr39rq]  { border-bottom: none; }

.comment-header[b-hwtayr39rq] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.comment-author[b-hwtayr39rq]  { font-size: 12px; font-weight: 600; color: var(--text); }
.comment-time[b-hwtayr39rq]    { font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.comment-actions[b-hwtayr39rq] { margin-left: auto; display: flex; gap: 6px; }

.comment-body[b-hwtayr39rq] {
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 0;
}

.comment-edit-actions[b-hwtayr39rq] { display: flex; gap: 8px; margin-top: 8px; }
.comment-input-row[b-hwtayr39rq]    { margin-top: 4px; }

/* .btn-comment-action is a global style (app.css). */

/* ── DEV-SW-93: affected-items list ──────────────────────────────────────────
   A product fault can name several parts, each with its own serial. Part details are read-only
   (catalogue-only); serial and quantity are editable per row. Inputs inherit the global
   .rep-field input styling, so only layout is defined here. */
.rep-items-empty[b-hwtayr39rq] {
    font-size: 13px;
    color: var(--muted);
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: 6px;
}

/* The label carries the required-field highlight, since the parts are a table rather than an input. */
label.rep-invalid[b-hwtayr39rq] {
    color: var(--danger);
}

.rep-items-table[b-hwtayr39rq] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
    font-size: 13px;
}

    .rep-items-table th[b-hwtayr39rq] {
        text-align: left;
        font-weight: 600;
        font-size: 11px;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--muted);
        padding: 4px 8px 6px 0;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

    .rep-items-table td[b-hwtayr39rq] {
        padding: 6px 8px 6px 0;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }

.rep-items-col-serial[b-hwtayr39rq] { width: 22%; }
.rep-items-col-qty[b-hwtayr39rq]    { width: 90px; }
.rep-items-col-act[b-hwtayr39rq]    { width: 34px; }

.rep-items-remove[b-hwtayr39rq] {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    padding: 3px 8px;
    line-height: 1;
}

    .rep-items-remove:hover[b-hwtayr39rq] {
        border-color: var(--danger);
        color: var(--danger);
    }

/* Below tablet the table would overflow; let it scroll rather than break the form grid. */
@media (max-width: 991px) {
    .rep-items-table[b-hwtayr39rq] {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Hint under the part search: explains an empty result list rather than letting it look broken —
   either "keep typing" below the minimum, or "nothing matched" above it. Empty when neither applies,
   so it takes no space until it has something to say. */
.rep-search-hint[b-hwtayr39rq] {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
    min-height: 0;
}

    .rep-search-hint:empty[b-hwtayr39rq] {
        display: none;
    }
/* /Components/Pages/Rfid/RfidCatalogue.razor.rz.scp.css */
.rfid-shell[b-gvnynvukfy] {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 100%;
    position: relative;
    z-index: 1;
}

/* Pinned title — stays put while the table body scrolls. */
.rfid-header[b-gvnynvukfy] {
    flex-shrink: 0;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--border);
}

/* The scrolling region (its sticky thead pins the table headers). */
.rfid-body[b-gvnynvukfy] {
}

.rfid-eyebrow[b-gvnynvukfy] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--muted);
}

.rfid-title[b-gvnynvukfy] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: var(--text);
    margin: 2px 0 0;
}

.rfid-state[b-gvnynvukfy] {
    padding: 40px;
    text-align: center;
    color: var(--muted);
}

/* Pinned toolbar — search + count stay visible above the scrolling table. */
.rfid-toolbar[b-gvnynvukfy] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
}

.rfid-search[b-gvnynvukfy] {
    flex: 0 1 360px;
    padding: 9px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 13px;
}

    .rfid-search[b-gvnynvukfy]::placeholder { color: var(--muted); opacity: .7; }

.rfid-count[b-gvnynvukfy] {
    font-size: 12px;
    color: var(--muted);
}

/* Selection actions (shown in the toolbar when rows are selected). */
.rfid-sel-actions[b-gvnynvukfy] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.rfid-sel-count[b-gvnynvukfy] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: .04em;
}

/* Row-select checkboxes. */
.rfid-check-col[b-gvnynvukfy] {
    width: 38px;
    text-align: center;
    white-space: nowrap;
}

.rfid-check-col input[type="checkbox"][b-gvnynvukfy] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--accent);
}

.rfid-row-selected[b-gvnynvukfy] {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.rfid-table-wrap[b-gvnynvukfy] {
    overflow: auto;          /* both axes: wide table scrolls sideways, long list scrolls down */
    max-height: 100%;        /* bound to the page-body so it scrolls internally, keeping thead pinned */
    border: 1px solid var(--border);
    border-radius: 4px;
}

.rfid-table[b-gvnynvukfy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.rfid-table thead th[b-gvnynvukfy] {
    text-align: left;
    padding: 10px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    position: sticky;   /* header row stays pinned as the table body scrolls */
    top: 0;
    z-index: 1;
}

.rfid-table tbody td[b-gvnynvukfy] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    white-space: nowrap;
}

.rfid-table tbody tr:last-child td[b-gvnynvukfy] { border-bottom: none; }
.rfid-table tbody tr:hover[b-gvnynvukfy] { background: color-mix(in srgb, var(--accent) 6%, transparent); }

.mono[b-gvnynvukfy] {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12.5px;
}

.muted[b-gvnynvukfy] { color: var(--muted); }

.epc-badge[b-gvnynvukfy] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid;
}

.epc-synced[b-gvnynvukfy] {
    color: #3fa34d;
    border-color: #3fa34d;
    background: color-mix(in srgb, #3fa34d 10%, transparent);
}

.epc-pending[b-gvnynvukfy] {
    color: #d69e2e;
    border-color: #d69e2e;
    background: color-mix(in srgb, #d69e2e 12%, transparent);
}

/* ── Edit button + modal ── */
.rfid-edit-btn[b-gvnynvukfy] {
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .rfid-edit-btn:hover[b-gvnynvukfy] { border-color: var(--accent); color: var(--accent); }

.rfid-modal-overlay[b-gvnynvukfy] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 24px;
}

.rfid-modal[b-gvnynvukfy] {
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.rfid-modal-title[b-gvnynvukfy] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
}

.rfid-modal-sub[b-gvnynvukfy] {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 18px;
}

.rfid-modal-error[b-gvnynvukfy] {
    background: rgba(192, 88, 74, .1);
    border: 1px solid rgba(192, 88, 74, .25);
    border-left: 3px solid var(--danger);
    color: var(--danger);
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}

.rfid-form-grid[b-gvnynvukfy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

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

.rfid-field-label[b-gvnynvukfy] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.rfid-field-hint[b-gvnynvukfy] {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
}

.rfid-input[b-gvnynvukfy] {
    padding: 9px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 13px;
}

    .rfid-input:focus[b-gvnynvukfy] { outline: none; border-color: var(--accent); }

    .rfid-input:disabled[b-gvnynvukfy] {
        opacity: .45;
        cursor: not-allowed;
    }

/* Batch-edit "apply this field" toggle. */
.rfid-apply[b-gvnynvukfy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
}

    .rfid-apply input[type="checkbox"][b-gvnynvukfy] {
        width: 15px;
        height: 15px;
        cursor: pointer;
        accent-color: var(--accent);
    }

.rfid-modal-note[b-gvnynvukfy] {
    margin-top: 16px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted);
}

.rfid-modal-actions[b-gvnynvukfy] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.rfid-btn-cancel[b-gvnynvukfy] {
    padding: 9px 20px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

    .rfid-btn-cancel:hover:not(:disabled)[b-gvnynvukfy] { border-color: var(--accent); }
    .rfid-btn-cancel:disabled[b-gvnynvukfy] { opacity: .5; cursor: default; }

.rfid-btn-save[b-gvnynvukfy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 24px;
    background: var(--accent);
    border: none;
    color: #000;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .15s;
}

    .rfid-btn-save:hover:not(:disabled)[b-gvnynvukfy] { opacity: .85; }
    .rfid-btn-save:disabled[b-gvnynvukfy] { opacity: .5; cursor: default; }

@media (max-width: 620px) {
    .rfid-form-grid[b-gvnynvukfy] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-shell[b-cy530qnuxa] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    overflow-y: auto;
}

.settings-header[b-cy530qnuxa] {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.settings-eyebrow[b-cy530qnuxa] {
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.settings-title[b-cy530qnuxa] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

.settings-body[b-cy530qnuxa] {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 680px;
}

.settings-section[b-cy530qnuxa] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-section-header[b-cy530qnuxa] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.settings-section-hint[b-cy530qnuxa] {
    font-size: 11px;
    color: var(--muted);
    opacity: 0.7;
}

.settings-section-title[b-cy530qnuxa] {
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.settings-card[b-cy530qnuxa] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.settings-row[b-cy530qnuxa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 20px;
}

    .settings-row + .settings-row[b-cy530qnuxa] {
        border-top: 1px solid var(--border);
    }

.settings-row-info[b-cy530qnuxa] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.settings-row-label[b-cy530qnuxa] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.settings-row-desc[b-cy530qnuxa] {
    font-size: 12px;
    color: var(--muted);
}

.theme-btns[b-cy530qnuxa] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.theme-btn[b-cy530qnuxa] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
    border-radius: 3px;
}

    .theme-btn:hover[b-cy530qnuxa] { border-color: var(--accent); color: var(--accent); }
    .theme-btn.active[b-cy530qnuxa] { border-color: var(--accent); color: var(--accent); background: rgba(240,165,0,.08); }

/* ── Widget toggles ───────────────────────────────────────────────────────── */

.widget-list[b-cy530qnuxa] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.widget-item[b-cy530qnuxa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: border-color .15s;
}

    .widget-item--on[b-cy530qnuxa] {
        /* accent border intentionally removed */
    }

.widget-item-info[b-cy530qnuxa] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.widget-item-name[b-cy530qnuxa] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.widget-item-desc[b-cy530qnuxa] {
    font-size: 12px;
    color: var(--muted);
}

.toggle-switch[b-cy530qnuxa] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

    .toggle-switch input[b-cy530qnuxa] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-track[b-cy530qnuxa] {
    width: 40px;
    height: 22px;
    background: var(--border);
    border-radius: 11px;
    position: relative;
    transition: background .2s;
}

.toggle-switch input:checked ~ .toggle-track[b-cy530qnuxa] {
    background: var(--accent);
}

.toggle-thumb[b-cy530qnuxa] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
}

.toggle-switch input:checked ~ .toggle-track .toggle-thumb[b-cy530qnuxa] {
    transform: translateX(18px);
}

/* ── Notification dual toggles ───────────────────────────────────────────── */

.notif-header-row[b-cy530qnuxa] {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.notif-col-label[b-cy530qnuxa] {
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.notif-toggles[b-cy530qnuxa] {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-shrink: 0;
}

.notif-required[b-cy530qnuxa] {
    display: inline-block;
    margin-left: 8px;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 6px;
    vertical-align: middle;
}

.toggle-switch--locked[b-cy530qnuxa] {
    cursor: not-allowed;
    opacity: 0.55;
}

    .toggle-switch--locked .toggle-track[b-cy530qnuxa] {
        background: var(--accent);
    }

/* ── Integrations ──────────────────────────────────────────────────────────── */

.settings-integration-control[b-cy530qnuxa] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
}

.settings-input-save-row[b-cy530qnuxa] {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .settings-input-save-row .field-input[b-cy530qnuxa] {
        flex: 1;
        min-width: 0;
    }

.settings-save-success[b-cy530qnuxa] {
    font-size: 11px;
    color: var(--success, #4caf50);
}

.settings-save-error[b-cy530qnuxa] {
    font-size: 11px;
    color: var(--error-text, #f55);
}

@media (max-width: 576px) {
    .settings-row--wrap[b-cy530qnuxa] {
        flex-wrap: wrap;
    }

    .settings-integration-control[b-cy530qnuxa] {
        width: 100%;
    }
}

/* /Components/Pages/Tickets/ClosedTickets.razor.rz.scp.css */
/* Closed Tickets page styling. Blazor CSS isolation is per-component, so the tkt-*/filter/table/badge rules
   in Tickets.razor.css don't reach this separate page — these mirror the ones the closed list uses so it
   looks identical to the active Tickets page. (Header/shell/buttons come from global app.css.) */

/* ── Ticket reference badge ── */
.tkt-ref[b-dhb311ywxz] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(240,165,0,.08);
    border: 1px solid rgba(240,165,0,.2);
    padding: 2px 7px;
}

/* ── Filter bar ── */
.tkt-filter-bar[b-dhb311ywxz] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 48px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.tkt-filter-row[b-dhb311ywxz] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-group[b-dhb311ywxz] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.filter-group--fixed[b-dhb311ywxz] { width: 190px; }

.filter-search[b-dhb311ywxz] { flex: 1 1 240px; }

/* Compact SearchableSelect inside the filter bar, sized to match the native controls. */
.tkt-filter-bar :deep(.ss-input)[b-dhb311ywxz] {
    font-size: 12px;
    padding: 7px 10px;
    width: 100%;
    height: 32px;
}

.tkt-filter-row .filter-input[b-dhb311ywxz] {
    width: 100%;
    height: 32px;
    min-width: 0;
}

.filter-label[b-dhb311ywxz] {
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}

.filter-select[b-dhb311ywxz],
.filter-input[b-dhb311ywxz] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    padding: 7px 10px;
    outline: none;
    min-width: 160px;
    transition: border-color .15s;
}

    .filter-select:focus[b-dhb311ywxz], .filter-input:focus[b-dhb311ywxz] { border-color: var(--accent); }

/* ── Table + states ── */
.tkt-state[b-dhb311ywxz] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.tkt-empty[b-dhb311ywxz] {
    flex-direction: column;
    gap: 12px;
    opacity: .25;
}

.tkt-empty-icon[b-dhb311ywxz] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 48px;
    color: var(--accent);
}

.tkt-empty-label[b-dhb311ywxz] {
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--muted);
}

.error-text[b-dhb311ywxz] { color: var(--danger); font-size: 13px; }

.tkt-table[b-dhb311ywxz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tkt-table th[b-dhb311ywxz] {
    padding: 10px 16px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 1;
}

.tkt-row[b-dhb311ywxz] {
    border-bottom: 1px solid var(--border);
    transition: background .1s;
    cursor: pointer;
}

    .tkt-row:hover[b-dhb311ywxz] { background: var(--surface); }

.tkt-table td[b-dhb311ywxz] { padding: 12px 16px; vertical-align: middle; }

.ticket-title[b-dhb311ywxz] { color: var(--text); font-weight: 500; margin-bottom: 2px; }
.ticket-meta[b-dhb311ywxz]  { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; }

.muted[b-dhb311ywxz] { color: var(--muted); font-size: 12px; }

/* ── Column widths ── */
.col-ref[b-dhb311ywxz]      { width: 1%; white-space: nowrap; }
.col-title[b-dhb311ywxz]    { min-width: 220px; }
.col-dept[b-dhb311ywxz]     { width: 140px; }
.col-project[b-dhb311ywxz]  { width: 150px; }
.col-priority[b-dhb311ywxz] { width: 90px; }
.col-assignee[b-dhb311ywxz] { width: 140px; }
.col-created[b-dhb311ywxz]  { width: 100px; }
.col-status[b-dhb311ywxz]   { width: 130px; }

/* ── Priority badges ── */
.priority-badge[b-dhb311ywxz] {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    color: var(--muted);
    white-space: nowrap;
}

.priority-low[b-dhb311ywxz]      { border-color: var(--border);  color: var(--muted);   }
.priority-normal[b-dhb311ywxz]   { border-color: var(--accent);  color: var(--accent);  }
.priority-high[b-dhb311ywxz]     { border-color: #e08820;        color: #e08820;        }
.priority-critical[b-dhb311ywxz] { border-color: var(--danger);  color: var(--danger);  background: rgba(192,88,74,.06); }

/* ── Read-only status label (closed list) ── */
.status-badge[b-dhb311ywxz] {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--muted);
}

    .status-badge.status-neutral[b-dhb311ywxz] { border-color: var(--border);  color: var(--muted);   }
    .status-badge.status-accent[b-dhb311ywxz]  { border-color: var(--accent);  color: var(--accent);  }
    .status-badge.status-muted[b-dhb311ywxz]   { border-color: var(--muted);   color: var(--muted);   }
    .status-badge.status-success[b-dhb311ywxz] { border-color: var(--success); color: var(--success); }
    .status-badge.status-info[b-dhb311ywxz]    { border-color: var(--info);  color: var(--info);  }
    .status-badge.status-warning[b-dhb311ywxz] { border-color: var(--warning);  color: var(--warning);  }
    .status-badge.status-purple[b-dhb311ywxz] { border-color: var(--purple);  color: var(--purple);  }
    .status-badge.status-pink[b-dhb311ywxz] { border-color: var(--pink);  color: var(--pink);  }
    .status-badge.status-teal[b-dhb311ywxz] { border-color: var(--teal);  color: var(--teal);  }
    .status-badge.status-orange[b-dhb311ywxz] { border-color: var(--orange);  color: var(--orange);  }
    .status-badge.status-danger[b-dhb311ywxz]  { border-color: var(--danger);  color: var(--danger);  }
/* /Components/Pages/Tickets/TicketDetail.razor.rz.scp.css */
[b-57rrcuttb1] .comment-rte .ql-editor {
    min-height: 120px;
}

.tkt-shell[b-57rrcuttb1] {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 1;
}

/* ── State overlays ── */
.tkt-state[b-57rrcuttb1] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.error-text[b-57rrcuttb1] { color: var(--danger); font-size: 13px; }

/* The header is the global breadcrumb one (.fs-pg-header / .pg-crumb in app.css), as on concessions. */

/* ── Ticket reference badge ── */
.tkt-ref[b-57rrcuttb1] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(240,165,0,.08);
    border: 1px solid rgba(240,165,0,.2);
    padding: 2px 7px;
}

/* ── Category key badge ── */
.cat-key-badge[b-57rrcuttb1] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--accent);
    background: rgba(240,165,0,.07);
    border: 1px solid rgba(240,165,0,.2);
    padding: 1px 5px;
    white-space: nowrap;
}

.ncr-ref-badge[b-57rrcuttb1] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}

    .ncr-ref-badge:hover[b-57rrcuttb1] { text-decoration: underline; }

/* ── Buttons ── */
.btn-secondary[b-57rrcuttb1] {
    padding: 8px 18px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .btn-secondary:hover[b-57rrcuttb1] { border-color: var(--accent); color: var(--accent); }

.btn-create[b-57rrcuttb1] {
    padding: 11px 24px;
    background: var(--accent);
    color: var(--bg);
    border: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-create:hover:not(:disabled)[b-57rrcuttb1] { background: var(--accent2); }
    .btn-create:disabled[b-57rrcuttb1] { opacity: .5; cursor: default; }

/* .btn-comment-action is now a global style (app.css). */

/* SW-166: read-only (another department's) ticket indicator in the detail header. */
.tkt-viewonly-badge[b-57rrcuttb1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--muted);
    white-space: nowrap;
    cursor: default;
}

/* Priority icon colours (the icon is the only coloured part — the word stays in the text colour). */
.priority-low[b-57rrcuttb1]      { color: var(--muted);  }
.priority-normal[b-57rrcuttb1]   { color: var(--accent); }
.priority-high[b-57rrcuttb1]     { color: #e08820;       }
.priority-critical[b-57rrcuttb1] { color: var(--danger); }

.muted[b-57rrcuttb1] { color: var(--muted); font-size: 12px; }

/* ── Form ── */
.tkt-form-scroll[b-57rrcuttb1] {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.tkt-form[b-57rrcuttb1] {
    padding: 32px 48px 48px;
    max-width: 900px;
}

.field[b-57rrcuttb1] { display: flex; flex-direction: column; }

.field-label[b-57rrcuttb1] {
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.field-optional[b-57rrcuttb1] {
    font-size: 9px;
    letter-spacing: .1em;
    color: var(--muted);
    text-transform: none;
    font-weight: 400;
}

.field-input[b-57rrcuttb1] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 10px 13px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    resize: none;
}

    .field-input:focus[b-57rrcuttb1] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240,165,0,.08); }

    /* .field-input--warn is global now (app.css, "Soft field limits") — this copy existed only because
       CSS isolation meant each page needed its own. */

    /* Shown for context but not editable — muted rather than faded like a disabled control, because the
       value still has to be readable. */
    .field-input--locked[b-57rrcuttb1] {
        color: var(--muted);
        cursor: default;
    }

    .field-input--locked:focus[b-57rrcuttb1] {
        border-color: var(--border);
        box-shadow: none;
    }

/* .field-warn is global now — see app.css, "Soft field limits". */

/* A field whose input carries an inline action (the "Me" assign shortcut). The action sits on the same
   row as the control, so the label height matches its neighbours and the inputs across a form row stay
   aligned. Mirrors Tickets.razor.css — CSS isolation means each component needs its own copy. */
.field-with-action[b-57rrcuttb1] {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

    /* The select takes the remaining width; min-width:0 lets it shrink instead of overflowing the row. */
    .field-with-action[b-57rrcuttb1]  .ss-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

.btn-assign-me[b-57rrcuttb1] {
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--border);
    color: var(--accent);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 0 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, color .15s, opacity .15s;
}

    .btn-assign-me:hover:not(:disabled)[b-57rrcuttb1] { border-color: var(--accent); }

    .btn-assign-me:disabled[b-57rrcuttb1] {
        opacity: .45;
        color: var(--muted);
        cursor: default;
    }

.form-row-2[b-57rrcuttb1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-row-3[b-57rrcuttb1] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.global-error[b-57rrcuttb1] {
    background: rgba(192,88,74,.1);
    border: 1px solid rgba(192,88,74,.3);
    color: var(--danger);
    padding: 10px 13px;
    font-size: 12px;
    letter-spacing: .04em;
    margin-bottom: 20px;
}

/* Focus glow for SearchableSelect inside the form */
.tkt-form :deep(.ss-input:focus)[b-57rrcuttb1] {
    box-shadow: 0 0 0 3px rgba(240,165,0,.08);
}

/* ── Detail layout ── */
/* One scroller for both columns, not one each. A scrolling sidebar would clip the hover cards on its
   Assignee and Reporter, which open sideways out of a narrow column; the sidebar stays in view by being
   sticky instead. */
.tkt-detail-layout[b-57rrcuttb1] {
    flex: 1;
    display: flex;
    align-items: flex-start;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

    .tkt-detail-layout[b-57rrcuttb1]::-webkit-scrollbar       { width: 4px; }
    .tkt-detail-layout[b-57rrcuttb1]::-webkit-scrollbar-track  { background: transparent; }
    .tkt-detail-layout[b-57rrcuttb1]::-webkit-scrollbar-thumb  { background: var(--border); }

/* The column divider is the main column's edge rather than the sidebar's: the sidebar is only as tall as
   its fields, the main column runs the full length of the page. */
.tkt-detail-main[b-57rrcuttb1] {
    flex: 1;
    align-self: stretch;
    padding: 32px 40px 48px;
    min-width: 0;
    border-right: 1px solid var(--border);
}

/* Jira's right-hand column. */
.tkt-detail-sidebar[b-57rrcuttb1] {
    width: clamp(300px, 32%, 420px);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px 20px;
}

    /* Being sticky makes the column its own stacking context, so a hover card or picker opened in it can
       rise no higher than the column itself — and anything positioned in the main column (the Files box
       header) painted over the Assignee's card. Lifted only while it is in use, so a card opened in the
       main column is not drawn under the sidebar in turn. */
    .tkt-detail-sidebar:hover[b-57rrcuttb1],
    .tkt-detail-sidebar:focus-within[b-57rrcuttb1] { z-index: 20; }

/* ── Detail section ── */
.tkt-detail-section[b-57rrcuttb1] {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
}

.tkt-detail-section-title[b-57rrcuttb1] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}

.tkt-extra-field-list[b-57rrcuttb1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tkt-extra-field-row[b-57rrcuttb1] {
    display: flex;
    gap: 12px;
    font-size: 13px;
}

.tkt-extra-field-label[b-57rrcuttb1] {
    min-width: 140px;
    color: var(--muted);
    flex-shrink: 0;
}

.tkt-extra-field-value[b-57rrcuttb1] {
    color: var(--text);
    word-break: break-word;
}

.tkt-detail-text[b-57rrcuttb1] {
    font-size: 13px;
    color: var(--text);
    line-height: 1.7;
    white-space: pre-wrap;
    margin: 0;
}

/* ── Sidebar ── */
/* Status first, as a button, with Watch beside it — the top of Jira's right-hand column. */
.tkt-side-top[b-57rrcuttb1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 36px;
}

.tkt-side-picker[b-57rrcuttb1] { flex: 1 1 200px; min-width: 0; }

/* The status, tinted in its own colour. Same colours as the status pills in the history and the child
   list, so a status looks like itself wherever it appears. */
.tkt-status-btn[b-57rrcuttb1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    background: color-mix(in srgb, currentColor 14%, transparent);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s;
}

    .tkt-status-btn:hover:not(.is-static)[b-57rrcuttb1] {
        background: color-mix(in srgb, currentColor 22%, transparent);
        border-color: currentColor;
    }

    .tkt-status-btn:focus-visible[b-57rrcuttb1] { outline: 2px solid var(--accent); outline-offset: 1px; }
    .tkt-status-btn.is-static[b-57rrcuttb1] { cursor: default; }
    .tkt-status-btn.status-accent[b-57rrcuttb1]  { color: var(--accent); }
    .tkt-status-btn.status-muted[b-57rrcuttb1]   { color: var(--muted); }
    .tkt-status-btn.status-success[b-57rrcuttb1] { color: var(--success); }
    .tkt-status-btn.status-info[b-57rrcuttb1]    { color: var(--info); }
    .tkt-status-btn.status-warning[b-57rrcuttb1] { color: var(--warning); }
    .tkt-status-btn.status-purple[b-57rrcuttb1]  { color: var(--purple); }
    .tkt-status-btn.status-pink[b-57rrcuttb1]    { color: var(--pink); }
    .tkt-status-btn.status-teal[b-57rrcuttb1]    { color: var(--teal); }
    .tkt-status-btn.status-orange[b-57rrcuttb1]  { color: var(--orange); }
    .tkt-status-btn.status-danger[b-57rrcuttb1]  { color: var(--danger); }

.tkt-status-chev[b-57rrcuttb1] { font-size: 11px; opacity: .8; }

.tkt-watch[b-57rrcuttb1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: border-color .12s, color .12s;
}

    .tkt-watch:hover:not(:disabled)[b-57rrcuttb1] { border-color: var(--accent); color: var(--accent); }
    .tkt-watch.is-on[b-57rrcuttb1] { color: var(--accent); border-color: var(--accent); }
    .tkt-watch:disabled[b-57rrcuttb1] { opacity: .6; cursor: default; }

/* Label on the left, value on the right, one field per row — Jira's Details box. The rows are a grid
   rather than per-row flex so every value starts at the same x however long its label is. */
.tkt-fields[b-57rrcuttb1] {
    display: grid;
    grid-template-columns: minmax(90px, 38%) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    padding-top: 10px;
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    color: var(--text);
}

.tkt-field-label[b-57rrcuttb1] { font-weight: 600; color: var(--text); }

.tkt-field-value[b-57rrcuttb1] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 34px;
    overflow-wrap: break-word;
}

    .tkt-field-value--wrap[b-57rrcuttb1] { flex-wrap: wrap; row-gap: 2px; }

    /* The shared bubble is sized for a history line; a field row wants it smaller. */
    .tkt-field-value[b-57rrcuttb1]  .hist-avatar { width: 24px; height: 24px; font-size: 9px; }

/* Priority: icon then word. */
.tkt-priority[b-57rrcuttb1] { display: inline-flex; align-items: center; gap: 6px; }

.tkt-priority-icon[b-57rrcuttb1] { flex: 0 0 auto; }

/* ── Inline-editable fields ── */
/* The value is the control. It looks like the plain value until hovered, so an editor and a read-only
   viewer see the same sidebar, and the hover is what says "this can be changed". */
.tkt-inline-btn[b-57rrcuttb1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    margin: -3px -6px;
    padding: 3px 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .tkt-inline-btn:hover[b-57rrcuttb1] { background: var(--bg); border-color: var(--border); }
    .tkt-inline-btn:focus-visible[b-57rrcuttb1] { outline: 2px solid var(--accent); outline-offset: 1px; }

.tkt-inline-empty[b-57rrcuttb1] { color: var(--muted); }

.tkt-inline-saving[b-57rrcuttb1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
}

    .tkt-inline-saving .spinner[b-57rrcuttb1] { border-color: var(--border); border-top-color: var(--accent); }

/* ── Below desktop: one scrolling column ── */
/* Side by side, the sidebar took a third of a tablet and most of a phone. Below 992px it moves above the
   content at full width, so Status and Assignee — the fields people come to change — are first on screen. */
@media (max-width: 991px) {
    /* The shell scrolls, not the layout under the header, so the header goes with the page here — a pinned
       header costs the most on the screens with the least height to spare. */
    .tkt-shell[b-57rrcuttb1] { overflow-y: auto; }

    .tkt-detail-layout[b-57rrcuttb1] { flex: none; flex-direction: column; overflow: visible; }

    .tkt-detail-layout[b-57rrcuttb1] { align-items: stretch; }

    .tkt-detail-main[b-57rrcuttb1] { padding: 24px 24px 40px; border-right: none; }

    .tkt-detail-sidebar[b-57rrcuttb1] {
        order: -1;
        width: auto;
        position: static;
        border-bottom: 1px solid var(--border);
        padding: 20px 24px;
    }

    .tkt-form[b-57rrcuttb1] { padding: 24px; }

    .form-row-3[b-57rrcuttb1] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 576px) {
    .tkt-detail-main[b-57rrcuttb1] { padding: 20px 16px 32px; }

    .tkt-detail-sidebar[b-57rrcuttb1] { padding: 16px; }

    /* A finger, not a pointer. */
    .tkt-inline-btn[b-57rrcuttb1],
    .tkt-status-btn[b-57rrcuttb1],
    .tkt-watch[b-57rrcuttb1] { min-height: 40px; }

    .tkt-form[b-57rrcuttb1] { padding: 20px 16px 32px; }

    .form-row-2[b-57rrcuttb1],
    .form-row-3[b-57rrcuttb1] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ── Spinners ── */
.spinner[b-57rrcuttb1] {
    width: 13px;
    height: 13px;
    border: 1.5px solid rgba(13,17,23,.3);
    border-top-color: var(--bg);
    border-radius: 50%;
    animation: spin-b-57rrcuttb1 .6s linear infinite;
}

.spinner-lg[b-57rrcuttb1] {
    width: 22px;
    height: 22px;
    border-width: 2px;
    border-color: var(--border);
    border-top-color: var(--accent);
}

@keyframes spin-b-57rrcuttb1 { to { transform: rotate(360deg); } }

/* ── Linked documents ── */
.tkt-linked-docs[b-57rrcuttb1] { display: flex; flex-direction: column; gap: 6px; }

.tkt-linked-doc-link[b-57rrcuttb1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    width: fit-content;
    transition: background .15s, color .15s;
}

    .tkt-linked-doc-link:hover[b-57rrcuttb1] { background: var(--accent); color: #fff; }

    .tkt-linked-doc-link[b-57rrcuttb1]::before { content: "↗"; font-size: 11px; opacity: .7; }

/* ── Linked docs picker (edit form) ── */
.tkt-doc-picker[b-57rrcuttb1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface2);
}

.tkt-doc-pick-item[b-57rrcuttb1] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 2px;
}

    .tkt-doc-pick-item input[type="checkbox"][b-57rrcuttb1] { flex-shrink: 0; accent-color: var(--accent); }

.tkt-doc-pick-badge[b-57rrcuttb1] {
    font-family: monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--accent);
    color: #fff;
    flex-shrink: 0;
}

.tkt-doc-pick-name[b-57rrcuttb1] {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Parent / child ticket navigation (sidebar) ── */
.tkt-nav-link:hover[b-57rrcuttb1] { text-decoration: underline; }

.tkt-child-list[b-57rrcuttb1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tkt-child-link[b-57rrcuttb1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

    .tkt-child-link:hover .tkt-child-title[b-57rrcuttb1] { color: var(--accent); }

.tkt-child-title[b-57rrcuttb1] {
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Create-subtask modal (window overlay, mirrors the ticket quick-view popup) ── */
.fb-modal-backdrop[b-57rrcuttb1] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1000;
}

.fb-modal[b-57rrcuttb1] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    width: min(720px, calc(100vw - 48px));
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .4);
    overflow: hidden;
}

.fb-modal-header[b-57rrcuttb1] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.fb-modal-head-left[b-57rrcuttb1] { display: flex; align-items: center; gap: 10px; }

.fb-modal-ref[b-57rrcuttb1] {
    font-size: 12px;
    letter-spacing: .1em;
    font-weight: 600;
    color: var(--muted);
}

.fb-modal-close[b-57rrcuttb1] {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
    .fb-modal-close:hover[b-57rrcuttb1] { color: var(--text); }

.fb-modal-body[b-57rrcuttb1] {
    overflow-y: auto;
    padding: 20px 22px 26px;
}

.fb-modal-footer[b-57rrcuttb1] {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
}

/* ── Child tickets list (main/center view) ── */
.tkt-child-main-list[b-57rrcuttb1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tkt-child-main-row[b-57rrcuttb1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    cursor: pointer;
}
    .tkt-child-main-row:hover[b-57rrcuttb1] { border-color: var(--accent); }

.tkt-child-main-title[b-57rrcuttb1] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--text);
}

.tkt-child-main-assignee[b-57rrcuttb1] {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--muted);
}

.tkt-child-main-dept[b-57rrcuttb1] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 2px 8px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
}

.tkt-child-main-status[b-57rrcuttb1],
.tkt-status-pill[b-57rrcuttb1] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    background: color-mix(in srgb, currentColor 12%, transparent);
    white-space: nowrap;
}
    .tkt-child-main-status.status-accent[b-57rrcuttb1],
    .tkt-status-pill.status-accent[b-57rrcuttb1]  { color: var(--accent); border-color: var(--accent); }
    .tkt-child-main-status.status-muted[b-57rrcuttb1],
    .tkt-status-pill.status-muted[b-57rrcuttb1]   { color: var(--muted); border-color: var(--muted); }
    .tkt-child-main-status.status-success[b-57rrcuttb1],
    .tkt-status-pill.status-success[b-57rrcuttb1] { color: var(--success); border-color: var(--success); }
    .tkt-child-main-status.status-info[b-57rrcuttb1],
    .tkt-status-pill.status-info[b-57rrcuttb1]    { color: var(--info); border-color: var(--info); }
    .tkt-child-main-status.status-warning[b-57rrcuttb1],
    .tkt-status-pill.status-warning[b-57rrcuttb1] { color: var(--warning); border-color: var(--warning); }
    .tkt-child-main-status.status-purple[b-57rrcuttb1],
    .tkt-status-pill.status-purple[b-57rrcuttb1]  { color: var(--purple); border-color: var(--purple); }
    .tkt-child-main-status.status-pink[b-57rrcuttb1],
    .tkt-status-pill.status-pink[b-57rrcuttb1]    { color: var(--pink); border-color: var(--pink); }
    .tkt-child-main-status.status-teal[b-57rrcuttb1],
    .tkt-status-pill.status-teal[b-57rrcuttb1]    { color: var(--teal); border-color: var(--teal); }
    .tkt-child-main-status.status-orange[b-57rrcuttb1],
    .tkt-status-pill.status-orange[b-57rrcuttb1]  { color: var(--orange); border-color: var(--orange); }
    .tkt-child-main-status.status-danger[b-57rrcuttb1],
    .tkt-status-pill.status-danger[b-57rrcuttb1]  { color: var(--danger); border-color: var(--danger); }
/* /Components/Pages/Tickets/Tickets.razor.rz.scp.css */
/* ── Comment rich-text editor sizing ── */
[b-iedan192v8] .comment-rte .ql-editor {
    min-height: 120px;
}

/* New-ticket form header: back button sits to the left of the title (matches detail pages). */
.fs-pg-header-left[b-iedan192v8] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tkt-shell[b-iedan192v8] {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 1;
}

/* ── Success banner ── */
.tkt-success-banner[b-iedan192v8] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #d1fae5;
    color: #065f46;
    border-bottom: 1px solid #6ee7b7;
    padding: 10px 48px;
    font-size: 13px;
    font-weight: 500;
    /* Stays for 5 seconds (matches the code-behind that clears it), visible almost the whole time. */
    animation: fadeInOut-b-iedan192v8 5s ease forwards;
}

@keyframes fadeInOut-b-iedan192v8 {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { opacity: 0; }
}

/* "Open ticket →" link in the success banner. */
.tkt-success-link[b-iedan192v8] {
    border: 1px solid #065f46;
    background: transparent;
    color: #065f46;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    cursor: pointer;
}
.tkt-success-link:hover[b-iedan192v8] { background: #065f46; color: #fff; }

/* ── Header ── */
.tkt-header[b-iedan192v8] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 24px 24px 18px;
    border-bottom: 1px solid var(--border);
    position: relative;
    gap: 16px;
}

.tkt-header-left[b-iedan192v8] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.tkt-header-actions[b-iedan192v8] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.tkt-eyebrow[b-iedan192v8] {
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tkt-title[b-iedan192v8] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

/* ── Ticket reference badge ── */
.tkt-ref[b-iedan192v8] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(240,165,0,.08);
    border: 1px solid rgba(240,165,0,.2);
    padding: 2px 7px;
}

/* ── Buttons ── */
.btn-secondary[b-iedan192v8] {
    padding: 8px 18px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .btn-secondary:hover[b-iedan192v8] { border-color: var(--accent); color: var(--accent); }

.btn-create[b-iedan192v8] {
    padding: 11px 24px;
    background: var(--accent);
    color: var(--bg);
    border: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-create:hover:not(:disabled)[b-iedan192v8] { background: var(--accent2); }
    .btn-create:disabled[b-iedan192v8] { opacity: .5; cursor: default; }

/* ── Filter bar ── */
.tkt-filter-bar[b-iedan192v8] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;      /* stack the rows */
    align-items: stretch;
    gap: 12px;
    padding: 16px 48px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

/* A single row of the filter bar: controls left-to-right, wrapping if the width runs out. */
.tkt-filter-row[b-iedan192v8] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-group[b-iedan192v8] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

/* Uniform width for every dropdown group, so native <select> and SearchableSelect line up. */
.filter-group--fixed[b-iedan192v8] { width: 190px; }

.filter-search[b-iedan192v8] { flex: 1 1 240px; }

/* Compact SearchableSelect inside the filter bar, sized to match the native controls. */
.tkt-filter-bar :deep(.ss-input)[b-iedan192v8] {
    font-size: 12px;
    padding: 7px 10px;
    width: 100%;
    height: 32px;
}

/* One shared control height across native selects, SearchableSelect and the yes/no toggles. */
.tkt-filter-row .filter-input[b-iedan192v8] {
    width: 100%;
    height: 32px;
    min-width: 0;
}

.tkt-filter-row .rep-yesno-group[b-iedan192v8] {
    height: 32px;
    margin-bottom: 0;
    align-items: stretch;        /* options fill the full height */
}

.tkt-filter-row .rep-yesno-opt[b-iedan192v8] {
    padding: 0 14px;
    font-size: 12px;
}

/* The Filters box sits inside the filter bar; its rows need no extra frame of their own. */
.tkt-filter-bar[b-iedan192v8]  .cbox-body { padding: 12px 14px 14px; }
.tkt-filter-clear[b-iedan192v8] { padding: 3px 12px; font-size: 11px; }

/* List header actions (fs-pg-actions wraps; see app.css). */
.tkt-list-actions[b-iedan192v8] { gap: 10px; }

/* Focus glow for SearchableSelect inside forms */
.tkt-form :deep(.ss-input:focus)[b-iedan192v8] {
    box-shadow: 0 0 0 3px rgba(240,165,0,.08);
}

.filter-label[b-iedan192v8] {
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}

.filter-select[b-iedan192v8],
.filter-input[b-iedan192v8] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    padding: 7px 10px;
    outline: none;
    min-width: 160px;
    transition: border-color .15s;
}

    .filter-select:focus[b-iedan192v8], .filter-input:focus[b-iedan192v8] { border-color: var(--accent); }

/* ── Ticket table ── */
.tkt-body[b-iedan192v8] {
}

.tkt-state[b-iedan192v8] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.tkt-empty[b-iedan192v8] {
    flex-direction: column;
    gap: 12px;
    opacity: .25;
}

.tkt-empty-icon[b-iedan192v8] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 48px;
    color: var(--accent);
}

.tkt-empty-label[b-iedan192v8] {
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--muted);
}

.error-text[b-iedan192v8] { color: var(--danger); font-size: 13px; }

.tkt-table[b-iedan192v8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* Global table-heading format — matches .rep-table th in app.css. */
.tkt-table th[b-iedan192v8] {
    padding: 10px 16px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 1;
}

.tkt-row[b-iedan192v8] {
    border-bottom: 1px solid var(--border);
    transition: background .1s;
    cursor: pointer;
}

    .tkt-row:hover[b-iedan192v8] { background: var(--surface); }

/* SW-166: rows visible only by title (another department's ticket) — not openable. */
.tkt-row-locked[b-iedan192v8] { cursor: default; opacity: .72; }
    .tkt-row-locked:hover[b-iedan192v8] { background: transparent; }
.tkt-lock[b-iedan192v8] { margin-left: 5px; font-size: 11px; opacity: .75; }

.tkt-table td[b-iedan192v8] { padding: 12px 16px; vertical-align: middle; }

.ticket-title[b-iedan192v8] { color: var(--text); font-weight: 500; margin-bottom: 2px; }
.ticket-meta[b-iedan192v8]  { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; }

/* ── Category key badge ── */
.cat-key-badge[b-iedan192v8] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--accent);
    background: rgba(240,165,0,.07);
    border: 1px solid rgba(240,165,0,.2);
    padding: 1px 5px;
    white-space: nowrap;
}

/* ── Optional field hint ── */
.field-optional[b-iedan192v8] {
    font-size: 9px;
    letter-spacing: .1em;
    color: var(--muted);
    text-transform: none;
    font-weight: 400;
}
.muted[b-iedan192v8]        { color: var(--muted); font-size: 12px; }
.field-note[b-iedan192v8]   { color: var(--muted); font-size: 12px; line-height: 1.4; padding: 6px 0; }

/* ── Column widths ── */
.col-ref[b-iedan192v8]      { width: 1%; white-space: nowrap; }
.col-title[b-iedan192v8]    { min-width: 220px; }
.col-dept[b-iedan192v8]     { width: 140px; }
.col-project[b-iedan192v8]  { width: 150px; }
.col-sprint[b-iedan192v8]   { width: 130px; }
.col-priority[b-iedan192v8] { width: 90px; }
.col-assignee[b-iedan192v8] { width: 140px; }
.col-reporter[b-iedan192v8]      { width: 140px; }
.col-reporter-dept[b-iedan192v8] { width: 150px; }
.col-created[b-iedan192v8]  { width: 100px; }
/* min-width, not just width: the table lays out automatically and squeezed this to ~60px, cutting the
   status to "WAIT" / "AWAI". Department statuses can be long ("Awaiting PCB manufacture"). */
.col-status[b-iedan192v8]   { width: 190px; min-width: 190px; }

/* ── Status select ── */
.status-select[b-iedan192v8] {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 8px;
    cursor: pointer;
    outline: none;
    transition: border-color .15s, color .15s;
    -webkit-appearance: none;
}

    .status-select:focus[b-iedan192v8] { border-color: var(--accent); }
    .status-select.status-neutral[b-iedan192v8] { border-color: var(--border);  color: var(--muted);   }
    .status-select.status-accent[b-iedan192v8]  { border-color: var(--accent);  color: var(--accent);  }
    .status-select.status-muted[b-iedan192v8]   { border-color: var(--muted);   color: var(--muted);   }
    .status-select.status-success[b-iedan192v8] { border-color: var(--success); color: var(--success); }
    .status-select.status-info[b-iedan192v8]    { border-color: var(--info);  color: var(--info);  }
    .status-select.status-warning[b-iedan192v8] { border-color: var(--warning);  color: var(--warning);  }
    .status-select.status-purple[b-iedan192v8] { border-color: var(--purple);  color: var(--purple);  }
    .status-select.status-pink[b-iedan192v8] { border-color: var(--pink);  color: var(--pink);  }
    .status-select.status-teal[b-iedan192v8] { border-color: var(--teal);  color: var(--teal);  }
    .status-select.status-orange[b-iedan192v8] { border-color: var(--orange);  color: var(--orange);  }
    .status-select.status-danger[b-iedan192v8]  { border-color: var(--danger);  color: var(--danger);  }

/* ── Priority badges ── */
.priority-badge[b-iedan192v8] {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    color: var(--muted);
    white-space: nowrap;
}

.priority-low[b-iedan192v8]      { border-color: var(--border);  color: var(--muted);   }
.priority-normal[b-iedan192v8]   { border-color: var(--accent);  color: var(--accent);  }
.priority-high[b-iedan192v8]     { border-color: #e08820;        color: #e08820;        }
.priority-critical[b-iedan192v8] { border-color: var(--danger);  color: var(--danger);  background: rgba(192,88,74,.06); }

/* ── Form views ── */
.tkt-form-scroll[b-iedan192v8] {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.tkt-form[b-iedan192v8] {
    padding: 32px 48px 48px;
    max-width: 900px;
}

.field[b-iedan192v8] { display: flex; flex-direction: column; }

.field-label[b-iedan192v8] {
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

/* A field whose input carries an inline action (the "Me" assign shortcut). The action sits on the same
   row as the control, so the label height stays identical to its neighbours and the inputs across a
   form row still line up. */
.field-with-action[b-iedan192v8] {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

    /* The select takes the remaining width; min-width:0 lets it shrink instead of overflowing the row. */
    .field-with-action[b-iedan192v8]  .ss-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

.btn-assign-me[b-iedan192v8] {
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--border);
    color: var(--accent);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 0 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, color .15s, opacity .15s;
}

    .btn-assign-me:hover:not(:disabled)[b-iedan192v8] { border-color: var(--accent); }

    .btn-assign-me:disabled[b-iedan192v8] {
        opacity: .45;
        color: var(--muted);
        cursor: default;
    }

.field-input[b-iedan192v8] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 10px 13px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    resize: none;
}

    .field-input:focus[b-iedan192v8] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240,165,0,.08); }
    .field-input:disabled[b-iedan192v8] { opacity: .5; cursor: default; }

/* .field-input--warn and .field-warn are global now (app.css, "Soft field limits"). The copies that
   used to live here were identical. */

/* A value that is shown for context but cannot be changed. Muted rather than faded to .5 like a disabled
   control — this text still has to be readable, it just isn't editable. */
.field-input--locked[b-iedan192v8] {
    color: var(--muted);
    cursor: default;
}

    .field-input--locked:focus[b-iedan192v8] {
        border-color: var(--border);
        box-shadow: none;
    }
    .field-input.error[b-iedan192v8] { border-color: var(--danger); }

.field-textarea[b-iedan192v8] { resize: vertical; min-height: 80px; }

.form-row-2[b-iedan192v8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-row-3[b-iedan192v8] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.global-error[b-iedan192v8] {
    background: rgba(192,88,74,.1);
    border: 1px solid rgba(192,88,74,.3);
    color: var(--danger);
    padding: 10px 13px;
    font-size: 12px;
    letter-spacing: .04em;
    margin-bottom: 20px;
}

/* ── Detail layout ── */
.tkt-detail-layout[b-iedan192v8] {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.tkt-detail-main[b-iedan192v8] {
    flex: 1;
    overflow-y: auto;
    padding: 32px 40px 48px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    min-width: 0;
}

    .tkt-detail-main[b-iedan192v8]::-webkit-scrollbar      { width: 4px; }
    .tkt-detail-main[b-iedan192v8]::-webkit-scrollbar-track { background: transparent; }
    .tkt-detail-main[b-iedan192v8]::-webkit-scrollbar-thumb { background: var(--border); }

.tkt-detail-sidebar[b-iedan192v8] {
    width: 240px;
    flex-shrink: 0;
    border-left: 1px solid var(--border);
    padding: 28px 24px;
    overflow-y: auto;
    background: var(--surface);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* ── Detail section ── */
.tkt-detail-section[b-iedan192v8] {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
}

.tkt-detail-section-title[b-iedan192v8] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}

.tkt-detail-text[b-iedan192v8] {
    font-size: 13px;
    color: var(--text);
    line-height: 1.7;
    white-space: pre-wrap;
    margin: 0;
}

/* ── Tabs ── */
.tkt-tabs[b-iedan192v8] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
}

.tkt-tab[b-iedan192v8] {
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    margin-bottom: -1px;
}

    .tkt-tab:hover[b-iedan192v8] { color: var(--text); }

    .tkt-tab.active[b-iedan192v8] {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }

.tab-panel[b-iedan192v8] {
    padding: 24px 0 32px;
}

/* ── History timeline ── */
.history-timeline[b-iedan192v8] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 12px;
    border-left: 2px solid var(--border);
}

.history-entry[b-iedan192v8] {
    position: relative;
    padding: 0 0 16px 20px;
}

    .history-entry:last-child[b-iedan192v8] { padding-bottom: 0; }

.history-dot[b-iedan192v8] {
    position: absolute;
    left: -7px;
    top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    border: 2px solid var(--surface);
}

.history-content[b-iedan192v8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.history-text[b-iedan192v8] {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}

.history-time[b-iedan192v8] {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: .04em;
}

/* ── Comments ── */
.comments-thread[b-iedan192v8] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 20px;
}

.comment-item[b-iedan192v8] {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

    .comment-item:first-child[b-iedan192v8] { padding-top: 0; }
    .comment-item:last-child[b-iedan192v8]  { border-bottom: none; }

.comment-header[b-iedan192v8] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.comment-author[b-iedan192v8] { font-size: 12px; font-weight: 600; color: var(--text); }
.comment-time[b-iedan192v8]   { font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.comment-actions[b-iedan192v8] { margin-left: auto; display: flex; gap: 6px; }

/* .btn-comment-action is now a global style (app.css). */

.comment-body[b-iedan192v8] {
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 0;
}

.comment-edit-input[b-iedan192v8]   { margin-bottom: 8px; }
.comment-edit-actions[b-iedan192v8] { display: flex; gap: 8px; }
.comment-input-row[b-iedan192v8]    { margin-top: 4px; }

/* ── Sidebar fields ── */
.sidebar-field[b-iedan192v8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.sidebar-label[b-iedan192v8] {
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}

.sidebar-value[b-iedan192v8] {
    font-size: 13px;
    color: var(--text);
    word-break: break-word;
}

    .sidebar-value.status-neutral[b-iedan192v8] { color: var(--muted);   }
    .sidebar-value.status-accent[b-iedan192v8]  { color: var(--accent);  }
    .sidebar-value.status-muted[b-iedan192v8]   { color: var(--muted);   }
    .sidebar-value.status-success[b-iedan192v8] { color: var(--success); }
    .sidebar-value.status-info[b-iedan192v8]    { color: var(--info);  }
    .sidebar-value.status-warning[b-iedan192v8] { color: var(--warning);  }
    .sidebar-value.status-purple[b-iedan192v8] { color: var(--purple);  }
    .sidebar-value.status-pink[b-iedan192v8] { color: var(--pink);  }
    .sidebar-value.status-teal[b-iedan192v8] { color: var(--teal);  }
    .sidebar-value.status-orange[b-iedan192v8] { color: var(--orange);  }
    .sidebar-value.status-danger[b-iedan192v8]  { color: var(--danger);  }

.sidebar-divider[b-iedan192v8] {
    border-top: 1px solid var(--border);
    margin: 16px 0;
}

.sidebar-subscribe[b-iedan192v8] { margin-bottom: 0; }

.subscribe-label[b-iedan192v8] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--muted);
    user-select: none;
}

    .subscribe-label input[type="checkbox"][b-iedan192v8] { accent-color: var(--accent); cursor: pointer; }
    .subscribe-label:has(input:checked)[b-iedan192v8] { color: var(--accent); }

/* ── Spinner ── */
.spinner[b-iedan192v8] {
    width: 13px;
    height: 13px;
    border: 1.5px solid rgba(13,17,23,.3);
    border-top-color: var(--bg);
    border-radius: 50%;
    animation: spin-b-iedan192v8 .6s linear infinite;
}

.spinner-lg[b-iedan192v8] {
    width: 22px;
    height: 22px;
    border-width: 2px;
    border-color: var(--border);
    border-top-color: var(--accent);
}

/* ── Rich text editor (Quill host) ── */
.rte-host[b-iedan192v8] {
    min-height: 220px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
}

@keyframes spin-b-iedan192v8 { to { transform: rotate(360deg); } }

/* ── View toggle ── */
.view-toggle[b-iedan192v8] {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

/* Match the height of the adjacent button (.btn-primary: 8px vertical padding, 11px font). */
.view-toggle-btn[b-iedan192v8] {
    padding: 8px 14px;
    background: transparent;
    border: none;
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .view-toggle-btn + .view-toggle-btn[b-iedan192v8] { border-left: 1px solid var(--border); }

    .view-toggle-btn.active[b-iedan192v8] {
        background: var(--surface);
        color: var(--accent);
    }

/* ── Main tabs (Active / Closed) ── */
.tkt-tabs[b-iedan192v8] {
    display: flex;
    gap: 4px;
    padding: 0 48px;
    border-bottom: 1px solid var(--border);
}

.tkt-tab[b-iedan192v8] {
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

    .tkt-tab:hover[b-iedan192v8] { color: var(--text); }
    .tkt-tab.active[b-iedan192v8] { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Read-only status label (closed list) ── */
.status-badge[b-iedan192v8] {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--muted);
}

    .status-badge.status-neutral[b-iedan192v8] { border-color: var(--border);  color: var(--muted);   }
    .status-badge.status-accent[b-iedan192v8]  { border-color: var(--accent);  color: var(--accent);  }
    .status-badge.status-muted[b-iedan192v8]   { border-color: var(--muted);   color: var(--muted);   }
    .status-badge.status-success[b-iedan192v8] { border-color: var(--success); color: var(--success); }
    .status-badge.status-info[b-iedan192v8]    { border-color: var(--info);  color: var(--info);  }
    .status-badge.status-warning[b-iedan192v8] { border-color: var(--warning);  color: var(--warning);  }
    .status-badge.status-purple[b-iedan192v8] { border-color: var(--purple);  color: var(--purple);  }
    .status-badge.status-pink[b-iedan192v8] { border-color: var(--pink);  color: var(--pink);  }
    .status-badge.status-teal[b-iedan192v8] { border-color: var(--teal);  color: var(--teal);  }
    .status-badge.status-orange[b-iedan192v8] { border-color: var(--orange);  color: var(--orange);  }
    .status-badge.status-danger[b-iedan192v8]  { border-color: var(--danger);  color: var(--danger);  }

/* ── Closed-list pager ── */
.tkt-pager[b-iedan192v8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 48px;
}

.tkt-pager-info[b-iedan192v8] { font-size: 12px; color: var(--muted); }

.tkt-pager-controls[b-iedan192v8] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.tkt-pager-btn[b-iedan192v8] {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .08em;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .tkt-pager-btn:hover:not(:disabled)[b-iedan192v8] { border-color: var(--accent); color: var(--accent); }
    .tkt-pager-btn:disabled[b-iedan192v8] { opacity: .4; cursor: default; }

.tkt-pager-page[b-iedan192v8] { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }

.tkt-pager-jump[b-iedan192v8] {
    width: 56px;
    padding: 5px 6px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    text-align: center;
}

    .tkt-pager-jump:focus[b-iedan192v8] { outline: none; border-color: var(--accent); }

/* ── Kanban board ── */
.kanban-board[b-iedan192v8] {
    flex: 1;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    align-items: flex-start;
    min-height: 0;
}

    .kanban-board[b-iedan192v8]::-webkit-scrollbar       { height: 4px; }
    .kanban-board[b-iedan192v8]::-webkit-scrollbar-track  { background: transparent; }
    .kanban-board[b-iedan192v8]::-webkit-scrollbar-thumb  { background: var(--border); }

.kanban-col[b-iedan192v8] {
    flex-shrink: 0;
    width: 252px;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    max-height: 100%;
    overflow: hidden;
}

.kanban-col-header[b-iedan192v8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.kanban-col-title[b-iedan192v8] {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
}

    .kanban-col-title.status-neutral[b-iedan192v8] { color: var(--muted); }
    .kanban-col-title.status-accent[b-iedan192v8]  { color: var(--accent); }
    .kanban-col-title.status-muted[b-iedan192v8]   { color: var(--muted); }
    .kanban-col-title.status-success[b-iedan192v8] { color: var(--success); }
    .kanban-col-title.status-info[b-iedan192v8]    { color: var(--info); }
    .kanban-col-title.status-warning[b-iedan192v8] { color: var(--warning); }
    .kanban-col-title.status-purple[b-iedan192v8] { color: var(--purple); }
    .kanban-col-title.status-pink[b-iedan192v8] { color: var(--pink); }
    .kanban-col-title.status-teal[b-iedan192v8] { color: var(--teal); }
    .kanban-col-title.status-orange[b-iedan192v8] { color: var(--orange); }
    .kanban-col-title.status-danger[b-iedan192v8]  { color: var(--danger); }

.kanban-col-count[b-iedan192v8] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}

.kanban-col-body[b-iedan192v8] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

    .kanban-col-body[b-iedan192v8]::-webkit-scrollbar       { width: 3px; }
    .kanban-col-body[b-iedan192v8]::-webkit-scrollbar-track  { background: transparent; }
    .kanban-col-body[b-iedan192v8]::-webkit-scrollbar-thumb  { background: var(--border); }

.kanban-loading[b-iedan192v8] {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.kanban-empty[b-iedan192v8] {
    text-align: center;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 24px 8px;
    opacity: .4;
}

/* ── Kanban card ── */
.kanban-card[b-iedan192v8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color .15s;
}

    .kanban-card:hover[b-iedan192v8] { border-color: var(--accent); }

.kanban-card-top[b-iedan192v8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.kanban-card-title[b-iedan192v8] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
}

/* DEV-SW-113 stage 2: the card's own status, shown when it differs from the column it sits in
   (On Hold in To Do, Cancelled in Closed). Small and outlined so it reads as a label, not a button. */
.kanban-card-status[b-iedan192v8] {
    align-self: flex-start;
    display: inline-block;
    margin: 4px 0 2px;
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

    .kanban-card-status.status-neutral[b-iedan192v8] { border-color: var(--border);  color: var(--muted); }
    .kanban-card-status.status-muted[b-iedan192v8]   { border-color: var(--muted);   color: var(--muted); }
    .kanban-card-status.status-accent[b-iedan192v8]  { border-color: var(--accent);  color: var(--accent); }
    .kanban-card-status.status-success[b-iedan192v8] { border-color: var(--success); color: var(--success); }
    .kanban-card-status.status-danger[b-iedan192v8]  { border-color: var(--danger);  color: var(--danger); }
    .kanban-card-status.status-info[b-iedan192v8]    { border-color: var(--info);    color: var(--info); }
    .kanban-card-status.status-warning[b-iedan192v8] { border-color: var(--warning); color: var(--warning); }
    .kanban-card-status.status-purple[b-iedan192v8] { border-color: var(--purple); color: var(--purple); }
    .kanban-card-status.status-pink[b-iedan192v8] { border-color: var(--pink); color: var(--pink); }
    .kanban-card-status.status-teal[b-iedan192v8] { border-color: var(--teal); color: var(--teal); }
    .kanban-card-status.status-orange[b-iedan192v8] { border-color: var(--orange); color: var(--orange); }

/* ── Status groups inside a Kanban column ──
   When a column holds more than one status (Waiting + Awaiting PCB manufacture + Waiting for Baines), its
   cards are gathered under a heading per status, in the column's status order. The wrapper is
   display: contents so the cards stay direct flex items of the column body (same gaps as before). */
.kanban-status-groups[b-iedan192v8] { display: contents; }

.kanban-status-group-head[b-iedan192v8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 6px 2px 0;
    padding: 0 2px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

    .kanban-status-group-head:first-child[b-iedan192v8] { margin-top: 0; }

.kanban-status-group-name[b-iedan192v8] { min-width: 0; overflow-wrap: break-word; }

.kanban-status-group-count[b-iedan192v8] {
    flex: 0 0 auto;
    font-size: 10px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1px solid currentColor;
}

    .kanban-status-group-head.status-neutral[b-iedan192v8] { color: var(--muted); border-bottom-color: var(--border); }
    .kanban-status-group-head.status-muted[b-iedan192v8] { color: var(--muted); border-bottom-color: var(--muted); }
    .kanban-status-group-head.status-accent[b-iedan192v8] { color: var(--accent); border-bottom-color: var(--accent); }
    .kanban-status-group-head.status-success[b-iedan192v8] { color: var(--success); border-bottom-color: var(--success); }
    .kanban-status-group-head.status-danger[b-iedan192v8] { color: var(--danger); border-bottom-color: var(--danger); }
    .kanban-status-group-head.status-info[b-iedan192v8] { color: var(--info); border-bottom-color: var(--info); }
    .kanban-status-group-head.status-warning[b-iedan192v8] { color: var(--warning); border-bottom-color: var(--warning); }
    .kanban-status-group-head.status-purple[b-iedan192v8] { color: var(--purple); border-bottom-color: var(--purple); }
    .kanban-status-group-head.status-pink[b-iedan192v8] { color: var(--pink); border-bottom-color: var(--pink); }
    .kanban-status-group-head.status-teal[b-iedan192v8] { color: var(--teal); border-bottom-color: var(--teal); }
    .kanban-status-group-head.status-orange[b-iedan192v8] { color: var(--orange); border-bottom-color: var(--orange); }

.kanban-card-meta[b-iedan192v8] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.kanban-card-dept[b-iedan192v8] {
    font-size: 11px;
    color: var(--muted);
}

.kanban-card-footer[b-iedan192v8] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ── Assignee avatar ── */
.assignee-avatar[b-iedan192v8] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(240,165,0,.08);
    border: 1px solid rgba(240,165,0,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--accent);
    text-transform: uppercase;
    flex-shrink: 0;
}

    .assignee-avatar--none[b-iedan192v8] {
        background: var(--surface);
        border-color: var(--border);
        color: var(--muted);
        font-size: 13px;
    }

/* ── Kanban drag and drop ── */
.kanban-card[draggable="true"][b-iedan192v8] { cursor: grab; }

.kanban-card--dragging[b-iedan192v8] {
    opacity: .35;
    cursor: grabbing;
}

.kanban-col--over[b-iedan192v8] {
    border-color: var(--accent);
}

.kanban-col--over .kanban-col-body[b-iedan192v8] {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.kanban-drop-hint[b-iedan192v8] {
    text-align: center;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 24px 8px;
    opacity: .4;
    border: 1px dashed var(--border);
    margin: 4px;
}

.kanban-col--over .kanban-drop-hint[b-iedan192v8] {
    border-color: var(--accent);
    color: var(--accent);
    opacity: .7;
}

/* ── Kanban sort bar ── */
.kanban-sort-bar[b-iedan192v8] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--border);
}

.kanban-sort-label[b-iedan192v8] {
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 4px;
}

.kanban-sort-select[b-iedan192v8] {
    padding: 5px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
}

    .kanban-sort-select:hover[b-iedan192v8], .kanban-sort-select:focus[b-iedan192v8] { border-color: var(--accent); }

.kanban-sort-dir[b-iedan192v8] {
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    line-height: 1;
}

    .kanban-sort-dir:hover[b-iedan192v8] { border-color: var(--accent); color: var(--accent); }

/* ── Ticket file attachments ──────────────────────────────────────────────── */

.tkt-attach-list[b-iedan192v8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.tkt-attach-row[b-iedan192v8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--surface2);
    border-radius: 6px;
    font-size: 13px;
}

.tkt-attach-name[b-iedan192v8] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.tkt-attach-meta[b-iedan192v8] {
    color: var(--text-muted, #9ca3af);
    font-size: 12px;
    white-space: nowrap;
}

.tkt-attach-btn[b-iedan192v8] {
    font-size: 12px;
    color: var(--accent, #3b82f6);
    text-decoration: none;
    white-space: nowrap;
}

.tkt-attach-btn:hover[b-iedan192v8] { text-decoration: underline; }

.tkt-attach-del[b-iedan192v8] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #9ca3af);
    font-size: 14px;
    padding: 0 4px;
    line-height: 1;
}

.tkt-attach-del:hover[b-iedan192v8] { color: var(--error, #ef4444); }

.tkt-attach-empty[b-iedan192v8] {
    font-size: 12px;
    color: var(--text-muted, #9ca3af);
    margin-bottom: 12px;
}

.tkt-upload-row[b-iedan192v8] {
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tkt-upload-btn[b-iedan192v8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px dashed var(--border, #d1d5db);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.tkt-upload-btn:hover[b-iedan192v8] {
    border-color: var(--accent, #3b82f6);
    color: var(--accent, #3b82f6);
}

.reg-file-input[b-iedan192v8] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Linked documents picker ────────────────────────────── */
.tkt-doc-picker[b-iedan192v8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    background: var(--surface2);
}

.tkt-doc-pick-item[b-iedan192v8] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 2px;
}

.tkt-doc-pick-item input[type="checkbox"][b-iedan192v8] {
    flex-shrink: 0;
    accent-color: var(--accent, #3b82f6);
}

.tkt-doc-pick-badge[b-iedan192v8] {
    font-family: monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--accent, #3b82f6);
    color: #fff;
    flex-shrink: 0;
}

.tkt-doc-pick-name[b-iedan192v8] {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Linked docs in detail main area ───────────────────── */
.sidebar-field--stack[b-iedan192v8] {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.tkt-linked-docs[b-iedan192v8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tkt-linked-doc-link[b-iedan192v8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent, #3b82f6);
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid var(--accent, #3b82f6);
    border-radius: 6px;
    width: fit-content;
    transition: background 0.15s, color 0.15s;
}

.tkt-linked-doc-link:hover[b-iedan192v8] {
    background: var(--accent, #3b82f6);
    color: #fff;
}

.tkt-linked-doc-link[b-iedan192v8]::before {
    content: "↗";
    font-size: 11px;
    opacity: 0.7;
}


/* ── Group-by: list-view group headers (collapsible) ── */
.tkt-group-header-row td[b-iedan192v8] {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
}

.tkt-group-toggle[b-iedan192v8] {
    display: inline-block;
    width: 14px;
    margin-right: 4px;
    font-size: 11px;
    color: var(--muted);
}

.tkt-group-title[b-iedan192v8] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text);
}

.tkt-group-count[b-iedan192v8] {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 8px;
}

/* ── Group-by: Kanban swimlanes (bands spanning all status columns) ── */
.kanban-swimlanes[b-iedan192v8] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px 24px 24px;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* A row of columns; fixed-width cells define the scroll width, header row aligns to it. */
.kanban-lane-row[b-iedan192v8] {
    display: flex;
    gap: 2px;
    width: max-content;
    min-width: 100%;
    align-items: flex-start;
}

.kanban-head-row[b-iedan192v8] {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 0 0 4px;
    background: var(--bg);
}

.kanban-head-col[b-iedan192v8] {
    flex-shrink: 0;
    width: 252px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.kanban-swimlane[b-iedan192v8] {
    display: flex;
    flex-direction: column;
    width: max-content;
    min-width: 100%;
    margin-top: 16px;
}

/* Full-width band header — the clear separation between groups across every column. */
.kanban-swimlane-header[b-iedan192v8] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 12px;
    margin-bottom: 4px;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    cursor: pointer;
    user-select: none;
}

.kanban-swimlane-toggle[b-iedan192v8] {
    position: sticky;
    left: 12px;
    font-size: 12px;
    color: var(--muted);
}

.kanban-swimlane-title[b-iedan192v8] {
    position: sticky;
    left: 32px;                 /* keep the group label visible while scrolling horizontally */
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text);
}

.kanban-swimlane-count[b-iedan192v8] {
    position: sticky;
    left: 160px;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 8px;
}

.kanban-lane-col[b-iedan192v8] {
    flex-shrink: 0;
    width: 252px;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
}

/* ── Child ticket rows (nested beneath their parent in the list) ── */
.tkt-ref-wrap[b-iedan192v8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tkt-child-arrow[b-iedan192v8] {
    color: var(--muted);
    font-size: 13px;
    line-height: 1;
}

.tkt-row-child .ticket-title[b-iedan192v8] {
    font-weight: 400;
}

/* ── Create form on a tablet ── */
/* The same breakpoint as the ticket page's edit form: three columns become two. Phones are in the last
   block of this file. */
@media (max-width: 991px) {
    .tkt-form[b-iedan192v8] { padding: 24px; }

    .form-row-3[b-iedan192v8] { grid-template-columns: 1fr 1fr; }
}

/* ── Phones (≤ 576px, MonOps.Web/CLAUDE.md) ── kept LAST in this file: it overrides rules of the same
   weight above (.tkt-form, .form-row-2/3), which only works if it comes after them.
   + New Ticket leads its own full-width line, so it can never be the button pushed off the right edge;
   View / Closed tickets wrap beneath it. The filter bar loses its desktop gutters and every filter takes
   the full width instead of a fixed 190px column. */
@media (max-width: 576px) {
    .tkt-list-actions .btn-new[b-iedan192v8] {
        order: -1;
        flex: 1 1 100%;
        min-height: 44px;
        font-size: 13px;
    }

    .tkt-filter-bar[b-iedan192v8] { padding: 12px 16px; gap: 10px; }

    .tkt-filter-row[b-iedan192v8] { gap: 12px; }

    .filter-group--fixed[b-iedan192v8],
    .filter-search[b-iedan192v8] { width: 100%; flex: 1 1 100%; }

    /* New / edit ticket form: one column, every field full width (two or three side by side left
       Priority reading "Norm…" and the Assign To box a sliver beside its Me button). */
    .tkt-form[b-iedan192v8] { padding: 20px 16px 32px; }

    .form-row-2[b-iedan192v8],
    .form-row-3[b-iedan192v8] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
/* /Components/Pages/Utilities/BomReview.razor.rz.scp.css */
/* BOM Review (Utilities) — ported from the BOM Review Helper, restyled to MonOps tokens.
   Buttons (.btn-primary/.btn-secondary) and .error-text come from the global app.css. */

.bom-shell[b-bejvji8413] {
    padding: 1.25rem 1.5rem 2rem;
    max-width: 1400px;
}

.bom-header[b-bejvji8413] {
    margin-bottom: 1.25rem;
}

.bom-eyebrow[b-bejvji8413] {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
}

.bom-title[b-bejvji8413] {
    margin: .15rem 0 .25rem;
    color: var(--text);
}

.bom-lead[b-bejvji8413] {
    color: var(--muted);
    margin: 0;
}

.upload-grid[b-bejvji8413] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.upload-card[b-bejvji8413] {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    background: var(--surface);
}

.upload-card label[b-bejvji8413] {
    display: block;
    font-weight: 600;
    margin-bottom: .5rem;
    color: var(--text);
}

.file-name[b-bejvji8413] {
    display: block;
    margin-top: .5rem;
    font-size: .85rem;
    color: var(--muted);
}

.actions[b-bejvji8413] {
    display: flex;
    gap: .75rem;
    margin: 1rem 0 1.5rem;
    flex-wrap: wrap;
}

.bom-error[b-bejvji8413] {
    margin-bottom: 1rem;
}

.summary[b-bejvji8413] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}

.chip[b-bejvji8413] {
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    color: #1f2933;
}

.chip-total[b-bejvji8413] { background: #e4e7eb; }
.chip-ok[b-bejvji8413] { background: #c6efce; }
.chip-warn[b-bejvji8413] { background: #ffeb9c; }
.chip-crit[b-bejvji8413] { background: #ffc7ce; }
.chip-missing[b-bejvji8413] { background: #d9d9d9; }

/* "Show differences only" toggle — sits at the right of the summary row; filled when active. */
.bom-diff-toggle[b-bejvji8413] {
    margin-left: auto;
    padding: .3rem .8rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--surface, #fff);
    color: var(--text, #111827);
    border: 1px solid var(--border, #d1d5db);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.bom-diff-toggle:hover[b-bejvji8413] { border-color: var(--accent, #2563eb); }
.bom-diff-toggle.active[b-bejvji8413] {
    background: var(--accent, #2563eb);
    border-color: var(--accent, #2563eb);
    color: #fff;
}

.bom-no-diffs[b-bejvji8413] {
    text-align: center;
    padding: 1rem;
    color: var(--muted);
    font-style: italic;
}

.legend[b-bejvji8413] {
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: 1rem;
}

.swatch[b-bejvji8413] {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 4px;
    margin-left: .35rem;
    border: 1px solid #cbd2d9;
    color: #1f2933;
}

/* The wide table is allowed to size naturally on desktop so cell hover tooltips
   (rendered below via attr(title)) are not clipped. On tablet/mobile we switch to a
   horizontal-scroll container to avoid page overflow — hover tooltips don't apply on
   touch devices, so the clipping that overflow introduces there is harmless. */
.bom-table-scroll[b-bejvji8413] {
    overflow-x: visible;
}

@media (max-width: 991px) {
    .bom-table-scroll[b-bejvji8413] {
        overflow-x: auto;
    }
}

/* Restore the "hover an issue to see what's wrong" comment that the standalone tool
   showed. The text lives on a data-tip attribute (not title) so the browser does not
   also draw its own native tooltip — only this single styled tooltip shows. */
@media (hover: hover) {
    .results td[data-tip]:not([data-tip=""])[b-bejvji8413] {
        position: relative;
        cursor: help;
    }

    .results td[data-tip]:not([data-tip=""]):hover[b-bejvji8413]::after {
        content: attr(data-tip);
        position: absolute;
        left: 0;
        top: calc(100% + 4px);
        z-index: 60;
        width: max-content;
        max-width: 340px;
        white-space: pre-line;
        text-align: left;
        background: #1f2933;
        color: #fff;
        font-size: .78rem;
        font-weight: 400;
        font-style: normal;
        line-height: 1.35;
        padding: .4rem .55rem;
        border-radius: 6px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
        pointer-events: none;
    }
}

table.results[b-bejvji8413] {
    border-collapse: collapse;
    width: 100%;
    font-size: .85rem;
    color: #1f2933;
}

table.results th[b-bejvji8413],
table.results td[b-bejvji8413] {
    border: 1px solid #d2d6dc;
    padding: .4rem .55rem;
    text-align: left;
    vertical-align: top;
}

table.results thead th[b-bejvji8413] {
    background: #f0f4f8;
    position: sticky;
    top: 0;
    color: #1f2933;
}

table.results thead th .src[b-bejvji8413] {
    display: block;
    font-weight: 400;
    font-size: .72rem;
    color: #7b8794;
    margin-top: .15rem;
}

/* Stacked Altium-over-ERP layout: each part is a block of one Altium row over one or more ERP rows.
   A solid rule starts each block; dashed rules separate the lines within it. */
table.stacked tr.grp-top > td[b-bejvji8413] {
    border-top: 2px solid #b5bec7;
    border-bottom: 1px dashed #e1e6ea;
}

table.stacked tr.grp-mid > td[b-bejvji8413] {
    border-bottom: 1px dashed #e1e6ea;
}

table.stacked td.pn[b-bejvji8413] { font-weight: 600; }
table.stacked td.pn-merged[b-bejvji8413] { vertical-align: middle; }

table.stacked td.bom-tag[b-bejvji8413] {
    font-size: .72rem;
    font-weight: 600;
    color: #52606d;
    background: #f7f9fb;
    white-space: nowrap;
}

/* Semantic status colours — kept stable across light/dark themes for consistent meaning.
   Backgrounds are light, so cell text is forced dark for readability in dark mode. */
.cell-ok[b-bejvji8413] { background: #c6efce; color: #1f2933; }
.cell-warn[b-bejvji8413] { background: #ffeb9c; color: #1f2933; }
.cell-crit[b-bejvji8413] { background: #ffc7ce; color: #1f2933; }
.cell-missing[b-bejvji8413] { background: #d9d9d9; color: #3e4c59; font-style: italic; }
.cell-na[b-bejvji8413] { background: #fff; color: #7b8794; }

@media (max-width: 576px) {
    .upload-grid[b-bejvji8413] {
        grid-template-columns: 1fr;
    }
    .bom-shell[b-bejvji8413] {
        padding: 1rem;
    }
}

/* Per-side BOM format selector */
.bom-format-select[b-bejvji8413] {
    display: block;
    margin: 6px 0 10px;
    padding: 6px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    border-radius: 4px;
}
    .bom-format-select:focus[b-bejvji8413] { outline: none; border-color: var(--accent); }
/* /Components/Pages/Utilities/Fats/FatRuns.razor.rz.scp.css */
.fr-shell[b-u1lrpm1uzi] { display: flex; flex-direction: column; }

/* Search bar — matches the tickets page filter bar. */
.fr-filter-bar[b-u1lrpm1uzi] { flex-shrink: 0; display: flex; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.fr-filter-group[b-u1lrpm1uzi] { display: flex; flex-direction: column; gap: 5px; flex: 1 1 240px; min-width: 0; max-width: 420px; }
.fr-filter-label[b-u1lrpm1uzi] { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.fr-filter-input[b-u1lrpm1uzi] { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 12px; padding: 7px 10px; outline: none; transition: border-color .15s; }
.fr-filter-input:focus[b-u1lrpm1uzi] { border-color: var(--accent); }

.fr-state[b-u1lrpm1uzi] { padding: 40px; text-align: center; color: var(--muted); }

.fr-layout[b-u1lrpm1uzi] { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; padding: 20px 24px; }

/* Left list */
.fr-list-col[b-u1lrpm1uzi] { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.fr-list[b-u1lrpm1uzi] { max-height: 72vh; overflow-y: auto; }
.fr-row[b-u1lrpm1uzi] { display: block; width: 100%; text-align: left; padding: 12px 14px; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; }
.fr-row:hover[b-u1lrpm1uzi] { background: var(--bg); }
.fr-active[b-u1lrpm1uzi] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.fr-row-main[b-u1lrpm1uzi] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fr-row-name[b-u1lrpm1uzi] { font-weight: 600; }
.fr-row-sub[b-u1lrpm1uzi] { font-size: 12px; color: var(--muted); margin-top: 3px; }
.fr-empty[b-u1lrpm1uzi] { padding: 24px; text-align: center; color: var(--muted); }

/* Result badges */
.fr-badge[b-u1lrpm1uzi] { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .5px; }
.fr-badge-lg[b-u1lrpm1uzi] { font-size: 13px; padding: 4px 12px; }
.fr-pass[b-u1lrpm1uzi] { background: color-mix(in srgb, #16a34a 18%, transparent); color: #16a34a; }
.fr-fail[b-u1lrpm1uzi] { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }

/* Detail */
.fr-detail[b-u1lrpm1uzi] { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-height: 200px; }
.fr-detail-head[b-u1lrpm1uzi] { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.fr-detail-name[b-u1lrpm1uzi] { font-size: 18px; font-weight: 700; color: var(--text); }
.fr-detail-sub[b-u1lrpm1uzi] { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.fr-detail-right[b-u1lrpm1uzi] { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.fr-btn-ghost[b-u1lrpm1uzi] { padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--danger); cursor: pointer; }
.fr-btn-ghost:hover[b-u1lrpm1uzi] { background: var(--bg); }
.fr-notes[b-u1lrpm1uzi] { padding: 12px 20px; font-size: 13px; color: var(--text); border-bottom: 1px solid var(--border); font-style: italic; }

.fr-values[b-u1lrpm1uzi] { padding: 12px 20px; display: flex; flex-direction: column; gap: 8px; }
.fr-value-row[b-u1lrpm1uzi] { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.fr-value-main[b-u1lrpm1uzi] { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fr-value-label[b-u1lrpm1uzi] { font-weight: 600; color: var(--text); }
.fr-value-val[b-u1lrpm1uzi] { color: var(--text); }
.fr-value-desc[b-u1lrpm1uzi] { font-size: 12px; color: var(--muted); margin-top: 4px; }
.fr-value-result[b-u1lrpm1uzi] { margin-top: 6px; }
.fr-chip[b-u1lrpm1uzi] { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.fr-chip-pass[b-u1lrpm1uzi] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.fr-chip-fail[b-u1lrpm1uzi] { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.fr-chip-info[b-u1lrpm1uzi] { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

/* Modal */
.fr-modal-overlay[b-u1lrpm1uzi] { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.fr-modal[b-u1lrpm1uzi] { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px; width: 520px; max-width: 100%; max-height: 92vh; overflow-y: auto; }
.fr-modal-title[b-u1lrpm1uzi] { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.fr-modal-error[b-u1lrpm1uzi] { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; font-size: 13px; }

.fr-field[b-u1lrpm1uzi] { display: block; margin-bottom: 14px; }
.fr-field-label[b-u1lrpm1uzi] { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.fr-input[b-u1lrpm1uzi] { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); box-sizing: border-box; }
.fr-check[b-u1lrpm1uzi] { display: flex; align-items: center; gap: 8px; color: var(--text); }

.fr-runner-fields[b-u1lrpm1uzi] { display: flex; flex-direction: column; gap: 12px; max-height: 44vh; overflow-y: auto; padding: 4px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 8px; }
.fr-runner-field[b-u1lrpm1uzi] { border-bottom: 1px solid var(--border); padding: 8px 8px 12px; }
.fr-runner-field:last-child[b-u1lrpm1uzi] { border-bottom: none; }
.fr-num-line[b-u1lrpm1uzi] { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.fr-num[b-u1lrpm1uzi] { width: 140px; }
.fr-unit[b-u1lrpm1uzi] { color: var(--muted); }

.fr-modal-actions[b-u1lrpm1uzi] { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.fr-btn-cancel[b-u1lrpm1uzi] { padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; }
.fr-btn-save[b-u1lrpm1uzi] { padding: 9px 16px; border: none; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.fr-btn-save:disabled[b-u1lrpm1uzi], .fr-btn-cancel:disabled[b-u1lrpm1uzi] { opacity: .6; cursor: default; }

@media (max-width: 900px) {
    .fr-layout[b-u1lrpm1uzi] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Utilities/Fats/FatTemplates.razor.rz.scp.css */
.ft-shell[b-9ggtqc0r1q] { display: flex; flex-direction: column; }

/* Search bar — matches the tickets page filter bar. */
.ft-filter-bar[b-9ggtqc0r1q] { flex-shrink: 0; display: flex; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.ft-filter-group[b-9ggtqc0r1q] { display: flex; flex-direction: column; gap: 5px; flex: 1 1 240px; min-width: 0; max-width: 420px; }
.ft-filter-label[b-9ggtqc0r1q] { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.ft-filter-input[b-9ggtqc0r1q] { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 12px; padding: 7px 10px; outline: none; transition: border-color .15s; }
.ft-filter-input:focus[b-9ggtqc0r1q] { border-color: var(--accent); }

.ft-state[b-9ggtqc0r1q] { padding: 40px; text-align: center; color: var(--muted); }

.ft-layout[b-9ggtqc0r1q] { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; padding: 20px 24px; }

/* Left list */
.ft-list-col[b-9ggtqc0r1q] { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.ft-list[b-9ggtqc0r1q] { max-height: 70vh; overflow-y: auto; }
.ft-row[b-9ggtqc0r1q] { display: block; width: 100%; text-align: left; padding: 12px 14px; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; }
.ft-row:hover[b-9ggtqc0r1q] { background: var(--bg); }
.ft-active[b-9ggtqc0r1q] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ft-row-main[b-9ggtqc0r1q] { display: flex; align-items: center; gap: 8px; }
.ft-row-name[b-9ggtqc0r1q] { font-weight: 600; }
.ft-row-sub[b-9ggtqc0r1q] { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ft-empty[b-9ggtqc0r1q] { padding: 24px; text-align: center; color: var(--muted); }

/* Detail */
.ft-detail[b-9ggtqc0r1q] { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-height: 200px; }
.ft-detail-head[b-9ggtqc0r1q] { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.ft-detail-name[b-9ggtqc0r1q] { font-size: 18px; font-weight: 700; color: var(--text); display: flex; gap: 8px; align-items: center; }
.ft-detail-sub[b-9ggtqc0r1q] { font-size: 12px; color: var(--muted); margin-top: 3px; }
.ft-detail-desc[b-9ggtqc0r1q] { font-size: 13px; color: var(--text); margin-top: 6px; }
.ft-detail-actions[b-9ggtqc0r1q] { display: flex; gap: 8px; flex-shrink: 0; }
.ft-btn-ghost[b-9ggtqc0r1q] { padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; }
.ft-btn-ghost:hover[b-9ggtqc0r1q] { background: var(--bg); }

.ft-card[b-9ggtqc0r1q] { padding: 16px 20px; }
.ft-card-head[b-9ggtqc0r1q] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ft-card-title[b-9ggtqc0r1q] { font-weight: 600; color: var(--text); }
.ft-fields[b-9ggtqc0r1q] { display: flex; flex-direction: column; gap: 8px; }
.ft-field-row[b-9ggtqc0r1q] { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.ft-field-main[b-9ggtqc0r1q] { display: flex; align-items: center; gap: 8px; }
.ft-field-name[b-9ggtqc0r1q] { font-weight: 600; color: var(--text); }
.ft-type-pill[b-9ggtqc0r1q] { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.ft-field-desc[b-9ggtqc0r1q] { font-size: 12px; color: var(--muted); margin-top: 4px; }
.ft-field-rule[b-9ggtqc0r1q] { font-size: 12px; margin-top: 4px; }
.ft-rule-pass[b-9ggtqc0r1q] { color: var(--accent); font-weight: 600; }
.ft-rule-info[b-9ggtqc0r1q] { color: var(--muted); }

.ft-pill[b-9ggtqc0r1q] { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.ft-pill-off[b-9ggtqc0r1q] { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.ft-inactive-text[b-9ggtqc0r1q] { color: var(--muted); }

/* Modals */
.ft-modal-overlay[b-9ggtqc0r1q] { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.ft-modal[b-9ggtqc0r1q] { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px; width: 420px; max-width: 100%; max-height: 90vh; overflow-y: auto; }
.ft-modal-lg[b-9ggtqc0r1q] { width: 720px; }
.ft-modal-title[b-9ggtqc0r1q] { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.ft-modal-sub[b-9ggtqc0r1q] { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.ft-modal-error[b-9ggtqc0r1q] { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; font-size: 13px; }

.ft-field[b-9ggtqc0r1q] { display: block; margin-bottom: 14px; }
.ft-field-label[b-9ggtqc0r1q] { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.ft-input[b-9ggtqc0r1q] { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); box-sizing: border-box; }
.ft-check[b-9ggtqc0r1q] { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--text); }

/* Field editor */
.ft-editor[b-9ggtqc0r1q] { display: flex; flex-direction: column; gap: 12px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.ft-editor-row[b-9ggtqc0r1q] { border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ft-editor-line[b-9ggtqc0r1q] { display: flex; gap: 8px; align-items: center; }
.ft-grow[b-9ggtqc0r1q] { flex: 1; }
.ft-select[b-9ggtqc0r1q] { width: auto; min-width: 120px; }
.ft-editor-desc[b-9ggtqc0r1q] { width: 100%; }
.ft-editor-rule[b-9ggtqc0r1q] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ft-num[b-9ggtqc0r1q] { width: 90px; }
.ft-unit[b-9ggtqc0r1q] { width: 80px; }
.ft-rule-note[b-9ggtqc0r1q] { font-size: 12px; color: var(--muted); }
.ft-icon-btn[b-9ggtqc0r1q] { width: 32px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; }
.ft-icon-btn:hover[b-9ggtqc0r1q] { background: var(--bg); }
.ft-icon-danger[b-9ggtqc0r1q] { color: var(--danger); }
.ft-btn-addfield[b-9ggtqc0r1q] { margin-top: 10px; padding: 8px 12px; border: 1px dashed var(--border); border-radius: 8px; background: transparent; color: var(--accent); font-weight: 600; cursor: pointer; }

.ft-modal-actions[b-9ggtqc0r1q] { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.ft-btn-cancel[b-9ggtqc0r1q] { padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; }
.ft-btn-save[b-9ggtqc0r1q] { padding: 9px 16px; border: none; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.ft-btn-save:disabled[b-9ggtqc0r1q], .ft-btn-cancel:disabled[b-9ggtqc0r1q] { opacity: .6; cursor: default; }

@media (max-width: 900px) {
    .ft-layout[b-9ggtqc0r1q] { grid-template-columns: 1fr; }
    .ft-modal-lg[b-9ggtqc0r1q] { width: 100%; }
}
/* /Components/Pages/Utilities/Licence.razor.rz.scp.css */
/* Licences. The page structure is global: fs-pg-shell/header/title/actions, page-body, the list toolbar
   (.list-toolbar), the table (.rec-table), the pager, the house toggle (.toggle-*), buttons and the
   rep-badge pills. What is below is particular to this page: the list + panel layout, and the generator
   form and key card inside the panel. */

/* ── List + panel ── */
/* The list takes the page; the panel opens beside it. Below 992px there is no room for both, so the panel
   becomes a sheet over the list instead. */
.lic-layout[b-se5tuw633z] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.lic-layout--panel[b-se5tuw633z] { grid-template-columns: minmax(0, 1fr) 380px; }

.lic-main[b-se5tuw633z] { min-width: 0; }

.lic-panel[b-se5tuw633z] {
    position: sticky;
    top: 0;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    padding: 18px 20px 22px;
}

.lic-panel-head[b-se5tuw633z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.lic-panel-title[b-se5tuw633z] {
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
}

.lic-panel-close[b-se5tuw633z] {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--muted);
    width: 28px;
    height: 28px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

    .lic-panel-close:hover[b-se5tuw633z] { border-color: var(--accent); color: var(--accent); }

@media (max-width: 991px) {
    .lic-layout--panel[b-se5tuw633z] { grid-template-columns: minmax(0, 1fr); }

    .lic-panel[b-se5tuw633z] {
        position: fixed;
        inset: 52px 0 0 0;
        z-index: 60;
        max-height: none;
        border-radius: 0;
        border-width: 1px 0 0 0;
    }
}

/* The key card sits above the form once a licence is generated. */
.lic-panel .result-card[b-se5tuw633z] { margin-bottom: 18px; }

/* ── Rows ── */
.lic-sub[b-se5tuw633z] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 3px;
    font-size: 11px;
    color: var(--muted);
}

/* Archived rows stay readable but recede; the badge says why. */
.lic-row--archived td[b-se5tuw633z] { opacity: .6; }
.lic-row--archived td.rec-cell-actions[b-se5tuw633z] { opacity: 1; }

.lic-state[b-se5tuw633z] { padding: 24px 0; display: flex; justify-content: center; }

    .lic-state .spinner[b-se5tuw633z] {
        width: 22px;
        height: 22px;
        border: 2px solid var(--border);
        border-top-color: var(--accent);
    }

/* ── Generator form toggles ── */
.lic-toggles[b-se5tuw633z] { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 16px; }

/* ── Fields ── */
.field[b-se5tuw633z] {
    margin-bottom: 20px;
}

.field-label[b-se5tuw633z] {
    display: block;
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.field-input[b-se5tuw633z],
.field-select[b-se5tuw633z] {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 10px 13px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
}

.field-select[b-se5tuw633z] {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237d8590'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 34px;
}

    .field-input:focus[b-se5tuw633z],
    .field-select:focus[b-se5tuw633z] {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(240,165,0,.08);
    }

    .field-input.error[b-se5tuw633z] { border-color: var(--danger); }

.error-msg[b-se5tuw633z] {
    margin-top: 5px;
    font-size: 11px;
    color: var(--danger);
    letter-spacing: .04em;
}

/* ── Licence-holder + "use my name" shortcut ── */
.holder-row[b-se5tuw633z] {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

    .holder-row .field-input[b-se5tuw633z] { flex: 1; }

.holder-self-btn[b-se5tuw633z] {
    flex-shrink: 0;
    padding: 0 14px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .holder-self-btn:hover[b-se5tuw633z] { border-color: var(--accent); color: var(--accent); }

/* ── Trial date (conditional) ── */
.date-field[b-se5tuw633z] {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .25s ease, opacity .25s ease, margin .25s ease;
    margin-bottom: 0;
}

    .date-field.visible[b-se5tuw633z] {
        max-height: 72px;
        opacity: 1;
        margin-bottom: 20px;
        margin-top: 4px;
    }

/* ── Generate button ── */
.btn-generate[b-se5tuw633z] {
    width: 100%;
    margin-top: 12px;
    padding: 13px;
    background: var(--accent);
    color: var(--bg);
    border: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .btn-generate:hover:not(:disabled)[b-se5tuw633z] { background: var(--accent2); }
    .btn-generate:disabled[b-se5tuw633z] { opacity: .5; cursor: default; }

.spinner[b-se5tuw633z] {
    width: 13px;
    height: 13px;
    border: 1.5px solid rgba(13,17,23,.3);
    border-top-color: var(--bg);
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

.result-card[b-se5tuw633z] {
    background: var(--surface);
    border: 1px solid var(--border);
    position: relative;
    animation: fadeUp .35s ease forwards;
}

    .result-card[b-se5tuw633z]::before {
        content: '';
        position: absolute;
        top: -1px;
        left: 28px;
        right: 28px;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--accent), transparent);
    }

.result-card-header[b-se5tuw633z] {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.result-card-title[b-se5tuw633z] {
    font-size: 10px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--muted);
}

.result-status[b-se5tuw633z] {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid var(--success);
    color: var(--success);
}

    .result-status.error[b-se5tuw633z] {
        border-color: var(--danger);
        color: var(--danger);
    }

.result-key-wrap[b-se5tuw633z] { padding: 24px; }

.result-key[b-se5tuw633z] {
    font-size: 14px;
    color: var(--accent2);
    letter-spacing: .06em;
    word-break: break-all;
    line-height: 1.8;
    font-family: 'Barlow', sans-serif;
}

.result-error-msg[b-se5tuw633z] {
    padding: 24px;
    font-size: 12px;
    color: var(--danger);
    letter-spacing: .04em;
    line-height: 1.6;
}

.result-actions[b-se5tuw633z] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 24px 24px;
}

.btn-copy[b-se5tuw633z],
.btn-qr[b-se5tuw633z] {
    padding: 10px 18px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .btn-copy:hover[b-se5tuw633z]       { border-color: var(--accent);  color: var(--accent);  }
    .btn-copy.copied[b-se5tuw633z]      { border-color: var(--success); color: var(--success); }
    .btn-qr:hover[b-se5tuw633z]         { border-color: var(--accent);  color: var(--accent);  }
    .btn-qr.active[b-se5tuw633z]        { border-color: var(--accent);  color: var(--accent);  }

/* ── Licence-key QR ── */
.result-qr-wrap[b-se5tuw633z] {
    margin: 0 24px 24px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
}

.result-qr[b-se5tuw633z] {
    width: 200px;
    max-width: 100%;
    height: auto;
    image-rendering: pixelated;   /* keep the QR modules crisp when scaled */
    /* white quiet-zone so the code scans regardless of the panel background */
    background: #fff;
    padding: 10px;
}

.result-qr-note[b-se5tuw633z] {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

/* What happened besides the signing — e.g. a licence reissued under the current key. */
.result-detail[b-se5tuw633z] {
    margin: 0 24px 24px;
    padding: 10px 12px;
    border-left: 2px solid var(--accent);
    background: var(--bg);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text);
}
/* /Components/Pages/Utilities/PdfMarkup.razor.rz.scp.css */
/* PDF Markup styles now live on the reusable PdfMarkupList component (PdfMarkupList.razor.css). */
/* /Components/Pages/Utilities/PdfMarkupList.razor.rz.scp.css */
/* PDF Markup landing (Utilities) — upload + document list, MonOps tokens. */

.pm-closed-tag[b-dt68e5c6xo] { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* The page shell, header and tabs use the global styles (fs-pg-shell / fs-pg-header / fs-pg-title /
   tab-strip / tab-btn). The body mirrors the standard pages' padded, scrollable content area (their
   scoped .reg-content) so the table gets the same edge gap instead of running full-width. */
.pm-body[b-dt68e5c6xo] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 28px 48px 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.pm-upload[b-dt68e5c6xo] {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    background: var(--surface);
    margin-bottom: 1.25rem;
}

.pm-upload-label[b-dt68e5c6xo] {
    display: block;
    font-weight: 600;
    margin-bottom: .5rem;
    color: var(--text);
}

.pm-uploading[b-dt68e5c6xo] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: .75rem;
    color: var(--muted);
    font-size: .85rem;
}

.pm-error[b-dt68e5c6xo] {
    margin-top: .5rem;
}

.pm-state[b-dt68e5c6xo] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--muted);
}

.pm-empty[b-dt68e5c6xo] {
    border: 1px dashed var(--border);
    border-radius: 8px;
}

.pm-table-wrap[b-dt68e5c6xo] {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.pm-table[b-dt68e5c6xo] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    color: var(--text);
}

.pm-table thead th[b-dt68e5c6xo] {
    text-align: left;
    font-weight: 600;
    color: var(--muted);
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.pm-table td[b-dt68e5c6xo] {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--border);
}

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

.pm-row[b-dt68e5c6xo] {
    cursor: pointer;
}

.pm-row:hover[b-dt68e5c6xo] {
    background: var(--surface2);
}
/* On a DIV inside the cell, never on the <td> itself. display:flex takes a cell out of the
   table layout algorithm: it stops sizing with its column, and the border-bottom from the
   table's td rule draws across the collapsed box — a stray horizontal line in every row where
   the cell happens to be empty. */

.pm-actions[b-dt68e5c6xo] {
    text-align: right;
    white-space: nowrap;
    display: flex;
    gap: .4rem;
    justify-content: flex-end;
}

.pm-no-reviews[b-dt68e5c6xo] { color: var(--muted); }

.pm-doc-no[b-dt68e5c6xo] { font-weight: 700; white-space: nowrap; }

.pm-review-chips[b-dt68e5c6xo] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.pm-review-chip[b-dt68e5c6xo] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .72rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    white-space: nowrap;
}

    .pm-review-chip.done[b-dt68e5c6xo] {
        color: #166534;
        background: #dcfce7;
        border-color: #bbf7d0;
    }

    .pm-review-chip.pending[b-dt68e5c6xo] {
        color: var(--muted);
        background: var(--surface2);
    }

/* ── Approvals tab: comment-resolution column + approve error ── */
.pm-cmt-unresolved[b-dt68e5c6xo] { display: block; font-size: .72rem; font-weight: 600; color: var(--danger); }
.pm-cmt-resolved[b-dt68e5c6xo]   { display: block; font-size: .72rem; font-weight: 600; color: var(--success); }
.pm-cmt-breakdown[b-dt68e5c6xo]  { display: block; font-size: .68rem; color: var(--muted); margin-top: 1px; }

.pm-approve-error[b-dt68e5c6xo] {
    margin: 0 0 10px;
    padding: 8px 12px;
    border: 1px solid var(--danger);
    border-radius: 6px;
    color: var(--danger);
    font-size: 12px;
}

/* ── Request-review modal ── */
.pm-modal-backdrop[b-dt68e5c6xo] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.pm-modal[b-dt68e5c6xo] {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    width: 100%;
    max-width: 460px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}

.pm-modal-title[b-dt68e5c6xo] {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: .25rem;
}

.pm-modal-sub[b-dt68e5c6xo] {
    color: var(--muted);
    font-size: .85rem;
    margin: 0 0 .9rem;
}

.pm-modal-empty[b-dt68e5c6xo] {
    color: var(--muted);
    padding: 1rem 0;
}

.pm-reviewer-list[b-dt68e5c6xo] {
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: .75rem;
}

.pm-reviewer-row[b-dt68e5c6xo] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

    .pm-reviewer-row:last-child[b-dt68e5c6xo] { border-bottom: none; }
    .pm-reviewer-row:hover[b-dt68e5c6xo] { background: var(--surface2); }

.pm-reviewer-name[b-dt68e5c6xo] { font-weight: 500; }
.pm-reviewer-email[b-dt68e5c6xo] { color: var(--muted); font-size: .8rem; margin-left: auto; }

.pm-modal-actions[b-dt68e5c6xo] {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    margin-top: .25rem;
}

@media (max-width: 576px) {
    .pm-shell[b-dt68e5c6xo] {
        padding: 1rem;
    }
}
/* /Components/Pages/Utilities/PdfMarkupViewer.razor.rz.scp.css */
/* PDF Markup viewer page — gives the embedded PdfCollab editor a full-height area
   within the MonOps authenticated layout. */

.pmv-shell[b-r07sxbv61h] {
    display: flex;
    flex-direction: column;
    /* Fill the layout's main content area exactly. .layout-main is a flex column, so flex:1 makes
       this shell take all the remaining height below the topbar — no hard-coded 100vh calc, which
       overshot the real area and left an empty horizontal strip at the bottom of the page. */
    flex: 1 1 auto;
    min-height: 0;
}

.pmv-review-bar[b-r07sxbv61h] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .85rem;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    border-bottom: 1px solid var(--border);
    font-size: .9rem;
    color: var(--text);
}

.pmv-title-bar[b-r07sxbv61h] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .85rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

/* Version bar is three zones: left = nav (To Document / To PDF Markup) + status note,
   center = Prev version (kept centered by equal-flex sides), right = Next version. */
.pmv-actions-left[b-r07sxbv61h]   { flex: 1 1 0; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.pmv-actions-center[b-r07sxbv61h] { flex: 0 0 auto; display: flex; justify-content: center; }
.pmv-actions-right[b-r07sxbv61h]  { flex: 1 1 0; display: flex; justify-content: flex-end; }

.pmv-title-icon[b-r07sxbv61h] { font-size: 1rem; line-height: 1; }

.pmv-title-name[b-r07sxbv61h] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pmv-title-iter[b-r07sxbv61h] {
    flex: 0 0 auto;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    white-space: nowrap;
}

.pmv-review-text[b-r07sxbv61h] { flex: 1; }

.pmv-actions-bar[b-r07sxbv61h] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .85rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: .9rem;
    color: var(--text);
}

/* Push the "next version" button to the right-hand side of the actions bar. */

/* Banner shown when a newer iteration/revision of the document exists. */
.pmv-newer-banner[b-r07sxbv61h] {
    flex: 0 0 auto;
    padding: .5rem .85rem;
    background: rgba(240, 165, 0, .12);
    border-bottom: 1px solid rgba(240, 165, 0, .35);
    color: var(--accent);
    font-weight: 600;
    font-size: .9rem;
}

.pmv-approved-note[b-r07sxbv61h] {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    color: #92400e;
}

.pmv-viewer[b-r07sxbv61h] {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

/* The embedded PdfViewer root should fill this container. */
.pmv-viewer[b-r07sxbv61h]  .pdf-collab-root {
    height: 100%;
}
/* /Components/Shared/CommentEditHistory.razor.rz.scp.css */
.ceh[b-qkm41113ij] {
    position: relative;
    display: inline-block;
}

/* Looks like the plain "(edited)" muted tag, but is a clickable affordance. */
.ceh-trigger[b-qkm41113ij] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--muted);
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

    .ceh-trigger:hover[b-qkm41113ij] { color: var(--accent); }

/* Click-away catcher so the panel closes when clicking elsewhere. */
.ceh-backdrop[b-qkm41113ij] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.ceh-panel[b-qkm41113ij] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    /* popup-up / popup-left are set by uiPlacePopup when there is no room below or to the right — the
       last comment in a thread sits at the bottom of the page, which is exactly where this opened into
       the fold. See the rules at the end of this file. */
    z-index: 41;
    width: 340px;
    max-width: 80vw;
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    padding: 10px 12px;
    text-align: left;
    cursor: default;
}

.ceh-head[b-qkm41113ij] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 8px;
}

.ceh-state[b-qkm41113ij] { padding: 8px 0; }
.ceh-empty[b-qkm41113ij] { color: var(--muted); font-size: 12px; }

.ceh-item[b-qkm41113ij] {
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.ceh-meta[b-qkm41113ij] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.ceh-who[b-qkm41113ij] { font-size: 12px; font-weight: 600; color: var(--text); }
.ceh-when[b-qkm41113ij] { font-size: 11px; color: var(--muted); }

.ceh-tag[b-qkm41113ij] {
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
}

    .ceh-tag--added[b-qkm41113ij]   { color: var(--success); border-color: var(--success); }
    .ceh-tag--deleted[b-qkm41113ij] { color: var(--danger);  border-color: var(--danger); }

.ceh-body[b-qkm41113ij] {
    font-size: 12px;
    color: var(--text);
    line-height: 1.45;
    word-break: break-word;
}

    .ceh-body :deep(img)[b-qkm41113ij] { max-width: 100%; height: auto; }

.ceh-deleted[b-qkm41113ij] { color: var(--muted); font-style: italic; }

/* ── Flipped placement (set by uiPlacePopup) ─────────────────────────────────
   Opens upwards when the trigger is near the bottom of the window, and
   right-aligns when it would run off the right edge. Without these the panel
   on the newest comment in a thread — the one most likely to be opened — was
   cut off by the fold.
   ─────────────────────────────────────────────────────────────────────────── */

.ceh-panel.popup-up[b-qkm41113ij] {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 6px;
}

.ceh-panel.popup-left[b-qkm41113ij] {
    left: auto;
    right: 0;
}
/* /Components/Shared/SearchableMultiSelect.razor.rz.scp.css */
.ms-combo[b-39lelpqti2] { display: flex; flex-direction: column; gap: 8px; }
.ms-field[b-39lelpqti2] { position: relative; max-width: 420px; }

.ms-input[b-39lelpqti2] {
    width: 100%;
    padding: 7px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
}

.ms-results[b-39lelpqti2] {
    list-style: none;
    margin: 4px 0 0;
    padding: 4px;
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
    /* Never narrower than a part number and a readable name, even under a narrow field. */
    min-width: min(360px, calc(100vw - 32px));
}
    .ms-results li[b-39lelpqti2] { list-style: none; }

.ms-option[b-39lelpqti2] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 7px 8px;
    border-radius: 4px;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}
    .ms-option:hover[b-39lelpqti2] { background: var(--bg); }

/* One line per option: the number stays whole and a long name is cut short (the full name is its tooltip). */
.ms-option .ms-badge[b-39lelpqti2] { flex-shrink: 0; }

.ms-name[b-39lelpqti2] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-empty[b-39lelpqti2] { padding: 8px; color: var(--muted); font-size: 12px; }

.ms-badge[b-39lelpqti2] {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: 'Barlow Condensed', monospace;
    font-size: 12px;
    letter-spacing: .04em;
    white-space: nowrap;
}

.ms-tags[b-39lelpqti2] { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-tag[b-39lelpqti2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text);
    background: var(--surface);
}
.ms-tag-x[b-39lelpqti2] {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
}
    .ms-tag-x:hover[b-39lelpqti2] { color: var(--danger); }
/* /Components/Shared/SearchableSelect.razor.rz.scp.css */
.ss-wrap[b-ohtrdtkg2v] {
    position: relative;
    width: 100%;
}

.ss-input[b-ohtrdtkg2v] {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 10px 13px;
    outline: none;
    transition: border-color .15s;
    cursor: text;
    box-sizing: border-box;
}

    .ss-input:focus[b-ohtrdtkg2v] {
        border-color: var(--accent);
    }

    .ss-input[b-ohtrdtkg2v]::placeholder {
        color: var(--muted);
    }

.ss-dropdown[b-ohtrdtkg2v] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-top: none;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

    .ss-dropdown[b-ohtrdtkg2v]::-webkit-scrollbar       { width: 4px; }
    .ss-dropdown[b-ohtrdtkg2v]::-webkit-scrollbar-track  { background: transparent; }
    .ss-dropdown[b-ohtrdtkg2v]::-webkit-scrollbar-thumb  { background: var(--border); }

.ss-option[b-ohtrdtkg2v] {
    padding: 9px 13px;
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: background .1s;
    user-select: none;
}

    .ss-option:hover[b-ohtrdtkg2v] {
        background: var(--surface2);
    }

    .ss-option.ss-selected[b-ohtrdtkg2v] {
        color: var(--accent);
        background: var(--surface2);
    }

.ss-no-results[b-ohtrdtkg2v] {
    padding: 9px 13px;
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
}
/* /Components/Shared/TicketPopup.razor.rz.scp.css */
/* Shared ticket quick-view popup — mirrors the original Feedback (bug report) modal styling. */

.fb-modal-backdrop[b-0yqdpizrel] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1000;
}

.fb-modal[b-0yqdpizrel] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    width: min(720px, calc(100vw - 48px));
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .4);
    overflow: hidden;
}

/* The app's text-size setting applies `zoom` to <body>, which inflates viewport-relative sizes so a
   `calc(100vh - …)` modal renders taller than the screen (its centred top is then clipped and can't
   be scrolled to). Divide the max-height by the active zoom factor so it still fits the viewport. */
html[data-font-scale="medium"] .fb-modal[b-0yqdpizrel] { max-height: calc((100vh - 80px) / 1.12); }
html[data-font-scale="large"]  .fb-modal[b-0yqdpizrel] { max-height: calc((100vh - 80px) / 1.25); }

.fb-modal-header[b-0yqdpizrel] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.fb-modal-head-left[b-0yqdpizrel] { display: flex; align-items: center; gap: 10px; }

.fb-modal-ref[b-0yqdpizrel] {
    font-size: 12px;
    letter-spacing: .1em;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
}
.fb-modal-ref-link[b-0yqdpizrel] { color: var(--accent); }
    .fb-modal-ref-link:hover[b-0yqdpizrel] { text-decoration: underline; }

.fb-modal-close[b-0yqdpizrel] {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
    .fb-modal-close:hover[b-0yqdpizrel] { color: var(--text); }

.fb-modal-body[b-0yqdpizrel] {
    flex: 1 1 auto;
    min-height: 0;   /* allow the flex child to shrink so its own overflow-y scroll engages */
    overflow-y: auto;
    padding: 20px 22px 26px;
}

.fb-modal-title[b-0yqdpizrel] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--text);
    margin-bottom: 16px;
}

.fb-modal-meta[b-0yqdpizrel] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--text);
}
    .fb-modal-meta > div[b-0yqdpizrel] { display: flex; flex-direction: column; gap: 3px; }

.fb-meta-label[b-0yqdpizrel] {
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
}

.fb-modal-section-label[b-0yqdpizrel] {
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 8px;
}

.fb-modal-desc[b-0yqdpizrel] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 18px;
    word-wrap: break-word;
}
    .fb-modal-desc p[b-0yqdpizrel] { margin: 0 0 8px; }
    .fb-modal-desc p:last-child[b-0yqdpizrel] { margin-bottom: 0; }

/* SW-166: "details hidden" note for cross-department title-only tickets. */
.fb-modal-hidden[b-0yqdpizrel] {
    margin-top: 6px;
    padding: 12px 14px;
    background: var(--surface2);
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.fb-open-full[b-0yqdpizrel] {
    display: inline-block;
    margin-top: 4px;
    padding: 8px 14px;
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 6px;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
}
    .fb-open-full:hover[b-0yqdpizrel] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }

.fb-type-badge[b-0yqdpizrel] {
    display: inline-block;
    padding: 2px 9px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
}
    .fb-type-badge.is-bug[b-0yqdpizrel] { color: var(--danger); border-color: var(--danger); }
    .fb-type-badge.is-feature[b-0yqdpizrel] { color: var(--accent); border-color: var(--accent); }

.fb-attach-list[b-0yqdpizrel] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.fb-attach-item[b-0yqdpizrel] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text);
}

.fb-attach-name[b-0yqdpizrel] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fb-attach-dl[b-0yqdpizrel] {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 10px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
    .fb-attach-dl:hover[b-0yqdpizrel] { border-color: var(--accent); color: var(--accent); }

.fb-muted[b-0yqdpizrel] { color: var(--muted); }

.fb-state[b-0yqdpizrel] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    color: var(--muted);
    font-size: 13px;
}

.fb-error[b-0yqdpizrel] {
    color: var(--danger);
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    line-height: 1.6;
}

/* ── Attachment upload row ── */
.fb-attach-add[b-0yqdpizrel] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 8px;
}

/* ── Comments ── */
.fb-comment-list[b-0yqdpizrel] {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
}

.fb-comment[b-0yqdpizrel] {
    padding: 8px 0;
    border-top: 1px solid var(--border);
}
    .fb-comment:first-child[b-0yqdpizrel] { border-top: none; }

.fb-comment-head[b-0yqdpizrel] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}

.fb-comment-author[b-0yqdpizrel] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.fb-comment-time[b-0yqdpizrel] {
    font-size: 11px;
    color: var(--muted);
}

.fb-comment-body[b-0yqdpizrel] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
    word-wrap: break-word;
}

.fb-comment-edit-actions[b-0yqdpizrel] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* Comment composer — toolbar joined to the editor (like the tickets page), button right-aligned. */
.fb-comment-new[b-0yqdpizrel] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 10px;
}

[b-0yqdpizrel] .comment-rte .ql-editor {
    min-height: 90px;
}

/* Footer row: Post Comment (left) and "Open full ticket" (right) on one line. */
.fb-comment-footer[b-0yqdpizrel] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 12px;
}
    .fb-comment-footer .fb-open-full[b-0yqdpizrel] { margin-left: auto; margin-top: 0; }

/* Post Comment button — same look as the full ticket page (btn-create is defined per-page
   scoped, so it isn't inherited here; copy it in). */
.btn-create[b-0yqdpizrel] {
    padding: 8px 20px;
    background: var(--accent);
    color: var(--bg);
    border: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
    .btn-create:hover:not(:disabled)[b-0yqdpizrel] { background: var(--accent2); }
    .btn-create:disabled[b-0yqdpizrel] { opacity: .5; cursor: default; }

/* DEV-SW-113: status dropdown for users who can edit the ticket (coloured like the full ticket page) */
.fb-status-select[b-0yqdpizrel] {
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 8px;
    cursor: pointer;
    outline: none;
}
    .fb-status-select:disabled[b-0yqdpizrel] { opacity: .6; cursor: wait; }
    .fb-status-select option[b-0yqdpizrel] { color: var(--text); background: var(--surface); text-transform: none; letter-spacing: normal; }
    .fb-status-select.status-neutral[b-0yqdpizrel] { border-color: var(--border); color: var(--muted); }
    .fb-status-select.status-muted[b-0yqdpizrel] { border-color: var(--muted); color: var(--muted); }
    .fb-status-select.status-info[b-0yqdpizrel] { border-color: var(--info); color: var(--info); }
    .fb-status-select.status-teal[b-0yqdpizrel] { border-color: var(--teal); color: var(--teal); }
    .fb-status-select.status-success[b-0yqdpizrel] { border-color: var(--success); color: var(--success); }
    .fb-status-select.status-accent[b-0yqdpizrel] { border-color: var(--accent); color: var(--accent); }
    .fb-status-select.status-warning[b-0yqdpizrel] { border-color: var(--warning); color: var(--warning); }
    .fb-status-select.status-orange[b-0yqdpizrel] { border-color: var(--orange); color: var(--orange); }
    .fb-status-select.status-danger[b-0yqdpizrel] { border-color: var(--danger); color: var(--danger); }
    .fb-status-select.status-pink[b-0yqdpizrel] { border-color: var(--pink); color: var(--pink); }
    .fb-status-select.status-purple[b-0yqdpizrel] { border-color: var(--purple); color: var(--purple); }
/* /Components/Shared/Toast.razor.rz.scp.css */
.toast-overlay[b-tndtnupfm2] {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 72px;
    pointer-events: none;
}

/* Always-rendered overlay: hidden when there's no message (it lives on <html>, outside the app tree). */
.toast-overlay--hidden[b-tndtnupfm2] { display: none; }

.toast-box[b-tndtnupfm2] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--danger);
    color: #fff;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .45);
    pointer-events: all;
    max-width: min(480px, calc(100vw - 32px));
    animation: toast-slide-in-b-tndtnupfm2 .18s ease;
}

.toast-message[b-tndtnupfm2] {
    flex: 1;
    white-space: pre-wrap;
    line-height: 1.5;
}

.toast-close[b-tndtnupfm2] {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    opacity: .8;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

    .toast-close:hover[b-tndtnupfm2] { opacity: 1; }

.toast-box--success[b-tndtnupfm2] { background: var(--success); }

@keyframes toast-slide-in-b-tndtnupfm2 {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 576px) {
    .toast-overlay[b-tndtnupfm2] { padding-top: 56px; }
    .toast-box[b-tndtnupfm2] { font-size: 12px; }
}
/* /Components/Shared/TotpCodeDialog.razor.rz.scp.css */
.totp-overlay[b-p2y556y1m6] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(2px);
}

.totp-dialog[b-p2y556y1m6] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    width: 360px;
    max-width: calc(100vw - 32px);
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.totp-dialog-header[b-p2y556y1m6] {
    padding: 24px 24px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.totp-dialog-icon[b-p2y556y1m6] {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.totp-dialog-title[b-p2y556y1m6] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}

.totp-dialog-subtitle[b-p2y556y1m6] {
    font-size: 12px;
    color: var(--muted);
    margin-top: 3px;
    line-height: 1.4;
}

.totp-dialog-body[b-p2y556y1m6] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.totp-code-input[b-p2y556y1m6] {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 28px;
    font-family: 'Barlow Condensed', monospace;
    font-weight: 500;
    letter-spacing: 0.25em;
    padding: 12px 16px;
    text-align: center;
    transition: border-color 0.15s;
    outline: none;
}

    .totp-code-input:focus[b-p2y556y1m6] {
        border-color: var(--accent);
    }

    .totp-code-input:disabled[b-p2y556y1m6] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.totp-error[b-p2y556y1m6] {
    font-size: 12px;
    color: var(--danger);
    text-align: center;
}

.totp-dialog-actions[b-p2y556y1m6] {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.totp-spinner[b-p2y556y1m6] {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: totp-spin-b-p2y556y1m6 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes totp-spin-b-p2y556y1m6 {
    to { transform: rotate(360deg); }
}

/* Mobile */
@media (max-width: 576px) {
    .totp-dialog[b-p2y556y1m6] {
        width: calc(100vw - 32px);
    }

    .totp-dialog-actions[b-p2y556y1m6] {
        flex-direction: column-reverse;
    }

    .totp-dialog-actions button[b-p2y556y1m6] {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}
/* /Components/Shared/UpdatePopup.razor.rz.scp.css */
.upop-overlay[b-kysbne9uhw] {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .55);
}

.upop-overlay--hidden[b-kysbne9uhw] { display: none; }

.upop-dialog[b-kysbne9uhw] {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    overflow: hidden;
}

.upop-header[b-kysbne9uhw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.upop-icon[b-kysbne9uhw] {
    display: flex;
    align-items: center;
    line-height: 1;
    color: var(--accent);
}

/* Icon colour cues, matching the top-bar pill: accent for "starting soon", red while in progress. */
.upop-icon--imminent[b-kysbne9uhw] { color: var(--accent); }
.upop-icon--live[b-kysbne9uhw] { color: var(--danger, #e05252); }

.upop-title[b-kysbne9uhw] {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}

.upop-body[b-kysbne9uhw] {
    padding: 18px 20px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
}

.upop-body p[b-kysbne9uhw] { margin: 0 0 10px; }
.upop-body p:last-child[b-kysbne9uhw] { margin-bottom: 0; }

.upop-warn[b-kysbne9uhw] { color: var(--danger); font-weight: 600; }

.upop-actions[b-kysbne9uhw] {
    display: flex;
    justify-content: flex-end;
    padding: 14px 20px 18px;
}

.upop-ok[b-kysbne9uhw] {
    padding: 9px 22px;
    background: var(--accent);
    border: none;
    border-radius: 4px;
    color: #000;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .15s;
}

    .upop-ok:hover[b-kysbne9uhw] { opacity: .85; }
/* /Components/UserPicker.razor.rz.scp.css */
.user-picker[b-g2pdnkcjxg] { display: flex; flex-direction: column; gap: 6px; }

/* Selected people as removable chips. */
.user-picker-chips[b-g2pdnkcjxg] { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 18px; }
.user-picker-empty[b-g2pdnkcjxg] { font-size: 11px; color: var(--muted); }
.user-chip[b-g2pdnkcjxg] {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--surface2, var(--bg)); color: var(--text);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 1px 4px 1px 8px; font-size: 12px; font-family: 'Barlow', sans-serif;
}
.user-chip-x[b-g2pdnkcjxg] { background: none; border: none; cursor: pointer; font-size: 14px; line-height: 1; color: var(--muted); padding: 0 2px; }
.user-chip-x:hover[b-g2pdnkcjxg] { color: #ef4444; }

/* Search field — matches the app's .reg-form-input. */
.user-picker-search[b-g2pdnkcjxg] { position: relative; }
.user-picker-input[b-g2pdnkcjxg] {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    padding: 8px 12px;
    outline: none;
    border-radius: 6px;
    transition: border-color .15s;
    appearance: none;
    -webkit-appearance: none;
}
.user-picker-input:focus[b-g2pdnkcjxg] { border-color: var(--accent); }

/* Dropdown list. */
.user-picker-dropdown[b-g2pdnkcjxg] {
    position: absolute; z-index: 40; top: calc(100% + 2px); left: 0; right: 0;
    max-height: 220px; overflow-y: auto;
    background: var(--surface, var(--bg));
    border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.14);
}
.user-picker-item[b-g2pdnkcjxg] {
    padding: 7px 12px; font-size: 13px; font-family: 'Barlow', sans-serif;
    color: var(--text); cursor: pointer;
    display: flex; align-items: baseline; gap: 8px;
}
.user-picker-item:hover[b-g2pdnkcjxg] { background: var(--surface2, var(--border)); }
.user-picker-email[b-g2pdnkcjxg] { color: var(--muted); font-size: 11px; }
.user-picker-none[b-g2pdnkcjxg] { padding: 8px 12px; font-size: 12px; color: var(--muted); }
/* /Components/Utilities/Markup/PdfViewer.razor.rz.scp.css */
/* PdfViewer.razor.css */

.pdf-collab-root[b-j13ugyzjkm] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    font-size: 14px;
}

.pdf-toolbar[b-j13ugyzjkm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--surface, #f9fafb);
    border-bottom: 1px solid var(--border, #e5e7eb);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.back-link[b-j13ugyzjkm] {
    font-size: 13px;
    color: var(--muted, #6b7280);
    text-decoration: none;
    margin-right: 8px;
}

.tool-group[b-j13ugyzjkm] { display: flex; gap: 4px; }

/* "Stamps" section — set apart from the main tools with a divider + label. */
.stamp-group[b-j13ugyzjkm] {
    align-items: center;
    padding-left: 8px;
    border-left: 1px solid var(--border, #e5e7eb);
}

.tool-section-label[b-j13ugyzjkm] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--muted, #9ca3af);
    margin-right: 2px;
}

.tool-btn[b-j13ugyzjkm] {
    padding: 5px 10px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    background: var(--surface, #fff);
    cursor: pointer;
    font-size: 13px;
    color: var(--text, #374151);
    transition: all .15s;
}

    .tool-btn:hover[b-j13ugyzjkm]  { background: var(--surface2, #f3f4f6); }
    .tool-btn.active[b-j13ugyzjkm] {
        background: color-mix(in srgb, var(--accent, #3b82f6) 16%, var(--surface, #fff));
        border-color: var(--accent, #3b82f6);
        color: var(--accent, #1d4ed8);
    }

.page-nav[b-j13ugyzjkm] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 13px;
    color: var(--muted, #6b7280);
}

    .page-nav button[b-j13ugyzjkm] {
        width: 26px; height: 26px;
        border: 1px solid var(--border, #d1d5db);
        border-radius: 6px;
        background: var(--surface, #fff);
        color: var(--text, #374151);
        cursor: pointer;
        font-size: 16px;
        line-height: 1;
    }

        .page-nav button:hover:not(:disabled)[b-j13ugyzjkm] { background: var(--surface2, #f3f4f6); }
        .page-nav button:disabled[b-j13ugyzjkm] { opacity: .4; cursor: default; }

.zoom-group[b-j13ugyzjkm] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--muted, #6b7280);
}

    .zoom-group button[b-j13ugyzjkm] {
        min-width: 26px; height: 26px;
        border: 1px solid var(--border, #d1d5db);
        border-radius: 6px;
        background: var(--surface, #fff);
        color: var(--text, #374151);
        cursor: pointer;
        font-size: 14px;
        line-height: 1;
        padding: 0 6px;
    }

        .zoom-group button:hover[b-j13ugyzjkm] { background: var(--surface2, #f3f4f6); }

    .zoom-group .zoom-fit[b-j13ugyzjkm] { font-size: 12px; }

.zoom-label[b-j13ugyzjkm] {
    min-width: 40px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--text, inherit);
}

/* Text search (all pages) */
.pdf-search[b-j13ugyzjkm] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--muted, #6b7280);
    padding: 0 10px;
    margin: 0 4px;
    border-left: 1px solid var(--border, #d1d5db);
    border-right: 1px solid var(--border, #d1d5db);
}
    .pdf-search-input[b-j13ugyzjkm] {
        width: 150px; height: 26px;
        border: 1px solid var(--border, #d1d5db);
        border-radius: 4px;
        background: var(--surface, #fff);
        color: var(--text, #374151);
        padding: 0 8px;
        font-size: 13px;
    }
    .pdf-search-icon[b-j13ugyzjkm] { padding: 0 2px; opacity: .55; font-size: 13px; }
    .pdf-search button[b-j13ugyzjkm] {
        min-width: 26px; height: 26px;
        border: 1px solid var(--border, #d1d5db);
        border-radius: 4px;
        background: var(--surface, #fff);
        color: var(--text, #374151);
        cursor: pointer;
        font-size: 14px;
        line-height: 1;
        padding: 0 6px;
    }
        .pdf-search button:hover[b-j13ugyzjkm] { background: var(--surface2, #f3f4f6); }
    .pdf-search-count[b-j13ugyzjkm] {
        min-width: 56px;
        text-align: center;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

.export-btn[b-j13ugyzjkm] {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #16a34a;
    border: 1px solid #15803d;
    border-radius: 6px;
    padding: 5px 10px;
    text-decoration: none;
    white-space: nowrap;
}

    .export-btn:hover[b-j13ugyzjkm] { background: #15803d; }

/* Matches the neighbouring toolbar icon buttons (zoom / rotate): bordered, neutral surface. */
.focus-toggle[b-j13ugyzjkm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    background: var(--surface, #fff);
    color: var(--text, #374151);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0 8px;
    white-space: nowrap;
}

    .focus-toggle:hover[b-j13ugyzjkm] { background: var(--surface2, #f3f4f6); }
    .focus-toggle.active[b-j13ugyzjkm] {
        background: var(--accent, #2563eb);
        border-color: var(--accent, #2563eb);
        color: #fff;
    }

.connection-badge[b-j13ugyzjkm] {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
}

    .connection-badge.connected[b-j13ugyzjkm]    { background: #dcfce7; color: #166534; }
    .connection-badge.disconnected[b-j13ugyzjkm] { background: #fef3c7; color: #92400e; }

.hub-error[b-j13ugyzjkm] {
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
    color: #991b1b;
    font-size: 12px;
    padding: 6px 14px;
    flex-shrink: 0;
}

/* position:relative anchors the loading overlay below. .pdf-body itself never scrolls (the inner
   .pdf-main does), so an inset:0 overlay here reliably covers the page no matter how it's scrolled. */
.pdf-body[b-j13ugyzjkm] { display: flex; flex: 1; overflow: hidden; position: relative; }

/* ── Loading state: grey out the page until the annotations arrive ── */
.pdf-loading-overlay[b-j13ugyzjkm] {
    position: absolute;
    inset: 0;
    z-index: 200;                       /* above every layer inside the viewer (max used is 100) */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 17, 17, .55);
    backdrop-filter: blur(1px);
    cursor: progress;                   /* also swallows clicks — no marking up a half-loaded page */
}

.pdf-loading-box[b-j13ugyzjkm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .4);
}

.pdf-loading-spinner[b-j13ugyzjkm] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;   /* @keyframes spin is global (app.css) */
}

.pdf-loading-text[b-j13ugyzjkm] {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
}

.pdf-main[b-j13ugyzjkm] {
    flex: 1;
    overflow: auto;
    background: #6b7280;
    display: flex;
    align-items: flex-start;
    /* "safe" centres when the page fits but anchors to the start when it
       overflows (zoomed in), so the left edge stays scrollable. */
    justify-content: safe center;
    padding: 16px;
}

.canvas-wrap[b-j13ugyzjkm] {
    position: relative;
    display: inline-block;
    box-shadow: 0 2px 16px rgba(0,0,0,.35);
}

#pdf-canvas[b-j13ugyzjkm] { display: block; }

.annotation-layer[b-j13ugyzjkm] {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

    .annotation-layer.interactive[b-j13ugyzjkm] { pointer-events: all; cursor: crosshair; }

.ann-pin[b-j13ugyzjkm] {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #7c3aed;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,.7);
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    pointer-events: all;
}

/* Comment markers sit in the page margin (off the page) instead of on the spot they refer to,
   so they never cover it. Horizontal placement is just outside the page edge; the vertical
   position is set inline. The thin arrow back to the anchor is drawn by .cmt-arrows. */
.ann-pin-margin[b-j13ugyzjkm] {
    transform: translateY(-50%);
}
.ann-pin-margin.pin-left[b-j13ugyzjkm]  { left: auto; right: 100%; margin-right: 3px; }
.ann-pin-margin.pin-right[b-j13ugyzjkm] { left: 100%; margin-left: 3px; }

/* ── View rotation: keep readable marks upright ──────────────────────────────────────────
   The canvas-wrap is spun as one unit (so drawings/highlights, which are marks ON the page, rotate with
   it). Text-like annotations must stay level, so they're counter-rotated by --pdf-cr (= -rotation), set on
   the layer in JS along with the .rotated class. Text/signatures pivot on their top-left anchor; margin
   comment pins and the arrow-tip handle pivot on their own centre (composed with their base transform). */
.annotation-layer.rotated .ann-text[b-j13ugyzjkm],
.annotation-layer.rotated .ann-sign[b-j13ugyzjkm] {
    transform: rotate(var(--pdf-cr, 0deg));
    transform-origin: top left;
}
.annotation-layer.rotated .ann-pin-margin[b-j13ugyzjkm] {
    transform: translateY(-50%) rotate(var(--pdf-cr, 0deg));
}
.annotation-layer.rotated .cmt-anchor-handle[b-j13ugyzjkm] {
    transform: translate(-50%, -50%) rotate(var(--pdf-cr, 0deg));
}

/* Thin red connectors from each margin marker to its exact anchor on the page. The SVG is
   stretched over the page (preserveAspectRatio:none); non-scaling-stroke keeps lines hairline
   and overflow:visible lets them reach into the margin. */
.cmt-arrows[b-j13ugyzjkm] {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
    pointer-events: none;
}
.cmt-arrows line[b-j13ugyzjkm] {
    stroke: #ef4444;
    stroke-width: 1.25px;
    vector-effect: non-scaling-stroke;
    opacity: .85;
}

/* Draggable tip of a comment's arrow — move where the comment points. Always present on your own
   comments (faint), and prominent on hover or when the comment is selected. */
.cmt-anchor-handle[b-j13ugyzjkm] {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    cursor: move;
    pointer-events: all;
    z-index: 25;
    opacity: .5;
    transition: opacity .12s ease, width .12s ease, height .12s ease;
}
.cmt-anchor-handle:hover[b-j13ugyzjkm],
.cmt-anchor-handle.selected[b-j13ugyzjkm] {
    opacity: 1;
    width: 14px; height: 14px;
    background: #dc2626;
}

.ann-sign[b-j13ugyzjkm] {
    position: absolute;
    /* Shrink-to-fit the signature AND the name/date line below it, so the box always
       contains the date instead of clipping it. */
    width: max-content;
    font-style: italic;
    font-family: Calibri, Carlito, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1d4ed8;
    /* Keep the same tiny inset as .ann-text: the export draws signature content at exactly (X,Y) with
       no padding, so a larger inset here would shift the on-screen ink away from where it lands in the
       saved PDF (both image and typed signatures). */
    padding: 1px 2px;
    pointer-events: all;
    white-space: nowrap;
}

.ann-highlight[b-j13ugyzjkm] {
    position: absolute;
    background: #fde047;
    opacity: .45;
    mix-blend-mode: multiply;
    border-radius: 2px;
    pointer-events: none;
}

.ann-text[b-j13ugyzjkm] {
    position: absolute;
    font-size: 14px;
    line-height: 1.3;
    color: #111827;
    white-space: pre-wrap;
    overflow-wrap: break-word;   /* break over-long words like the export does */
    padding: 1px 2px;
    pointer-events: all;
    /* Shrink the box to its text (a stamp like "C.Allen" gets a tight box) up to the inline
       max-width; an explicit inline width (set by the width handle) overrides this. */
    width: fit-content;
    /* max-width is set inline (scales with zoom) to match the exported wrap width */
}

    .ann-text.selected[b-j13ugyzjkm] {
        outline: 2px solid #fbbf24;
        box-shadow: 0 0 0 3px rgba(251,191,36,.35);
        background: rgba(255,255,255,.6);
    }

/* ── In-place (WYSIWYG) text editor ── */
/* The input is anchored at the click point (its top-left), styled like the final .ann-text,
   so what you type is what lands on the page. The controls live in a floating bar below. */
.text-inplace[b-j13ugyzjkm] {
    position: absolute;
    z-index: 21;
    pointer-events: all;
}

.text-inplace-input[b-j13ugyzjkm] {
    display: block;
    margin: 0;
    background: rgba(255, 255, 255, .55);
    border: 1px dashed rgba(37, 99, 235, .8);
    border-radius: 6px;
    outline: none;
    resize: none;
    overflow: hidden;
    padding: 1px 2px;
    line-height: 1.3;
    font-family: Calibri, Carlito, sans-serif;
    white-space: pre-wrap;
    min-width: 90px;
    field-sizing: content;   /* auto-grows to the typed content where supported */
}

.text-inplace-bar[b-j13ugyzjkm] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 6px 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    white-space: nowrap;
    z-index: 22;
}

    .text-inplace-bar .text-opts[b-j13ugyzjkm],
    .text-inplace-bar .popover-actions[b-j13ugyzjkm] {
        margin-top: 0;
    }

    /* When the text is placed in the right part of the page, open the toolbar leftwards so the
       Add/Cancel buttons aren't cut off past the right edge of the PDF. */
    .text-inplace--flip .text-inplace-bar[b-j13ugyzjkm] {
        left: auto;
        right: 0;
    }

    /* Keep the text-colour swatches on a single horizontal line (don't wrap into a column). */
    .text-inplace-bar .draw-colors[b-j13ugyzjkm] { flex-wrap: nowrap; }

/* Text editor popover options */
.text-opts[b-j13ugyzjkm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

.text-sizes[b-j13ugyzjkm] { display: flex; gap: 3px; }

.text-size-btn[b-j13ugyzjkm] {
    width: 26px;
    padding: 3px 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    color: #374151;
}

    .text-size-btn:hover[b-j13ugyzjkm]  { background: #f3f4f6; }
    .text-size-btn.active[b-j13ugyzjkm] { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; font-weight: 600; }

/* ── Sidebar ── */
.pdf-sidebar[b-j13ugyzjkm] {
    width: 280px;
    flex-shrink: 0;
    border-left: 1px solid var(--border, #e5e7eb);
    overflow-y: auto;
    background: var(--surface, #fff);
    color: var(--text, #374151);
    display: flex;
    flex-direction: column;
}

.sidebar-section[b-j13ugyzjkm] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border, #f3f4f6);
}

    .sidebar-section h4[b-j13ugyzjkm] {
        font-size: 11px;
        font-weight: 700;
        color: var(--muted, #6b7280);
        text-transform: uppercase;
        letter-spacing: .06em;
        margin: 0 0 8px;
    }

/* Collapsible sections */
.section-head[b-j13ugyzjkm] {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
}

    .section-head:hover[b-j13ugyzjkm] { color: var(--text, #374151); }

.section-caret[b-j13ugyzjkm] {
    display: inline-block;
    width: 9px;
    font-size: 9px;
    color: var(--muted, #9ca3af);
}

.sidebar-section.collapsed[b-j13ugyzjkm] { flex: 0 0 auto; }

    .sidebar-section.collapsed > h4[b-j13ugyzjkm] { margin-bottom: 0; }
    .sidebar-section.collapsed > :not(.section-head)[b-j13ugyzjkm] { display: none; }

.user-list[b-j13ugyzjkm]  { display: flex; flex-wrap: wrap; gap: 4px; }

.user-pill[b-j13ugyzjkm] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #ede9fe;
    color: #5b21b6;
    font-weight: 500;
}

.ann-input[b-j13ugyzjkm] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    background: var(--bg, #fff);
    color: var(--text, inherit);
    font-size: 13px;
    resize: none;
    margin-bottom: 6px;
    box-sizing: border-box;
}

.sig-input[b-j13ugyzjkm] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    background: var(--bg, #fff);
    color: var(--text, inherit);
    font-size: 18px;
    font-style: italic;
    font-family: Calibri, Carlito, sans-serif;
    margin-bottom: 6px;
    box-sizing: border-box;
}

.action-btn[b-j13ugyzjkm] {
    width: 100%;
    padding: 6px 0;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    background: var(--surface, #fff);
    color: var(--text, inherit);
    font-size: 13px;
    cursor: pointer;
}

    .action-btn:hover:not(:disabled)[b-j13ugyzjkm] { background: var(--surface2, #f9fafb); }
    .action-btn:disabled[b-j13ugyzjkm] { opacity: .4; cursor: default; }

/* The comments section sizes to its content and scrolls with the whole sidebar (like the
   other sections), so every added comment is visible — rather than being squeezed into a
   short flex slice that clipped them. */
.annotations-list[b-j13ugyzjkm] { }

.cmt-filter[b-j13ugyzjkm] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--muted, #6b7280);
    margin-bottom: 8px;
    cursor: pointer;
    user-select: none;
}

/* Global "this page only" filter at the top of the sidebar — applies to every section. */
.page-filter[b-j13ugyzjkm] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text, #374151);
    padding: 8px 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    cursor: pointer;
    user-select: none;
}

.comment-card[b-j13ugyzjkm] {
    position: relative;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 4px;
    border: 1px solid transparent;
}

    .comment-card:hover[b-j13ugyzjkm]    { background: var(--surface2, #f9fafb); }
    .comment-card.selected[b-j13ugyzjkm] {
        background: color-mix(in srgb, var(--accent, #3b82f6) 12%, var(--surface, #fff));
        border-color: var(--accent, #bfdbfe);
    }

.comment-author[b-j13ugyzjkm] { font-size: 12px; font-weight: 600; color: var(--text, #111827); }
.comment-text[b-j13ugyzjkm]   { font-size: 13px; color: var(--text, #374151); margin-top: 2px; line-height: 1.4; }
.comment-meta[b-j13ugyzjkm]   { font-size: 11px; color: var(--muted, #9ca3af); margin-top: 3px; }

.comment-img[b-j13ugyzjkm] {
    display: block;
    max-width: 100%;
    max-height: 120px;
    margin-top: 6px;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
    object-fit: contain;
    cursor: zoom-in;
}

/* ── Full-size comment-attachment viewer (lightbox) ── */
.img-lightbox[b-j13ugyzjkm] {
    position: fixed;
    inset: 0;
    z-index: 9500;                    /* above the viewer (max internal z-index is 200) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(0, 0, 0, .8);
    cursor: zoom-out;
}

/* Always-rendered overlay: hidden when nothing is enlarged (it lives on <html>, outside the app tree). */
.img-lightbox--hidden[b-j13ugyzjkm] { display: none; }

.img-lightbox-img[b-j13ugyzjkm] {
    max-width: 95vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .6);
    cursor: default;
}

.img-lightbox-close[b-j13ugyzjkm] {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

    .img-lightbox-close:hover[b-j13ugyzjkm] { background: rgba(255, 255, 255, .28); }

/* ── Comment replies ── */
.reply-list[b-j13ugyzjkm] {
    margin-top: 6px;
    padding-left: 8px;
    border-left: 2px solid var(--border, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reply-item[b-j13ugyzjkm] {
    position: relative;
    font-size: 12px;
    color: var(--text, #374151);
    line-height: 1.35;
    padding-right: 44px;
    border-radius: 4px;
    transition: background-color .4s ease;
}

/* Brief flash when a reply is deep-linked from a notification. */
.reply-item.reply-highlight[b-j13ugyzjkm] {
    background: var(--accent, #f2c200);
    color: #1a1a1a;
    box-shadow: 0 0 0 4px var(--accent, #f2c200);
}

.reply-author[b-j13ugyzjkm] { font-weight: 600; color: var(--text, #111827); margin-right: 4px; }

.reply-del[b-j13ugyzjkm] {
    position: absolute;
    top: 0; right: 0;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 0;
}

    .reply-del:hover[b-j13ugyzjkm] { color: #ef4444; }

/* Author's reply controls — Edit + Delete side by side in the top-right (a container, so the two
   don't overlap the way two top:0/right:0 buttons did, which hid the Edit button). */
.reply-actions[b-j13ugyzjkm] {
    position: absolute;
    top: 1px; right: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.reply-act[b-j13ugyzjkm] {
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 1px 2px;
}
.reply-act.reply-edit:hover[b-j13ugyzjkm]   { color: #2563eb; }
.reply-act.reply-del-btn:hover[b-j13ugyzjkm] { color: #ef4444; }

.reply-box[b-j13ugyzjkm] {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.reply-input[b-j13ugyzjkm] {
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    background: var(--bg, #fff);
    color: var(--text, inherit);
    font-size: 12px;
    box-sizing: border-box;
}

/* The reply / edit-reply composers are auto-growing textareas: wrap long text, start at a single
   row and grow with the response up to a cap (then scroll). Height is driven by JS (fitTextarea). */
textarea.reply-input[b-j13ugyzjkm] {
    display: block;
    resize: none;
    overflow-y: auto;
    min-height: 30px;
    max-height: 180px;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: inherit;
}

/* The reply box aligns the Reply/Save/✕ buttons to the bottom of a grown textarea. */
.reply-box[b-j13ugyzjkm] { align-items: flex-end; }

.reply-send[b-j13ugyzjkm] {
    padding: 4px 10px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
}

    .reply-send:disabled[b-j13ugyzjkm] { opacity: .4; cursor: default; }
    .reply-send:hover:not(:disabled)[b-j13ugyzjkm] { background: #1d4ed8; }

.del-btn[b-j13ugyzjkm] {
    position: absolute;
    top: 6px; right: 6px;
    width: 18px; height: 18px;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
}

    .del-btn:hover[b-j13ugyzjkm] { color: #ef4444; }

.edit-btn[b-j13ugyzjkm] {
    position: absolute;
    top: 6px; right: 26px;
    width: 18px; height: 18px;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
}

    .edit-btn:hover[b-j13ugyzjkm] { color: #2563eb; }

.comment-edit-actions[b-j13ugyzjkm] {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    justify-content: flex-end;
}

.sig-card[b-j13ugyzjkm]   { margin-bottom: 6px; }
.sig-text[b-j13ugyzjkm]   { display: block; font-style: italic; font-family: Calibri, Carlito, sans-serif; font-size: 15px; color: #1d4ed8; font-weight: 600; }
.sig-by[b-j13ugyzjkm]     { display: block; font-size: 11px; color: var(--muted, #9ca3af); }

.empty-hint[b-j13ugyzjkm] { font-size: 12px; color: var(--muted, #9ca3af); }

.tool-hint p[b-j13ugyzjkm] { font-size: 12px; color: var(--muted, #6b7280); line-height: 1.5; }

/* ── Inline annotation popover ── */
.ann-popover[b-j13ugyzjkm] {
    position: absolute;
    /* transform (edge-aware anchoring) is set inline via PopoverStyle so the box opens inward from the
       page edges and is never clipped. */
    z-index: 20;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    padding: 8px;
    min-width: 200px;
    max-width: 260px;
    /* pointer-events is inherited; the annotation layer sets it to none in
       Select mode, so re-enable it here or the editor controls go dead. */
    pointer-events: all;
}

.popover-input[b-j13ugyzjkm] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    resize: none;
    box-sizing: border-box;
    display: block;
}

.sig-font[b-j13ugyzjkm] { font-style: italic; font-family: Calibri, Carlito, sans-serif; font-size: 16px; }

/* ── Comment image attachment (popover) ── */
.cmt-attach[b-j13ugyzjkm] { margin-top: 6px; }

.cmt-file-input[b-j13ugyzjkm] { display: block; width: 100%; font-size: 11px; }

.cmt-attach-hint[b-j13ugyzjkm] { display: block; font-size: 10px; color: #9ca3af; margin-top: 3px; }

.cmt-image-preview[b-j13ugyzjkm] { position: relative; display: inline-block; }

.cmt-preview-img[b-j13ugyzjkm] {
    display: block;
    max-width: 100%;
    max-height: 90px;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
}

.cmt-image-remove[b-j13ugyzjkm] {
    position: absolute;
    top: -8px; right: -8px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    border: none;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}

    .cmt-image-remove:hover[b-j13ugyzjkm] { background: #dc2626; }

/* Attachment indicator on a comment pin */
.ann-img-badge[b-j13ugyzjkm] {
    position: absolute;
    bottom: -6px; right: -6px;
    font-size: 9px;
    line-height: 1;
    background: #fff;
    border-radius: 50%;
    padding: 1px;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
    pointer-events: none;
}

.popover-actions[b-j13ugyzjkm] {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    justify-content: flex-end;
}

.popover-add[b-j13ugyzjkm] {
    padding: 4px 14px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
}

    .popover-add:disabled[b-j13ugyzjkm] { opacity: .4; cursor: default; }
    .popover-add:hover:not(:disabled)[b-j13ugyzjkm] { background: #1d4ed8; }

.popover-cancel[b-j13ugyzjkm] {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    color: #6b7280;
}

    .popover-cancel:hover[b-j13ugyzjkm] { background: #f3f4f6; }

/* ── Signature tabs (Text / Image) ── */
.sig-tabs[b-j13ugyzjkm] {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.sig-tab[b-j13ugyzjkm] {
    flex: 1;
    padding: 4px 0;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    background: #f9fafb;
    font-size: 12px;
    cursor: pointer;
    color: #374151;
}

    .sig-tab.active[b-j13ugyzjkm] {
        background: #eff6ff;
        border-color: #3b82f6;
        color: #1d4ed8;
        font-weight: 600;
    }

.sig-upload-area[b-j13ugyzjkm] {
    border: 1.5px dashed #d1d5db;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    background: #fafafa;
}

.sig-file-input[b-j13ugyzjkm] { display: block; width: 100%; font-size: 12px; margin-bottom: 6px; }

.sig-upload-hint[b-j13ugyzjkm] { font-size: 11px; color: #9ca3af; margin: 4px 0 0; }

.sig-use-saved[b-j13ugyzjkm] {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    padding: 5px 8px;
    border: 1px solid #3b82f6;
    border-radius: 5px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.sig-save-default[b-j13ugyzjkm] {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    margin-top: 6px;
    font-size: 11px;
    color: #6b7280;
    cursor: pointer;
}

.sig-preview[b-j13ugyzjkm] {
    display: block;
    max-width: 100%;
    max-height: 80px;
    margin: 4px auto 0;
    border-radius: 3px;
    border: 1px solid #e5e7eb;
}

/* ── Rendered image signature (on PDF) ── */
/* Width is set inline (scales with zoom / the resize handle); height follows to keep aspect
   ratio. The surrounding .ann-sign box grows to fit this image plus the name/date line. */
.sig-img[b-j13ugyzjkm] {
    display: block;
    height: auto;
}

/* Deter saving/exfiltrating signature images: no pointer events means the browser's "Save image"
   context menu can't target them, and dragging them out is disabled. (The .ann-sign container still
   handles selecting/moving; the resize handle drives the image width via JS.) */
.sig-img[b-j13ugyzjkm],
.sig-card-img[b-j13ugyzjkm],
.sig-preview[b-j13ugyzjkm] {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
}

.sig-meta[b-j13ugyzjkm] {
    font-size: 10px;
    color: #6b7280;
    margin-top: -1px;
    line-height: 1;
    font-style: normal;
    font-family: inherit;
}

.sig-text-val[b-j13ugyzjkm] {
    font-style: italic;
    font-family: Calibri, Carlito, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1d4ed8;
}

/* ── Signature card image in sidebar ── */
.sig-card[b-j13ugyzjkm] {
    position: relative;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f3f4f6;
}

.sig-card-img[b-j13ugyzjkm] {
    display: block;
    max-width: 100%;
    max-height: 56px;
    border-radius: 3px;
    border: 1px solid #e5e7eb;
    margin-bottom: 2px;
}

/* ── Drawing toolbar in sidebar ── */
.draw-modes[b-j13ugyzjkm] {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.draw-mode-btn[b-j13ugyzjkm] {
    width: 34px; height: 34px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .draw-mode-btn:hover[b-j13ugyzjkm]  { background: #f3f4f6; }
    .draw-mode-btn.active[b-j13ugyzjkm] { background: #eff6ff; border-color: #3b82f6; }

.draw-colors[b-j13ugyzjkm] {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.color-swatch[b-j13ugyzjkm] {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .1s;
}

    .color-swatch:hover[b-j13ugyzjkm]    { transform: scale(1.15); }
    .color-swatch.selected[b-j13ugyzjkm] { border-color: #111827; box-shadow: 0 0 0 2px #fff inset; }

.draw-width label[b-j13ugyzjkm] {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: block;
    margin-bottom: 4px;
}

.draw-width-btns[b-j13ugyzjkm] { display: flex; gap: 4px; }

.draw-w-btn[b-j13ugyzjkm] {
    flex: 1;
    padding: 4px 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    color: #374151;
}

    .draw-w-btn:hover[b-j13ugyzjkm]  { background: #f3f4f6; }
    .draw-w-btn.active[b-j13ugyzjkm] { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; font-weight: 600; }

/* ── SVG drawing annotation overlay ── */
.ann-drawing[b-j13ugyzjkm] {
    position: absolute;
    pointer-events: none;
    overflow: visible;
}

/* In Select mode, let the drawn strokes be hovered to reveal the author tooltip. */
.annotation-layer.cursor-active .ann-drawing[b-j13ugyzjkm] { pointer-events: stroke; }

/* Emphasise every stroke of a person's drawings when their sidebar entry is clicked. */
.ann-drawing.highlighted[b-j13ugyzjkm] {
    filter: drop-shadow(0 0 2px #f59e0b) drop-shadow(0 0 5px #f59e0b);
}

.ann-drawing.selected[b-j13ugyzjkm] { outline: 1px dashed #fbbf24; outline-offset: 2px; }

/* ── Lines & arrows (page-space, two-endpoint) ── */
/* The SVG spans the whole page but is inert; only the strokes/head are interactive, and only in
   Select mode (matching .ann-drawing) so other tools click through to the page. */
.ann-line[b-j13ugyzjkm] {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
}
.annotation-layer.cursor-active .ann-line .line-hit[b-j13ugyzjkm],
.annotation-layer.cursor-active .ann-line .line-shaft[b-j13ugyzjkm],
.annotation-layer.cursor-active .ann-line .line-head[b-j13ugyzjkm] { pointer-events: stroke; cursor: move; }
.ann-line.highlighted .line-shaft[b-j13ugyzjkm],
.ann-line.highlighted .line-head[b-j13ugyzjkm] { filter: drop-shadow(0 0 2px #f59e0b) drop-shadow(0 0 5px #f59e0b); }
.ann-line.selected .line-shaft[b-j13ugyzjkm] { filter: drop-shadow(0 0 1.5px #fbbf24); }

/* Delete badge sits at the line's midpoint (positioned via inline left/top). */
.ann-line-del[b-j13ugyzjkm] {
    right: auto; bottom: auto;
    transform: translate(-50%, -50%);
    z-index: 17;
}

/* Box/lasso multi-selection */
.multi-selected[b-j13ugyzjkm] {
    outline: 2px solid #2563eb !important;
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(37,99,235,.25);
}

/* Select-tool options live in a popup under the toolbar "Select" button (not the sidebar),
   leaving the right-hand panel free for comments etc. */
.tool-with-popup[b-j13ugyzjkm] { position: relative; display: inline-flex; }

.select-popup[b-j13ugyzjkm] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    /* Above the draw canvas (z-index 60), which overlays the page — otherwise the canvas paints
       over the part of this popup that drops past the toolbar and steals its clicks. */
    z-index: 100;
    min-width: 210px;
    background: var(--surface, #fff);
    color: var(--text, #374151);
    border: 1px solid var(--border, #d1d5db);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

/* Select tool panel */
.select-modes[b-j13ugyzjkm] { display: flex; gap: 4px; margin-bottom: 8px; }

.sel-mode-btn[b-j13ugyzjkm] {
    flex: 1;
    padding: 5px 0;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    background: var(--surface, #fff);
    font-size: 12px;
    cursor: pointer;
    color: var(--text, #374151);
}

    .sel-mode-btn:hover[b-j13ugyzjkm]  { background: var(--surface2, #f3f4f6); }
    .sel-mode-btn.active[b-j13ugyzjkm] {
        background: color-mix(in srgb, var(--accent, #3b82f6) 16%, var(--surface, #fff));
        border-color: var(--accent, #3b82f6);
        color: var(--accent, #1d4ed8);
        font-weight: 600;
    }

.select-hint[b-j13ugyzjkm] { font-size: 12px; color: var(--muted, #6b7280); line-height: 1.5; margin: 0 0 8px; }

.select-actions[b-j13ugyzjkm] { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text, #374151); }

.sel-del-btn[b-j13ugyzjkm] {
    padding: 3px 10px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

    .sel-del-btn:hover[b-j13ugyzjkm] { background: #dc2626; }

.sel-clear-btn[b-j13ugyzjkm] {
    padding: 3px 8px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    color: var(--muted, #6b7280);
}

/* Drawing edit popover */
.draw-edit .draw-colors[b-j13ugyzjkm],
.draw-edit .draw-width-btns[b-j13ugyzjkm] { margin-bottom: 6px; }

.draw-del-btn[b-j13ugyzjkm] {
    padding: 4px 10px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

    .draw-del-btn:hover[b-j13ugyzjkm] { background: #dc2626; }

/* ── Drag ── */
.ann-draggable[b-j13ugyzjkm]         { cursor: grab !important; user-select: none; }
.ann-draggable:active[b-j13ugyzjkm]  { cursor: grabbing !important; }

/* Highlights are pointer-events:none by default; enable them in cursor mode */
.annotation-layer.cursor-active .ann-highlight[b-j13ugyzjkm] { pointer-events: all; }

/* Selected state */
.ann-pin.selected[b-j13ugyzjkm]  { outline: 2px solid #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.35); }
.ann-sign.selected[b-j13ugyzjkm] { outline: 2px solid #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.35); }

.ann-highlight.selected[b-j13ugyzjkm] {
    outline: 2px dashed #f59e0b;
    opacity: .65;
}

/* Delete badge on annotation (shown when selected + own) */
.ann-del-badge[b-j13ugyzjkm] {
    position: absolute;
    top: -9px; right: -9px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    border: none;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    z-index: 5;
    padding: 0;
}

    .ann-del-badge:hover[b-j13ugyzjkm] { background: #dc2626; }

/* Corner resize handle on a selected text / highlight */
.ann-resize[b-j13ugyzjkm] {
    position: absolute;
    right: -5px; bottom: -5px;
    width: 11px; height: 11px;
    background: #2563eb;
    border: 1.5px solid #fff;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
    cursor: nwse-resize;
    pointer-events: all;
    z-index: 6;
}

/* Width handle on a text box (right edge) */
.ann-resize-w[b-j13ugyzjkm] {
    right: -5px; bottom: auto; top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
}

/* Resize handle for a drawing — positioned at its corner via inline left/top */
.ann-resize-free[b-j13ugyzjkm] {
    right: auto; bottom: auto;
    transform: translate(-50%, -50%);
    z-index: 16;   /* above the drawing's stroke hit area */
}

/* Highlights sidebar section */
.highlight-card[b-j13ugyzjkm] {
    position: relative;
    padding: 6px 24px 6px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    margin-bottom: 4px;
}

    .highlight-card:hover[b-j13ugyzjkm]    { background: #fffbeb; }
    .highlight-card.selected[b-j13ugyzjkm] { background: #fffbeb; border-color: #fde68a; }

.hl-label[b-j13ugyzjkm] { font-size: 12px; color: #374151; }

/* Drawings sidebar section */
.drawing-card[b-j13ugyzjkm] {
    position: relative;
    padding: 6px 24px 6px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    margin-bottom: 4px;
}

    .drawing-card:hover[b-j13ugyzjkm]    { background: #f5f3ff; }
    .drawing-card.selected[b-j13ugyzjkm] { background: #f5f3ff; border-color: #ddd6fe; }

.dw-label[b-j13ugyzjkm] { font-size: 12px; color: #374151; }

/* ── Read-only (approved attachment) ── */
/* The editing toolbar is already hidden in markup; here we also neutralise every annotation
   mutation affordance — page drag/placement and the sidebar edit/delete/reply controls — so an
   approved version genuinely cannot be edited. Scroll, zoom, page-nav and Save PDF still work. */
.pdf-readonly .annotation-layer[b-j13ugyzjkm] { pointer-events: none; }

.pdf-readonly .ann-del-badge[b-j13ugyzjkm],
.pdf-readonly .ann-resize[b-j13ugyzjkm],
.pdf-readonly .del-btn[b-j13ugyzjkm],
.pdf-readonly .edit-btn[b-j13ugyzjkm] { display: none !important; }
/* Replies stay available on a closed iteration; hide them only when the version is approved
   (pdf-no-replies), not merely closed (pdf-readonly). */
.pdf-no-replies .reply-box[b-j13ugyzjkm],
.pdf-no-replies .reply-del[b-j13ugyzjkm],
.pdf-no-replies .reply-actions[b-j13ugyzjkm] { display: none !important; }

.pdf-readonly-badge[b-j13ugyzjkm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Done / Not-Done review status (SW-164) ─────────────────────────────────── */

/* On-page status marks: a corner badge on a comment pin, an inline tick on page text. */
.ann-status-mark[b-j13ugyzjkm] { font-weight: 700; line-height: 1; }
.mark-done[b-j13ugyzjkm]    { color: #16a34a; }
.mark-notdone[b-j13ugyzjkm] { color: #ef4444; }

.ann-pin .ann-status-mark[b-j13ugyzjkm] {
    position: absolute;
    top: -5px; right: -5px;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid currentColor;
    display: flex; align-items: center; justify-content: center;
    font-size: 8px;
}
.ann-pin.status-done[b-j13ugyzjkm]    { box-shadow: 0 0 0 2px #16a34a; }
.ann-pin.status-notdone[b-j13ugyzjkm] { box-shadow: 0 0 0 2px #ef4444; }

.ann-text .ann-status-mark[b-j13ugyzjkm] { margin-left: 3px; font-size: .9em; }
.ann-text.status-notdone .ann-text-body[b-j13ugyzjkm] {
    text-decoration: line-through;
    text-decoration-color: #ef4444;
    text-decoration-thickness: 2px;
}

/* Sidebar status badge + actions (comment & text cards). */
.ann-status[b-j13ugyzjkm] {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.status-badge[b-j13ugyzjkm] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.status-badge-done[b-j13ugyzjkm]    { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.status-badge-notdone[b-j13ugyzjkm] { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.status-by[b-j13ugyzjkm] { font-size: 11px; color: var(--muted, #9ca3af); }
.status-reason[b-j13ugyzjkm] {
    flex-basis: 100%;
    font-size: 12px;
    color: #991b1b;
    background: #fef2f2;
    border-left: 3px solid #ef4444;
    padding: 3px 8px;
    border-radius: 0 4px 4px 0;
}

.status-actions[b-j13ugyzjkm] { display: flex; gap: 4px; flex-wrap: wrap; }
.status-btn[b-j13ugyzjkm] {
    padding: 3px 8px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 5px;
    background: var(--bg, #fff);
    color: var(--text, inherit);
    font-size: 11px;
    cursor: pointer;
    line-height: 1.2;
}
.status-btn-done:hover[b-j13ugyzjkm]    { background: #dcfce7; border-color: #16a34a; color: #166534; }
.status-btn-notdone:hover[b-j13ugyzjkm] { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.status-btn-clear[b-j13ugyzjkm] { color: var(--muted, #9ca3af); }
.status-btn-clear:hover[b-j13ugyzjkm] { background: #f3f4f6; }

.status-reason-entry[b-j13ugyzjkm] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex-basis: 100%;
    margin-top: 2px;
}
/* Input takes a full row; Save / ✕ wrap to the next line so they never get pushed off a narrow tab. */
.status-reason-entry .reply-input[b-j13ugyzjkm] { flex: 1 1 100%; }
.status-reason-entry .reply-send[b-j13ugyzjkm],
.status-reason-entry .popover-cancel[b-j13ugyzjkm] { flex: 0 0 auto; }
.status-reason-entry .popover-cancel[b-j13ugyzjkm] { margin-left: auto; }

.pdf-readonly .status-actions[b-j13ugyzjkm],
.pdf-readonly .status-reason-entry[b-j13ugyzjkm] { display: none !important; }
/* /Components/Widgets/DevOpsPrsWidget.razor.rz.scp.css */
.widget--devops[b-2s8uwcoqay] {
    width: 380px;
}

/* ── PR row (clickable link) ── */

.do-pr-list[b-2s8uwcoqay] {
    display: flex;
    flex-direction: column;
}

.do-pr-row[b-2s8uwcoqay] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background .12s;
    gap: 12px;
}

    .do-pr-row:last-child[b-2s8uwcoqay] { border-bottom: none; }
    .do-pr-row:hover[b-2s8uwcoqay] { background: var(--surface2); }

.do-pr-row-left[b-2s8uwcoqay] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Icon bubble ── */

.do-pr-icon[b-2s8uwcoqay] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 0;
    flex-shrink: 0;
}

.do-pr-icon--open[b-2s8uwcoqay]   { background: rgba(0, 120, 212, .12); color: #3b9dff; border: 1px solid rgba(0, 120, 212, .30); }
.do-pr-icon--review[b-2s8uwcoqay] { background: rgba(240, 165, 0, .10); color: var(--accent); border: 1px solid rgba(240, 165, 0, .25); }

/* ── Labels ── */

.do-pr-label[b-2s8uwcoqay] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.do-pr-sub[b-2s8uwcoqay] {
    font-size: 11px;
    color: var(--muted);
}

/* ── Count badge ── */

.do-pr-count[b-2s8uwcoqay] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
    min-width: 32px;
    text-align: right;
}

    .do-pr-count--zero[b-2s8uwcoqay] { color: var(--muted); }
/* /Components/Widgets/DocReviewsWidget.razor.rz.scp.css */
.widget--doc-reviews[b-se8r2pwcd9] {
    width: 380px;
}

/* ── Row ── */

.dr-w-list[b-se8r2pwcd9] {
    display: flex;
    flex-direction: column;
}

.dr-w-row[b-se8r2pwcd9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background .12s;
    gap: 12px;
}

    .dr-w-row:last-child[b-se8r2pwcd9] { border-bottom: none; }
    .dr-w-row:hover[b-se8r2pwcd9] { background: var(--surface2); }

.dr-w-row-left[b-se8r2pwcd9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Icon bubble ── */

.dr-w-icon[b-se8r2pwcd9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 0;
    flex-shrink: 0;
}

.dr-w-icon--review[b-se8r2pwcd9]     { background: rgba(88, 166, 255, .10); color: #58a6ff;        border: 1px solid rgba(88, 166, 255, .22); }
.dr-w-icon--approval[b-se8r2pwcd9]   { background: rgba(63, 185, 80, .12);  color: var(--success); border: 1px solid rgba(63, 185, 80, .25); }
.dr-w-icon--requested[b-se8r2pwcd9]  { background: rgba(240, 165, 0, .10);  color: var(--accent);  border: 1px solid rgba(240, 165, 0, .25); }
.dr-w-icon--nofiles[b-se8r2pwcd9]    { background: rgba(220, 38, 38, .10);  color: #dc2626;        border: 1px solid rgba(220, 38, 38, .22); }
.dr-w-icon--unapproved[b-se8r2pwcd9] { background: rgba(130, 80, 255, .10); color: #a678f0;        border: 1px solid rgba(130, 80, 255, .22); }

/* ── Labels ── */

.dr-w-label[b-se8r2pwcd9] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.dr-w-sub[b-se8r2pwcd9] {
    font-size: 11px;
    color: var(--muted);
}

/* ── Count badge ── */

.dr-w-count[b-se8r2pwcd9] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
    min-width: 32px;
    text-align: right;
}

    .dr-w-count--zero[b-se8r2pwcd9] { color: var(--muted); }

.dr-w-empty[b-se8r2pwcd9] {
    padding: 18px 20px;
    font-size: 12px;
    color: var(--muted);
}
/* /Components/Widgets/IncidentReportsWidget.razor.rz.scp.css */
.inc-w-body[b-qundjda94m] {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: background .12s;
}

    .inc-w-body:hover[b-qundjda94m] {
        background: var(--surface2);
    }
/* /Components/Widgets/NcrsWidget.razor.rz.scp.css */
.widget--ncrs[b-ll2ptcwytu] {
    width: 380px;
}

/* ── Rows ── */
.nw-list[b-ll2ptcwytu] {
    display: flex;
    flex-direction: column;
}

.nw-row[b-ll2ptcwytu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background .12s;
    gap: 12px;
}

    .nw-row:hover[b-ll2ptcwytu] { background: var(--surface2); }
    .nw-row--alert[b-ll2ptcwytu] { background: rgba(248, 81, 73, .06); }

.nw-left[b-ll2ptcwytu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Icon bubble ── */
.nw-icon[b-ll2ptcwytu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
    background: var(--surface2);
    border: 1px solid var(--border);
}

.nw-icon--overdue[b-ll2ptcwytu] { background: rgba(248, 81, 73, .10); border-color: rgba(248, 81, 73, .25); }
.nw-icon--signoff[b-ll2ptcwytu] { background: rgba(240, 165, 0, .10); border-color: rgba(240, 165, 0, .25); }

/* ── Labels ── */
.nw-label[b-ll2ptcwytu] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.nw-sub[b-ll2ptcwytu] {
    font-size: 11px;
    color: var(--muted);
}

/* ── Count badge ── */
.nw-count[b-ll2ptcwytu] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
    min-width: 32px;
    text-align: right;
}

    .nw-count--zero[b-ll2ptcwytu]    { color: var(--muted); }
    .nw-count--overdue[b-ll2ptcwytu] { color: var(--danger); }

/* ── By-stage footer ── */
.nw-stages[b-ll2ptcwytu] {
    padding: 14px 20px 16px;
}

.nw-stages-label[b-ll2ptcwytu] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: 10px;
}

.nw-stages-grid[b-ll2ptcwytu] {
    display: flex;
    gap: 10px;
}

.nw-stage[b-ll2ptcwytu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 10px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface2);
}

.nw-stage-val[b-ll2ptcwytu] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
}

.nw-stage-lbl[b-ll2ptcwytu] {
    font-size: 10px;
    color: var(--muted);
    line-height: 1.2;
}
/* /Components/Widgets/ReportsWidget.razor.rz.scp.css */
.widget--reports[b-y8qt4rgckr] {
    width: 380px;
}

/* ── Rows ── */
.rw-list[b-y8qt4rgckr] {
    display: flex;
    flex-direction: column;
}

.rw-row[b-y8qt4rgckr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background .12s;
    gap: 12px;
}

    .rw-row:hover[b-y8qt4rgckr] { background: var(--surface2); }
    .rw-row--alert[b-y8qt4rgckr] { background: rgba(240, 165, 0, .06); }

.rw-left[b-y8qt4rgckr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Icon bubble ── */
.rw-icon[b-y8qt4rgckr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
    background: var(--surface2);
    border: 1px solid var(--border);
}

.rw-icon--pending[b-y8qt4rgckr]   { background: rgba(240, 165, 0, .10);  border-color: rgba(240, 165, 0, .25); }
.rw-icon--escalated[b-y8qt4rgckr] { background: rgba(88, 166, 255, .10); border-color: rgba(88, 166, 255, .22); color: #58a6ff; font-size: 18px; }

/* ── Labels ── */
.rw-label[b-y8qt4rgckr] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.rw-sub[b-y8qt4rgckr] {
    font-size: 11px;
    color: var(--muted);
}

/* ── Count badge ── */
.rw-count[b-y8qt4rgckr] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
    min-width: 32px;
    text-align: right;
}

    .rw-count--zero[b-y8qt4rgckr]  { color: var(--muted); }
    .rw-count--alert[b-y8qt4rgckr] { color: var(--accent); }

/* ── Footer (last 7 days) ── */
.rw-footer[b-y8qt4rgckr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    gap: 12px;
}

.rw-footer-label[b-y8qt4rgckr] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

.rw-footer-stat[b-y8qt4rgckr] {
    font-size: 12px;
    color: var(--muted);
}

    .rw-footer-stat strong[b-y8qt4rgckr] { color: var(--text); font-weight: 600; }
/* /Components/Widgets/ReportTypeWidget.razor.rz.scp.css */
/* Scoped styles for ReportTypeWidget (product-fault / process report widgets). These reuse the same rw-*
   markup as ReportsWidget, but Blazor CSS isolation is per-component, so ReportsWidget.razor.css can't reach
   this component — it needs its own copy, or the rows render as bare underlined links. */

.widget--reports[b-72z0jyaav1] {
    width: 380px;
}

/* ── Rows ── */
.rw-list[b-72z0jyaav1] {
    display: flex;
    flex-direction: column;
}

.rw-row[b-72z0jyaav1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background .12s;
    gap: 12px;
}

    .rw-row:hover[b-72z0jyaav1] { background: var(--surface2); }
    .rw-row--alert[b-72z0jyaav1] { background: rgba(240, 165, 0, .06); }

.rw-left[b-72z0jyaav1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Icon bubble ── */
.rw-icon[b-72z0jyaav1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
    background: var(--surface2);
    border: 1px solid var(--border);
}

.rw-icon--pending[b-72z0jyaav1]   { background: rgba(240, 165, 0, .10);  border-color: rgba(240, 165, 0, .25); }
.rw-icon--escalated[b-72z0jyaav1] { background: rgba(88, 166, 255, .10); border-color: rgba(88, 166, 255, .22); color: #58a6ff; font-size: 18px; }

/* ── Labels ── */
.rw-label[b-72z0jyaav1] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.rw-sub[b-72z0jyaav1] {
    font-size: 11px;
    color: var(--muted);
}

/* ── Count badge ── */
.rw-count[b-72z0jyaav1] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
    min-width: 32px;
    text-align: right;
}

    .rw-count--zero[b-72z0jyaav1]  { color: var(--muted); }
    .rw-count--alert[b-72z0jyaav1] { color: var(--accent); }
/* /Components/Widgets/TicketsWidget.razor.rz.scp.css */
.widget--tickets[b-e5yf8hqptm] {
    width: 380px;
}

/* ── Row ── */

.tkt-w-list[b-e5yf8hqptm] {
    display: flex;
    flex-direction: column;
}

.tkt-w-row[b-e5yf8hqptm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background .12s;
    gap: 12px;
}

    .tkt-w-row:last-child[b-e5yf8hqptm] { border-bottom: none; }
    .tkt-w-row:hover[b-e5yf8hqptm] { background: var(--surface2); }

.tkt-w-row-left[b-e5yf8hqptm] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Icon bubble ── */

.tkt-w-icon[b-e5yf8hqptm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
}

.tkt-w-icon--open[b-e5yf8hqptm] { background: rgba(88, 166, 255, .10); color: #58a6ff;       border: 1px solid rgba(88, 166, 255, .22); }
.tkt-w-icon--new[b-e5yf8hqptm]  { background: rgba(240, 165, 0, .10);  color: var(--accent); border: 1px solid rgba(240, 165, 0, .25); }

/* ── Labels ── */

.tkt-w-label[b-e5yf8hqptm] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.tkt-w-sub[b-e5yf8hqptm] {
    font-size: 11px;
    color: var(--muted);
}

/* ── Count badge ── */

.tkt-w-count[b-e5yf8hqptm] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
    min-width: 32px;
    text-align: right;
}

    .tkt-w-count--zero[b-e5yf8hqptm] { color: var(--muted); }