/* /Components/Editors/DocumentationAssetsSettingsCog.razor.rz.scp.css */
body[b-q33apa3xhu] {
}
/* /Components/Editors/GenericTextSettingsCogDynamic.razor.rz.scp.css */
.translate-bar[b-rbhgx41vlx] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .6rem .75rem;
    border: 1px solid var(--surface-strong);
    border-radius: 10px;
    background: var(--surface);
    margin-bottom: .35rem;
}

.translate-label[b-rbhgx41vlx] { font-size: .9rem; color: var(--content-text); }

.translate-lang[b-rbhgx41vlx] { width: auto; min-width: 9rem; }

.translate-status[b-rbhgx41vlx] { font-size: .85rem; color: var(--content-text-muted); }

.translate-hint[b-rbhgx41vlx] { margin-bottom: 1rem; }
/* /Components/Editors/NavigationEditor.razor.rz.scp.css */
.editor-header[b-jgnffj0k8v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

    .editor-header .h5[b-jgnffj0k8v] {
        margin: 0;
        font-weight: 650;
    }

.small[b-jgnffj0k8v] { font-size: 0.85rem; }

.editor-buttons[b-jgnffj0k8v] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.loading-row[b-jgnffj0k8v] { display: flex; align-items: center; gap: 0.6rem; }

.spinner[b-jgnffj0k8v] {
    width: 16px; height: 16px; border-radius: 999px;
    border: 2px solid var(--glass-border);
    border-top-color: var(--spinner-accent);
    animation: spin-b-jgnffj0k8v 0.9s linear infinite; display: inline-block;
}

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

/* ---------- Add item popover ---------- */
.add-menu[b-jgnffj0k8v] { position: relative; }

.add-popover[b-jgnffj0k8v] {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    width: 280px;
    max-height: 60vh;
    overflow-y: auto;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    padding: 0.5rem;
    /* opaque so it never bleeds through onto the content behind it */
    background: var(--content-card-bg);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

.add-backdrop[b-jgnffj0k8v] {
    position: fixed;
    inset: 0;
    z-index: 30;
}

.add-group-label[b-jgnffj0k8v] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--content-text-muted);
    padding: 0.4rem 0.4rem 0.2rem;
}

.add-item[b-jgnffj0k8v] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.5rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--content-text);
    cursor: pointer;
}

    .add-item:hover:not(:disabled)[b-jgnffj0k8v] {
        border-color: var(--glass-border);
        background: color-mix(in srgb, var(--glass-1) 70%, transparent);
    }

    .add-item:disabled[b-jgnffj0k8v] { opacity: 0.5; cursor: not-allowed; }

.add-empty[b-jgnffj0k8v] { padding: 0.35rem 0.5rem; }

.add-divider[b-jgnffj0k8v] {
    height: 1px;
    background: var(--glass-border);
    margin: 0.4rem 0.2rem;
}

/* ---------- Sections ---------- */
.menu-sections[b-jgnffj0k8v] { display: grid; gap: 0.9rem; }

.menu-section[b-jgnffj0k8v] {
    border: 1px solid var(--content-card-border);
    border-radius: 16px;
    background: var(--content-card-bg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.menu-section-head[b-jgnffj0k8v] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    background: var(--content-card-header);
    border-bottom: 1px solid var(--glass-border);
}

    .menu-section-head .section-title[b-jgnffj0k8v] { font-weight: 700; }

.group-title[b-jgnffj0k8v] { max-width: 220px; }
.group-icon[b-jgnffj0k8v]  { max-width: 70px; }

.row-spacer[b-jgnffj0k8v] { flex: 1 1 auto; }

/* ---------- Rows ---------- */
.menu-rows[b-jgnffj0k8v] {
    padding: 0.55rem;
    display: grid;
    gap: 0.4rem;
    min-height: 12px;
    border-radius: 0 0 16px 16px;
    transition: background 120ms ease, outline-color 120ms ease;
}

    .menu-rows.dropzone.drag-over[b-jgnffj0k8v] {
        outline: 2px dashed var(--accent);
        outline-offset: -4px;
        background: color-mix(in srgb, var(--accent) 8%, transparent);
    }

.menu-row[b-jgnffj0k8v] {
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--glass-1) 55%, transparent);
}

    .menu-row[draggable="true"][b-jgnffj0k8v] { cursor: grab; }
    .menu-row[draggable="true"]:active[b-jgnffj0k8v] { cursor: grabbing; }
    .menu-row.expanded[b-jgnffj0k8v] { border-color: var(--glass-border-strong); }

    /* hovered drop target while dragging another row */
    .menu-row.drag-over[b-jgnffj0k8v] {
        border-color: var(--accent);
        box-shadow: 0 -2px 0 0 var(--accent) inset;
    }

.menu-row-main[b-jgnffj0k8v] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.55rem;
    cursor: pointer;
}

.drag-handle[b-jgnffj0k8v] {
    cursor: grab;
    font-size: 1.05rem;
    letter-spacing: -2px;
    user-select: none;
}

/* dropzone highlight (e.g. dropping into an empty group) */
.menu-rows.drop-target[b-jgnffj0k8v] {
    outline: 2px dashed var(--accent);
    outline-offset: -4px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ---------- Up/down reorder controls (groups) ---------- */
.reorder[b-jgnffj0k8v] {
    display: inline-flex;
    flex-direction: column;
    line-height: 0;
}

.reorder-btn[b-jgnffj0k8v] {
    border: none;
    background: transparent;
    color: var(--content-text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 0.9;
    padding: 0 0.2rem;
}

    .reorder-btn:hover[b-jgnffj0k8v] {
        color: var(--content-text);
    }

.row-icon[b-jgnffj0k8v] { width: 1.3rem; text-align: center; }

.row-title[b-jgnffj0k8v] { font-weight: 600; }

    .row-title.is-off[b-jgnffj0k8v] {
        color: var(--content-text-muted);
        text-decoration: line-through;
        opacity: 0.7;
    }

.pill[b-jgnffj0k8v] {
    font-size: 0.68rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    color: var(--content-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.icon-btn[b-jgnffj0k8v] {
    border: 1px solid transparent;
    background: transparent;
    color: var(--content-text);
    cursor: pointer;
    border-radius: 8px;
    padding: 0.2rem 0.4rem;
    font-size: 0.95rem;
    line-height: 1;
}

    .icon-btn:hover[b-jgnffj0k8v] {
        border-color: var(--glass-border);
        background: color-mix(in srgb, var(--glass-1) 70%, transparent);
    }

    .icon-btn.danger:hover[b-jgnffj0k8v] {
        border-color: var(--chip-bad-border);
        color: var(--chip-bad-text);
    }

.empty-drop[b-jgnffj0k8v] {
    padding: 0.7rem;
    text-align: center;
    border: 1px dashed var(--glass-border);
    border-radius: 10px;
}

/* ---------- Row detail (expanded) ---------- */
.menu-row-detail[b-jgnffj0k8v] {
    display: grid;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem 0.7rem;
    border-top: 1px solid var(--glass-border);
}

.field[b-jgnffj0k8v] { display: grid; gap: 0.3rem; }

    .field label[b-jgnffj0k8v] {
        font-size: 0.85rem;
        color: var(--content-text-muted);
    }

.field-inline[b-jgnffj0k8v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

@media (max-width: 720px) {
    .field-inline[b-jgnffj0k8v] { grid-template-columns: 1fr; }
}

input.input[b-jgnffj0k8v], select.input[b-jgnffj0k8v], textarea.input[b-jgnffj0k8v] {
    width: 100%;
    border-radius: 10px;
    padding: 0.5rem 0.6rem;
    outline: none;
}

    input.input:focus[b-jgnffj0k8v], select.input:focus[b-jgnffj0k8v], textarea.input:focus[b-jgnffj0k8v] {
        border-color: var(--glass-border-strong) !important;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent) !important;
    }

/* ---------- Toggle switch ---------- */
.toggle[b-jgnffj0k8v] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    user-select: none;
    color: var(--content-text);
}

.toggle-input[b-jgnffj0k8v] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.toggle-ui[b-jgnffj0k8v] {
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-strong) 55%, transparent);
    border: 1px solid var(--glass-border);
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}

    .toggle-ui[b-jgnffj0k8v]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 3px;
        width: 16px;
        height: 16px;
        border-radius: 999px;
        transform: translateY(-50%);
        background: color-mix(in srgb, var(--content-text) 80%, transparent);
        transition: left .15s ease, background .15s ease;
    }

.toggle-input:checked + .toggle-ui[b-jgnffj0k8v] {
    background: color-mix(in srgb, var(--accent) 55%, transparent);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--glass-border));
}

    .toggle-input:checked + .toggle-ui[b-jgnffj0k8v]::after {
        left: 21px;
        background: var(--text-on-accent);
    }

.toggle-input:focus-visible + .toggle-ui[b-jgnffj0k8v] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

.toggle-text[b-jgnffj0k8v] {
    font-size: .85rem;
    color: var(--content-text-muted);
}

/* Home-page star toggle */
.home-star[b-jgnffj0k8v] {
    opacity: 0.5;
    font-size: 1rem;
    line-height: 1;
}

    .home-star:hover[b-jgnffj0k8v] {
        opacity: 1;
    }

    .home-star.is-home[b-jgnffj0k8v] {
        opacity: 1;
        color: #f5b301;
    }
/* /Components/Editors/RolesEditor.razor.rz.scp.css */
.editor-header[b-o6kmwrrcgv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

    .editor-header .h5[b-o6kmwrrcgv] {
        margin: 0;
        font-weight: 650;
    }

.small[b-o6kmwrrcgv] { font-size: 0.85rem; }

.loading-row[b-o6kmwrrcgv] { display: flex; align-items: center; gap: 0.6rem; }

.spinner[b-o6kmwrrcgv] {
    width: 16px; height: 16px; border-radius: 999px;
    border: 2px solid var(--glass-border);
    border-top-color: var(--spinner-accent);
    animation: spin-b-o6kmwrrcgv 0.9s linear infinite; display: inline-block;
}

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

/* ---------- Roles strip ---------- */
.roles-strip[b-o6kmwrrcgv] {
    border-radius: 14px;
    margin-bottom: 0.9rem;
}

    .roles-strip .section-title[b-o6kmwrrcgv] {
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

.role-edits[b-o6kmwrrcgv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.role-edit[b-o6kmwrrcgv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--glass-1) 55%, transparent);
}

.input.role-name[b-o6kmwrrcgv] {
    width: 140px;
    border-radius: 999px;
    padding: 0.3rem 0.6rem;
    outline: none;
}

    .input.role-name:focus[b-o6kmwrrcgv] {
        border-color: var(--glass-border-strong) !important;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent) !important;
    }

/* ---------- Matrix ---------- */
.matrix-wrap[b-o6kmwrrcgv] {
    overflow-x: auto;
    border: 1px solid var(--content-card-border);
    border-radius: 16px;
    background: var(--content-card-bg);
}

.role-matrix[b-o6kmwrrcgv] {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

    .role-matrix th[b-o6kmwrrcgv],
    .role-matrix td[b-o6kmwrrcgv] {
        padding: 0.5rem 0.6rem;
        border-bottom: 1px solid var(--glass-border);
        text-align: center;
        white-space: nowrap;
    }

    /* header row sticks while scrolling vertically */
    .role-matrix thead th[b-o6kmwrrcgv] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--content-card-header);
        font-size: 0.82rem;
    }

    /* first column sticks while scrolling horizontally */
    .role-matrix .corner[b-o6kmwrrcgv],
    .role-matrix .page-cell[b-o6kmwrrcgv] {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--content-card-header);
        text-align: left;
    }

    .role-matrix thead .corner[b-o6kmwrrcgv] {
        z-index: 3; /* above both sticky axes */
    }

.page-cell[b-o6kmwrrcgv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .page-cell .row-icon[b-o6kmwrrcgv] { width: 1.3rem; text-align: center; }

    .page-cell .page-names[b-o6kmwrrcgv] {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

        .page-cell .page-names .name[b-o6kmwrrcgv] { font-weight: 600; }

.role-col.col-disabled[b-o6kmwrrcgv] { color: var(--content-text-muted); opacity: 0.7; }
.role-col.col-unknown[b-o6kmwrrcgv] {
    color: var(--chip-bad-text);
}
.role-col.col-everyone[b-o6kmwrrcgv] {
    color: var(--accent);
    font-weight: 700;
    border-right: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

/* A cell made redundant because the row's Everyone box is ticked. */
.cell.cell-dimmed[b-o6kmwrrcgv] { opacity: 0.35; }

.cell input[type="checkbox"][b-o6kmwrrcgv],
.vis-cell input[type="checkbox"][b-o6kmwrrcgv] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent);
}

.role-matrix tbody tr:hover td[b-o6kmwrrcgv],
.role-matrix tbody tr:hover .page-cell[b-o6kmwrrcgv] {
    background: var(--content-table-row-hover);
}

/* ---------- Legend ---------- */
.matrix-legend[b-o6kmwrrcgv] {
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.swatch[b-o6kmwrrcgv] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--glass-border);
    vertical-align: middle;
}

    .swatch.col-disabled[b-o6kmwrrcgv] { background: color-mix(in srgb, var(--content-text-muted) 50%, transparent); }
    .swatch.col-unknown[b-o6kmwrrcgv] { background: var(--chip-bad-bg); border-color: var(--chip-bad-border); }

/* ---------- Toggle switch (compact) ---------- */
.toggle[b-o6kmwrrcgv] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    user-select: none;
    color: var(--content-text);
}

.toggle-input[b-o6kmwrrcgv] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.toggle-ui[b-o6kmwrrcgv] {
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-strong) 55%, transparent);
    border: 1px solid var(--glass-border);
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}

    .toggle-ui[b-o6kmwrrcgv]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 3px;
        width: 16px;
        height: 16px;
        border-radius: 999px;
        transform: translateY(-50%);
        background: color-mix(in srgb, var(--content-text) 80%, transparent);
        transition: left .15s ease, background .15s ease;
    }

.toggle-input:checked + .toggle-ui[b-o6kmwrrcgv] {
    background: color-mix(in srgb, var(--accent) 55%, transparent);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--glass-border));
}

    .toggle-input:checked + .toggle-ui[b-o6kmwrrcgv]::after {
        left: 21px;
        background: var(--text-on-accent);
    }

.icon-btn[b-o6kmwrrcgv] {
    border: 1px solid transparent;
    background: transparent;
    color: var(--content-text);
    cursor: pointer;
    border-radius: 8px;
    padding: 0.15rem 0.35rem;
    line-height: 1;
}

    .icon-btn.danger:hover[b-o6kmwrrcgv] {
        border-color: var(--chip-bad-border);
        color: var(--chip-bad-text);
    }
/* /Components/Editors/RoleTagPicker.razor.rz.scp.css */
.role-tags[b-8tgnhssl0u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.role-chip[b-8tgnhssl0u] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.3rem 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    background: var(--chip-good-bg);
    border: 1px solid var(--chip-good-border);
    color: var(--chip-good-text);
}

    .role-chip.unknown[b-8tgnhssl0u] {
        background: var(--chip-bad-bg);
        border-color: var(--chip-bad-border);
        color: var(--chip-bad-text);
    }

.chip-x[b-8tgnhssl0u] {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0 0.15rem;
    opacity: 0.8;
}

    .chip-x:hover[b-8tgnhssl0u] {
        opacity: 1;
    }

.role-add[b-8tgnhssl0u] {
    width: auto;
    min-width: 130px;
    border-radius: 999px !important;
    padding: 0.3rem 0.6rem !important;
    font-size: 0.85rem;
}
/* /Components/Editors/ThemeEditor.razor.rz.scp.css */
.editor-header[b-ixy5zjaz9x] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

    .editor-header .h5[b-ixy5zjaz9x] {
        margin: 0;
        font-weight: 650;
    }

.small[b-ixy5zjaz9x] {
    font-size: 0.85rem;
}

.spinner[b-ixy5zjaz9x] {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid var(--glass-border);
    border-top-color: var(--spinner-accent);
    animation: spin-b-ixy5zjaz9x 0.9s linear infinite;
    display: inline-block;
}

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

/* ---------- Live preview strip ---------- */
.theme-preview[b-ixy5zjaz9x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem;
    margin-bottom: 0.9rem;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--glass-1) 60%, transparent);
}

.tp-chip[b-ixy5zjaz9x] {
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ---------- Grouped fields ---------- */
.theme-groups[b-ixy5zjaz9x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.9rem;
    align-items: start;
}

.theme-card[b-ixy5zjaz9x] {
    border: 1px solid var(--content-card-border);
    border-radius: 16px;
    background: var(--content-card-bg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.theme-card-header[b-ixy5zjaz9x] {
    padding: 0.55rem 0.75rem;
    font-weight: 700;
    background: var(--content-card-header);
    border-bottom: 1px solid var(--glass-border);
}

.theme-fields[b-ixy5zjaz9x] {
    padding: 0.75rem;
    display: grid;
    gap: 0.7rem;
}

.field[b-ixy5zjaz9x] {
    display: grid;
    gap: 0.3rem;
}

    .field label[b-ixy5zjaz9x] {
        font-size: 0.85rem;
        color: var(--content-text-muted);
    }

/* colour rows put the swatch beside the label */
.field-color[b-ixy5zjaz9x] {
    grid-template-columns: 1fr auto;
    align-items: center;
}

    .field-color label[b-ixy5zjaz9x] {
        grid-row: 1;
    }

    .field-color .form-text[b-ixy5zjaz9x] {
        grid-column: 1 / -1;
    }

.theme-color[b-ixy5zjaz9x] {
    width: 46px;
    height: 30px;
    padding: 2px;
    border-radius: 8px;
    cursor: pointer;
}
/* /Components/Layout/IFrameSheet.razor.rz.scp.css */
/* Overlay-less modal "sheet" */
.sheet[b-kbmlrds7p0] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(1100px, 96vw);
    max-height: 92vh;
    max-width: 50vw;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 10px 36px rgba(0,0,0,.35);
    overflow: hidden;
    z-index: 99;
}

/* Toolbar */
.sheet-head[b-kbmlrds7p0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--content-card-header);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sheet-title[b-kbmlrds7p0] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icon-btn[b-kbmlrds7p0] {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 8px;
}

    .icon-btn:hover[b-kbmlrds7p0] {
        background: rgba(255,255,255,0.08);
    }

/* Body + iframe */
.sheet-body[b-kbmlrds7p0] {
    position: relative;
    flex: 1 1 auto;
    min-height: 340px;
    height: 100vh;
}

/* Spinner overlay inside body */
.iframe-loading[b-kbmlrds7p0] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.10);
    z-index: 1;
}

.spinner-lg[b-kbmlrds7p0] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: #7aa2ff;
    border-radius: 50%;
    animation: spin-b-kbmlrds7p0 0.8s linear infinite;
    margin-bottom: 8px;
}

.status-note[b-kbmlrds7p0] {
    font-size: 12px;
    opacity: 0.85;
}

@keyframes spin-b-kbmlrds7p0 {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Layout/ImpersonationBadge.razor.rz.scp.css */
.imp-wrap[b-wde2a5n5fw] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.imp-open[b-wde2a5n5fw] {
    border: 1px solid var(--glass-border);
    background: color-mix(in oklab, var(--glass-1) 75%, transparent);
    color: var(--text);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 650;
    cursor: pointer;
}

.imp-badge[b-wde2a5n5fw] {
    display: flex;
    align-items: center;
    gap: .6rem;
    border: 1px solid color-mix(in oklab, var(--warning) 45%, var(--glass-border));
    background: color-mix(in oklab, var(--glass-1) 85%, transparent);
    border-radius: 999px;
    padding: 6px 10px;
}

    .imp-badge .dot[b-wde2a5n5fw] {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: var(--warning);
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--warning) 25%, transparent);
    }

    .imp-badge .text[b-wde2a5n5fw] {
        color: var(--text-muted);
    }

    .imp-badge b[b-wde2a5n5fw] {
        color: var(--text);
    }

.imp-clear[b-wde2a5n5fw] {
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text);
    border-radius: 999px;
    padding: 4px 10px;
    cursor: pointer;
}

    .imp-clear:hover[b-wde2a5n5fw] {
        border-color: var(--glass-border-strong);
    }

.imp-backdrop[b-wde2a5n5fw] {
    position: fixed;
    inset: 0;
    background: color-mix(in oklab, #000 55%, transparent);
    z-index: 999;
}

.imp-modal[b-wde2a5n5fw] {
    position: fixed;
    top: 90px;
    right: 18px;
    width: min(420px, calc(100vw - 32px));
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
    box-shadow: var(--shadow);
    padding: 12px;
    z-index: 1000;
}

.imp-modal-head[b-wde2a5n5fw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 10px;
}

    .imp-modal-head .title[b-wde2a5n5fw] {
        font-weight: 800;
    }

    .imp-modal-head .x[b-wde2a5n5fw] {
        border: 0;
        background: transparent;
        color: var(--text);
        font-size: 18px;
        cursor: pointer;
    }

.imp-loading[b-wde2a5n5fw] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 12px 0;
}

.imp-select[b-wde2a5n5fw] {
    width: 100%;
    margin-top: 6px;
    border: 1px solid var(--glass-border);
    background: var(--bg1);
    color: var(--text);
    border-radius: 12px;
    padding: 10px 12px;
}

.imp-actions[b-wde2a5n5fw] {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 12px;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* layout grid */
.app-shell[b-5if7x8x9tx] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    min-height: 100dvh;
    padding: 12px;
    box-sizing: border-box;
}

/* glass helpers */
.glass[b-5if7x8x9tx] {
    background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
}

/* left navigation */
.nav[b-5if7x8x9tx] {
    position: sticky;
    top: 24px;
    height: calc(100dvh - 48px);
    border-radius: var(--radius-lg);
    padding: 0 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* key */
}

    .nav.glass[b-5if7x8x9tx] {
    }
/* ensures glass is applied if you add class in markup later */

.brand[b-5if7x8x9tx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0px 12px 0px 12px;
    border-bottom: 1px dashed var(--glass-border);
    margin-bottom: 16px;
    height:90px;
}

    .brand img[b-5if7x8x9tx] {
        height: 40px;
    }

.brand-title[b-5if7x8x9tx] {
    font-weight: 700;
    font-size: 1.05rem;
}

.brand-sub[b-5if7x8x9tx] {
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* links */
.navi-links[b-5if7x8x9tx] {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    overflow-y: auto; /* key */
    padding-right: 6px; /* avoids scrollbar overlapping */
}
    .navi-links[b-5if7x8x9tx]::-webkit-scrollbar {
        width: 8px;
    }

    .navi-links[b-5if7x8x9tx]::-webkit-scrollbar-thumb {
        background: color-mix(in oklab, var(--glass-border) 70%, transparent);
        border-radius: 999px;
    }
.navi-link[b-5if7x8x9tx] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-decoration: none;
    color: var(--text-muted);
    padding: 5px 2px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
}

.navi-link .icon[b-5if7x8x9tx] {
    width: 1.25rem;
    text-align: center;
    opacity: .9;
}

.navi-link:hover[b-5if7x8x9tx] {
    color: var(--text);
    border-color: var(--glass-border);
    background: color-mix(in oklab, var(--glass-1) 70%, transparent);
    transform: translateY(-1px);
}

    .navi-link[aria-current="page"][b-5if7x8x9tx], .navi-link.active[b-5if7x8x9tx] {
        color: var(--text);
        background: color-mix(in oklab, var(--glass-1) 85%, transparent);
        border-color: var(--glass-border-strong);
        box-shadow: inset 0 0 0 1px var(--glass-border);
    }

/* spacer pushes user card down */
.spacer[b-5if7x8x9tx] {
    flex: 1 1 auto;
}

/* user card + buttons */
.user-card[b-5if7x8x9tx] {
    gap: 12px;
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid var(--glass-border);
    background: color-mix(in oklab, var(--glass-1) 85%, transparent);
    text-align: center;
    max-height:230px;
    max-width:250px;
}

.user-avatar[b-5if7x8x9tx] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--accent),var(--accent-2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-on-accent);
    overflow: hidden;
    box-shadow: 0 6px 16px color-mix(in oklab,#000 60%,transparent);
}

    .user-avatar img[b-5if7x8x9tx] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.user-info[b-5if7x8x9tx] {
    font-size: .9rem;
    line-height: 1.4;
}

    .user-info .name[b-5if7x8x9tx] {
        font-weight: 600;
    }

    .user-info .email[b-5if7x8x9tx] {
        font-size: .8rem;
        color: var(--text-muted);
        word-break: break-all;
    }


.btn-primary[b-5if7x8x9tx], .btn-secondary[b-5if7x8x9tx], .refresh[b-5if7x8x9tx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 18%, transparent), transparent);
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .2px;
}

.btn-secondary[b-5if7x8x9tx] {
    background: linear-gradient(180deg, color-mix(in oklab, var(--accent-2) 14%, transparent), transparent);
}

    .btn-primary:hover[b-5if7x8x9tx], .btn-secondary:hover[b-5if7x8x9tx], .refresh:hover[b-5if7x8x9tx] {
        transform: translateY(-1px);
        border-color: var(--glass-border-strong);
    }

/* main column */
.main[b-5if7x8x9tx] {
    min-width: 0; /* fix flex overflow */
}

.topbar[b-5if7x8x9tx] {
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .topbar.glass[b-5if7x8x9tx] {
    }

.topbar-title[b-5if7x8x9tx] {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .3px;
}

.refresh[b-5if7x8x9tx] {
    gap: 8px;
    cursor: pointer;
    background: linear-gradient(180deg, color-mix(in oklab, var(--accent-2) 16%, transparent), transparent);
}

/* simple utils */
.mt-2[b-5if7x8x9tx] {
    margin-top: .5rem;
}

/* responsive tweaks */
@media (max-width: 1024px) {
    .app-shell[b-5if7x8x9tx] {
        grid-template-columns: 88px 1fr;
    }

    .brand div[b-5if7x8x9tx] {
        display: none;
    }

    .nav-link span:not(.icon)[b-5if7x8x9tx] {
        display: none;
    }

    .nav-link[b-5if7x8x9tx] {
        justify-content: center;
        padding: 10px;
    }
}

@media (max-width: 640px) {
    .app-shell[b-5if7x8x9tx] {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }

    .nav[b-5if7x8x9tx] {
        position: static;
        height: auto;
        order: 2;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .nav-links[b-5if7x8x9tx] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .user-card[b-5if7x8x9tx] {
        order: 3;
    }

    .topbar[b-5if7x8x9tx] {
        position: sticky;
        top: 16px;
        z-index: 10;
    }
}

/* Group header styled like the admin rail group labels: a small uppercase title,
   but still a clickable toggle (chevron) that respects expand / auto-expand. */
.nav-group-header[b-5if7x8x9tx] {
    appearance: none;
    background: none;
    border: none;
    font: inherit;
    width: 100%;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    margin-top: 10px;
    color: var(--text-muted);
}

    .nav-group-header .icon[b-5if7x8x9tx] {
        width: 1.25rem;
        text-align: center;
        opacity: .85;
    }

    .nav-group-header .title[b-5if7x8x9tx] {
        flex: 1;
        text-transform: uppercase;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
    }

    .nav-group-header:hover[b-5if7x8x9tx] {
        color: var(--text);
    }

    .nav-group-header:focus-visible[b-5if7x8x9tx] {
        outline: none;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
        border-radius: var(--radius-md);
    }

    .nav-group-header .chev[b-5if7x8x9tx] {
        margin-left: auto;
        font-size: 1rem;
        line-height: 1;
        opacity: .7;
        transform-origin: 50% 50%;
        transition: transform 140ms ease;
    }

        .nav-group-header .chev.open[b-5if7x8x9tx] {
            transform: rotate(90deg);
        }

.nav-group-items[b-5if7x8x9tx] {
    display: none;
    margin-top: 0.1rem;
    margin-bottom: 0.5rem;
    /* indent items so they nest visually under the group title */
    margin-left: 0.6rem;
    padding-left: 0.9rem;
    border-left: 1px solid color-mix(in oklab, var(--glass-border) 45%, transparent);
}

    .nav-group-items.open[b-5if7x8x9tx] {
        display: block;
    }

/* Grouped items sit indented under the title (no tree dot, like the admin rail). */
.navi-link.sub[b-5if7x8x9tx] {
    margin-left: 0;
    padding-left: 0.15rem;
}

/* Ensure nav + buttons can receive clicks */
.nav[b-5if7x8x9tx], .navi-links[b-5if7x8x9tx], .nav-group[b-5if7x8x9tx], .nav-group-header[b-5if7x8x9tx] {
    pointer-events: auto;
}

    /* Prevent inner spans from eating events (click should go to the button) */
    .nav-group-header *[b-5if7x8x9tx] {
        pointer-events: none;
    }

.nav-group-header[b-5if7x8x9tx] {
    pointer-events: auto;
}

/* Put the header above anything inside the nav */
.nav-group[b-5if7x8x9tx] {
    position: relative;
}

.nav-group-header[b-5if7x8x9tx] {
    position: relative;
    z-index: 5;
}

/* If something weird overlaps, this keeps children below header */
.nav-group-items[b-5if7x8x9tx] {
    position: relative;
    z-index: 1;
}

.topbar-right[b-5if7x8x9tx] {
    display:flex;
    gap:10px;
}

/* ---------- Swipe-in admin nav ---------- */
/* Track fills the space under the brand and clips the two side-by-side panels. */
.nav-track[b-5if7x8x9tx] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.nav-track-inner[b-5if7x8x9tx] {
    display: flex;
    width: 200%;
    height: 100%;
    transform: translateX(0);
    transition: transform .28s ease;
}

.nav-track.show-admin .nav-track-inner[b-5if7x8x9tx] {
    transform: translateX(-50%);
}

/* Each panel is exactly one nav-width; its link list scrolls, trailing button pins to bottom. */
.nav-panel[b-5if7x8x9tx] {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

    .nav-panel > .navi-links[b-5if7x8x9tx] {
        flex: 1 1 auto;
        min-height: 0;
    }

    .nav-panel > .spacer[b-5if7x8x9tx] {
        flex: 0 0 auto;
    }

@media (prefers-reduced-motion: reduce) {
    .nav-track-inner[b-5if7x8x9tx] {
        transition: none;
    }
}

/* Admin enter / back affordances (rendered as navi-link buttons) */
.admin-toggle[b-5if7x8x9tx],
.admin-back[b-5if7x8x9tx] {
    appearance: none;
    background: none;
    font: inherit;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.admin-toggle[b-5if7x8x9tx] {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--glass-border);
    border-radius: 0;
    color: var(--text);
}

    .admin-toggle .chev[b-5if7x8x9tx] {
        margin-left: auto;
        opacity: .8;
    }

.admin-back[b-5if7x8x9tx] {
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Group headings in the admin rail */
.nav-group-label[b-5if7x8x9tx] {
    margin: 12px 2px 4px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: .8;
}

.admin-links .navi-link.sub[b-5if7x8x9tx]::before {
    display: none; /* admin links carry their own icon; skip the tree dot */
}

/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-svf6h7tjrz] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-svf6h7tjrz] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

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

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

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

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

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

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

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

    .nav-item[b-svf6h7tjrz]  .nav-link {
        color: var(--content-text-muted);
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

    .nav-item[b-svf6h7tjrz]  a.active {
        background-color: color-mix(in oklab, var(--surface) 50%, transparent);
        color: var(--text);
    }

    .nav-item[b-svf6h7tjrz]  .nav-link:hover {
        background-color: color-mix(in oklab, var(--surface) 35%, transparent);
        color: var(--text);
    }

.nav-scrollable[b-svf6h7tjrz] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-svf6h7tjrz] {
    display: block;
}

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

    .nav-scrollable[b-svf6h7tjrz] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/PageToolbar.razor.rz.scp.css */
/* Shared page command bar.
   Self-contained glass look built from theme tokens so it is identical on every page,
   regardless of which page-scoped styles happen to exist. */

.cmdbar[b-w84vzjrrgi] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 12px 14px;
    margin-bottom: 14px;
    /* backdrop-filter below creates a stacking context; lift the whole bar above
       sticky table headers (z-index:2) so its dropdown popovers aren't covered. */
    position: relative;
    z-index: 30;
    border-radius: var(--radius-md, 12px);
    background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Title + optional subtitle stack on the left. */
.cmdbar-titles[b-w84vzjrrgi] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 0 0 auto;
}

.cmdbar-title[b-w84vzjrrgi] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--content-text, var(--text));
    white-space: nowrap;
}

.cmdbar-subtitle[b-w84vzjrrgi] {
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--content-text-muted, var(--text-muted));
}

/* Search gets a comfortable starting width but is allowed to grow and shrink. */
.cmdbar-search[b-w84vzjrrgi] {
    display: flex;
    flex: 1 1 260px;
    min-width: 200px;
    max-width: 440px;
}

/* Make the page's own .search-box fill the search zone (overrides its fixed min-width). */
.cmdbar-search[b-w84vzjrrgi]  .search-box {
    width: 100%;
    min-width: 0;
}

.cmdbar-filters[b-w84vzjrrgi] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    flex: 0 1 auto;
}

/* Right cluster: actions + refresh, pinned to the far right. */
.cmdbar-end[b-w84vzjrrgi] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex: 0 0 auto;
}

.cmdbar-actions[b-w84vzjrrgi] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* On narrow screens, drop the right cluster onto its own full-width row
   instead of squashing the search/filters. */
@media (max-width: 720px) {
    .cmdbar-search[b-w84vzjrrgi] {
        flex-basis: 100%;
        max-width: none;
    }

    .cmdbar-end[b-w84vzjrrgi] {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
}
/* /Components/Layout/RefreshBar.razor.rz.scp.css */
.refresh-bar[b-0d7q111ba6] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    vertical-align: middle;
}

.refresh-btn[b-0d7q111ba6] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border-radius: 8px;
    border: 1px solid var(--content-border, var(--glass-border));
    background: var(--content-card-bg, var(--glass-1));
    color: var(--content-text, var(--text));
    cursor: pointer;
    font-size: .85rem;
    line-height: 1;
    transition: background .15s ease, border-color .15s ease;
}

.refresh-btn:hover:not(:disabled)[b-0d7q111ba6] {
    border-color: var(--accent);
}

.refresh-btn:disabled[b-0d7q111ba6] {
    opacity: .65;
    cursor: default;
}

.refresh-glyph[b-0d7q111ba6] {
    display: inline-block;
    font-size: 1rem;
}

.refresh-glyph.spinning[b-0d7q111ba6] {
    animation: refresh-spin-b-0d7q111ba6 0.8s linear infinite;
}

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

.refresh-stamp[b-0d7q111ba6] {
    font-size: .78rem;
    color: var(--content-text-muted, var(--text-muted));
    white-space: nowrap;
}
/* /Components/Layout/ReviewLayout.razor.rz.scp.css */
body[b-3nuj03opqw] {
    margin: 0;
}

.review-shell[b-3nuj03opqw] {
    min-height: 100vh;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-attachment: fixed;
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}

.review-wrap[b-3nuj03opqw] {
    width: min(980px, 100%);
}

.review-card[b-3nuj03opqw] {
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--glass-border);
    background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
    backdrop-filter: blur(12px);
}

.grid[b-3nuj03opqw] {
    display: grid;
    gap: 14px;
    grid-template-columns: 1.1fr 1.4fr;
}

@media (max-width: 860px) {
    .grid[b-3nuj03opqw] {
        grid-template-columns: 1fr;
    }
}

.card[b-3nuj03opqw] {
    border-radius: 14px;
    padding: 14px;
    border: 1px solid var(--content-card-border);
    background: var(--content-card-bg) !important;
}

.title[b-3nuj03opqw] {
    font-size: 26px;
    font-weight: 900;
    margin: 4px 0 14px 0;
    color: var(--content-text);
}

.label[b-3nuj03opqw] {
    font-size: 12px;
    opacity: .85;
    margin-bottom: 6px;
    color: var(--content-text-muted);
}

.value[b-3nuj03opqw] {
    font-size: 18px;
    font-weight: 800;
    color: var(--content-text);
}


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

@media (max-width: 520px) {
    .feel-grid[b-3nuj03opqw] {
        grid-template-columns: 1fr;
    }
}

textarea[b-3nuj03opqw] {
    width: 100%;
    min-height: 140px;
    border-radius: 14px;
    padding: 12px;
    border: 1px solid var(--content-textinput-border);
    background: var(--content-textinput-bg);
    color: var(--content-textinput-text);
    outline: none;
    resize: vertical;
}

.actions[b-3nuj03opqw] {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
    gap: 10px;
}

.btn[b-3nuj03opqw] {
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 900;
    cursor: pointer;
    background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 85%, white), var(--accent));
    color: var(--text-on-accent);
    box-shadow: var(--shadow);
}

    .btn:disabled[b-3nuj03opqw] {
        opacity: .55;
        cursor: not-allowed;
    }

.note[b-3nuj03opqw] {
    margin-top: 10px;
    opacity: .9;
    color: var(--content-text-muted);
    font-size: 13px;
}

/* Skeleton */
.skeleton .sk[b-3nuj03opqw] {
    border-radius: 8px;
    background: linear-gradient(90deg, color-mix(in oklab,var(--content-text) 10%, transparent) 0%, color-mix(in oklab,var(--content-text) 20%, transparent) 50%, color-mix(in oklab,var(--content-text) 10%, transparent) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-3nuj03opqw 1.2s linear infinite;
}

@keyframes shimmer-b-3nuj03opqw {
    0% {
        background-position: 0% 0%
    }

    100% {
        background-position: -200% 0%
    }
}
/* /Components/Layout/SurveyLayout.razor.rz.scp.css */

/* Survey layout */
.survey-shell[b-xfoxnuky6o] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.survey-topbar[b-xfoxnuky6o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid color-mix(in oklab, var(--content-text) 10%, transparent);
}

.survey-brand[b-xfoxnuky6o] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-dot[b-xfoxnuky6o] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--accent, #4f46e5);
}

.brand-text[b-xfoxnuky6o] {
    font-weight: 600;
    color: var(--content-text);
}

.survey-main[b-xfoxnuky6o] {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 18px 12px 28px;
}

.survey-container[b-xfoxnuky6o] {
    width: 100%;
    max-width: 760px;
}
/* /Components/Layout/ToastHost.razor.rz.scp.css */
.toast-host[b-o8he3l7gmj] {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(420px, 92vw);
    pointer-events: none;
}

.toast[b-o8he3l7gmj] {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--glass-1);
    color: var(--content-text);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
    animation: toast-in-b-o8he3l7gmj .18s ease-out;
}

.toast-success[b-o8he3l7gmj] {
    border-color: var(--chip-good-border);
    background: color-mix(in srgb, var(--success) 16%, var(--glass-1));
}

.toast-error[b-o8he3l7gmj] {
    border-color: var(--chip-bad-border);
    background: color-mix(in srgb, var(--danger) 16%, var(--glass-1));
}

.toast-icon[b-o8he3l7gmj] {
    font-weight: 800;
    line-height: 1.3;
}

.toast-success .toast-icon[b-o8he3l7gmj] { color: var(--success); }
.toast-error .toast-icon[b-o8he3l7gmj] { color: var(--danger); }

.toast-msg[b-o8he3l7gmj] {
    flex: 1;
    line-height: 1.35;
    word-break: break-word;
}

.toast-action[b-o8he3l7gmj] {
    align-self: center;
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--content-text);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 999px;
}
.toast-action:hover[b-o8he3l7gmj] { background: color-mix(in srgb, var(--accent) 30%, transparent); }

.toast-close[b-o8he3l7gmj] {
    border: none;
    background: transparent;
    color: var(--content-text-muted);
    cursor: pointer;
    font-size: .85rem;
    line-height: 1;
    padding: 2px 4px;
}

    .toast-close:hover[b-o8he3l7gmj] { color: var(--content-text); }

@keyframes toast-in-b-o8he3l7gmj {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Components/Layout/UserBadge.razor.rz.scp.css */
.badgeContainer[b-adojdbdkzw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.avatar[b-adojdbdkzw] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--text-on-accent);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
}

    .avatar img[b-adojdbdkzw] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 50px;
    }

.info[b-adojdbdkzw] {
    margin: auto;
}

    .info .name[b-adojdbdkzw] {
        font-weight: 600;
        margin-bottom: 10px;
        line-height: 1.2;
    }

    .info .sub[b-adojdbdkzw] {
        font-size: 0.8rem;
        color: var(--content-text-muted);
        line-height: 1.2;
    }
/* /Components/Layout/UserMenu.razor.rz.scp.css */
.user-menu[b-6opzz0y9vm] {
    position: relative;
}

.user-pill[b-6opzz0y9vm] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--glass-border);
    background: color-mix(in oklab, var(--glass-1) 85%, transparent);
    color: var(--text);
    border-radius: 999px;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
}

    .user-pill:hover[b-6opzz0y9vm] {
        border-color: var(--glass-border-strong);
        transform: translateY(-1px);
    }

.avatar-sm[b-6opzz0y9vm] {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--text-on-accent);
    font-weight: 700;
    text-transform: uppercase;
    flex: 0 0 auto;
}

    .avatar-sm img[b-6opzz0y9vm] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.user-text .name[b-6opzz0y9vm] {
    font-weight: 650;
    font-size: 0.95rem;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chev[b-6opzz0y9vm] {
    opacity: .85;
    transition: transform 140ms ease;
}

    .chev.open[b-6opzz0y9vm] {
        transform: rotate(180deg);
    }

.menu-popover[b-6opzz0y9vm] {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 220px;
    z-index: 50;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
    box-shadow: var(--shadow);
    padding: 0.35rem;
}

.menu-item[b-6opzz0y9vm] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.6rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    border: 1px solid transparent;
}

    .menu-item:hover[b-6opzz0y9vm] {
        background: color-mix(in oklab, var(--glass-1) 85%, transparent);
        border-color: var(--glass-border);
    }

    .menu-item.danger[b-6opzz0y9vm] {
        color: color-mix(in oklab, var(--danger) 75%, var(--text));
    }

.menu-backdrop[b-6opzz0y9vm] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}
/* /Components/Layout/WallboardLayout.razor.rz.scp.css */

.wb-shell[b-m98po9b2bj] {
    height: 100vh;
    width: 100vw;
}

.wb-container[b-m98po9b2bj] {
    height: 100%;
    padding: 28px 36px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Cursor hide support */
.wb-hide-cursor[b-m98po9b2bj], .wb-hide-cursor *[b-m98po9b2bj] {
    cursor: none !important;
}

/* Skeleton loaders (matches your portal approach) */
.skeleton .sk[b-m98po9b2bj] {
    border-radius: 6px;
    background: linear-gradient( 90deg, color-mix(in oklab,var(--content-text) 6%, transparent) 0%, color-mix(in oklab,var(--content-text) 14%, transparent) 50%, color-mix(in oklab,var(--content-text) 6%, transparent) 100% );
    background-size: 200% 100%;
    animation: shimmer-b-m98po9b2bj 1.2s linear infinite;
}

@keyframes shimmer-b-m98po9b2bj {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Optional stale overlay, theme-friendly */
.wb-stale-overlay[b-m98po9b2bj] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--bg1) 80%, rgba(0,0,0,0.45));
    backdrop-filter: blur(6px);
}

.wb-stale-card[b-m98po9b2bj] {
    width: min(720px, 92vw);
    border-radius: 18px;
    padding: 18px 20px;
    border: 1px solid var(--content-card-border);
    background: var(--content-card-bg);
    box-shadow: var(--shadow);
}

.wb-stale-title[b-m98po9b2bj] {
    font-size: 22px;
    font-weight: 900;
    color: var(--content-text);
    margin-bottom: 6px;
}

.wb-stale-sub[b-m98po9b2bj] {
    color: var(--content-text-muted);
    font-size: 14px;
}
/* /Components/Pages/BackupStatus.razor.rz.scp.css */
.backup[b-etrtecjrjj] {
    padding: 16px 18px 28px;
}

.backup-header[b-etrtecjrjj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

h1[b-etrtecjrjj] {
    margin: 0 0 4px 0;
    font-size: 24px;
}

.muted[b-etrtecjrjj] {
    color: var(--content-text-muted);
}

.description[b-etrtecjrjj] {
    margin: 10px 0 14px;
}

.backup-actions[b-etrtecjrjj] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.month-select[b-etrtecjrjj] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.month-row[b-etrtecjrjj] {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.month-nav[b-etrtecjrjj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    border-radius: 10px;
    border: 1px solid var(--surface-strong);
    background: rgba(255,255,255,.04);
    color: var(--content-text, inherit);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: border-color .12s ease, background .12s ease;
}

    .month-nav:hover:enabled[b-etrtecjrjj] {
        border-color: var(--accent);
    }

    .month-nav:disabled[b-etrtecjrjj] {
        opacity: .45;
        cursor: not-allowed;
    }

.month[b-etrtecjrjj] {
    flex: 1 1 auto;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--surface-strong);
    color: var(--content-text, inherit);
    border-radius: 10px;
    padding: 8px 10px;
}

    /* Recolor the native calendar picker icon to follow the theme text color
       (the browser default is a fixed near-black glyph, invisible on dark themes). */
    .month[b-etrtecjrjj]::-webkit-calendar-picker-indicator {
        background-color: var(--content-text, currentColor);
        opacity: .8;
        cursor: pointer;
        -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M7%202v2H5a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2h-2V2h-2v2H9V2H7zm12%208v9H5v-9h14z'/%3E%3C/svg%3E") center / contain no-repeat;
                mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M7%202v2H5a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2h-2V2h-2v2H9V2H7zm12%208v9H5v-9h14z'/%3E%3C/svg%3E") center / contain no-repeat;
    }

        .month[b-etrtecjrjj]::-webkit-calendar-picker-indicator:hover {
            opacity: 1;
        }

.backup-refresh[b-etrtecjrjj] {
    margin-top: 8px;
}

.btn-export[b-etrtecjrjj] {
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--surface-strong);
    background: rgba(255,255,255,.04);
    color: inherit;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease;
}

    .btn-export:hover:enabled[b-etrtecjrjj] {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
    }

    .btn-export:disabled[b-etrtecjrjj] {
        opacity: .55;
        cursor: not-allowed;
    }

/* Layout grid */
.grid[b-etrtecjrjj] {
    display: grid;
    gap: 14px;
}

.grid-4[b-etrtecjrjj] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .grid-4[b-etrtecjrjj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .grid-4[b-etrtecjrjj] {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.card[b-etrtecjrjj] {
    border: 1px solid var(--surface-strong);
    border-radius: 14px;
    padding: 14px 16px;
    overflow: hidden;
}

/* KPI tile (same visual language as dashboard) */
.kpi2[b-etrtecjrjj] {
    border: 1px solid var(--surface-strong);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,.01);
}

.kpi2-right[b-etrtecjrjj] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kpi2-title[b-etrtecjrjj] {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--content-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi2-value[b-etrtecjrjj] {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
}

.kpi2-sub[b-etrtecjrjj] {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ring */
.kpi-ring[b-etrtecjrjj] {
    position: relative;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
}

.kpi-svg[b-etrtecjrjj] {
    width: 56px;
    height: 56px;
    transform: rotate(-90deg);
}

.kpi-ring-track[b-etrtecjrjj] {
    stroke: color-mix(in oklab, var(--content-text) 18%, transparent);
    stroke-width: 6;
}

.kpi-ring-progress[b-etrtecjrjj] {
    stroke-width: 6;
    stroke-linecap: round;
}

.kpi-ring-center[b-etrtecjrjj] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--content-text);
    opacity: .9;
}

/* Use theme vars for ring colors */
.ring-good[b-etrtecjrjj] {
    stroke: var(--success);
}

.ring-warn[b-etrtecjrjj] {
    stroke: var(--warning, #f7b955);
}

.ring-bad[b-etrtecjrjj] {
    stroke: var(--danger);
}

/* Skeletons */
.skeleton[b-etrtecjrjj] {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: color-mix(in oklab,#fff 8%, transparent);
    max-width: 100%;
    box-sizing: border-box;
}

    .skeleton[b-etrtecjrjj]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.10), rgba(255,255,255,0));
        transform: translateX(-100%);
        animation: shimmer-b-etrtecjrjj 1.2s linear infinite;
    }

@keyframes shimmer-b-etrtecjrjj {
    100% {
        transform: translateX(100%);
    }
}

.skeleton.num[b-etrtecjrjj] {
    width: 90px;
    height: 30px;
    margin-top: 6px;
}

.skeleton.line[b-etrtecjrjj] {
    height: 12px;
    border-radius: 6px;
    min-width: 80px;
}

.skeleton.ring[b-etrtecjrjj] {
    width: 56px;
    height: 56px;
    border-radius: 999px;
}

.skeleton.block[b-etrtecjrjj] {
    height: 260px;
    border-radius: 12px;
}

/* Errors & empty */
.pill-error[b-etrtecjrjj] {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 12px;
    background: #3b1d27;
    color: #ff94a8;
    border: 1px solid #6b273c;
}

.empty[b-etrtecjrjj] {
    padding: 14px 0;
    color: var(--content-text-muted);
}

/* Legend */
.legend[b-etrtecjrjj] {
    margin: 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.legend-title[b-etrtecjrjj] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-muted);
}

.legend-items[b-etrtecjrjj] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.legend-item[b-etrtecjrjj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--content-text-muted);
}

.dot[b-etrtecjrjj] {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    display: inline-block;
}

.dot-ok[b-etrtecjrjj] {
    background: var(--success);
}

.dot-warn[b-etrtecjrjj] {
    background: var(--warning, #f7b955);
}

.dot-bad[b-etrtecjrjj] {
    background: var(--danger);
}

.dot-none[b-etrtecjrjj] {
    background: rgba(255,255,255,.20);
}

/* Table */
.table-wrap[b-etrtecjrjj] {
    padding: 0;
}

.backup-table[b-etrtecjrjj] {
    border-collapse: collapse;    
}

    .backup-table th[b-etrtecjrjj], .backup-table td[b-etrtecjrjj] {
        padding: 10px 10px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        white-space: nowrap;
    }

    .backup-table thead th[b-etrtecjrjj] {
        position: sticky;
        top: 0;
        z-index: 2;
        text-align: center;
    }

    .backup-table .type[b-etrtecjrjj] {
        text-align: left;
        width: 200px;
        max-width: 200px;
    }

    .backup-table .day[b-etrtecjrjj] {
        min-width: 34px;
    }

    .backup-table .cell[b-etrtecjrjj] {
        text-align: center;
    }

    .backup-table .summary[b-etrtecjrjj] {
        text-align: left;
    }
.type-name[b-etrtecjrjj] {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
}
.summary-wrap[b-etrtecjrjj] {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.small[b-etrtecjrjj] {
    font-size: 12px;
}
/* /Components/Pages/BackupUsers.razor.rz.scp.css */
/* Backup Users - aligned to newer BackupStatus page styles */

.backup[b-j4pie2ghau] {
    padding: 16px 18px 28px;
}

.backup-header[b-j4pie2ghau] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

h1[b-j4pie2ghau] {
    margin: 0 0 4px 0;
    font-size: 24px;
}

.muted[b-j4pie2ghau] {
    color: var(--content-text-muted);
}

.description[b-j4pie2ghau] {
    margin: 10px 0 14px;
}

/* Layout grid */
.grid[b-j4pie2ghau] {
    display: grid;
    gap: 14px;
}

.grid-4[b-j4pie2ghau] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .grid-4[b-j4pie2ghau] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .grid-4[b-j4pie2ghau] {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.kpi-grid[b-j4pie2ghau] {
    margin-bottom: 14px;
}

.card[b-j4pie2ghau] {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    overflow: hidden;
    background: var(--glass-1);
    backdrop-filter: blur(10px) saturate(135%);
    -webkit-backdrop-filter: blur(10px) saturate(135%);
}

/* KPI tile */
.kpi2[b-j4pie2ghau] {
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: color-mix(in oklab, var(--glass-1) 75%, transparent);
    text-align: left;
}

.kpi-click[b-j4pie2ghau] {
    cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}

    .kpi-click:hover[b-j4pie2ghau] {
        transform: translateY(-1px);
        box-shadow: 0 10px 26px rgba(0,0,0,.25);
        border-color: var(--glass-border-strong);
    }

    .kpi-click.active[b-j4pie2ghau] {
        border-color: color-mix(in oklab, var(--accent-2) 65%, var(--glass-border));
        background: color-mix(in oklab, var(--accent-2) 10%, var(--glass-1));
        box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-2) 55%, transparent), 0 10px 26px rgba(0,0,0,.25);
        transform: translateY(0);
    }


/* KPI ring (copied from BackupStatus for consistent UX) */
.kpi-ring[b-j4pie2ghau] {
    position: relative;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
}

.kpi-svg[b-j4pie2ghau] {
    width: 56px;
    height: 56px;
    transform: rotate(-90deg);
}

.kpi-ring-track[b-j4pie2ghau] {
    stroke: color-mix(in oklab, var(--content-text) 18%, transparent);
    stroke-width: 6;
}

.kpi-ring-progress[b-j4pie2ghau] {
    stroke-width: 6;
    stroke-linecap: round;
}

.kpi-ring-center[b-j4pie2ghau] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 900;
    color: var(--content-text);
    opacity: .95;
}

.ring-good[b-j4pie2ghau] {
    stroke: var(--success);
}

.ring-warn[b-j4pie2ghau] {
    stroke: var(--warning, #f7b955);
}

.ring-bad[b-j4pie2ghau] {
    stroke: var(--danger);
}


.kpi2-left[b-j4pie2ghau] {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: grid;
    place-items: center;
}

.kpi-good .kpi-warn .kpi-bad .kpi2-right[b-j4pie2ghau] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kpi2-title[b-j4pie2ghau] {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--content-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi2-value[b-j4pie2ghau] {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
}

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

/* Skeletons (same shimmer language as BackupStatus) */
.skeleton[b-j4pie2ghau] {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: color-mix(in oklab,#fff 8%, transparent);
    max-width: 100%;
    box-sizing: border-box;
}

    .skeleton[b-j4pie2ghau]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.10), rgba(255,255,255,0));
        transform: translateX(-100%);
        animation: shimmer-b-j4pie2ghau 1.2s linear infinite;
    }

@keyframes shimmer-b-j4pie2ghau {
    100% {
        transform: translateX(100%);
    }
}

.skeleton.num[b-j4pie2ghau] {
    width: 90px;
    height: 30px;
    margin-top: 6px;
}

.skeleton.line[b-j4pie2ghau] {
    height: 12px;
    border-radius: 6px;
    min-width: 80px;
}

.skeleton.ring[b-j4pie2ghau] {
    width: 56px;
    height: 56px;
    border-radius: 999px;
}

.skeleton.block[b-j4pie2ghau] {
    height: 320px;
    border-radius: 12px;
}

.table-skel[b-j4pie2ghau] {
    margin-top: 14px;
}

/* Filters */
.search-box[b-j4pie2ghau] {
    padding: 8px 12px;
    min-width: 260px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: color-mix(in oklab, var(--glass-1) 80%, transparent);
    color: var(--content-text);
}

.select-wrap[b-j4pie2ghau] {
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

    .select-wrap .label[b-j4pie2ghau] {
        font-size: .9rem;
        color: var(--content-text-muted);
    }

    .select-wrap select[b-j4pie2ghau] {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        padding: 8px 32px 8px 12px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--glass-border);
        min-height: 36px;
        line-height: 1.2;
        background: color-mix(in oklab, var(--glass-1) 80%, transparent);
        color: var(--content-text);
        background-image: radial-gradient(circle closest-side, var(--content-text-muted) 99%, transparent 100%);
        background-size: 6px 6px;
        background-repeat: no-repeat;
        background-position: right 12px center;
    }

/* Table */
.table-wrap[b-j4pie2ghau] {
    overflow: auto;
    max-height: 78vh;
    padding: 0;
}

.users-grid[b-j4pie2ghau] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

    .users-grid thead th[b-j4pie2ghau] {
        position: sticky;
        top: 0;
        z-index: 2;
        border-bottom: 1px solid var(--glass-border);
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        color: var(--content-text-muted);
        cursor: pointer;
        white-space: nowrap;
        background: color-mix(in oklab, var(--glass-1) 85%, transparent);
    }

    .users-grid tbody td[b-j4pie2ghau] {
        padding: 10px 12px;
        border-bottom: 1px solid color-mix(in oklab,var(--glass-border) 60%,transparent);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .users-grid tbody tr:hover[b-j4pie2ghau] {
        background: color-mix(in oklab, var(--glass-1) 35%, transparent);
    }

.sort[b-j4pie2ghau] {
    margin-left: 6px;
    opacity: .7;
}

.empty[b-j4pie2ghau] {
    text-align: center;
    color: var(--content-text-muted);
    padding: 24px;
}

/* Seat state pills */
.status[b-j4pie2ghau] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid color-mix(in oklab, var(--glass-border) 70%, transparent);
    background: color-mix(in oklab, var(--glass-1) 70%, transparent);
}

    .status.ok[b-j4pie2ghau] {
        border-color: color-mix(in oklab, var(--success) 35%, var(--glass-border));
        background: color-mix(in oklab, var(--success) 12%, transparent);
    }

    .status.warn[b-j4pie2ghau] {
        border-color: color-mix(in oklab, var(--warning, #f7b955) 35%, var(--glass-border));
        background: color-mix(in oklab, var(--warning, #f7b955) 12%, transparent);
    }

    .status.bad[b-j4pie2ghau] {
        border-color: color-mix(in oklab, var(--danger) 35%, var(--glass-border));
        background: color-mix(in oklab, var(--danger) 12%, transparent);
    }

/* Buttons */
.btn-danger[b-j4pie2ghau], .btn-primary[b-j4pie2ghau], .btn-secondary[b-j4pie2ghau] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    color: var(--content-text);
    text-decoration: none;
    font-weight: 600;
}

.btn-primary[b-j4pie2ghau] {
    background: var(--accent);
}

.btn-secondary[b-j4pie2ghau] {
    background: var(--accent-2);
}

.btn-danger[b-j4pie2ghau] {
    background: var(--danger);
}

.small[b-j4pie2ghau] {
    padding: 6px 10px;
    font-size: .9rem;
}

/* Modal (reusing your existing look) */
.modal-backdrop[b-j4pie2ghau] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1000;
}

.modal[b-j4pie2ghau] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    /* Override the global app.css .modal (width:unset!important, fixed 80vh height)
       so this confirmation dialog is sized to its content instead of a tall empty box. */
    width: min(520px, 92vw) !important;
    max-width: 92vw !important;
    height: auto !important;
    max-height: 85vh !important;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--glass-1);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px) saturate(135%);
    -webkit-backdrop-filter: blur(10px) saturate(135%);
    z-index: 1001;
}

.backup-user-modal-header[b-j4pie2ghau] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--glass-border);
}

.backup-user-modal-title[b-j4pie2ghau] {
    font-weight: 700;
}

.icon-btn[b-j4pie2ghau] {
    border: none;
    background: transparent;
    color: var(--content-text);
    font-size: 1.1rem;
    cursor: pointer;
}

.backup-user-modal-body[b-j4pie2ghau] {
    padding: 16px;
}

.backup-user-modal-footer[b-j4pie2ghau] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 12px 16px;
    border-top: 1px solid var(--glass-border);
}

/* Spinner & results */
.status-wrap[b-j4pie2ghau] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}

.spinner[b-j4pie2ghau] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid color-mix(in oklab,#fff 25%, transparent);
    border-top-color: color-mix(in oklab, var(--accent-2) 80%, transparent);
    animation: spin-b-j4pie2ghau .9s linear infinite;
}

/* In-row "action in progress" state (action button is replaced by this). */
.btn-acting[b-j4pie2ghau] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    color: var(--content-text-muted);
}

    .btn-acting .spinner[b-j4pie2ghau] {
        width: 16px;
        height: 16px;
        border-width: 2px;
    }

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

.result[b-j4pie2ghau] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
}

    .result.ok[b-j4pie2ghau] {
        background: var(--success);
        color: var(--success);
        box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--success) 50%, transparent);
    }

    .result.fail[b-j4pie2ghau] {
        background: var(--danger);
        color: var(--danger);
        box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--danger) 50%, transparent);
    }

/* Prevent layout shift when body scrollbar disappears */
:root[b-j4pie2ghau], body[b-j4pie2ghau] {
    scrollbar-gutter: stable both-edges;
}

    body.modal-open[b-j4pie2ghau] {
        overflow: hidden;
    }
/* /Components/Pages/Csat/CsatEditor.razor.rz.scp.css */
.editor-header[b-ilb6wrluan] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

    .editor-header .h5[b-ilb6wrluan] { margin: 0; font-weight: 650; }

.small[b-ilb6wrluan] { font-size: 0.85rem; }
.xsmall[b-ilb6wrluan] { font-size: 0.75rem; margin-top: 0.35rem; }

.loading-row[b-ilb6wrluan] { display: flex; align-items: center; gap: 0.6rem; }

.spinner[b-ilb6wrluan] {
    width: 16px; height: 16px; border-radius: 999px;
    border: 2px solid var(--glass-border);
    border-top-color: var(--spinner-accent);
    animation: spin-b-ilb6wrluan 0.9s linear infinite; display: inline-block;
}

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

/* ===== Inline-editable field (looks like text, hints it's editable) ===== */
.ev[b-ilb6wrluan] {
    font: inherit;
    color: inherit;
    text-align: inherit;
    background: transparent;
    border: none;
    border-bottom: 1px dashed color-mix(in oklab, var(--content-text) 28%, transparent);
    outline: none;
    border-radius: 4px;
    padding: 1px 3px;
    width: 100%;
    box-sizing: border-box;
}

    .ev:hover[b-ilb6wrluan] { background: color-mix(in oklab, var(--accent) 8%, transparent); }

    .ev:focus[b-ilb6wrluan] {
        border-bottom-color: var(--accent);
        background: color-mix(in oklab, var(--accent) 12%, transparent);
    }

.ev-title[b-ilb6wrluan] {
    font-size: 26px;
    font-weight: 900;
    text-align: center;
    color: var(--content-text);
}

.ev-label[b-ilb6wrluan] {
    display: block;
    font-size: 12px;
    opacity: .9;
    color: var(--content-text-muted);
    margin-bottom: 8px;
}

.ev-emoji[b-ilb6wrluan] {
    font-size: 42px;
    line-height: 1;
    text-align: center;
    width: 2.2em;
    margin: 0 auto;
}

.ev-feeltxt[b-ilb6wrluan] {
    font-weight: 900;
    font-size: 16px;
    text-align: center;
    color: var(--content-text);
}

/* ===== Preview frame (mirrors the real review page) ===== */
.review-preview[b-ilb6wrluan] {
    width: min(820px, 100%);
    margin: 0 auto 1rem;
}

.review-card[b-ilb6wrluan] {
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--glass-border);
    background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
}

.rp-header[b-ilb6wrluan] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    margin-bottom: 18px;
}

.rp-header-left[b-ilb6wrluan], .rp-header-right[b-ilb6wrluan] { min-width: 90px; display: flex; align-items: center; }
.rp-header-right[b-ilb6wrluan] { justify-content: flex-end; }

.rp-logo-placeholder[b-ilb6wrluan] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--content-text-muted);
    border: 1px dashed var(--glass-border);
    border-radius: 8px;
    padding: 6px 10px;
    opacity: .7;
}

.rp-header-title[b-ilb6wrluan] { text-align: center; }

.grid[b-ilb6wrluan] {
    display: grid;
    gap: 14px;
    grid-template-columns: 1.1fr 1.4fr;
}

@media (max-width: 720px) {
    .grid[b-ilb6wrluan] { grid-template-columns: 1fr; }
}

.card[b-ilb6wrluan] {
    border-radius: 14px;
    padding: 14px;
    border: 1px solid var(--content-border);
    background: var(--content-bg);
}

.value[b-ilb6wrluan] {
    font-size: 18px;
    font-weight: 800;
    color: var(--content-text);
}

/* sample (non-editable illustrative) data */
.value.sample[b-ilb6wrluan] {
    opacity: .7;
    font-style: italic;
}

.rp-engineer[b-ilb6wrluan] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.rp-avatar[b-ilb6wrluan] {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 1px solid var(--content-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: var(--content-text);
    opacity: .8;
}

/* tags */
.chiprow[b-ilb6wrluan] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.chip.preview-chip[b-ilb6wrluan] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 7px 10px 7px 14px;
    border: 1px solid var(--content-border);
    background: color-mix(in oklab, var(--content-card-bg) 92%, transparent);
    color: var(--content-text);
    font-weight: 800;
    font-size: 13px;
}

.chip-x[b-ilb6wrluan] {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    opacity: .7;
    padding: 0 2px;
}

    .chip-x:hover[b-ilb6wrluan] { opacity: 1; }

.tag-add[b-ilb6wrluan] {
    border: 1px dashed var(--content-border);
    background: transparent;
    color: var(--content-text);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 700;
    outline: none;
    min-width: 90px;
}

    .tag-add:focus[b-ilb6wrluan] {
        border-style: solid;
        border-color: var(--accent);
    }

/* feeling tiles */
.feel-grid[b-ilb6wrluan] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 520px) {
    .feel-grid[b-ilb6wrluan] { grid-template-columns: 1fr; }
}

.feel[b-ilb6wrluan] {
    border-radius: 14px;
    border: 1px solid var(--content-border);
    background: color-mix(in oklab, var(--content-card-bg) 92%, transparent);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

    .feel.selected[b-ilb6wrluan] {
        border-color: color-mix(in oklab, var(--accent) 80%, var(--content-border));
        background: color-mix(in oklab, var(--accent) 18%, var(--content-card-bg));
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
    }

/* feedback */
.rp-feedback[b-ilb6wrluan] {
    width: 100%;
    min-height: 70px;
    border-radius: 14px;
    padding: 12px;
    border: 1px solid var(--content-textinput-border);
    background: var(--content-textinput-bg);
    color: var(--content-text-muted);
    font-style: italic;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
}

    .rp-feedback:focus[b-ilb6wrluan] {
        border-color: var(--accent);
    }

.actions[b-ilb6wrluan] {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.btn[b-ilb6wrluan] {
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 85%, white), var(--accent));
    box-shadow: var(--shadow);
    display: inline-flex;
    align-items: center;
}

.ev-btn[b-ilb6wrluan] {
    border: none;
    border-bottom: 1px dashed color-mix(in oklab, var(--text-on-accent) 55%, transparent);
    background: transparent;
    color: var(--text-on-accent);
    font-weight: 900;
    text-align: center;
    width: auto;
    min-width: 90px;
    padding: 2px 4px;
    outline: none;
}

    .ev-btn:hover[b-ilb6wrluan] { background: color-mix(in oklab, #000 12%, transparent); }
    .ev-btn:focus[b-ilb6wrluan] { background: color-mix(in oklab, #000 18%, transparent); }

/* ===== Status messages section ===== */
.csat-group[b-ilb6wrluan] {
    border: 1px solid var(--content-card-border);
    border-radius: 16px;
    background: var(--content-card-bg);
    box-shadow: var(--shadow);
    padding: 0.9rem;
}

.section-title[b-ilb6wrluan] { font-weight: 700; margin-bottom: 0.35rem; }

.csat-grid[b-ilb6wrluan] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
}

@media (max-width: 720px) {
    .csat-grid[b-ilb6wrluan] { grid-template-columns: 1fr; }
}

.field[b-ilb6wrluan] { display: grid; gap: 0.3rem; }

    .field label[b-ilb6wrluan] {
        font-size: 0.85rem;
        color: var(--content-text-muted);
    }

input.input[b-ilb6wrluan] {
    width: 100%;
    border-radius: 10px;
    padding: 0.5rem 0.6rem;
    outline: none;
}

    input.input:focus[b-ilb6wrluan] {
        border-color: var(--glass-border-strong) !important;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent) !important;
    }
/* /Components/Pages/Csat/Reviews.razor.rz.scp.css */
/* Layout bits */
.page-title[b-fu4uurqym9] {
    margin: 0 0 .75rem 0;
}

.description[b-fu4uurqym9] {
    margin-bottom: 1rem;
}

/* Filters */

.search-box[b-fu4uurqym9] {
    min-width: 260px;
    flex: 1 1 320px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}

/* Table wrapper (if not already styled globally) */
.table-wrap[b-fu4uurqym9] {
    border-radius: 16px;
    overflow: hidden;
}

/* Ticket link button */
.link-btn[b-fu4uurqym9] {
    background: none;
    border: none;
    padding: 0;
    color: var(--link, var(--content-text));
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

    .link-btn:hover[b-fu4uurqym9] {
        text-decoration-thickness: 2px;
    }

/* Feedback cell */
.feedback-cell[b-fu4uurqym9] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.feedback-text[b-fu4uurqym9] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tagline[b-fu4uurqym9] {
    opacity: .75;
    font-size: .85em;
}

/* Empty state */
.empty[b-fu4uurqym9] {
    padding: 1.2rem;
    text-align: center;
    opacity: .8;
}

/* Simple popover (tag menu) */
.menu-popover[b-fu4uurqym9] {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    width: min(320px, 90vw);
    background: var(--content-card-bg, var(--bg1));
    border: 1px solid color-mix(in oklab, var(--content-text) 12%, transparent);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
    padding: .35rem;
    z-index: 20;
}

.menu-item[b-fu4uurqym9] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .65rem;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--content-text);
    cursor: pointer;
}

    .menu-item:hover[b-fu4uurqym9] {
        background: color-mix(in oklab, var(--content-text) 7%, transparent);
    }

.menu-backdrop[b-fu4uurqym9] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 10;
}

/* Tag-filter dropdown button — match the search box height/padding/radius. */
.forms-bar .user-pill[b-fu4uurqym9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 12px;
    border: 1px solid var(--glass-border);
    background: color-mix(in oklab, var(--glass-1) 85%, transparent);
    color: var(--content-text);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* Active tag-filter indicator on the dropdown button */
.forms-bar .user-pill.tag-active[b-fu4uurqym9] {
    border-color: var(--accent);
    background: color-mix(in oklab, var(--accent) 22%, var(--content-card-bg));
    color: var(--content-text);
}

/* Modal */
.modal-backdrop[b-fu4uurqym9] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 50;
}

.modal[b-fu4uurqym9] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(980px, 95vw);
    max-height: min(85vh, 900px);
    overflow: hidden;
    border-radius: 18px;
    background: var(--content-card-bg);
    border: 1px solid color-mix(in oklab, var(--content-text) 12%, transparent);
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
    z-index: 60;
    display: flex;
    flex-direction: column;
}

.modal-header[b-fu4uurqym9] {
    padding: .85rem 1rem;
    border-bottom: 1px solid color-mix(in oklab, var(--content-text) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.modal-title[b-fu4uurqym9] {
    font-weight: 650;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
}

.modal-body[b-fu4uurqym9] {
    padding: 1rem;
    overflow: auto;
}

.modal-footer[b-fu4uurqym9] {
    padding: .85rem 1rem;
    border-top: 1px solid color-mix(in oklab, var(--content-text) 10%, transparent);
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.icon-btn[b-fu4uurqym9] {
    background: transparent;
    border: none;
    color: var(--content-text);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

    .icon-btn:hover[b-fu4uurqym9] {
        background: color-mix(in oklab, var(--content-text) 7%, transparent);
    }

/* Modal content grid */
.grid[b-fu4uurqym9] {
    display: grid;
    gap: 1rem;
}

.grid-2[b-fu4uurqym9] {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 860px) {
    .grid-2[b-fu4uurqym9] {
        grid-template-columns: 1fr;
    }
}

.card[b-fu4uurqym9] {
    border-radius: 16px;
    background: color-mix(in oklab, var(--content-bg) 92%, transparent);
    border: 1px solid color-mix(in oklab, var(--content-text) 10%, transparent);
    padding: .9rem;
}

.card-title[b-fu4uurqym9] {
    font-weight: 650;
    margin-bottom: .6rem;
}

.kv[b-fu4uurqym9] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.kv-row[b-fu4uurqym9] {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}

    .kv-row .k[b-fu4uurqym9] {
        opacity: .72;
    }

    .kv-row .v[b-fu4uurqym9] {
        text-align: right;
    }

.review-box[b-fu4uurqym9] {
    margin-top: .75rem;
    padding: .75rem;
    border-radius: 14px;
    background: color-mix(in oklab, var(--content-text) 6%, transparent);
    white-space: pre-wrap;
}

.muted[b-fu4uurqym9] {
    opacity: .8;
}

/* Chev */
.chev[b-fu4uurqym9] {
    margin-left: .35rem;
    opacity: .75;
    transition: transform .12s ease;
}

    .chev.open[b-fu4uurqym9] {
        transform: rotate(180deg);
    }


.users-kpi-grid[b-fu4uurqym9] {
    grid-template-columns: repeat(4, minmax(0, 3fr));
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

/* Table shell with vertical scroll + sticky header */
.table-wrap[b-fu4uurqym9] {
    overflow: auto;
    border-radius: var(--radius-lg);
    padding: 0;
}

.reviews-grid[b-fu4uurqym9] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed; /* allows column widths */
}

    .reviews-grid thead th[b-fu4uurqym9] {
        position: sticky;
        top: 0;
        z-index: 2;
        border-bottom: 1px solid var(--glass-border);
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
    }

    .reviews-grid tbody td[b-fu4uurqym9] {
        padding: 10px 12px;
        border-bottom: 1px solid color-mix(in oklab, var(--glass-border) 60%, transparent);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .reviews-grid tbody tr:hover[b-fu4uurqym9] {
        background: color-mix(in oklab, var(--glass-1) 35%, transparent);
    }

    /* Sentiment column shows only an emoji — center it and enlarge the glyph. */
    .reviews-grid .sentiment-col[b-fu4uurqym9],
    .reviews-grid .sentiment-cell[b-fu4uurqym9] {
        text-align: center;
    }

    .reviews-grid .sentiment-cell[b-fu4uurqym9] {
        font-size: 1.45rem;
        line-height: 1;
    }
.span-2[b-fu4uurqym9] {
    grid-column: 1 / -1;
}
.notes[b-fu4uurqym9] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .5rem;
}

.note[b-fu4uurqym9] {
    border-radius: 14px;
    padding: .65rem .75rem;
    background: color-mix(in oklab, var(--content-text) 5%, transparent);
    border: 1px solid color-mix(in oklab, var(--content-text) 10%, transparent);
}

.note-meta[b-fu4uurqym9] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    opacity: .9;
    font-size: .9em;
}

.note-author[b-fu4uurqym9] {
    font-weight: 650;
}

.note-when[b-fu4uurqym9] {
    opacity: .8;
}

.note-type[b-fu4uurqym9] {
    padding: .15rem .45rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--content-text) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--content-text) 14%, transparent);
    font-size: .85em;
    opacity: .9;
}

.note-body[b-fu4uurqym9] {
    margin-top: .4rem;
    white-space: pre-wrap;
}

.modal[b-fu4uurqym9] {
    width:65vw !important;
}
/* /Components/Pages/Csat/TicketReview.razor.rz.scp.css */
body[b-g2y34s2uur] {
    margin: 0;
}

.review-shell[b-g2y34s2uur] {
    min-height: 100vh;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-attachment: fixed;
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}

.review-wrap[b-g2y34s2uur] {
    width: min(980px, 100%);
}

.review-card[b-g2y34s2uur] {
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--glass-border);
    background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
    backdrop-filter: blur(12px);
}

.grid[b-g2y34s2uur] {
    display: grid;
    gap: 14px;
    grid-template-columns: 1.1fr 1.4fr;
}

@media (max-width: 860px) {
    .grid[b-g2y34s2uur] {
        grid-template-columns: 1fr;
    }
}

.card[b-g2y34s2uur] {
    border-radius: 14px;
    padding: 14px;
    border: 1px solid var(--content-border);
    background: var(--content-bg) !important;
}

.title[b-g2y34s2uur] {
    font-size: 26px;
    font-weight: 900;
    margin: 4px 0 14px 0;
    color: var(--content-text);
}

.label[b-g2y34s2uur] {
    font-size: 12px;
    opacity: .85;
    margin-bottom: 6px;
    color: var(--content-text-muted);
}

.value[b-g2y34s2uur] {
    font-size: 18px;
    font-weight: 800;
    color: var(--content-text);
}

.chiprow[b-g2y34s2uur] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip[b-g2y34s2uur] {
    position: relative;
    border-radius: 999px;
    padding: 9px 14px;
    border: 1px solid var(--content-border);
    background: color-mix(in oklab, var(--content-card-bg) 92%, transparent);
    cursor: pointer;
    user-select: none;
    color: var(--content-text);
    font-weight: 800;
    font-size: 13px;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}

    .chip:hover[b-g2y34s2uur] {
        transform: translateY(-1px);
    }

    .chip.selected[b-g2y34s2uur] {
        border-color: color-mix(in oklab, var(--accent) 70%, var(--content-border));
        background: color-mix(in oklab, var(--accent) 22%, var(--content-card-bg));
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent), 0 10px 22px color-mix(in oklab, var(--accent) 18%, transparent);
    }

        /* Small check badge */
        .chip.selected[b-g2y34s2uur]::after {
            content: "✓";
            position: absolute;
            top: -6px;
            right: -6px;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 900;
            background: var(--accent);
            color: var(--text-on-accent);
            box-shadow: 0 6px 14px color-mix(in oklab, var(--accent) 25%, transparent);
            border: 1px solid color-mix(in oklab, var(--accent) 65%, white);
        }


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

@media (max-width: 520px) {
    .feel-grid[b-g2y34s2uur] {
        grid-template-columns: 1fr;
    }
}

.feel[b-g2y34s2uur] {
    position: relative;
    border-radius: 14px;
    border: 1px solid var(--content-border);
    background: color-mix(in oklab, var(--content-card-bg) 92%, transparent);
    padding: 18px 14px 16px 14px; /* a bit taller */
    text-align: center;
    cursor: pointer;
    min-height: 92px; /* ensures emoji never looks cramped */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}

    .feel:hover[b-g2y34s2uur] {
        transform: translateY(-1px);
        box-shadow: 0 10px 18px color-mix(in oklab, var(--shadow) 35%, transparent);
    }

    .feel .emoji[b-g2y34s2uur] {
        font-size: 42px; /* bigger + more present */
        line-height: 1;
    }

    .feel .txt[b-g2y34s2uur] {
        margin-top: 2px;
        font-weight: 900;
        font-size: 16px;
        color: var(--content-text);
    }

    /* Selected = filled + strong glow */
    .feel.selected[b-g2y34s2uur] {
        border-color: color-mix(in oklab, var(--accent) 80%, var(--content-border));
        background: color-mix(in oklab, var(--accent) 22%, var(--content-card-bg));
        box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent), 0 18px 30px color-mix(in oklab, var(--accent) 18%, transparent);
        transform: translateY(-1px);
    }

        /* Accent bar that doesn't visually "shrink" content */
        .feel.selected[b-g2y34s2uur]::before {
            content: "";
            position: absolute;
            left: 12px;
            right: 12px;
            top: 10px;
            height: 7px;
            border-radius: 999px;
            opacity: 0.95;
        }
        .feel.selected[b-g2y34s2uur]::after {
            content: "✓";
            position: absolute;
            top: 10px;
            right: 12px;
            width: 22px;
            height: 22px;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 900;
            background: var(--accent);
            color: var(--text-on-accent);
            box-shadow: 0 8px 18px color-mix(in oklab, var(--accent) 22%, transparent);
        }



textarea[b-g2y34s2uur] {
    width: 100%;
    min-height: 140px;
    border-radius: 14px;
    padding: 12px;
    border: 1px solid var(--content-textinput-border);
    background: var(--content-textinput-bg);
    color: var(--content-textinput-text);
    outline: none;
    resize: vertical;
}

.actions[b-g2y34s2uur] {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
    gap: 10px;
}

.btn[b-g2y34s2uur] {
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 900;
    cursor: pointer;
    background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 85%, white), var(--accent));
    color: var(--text-on-accent);
    box-shadow: var(--shadow);
}

    .btn:disabled[b-g2y34s2uur] {
        opacity: .55;
        cursor: not-allowed;
    }

.note[b-g2y34s2uur] {
    margin-top: 10px;
    opacity: .9;
    color: var(--content-text-muted);
    font-size: 13px;
}

/* Status messages */
.status[b-g2y34s2uur] {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    font-weight: 800;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.3;
}

    .status .icon[b-g2y34s2uur] {
        font-size: 20px;
        line-height: 1;
        margin-top: 1px;
    }

    /* Error */
    .status.error[b-g2y34s2uur] {
        background: color-mix(in oklab, var(--danger, #dc3545) 18%, var(--content-card-bg));
        border: 1px solid color-mix(in oklab, var(--danger, #dc3545) 45%, var(--content-border));
        color: color-mix(in oklab, var(--danger, #dc3545) 85%, var(--content-text));
    }

    /* Success */
    .status.success[b-g2y34s2uur] {
        background: color-mix(in oklab, var(--success, #28a745) 18%, var(--content-card-bg));
        border: 1px solid color-mix(in oklab, var(--success, #28a745) 45%, var(--content-border));
        color: color-mix(in oklab, var(--success, #28a745) 85%, var(--content-text));
    }

    /* Info / neutral */
    .status.info[b-g2y34s2uur] {
        background: color-mix(in oklab, var(--accent) 14%, var(--content-card-bg));
        border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--content-border));
        color: var(--content-text);
    }


/* Skeleton */
.skeleton .sk[b-g2y34s2uur] {
    border-radius: 8px;
    background: linear-gradient(90deg, color-mix(in oklab,var(--content-text) 10%, transparent) 0%, color-mix(in oklab,var(--content-text) 20%, transparent) 50%, color-mix(in oklab,var(--content-text) 10%, transparent) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-g2y34s2uur 1.2s linear infinite;
}

@keyframes shimmer-b-g2y34s2uur {
    0% {
        background-position: 0% 0%
    }

    100% {
        background-position: -200% 0%
    }
}

/* Header row with logo + centered title */
.review-header[b-g2y34s2uur] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    margin-bottom: 18px;
}

.review-header-left[b-g2y34s2uur],
.review-header-right[b-g2y34s2uur] {
    min-width: 120px; /* keeps title centered even with logo */
    display: flex;
    align-items: center;
}

.review-header-left[b-g2y34s2uur] {
    justify-content: flex-start;
}

.review-header-right[b-g2y34s2uur] {
    justify-content: flex-end;
}

.review-header-title[b-g2y34s2uur] {
    text-align: center;
    font-size: 26px;
    font-weight: 900;
    color: var(--content-text);
}

/* Logo */
.review-logo[b-g2y34s2uur] {
    max-width: 123px;
    object-fit: contain;
}

/* Mobile: stack nicely */
@media (max-width: 600px) {
    .review-header[b-g2y34s2uur] {
        grid-template-columns: auto 1fr;
        row-gap: 8px;
    }

    .review-header-right[b-g2y34s2uur] {
        display: none;
    }

    .review-header-title[b-g2y34s2uur] {
        text-align: left;
        font-size: 24px;
    }
}

.chip-row[b-g2y34s2uur] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

.chip[b-g2y34s2uur] {
    border: 1px solid color-mix(in oklab, var(--content-text) 14%, transparent);
    background: color-mix(in oklab, var(--content-text) 6%, transparent);
    color: var(--content-text);
    padding: .18rem .5rem;
    border-radius: 999px;
    font-size: .85em;
    line-height: 1.4;
    cursor: pointer;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .chip:hover[b-g2y34s2uur] {
        border-color: color-mix(in oklab, var(--content-text) 26%, transparent);
        background: color-mix(in oklab, var(--content-text) 10%, transparent);
    }


/* /Components/Pages/Csat/TicketReviewsInsights.razor.rz.scp.css */
.wrap[b-8o5udeomwv] {
    padding: 16px 18px 28px;
}

.header[b-8o5udeomwv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

h1[b-8o5udeomwv] {
    margin: 0 0 4px;
    font-size: 24px;
}

.muted[b-8o5udeomwv] {
    opacity: .85;
}

.toolbar[b-8o5udeomwv] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.grid[b-8o5udeomwv] {
    display: grid;
    gap: 14px;
}

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

.grid-4[b-8o5udeomwv] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .grid-4[b-8o5udeomwv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

.card[b-8o5udeomwv] {
    border: 1px solid var(--surface-strong);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

.card-title[b-8o5udeomwv] {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--content-text-muted);
}

.card-sub[b-8o5udeomwv] {
    color: var(--content-text-muted);
    font-size: 12px;
    margin-top: 8px;
}

.kpi[b-8o5udeomwv] {
    font-size: 34px;
    font-weight: 800;
    padding: 6px 0 2px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.filters[b-8o5udeomwv] {
    margin-bottom: 14px;
}

.filters-grid[b-8o5udeomwv] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

@media (max-width: 1100px) {
    .filters-grid[b-8o5udeomwv] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .filters-grid[b-8o5udeomwv] {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.f .lbl[b-8o5udeomwv] {
    font-size: 12px;
    opacity: .85;
    margin-bottom: 6px;
}

.f input[b-8o5udeomwv], .f select[b-8o5udeomwv] {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--content-text);
    outline: none;
}

.f .hint[b-8o5udeomwv] {
    font-size: 11px;
    opacity: .7;
    margin-top: 6px;
}

.span2[b-8o5udeomwv] {
    grid-column: span 2;
}

.quick[b-8o5udeomwv] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn[b-8o5udeomwv] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: var(--content-text);
    cursor: pointer;
}

    .btn:disabled[b-8o5udeomwv] {
        opacity: .5;
        cursor: not-allowed;
    }

.btn-ghost[b-8o5udeomwv] {
    background: transparent;
}

.pill-error[b-8o5udeomwv] {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    background: #3b1d27;
    color: #ff94a8;
    border: 1px solid #6b273c;
}

/* Charts */
.chart-wrap[b-8o5udeomwv] {
    position: relative;
    height: 280px;
    margin-top: 10px;
}

    .chart-wrap canvas[b-8o5udeomwv] {
        width: 100% !important;
        height: 100% !important;
    }

/* Overlay loader (same concept as your dashboard) */
.loading-overlay[b-8o5udeomwv] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: inherit;
    z-index: 2;
}

.spinner-lg[b-8o5udeomwv] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: #7aa2ff;
    border-radius: 50%;
    animation: spin-b-8o5udeomwv 0.8s linear infinite;
    margin-bottom: 8px;
}

.status-note[b-8o5udeomwv] {
    font-size: 12px;
    opacity: 0.85;
}

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

/* page-level loading affordance (mirrors Survey Insights) */
.loading-bar[b-8o5udeomwv] {
    height: 3px;
    border-radius: 999px;
    margin: 0 0 12px;
    background: transparent;
    overflow: hidden;
}

    .loading-bar.on[b-8o5udeomwv] {
        background: rgba(255,255,255,0.08);
    }

    .loading-bar.on[b-8o5udeomwv]::after {
        content: "";
        display: block;
        height: 100%;
        width: 40%;
        border-radius: 999px;
        background: var(--accent, #7aa2ff);
        animation: indeterminate-b-8o5udeomwv 1.1s ease-in-out infinite;
    }

@keyframes indeterminate-b-8o5udeomwv {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(160%); }
    100% { transform: translateX(260%); }
}

.dim[b-8o5udeomwv] {
    opacity: .5;
    transition: opacity .15s ease;
    pointer-events: none;
}

/* Skeletons */
.skeleton[b-8o5udeomwv] {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: color-mix(in oklab, #fff 8%, transparent);
    max-width: 100%;
    box-sizing: border-box;
}

    .skeleton[b-8o5udeomwv]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,10), rgba(255,255,255,0));
        transform: translateX(-100%);
        animation: shimmer-b-8o5udeomwv 1.2s linear infinite;
    }

@keyframes shimmer-b-8o5udeomwv {
    100% {
        transform: translateX(100%);
    }
}

.skeleton.num[b-8o5udeomwv] {
    width: 90px;
    height: 32px;
    margin-top: 6px;
}

.skeleton.line[b-8o5udeomwv] {
    height: 12px;
    border-radius: 6px;
    width: 100%;
}

/* AI */
.ai-head[b-8o5udeomwv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.ai-actions[b-8o5udeomwv] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ai-summary[b-8o5udeomwv] {
    white-space: pre-wrap;
    line-height: 1.45;
}

.ai-body h3[b-8o5udeomwv] {
    margin: 14px 0 8px;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .9;
}

.ai-skel[b-8o5udeomwv] {
    padding: 6px 0;
}

/* Details table */
.details-head[b-8o5udeomwv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.details-search[b-8o5udeomwv] {
    width: min(360px, 55vw);
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--content-text);
    outline: none;
}

.table-wrap[b-8o5udeomwv] {
    overflow: auto;
    padding: 0 2px 10px;
}

.table[b-8o5udeomwv] {
    border-collapse: collapse;
    font-size: 13px;
    color: var(--content-text);
    width: max-content;
    min-width: 100%;
}

    .table th[b-8o5udeomwv], .table td[b-8o5udeomwv] {
        padding: 10px 12px;
        border-bottom: 1px solid rgba(255,255,255,08);
        white-space: nowrap;
        vertical-align: top;
    }

    .table thead th[b-8o5udeomwv] {
        position: sticky;
        top: 0;
        z-index: 2;
        text-align: left;
        background: rgba(0,0,0,0.12);
        backdrop-filter: blur(8px);
    }

    .table tbody tr:nth-child(even)[b-8o5udeomwv] {
        background: rgba(255,255,255,02);
    }

.clickable[b-8o5udeomwv] {
    cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease;
}

    .clickable:hover[b-8o5udeomwv] {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(0,0,0,25);
    }

.footer[b-8o5udeomwv] {
    margin-top: 10px;
    font-size: 12px;
    opacity: .85;
}

/* Pills + chips */
.pill[b-8o5udeomwv] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
}

.pill-good[b-8o5udeomwv] {
    border-color: color-mix(in oklab, var(--success) 45%, rgba(255,255,255,12));
    background: color-mix(in oklab, var(--success) 14%, rgba(255,255,255,02));
}

.pill-bad[b-8o5udeomwv] {
    border-color: color-mix(in oklab, var(--danger) 55%, rgba(255,255,255,12));
    background: color-mix(in oklab, var(--danger) 14%, rgba(255,255,255,02));
}

.pill-muted[b-8o5udeomwv] {
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
}

.chips[b-8o5udeomwv] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.chip[b-8o5udeomwv] {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
}

.tkt[b-8o5udeomwv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tkt-n[b-8o5udeomwv] {
    font-weight: 700;
}

.tkt-t[b-8o5udeomwv] {
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Modal (same vibe as your existing modals) */
body.modal-open[b-8o5udeomwv] {
    overflow: hidden;
}

.modal-backdrop[b-8o5udeomwv] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    z-index: 98;
}

.modal[b-8o5udeomwv] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(980px, 92vw);
    height: 50vh;
    max-height: 88vh;
    overflow: hidden;
    z-index: 99;
    background: var(--content-card-bg, rgba(20, 22, 40, .95));
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
}

.modal-detail[b-8o5udeomwv] {
    width: min(980px, 92vw);
}

.modal-header[b-8o5udeomwv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.modal-body[b-8o5udeomwv] {
    padding: 14px;
    overflow: auto;
}

.modal-footer[b-8o5udeomwv] {
    padding: 12px 14px;
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex;
    justify-content: flex-end;
}

.icon-btn[b-8o5udeomwv] {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

    .icon-btn:hover[b-8o5udeomwv] {
        background: rgba(255,255,255,0.08);
    }

.icon[b-8o5udeomwv] {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.review-grid[b-8o5udeomwv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

    .review-grid .span2[b-8o5udeomwv] {
        grid-column: span 2;
    }

.kv .k[b-8o5udeomwv] {
    font-size: 12px;
    opacity: .75;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.kv .v[b-8o5udeomwv] {
    font-size: 14px;
}

.fb[b-8o5udeomwv] {
    white-space: pre-wrap;
    line-height: 1.45;
}

.table-grid[b-8o5udeomwv] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.truncate[b-8o5udeomwv] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.table-grid th[b-8o5udeomwv],
.table-grid td[b-8o5udeomwv] {
    padding: 0.5rem 0.6rem;
    vertical-align: middle;
    max-width: 250px;
}

    .table-grid th:not(.col-tight):not(.actions-col)[b-8o5udeomwv],
    .table-grid td:not(.col-tight):not(.actions-col)[b-8o5udeomwv] {
        min-width: 120px;
    }

    .table-grid th.actions-col[b-8o5udeomwv],
    .table-grid td.actions-col[b-8o5udeomwv] {
        width: 1%;
        min-width: 1px;
        white-space: nowrap;
        text-align: right;
    }

    .table-grid th.col-tight[b-8o5udeomwv],
    .table-grid td.col-tight[b-8o5udeomwv] {
        width: 1%;
        min-width: 1px;
        white-space: nowrap;
    }

.table-grid thead th[b-8o5udeomwv] {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--glass-border);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--content-text-muted);
    cursor: pointer;
    white-space: nowrap;
}

.table-grid tbody td[b-8o5udeomwv] {
    padding: 10px 12px;
    border-bottom: 1px solid color-mix(in oklab, var(--glass-border) 60%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
}

groups-grid tbody tr:hover[b-8o5udeomwv] {
    background: color-mix(in oklab, var(--glass-1) 35%, transparent);
}

.trend-head[b-8o5udeomwv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.trend-deltas[b-8o5udeomwv] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    align-items: center;
}

.delta-note[b-8o5udeomwv] {
    font-size: 12px;
    font-weight: 600;
    opacity: .75;
    margin-left: 4px;
}

.delta-arrow[b-8o5udeomwv] {
    display: inline-block;
    width: 16px;
    text-align: center;
    margin-right: 4px;
    font-weight: 900;
}

.delta-up[b-8o5udeomwv] {
    color: var(--success);
}

.delta-down[b-8o5udeomwv] {
    color: var(--danger);
}

.delta-neutral[b-8o5udeomwv] {
    color: var(--content-text-muted);
}

.trend-mini[b-8o5udeomwv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trend-chip[b-8o5udeomwv] {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}

.trend-up[b-8o5udeomwv] {
    border-color: color-mix(in oklab, var(--success) 45%, rgba(255,255,255,12));
}

.trend-down[b-8o5udeomwv] {
    border-color: color-mix(in oklab, var(--danger) 55%, rgba(255,255,255,12));
}

.trend-mixed[b-8o5udeomwv] {
    border-color: color-mix(in oklab, var(--warning) 55%, rgba(255,255,255,12));
}

.trend-stable[b-8o5udeomwv] {
    border-color: rgba(255,255,255,0.12);
}

input[type="date"][b-8o5udeomwv]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.85;
    cursor: pointer;
}
/* /Components/Pages/Csat/WallboardEngineerRankings.razor.rz.scp.css */

.wb[b-m8kfpiu60e] {
    min-height: calc(100vh - 20px);
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wb-top[b-m8kfpiu60e] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.wb-h1[b-m8kfpiu60e] {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: .02em;
}

.wb-sub[b-m8kfpiu60e] {
    margin-top: 6px;
    font-size: 14px;
    color: var(--content-text-muted);
    display: flex;
    gap: 10px;
    align-items: center;
}

.dot[b-m8kfpiu60e] {
    opacity: .65;
}

.wb-status[b-m8kfpiu60e] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.wb-times[b-m8kfpiu60e] {
    font-size: 12px;
    color: var(--content-text-muted);
    display: grid;
    gap: 2px;
    text-align: right;
}

.chip[b-m8kfpiu60e] {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: 12px;
}

.chip-good[b-m8kfpiu60e] {
    border-color: color-mix(in oklab, var(--success) 55%, rgba(255,255,255,12));
}

.chip-bad[b-m8kfpiu60e] {
    border-color: color-mix(in oklab, var(--danger) 60%, rgba(255,255,255,12));
}

.chip-muted[b-m8kfpiu60e] {
    opacity: .8;
}

.wb-error[b-m8kfpiu60e] {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in oklab, var(--danger) 55%, rgba(255,255,255,12));
    background: color-mix(in oklab, var(--danger) 14%, rgba(255,255,255,04));
}

.wb-body[b-m8kfpiu60e] {
    flex: 1;
}

.wb-center[b-m8kfpiu60e] {
    height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.big[b-m8kfpiu60e] {
    font-size: 34px;
    font-weight: 900;
}

.muted[b-m8kfpiu60e] {
    color: var(--content-text-muted);
}

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

@media (max-width: 1200px) {
    .wb-grid[b-m8kfpiu60e] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .wb-grid[b-m8kfpiu60e] {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.card[b-m8kfpiu60e] {
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.03);
    overflow: hidden;
}

.rank-row[b-m8kfpiu60e] {
    display: grid;
    grid-template-columns: 70px 1fr 110px;
    gap: 10px;
    align-items: center;
}

.rank-num[b-m8kfpiu60e] {
    font-size: 20px;
    font-weight: 900;
    opacity: .9;
}

.rank-name[b-m8kfpiu60e] {
    font-size: 18px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-rate[b-m8kfpiu60e] {
    font-size: 18px;
    font-weight: 900;
    text-align: right;
}

.bars[b-m8kfpiu60e] {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.bar[b-m8kfpiu60e] {
    position: relative;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    overflow: hidden;
}

    .bar .lbl[b-m8kfpiu60e] {
        font-weight: 900;
    }

    .bar .val[b-m8kfpiu60e] {
        float: right;
        font-weight: 900;
    }

.fill[b-m8kfpiu60e] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    opacity: .25;
}

.fill-good[b-m8kfpiu60e] {
    background: var(--success);
}

.fill-warn[b-m8kfpiu60e] {
    background: var(--warning);
}

.fill-bad[b-m8kfpiu60e] {
    background: var(--danger);
}

.meta[b-m8kfpiu60e] {
    margin-top: 12px;
    font-size: 12px;
    color: var(--content-text-muted);
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Skeleton */
.sk[b-m8kfpiu60e] {
    opacity: .7;
}

.sk-line[b-m8kfpiu60e] {
    height: 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
    margin: 10px 0;
}

    .sk-line[b-m8kfpiu60e]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.18), rgba(255,255,255,0));
        transform: translateX(-100%);
        animation: shimmer-b-m8kfpiu60e 1.2s linear infinite;
    }

@keyframes shimmer-b-m8kfpiu60e {
    100% {
        transform: translateX(100%);
    }
}

.w60[b-m8kfpiu60e] {
    width: 60%;
}

.w40[b-m8kfpiu60e] {
    width: 40%;
}

.w80[b-m8kfpiu60e] {
    width: 80%;
}

.wb-footer[b-m8kfpiu60e] {
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

    /* Lock page to screen height: no page scroll */
    .wb[b-m8kfpiu60e], .wb-body-fixed[b-m8kfpiu60e] {
        height: 100vh;
    }

    .wb[b-m8kfpiu60e] {
        display: flex;
        flex-direction: column;
    }

    .wb-top[b-m8kfpiu60e], .wb-footer[b-m8kfpiu60e] {
        flex: 0 0 auto;
    }

    .wb-body-fixed[b-m8kfpiu60e] {
        flex: 1 1 auto;
        overflow: hidden;
    }

    /* Split layout */
    .wb-split[b-m8kfpiu60e] {
        display: flex;
        gap: 16px;
        height: 100%;
        padding: 12px 0;
    }

    /* 1/3 vs 2/3 */
    .wb-panel-leader[b-m8kfpiu60e] {
        flex: 1 1 33%;
        min-width: 320px;
    }

    .wb-panel-reviews[b-m8kfpiu60e] {
        flex: 2 1 67%;
        min-width: 520px;
    }

    /* Portrait: stack */
    @media (orientation: portrait) {
        .wb-split[b-m8kfpiu60e]

    {
        flex-direction: column;
    }

    .wb-panel-leader[b-m8kfpiu60e], .wb-panel-reviews[b-m8kfpiu60e] {
        min-width: 0;
    }

    }

    /* Panels */
    .wb-panel[b-m8kfpiu60e] {
        background: color-mix(in oklab, var(--content-bg) 92%, transparent);
        border: 1px solid color-mix(in oklab, var(--content-text) 12%, transparent);
        border-radius: 16px;
        box-shadow: 0 8px 28px rgba(0,0,0,.18);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0; /* allows inner scroll */
    }

    .panel-head[b-m8kfpiu60e] {
        padding: 14px 16px;
        border-bottom: 1px solid color-mix(in oklab, var(--content-text) 10%, transparent);
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
    }

    .panel-title[b-m8kfpiu60e] {
        font-size: 18px;
        font-weight: 700;
    }

    .panel-sub[b-m8kfpiu60e] {
        font-size: 12px;
        opacity: .75;
    }

    .panel-body[b-m8kfpiu60e] {
        flex: 1 1 auto;
        min-height: 0;
    }

    .scroll[b-m8kfpiu60e] {
        overflow: auto;
    }

    /* Tables */
    .wb-table[b-m8kfpiu60e] {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 14px;
    }

        .wb-table thead th[b-m8kfpiu60e] {
            position: sticky;
            top: 0;
            z-index: 2;
            text-align: left;
            padding: 10px 12px;
            background: color-mix(in oklab, var(--content-bg) 94%, transparent);
            border-bottom: 1px solid color-mix(in oklab, var(--content-text) 12%, transparent);
            white-space: nowrap;
        }

        .wb-table tbody td[b-m8kfpiu60e] {
            padding: 10px 12px;
            border-bottom: 1px solid color-mix(in oklab, var(--content-text) 8%, transparent);
            vertical-align: top;
        }

        .wb-table tbody tr:hover[b-m8kfpiu60e] {
            background: color-mix(in oklab, var(--content-text) 6%, transparent);
        }

    .col-num[b-m8kfpiu60e] {
        text-align: right;
        width: 72px;
    }

    .col-rank[b-m8kfpiu60e] {
        width: 44px;
        text-align: right;
    }

    .col-name .name[b-m8kfpiu60e] {
        font-weight: 650;
    }

    .col-name .id[b-m8kfpiu60e] {
        font-size: 12px;
        opacity: .7;
    }
    .col-date[b-m8kfpiu60e] {
        width: 70px;
        white-space: nowrap;
    }

    .col-engineer[b-m8kfpiu60e] {
        width: 160px;
    }

    /* Highlight top 3 */
    .wb-leader tbody tr.rank-1[b-m8kfpiu60e] {
        background: color-mix(in oklab, #FFD700 14%, transparent);
    }

    .wb-leader tbody tr.rank-2[b-m8kfpiu60e] {
        background: color-mix(in oklab, #C0C0C0 14%, transparent);
    }

    .wb-leader tbody tr.rank-3[b-m8kfpiu60e] {
        background: color-mix(in oklab, #CD7F32 14%, transparent);
    }

    /* Reviews columns */
    .col-ticket[b-m8kfpiu60e] {
        width: 110px;
        white-space: nowrap;
    }

    .col-company[b-m8kfpiu60e] {
        width: 160px;
    }

    .col-contact[b-m8kfpiu60e] {
        width: 160px;
    }

    .col-sent[b-m8kfpiu60e] {
        width: 70px;
        text-align: center;
    }

    /* Feedback clamp: wrap + truncate-ish */
    .clamp[b-m8kfpiu60e] {
        display: -webkit-box;
        -webkit-line-clamp: 4; /* show up to 4 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.25rem;
        max-height: calc(1.25rem * 4);
        word-break: break-word;
    }

    /* Sentiment */
    .sent[b-m8kfpiu60e] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 999px;
        border: 1px solid color-mix(in oklab, var(--content-text) 14%, transparent);
        background: color-mix(in oklab, var(--content-bg) 88%, transparent);
        font-size: 18px;
    }

        .sent.pos[b-m8kfpiu60e] {
            box-shadow: inset 0 0 0 999px color-mix(in oklab, #2ecc71 14%, transparent);
        }

        .sent.neu[b-m8kfpiu60e] {
            box-shadow: inset 0 0 0 999px color-mix(in oklab, #f1c40f 14%, transparent);
        }

        .sent.neg[b-m8kfpiu60e] {
            box-shadow: inset 0 0 0 999px color-mix(in oklab, #e74c3c 14%, transparent);
        }

/* Lock page to screen height: no page scroll */
.wb[b-m8kfpiu60e], .wb-body-fixed[b-m8kfpiu60e] {
    height: 100vh;
}

.wb[b-m8kfpiu60e] {
    display: flex;
    flex-direction: column;
}

.wb-top[b-m8kfpiu60e], .wb-footer[b-m8kfpiu60e] {
    flex: 0 0 auto;
}

.wb-body-fixed[b-m8kfpiu60e] {
    flex: 1 1 auto;
    overflow: hidden;
}

/* Split layout */
.wb-split[b-m8kfpiu60e] {
    display: flex;
    gap: 16px;
    height: 100%;
    padding: 12px 0;
}

/* 1/3 vs 2/3 */
.wb-panel-leader[b-m8kfpiu60e] {
    flex: 1 1 33%;
    min-width: 320px;
}

.wb-panel-reviews[b-m8kfpiu60e] {
    flex: 2 1 67%;
    min-width: 520px;
}

/* Portrait: stack */
@media (orientation: portrait) {
    .wb-split[b-m8kfpiu60e] {
        flex-direction: column;
    }

    .wb-panel-leader[b-m8kfpiu60e], .wb-panel-reviews[b-m8kfpiu60e] {
        min-width: 0;
    }
}

/* Panels */
.wb-panel[b-m8kfpiu60e] {
    background: color-mix(in oklab, var(--content-bg) 92%, transparent);
    border: 1px solid color-mix(in oklab, var(--content-text) 12%, transparent);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* allows inner scroll */
}

.panel-head[b-m8kfpiu60e] {
    padding: 14px 16px;
    border-bottom: 1px solid color-mix(in oklab, var(--content-text) 10%, transparent);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.panel-title[b-m8kfpiu60e] {
    font-size: 18px;
    font-weight: 700;
}

.panel-sub[b-m8kfpiu60e] {
    font-size: 12px;
    opacity: .75;
}

.panel-body[b-m8kfpiu60e] {
    flex: 1 1 auto;
    min-height: 0;
}

.scroll[b-m8kfpiu60e] {
    overflow: auto;
}

/* Tables */
.wb-table[b-m8kfpiu60e] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

    .wb-table thead th[b-m8kfpiu60e] {
        position: sticky;
        top: 0;
        z-index: 2;
        text-align: left;
        padding: 10px 12px;
        background: color-mix(in oklab, var(--content-bg) 94%, transparent);
        border-bottom: 1px solid color-mix(in oklab, var(--content-text) 12%, transparent);
        white-space: nowrap;
    }

    .wb-table tbody td[b-m8kfpiu60e] {
        padding: 10px 12px;
        border-bottom: 1px solid color-mix(in oklab, var(--content-text) 8%, transparent);
        vertical-align: top;
    }

    .wb-table tbody tr:hover[b-m8kfpiu60e] {
        background: color-mix(in oklab, var(--content-text) 6%, transparent);
    }

.col-num[b-m8kfpiu60e] {
    text-align: right;
    width: 72px;
}

.col-rank[b-m8kfpiu60e] {
    width: 44px;
    text-align: right;
}

.col-name .name[b-m8kfpiu60e] {
    font-weight: 650;
}

.col-name .id[b-m8kfpiu60e] {
    font-size: 12px;
    opacity: .7;
}

/* Highlight top 3 */
.wb-leader tbody tr.rank-1[b-m8kfpiu60e] {
    background: color-mix(in oklab, #FFD700 14%, transparent);
}

.wb-leader tbody tr.rank-2[b-m8kfpiu60e] {
    background: color-mix(in oklab, #C0C0C0 14%, transparent);
}

.wb-leader tbody tr.rank-3[b-m8kfpiu60e] {
    background: color-mix(in oklab, #CD7F32 14%, transparent);
}

/* Reviews columns */
.col-ticket[b-m8kfpiu60e] {
    width: 110px;
    white-space: nowrap;
}

.col-company[b-m8kfpiu60e] {
    width: 160px;
}

.col-contact[b-m8kfpiu60e] {
    width: 160px;
}

.col-sent[b-m8kfpiu60e] {
    width: 70px;
    text-align: center;
}

/* Feedback clamp: wrap + truncate-ish */
.clamp[b-m8kfpiu60e] {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* show up to 4 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25rem;
    max-height: calc(1.25rem * 4);
    word-break: break-word;
}

/* Sentiment */
.sent[b-m8kfpiu60e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--content-text) 14%, transparent);
    background: color-mix(in oklab, var(--content-bg) 88%, transparent);
    font-size: 18px;
}

    .sent.pos[b-m8kfpiu60e] {
        box-shadow: inset 0 0 0 999px color-mix(in oklab, #2ecc71 14%, transparent);
    }

    .sent.neu[b-m8kfpiu60e] {
        box-shadow: inset 0 0 0 999px color-mix(in oklab, #f1c40f 14%, transparent);
    }

    .sent.neg[b-m8kfpiu60e] {
        box-shadow: inset 0 0 0 999px color-mix(in oklab, #e74c3c 14%, transparent);
    }
/* /Components/Pages/Csat/Wallboards.razor.rz.scp.css */
.editor-header[b-wedk06yd5s] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

    .editor-header .h5[b-wedk06yd5s] { margin: 0; font-weight: 650; }

.small[b-wedk06yd5s] { font-size: 0.85rem; }

.loading-row[b-wedk06yd5s] { display: flex; align-items: center; gap: 0.6rem; }

.spinner[b-wedk06yd5s] {
    width: 16px; height: 16px; border-radius: 999px;
    border: 2px solid var(--glass-border);
    border-top-color: var(--spinner-accent);
    animation: spin-b-wedk06yd5s 0.9s linear infinite; display: inline-block;
}

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

.wb-grid[b-wedk06yd5s] {
    display: grid;
    grid-template-columns: minmax(340px, 400px) 1fr;
    gap: 0.9rem;
    align-items: start;
}

@media (max-width: 900px) {
    .wb-grid[b-wedk06yd5s] { grid-template-columns: 1fr; }
}

/* Full-width row inside the 2-col grid (the survey question picker). */
.wb-span[b-wedk06yd5s] { grid-column: 1 / -1; }

.wb-card[b-wedk06yd5s] {
    border: 1px solid var(--content-card-border);
    border-radius: 16px;
    background: var(--content-card-bg);
    box-shadow: var(--shadow);
    padding: 0.9rem;
}

.section-title[b-wedk06yd5s] { font-weight: 700; margin-bottom: 0.65rem; }

.field[b-wedk06yd5s] { display: grid; gap: 0.3rem; margin-bottom: 0.6rem; }

    .field label[b-wedk06yd5s] {
        font-size: 0.85rem;
        color: var(--content-text-muted);
    }

input.input[b-wedk06yd5s], select.input[b-wedk06yd5s] {
    width: 100%;
    border-radius: 10px;
    padding: 0.5rem 0.6rem;
    outline: none;
}

    input.input:focus[b-wedk06yd5s], select.input:focus[b-wedk06yd5s] {
        border-color: var(--glass-border-strong) !important;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent) !important;
    }

.empty-drop[b-wedk06yd5s] {
    padding: 0.85rem;
    text-align: center;
    border: 1px dashed var(--glass-border);
    border-radius: 12px;
}

.pill-error[b-wedk06yd5s] {
    margin-top: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    background: var(--chip-bad-bg);
    border: 1px solid var(--chip-bad-border);
    color: var(--chip-bad-text);
    font-size: 0.9rem;
}

/* token box */
.token-box[b-wedk06yd5s] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--glass-1) 70%, transparent);
}

.token-title[b-wedk06yd5s] {
    font-size: 0.8rem;
    color: var(--content-text-muted);
    margin-bottom: 0.4rem;
}

.token-val[b-wedk06yd5s] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.8rem;
    word-break: break-all;
}

.btn-row[b-wedk06yd5s] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}

/* table */
.wb-table-wrap[b-wedk06yd5s] { overflow-x: auto; }

.wb-table[b-wedk06yd5s] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .wb-table th[b-wedk06yd5s],
    .wb-table td[b-wedk06yd5s] {
        padding: 0.5rem 0.6rem;
        border-bottom: 1px solid var(--glass-border);
        text-align: left;
        white-space: nowrap;
    }

    .wb-table thead th[b-wedk06yd5s] {
        font-size: 0.82rem;
        color: var(--content-text-muted);
        background: var(--content-table-header-bg);
        color: var(--content-table-header-text);
    }

    .wb-table tbody tr:hover td[b-wedk06yd5s] {
        background: var(--content-table-row-hover);
    }

.wb-actions[b-wedk06yd5s] { display: flex; gap: 0.4rem; }

.wb-table input[type="checkbox"][b-wedk06yd5s] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* survey-wallboard config */
.wb-check[b-wedk06yd5s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--content-text-muted);
}

.wb-check input[type="checkbox"][b-wedk06yd5s] {
    width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer;
}

.q-pick[b-wedk06yd5s] {
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    max-height: 420px;
    overflow-y: auto;
}

.q-pick-row[b-wedk06yd5s] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--glass-border);
}

.q-pick-row:last-child[b-wedk06yd5s] { border-bottom: none; }
.q-pick-row.off[b-wedk06yd5s] { opacity: 0.55; }

.q-pick-inc input[type="checkbox"][b-wedk06yd5s] {
    width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer;
}

.q-pick-label[b-wedk06yd5s] { font-weight: 600; font-size: 0.88rem; }
.q-pick-view[b-wedk06yd5s] { width: auto; min-width: 130px; padding: 0.3rem 0.4rem; }
.q-pick-move[b-wedk06yd5s] { display: flex; gap: 0.25rem; }
.q-pick-move .btn[b-wedk06yd5s] { padding: 0.15rem 0.4rem; line-height: 1; }
/* /Components/Pages/Csat/WallboardSurveyInsights.razor.rz.scp.css */
.wbs[b-mh9mqp6o29] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    padding: 22px 26px;
    box-sizing: border-box;
    gap: 16px;
}

/* ---------- top bar ---------- */
.wbs-top[b-mh9mqp6o29] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.wbs-h1[b-mh9mqp6o29] {
    font-size: clamp(22px, 2.4vw, 40px);
    font-weight: 800;
    line-height: 1.05;
    color: var(--text);
}

.wbs-sub[b-mh9mqp6o29] {
    margin-top: 6px;
    font-size: clamp(12px, 1.1vw, 18px);
    color: color-mix(in srgb, var(--text) 65%, transparent);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.wbs-sub .dot[b-mh9mqp6o29], .wbs-footer .dot[b-mh9mqp6o29] { opacity: .5; }

.wbs-status[b-mh9mqp6o29] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.wbs-times[b-mh9mqp6o29] {
    text-align: right;
    font-size: clamp(11px, .9vw, 15px);
    color: color-mix(in srgb, var(--text) 60%, transparent);
    line-height: 1.4;
}

.chip[b-mh9mqp6o29] {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: clamp(11px, 1vw, 15px);
    font-weight: 700;
    white-space: nowrap;
}

.chip-good[b-mh9mqp6o29] { background: color-mix(in srgb, #16a34a 22%, transparent); color: #16a34a; }
.chip-bad[b-mh9mqp6o29]  { background: color-mix(in srgb, #dc2626 22%, transparent); color: #dc2626; }
.chip-muted[b-mh9mqp6o29]{ background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }

/* ---------- body / grid ---------- */
.wbs-body[b-mh9mqp6o29] { flex: 1 1 auto; min-height: 0; }

.wbs-grid[b-mh9mqp6o29] {
    height: 100%;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    grid-auto-rows: 1fr;
}

/* For small counts per screen, prefer fewer columns so cards breathe. */
.wbs-grid[b-mh9mqp6o29] { --cols: min(var(--per-screen), 3); }
@media (min-width: 1100px) {
    .wbs-grid[b-mh9mqp6o29] { grid-template-columns: repeat(var(--cols), 1fr); }
}

.wbs-card[b-mh9mqp6o29] {
    background: color-mix(in srgb, var(--surface, var(--text)) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    backdrop-filter: blur(6px);
}

.wbs-card-head[b-mh9mqp6o29] { margin-bottom: 10px; }

.wbs-q[b-mh9mqp6o29] {
    font-size: clamp(15px, 1.3vw, 22px);
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.wbs-meta[b-mh9mqp6o29] {
    margin-top: 4px;
    font-size: clamp(11px, .9vw, 15px);
    color: color-mix(in srgb, var(--text) 60%, transparent);
    display: flex;
    gap: 6px;
    align-items: center;
}

.wbs-meta .tag[b-mh9mqp6o29] {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
}

.wbs-card-body[b-mh9mqp6o29] { flex: 1 1 auto; min-height: 0; position: relative; }

.wbs-chart[b-mh9mqp6o29] { position: absolute; inset: 0; }
.wbs-chart canvas[b-mh9mqp6o29] { width: 100% !important; height: 100% !important; }

.wbs-empty[b-mh9mqp6o29] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: color-mix(in srgb, var(--text) 50%, transparent);
}
.wbs-empty .mark[b-mh9mqp6o29] { font-size: 32px; opacity: .5; }
.muted[b-mh9mqp6o29] { color: color-mix(in srgb, var(--text) 55%, transparent); }

/* ---------- stat / nps tiles ---------- */
.statgrid[b-mh9mqp6o29] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    height: 100%;
    align-content: center;
}

.stat-cell[b-mh9mqp6o29] {
    background: color-mix(in srgb, var(--text) 7%, transparent);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}
.stat-cell.feature[b-mh9mqp6o29] {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    grid-column: 1 / -1;
}
.stat-val[b-mh9mqp6o29] { font-size: clamp(24px, 2.6vw, 44px); font-weight: 800; color: var(--text); }
.stat-lbl[b-mh9mqp6o29] { margin-top: 4px; font-size: clamp(11px, .9vw, 15px); color: color-mix(in srgb, var(--text) 60%, transparent); }

.nps-tiles[b-mh9mqp6o29] { grid-template-columns: repeat(4, 1fr); }
.nps-main.good[b-mh9mqp6o29] { background: color-mix(in srgb, #16a34a 22%, transparent); }
.nps-main.ok[b-mh9mqp6o29]   { background: color-mix(in srgb, #f59e0b 22%, transparent); }
.nps-main.bad[b-mh9mqp6o29]  { background: color-mix(in srgb, #dc2626 22%, transparent); }

.nps-bar[b-mh9mqp6o29] {
    margin-top: 12px;
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--text) 10%, transparent);
}
.nps-seg.pro[b-mh9mqp6o29] { background: #16a34a; }
.nps-seg.pas[b-mh9mqp6o29] { background: #f59e0b; }
.nps-seg.det[b-mh9mqp6o29] { background: #dc2626; }

/* ---------- responses table ---------- */
.wbs-resp[b-mh9mqp6o29] { height: 100%; overflow: hidden; }
.wbs-resp table[b-mh9mqp6o29] { width: 100%; border-collapse: collapse; font-size: clamp(11px, .9vw, 15px); }
.wbs-resp th[b-mh9mqp6o29] {
    text-align: left;
    font-weight: 700;
    color: color-mix(in srgb, var(--text) 60%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    padding: 4px 6px;
}
.wbs-resp td[b-mh9mqp6o29] { padding: 5px 6px; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.wbs-resp td.w[b-mh9mqp6o29], .wbs-resp th.w[b-mh9mqp6o29] { width: 64px; white-space: nowrap; color: color-mix(in srgb, var(--text) 60%, transparent); }
.wbs-resp td.u[b-mh9mqp6o29], .wbs-resp th.u[b-mh9mqp6o29] { width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.wbs-resp td.t[b-mh9mqp6o29] { line-height: 1.3; }

/* ---------- center / footer ---------- */
.wbs-center[b-mh9mqp6o29] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}
.wbs-center .big[b-mh9mqp6o29] { font-size: clamp(26px, 3vw, 52px); font-weight: 800; color: var(--text); }

.wbs-footer[b-mh9mqp6o29] {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: clamp(11px, .9vw, 14px);
}

/* ---------- stale overlay ---------- */
.wbs-stale-overlay[b-mh9mqp6o29] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, #000 55%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}
.wbs-stale-card[b-mh9mqp6o29] {
    background: var(--surface, #111);
    border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
    border-radius: 16px;
    padding: 24px 32px;
    text-align: center;
}
.wbs-stale-title[b-mh9mqp6o29] { font-size: 24px; font-weight: 800; color: var(--text); }
.wbs-stale-sub[b-mh9mqp6o29] { margin-top: 8px; color: color-mix(in srgb, var(--text) 65%, transparent); }
/* /Components/Pages/CustomPages/CustomEditGridBlock.razor.rz.scp.css */
/* ---- base table styling (mirrors CustomTableBlock; scoped CSS isn't shared) ---- */
.table-toolbar[b-fqu0ifb62p] {
    margin-bottom: .6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-box[b-fqu0ifb62p] {
    width: 100%;
    max-width: 420px;
    background: color-mix(in srgb, var(--surface) 30%, transparent);
    border: 1px solid var(--glass-border);
    color: var(--content-text);
    border-radius: 999px;
    padding: 0.5rem 0.8rem;
    outline: none;
}

    .search-box:focus[b-fqu0ifb62p] {
        border-color: var(--glass-border-strong);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
    }

.edit-hint[b-fqu0ifb62p] {
    font-size: .82rem;
}

.column-filter[b-fqu0ifb62p] {
    width: 100%;
    background: color-mix(in srgb, var(--surface) 22%, transparent);
    border: 1px solid var(--glass-border);
    color: var(--content-text);
    border-radius: 10px;
    padding: 0.35rem 0.5rem;
    outline: none;
}

.filters-row th[b-fqu0ifb62p] {
    padding-top: .35rem;
    padding-bottom: .55rem;
}

.sort[b-fqu0ifb62p] {
    margin-left: .35rem;
    opacity: .75;
}

.table-wrap[b-fqu0ifb62p] {
    overflow: auto;
    border-radius: var(--radius-lg);
    padding: 0;
}

.custom-table[b-fqu0ifb62p] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

    .custom-table thead th[b-fqu0ifb62p] {
        position: sticky;
        top: 0;
        z-index: 2;
        border-bottom: 1px solid var(--glass-border);
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        color: var(--content-text-muted);
        cursor: pointer;
        white-space: nowrap;
    }

    .custom-table tbody td[b-fqu0ifb62p] {
        padding: 8px 12px;
        border-bottom: 1px solid color-mix(in oklab, var(--glass-border) 60%, transparent);
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }

    .custom-table tbody tr:hover[b-fqu0ifb62p] {
        background: color-mix(in oklab, var(--glass-1) 35%, transparent);
    }

.th-editable[b-fqu0ifb62p] {
    margin-left: .35rem;
    opacity: .6;
    font-size: .8rem;
}

/* ---- editable cells ---- */
.editcell[b-fqu0ifb62p] {
    padding: 4px 8px !important;
}

.editcell-view[b-fqu0ifb62p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    border-radius: 8px;
    padding: 4px 6px;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}

    .editcell-view:hover[b-fqu0ifb62p] {
        border-color: var(--glass-border);
        background: color-mix(in srgb, var(--accent) 14%, transparent);
    }

.editcell-text[b-fqu0ifb62p] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editcell-pencil[b-fqu0ifb62p] {
    opacity: 0;
    font-size: .8rem;
    flex: 0 0 auto;
}

.editcell-view:hover .editcell-pencil[b-fqu0ifb62p] {
    opacity: .55;
}

.editcell-edit[b-fqu0ifb62p] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cell-input[b-fqu0ifb62p] {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--content-input-bg, color-mix(in srgb, var(--surface) 35%, transparent));
    border: 1px solid var(--glass-border-strong);
    color: var(--content-text);
    border-radius: 8px;
    padding: 5px 8px;
    outline: none;
}

    .cell-input:focus[b-fqu0ifb62p] {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
    }

.cell-btn[b-fqu0ifb62p] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--glass-2) 55%, transparent);
    color: var(--content-text);
    cursor: pointer;
    line-height: 1;
}

    .cell-btn:hover:not(:disabled)[b-fqu0ifb62p] {
        border-color: var(--glass-border-strong);
    }

    .cell-btn:disabled[b-fqu0ifb62p] {
        opacity: .6;
        cursor: default;
    }

.cell-save[b-fqu0ifb62p] {
    color: var(--success);
    border-color: var(--chip-good-border);
}

.cell-cancel[b-fqu0ifb62p] {
    color: var(--content-text-muted);
    font-size: .8rem;
}

/* status icons in view mode */
.cell-ok[b-fqu0ifb62p] {
    color: var(--success);
    font-weight: 800;
    animation: cell-ok-fade-b-fqu0ifb62p 3s ease-out forwards;
}

.cell-bad[b-fqu0ifb62p] {
    color: var(--danger);
    font-weight: 800;
}

@keyframes cell-ok-fade-b-fqu0ifb62p {
    0%, 60% { opacity: 1; }
    100% { opacity: 0; }
}

/* row tint by status */
.editcell.is-saving[b-fqu0ifb62p] { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.editcell.is-error[b-fqu0ifb62p]  { background: color-mix(in srgb, var(--danger) 10%, transparent); }

/* spinner */
.cell-spinner[b-fqu0ifb62p] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-top-color: var(--accent);
    animation: cell-spin-b-fqu0ifb62p .7s linear infinite;
    display: inline-block;
}

@keyframes cell-spin-b-fqu0ifb62p {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/CustomPages/CustomPage.razor.rz.scp.css */
/* Responsive dashboard grid */
.custom-grid[b-hgmxqkudi6] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
}

/* Default cards: take 12 cols on small, 6 on medium, 4 on large */
.custom-card[b-hgmxqkudi6] {
    grid-column: span 12;
    padding: 12px;
    border-radius: 18px;
}

@media (min-width: 900px) {
    .custom-card[b-hgmxqkudi6] {
        grid-column: span 6;
    }
}

@media (min-width: 1200px) {
    .custom-card[b-hgmxqkudi6] {
        grid-column: span 4;
    }
}

/* Optional: blocks can request spans via class */
.custom-card.span-12[b-hgmxqkudi6] {
    grid-column: span 12 !important;
}

.custom-card.span-8[b-hgmxqkudi6] {
    grid-column: span 8 !important;
}

.custom-card.span-6[b-hgmxqkudi6] {
    grid-column: span 6 !important;
}

.custom-card.span-4[b-hgmxqkudi6] {
    grid-column: span 4 !important;
}

.custom-card.span-3[b-hgmxqkudi6] {
    grid-column: span 3 !important;
}


/* Title inside card */
.custom-card .card-title[b-hgmxqkudi6] {
    font-weight: 750;
    margin-bottom: 8px;
}
/* /Components/Pages/CustomPages/CustomPagesEditor.razor.rz.scp.css */
.editor-header[b-vzge5wn286] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    flex-wrap: wrap;
}

    .editor-header .h5[b-vzge5wn286] { margin: 0; font-weight: 650; }

.small[b-vzge5wn286] { font-size: 0.85rem; }

.editor-buttons[b-vzge5wn286] { display: flex; gap: 0.5rem; }

.loading-row[b-vzge5wn286] { display: flex; align-items: center; gap: 0.6rem; }

.spinner[b-vzge5wn286] {
    width: 16px; height: 16px; border-radius: 999px;
    border: 2px solid var(--glass-border);
    border-top-color: var(--spinner-accent);
    animation: spin-b-vzge5wn286 0.9s linear infinite; display: inline-block;
}

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

/* ---------- Rows (mirrors the Menu editor) ---------- */
.menu-rows[b-vzge5wn286] {
    display: grid;
    gap: 0.4rem;
    min-height: 12px;
    border-radius: 14px;
    transition: background 120ms ease, outline-color 120ms ease;
}

    .menu-rows.dropzone.drag-over[b-vzge5wn286] {
        outline: 2px dashed var(--accent);
        outline-offset: -4px;
        background: color-mix(in srgb, var(--accent) 8%, transparent);
    }

.menu-row[b-vzge5wn286] {
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--glass-1) 55%, transparent);
}

    .menu-row[draggable="true"][b-vzge5wn286] { cursor: grab; }
    .menu-row[draggable="true"]:active[b-vzge5wn286] { cursor: grabbing; }
    .menu-row.expanded[b-vzge5wn286] { border-color: var(--glass-border-strong); }

    .menu-row.drag-over[b-vzge5wn286] {
        border-color: var(--accent);
        box-shadow: 0 -2px 0 0 var(--accent) inset;
    }

.menu-row-main[b-vzge5wn286] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.55rem;
    cursor: pointer;
}

.drag-handle[b-vzge5wn286] {
    cursor: grab;
    font-size: 1.05rem;
    letter-spacing: -2px;
    user-select: none;
}

.row-icon[b-vzge5wn286] { width: 1.3rem; text-align: center; }
.row-spacer[b-vzge5wn286] { flex: 1 1 auto; }

.row-title[b-vzge5wn286] { font-weight: 600; }

    .row-title.is-off[b-vzge5wn286] {
        color: var(--content-text-muted);
        text-decoration: line-through;
        opacity: 0.7;
    }

.icon-btn[b-vzge5wn286] {
    border: 1px solid transparent;
    background: transparent;
    color: var(--content-text);
    cursor: pointer;
    border-radius: 8px;
    padding: 0.2rem 0.4rem;
    font-size: 0.95rem;
    line-height: 1;
}

    .icon-btn:hover[b-vzge5wn286] {
        border-color: var(--glass-border);
        background: color-mix(in srgb, var(--glass-1) 70%, transparent);
    }

    .icon-btn.danger:hover[b-vzge5wn286] {
        border-color: var(--chip-bad-border);
        color: var(--chip-bad-text);
    }

.empty-drop[b-vzge5wn286] {
    padding: 0.85rem;
    text-align: center;
    border: 1px dashed var(--glass-border);
    border-radius: 12px;
}

/* ---------- Row detail (expanded) ---------- */
.menu-row-detail[b-vzge5wn286] {
    display: grid;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem 0.7rem;
    border-top: 1px solid var(--glass-border);
}

.field[b-vzge5wn286] { display: grid; gap: 0.3rem; }

    .field label[b-vzge5wn286] {
        font-size: 0.85rem;
        color: var(--content-text-muted);
    }

.field-inline[b-vzge5wn286] {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 0.6rem;
}

@media (max-width: 720px) {
    .field-inline[b-vzge5wn286] { grid-template-columns: 1fr; }
}

input.input[b-vzge5wn286], textarea.input[b-vzge5wn286] {
    width: 100%;
    border-radius: 10px;
    padding: 0.5rem 0.6rem;
    outline: none;
}

textarea.input[b-vzge5wn286] { resize: vertical; min-height: 96px; }

    input.input:focus[b-vzge5wn286], textarea.input:focus[b-vzge5wn286] {
        border-color: var(--glass-border-strong) !important;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent) !important;
    }

.cp-preview[b-vzge5wn286] { border-radius: 10px; min-height: 2.2rem; }

/* ---------- Toggle switch (compact) ---------- */
.toggle[b-vzge5wn286] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    user-select: none;
    color: var(--content-text);
}

.toggle-input[b-vzge5wn286] { position: absolute; opacity: 0; width: 1px; height: 1px; }

.toggle-ui[b-vzge5wn286] {
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-strong) 55%, transparent);
    border: 1px solid var(--glass-border);
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}

    .toggle-ui[b-vzge5wn286]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 3px;
        width: 16px;
        height: 16px;
        border-radius: 999px;
        transform: translateY(-50%);
        background: color-mix(in srgb, var(--content-text) 80%, transparent);
        transition: left .15s ease, background .15s ease;
    }

.toggle-input:checked + .toggle-ui[b-vzge5wn286] {
    background: color-mix(in srgb, var(--accent) 55%, transparent);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--glass-border));
}

    .toggle-input:checked + .toggle-ui[b-vzge5wn286]::after {
        left: 21px;
        background: var(--text-on-accent);
    }
/* /Components/Pages/CustomPages/CustomTableBlock.razor.rz.scp.css */
.table-toolbar[b-e6g1kpzwfb] {
    margin-bottom: .6rem;
}

.search-box[b-e6g1kpzwfb] {
    width: 100%;
    max-width: 420px;
    background: color-mix(in srgb, var(--surface) 30%, transparent);
    border: 1px solid var(--glass-border);
    color: var(--content-text);
    border-radius: 999px;
    padding: 0.5rem 0.8rem;
    outline: none;
}

    .search-box:focus[b-e6g1kpzwfb] {
        border-color: var(--glass-border-strong);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
    }

.column-filter[b-e6g1kpzwfb] {
    width: 100%;
    background: color-mix(in srgb, var(--surface) 22%, transparent);
    border: 1px solid var(--glass-border);
    color: var(--content-text);
    border-radius: 10px;
    padding: 0.35rem 0.5rem;
    outline: none;
}

.filters-row th[b-e6g1kpzwfb] {
    padding-top: .35rem;
    padding-bottom: .55rem;
}

.sort[b-e6g1kpzwfb] {
    margin-left: .35rem;
    opacity: .75;
}

/* clickable rows */
.row-click[b-e6g1kpzwfb] {
    cursor: pointer;
}

    .row-click:hover td[b-e6g1kpzwfb] {
        background: color-mix(in srgb, var(--glass-2) 45%, transparent);
    }

/* modal */
.cp-modal-backdrop[b-e6g1kpzwfb] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 999;
}

.cp-modal[b-e6g1kpzwfb] {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    z-index: 1000;
}

.cp-modal-card[b-e6g1kpzwfb] {
    width: min(920px, 96vw);
    max-height: 86vh;
    border-radius: 18px;
    overflow: hidden;
    background: var(--glass-1);
}

.cp-modal-header[b-e6g1kpzwfb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--glass-border);
}

.cp-modal-title[b-e6g1kpzwfb] {
    font-weight: 800;
    letter-spacing: .2px;
}

.cp-modal-close[b-e6g1kpzwfb] {
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--glass-2) 55%, transparent);
    color: var(--content-text);
    border-radius: 12px;
    width: 38px;
    height: 38px;
    cursor: pointer;
}

.cp-modal-body[b-e6g1kpzwfb] {
    padding: 12px 14px;
    overflow: auto;
}

.cp-modal-footer[b-e6g1kpzwfb] {
    padding: 12px 14px;
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: flex-end;
}

/* row details grid */
.cp-row-grid[b-e6g1kpzwfb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 760px) {
    .cp-row-grid[b-e6g1kpzwfb] {
        grid-template-columns: 1fr;
    }
}

.cp-row-field[b-e6g1kpzwfb] {
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--glass-2) 55%, transparent);
}

.cp-row-key[b-e6g1kpzwfb] {
    font-size: .82rem;
    color: var(--content-text-muted);
    margin-bottom: 4px;
}

.cp-row-val[b-e6g1kpzwfb] {
    white-space: pre-wrap;
    word-break: break-word;
}

.table-wrap[b-e6g1kpzwfb] {
    overflow: auto;
    border-radius: var(--radius-lg);
    padding: 0;
}

.custom-table[b-e6g1kpzwfb] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed; /* allows column widths */
}

    .custom-table thead th[b-e6g1kpzwfb] {
        position: sticky;
        top: 0;
        z-index: 2;
        border-bottom: 1px solid var(--glass-border);
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        color: var(--content-text-muted);
        cursor: pointer;
        white-space: nowrap;
    }

    .custom-table tbody td[b-e6g1kpzwfb] {
        padding: 10px 12px;
        border-bottom: 1px solid color-mix(in oklab, var(--glass-border) 60%, transparent);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .custom-table tbody tr:hover[b-e6g1kpzwfb] {
        background: color-mix(in oklab, var(--glass-1) 35%, transparent);
    }
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Enable animating CSS custom property --p */
@property --p {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

/* Layout */
.dash[b-vfb9xuyqg5] {
    padding: 16px 18px 28px;
    color: inherit;
    background: transparent;
    min-height: unset;
}

.content[b-vfb9xuyqg5] {
    min-height: 95vh;
}

.dash-header[b-vfb9xuyqg5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

h1[b-vfb9xuyqg5] {
    margin: 0 0 4px 0;
    font-size: 24px;
}

h3[b-vfb9xuyqg5] {
    margin: 18px 0 10px;
    color: var(--content-text-muted);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.grid[b-vfb9xuyqg5] {
    display: grid;
    gap: 14px;
}

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

.grid-3[b-vfb9xuyqg5] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4[b-vfb9xuyqg5] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card[b-vfb9xuyqg5] {
    border: 1px solid var(--surface-strong);
    border-radius: 14px;
    padding: 14px 16px;
}

.card-title[b-vfb9xuyqg5] {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--content-text-muted);
}

.card-sub[b-vfb9xuyqg5] {
    color: var(--content-text-muted);
    font-size: 12px;
    margin-top: 8px;
}

.kpi[b-vfb9xuyqg5] {
    font-size: 34px;
    font-weight: 700;
    padding: 6px 0 2px;
}

.kpi-row[b-vfb9xuyqg5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 6px;
}

.clickable[b-vfb9xuyqg5] {
    cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease;
}

    .clickable:hover[b-vfb9xuyqg5] {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
    }

/* Skeletons */
.skeleton[b-vfb9xuyqg5] {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(90deg, color-mix(in oklab,#fff 6%, transparent) 0%, color-mix(in oklab,#fff 14%, transparent) 50%, color-mix(in oklab,#fff 6%, transparent) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-vfb9xuyqg5 1.2s linear infinite;
    height: 14px;
}

    .skeleton[b-vfb9xuyqg5]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.09), rgba(255,255,255,0));
        transform: translateX(-100%);
        animation: shimmer-b-vfb9xuyqg5 1.2s infinite;
    }

@keyframes shimmer-b-vfb9xuyqg5 {
    100% {
        transform: translateX(100%);
    }
}

.skeleton.num[b-vfb9xuyqg5] {
    width: 80px;
    height: 32px;
    margin-top: 6px;
}

.skeleton.line[b-vfb9xuyqg5] {
    width: 140px;
    height: 12px;
    border-radius: 6px;
}

/* Error pill */
.pill-error[b-vfb9xuyqg5] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    background: #3b1d27;
    color: #ff94a8;
    border: 1px solid #6b273c;
}

/* Donut percentage */
.donut[b-vfb9xuyqg5] {
    display: inline-grid;
    place-items: center;
}

    .donut .donut-ring[b-vfb9xuyqg5] {
        --ok: var(--success);
        --miss: var(--danger);
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: conic-gradient(var(--ok) calc(var(--p)*1%), var(--miss) 0);
        display: grid;
        place-items: center;
        font-size: 11px;
        font-weight: 700;
        outline: 1px solid rgba(255,255,255,.08);
        box-shadow: inset 0 0 0 8px #0e0f18, 0 2px 8px rgba(0,0,0,.25);
        transition: --p .8s ease-out; /* smooth fill on update */
    }

/* Optional: subtle shine on hover when cards are clickable */
.clickable .donut-ring:hover[b-vfb9xuyqg5] {
    filter: brightness(1.05);
}

/* Footer */
.footer[b-vfb9xuyqg5] {
    margin-top: 10px;
    font-size: 12px;
}

.filters[b-vfb9xuyqg5] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

    .filters input[b-vfb9xuyqg5] {
        background: #131a33;
        border: 1px solid #2c3254;
        color: #f2f6ff;
        border-radius: 8px;
        padding: 8px 10px;
    }

.table-wrap[b-vfb9xuyqg5] {
    overflow: auto;
    padding: 0 14px 10px;
}

.table[b-vfb9xuyqg5] {
    border-collapse: collapse;
    font-size: 13px;
    color: var(--content-text);
    width: max-content;
}

.th-col[b-vfb9xuyqg5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.th-label[b-vfb9xuyqg5] {
    font-size: 12px;
    opacity: .9;
}

.th-filter[b-vfb9xuyqg5] {
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 6px;
    width: 100%;
}

.table th[b-vfb9xuyqg5], .table td[b-vfb9xuyqg5] {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    white-space: nowrap;
}

.table thead th[b-vfb9xuyqg5] {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: left;
}

.table tbody tr:nth-child(even)[b-vfb9xuyqg5] {
    background: rgba(255,255,255,.02);
}

.w-num[b-vfb9xuyqg5] {
    min-width: 140px;
}

.w-title[b-vfb9xuyqg5] {
    min-width: 360px;
}

.w-customer[b-vfb9xuyqg5] {
    min-width: 220px;
}

.w-status[b-vfb9xuyqg5] {
    min-width: 140px;
}

.w-queue[b-vfb9xuyqg5] {
    min-width: 180px;
}

.w-issue[b-vfb9xuyqg5] {
    min-width: 220px;
}

.w-subissue[b-vfb9xuyqg5] {
    min-width: 200px;
}

.w-priority[b-vfb9xuyqg5] {
    min-width: 140px;
}

.w-created[b-vfb9xuyqg5] {
    min-width: 180px;
}

.w-completed[b-vfb9xuyqg5] {
    min-width: 180px;
}

.w-hours[b-vfb9xuyqg5] {
    min-width: 140px;
}

.w-yesno[b-vfb9xuyqg5] {
    min-width: 140px;
}
.sort-label[b-vfb9xuyqg5] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sort-glyph[b-vfb9xuyqg5] {
    font-size: 11px;
    opacity: .8;
}


.chip[b-vfb9xuyqg5] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid transparent
}

.chip-good[b-vfb9xuyqg5] {
    background: #13251a;
    border-color: #1e6d3a;
    color: #79f0a0
}

.chip-warn[b-vfb9xuyqg5] {
    background: #2a2313;
    border-color: #7a5d1a;
    color: #ffd57a
}

.chip-bad[b-vfb9xuyqg5] {
    background: #3b1d27;
    border-color: #6b273c;
    color: #ff94a8
}

.chip-muted[b-vfb9xuyqg5] {
    background: #1a2037;
    border-color: #2d3457;
    color: #aab2c8
}

/* Two-column ticket summary */
.ticket-details[b-vfb9xuyqg5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ticket-summary-grid[b-vfb9xuyqg5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem 1.5rem;
}

.ticket-field[b-vfb9xuyqg5] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.9rem;
}

.ticket-label[b-vfb9xuyqg5] {
    font-weight: 600;
    color: var(--muted-fg, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

.ticket-value[b-vfb9xuyqg5] {
    font-size: 0.95rem;
    color: var(--content-text, #111827);
    word-break: break-word;
}

/* Notes styling */
.notes-list[b-vfb9xuyqg5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.note-card[b-vfb9xuyqg5] {
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--accent);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.note-header[b-vfb9xuyqg5] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.note-title[b-vfb9xuyqg5] {
    font-weight: 600;
    font-size: 0.95rem;
}

.note-meta[b-vfb9xuyqg5] {
    font-size: 0.75rem;
    color: var(--muted-fg, #6b7280);
    white-space: nowrap;
}

.note-body[b-vfb9xuyqg5] {
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

@media (max-width: 640px) {
    .modal-detail[b-vfb9xuyqg5] {
        margin: 1rem;
    }

    .note-meta[b-vfb9xuyqg5] {
        white-space: normal;
    }
}
/* /Components/Pages/DashboardV2.razor.rz.scp.css */
/* Enable animating CSS custom property --p (kept in case you re-add conic rings later) */
@property --p {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

/* ---------- Layout ---------- */
.dash[b-9lzbqw2ufs] {
    padding: 16px 18px 28px;
    background: transparent;
}

.dash-header[b-9lzbqw2ufs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

h1[b-9lzbqw2ufs] {
    margin: 0 0 4px;
    font-size: 24px;
}

h3[b-9lzbqw2ufs] {
    margin: 18px 0 10px;
    color: var(--content-text-muted);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.grid[b-9lzbqw2ufs] {
    display: grid;
    gap: 14px;
}

.grid-3[b-9lzbqw2ufs] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4[b-9lzbqw2ufs] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-6[b-9lzbqw2ufs] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width:1100px) {
    .grid-6[b-9lzbqw2ufs] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width:720px) {
    .grid-6[b-9lzbqw2ufs] {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.card[b-9lzbqw2ufs] {
    border: 1px solid var(--surface-strong);
    border-radius: 14px;
    padding: 14px 16px;
    overflow: hidden; /* prevents any skeleton/svg overflow */
}

.card-title[b-9lzbqw2ufs] {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--content-text-muted);
}

.card-sub[b-9lzbqw2ufs] {
    color: var(--content-text-muted);
    font-size: 12px;
    margin-top: 8px;
}

.clickable[b-9lzbqw2ufs] {
    cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease;
}

    .clickable:hover[b-9lzbqw2ufs] {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
    }

/* ---------- KPI basics (numbers) ---------- */
.kpi[b-9lzbqw2ufs] {
    font-size: 34px;
    font-weight: 700;
    padding: 6px 0 2px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.kpi-big[b-9lzbqw2ufs] {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.kpi-row[b-9lzbqw2ufs] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 6px;
    min-width: 0;
}

.kpi-side[b-9lzbqw2ufs] {
    min-width: 0;
}

/* Ticket pills */
.kpi-pill[b-9lzbqw2ufs] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    background: color-mix(in oklab, var(--accent) 18%, transparent);
    border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
}

.kpi-pill-muted[b-9lzbqw2ufs] {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.10);
}

/* ---------- Skeletons ---------- */
.skeleton[b-9lzbqw2ufs] {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: color-mix(in oklab, #fff 8%, transparent);
    max-width: 100%;
    box-sizing: border-box;
}

    .skeleton[b-9lzbqw2ufs]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.10), rgba(255,255,255,0));
        transform: translateX(-100%);
        animation: shimmer-b-9lzbqw2ufs 1.2s linear infinite;
    }

@keyframes shimmer-b-9lzbqw2ufs {
    100% {
        transform: translateX(100%);
    }
}

.skeleton.num[b-9lzbqw2ufs] {
    width: 80px;
    height: 32px;
    margin-top: 6px;
}

.skeleton.line[b-9lzbqw2ufs] {
    height: 12px;
    border-radius: 6px;
    flex: 1 1 auto;
    min-width: 80px;
    max-width: 100%;
}

.skeleton.ring[b-9lzbqw2ufs] {
    width: 56px;
    height: 56px;
    border-radius: 999px;
}

/* ---------- Error pill ---------- */
.pill-error[b-9lzbqw2ufs] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    background: #3b1d27;
    color: #ff94a8;
    border: 1px solid #6b273c;
}

/* ---------- Checks list ---------- */
.checks[b-9lzbqw2ufs] {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.check-item[b-9lzbqw2ufs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}

.check-left[b-9lzbqw2ufs] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.check-title[b-9lzbqw2ufs] {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.check-arrow[b-9lzbqw2ufs] {
    opacity: .6;
    font-size: 18px;
    padding-left: 10px;
}

.check-icon[b-9lzbqw2ufs] {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    position: relative;
    flex: 0 0 18px;
}

/* status colors */
.check-good[b-9lzbqw2ufs] {
    background: #13251a;
    border: 1px solid #1e6d3a;
}

.check-warn[b-9lzbqw2ufs] {
    background: #2a2313;
    border: 1px solid #7a5d1a;
}

.check-bad[b-9lzbqw2ufs] {
    background: #3b1d27;
    border: 1px solid #6b273c;
}

.check-muted[b-9lzbqw2ufs] {
    background: #1a2037;
    border: 1px solid #2d3457;
}

/* icon glyphs */
.check-good[b-9lzbqw2ufs]::after, .check-warn[b-9lzbqw2ufs]::after, .check-bad[b-9lzbqw2ufs]::after {
    content: "";
    width: 10px;
    height: 10px;
    display: block;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background: rgba(255,255,255,.92);
}

.check-good[b-9lzbqw2ufs]::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

.check-warn[b-9lzbqw2ufs]::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 3h2v12h-2zm0 14h2v2h-2z'/%3E%3C/svg%3E");
}

.check-bad[b-9lzbqw2ufs]::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E");
}

.check-item[b-9lzbqw2ufs] {
    transition: transform .08s ease, box-shadow .08s ease, border-color .12s ease, background .12s ease;
}

.check-row-good[b-9lzbqw2ufs] {
    border-color: color-mix(in oklab, var(--success) 40%, rgba(255,255,255,.08));
    background: color-mix(in oklab, var(--success) 10%, rgba(255,255,255,.02));
}

.check-row-warn[b-9lzbqw2ufs] {
    border-color: color-mix(in oklab, var(--warning) 45%, rgba(255,255,255,.08));
    background: color-mix(in oklab, var(--warning) 12%, rgba(255,255,255,.02));
}

.check-row-bad[b-9lzbqw2ufs] {
    border-color: color-mix(in oklab, var(--danger) 45%, rgba(255,255,255,.08));
    background: color-mix(in oklab, var(--danger) 12%, rgba(255,255,255,.02));
}

.check-row-muted[b-9lzbqw2ufs] {
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}

/* muted dot (used in quick forms list) */
.check-muted[b-9lzbqw2ufs]::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.35);
    display: block;
}

/* ---------- Ticket table (dialog) ---------- */
.table-wrap[b-9lzbqw2ufs] {
    overflow: auto;
    padding: 0 14px 10px;
}

.table[b-9lzbqw2ufs] {
    border-collapse: collapse;
    font-size: 13px;
    color: var(--content-text);
    width: max-content;
}

    .table th[b-9lzbqw2ufs], .table td[b-9lzbqw2ufs] {
        padding: 10px 12px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        white-space: nowrap;
    }

    .table thead th[b-9lzbqw2ufs] {
        position: sticky;
        top: 0;
        z-index: 2;
        text-align: left;
    }

    .table tbody tr:nth-child(even)[b-9lzbqw2ufs] {
        background: rgba(255,255,255,.02);
    }

.th-col[b-9lzbqw2ufs] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.th-label[b-9lzbqw2ufs] {
    font-size: 12px;
    opacity: .9;
}

.th-filter[b-9lzbqw2ufs] {
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 6px;
    width: 100%;
}

.sort-label[b-9lzbqw2ufs] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sort-glyph[b-9lzbqw2ufs] {
    font-size: 11px;
    opacity: .8;
}

.w-num[b-9lzbqw2ufs] {
    min-width: 140px;
}

.w-title[b-9lzbqw2ufs] {
    min-width: 360px;
}

.w-customer[b-9lzbqw2ufs] {
    min-width: 220px;
}

.w-status[b-9lzbqw2ufs] {
    min-width: 140px;
}

.w-queue[b-9lzbqw2ufs] {
    min-width: 180px;
}

.w-issue[b-9lzbqw2ufs] {
    min-width: 220px;
}

.w-subissue[b-9lzbqw2ufs] {
    min-width: 200px;
}

.w-priority[b-9lzbqw2ufs] {
    min-width: 140px;
}

.w-created[b-9lzbqw2ufs] {
    min-width: 180px;
}

.w-completed[b-9lzbqw2ufs] {
    min-width: 180px;
}

.w-hours[b-9lzbqw2ufs] {
    min-width: 140px;
}

.w-yesno[b-9lzbqw2ufs] {
    min-width: 140px;
}

/* ---------- Ticket details + notes ---------- */
.ticket-details[b-9lzbqw2ufs] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ticket-summary-grid[b-9lzbqw2ufs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem 1.5rem;
}

.ticket-field[b-9lzbqw2ufs] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-size: .9rem;
}

.ticket-label[b-9lzbqw2ufs] {
    font-weight: 600;
    color: var(--muted-fg, #6b7280);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .75rem;
}

.ticket-value[b-9lzbqw2ufs] {
    font-size: .95rem;
    color: var(--content-text, #111827);
    word-break: break-word;
}

.notes-list[b-9lzbqw2ufs] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: .5rem;
}

.note-card[b-9lzbqw2ufs] {
    padding: .75rem 1rem;
    border-left: 3px solid var(--accent);
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.note-header[b-9lzbqw2ufs] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}

.note-title[b-9lzbqw2ufs] {
    font-weight: 600;
    font-size: .95rem;
}

.note-meta[b-9lzbqw2ufs] {
    font-size: .75rem;
    color: var(--muted-fg, #6b7280);
    white-space: nowrap;
}

.note-body[b-9lzbqw2ufs] {
    font-size: .9rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

@media (max-width:640px) {
    .modal-detail[b-9lzbqw2ufs] {
        margin: 1rem;
    }

    .note-meta[b-9lzbqw2ufs] {
        white-space: normal;
    }
}

/* Footer */
.footer[b-9lzbqw2ufs] {
    margin-top: 10px;
    font-size: 12px;
}


/* Loading overlay */
.loading-overlay[b-9lzbqw2ufs] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: inherit;
    z-index: 2;
}

.spinner-lg[b-9lzbqw2ufs] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: #7aa2ff;
    border-radius: 50%;
    animation: spin-b-9lzbqw2ufs 0.8s linear infinite;
    margin-bottom: 8px;
}

.status-note[b-9lzbqw2ufs] {
    font-size: 12px;
    opacity: 0.85;
}

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

.empty[b-9lzbqw2ufs] {
    padding: 24px;
    text-align: center;
    opacity: .8;
}

/* Overlay-less modal "sheet" */
.sheet[b-9lzbqw2ufs] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(1100px, 96vw);
    max-height: 92vh;
    max-width: 50vw;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 10px 36px rgba(0,0,0,.35);
    overflow: hidden;
    z-index: 99;
}

/* Toolbar */
.sheet-head[b-9lzbqw2ufs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--content-card-header);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sheet-title[b-9lzbqw2ufs] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icon-btn[b-9lzbqw2ufs] {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 8px;
}

    .icon-btn:hover[b-9lzbqw2ufs] {
        background: rgba(255,255,255,0.08);
    }

/* Body + iframe */
.sheet-body[b-9lzbqw2ufs] {
    position: relative;
    flex: 1 1 auto;
    min-height: 340px;
}

/* Spinner overlay inside body */
.iframe-loading[b-9lzbqw2ufs] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.10);
    z-index: 1;
}

.spinner-lg[b-9lzbqw2ufs] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: #7aa2ff;
    border-radius: 50%;
    animation: spin-b-9lzbqw2ufs 0.8s linear infinite;
    margin-bottom: 8px;
}

.status-note[b-9lzbqw2ufs] {
    font-size: 12px;
    opacity: 0.85;
}

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

/* Optional: prevent body scroll when open (pairs with toggleBodyScroll JS) */
body.modal-open[b-9lzbqw2ufs] {
    overflow: hidden;
}

/* Optional glass helper (if you use a .glass class elsewhere) */
.glass[b-9lzbqw2ufs] {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.zoomed-frame[b-9lzbqw2ufs] {
    transform: scale(0.8);
    transform-origin: 0 0;
    width: 130%; /* 1 / 0.9 */
    height: 130vh;
}

.blocked-note[b-9lzbqw2ufs] {
    padding: 16px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
}

    .blocked-note .btn-row[b-9lzbqw2ufs] {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .blocked-note .muted[b-9lzbqw2ufs] {
        opacity: .8;
        font-size: 12px;
    }

.modal[b-9lzbqw2ufs] {
    background: var(--content-card-bg);
    min-width: 70vw;
}
.modal-detail[b-9lzbqw2ufs] {
    min-width:60vw;
}

.modal-check[b-9lzbqw2ufs] {
    min-width: min(720px, 92vw);
    max-width: 32vw;
    max-height: 32vh;
}
.modal-body[b-9lzbqw2ufs] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    justify-content: space-between;
}

.check-modal-desc[b-9lzbqw2ufs] {
    line-height: 1.45;
}

/* Color the modal like the check rows */
.modal-check.check-modal-good .modal-header[b-9lzbqw2ufs] {
    border-bottom: 1px solid color-mix(in oklab, var(--success) 45%, rgba(255,255,255,.12));
    background: color-mix(in oklab, var(--success) 16%, rgba(20, 22, 40, .95));
}

.modal-check.check-modal-warn .modal-header[b-9lzbqw2ufs] {
    border-bottom: 1px solid color-mix(in oklab, var(--warning) 55%, rgba(255,255,255,.12));
    background: color-mix(in oklab, var(--warning) 16%, rgba(20, 22, 40, .95));
}

.modal-check.check-modal-bad .modal-header[b-9lzbqw2ufs] {
    border-bottom: 1px solid color-mix(in oklab, var(--danger) 55%, rgba(255,255,255,.12));
    background: color-mix(in oklab, var(--danger) 16%, rgba(20, 22, 40, .95));
}

.modal-check.check-modal-muted .modal-header[b-9lzbqw2ufs] {
    border-bottom: 1px solid rgba(255,255,255,.12);
}
/* /Components/Pages/Devices.razor.rz.scp.css */
/* Table shell with vertical scroll + sticky header */
.table-wrap[b-tuf9vyh3gm] {
    overflow: auto;
    border-radius: var(--radius-lg);
    padding: 0;
}

.devices-grid[b-tuf9vyh3gm] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed; /* allows column widths */
}

    .devices-grid thead th[b-tuf9vyh3gm] {
        position: sticky;
        top: 0;
        z-index: 2;
        border-bottom: 1px solid var(--glass-border);
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        color: var(--content-text-muted);
        cursor: pointer;
        white-space: nowrap;
    }

    .devices-grid tbody td[b-tuf9vyh3gm] {
        padding: 10px 12px;
        border-bottom: 1px solid color-mix(in oklab, var(--glass-border) 60%, transparent);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .devices-grid tbody tr:hover[b-tuf9vyh3gm] {
        background: color-mix(in oklab, var(--glass-1) 35%, transparent);
    }

.empty[b-tuf9vyh3gm] {
    text-align: center;
    color: var(--content-text-muted);
    padding: 24px;
}

/* Sort arrow */
.sort[b-tuf9vyh3gm] {
    margin-left: 6px;
    opacity: .7;
}

/* License pills */
.pill[b-tuf9vyh3gm] {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px;
    border-radius: 999px;
    font-size: .75rem;
    background: var(--accent);
    color: var(--text-on-accent);
    white-space: nowrap;
}

.pill-empty[b-tuf9vyh3gm] {
    background: var(--neutral);
}

/* Status */
.status.enabled[b-tuf9vyh3gm] {
    color: var(--status-enabled);
    font-weight: 600;
}

.status.disabled[b-tuf9vyh3gm] {
    color: var(--status-disabled);
    font-weight: 600;
}

/* Column resizers */
.col-resizer[b-tuf9vyh3gm] {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
}

.devices-grid thead th[b-tuf9vyh3gm] {
    position: sticky;
}

.devices-grid thead th[b-tuf9vyh3gm] {
    position: sticky;
    padding-right: 16px;
}

.devices-grid .field-empty[b-tuf9vyh3gm] {
    color: var(--content-text-muted);
}

.devices-grid .filters-row .column-filter[b-tuf9vyh3gm] {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.75rem;
    padding: 0.1rem 0.25rem;
    color: var(--content-text);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
}

    .devices-grid .filters-row .column-filter[b-tuf9vyh3gm]::placeholder {
        color: var(--content-text-muted);
        opacity: 0.8;
    }

/* ═══════════════════════════════════════════
   KPI grid (mirrors Users page pattern)
   ═══════════════════════════════════════════ */
.devices-kpi-grid[b-tuf9vyh3gm] {
    grid-template-columns: repeat(4, minmax(0, 3fr));
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

/* ═══════════════════════════════════════════
   Device Health column cell
   ═══════════════════════════════════════════ */
.health-cell[b-tuf9vyh3gm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--radius-sm, 6px);
    transition: background .12s ease;
}

    .health-cell:hover[b-tuf9vyh3gm] {
        background: color-mix(in oklab, var(--glass-1) 50%, transparent);
    }

/* Colored status dot */
.health-dot[b-tuf9vyh3gm] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--content-text-muted);
}

.health-dot-good[b-tuf9vyh3gm] {
    background: var(--success, #34d399);
    box-shadow: 0 0 6px color-mix(in oklab, var(--success, #34d399) 50%, transparent);
}

.health-dot-medium[b-tuf9vyh3gm] {
    background: var(--warning, #f7b955);
    box-shadow: 0 0 6px color-mix(in oklab, var(--warning, #f7b955) 50%, transparent);
}

.health-dot-bad[b-tuf9vyh3gm] {
    background: var(--danger, #f87171);
    box-shadow: 0 0 6px color-mix(in oklab, var(--danger, #f87171) 50%, transparent);
}

.health-dot-unknown[b-tuf9vyh3gm] {
    background: var(--content-text-muted);
}

/* Larger dot variant for the popup header */
.health-dot-lg[b-tuf9vyh3gm] {
    width: 14px;
    height: 14px;
}

/* Clickable score text */
.health-score[b-tuf9vyh3gm] {
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in oklab, var(--content-text) 40%, transparent);
    color: var(--content-text);
}

.health-cell:hover .health-score[b-tuf9vyh3gm] {
    text-decoration-style: solid;
}

/* ═══════════════════════════════════════════
   Health detail popup
   ═══════════════════════════════════════════ */
.health-overlay[b-tuf9vyh3gm] {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
}

.health-popup[b-tuf9vyh3gm] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 901;
    width: min(520px, 92vw);
    max-height: 80vh;
    overflow-y: auto;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--glass-border);
    background: var(--bg1, #1a1a2e);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
    padding: 24px;
}

.health-popup-header[b-tuf9vyh3gm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.health-popup-title-row[b-tuf9vyh3gm] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.health-popup-title[b-tuf9vyh3gm] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--content-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

.health-popup-close[b-tuf9vyh3gm] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--content-text);
    font-size: 1.2rem;
    cursor: pointer;
    transition: background .12s ease;
}

    .health-popup-close:hover[b-tuf9vyh3gm] {
        background: color-mix(in oklab, var(--glass-1) 60%, transparent);
    }

.health-popup-empty[b-tuf9vyh3gm] {
    color: var(--content-text-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 16px 0;
}

/* ── Criteria list ── */
.health-criteria-list[b-tuf9vyh3gm] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.health-criteria-row[b-tuf9vyh3gm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid color-mix(in oklab, var(--glass-border) 50%, transparent);
}

    .health-criteria-row:last-child[b-tuf9vyh3gm] {
        border-bottom: none;
    }

.health-criteria-name[b-tuf9vyh3gm] {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--content-text);
    min-width: 120px;
    flex-shrink: 0;
}

.health-criteria-value[b-tuf9vyh3gm] {
    font-size: 0.85rem;
    color: var(--content-text-muted);
    flex: 1;
    min-width: 0;
}

/* ── Info icon + tooltip ── */
.health-info-wrap[b-tuf9vyh3gm] {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.health-info-icon[b-tuf9vyh3gm] {
    font-size: 1rem;
    line-height: 1;
    cursor: help;
    color: var(--content-text-muted);
    opacity: .7;
    transition: opacity .12s ease, color .12s ease;
}

    .health-info-icon:hover[b-tuf9vyh3gm],
    .health-info-icon:focus[b-tuf9vyh3gm] {
        opacity: 1;
        color: var(--accent, #60a5fa);
    }

.health-tooltip[b-tuf9vyh3gm] {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 910;
    width: max-content;
    max-width: 280px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--bg1, #1a1a2e);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--content-text);
    pointer-events: none;
    white-space: normal;
}

    /* Arrow pointing down */
    .health-tooltip[b-tuf9vyh3gm]::after {
        content: "";
        position: absolute;
        top: 100%;
        right: 12px;
        border: 6px solid transparent;
        border-top-color: var(--glass-border);
    }

.health-info-icon:hover + .health-tooltip[b-tuf9vyh3gm],
.health-info-icon:focus + .health-tooltip[b-tuf9vyh3gm] {
    display: block;
}
/* /Components/Pages/Documentation.razor.rz.scp.css */
.doc-toolbar[b-1fq83rd90s] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.5rem 0.6rem;
    margin-bottom: 14px;
    border-radius: var(--radius-md, 12px);
    background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
}

.tabs[b-1fq83rd90s] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    flex: 1 1 auto;
    min-width: 0;
}

.tab[b-1fq83rd90s] {
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--content-text);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

    .tab.active[b-1fq83rd90s] {
        background: var(--accent);
        color: var(--text-on-accent);
        border-color: var(--accent);
    }

.doc-grid[b-1fq83rd90s] {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
}

    .doc-grid th[b-1fq83rd90s], .doc-grid td[b-1fq83rd90s] {
        padding: 0.5rem 0.6rem;
        white-space: nowrap;
        border-bottom: 1px solid var(--glass-border);
    }

.table-wrap[b-1fq83rd90s] {
    overflow-x: auto;
    max-width: 100%;
}

.col-tight[b-1fq83rd90s] {
    width: 1%;
    min-width: 1px;
    white-space: nowrap;
}

.cards-grid[b-1fq83rd90s] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.75rem;
}

.card[b-1fq83rd90s] {
    padding: 0.75rem;
    border-radius: 16px;
}

.card-header[b-1fq83rd90s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.card-title[b-1fq83rd90s] {
    font-weight: 600;
}

.card-body .row[b-1fq83rd90s] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--glass-border);
}

    .card-body .row:last-child[b-1fq83rd90s] {
        border-bottom: none;
    }

.label[b-1fq83rd90s] {
    color: var(--content-text-muted);
}

.field-empty[b-1fq83rd90s] {
    color: var(--content-text-muted);
}

.btn-ghost[b-1fq83rd90s] {
    background: transparent;
}

/* chip styles (same ones you already use) */
.chip[b-1fq83rd90s] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.2;
    border: 1px solid var(--chip-muted-border);
    background: var(--chip-muted-bg);
    color: var(--chip-muted-text);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-good[b-1fq83rd90s] {
    background: var(--chip-good-bg);
    border-color: var(--chip-good-border);
    color: var(--chip-good-text);
}

.chip-warn[b-1fq83rd90s] {
    background: var(--chip-warn-bg);
    border-color: var(--chip-warn-border);
    color: var(--chip-warn-text);
}

.chip-bad[b-1fq83rd90s] {
    background: var(--chip-bad-bg);
    border-color: var(--chip-bad-border);
    color: var(--chip-bad-text);
}

.chip-muted[b-1fq83rd90s] {
    background: var(--chip-muted-bg);
    border-color: var(--chip-muted-border);
    color: var(--chip-muted-text);
}

.loading-row[b-1fq83rd90s] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.spinner[b-1fq83rd90s] {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid var(--glass-border);
    border-top-color: var(--spinner-accent);
    animation: spin-b-1fq83rd90s 0.9s linear infinite;
    display: inline-block;
}

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

/* ---------- Documentation Cards ---------- */

.cards-grid[b-1fq83rd90s] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 0.9rem;
    margin-top: 0.75rem;
}

    /* Card base */
    .cards-grid .card.glass[b-1fq83rd90s] {
        position: relative;
        border-radius: 18px;
        padding: 0.85rem;
        background: var(--content-card-bg);
        border: 1px solid var(--content-card-border);
        box-shadow: var(--shadow);
        backdrop-filter: blur(10px);
        transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
        overflow: hidden;
    }

        /* Subtle highlight gradient */
        .cards-grid .card.glass[b-1fq83rd90s]::before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: 0.7;
            pointer-events: none;
        }

        /* Hover state */
        .cards-grid .card.glass:hover[b-1fq83rd90s] {
            transform: translateY(-2px);
            border-color: var(--content-card-border);
            background: var(--content-card-bg);
        }

/* Header row */
.card-header[b-1fq83rd90s] {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--glass-border);
}

.card-title[b-1fq83rd90s] {
    font-weight: 650;
    letter-spacing: 0.2px;
    color: var(--content-text);
    line-height: 1.2;
    font-size: 1rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .card-title a[b-1fq83rd90s] {
        color: var(--content-text);
        text-decoration: none;
    }

        .card-title a:hover[b-1fq83rd90s] {
            color: var(--accent);
            text-decoration: underline;
            text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent);
        }

/* Open button (ghost) */
.btn.btn-ghost[b-1fq83rd90s] {
    background: color-mix(in srgb, var(--glass-2) 60%, transparent);
    border: 1px solid var(--glass-border);
    color: var(--content-text);
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    line-height: 1;
    white-space: nowrap;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

    .btn.btn-ghost:hover[b-1fq83rd90s] {
        background: color-mix(in srgb, var(--accent) 18%, var(--glass-2));
        border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border));
        transform: translateY(-1px);
    }

/* Body rows */
.card-body[b-1fq83rd90s] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .card-body .row[b-1fq83rd90s] {
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: 0.75rem;
        padding: 0.45rem 0.2rem;
        border-bottom: 1px dashed color-mix(in srgb, var(--glass-border) 75%, transparent);
    }

        .card-body .row:last-child[b-1fq83rd90s] {
            border-bottom: none;
        }

    /* Label */
    .card-body .label[b-1fq83rd90s] {
        color: var(--content-text-muted);
        font-size: 0.82rem;
        letter-spacing: 0.2px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Value */
    .card-body .value[b-1fq83rd90s] {
        color: var(--content-text);
        font-size: 0.9rem;
        line-height: 1.25;
        min-width: 0; /* enables ellipsis inside */
    }

        /* Value content that is plain text */
        .card-body .value[b-1fq83rd90s],
        .card-body .value span[b-1fq83rd90s],
        .card-body .value p[b-1fq83rd90s],
        .card-body .value div[b-1fq83rd90s] {
            max-width: 100%;
        }

    /* Make long plain text wrap nicely */
    .card-body .value[b-1fq83rd90s] {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

        /* HTML content inside values: keep it readable on dark glass */
        .card-body .value :is(p, ul, ol)[b-1fq83rd90s] {
            margin: 0.1rem 0;
            padding: 0;
        }

        .card-body .value :is(ul, ol)[b-1fq83rd90s] {
            padding-left: 1.1rem;
        }

        .card-body .value a[b-1fq83rd90s] {
            color: var(--accent);
            text-decoration: underline;
            text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
        }

        .card-body .value code[b-1fq83rd90s] {
            background: color-mix(in srgb, var(--surface) 70%, transparent);
            border: 1px solid var(--glass-border);
            border-radius: 8px;
            padding: 0.08rem 0.35rem;
            font-size: 0.85em;
            color: var(--content-text);
        }

    /* Chips inside cards should not stretch weirdly */
    .card-body .chip[b-1fq83rd90s] {
        max-width: 220px;
    }

/* Responsive tweaks */
@media (max-width: 520px) {
    .cards-grid[b-1fq83rd90s] {
        grid-template-columns: 1fr;
    }

    .card-body .row[b-1fq83rd90s] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .card-body .label[b-1fq83rd90s] {
        font-size: 0.78rem;
    }
}

.cards-grid .card.glass[b-1fq83rd90s]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 10px;
    height: 2px;
    border-radius: 999px;
    opacity: 0.7;
    pointer-events: none;
}
.search-box[b-1fq83rd90s] {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: color-mix(in oklab, var(--glass-1) 80%, transparent);
    color: var(--content-text);
    flex: 0 0 auto;
    width: 240px;
    max-width: 45%;
}
/* /Components/Pages/Groups.razor.rz.scp.css */
.groups-grid .filters-row .column-filter[b-fw32ku1l99] {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.75rem;
    padding: 0.1rem 0.25rem;
    border-radius: 4px;
}

/* Table shell with vertical scroll + sticky header */
.table-wrap[b-fw32ku1l99] {
    overflow: auto;
    max-width: 100%;
    border-radius: var(--radius-lg);
    padding: 0;
}

.groups-grid[b-fw32ku1l99] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.truncate[b-fw32ku1l99] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
    .groups-grid th[b-fw32ku1l99],
    .groups-grid td[b-fw32ku1l99] {
        padding: 0.5rem 0.6rem;
        vertical-align: middle;
        max-width:250px;
    }
        .groups-grid th:not(.col-tight):not(.actions-col)[b-fw32ku1l99],
        .groups-grid td:not(.col-tight):not(.actions-col)[b-fw32ku1l99] {
            min-width: 120px;
        }

        .groups-grid th.actions-col[b-fw32ku1l99],
        .groups-grid td.actions-col[b-fw32ku1l99] {
            width: 1%;
            min-width: 1px;
            white-space: nowrap;
            text-align: right;
        }
        .groups-grid th.col-tight[b-fw32ku1l99],
        .groups-grid td.col-tight[b-fw32ku1l99] {
            width: 1%;
            min-width: 1px;
            white-space: nowrap;
        }
.groups-grid thead th[b-fw32ku1l99] {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--glass-border);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--content-text-muted);
    cursor: pointer;
    white-space: nowrap;
}

    .groups-grid tbody td[b-fw32ku1l99] {
        padding: 10px 12px;
        border-bottom: 1px solid color-mix(in oklab, var(--glass-border) 60%, transparent);
        overflow: hidden;
        text-overflow: ellipsis;
    }

groups-grid tbody tr:hover[b-fw32ku1l99] {
    background: color-mix(in oklab, var(--glass-1) 35%, transparent);
}

.empty[b-fw32ku1l99] {
    text-align: center;
    color: var(--content-text-muted);
    padding: 24px;
}

/* Sort arrow */
.sort[b-fw32ku1l99] {
    margin-left: 6px;
    opacity: .7;
}


.actions-col[b-fw32ku1l99] {
    width: 1%;
    white-space: nowrap;
}

.btn[b-fw32ku1l99] {
    padding: 0.35rem 0.6rem;
    border-radius: 10px;
    cursor: pointer;
}


.modal-backdrop[b-fw32ku1l99] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}

.modal[b-fw32ku1l99] {
    width: min(1200px, 96vw);
    max-height: 85vh;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--glass-border-strong);
    background: var(--content-card-bg);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}

.modal-header[b-fw32ku1l99], .modal-footer[b-fw32ku1l99] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--content-card-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-footer[b-fw32ku1l99] {
    border-bottom: none;
    border-top: 1px solid var(--content-card-border);
}

.modal-title[b-fw32ku1l99] {
    font-weight: 600;
}

    .modal-title .muted[b-fw32ku1l99] {
        margin-left: 0.5rem;
        color: var(--content-text-muted);
        font-weight: 400;
    }

.modal-body[b-fw32ku1l99] {
    padding: 1rem;
    overflow: auto;
}

.table-wrap.inner[b-fw32ku1l99] {
    margin-top: 0.75rem;
}

.members-grid[b-fw32ku1l99] {
    width: 100%;
    border-collapse: collapse;
}

    .members-grid th[b-fw32ku1l99], .members-grid td[b-fw32ku1l99] {
        padding: 0.5rem 0.5rem;
        border-bottom: 1px solid var(--glass-border);
        text-align: left;
    }

.muted[b-fw32ku1l99] {
    color: var(--content-text-muted);
}

/* Chip styles (global-safe) */
.chip[b-fw32ku1l99] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.2;
    border: 1px solid var(--chip-muted-border);
    background: var(--chip-muted-bg);
    color: var(--chip-muted-text);
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-good[b-fw32ku1l99] {
    background: var(--chip-good-bg);
    border-color: var(--chip-good-border);
    color: var(--chip-good-text);
}

.chip-warn[b-fw32ku1l99] {
    background: var(--chip-warn-bg);
    border-color: var(--chip-warn-border);
    color: var(--chip-warn-text);
}

.chip-bad[b-fw32ku1l99] {
    background: var(--chip-bad-bg);
    border-color: var(--chip-bad-border);
    color: var(--chip-bad-text);
}

.chip-muted[b-fw32ku1l99] {
    background: var(--chip-muted-bg);
    border-color: var(--chip-muted-border);
    color: var(--chip-muted-text);
}
/* /Components/Pages/Invoices.razor.rz.scp.css */
.table-wrap[b-bp67sltcpv] {
    overflow: auto;
    border-radius: var(--radius-lg);
    padding: 0;
}

.invoices-grid[b-bp67sltcpv] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

    .invoices-grid thead th[b-bp67sltcpv] {
        position: sticky;
        top: 0;
        z-index: 2;
        border-bottom: 1px solid var(--glass-border);
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        color: var(--content-text-muted);
        cursor: pointer;
        white-space: nowrap;
    }

    .invoices-grid tbody td[b-bp67sltcpv] {
        padding: 10px 12px;
        border-bottom: 1px solid color-mix(in oklab, var(--glass-border) 60%, transparent);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .invoices-grid tbody tr:hover[b-bp67sltcpv] {
        background: color-mix(in oklab, var(--glass-1) 35%, transparent);
    }

.filters-row .column-filter[b-bp67sltcpv] {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.75rem;
    padding: 0.1rem 0.25rem;
    border-radius: 4px;
}

.empty[b-bp67sltcpv] {
    text-align: center;
    color: var(--content-text-muted);
    padding: 24px;
}

.sort[b-bp67sltcpv] {
    margin-left: 6px;
    opacity: .7;
}

.num[b-bp67sltcpv] {
    text-align: right;
}

/* buttons (assumes you already have .btn styles; otherwise keep minimal) */
.btn[b-bp67sltcpv] {
    padding: 8px 10px;
    border-radius: 10px;
}

.btn-primary[b-bp67sltcpv] {
    background: var(--accent);
}

/* modal */
.modal-backdrop[b-bp67sltcpv] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
}

.modal[b-bp67sltcpv] {
    width: min(1100px, 96vw) !important;
    height: min(780px, 92vh);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header[b-bp67sltcpv], .modal-footer[b-bp67sltcpv] {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid color-mix(in oklab, var(--glass-border) 70%, transparent);
}

.modal-footer[b-bp67sltcpv] {
    border-bottom: 0;
    border-top: 1px solid color-mix(in oklab, var(--glass-border) 70%, transparent);
    justify-content: flex-end;
}

.modal-title[b-bp67sltcpv] {
    font-weight: 700;
    color: var(--content-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-btn[b-bp67sltcpv] {
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--content-text);
    border-radius: 10px;
    padding: 6px 10px;
}

.modal-body[b-bp67sltcpv] {
    flex: 1;
    padding: 0;
}

.invoice-frame[b-bp67sltcpv] {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
/* /Components/Pages/Licenses.razor.rz.scp.css */

/* Table shell with vertical scroll + sticky header */
.table-wrap[b-dd8glxzklo] {
    overflow: auto;
    border-radius: var(--radius-lg);
    padding: 0;
}

.licenses-grid[b-dd8glxzklo] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

    .licenses-grid thead th[b-dd8glxzklo] {
        position: sticky;
        top: 0;
        z-index: 2;
        border-bottom: 1px solid var(--glass-border);
        padding: 10px 12px;
        padding-right: 16px; /* space for resize handle */
        text-align: left;
        font-weight: 600;
        color: var(--content-text-muted);
        cursor: pointer;
        white-space: nowrap;
    }

    .licenses-grid tbody td[b-dd8glxzklo] {
        padding: 10px 12px;
        border-bottom: 1px solid color-mix(in oklab, var(--glass-border) 60%, transparent);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .licenses-grid tbody tr.license-row:hover[b-dd8glxzklo] {
        background: color-mix(in oklab, var(--glass-1) 35%, transparent);
    }

/* Clickable license rows */
.license-row[b-dd8glxzklo] {
    cursor: pointer;
    transition: background .15s ease;
}

    .license-row.expanded[b-dd8glxzklo] {
        background: color-mix(in oklab, var(--glass-1) 25%, transparent);
    }

.license-name-cell[b-dd8glxzklo] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

/* Expand chevron */
.expand-chevron[b-dd8glxzklo] {
    display: inline-block;
    font-size: .75rem;
    transition: transform .2s ease;
    opacity: .6;
    flex-shrink: 0;
}

    .expand-chevron.open[b-dd8glxzklo] {
        transform: rotate(90deg);
    }

/* User count badge on the license name */
.user-count-badge[b-dd8glxzklo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    background: color-mix(in oklab, var(--accent) 25%, transparent);
    color: var(--accent);
    flex-shrink: 0;
}

.empty[b-dd8glxzklo] {
    text-align: center;
    color: var(--content-text-muted);
    padding: 24px;
}

/* Sort arrow */
.sort[b-dd8glxzklo] {
    margin-left: 6px;
    opacity: .7;
}

/* Column resizers */
.col-resizer[b-dd8glxzklo] {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
}

/* Column filters */
.licenses-grid .filters-row .column-filter[b-dd8glxzklo] {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.75rem;
    padding: 0.1rem 0.25rem;
    color: var(--content-text);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
}

    .licenses-grid .filters-row .column-filter[b-dd8glxzklo]::placeholder {
        color: var(--content-text-muted);
        opacity: 0.8;
    }

/* Field empties */
.licenses-grid .field-empty[b-dd8glxzklo] {
    color: var(--content-text-muted);
}

/* Chip display (same as Devices) */
.chip[b-dd8glxzklo] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
    white-space: nowrap;
}

.chip-good[b-dd8glxzklo] {
    background: color-mix(in oklab, var(--success) 20%, transparent);
    color: var(--success);
}

.chip-warn[b-dd8glxzklo] {
    background: color-mix(in oklab, var(--warning) 20%, transparent);
    color: var(--warning);
}

.chip-bad[b-dd8glxzklo] {
    background: color-mix(in oklab, var(--danger) 20%, transparent);
    color: var(--danger);
}

.chip-muted[b-dd8glxzklo] {
    background: color-mix(in oklab, var(--glass-border) 40%, transparent);
    color: var(--content-text-muted);
}

/* ===== Detail panel (expanded row) ===== */
.detail-row td[b-dd8glxzklo] {
    padding: 0 !important;
    border-bottom: 1px solid var(--glass-border);
}

.detail-panel[b-dd8glxzklo] {
    margin: 0 12px 12px 12px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    animation: slideDown-b-dd8glxzklo .2s ease;
}

@keyframes slideDown-b-dd8glxzklo {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.detail-header[b-dd8glxzklo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.detail-title[b-dd8glxzklo] {
    font-weight: 600;
    font-size: .9rem;
    color: var(--content-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.detail-count[b-dd8glxzklo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--content-text-muted);
    background: color-mix(in oklab, var(--glass-1) 70%, transparent);
    border: 1px solid var(--glass-border);
}

.detail-search[b-dd8glxzklo] {
    padding: 5px 10px;
    font-size: .8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--content-text);
    min-width: 180px;
}

    .detail-search[b-dd8glxzklo]::placeholder {
        color: var(--content-text-muted);
    }

.detail-users[b-dd8glxzklo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

    .detail-users[b-dd8glxzklo]::-webkit-scrollbar {
        width: 6px;
    }

    .detail-users[b-dd8glxzklo]::-webkit-scrollbar-thumb {
        background: color-mix(in oklab, var(--glass-border) 70%, transparent);
        border-radius: 999px;
    }

.detail-user-chip[b-dd8glxzklo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: .82rem;
    background: color-mix(in oklab, var(--glass-1) 60%, transparent);
    border: 1px solid var(--glass-border);
    white-space: nowrap;
}

.user-icon[b-dd8glxzklo] {
    font-size: .75rem;
}

.detail-empty[b-dd8glxzklo] {
    color: var(--content-text-muted);
    font-size: .85rem;
    padding: 8px 0;
}

/* ===== KPI Grid (same as Users) ===== */
.licenses-kpi-grid[b-dd8glxzklo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

/* ===== Skeleton loading ===== */
.skeleton td[b-dd8glxzklo] {
    pointer-events: none;
}

.sk[b-dd8glxzklo] {
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
}

    .sk[b-dd8glxzklo]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.15), rgba(255,255,255,0));
        transform: translateX(-100%);
        animation: shimmer-b-dd8glxzklo 1.2s linear infinite;
    }

@keyframes shimmer-b-dd8glxzklo {
    100% {
        transform: translateX(100%);
    }
}

.sk-text[b-dd8glxzklo] {
    height: 14px;
    width: 70%;
}

.sk-pill[b-dd8glxzklo] {
    height: 14px;
    width: 50%;
}
/* /Components/Pages/PortalSettings.razor.rz.scp.css */
/* ---------- Portal Settings Editor ---------- */
.editor-header[b-9etrf8552p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

    .editor-header .h5[b-9etrf8552p] {
        margin: 0;
        font-weight: 650;
    }

.small[b-9etrf8552p] {
    font-size: 0.85rem;
}

.editor-grid[b-9etrf8552p] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 0.9rem;
}

@media (max-width: 980px) {
    .editor-grid[b-9etrf8552p] {
        grid-template-columns: 1fr;
    }
}

.tree .node[b-9etrf8552p] {
    padding: 0.65rem;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: var(--glass-1);
    box-shadow: var(--shadow);
    margin-bottom: 0.6rem;
}

    .tree .node.group[b-9etrf8552p] {
        background: var(--glass-2);
    }

.tree .children[b-9etrf8552p] {
    margin-top: 0.6rem;
    display: grid;
    gap: 0.5rem;
}

.tree .node .row[b-9etrf8552p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.catalog .catalog-item[b-9etrf8552p] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--glass-1) 70%, transparent);
    margin-top: 0.45rem;
}

    .catalog .catalog-item.disabled[b-9etrf8552p] {
        opacity: 0.55;
        filter: grayscale(30%);
    }

.toggle-inline[b-9etrf8552p] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--content-text-muted);
    font-size: 0.9rem;
}

.loading-row[b-9etrf8552p] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.spinner[b-9etrf8552p] {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid var(--glass-border);
    border-top-color: var(--spinner-accent);
    animation: spin-b-9etrf8552p 0.9s linear infinite;
    display: inline-block;
}

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

/* ---------- Roles editor ---------- */
.roles-grid[b-9etrf8552p] {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 0.9rem;
}

@media (max-width: 980px) {
    .roles-grid[b-9etrf8552p] {
        grid-template-columns: 1fr;
    }
}

/* ---------- Nav collapsible groups ---------- */
.nav-group[b-9etrf8552p] {
    margin-top: 0.35rem;
}

.nav-group-header[b-9etrf8552p] {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    color: var(--content-text);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
    border-radius: 12px;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}

    .nav-group-header:hover[b-9etrf8552p] {
        background: color-mix(in srgb, var(--glass-2) 60%, transparent);
        border-color: var(--glass-border);
    }

    .nav-group-header .title[b-9etrf8552p] {
        flex: 1;
        text-align: left;
    }

    .nav-group-header .chev[b-9etrf8552p] {
        transition: transform 140ms ease;
        opacity: 0.8;
    }

        .nav-group-header .chev.open[b-9etrf8552p] {
            transform: rotate(90deg);
        }

.nav-group-items[b-9etrf8552p] {
    display: none;
    padding-left: 0.35rem;
    margin-top: 0.25rem;
}

    .nav-group-items.open[b-9etrf8552p] {
        display: block;
    }

.tabs[b-9etrf8552p] {
    display:flex;
    gap:10px;
    margin-bottom: 0.9rem;
}

/* ---------- Shell body + sticky action bar ---------- */
.settings-body[b-9etrf8552p] {
    /* leave room so the sticky bar never covers content */
    padding-bottom: 5rem;
}

.settings-actionbar[b-9etrf8552p] {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    margin-top: 0.6rem;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--glass-2) 85%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
    /* hidden-but-present state: stays out of the way until something is dirty */
    opacity: 0.55;
    transition: opacity 140ms ease, transform 140ms ease;
}

    .settings-actionbar.show[b-9etrf8552p] {
        opacity: 1;
    }

    .settings-actionbar .spacer[b-9etrf8552p] {
        flex: 1;
    }

    .settings-actionbar .dirty-hint[b-9etrf8552p] {
        font-size: 0.9rem;
        color: var(--content-text-muted);
    }

    .settings-actionbar.show .dirty-hint[b-9etrf8552p] {
        color: var(--warning);
        font-weight: 600;
    }

/* ---------- Toast ---------- */
.settings-toast[b-9etrf8552p] {
    margin: 0 0 0.75rem 0;
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    font-size: 0.92rem;
}

    .settings-toast.is-ok[b-9etrf8552p] {
        background: var(--chip-good-bg);
        border-color: var(--chip-good-border);
        color: var(--chip-good-text);
    }

    .settings-toast.is-error[b-9etrf8552p] {
        background: var(--chip-bad-bg);
        border-color: var(--chip-bad-border);
        color: var(--chip-bad-text);
    }

.tab[b-9etrf8552p] {
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--content-text);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

    .tab.active[b-9etrf8552p] {
        background: var(--accent);
        color: var(--text-on-accent);
        border-color: var(--accent);
    }
/* /Components/Pages/SelfService.razor.rz.scp.css */
.page-title[b-vnm03m9nuo] {
    margin-bottom: 12px;
}

.filters.glass[b-vnm03m9nuo] {
    display: flex;
    gap: 12px;
    align-items: end;
    margin-bottom: 12px;
}

.search-box[b-vnm03m9nuo] {
    flex: 1;
    border-radius: 8px;
    padding: 8px 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    outline: none;
}

.select-wrap[b-vnm03m9nuo] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

    .select-wrap .label[b-vnm03m9nuo] {
        font-size: 12px;
        opacity: .8;
    }

    .select-wrap select[b-vnm03m9nuo] {
        border-radius: 8px;
        padding: 8px 10px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        outline: none;
        min-width: 180px;
    }

/* Catalog area */
.catalog.glass[b-vnm03m9nuo] {
    position: relative;
    min-height: 80vh;
    padding: 12px;
    border-radius: 12px;
}

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

/* Card look */
.card[b-vnm03m9nuo] {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 6px;
    padding: 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform .1s ease, box-shadow .1s ease, background .2s ease;
}

    .card:hover[b-vnm03m9nuo] {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(0,0,0,.25);
        background: color-mix(in oklab, var(--surface) 120%, transparent);
    }

    .card:active[b-vnm03m9nuo] {
        transform: translateY(0);
    }

.card-title[b-vnm03m9nuo] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-desc[b-vnm03m9nuo] {
    opacity: .85;
    font-size: 13px;
    height: 2.6em;
    overflow: hidden;
}

.chip[b-vnm03m9nuo] {
    width: fit-content;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--accent);
    border: 1px solid color-mix(in oklab, var(--accent) 60%, transparent);
}

/* Loading overlay */
.loading-overlay[b-vnm03m9nuo] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: inherit;
    z-index: 2;
}

.spinner-lg[b-vnm03m9nuo] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: #7aa2ff;
    border-radius: 50%;
    animation: spin-b-vnm03m9nuo 0.8s linear infinite;
    margin-bottom: 8px;
}

.status-note[b-vnm03m9nuo] {
    font-size: 12px;
    opacity: 0.85;
}

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

.empty[b-vnm03m9nuo] {
    padding: 24px;
    text-align: center;
    opacity: .8;
}

/* Overlay-less modal "sheet" */
.sheet[b-vnm03m9nuo] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(1100px, 96vw);
    max-width:50vw;
    max-height:92vh;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 10px 36px rgba(0,0,0,.35);
    z-index: 99;
}

/* Toolbar */
.sheet-head[b-vnm03m9nuo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--content-card-header);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sheet-title[b-vnm03m9nuo] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icon-btn[b-vnm03m9nuo] {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 8px;
}

    .icon-btn:hover[b-vnm03m9nuo] {
        background: rgba(255,255,255,0.08);
    }

/* Body + iframe */
.sheet-body[b-vnm03m9nuo] {
    position: relative;
    flex: 1 1 auto;
    min-height: 340px;
}

/* Spinner overlay inside body */
.iframe-loading[b-vnm03m9nuo] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.10);
    z-index: 1;
}

.spinner-lg[b-vnm03m9nuo] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: #7aa2ff;
    border-radius: 50%;
    animation: spin-b-vnm03m9nuo 0.8s linear infinite;
    margin-bottom: 8px;
}

.status-note[b-vnm03m9nuo] {
    font-size: 12px;
    opacity: 0.85;
}

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

/* Optional: prevent body scroll when open (pairs with toggleBodyScroll JS) */
body.modal-open[b-vnm03m9nuo] {
    overflow: hidden;
}

/* Optional glass helper (if you use a .glass class elsewhere) */
.glass[b-vnm03m9nuo] {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.zoomed-frame[b-vnm03m9nuo] {
    transform: scale(0.8);
    transform-origin: 0 0;
    width: 125%; /* 1 / 0.9 */
    height: 110vh;
}

.blocked-note[b-vnm03m9nuo] {
    padding: 16px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
}

    .blocked-note .btn-row[b-vnm03m9nuo] {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .blocked-note .muted[b-vnm03m9nuo] {
        opacity: .8;
        font-size: 12px;
    }
/* /Components/Pages/Surveys/NPSSurvey.razor.rz.scp.css */
/* =============================================================
   Survey — header, language chips, and misc polish
   Merge these blocks into your existing survey stylesheet.
   ============================================================= */

/* ── Card header ──────────────────────────────────────────── */
.survey-header[b-spjnao4fkr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.25rem;
    text-align: center;
}

.survey-logo[b-spjnao4fkr] {
    max-height: 52px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
    /* Subtle drop shadow so the logo pops on glass backgrounds */
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.18));
}

.survey-title-text[b-spjnao4fkr] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text, #1a1a2e);
    opacity: 0.85;
}

/* ── Language chips ───────────────────────────────────────── */
.survey-lang-chips[b-spjnao4fkr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.lang-chip[b-spjnao4fkr] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1.5px solid transparent;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text, #1a1a2e);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    user-select: none;
}

    .lang-chip:hover:not(:disabled)[b-spjnao4fkr] {
        background: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
    }

    .lang-chip.active[b-spjnao4fkr] {
        background: var(--primary, #4f46e5);
        border-color: var(--primary, #4f46e5);
        color: #fff;
        cursor: default;
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
    }

    .lang-chip:disabled[b-spjnao4fkr] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.lang-flag-img[b-spjnao4fkr] {
    display: block;
    border-radius: 2px;
    /* Subtle shadow so flags pop on both light and dark glass */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.lang-name[b-spjnao4fkr] {
    line-height: 1;
}

/* ── Skeleton additions (logo placeholder) ────────────────── */
.sk-avatar[b-spjnao4fkr] {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
}

/* ── Misc polish ──────────────────────────────────────────── */

/* Smooth question transitions when stepping through */
.survey-stage[b-spjnao4fkr] {
    animation: fadeSlideIn-b-spjnao4fkr 0.2s ease;
}

@keyframes fadeSlideIn-b-spjnao4fkr {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

/* Slightly tighten the progress label */
.survey-progress .muted[b-spjnao4fkr] {
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Give the progress bar fill a gradient instead of flat colour */
.survey-progress .bar .fill[b-spjnao4fkr] {
    background: linear-gradient( 90deg, var(--primary, #4f46e5), color-mix(in srgb, var(--primary, #4f46e5) 70%, #a78bfa) );
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* /Components/Pages/Surveys/SurveyAdmin.razor.rz.scp.css */
/* =============================================================
   NPSSurveyAdmin.razor.css
   ============================================================= */

.nps-admin-head[b-8urwais9vg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

    .nps-admin-head h2[b-8urwais9vg] {
        font-size: 1.15rem;
        font-weight: 700;
    }

.icon-btn[b-8urwais9vg] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 8px;
    font-size: 1.1rem;
}

.icon.spin[b-8urwais9vg] {
    display: inline-block;
    animation: spin-b-8urwais9vg 0.8s linear infinite;
}

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

/* ── Tabs ─────────────────────────────────────────────────── */
.nps-tabs[b-8urwais9vg] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--content-card-border);
    padding-bottom: 0;
}

.nps-tab[b-8urwais9vg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 6px 6px 0 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

    .nps-tab:hover[b-8urwais9vg] {
        color: var(--content-text);
        background: rgba(255,255,255,0.06);
    }

    .nps-tab.active[b-8urwais9vg] {
        color: var(--primary, #4f46e5);
        border-bottom-color: var(--primary, #4f46e5);
        background: rgba(79,70,229,0.06);
    }

.tab-icon[b-8urwais9vg] {
    font-size: 0.9rem;
}

/* ── Toolbar (language toggle above question list) ────────── */
.tab-toolbar[b-8urwais9vg] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lang-toggle-group[b-8urwais9vg] {
    display: flex;
    gap: 4px;
}

.lang-toggle[b-8urwais9vg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--content-card-border);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .lang-toggle:hover[b-8urwais9vg] {
        background: rgba(255,255,255,0.08);
        color: var(--content-text);
    }

    .lang-toggle.active[b-8urwais9vg] {
        background: var(--primary, #4f46e5);
        border-color: var(--primary, #4f46e5);
        color: #fff;
    }

/* ── Question accordion list ──────────────────────────────── */
.q-list[b-8urwais9vg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.q-row[b-8urwais9vg] {
    border: 1px solid var(--content-card-border);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.15s;
    background: var(--content-card-bg);
}

    .q-row:hover[b-8urwais9vg] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .q-row.expanded[b-8urwais9vg] {
        box-shadow: 0 3px 12px rgba(0,0,0,0.12);
    }

    .q-row.disabled[b-8urwais9vg] {
        opacity: 0.5;
    }

.q-row-summary[b-8urwais9vg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    gap: 10px;
}

    .q-row-summary:hover[b-8urwais9vg] {
        background: rgba(255,255,255,0.04);
    }

.q-row-left[b-8urwais9vg] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.q-drag-handle[b-8urwais9vg] {
    font-size: 1rem;
    cursor: grab;
    flex-shrink: 0;
}

.q-badge[b-8urwais9vg] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(79,70,229,0.12);
    color: var(--primary, #4f46e5);
}

    .q-badge.multiple[b-8urwais9vg] {
        background: rgba(16,185,129,0.12);
        color: #10b981;
    }

    .q-badge.text_multi[b-8urwais9vg],
    .q-badge.text_single[b-8urwais9vg] {
        background: rgba(245,158,11,0.12);
        color: #f59e0b;
    }

.q-label-preview[b-8urwais9vg] {
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 480px;
}

.q-row-right[b-8urwais9vg] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.role-pill[b-8urwais9vg] {
    font-size: 0.75rem;
    opacity: 0.8;
    cursor: help;
}

.q-chevron[b-8urwais9vg] {
    font-size: 0.65rem;
    color: var(--text-muted);
    width: 14px;
    text-align: center;
}

/* Expanded body */
.q-row-body[b-8urwais9vg] {
    padding: 0 14px 14px;
    border-top: 1px solid var(--content-card-border);
    animation: fadeSlideIn-b-8urwais9vg 0.15s ease;
}

.q-edit-grid[b-8urwais9vg] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.field[b-8urwais9vg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-label[b-8urwais9vg] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-badge[b-8urwais9vg] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(79,70,229,0.12);
    color: var(--primary, #4f46e5);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.hint-text[b-8urwais9vg] {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Options grid */
.q-options[b-8urwais9vg] {
}

.options-grid[b-8urwais9vg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.opt-item[b-8urwais9vg] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.opt-input-row[b-8urwais9vg] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.q-row-actions[b-8urwais9vg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── Shared input sizing ──────────────────────────────────── */
.input[b-8urwais9vg] {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--content-input-bg);
    border: 1px solid var(--content-input-border);
    color: var(--content-input-text);
    font-size: 0.875rem;
    transition: border-color 0.15s;
}

    .input:focus[b-8urwais9vg] {
        border-color: var(--primary, #4f46e5);
        outline: none;
    }

.input-sm[b-8urwais9vg] {
    padding: 5px 8px;
    font-size: 0.82rem;
}

.input-narrow[b-8urwais9vg] {
    max-width: 68px;
}

/* ── Compact toggle ───────────────────────────────────────── */
.toggle-sm[b-8urwais9vg] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 36px;
    height: 20px;
    cursor: pointer;
}

    .toggle-sm input[b-8urwais9vg] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

    .toggle-sm span[b-8urwais9vg] {
        position: absolute;
        inset: 0;
        border-radius: 999px;
        background: var(--content-card-border);
        transition: background 0.2s;
    }

        .toggle-sm span[b-8urwais9vg]::after {
            content: '';
            position: absolute;
            left: 3px;
            top: 3px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #fff;
            transition: transform 0.2s;
        }

    .toggle-sm input:checked + span[b-8urwais9vg] {
        background: var(--primary, #4f46e5);
    }

        .toggle-sm input:checked + span[b-8urwais9vg]::after {
            transform: translateX(16px);
        }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-sm[b-8urwais9vg] {
    padding: 5px 12px;
    font-size: 0.8rem;
    border-radius: 7px;
}

.btn-ghost[b-8urwais9vg] {
    background: transparent;
    border: 1px solid var(--content-card-border);
}

.btn-danger[b-8urwais9vg] {
    background: rgba(239,68,68,0.12);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.2);
}

    .btn-danger:hover[b-8urwais9vg] {
        background: rgba(239,68,68,0.22);
    }

/* ── Languages tab ────────────────────────────────────────── */
.lang-table[b-8urwais9vg] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.lang-table-head[b-8urwais9vg],
.lang-table-row[b-8urwais9vg] {
    display: grid;
    grid-template-columns: 48px 80px 1fr 70px 56px 120px;
    gap: 8px;
    align-items: center;
    padding: 7px 10px;
}

.lang-table-head[b-8urwais9vg] {
    font-size: 0.73rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--content-card-border);
}

.lang-table-row[b-8urwais9vg] {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}

    .lang-table-row:last-child[b-8urwais9vg] {
        border-bottom: none;
    }

    .lang-table-row:hover[b-8urwais9vg] {
        background: rgba(255,255,255,0.03);
    }

.lang-flag-cell img[b-8urwais9vg] {
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.lang-row-actions[b-8urwais9vg] {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

.lang-add-form[b-8urwais9vg] {
    border-top: 1px solid var(--content-card-border);
    padding-top: 16px;
}

.lang-add-row[b-8urwais9vg] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.field-group[b-8urwais9vg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 80px;
}

    .field-group label[b-8urwais9vg] {
        font-size: 0.73rem;
        color: var(--text-muted);
        font-weight: 500;
    }

.self-end[b-8urwais9vg] {
    align-self: flex-end;
}

/* ── Settings tab ─────────────────────────────────────────── */
.settings-section[b-8urwais9vg] {
}

.settings-group[b-8urwais9vg] {
    border: 1px solid var(--content-card-border);
    border-radius: 10px;
    overflow: hidden;
}

.settings-group-head[b-8urwais9vg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--content-card-border);
}

.settings-group-title[b-8urwais9vg] {
    font-weight: 600;
    font-size: 0.9rem;
}

.settings-rows[b-8urwais9vg] {
    display: flex;
    flex-direction: column;
}

.settings-row[b-8urwais9vg] {
    display: grid;
    grid-template-columns: 72px 1fr 80px;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

    .settings-row:last-child[b-8urwais9vg] {
        border-bottom: none;
    }

.settings-row-lang[b-8urwais9vg] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Alert ────────────────────────────────────────────────── */
.alert[b-8urwais9vg] {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
}

.alert-danger[b-8urwais9vg] {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.2);
}

/* ── Misc helpers ─────────────────────────────────────────── */
.mono[b-8urwais9vg] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85em;
}

.muted[b-8urwais9vg] {
    color: var(--text-muted);
}

.small[b-8urwais9vg] {
    font-size: 0.82rem;
}

.mt-1[b-8urwais9vg] {
    margin-top: 4px;
}

.mt-2[b-8urwais9vg] {
    margin-top: 8px;
}

.mt-3[b-8urwais9vg] {
    margin-top: 16px;
}

.mt-4[b-8urwais9vg] {
    margin-top: 24px;
}

.mb-2[b-8urwais9vg] {
    margin-bottom: 8px;
}

.mb-3[b-8urwais9vg] {
    margin-bottom: 16px;
}

.ml-1[b-8urwais9vg] {
    margin-left: 4px;
}

.va-middle[b-8urwais9vg] {
    vertical-align: middle;
}

@keyframes fadeSlideIn-b-8urwais9vg {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 700px) {
    .q-edit-grid[b-8urwais9vg] {
        grid-template-columns: 1fr;
    }

    .q-label-preview[b-8urwais9vg] {
        max-width: 200px;
    }

    .lang-table-head[b-8urwais9vg],
    .lang-table-row[b-8urwais9vg] {
        grid-template-columns: 36px 64px 1fr 60px 40px 90px;
        gap: 5px;
    }

    .settings-row[b-8urwais9vg] {
        grid-template-columns: 56px 1fr 72px;
    }

    .lang-add-row[b-8urwais9vg] {
        flex-direction: column;
    }
}


/* Settings sub-tabs: a bit tighter than main tabs */
.nps-tabs.sub .nps-tab[b-8urwais9vg] {
    padding: 8px 12px;
    font-size: 0.95rem;
}

/* Text & Labels layout */
.settings-section .settings-group[b-8urwais9vg] {
    border-radius: 14px;
    padding: 14px;
}

.settings-rows[b-8urwais9vg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

/* Meta rows: label/hint on left, input/save on right */
.meta-row[b-8urwais9vg] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 14px;
    align-items: start;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}

.meta-row-title[b-8urwais9vg] {
    font-weight: 600;
}

.meta-row-hint[b-8urwais9vg] {
    margin-top: 4px;
    font-size: 0.85rem;
    opacity: 0.75;
    line-height: 1.25rem;
}

.meta-row-edit[b-8urwais9vg] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: start;
}

.meta-input[b-8urwais9vg] {
    min-height: 38px;
}

.meta-save[b-8urwais9vg] {
    white-space: nowrap;
    height: 38px;
    align-self: start;
}

/* divider */
.hr[b-8urwais9vg] {
    height: 1px;
    background: rgba(255,255,255,0.08);
}

/* Make it responsive */
@media (max-width: 900px) {
    .meta-row[b-8urwais9vg] {
        grid-template-columns: 1fr;
    }

    .meta-row-edit[b-8urwais9vg] {
        grid-template-columns: 1fr;
    }

    .meta-save[b-8urwais9vg] {
        width: 100%;
    }
}
/* /Components/Pages/Surveys/SurveyInsights.razor.rz.scp.css */
/* ===== Survey insights ===== */

.wrap[b-8r4he7a775] {
    padding: 16px 18px 28px;
    max-width: 1600px;
    margin: 0 auto;
}

.header[b-8r4he7a775] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

h1[b-8r4he7a775] {
    margin: 0 0 4px;
    font-size: 24px;
}

.muted[b-8r4he7a775] {
    opacity: .85;
}

.toolbar[b-8r4he7a775] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ----- cards ----- */
.card[b-8r4he7a775] {
    border: 1px solid var(--surface-strong);
    border-radius: 14px;
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
}

.card-title[b-8r4he7a775] {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--content-text-muted);
}

.card-sub[b-8r4he7a775] {
    color: var(--content-text-muted);
    font-size: 12px;
    margin-top: 8px;
}

/* ----- filters ----- */
.filters[b-8r4he7a775] {
    margin-bottom: 14px;
}

.filters-grid[b-8r4he7a775] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    align-items: end;
}

.f .lbl[b-8r4he7a775] {
    font-size: 12px;
    opacity: .85;
    margin-bottom: 6px;
}

.f input[b-8r4he7a775], .f select[b-8r4he7a775] {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background-color: var(--content-card-bg, #14162a);
    color: var(--content-text, #fff);
    outline: none;
}

/* native option list inherits its own colors — pin them to the dark surface
   so we never get white-on-white in the dropdown popup */
.f select option[b-8r4he7a775] {
    background-color: var(--content-card-bg, #14162a);
    color: var(--content-text, #fff);
}

.quick[b-8r4he7a775] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn[b-8r4he7a775] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: var(--content-text);
    cursor: pointer;
}

    .btn:disabled[b-8r4he7a775] {
        opacity: .5;
        cursor: not-allowed;
    }

.btn-ghost[b-8r4he7a775] {
    background: transparent;
}

.pill-error[b-8r4he7a775] {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    background: #3b1d27;
    color: #ff94a8;
    border: 1px solid #6b273c;
}

/* ----- summary strip ----- */
.summary[b-8r4he7a775] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

@media (max-width: 1100px) {
    .summary[b-8r4he7a775] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.kpi[b-8r4he7a775] {
    font-size: 34px;
    font-weight: 800;
    padding: 6px 0 2px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

    .kpi.small[b-8r4he7a775] {
        font-size: 20px;
    }

/* ----- question grid ----- */
.qgrid[b-8r4he7a775] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

@media (max-width: 900px) {
    .qgrid[b-8r4he7a775] {
        grid-template-columns: 1fr;
    }
}

.span-2[b-8r4he7a775] {
    grid-column: 1 / -1;
}

.qcard[b-8r4he7a775] {
    display: flex;
    flex-direction: column;
}

.qhead[b-8r4he7a775] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.qlabel[b-8r4he7a775] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.qsub[b-8r4he7a775] {
    font-size: 12px;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.qtag[b-8r4he7a775] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.05);
    font-size: 11px;
    font-weight: 600;
}

/* role-gated question marker */
.role-gate[b-8r4he7a775] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in oklab, var(--warning, #f0a35e) 85%, #fff);
    border: 1px solid color-mix(in oklab, var(--warning, #f0a35e) 45%, rgba(255,255,255,0.12));
    background: color-mix(in oklab, var(--warning, #f0a35e) 14%, rgba(255,255,255,0.02));
}

/* segmented view switcher */
.qswitch[b-8r4he7a775] {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 3px;
    gap: 2px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.18);
}

.seg[b-8r4he7a775] {
    border: 0;
    background: transparent;
    color: var(--content-text-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

    .seg:hover[b-8r4he7a775] {
        color: var(--content-text);
    }

    .seg.active[b-8r4he7a775] {
        background: color-mix(in oklab, var(--accent, #7aa2ff) 28%, transparent);
        color: var(--content-text);
    }

.qbody[b-8r4he7a775] {
    margin-top: 6px;
    flex: 1 1 auto;
}

/* empty state */
.empty[b-8r4he7a775] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 160px;
    text-align: center;
}

.empty-mark[b-8r4he7a775] {
    font-size: 28px;
    opacity: .35;
}

/* charts */
.chart-wrap[b-8r4he7a775] {
    position: relative;
    height: 280px;
}

    .chart-wrap canvas[b-8r4he7a775] {
        width: 100% !important;
        height: 100% !important;
    }

/* stat grid (Stats / consent rate) — KPI-style tiles */
.statgrid[b-8r4he7a775] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 0 6px;
}

@media (max-width: 520px) {
    .statgrid[b-8r4he7a775] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.stat-cell[b-8r4he7a775] {
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 16px 12px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

/* lead stat (Average / NPS score / consent rate) gets the accent treatment */
.stat-cell.feature[b-8r4he7a775] {
    border-color: color-mix(in oklab, var(--accent, #7aa2ff) 45%, rgba(255,255,255,0.08));
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--accent, #7aa2ff) 16%, transparent),
        rgba(255,255,255,0.02));
}

.stat-val[b-8r4he7a775] {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
}

.stat-cell.feature .stat-val[b-8r4he7a775] {
    color: color-mix(in oklab, var(--accent, #7aa2ff) 75%, var(--content-text, #fff));
}

.stat-lbl[b-8r4he7a775] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-muted);
    margin-top: 6px;
}

/* NPS panel = KPI tiles + proportion bar + legend */
.nps[b-8r4he7a775] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0;
}

.nps-tiles[b-8r4he7a775] {
    padding: 0;
}

.nps-main.good .stat-val[b-8r4he7a775] { color: var(--success, #5ad1a5); }
.nps-main.ok .stat-val[b-8r4he7a775]   { color: var(--warning, #f0a35e); }
.nps-main.bad .stat-val[b-8r4he7a775]  { color: var(--danger, #ff8fa3); }

.nps-main.good[b-8r4he7a775] { border-color: color-mix(in oklab, var(--success, #5ad1a5) 45%, rgba(255,255,255,0.08)); }
.nps-main.bad[b-8r4he7a775]  { border-color: color-mix(in oklab, var(--danger, #ff8fa3) 50%, rgba(255,255,255,0.08)); }

.nps-bar[b-8r4he7a775] {
    display: flex;
    height: 16px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
}

.nps-seg[b-8r4he7a775] { height: 100%; }

    .nps-seg.pro[b-8r4he7a775] { background: var(--success, #5ad1a5); }
    .nps-seg.pas[b-8r4he7a775] { background: var(--warning, #f0a35e); }
    .nps-seg.det[b-8r4he7a775] { background: var(--danger, #ff8fa3); }

.nps-legend[b-8r4he7a775] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 12px;
    color: var(--content-text-muted);
}

.nps-leg[b-8r4he7a775] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dot[b-8r4he7a775] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

    .dot.pro[b-8r4he7a775] { background: var(--success, #5ad1a5); }
    .dot.pas[b-8r4he7a775] { background: var(--warning, #f0a35e); }
    .dot.det[b-8r4he7a775] { background: var(--danger, #ff8fa3); }

/* responses table (excerpt + click-to-expand modal) */
.resp-table-wrap[b-8r4he7a775] {
    max-height: 320px;
    overflow: auto;
}

.resp-table[b-8r4he7a775] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}

    .resp-table th[b-8r4he7a775] {
        position: sticky;
        top: 0;
        text-align: left;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--content-text-muted);
        font-weight: 600;
        padding: 8px 10px;
        background: var(--content-card-bg, #14162a);
        border-bottom: 1px solid rgba(255,255,255,0.10);
    }

    .resp-table td[b-8r4he7a775] {
        padding: 8px 10px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        vertical-align: top;
    }

.resp-table tr.clickable[b-8r4he7a775] {
    cursor: pointer;
}

    .resp-table tr.clickable:hover[b-8r4he7a775] {
        background: rgba(255,255,255,0.04);
    }

.rt-when[b-8r4he7a775] {
    white-space: nowrap;
    color: var(--content-text-muted);
    width: 92px;
}

.rt-co[b-8r4he7a775], .rt-who[b-8r4he7a775] {
    width: 22%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--content-text-muted);
}

.rt-text[b-8r4he7a775] {
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* table search + sortable headers */
.resp-tools[b-8r4he7a775] {
    margin-bottom: 8px;
}

.resp-search[b-8r4he7a775] {
    width: 100%;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background-color: rgba(255,255,255,0.04);
    color: var(--content-text, #fff);
    outline: none;
    font-size: 13px;
}

th.sortable[b-8r4he7a775] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

    th.sortable:hover[b-8r4he7a775] {
        color: var(--content-text, #fff);
    }

    th.sortable.sort-asc[b-8r4he7a775]::after { content: " ▲"; font-size: 9px; opacity: .8; }
    th.sortable.sort-desc[b-8r4he7a775]::after { content: " ▼"; font-size: 9px; opacity: .8; }

/* raw-data disclosure */
.data-discl[b-8r4he7a775] {
    margin-top: 10px;
}

.data-toggle[b-8r4he7a775] {
    background: transparent;
    border: 0;
    color: var(--content-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
}

    .data-toggle:hover[b-8r4he7a775] {
        color: var(--content-text, #fff);
    }

.data-table[b-8r4he7a775] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 6px;
}

    .data-table th[b-8r4he7a775] {
        text-align: left;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--content-text-muted);
        font-weight: 600;
        padding: 6px 10px;
        border-bottom: 1px solid rgba(255,255,255,0.10);
    }

    .data-table td[b-8r4he7a775] {
        padding: 6px 10px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .data-table .num[b-8r4he7a775] {
        text-align: right;
        white-space: nowrap;
    }

/* loading affordance */
.loading-bar[b-8r4he7a775] {
    height: 3px;
    border-radius: 999px;
    margin: 0 0 12px;
    background: transparent;
    overflow: hidden;
}

    .loading-bar.on[b-8r4he7a775] {
        background: rgba(255,255,255,0.08);
    }

    .loading-bar.on[b-8r4he7a775]::after {
        content: "";
        display: block;
        height: 100%;
        width: 40%;
        border-radius: 999px;
        background: var(--accent, #7aa2ff);
        animation: indeterminate-b-8r4he7a775 1.1s ease-in-out infinite;
    }

@keyframes indeterminate-b-8r4he7a775 {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(160%); }
    100% { transform: translateX(260%); }
}

.dim[b-8r4he7a775] {
    opacity: .5;
    transition: opacity .15s ease;
    pointer-events: none;
}

/* response modal (svm-* names avoid the global Bootstrap .modal styles) */
.svm-backdrop[b-8r4he7a775] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
    z-index: 98;
}

.pick-survey[b-8r4he7a775] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 220px;
    text-align: center;
    color: var(--content-text-muted);
}

    .pick-survey .empty-mark[b-8r4he7a775] {
        font-size: 30px;
        opacity: .5;
    }

.svm[b-8r4he7a775] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, 92vw);
    height: auto;
    max-height: 80vh;
    z-index: 99;
    display: flex;
    flex-direction: column;
    background: var(--content-card-bg, #14162a);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}

.svm.svm-wide[b-8r4he7a775] {
    width: min(880px, 94vw);
}

.svm-head[b-8r4he7a775] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

.svm-title[b-8r4he7a775] {
    font-weight: 700;
}

.svm-body[b-8r4he7a775] {
    padding: 16px;
    overflow: auto;
}

.svm-meta[b-8r4he7a775] {
    font-size: 12px;
    margin-bottom: 10px;
}

.svm-text[b-8r4he7a775] {
    white-space: pre-wrap;
    line-height: 1.5;
}

.icon-btn[b-8r4he7a775] {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 15px;
}

    .icon-btn:hover[b-8r4he7a775] {
        background: rgba(255,255,255,0.08);
    }

/* skeleton */
.skeleton[b-8r4he7a775] {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: color-mix(in oklab, #fff 8%, transparent);
}

    .skeleton[b-8r4he7a775]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.10), rgba(255,255,255,0));
        transform: translateX(-100%);
        animation: shimmer-b-8r4he7a775 1.2s linear infinite;
    }

.skeleton.line[b-8r4he7a775] {
    height: 14px;
}

@keyframes shimmer-b-8r4he7a775 {
    100% { transform: translateX(100%); }
}

input[type="date"][b-8r4he7a775]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.85;
    cursor: pointer;
}
/* /Components/Pages/Tickets.razor.rz.scp.css */
/* My Tickets — inbox / master-detail layout.
   Reuses global .btn / .search-box / .pill-error / .skeleton; everything else is local. */

.tickets-page[b-16hk5zbp1r] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* The app shell uses min-height (it grows with content), so nothing upstream is a definite
       height. Pin the page to the viewport minus the chrome above it; the inbox then flex-fills
       this and its columns scroll internally. ~9.5rem ≈ topbar + content padding + page toolbar. */
    height: calc(100dvh - 9.5rem);
    min-height: 420px;
}

/* ---- Segmented toggle (scope + tabs) ---- */
.seg[b-16hk5zbp1r] {
    display: inline-flex;
    background: var(--surface);
    border: 1px solid var(--surface-strong);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
}

.seg-btn[b-16hk5zbp1r] {
    border: 0;
    background: transparent;
    color: var(--content-text-muted);
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-size: .85rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.seg-btn.active[b-16hk5zbp1r] { background: var(--accent); color: #fff; }

/* ---- Inbox shell: list + detail ---- */
/* The page content area (.content) has no fixed height, so without a bound here the list would
   grow the whole page. Pin the inbox to the viewport (minus the app chrome above it) and let each
   column scroll internally instead. */
.inbox[b-16hk5zbp1r] {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 1rem;
    flex: 1;       /* fills .tickets-page's definite height */
    min-height: 0; /* lets the grid columns shrink so their overflow:auto engages */
    position: relative; /* anchor for the loading overlay */
}

/* ---- Prominent loading overlay (covers both columns while fetching) ---- */
.inbox-loading[b-16hk5zbp1r] {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-radius: var(--radius-lg, 12px);
    background: color-mix(in srgb, var(--content-bg) 78%, transparent);
    backdrop-filter: blur(2px);
}
.inbox-loading-text[b-16hk5zbp1r] { color: var(--content-text-muted); font-size: .95rem; }
.ticket-spinner[b-16hk5zbp1r] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid color-mix(in srgb, var(--content-text-muted) 25%, transparent);
    border-top-color: var(--accent);
    animation: ticket-spin-b-16hk5zbp1r .8s linear infinite;
}
@keyframes ticket-spin-b-16hk5zbp1r { to { transform: rotate(360deg); } }

.inbox-list[b-16hk5zbp1r] {
    border: 1px solid var(--surface-strong);
    border-radius: var(--radius-lg, 12px);
    background: var(--surface);
    overflow-y: auto;
    overflow-x: hidden; /* never scroll sideways — long content wraps/ellipses instead */
    min-height: 0;
}

/* ---- Subtle, thin scrollbars for the inbox panes ---- */
.inbox-list[b-16hk5zbp1r],
.inbox-detail .detail-body[b-16hk5zbp1r] {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: color-mix(in srgb, var(--content-text-muted) 35%, transparent) transparent;
}
.inbox-list[b-16hk5zbp1r]::-webkit-scrollbar,
.inbox-detail .detail-body[b-16hk5zbp1r]::-webkit-scrollbar {
    width: 8px;
}
.inbox-list[b-16hk5zbp1r]::-webkit-scrollbar-track,
.inbox-detail .detail-body[b-16hk5zbp1r]::-webkit-scrollbar-track {
    background: transparent;
}
.inbox-list[b-16hk5zbp1r]::-webkit-scrollbar-thumb,
.inbox-detail .detail-body[b-16hk5zbp1r]::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--content-text-muted) 28%, transparent);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.inbox-list:hover[b-16hk5zbp1r]::-webkit-scrollbar-thumb,
.inbox-detail .detail-body:hover[b-16hk5zbp1r]::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--content-text-muted) 45%, transparent);
    background-clip: padding-box;
}

/* ---- List items ---- */
.li-item[b-16hk5zbp1r] {
    padding: .65rem .8rem;
    border-bottom: 1px solid var(--surface-strong);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    border-left: 3px solid transparent;
    min-width: 0; /* allow children to shrink instead of forcing horizontal overflow */
}

.li-item:hover[b-16hk5zbp1r] { background: var(--surface-strong); }
.li-item.active[b-16hk5zbp1r] {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    border-left-color: var(--accent);
}

.li-top[b-16hk5zbp1r] { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.li-top .mono[b-16hk5zbp1r] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-time[b-16hk5zbp1r] { margin-left: auto; font-size: .72rem; color: var(--content-text-muted); flex: none; }
.li-subj[b-16hk5zbp1r] { font-weight: 600; color: var(--content-text); line-height: 1.3; overflow-wrap: anywhere; }
.li-bot[b-16hk5zbp1r] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.li-company[b-16hk5zbp1r] { font-size: .72rem; color: var(--content-text-muted); }
.li-contact[b-16hk5zbp1r] {
    font-size: .72rem;
    color: var(--content-text-muted);
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* sentiment emoji for a reviewed ticket — pushed to the bottom-right, under the date */
.li-csat[b-16hk5zbp1r] { margin-left: auto; font-size: 1.05rem; line-height: 1; }

.li-empty[b-16hk5zbp1r] { padding: 1.5rem; text-align: center; }

/* ---- Detail / compose pane ---- */
.inbox-detail[b-16hk5zbp1r] {
    border: 1px solid var(--surface-strong);
    border-radius: var(--radius-lg, 12px);
    background: var(--content-bg);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.detail-body[b-16hk5zbp1r] { padding: 1rem 1.25rem; overflow-y: auto; flex: 1; min-height: 0; }
.detail-subject[b-16hk5zbp1r] { margin: 0 0 .75rem; }

.detail-empty[b-16hk5zbp1r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
    padding: 2rem;
}
.detail-empty-icon[b-16hk5zbp1r] { font-size: 2.5rem; opacity: .5; }

/* ---- Breadcrumb ---- */
.crumb[b-16hk5zbp1r] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--surface-strong);
    background: var(--surface);
}
.crumb-back[b-16hk5zbp1r] {
    border: 1px solid var(--surface-strong);
    background: var(--content-bg);
    color: var(--content-text);
    border-radius: 8px;
    width: 28px; height: 28px;
    font-size: 1.1rem; line-height: 1;
    cursor: pointer;
    display: none; /* shown on mobile; on desktop it doubles as a close affordance */
}
.crumb-trail[b-16hk5zbp1r] { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--content-text-muted); }
.crumb-seg[b-16hk5zbp1r] { color: var(--content-text); }
.crumb-sep[b-16hk5zbp1r] { opacity: .5; }

/* ---- Summary grid ---- */
.summary-grid[b-16hk5zbp1r] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem 1.25rem;
    margin-bottom: 1rem;
}
.field .flabel[b-16hk5zbp1r] { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--content-text-muted); }
.field .fvalue[b-16hk5zbp1r] { color: var(--content-text); }

/* ---- Detail tabs (Original request / Updates) — same segmented control as the toolbar, centered ---- */
.detail-tabs[b-16hk5zbp1r] {
    display: flex;
    justify-content: center;
    padding-bottom: 1rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--surface-strong);
}
.seg-count[b-16hk5zbp1r] {
    font-size: .72rem;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--content-text-muted) 25%, transparent);
    color: inherit;
}
.seg-btn.active .seg-count[b-16hk5zbp1r] { background: rgba(255, 255, 255, .28); }

.prose[b-16hk5zbp1r] { white-space: pre-wrap; word-break: break-word; color: var(--content-text); }

/* ---- Timeline ---- */
.timeline[b-16hk5zbp1r] { display: flex; flex-direction: column; gap: .9rem; margin-top: .5rem; }
.entry[b-16hk5zbp1r] {
    border: 1px solid color-mix(in srgb, var(--content-text-muted) 28%, transparent);
    border-radius: var(--radius-lg, 12px);
    padding: .6rem .8rem;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.entry-you[b-16hk5zbp1r] {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    margin-left: 1.5rem;
}
.entry-agent[b-16hk5zbp1r] { margin-right: 1.5rem; }
.entry-head[b-16hk5zbp1r] { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.entry-author[b-16hk5zbp1r] { font-weight: 600; color: var(--content-text); }
.entry-time[b-16hk5zbp1r] { font-size: .75rem; color: var(--content-text-muted); white-space: nowrap; }
.entry-system[b-16hk5zbp1r] { font-style: italic; color: var(--content-text-muted); font-size: .85rem; }

/* ---- Reply box (pinned to the bottom of the pane) ---- */
.reply-box[b-16hk5zbp1r] {
    border-top: 1px solid var(--surface-strong);
    padding: .8rem 1.25rem;
    background: var(--surface);
}
.reply-actions[b-16hk5zbp1r] { display: flex; justify-content: flex-end; margin-top: .5rem; }

/* ---- Inputs (reply + compose) ---- */
.reply-input[b-16hk5zbp1r], .form-input[b-16hk5zbp1r] {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--surface-strong);
    border-radius: 8px;
    color: var(--content-text);
    padding: .5rem .65rem;
    font: inherit;
}
.inbox-detail .form-input[b-16hk5zbp1r] { background: var(--content-bg); }

/* Native <select> — styled like SelfService's: structural only, NO explicit background/color.
   color-scheme (emitted on :root from the theme) drives the native control + its options popup,
   so it stays readable on any theme without fighting the OS preference. */
.form-select[b-16hk5zbp1r] {
    width: 100%;
    border: 1px solid var(--surface-strong);
    border-radius: 8px;
    padding: .5rem .65rem;
    font: inherit;
}

.form-label[b-16hk5zbp1r] { display: block; font-size: .8rem; color: var(--content-text-muted); margin: .75rem 0 .25rem; }
.form-label:first-child[b-16hk5zbp1r] { margin-top: 0; }
.detail-actions[b-16hk5zbp1r] { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }

/* ---- Shared chrome: badges / pills / dots ---- */
.mono[b-16hk5zbp1r] { font-variant-numeric: tabular-nums; color: var(--content-text-muted); white-space: nowrap; }

.badge[b-16hk5zbp1r] { font-size: .7rem; padding: 1px 8px; border-radius: 999px; line-height: 1.6; }
.badge-warn[b-16hk5zbp1r] { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.badge-bad[b-16hk5zbp1r]  { background: color-mix(in srgb, var(--danger) 20%, transparent);  color: var(--danger); }
.badge-review[b-16hk5zbp1r] { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }

/* small "needs review" dot on the Feedback tab pill */
.seg-dot[b-16hk5zbp1r] {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
}
.seg-btn.active .seg-dot[b-16hk5zbp1r] { background: #fff; }

/* ---- CSAT: inline review-giver + submitted result ---- */
.csat-giver[b-16hk5zbp1r], .csat-result[b-16hk5zbp1r] { display: flex; flex-direction: column; gap: .6rem; }
.csat-q[b-16hk5zbp1r] { font-size: .82rem; color: var(--content-text-muted); margin-top: .3rem; }

.csat-sentiments[b-16hk5zbp1r] { display: flex; gap: .6rem; flex-wrap: wrap; }
.csat-sent-btn[b-16hk5zbp1r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 84px;
    padding: .6rem .8rem;
    border: 1px solid var(--surface-strong);
    border-radius: var(--radius-lg, 12px);
    background: var(--surface);
    color: var(--content-text);
    cursor: pointer;
    font-size: .82rem;
}
.csat-sent-btn:hover[b-16hk5zbp1r] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.csat-sent-btn.active[b-16hk5zbp1r] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.csat-emoji[b-16hk5zbp1r] { font-size: 1.5rem; line-height: 1; }
.csat-sentiment[b-16hk5zbp1r] { display: flex; align-items: center; gap: .5rem; }
.csat-sentiment .csat-emoji[b-16hk5zbp1r] { font-size: 1.75rem; }
.csat-sentiment-label[b-16hk5zbp1r] { font-weight: 600; }

.csat-tags[b-16hk5zbp1r] { display: flex; flex-wrap: wrap; gap: 6px; }
.csat-tag[b-16hk5zbp1r] {
    border: 1px solid var(--surface-strong);
    background: var(--surface);
    color: var(--content-text-muted);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: .8rem;
    cursor: pointer;
}
.csat-tag.is-on[b-16hk5zbp1r] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--content-text);
}
.csat-result .csat-tag[b-16hk5zbp1r] { cursor: default; }
.csat-actions[b-16hk5zbp1r] { display: flex; justify-content: flex-end; margin-top: .4rem; }
.csat-submitted[b-16hk5zbp1r] { font-size: .78rem; margin-top: .2rem; }

.state-pill[b-16hk5zbp1r] {
    display: inline-block; font-size: .75rem; padding: 2px 10px;
    border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.st-new[b-16hk5zbp1r]      { background: color-mix(in srgb, var(--accent) 16%, transparent);  color: var(--accent); }
.st-open[b-16hk5zbp1r]     { background: color-mix(in srgb, var(--accent) 16%, transparent);  color: var(--accent); }
.st-waitcust[b-16hk5zbp1r] { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.st-waitint[b-16hk5zbp1r]  { background: var(--surface-strong); color: var(--content-text-muted); }
.st-done[b-16hk5zbp1r]     { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.st-neutral[b-16hk5zbp1r]  { background: var(--surface-strong); color: var(--content-text-muted); }

.prio-dot[b-16hk5zbp1r] { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.p-crit[b-16hk5zbp1r] { background: var(--danger); }
.p-high[b-16hk5zbp1r] { background: var(--warning); }
.p-med[b-16hk5zbp1r]  { background: var(--accent); }
.p-low[b-16hk5zbp1r]  { background: var(--content-text-muted); }
.p-none[b-16hk5zbp1r] { background: transparent; border: 1px solid var(--surface-strong); }

/* ---- Mobile: detail slides over the list ---- */
@media (max-width: 800px) {
    .inbox[b-16hk5zbp1r] { grid-template-columns: 1fr; position: relative; }

    .inbox-detail[b-16hk5zbp1r] {
        position: absolute;
        inset: 0;
        transform: translateX(100%);
        transition: transform .22s ease;
        z-index: 2;
    }
    .inbox.has-selection .inbox-detail[b-16hk5zbp1r] { transform: translateX(0); }
    .inbox.has-selection .inbox-list[b-16hk5zbp1r] { visibility: hidden; }

    .crumb-back[b-16hk5zbp1r] { display: inline-flex; align-items: center; justify-content: center; }
}
/* /Components/Pages/UsageInsights.razor.rz.scp.css */
/* ---------- Layout (mirrors the dashboard pages) ---------- */
.dash[b-9dojpks2v4] {
    padding: 16px 18px 28px;
    background: transparent;
}

.dash-header[b-9dojpks2v4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

h1[b-9dojpks2v4] {
    margin: 0 0 4px;
    font-size: 24px;
}

.grid[b-9dojpks2v4] {
    display: grid;
    gap: 14px;
}

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

.grid-4[b-9dojpks2v4] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width:1100px) {
    .grid-4[b-9dojpks2v4] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:720px) {
    .grid-2[b-9dojpks2v4], .grid-4[b-9dojpks2v4] {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

section[b-9dojpks2v4] {
    margin-top: 14px;
}

/* base background/border/colour comes from the global ".content .card" rule */
.card[b-9dojpks2v4] {
    border-radius: 14px;
    padding: 14px 16px;
    overflow: hidden;
}

.card-title[b-9dojpks2v4] {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--content-text-muted);
    margin-bottom: 8px;
}

.filters[b-9dojpks2v4] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.select-wrap[b-9dojpks2v4] {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.select-wrap .label[b-9dojpks2v4] {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--content-text-muted);
}

.table-wrap[b-9dojpks2v4] {
    overflow: auto;
}

/* Per-customer table — themed explicitly so text stays readable on the card. */
.table[b-9dojpks2v4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--content-text);
}

    .table thead th[b-9dojpks2v4] {
        text-align: left;
        padding: 9px 12px;
        background: var(--content-table-header-bg);
        color: var(--content-table-header-text);
        border-bottom: 1px solid var(--content-border);
        white-space: nowrap;
    }

    .table tbody td[b-9dojpks2v4] {
        padding: 9px 12px;
        color: var(--content-text);
        border-bottom: 1px solid var(--content-border);
        white-space: nowrap;
    }

    .table tbody tr:hover[b-9dojpks2v4] {
        background: var(--content-table-row-hover);
    }

.footer[b-9dojpks2v4] {
    margin-top: 12px;
    font-size: 12px;
}

/* ---------- Usage-specific visuals ---------- */
.usage-controls[b-9dojpks2v4] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

    .usage-controls select[b-9dojpks2v4] {
        padding: 6px 10px;
        border-radius: 8px;
        background: var(--content-input-bg);
        border: 1px solid var(--content-input-border);
        color: var(--content-input-text);
    }

.usage-check[b-9dojpks2v4] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .85rem;
    color: var(--content-text);
    cursor: pointer;
    user-select: none;
    align-self: flex-end;
    padding-bottom: 6px;
}

    .usage-check input[b-9dojpks2v4] {
        accent-color: var(--accent);
        width: 15px;
        height: 15px;
        cursor: pointer;
    }

.usage-empty[b-9dojpks2v4] {
    color: var(--content-text-muted);
    padding: 18px 2px;
}

/* Daily activity bars */
.usage-legend[b-9dojpks2v4] {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: .8rem;
    color: var(--content-text-muted);
    margin-bottom: 4px;
}

    .usage-legend .dot[b-9dojpks2v4] {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 3px;
        margin-right: 6px;
        vertical-align: middle;
    }

.usage-bars[b-9dojpks2v4] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 168px;
    padding: 8px 2px 0;
    overflow-x: auto;
}

.usage-day[b-9dojpks2v4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 14px;
    flex: 1;
}

.usage-day-bars[b-9dojpks2v4] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 140px;
    width: 100%;
    justify-content: center;
}

.usage-bar[b-9dojpks2v4] {
    width: 7px;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}

    .usage-bar.views[b-9dojpks2v4] {
        background: var(--accent);
    }

    .usage-bar.actions[b-9dojpks2v4] {
        background: var(--accent-2);
    }

.usage-day-label[b-9dojpks2v4] {
    font-size: .62rem;
    color: var(--content-text-muted);
    white-space: nowrap;
}

/* Horizontal bars (top pages / actions) */
.usage-hbar-row[b-9dojpks2v4] {
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr auto;
    gap: 10px;
    align-items: center;
    margin: 7px 0;
}

.usage-hbar-label[b-9dojpks2v4] {
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usage-hbar-track[b-9dojpks2v4] {
    background: var(--content-table-row-hover, rgba(125,125,125,.15));
    border-radius: 6px;
    height: 14px;
    overflow: hidden;
}

.usage-hbar-fill[b-9dojpks2v4] {
    height: 100%;
    background: var(--accent);
    border-radius: 6px;
}

    .usage-hbar-fill.alt[b-9dojpks2v4] {
        background: var(--accent-2);
    }

.usage-hbar-val[b-9dojpks2v4] {
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    color: var(--content-text-muted);
}

/* Drillable page rows */
.usage-hbar-row.drillable[b-9dojpks2v4] {
    cursor: pointer;
    border-radius: 8px;
    padding: 4px 6px;
    margin: 3px -6px;
    transition: background .1s ease;
}

    .usage-hbar-row.drillable:hover[b-9dojpks2v4] {
        background: var(--content-table-row-hover, rgba(125,125,125,.12));
    }

    .usage-hbar-row.drillable.active[b-9dojpks2v4] {
        background: color-mix(in oklab, var(--accent) 14%, transparent);
    }

.usage-drill-hint[b-9dojpks2v4] {
    margin-top: 10px;
    font-size: .72rem;
    font-style: italic;
    color: var(--content-text-muted);
    opacity: .6;
}

.usage-drill-head[b-9dojpks2v4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.usage-drill-close[b-9dojpks2v4] {
    background: transparent;
    border: 0;
    color: var(--content-text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
}

    .usage-drill-close:hover[b-9dojpks2v4] {
        background: var(--content-table-row-hover, rgba(125,125,125,.15));
        color: var(--content-text);
    }
/* /Components/Pages/Users.razor.rz.scp.css */

/* Toggle switch */
.toggle[b-0vpzy0pdpr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

    .toggle input[b-0vpzy0pdpr] {
        display: none;
    }

    .toggle .slider[b-0vpzy0pdpr] {
        width: 42px;
        height: 24px;
        border-radius: 999px;
        position: relative;
        background: color-mix(in oklab,var(--glass-1) 80%, transparent);
        border: 1px solid var(--glass-border);
        display: inline-block;
        vertical-align: middle;
    }

        .toggle .slider[b-0vpzy0pdpr]::after {
            content: "";
            width: 18px;
            height: 18px;
            border-radius: 50%;
            position: absolute;
            top: 2px;
            left: 3px;
            background: linear-gradient(180deg,var(--accent), var(--accent-2));
            transition: transform .2s ease;
        }

    .toggle input:checked + .slider[b-0vpzy0pdpr] {
        border-color: var(--glass-border-strong);
        background: color-mix(in oklab, var(--accent-2) 22%, transparent);
    }

        .toggle input:checked + .slider[b-0vpzy0pdpr]::after {
            transform: translateX(18px);
        }

    .toggle .label[b-0vpzy0pdpr] {
        font-size: .9rem;
        color: var(--content-text);
    }

/* Table shell with vertical scroll + sticky header */
.table-wrap[b-0vpzy0pdpr] {
    overflow: auto;
    border-radius: var(--radius-lg);
    padding: 0;
}

.users-grid[b-0vpzy0pdpr] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed; /* allows column widths */
}

    .users-grid thead th[b-0vpzy0pdpr] {
        position: sticky;
        top: 0;
        z-index: 2;
        border-bottom: 1px solid var(--glass-border);
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
    }

    .users-grid tbody td[b-0vpzy0pdpr] {
        padding: 10px 12px;
        border-bottom: 1px solid color-mix(in oklab, var(--glass-border) 60%, transparent);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .users-grid tbody tr:hover[b-0vpzy0pdpr] {
        background: color-mix(in oklab, var(--glass-1) 35%, transparent);
    }

.empty[b-0vpzy0pdpr] {
    text-align: center;
    color: var(--content-text-muted);
    padding: 24px;
}

/* Sort arrow */
.sort[b-0vpzy0pdpr] {
    margin-left: 6px;
    opacity: .7;
}

/* License pills */
.pill[b-0vpzy0pdpr] {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px;
    border-radius: 999px;
    font-size: .75rem;
    background: var(--accent);
    color: var(--text-on-accent);
    white-space: nowrap;
}

.pill-empty[b-0vpzy0pdpr] {
    background: var(--neutral);
}

/* Status */
.status.enabled[b-0vpzy0pdpr] {
    color: var(--status-enabled);
    font-weight: 600;
}

.status.disabled[b-0vpzy0pdpr] {
    color: var(--status-disabled);
    font-weight: 600;
}

/* Column resizers */
.col-resizer[b-0vpzy0pdpr] {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
}

.users-grid thead th[b-0vpzy0pdpr] {
    position: sticky;
}
/* ensures resizer sticks too */
.users-grid thead th[b-0vpzy0pdpr] {
    position: sticky;
    padding-right: 16px;
}
/* space for handle */

.users-kpi-grid[b-0vpzy0pdpr] {
    grid-template-columns: repeat(4, minmax(0, 3fr));
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.user-menu[b-0vpzy0pdpr] {
    position: relative;
}
.user-pill[b-0vpzy0pdpr] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--glass-border);
    background: color-mix(in oklab, var(--glass-1) 85%, transparent);
    color: var(--text);
    border-radius: 999px;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
}
.chev[b-0vpzy0pdpr] {
    opacity: .85;
    transition: transform 140ms ease;
}

    .chev.open[b-0vpzy0pdpr] {
        transform: rotate(180deg);
    }

.menu-popover[b-0vpzy0pdpr] {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 220px;
    z-index: 50;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: var(--bg1);
    box-shadow: var(--shadow);
    padding: 0.35rem;
}

.menu-item[b-0vpzy0pdpr] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.6rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    border: 1px solid transparent;
}

    .menu-item:hover[b-0vpzy0pdpr] {
        background: color-mix(in oklab, var(--glass-1) 85%, transparent);
        border-color: var(--glass-border);
    }

    .menu-item.danger[b-0vpzy0pdpr] {
        color: color-mix(in oklab, var(--danger) 75%, var(--text));
    }

.menu-backdrop[b-0vpzy0pdpr] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}