/* ═══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS. Rocateq CSS Variables
═══════════════════════════════════════════════════════════════════ */
:root {
    /* brand */
    --rq-red: #E22718;
    --rq-red-ink: #B81F13;
    --rq-red-soft: #FDEAE8;
    --rq-blue: #1C69D4;
    --rq-blue-ink: #1556B0;
    --rq-blue-soft: #E8F0FB;

    /* neutrals — warm */
    --rq-ink: #17181C;
    --rq-body: #45474E;
    --rq-muted: #8B8D94;
    --rq-faint: #B4B6BC;
    --rq-bg: #F2F2EF;
    --rq-bg-deep: #EAEAE6;
    --rq-surface: #FFFFFF;
    --rq-line: #E8E8E4;
    --rq-line-strong: #D6D6D1;

    /* status */
    --rq-ok: #0E7E45;
    --rq-ok-soft: #E3F3EA;
    --rq-warn: #A95E04;
    --rq-warn-soft: #FBEFDB;
    --rq-crit: #C42114;
    --rq-crit-soft: #FDE9E7;

    /* shape + rhythm */
    --rq-r: 10px;
    --rq-r-sm: 6px;
    --rq-card-p: 24px;
    --rq-row-h: 48px;
    --rq-cell-py: 13px;
    --rq-fs: 14px;
    --rq-fs-sm: 12.5px;

    /* sidebar / topbar dimensions (consumed by scoped layout css) */
    --rq-rail-w: 68px;
    --rq-panel-w: 226px;
    --rq-sidebar-total: calc(var(--rq-rail-w) + var(--rq-panel-w));
    --rq-topbar-h: 80px;

    /* typography */
    --rq-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --rq-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

    /* shadows */
    --rq-shadow-sm: 0 1px 2px rgba(23, 24, 28, 0.05);
    --rq-shadow-md: 0 2px 8px rgba(23, 24, 28, 0.06), 0 1px 2px rgba(23, 24, 28, 0.05);
    --rq-shadow-pop: 0 12px 32px rgba(23, 24, 28, 0.16), 0 2px 8px rgba(23, 24, 28, 0.08);

    --rq-border-radius: 12px;
    --rq-box-padding: 16px;
    --rq-box-border: 2px;
    --rq-default-border: 1px solid var(--rq-line);
    --rq-bottom-bar-height: 60px;
    --rq-top-bar-extra-content-height: 60px;
    --rq-page-left-padding: 24px;
    --rq-main-page-margin: 24px;

    --rq-body-width: calc(100vw - 343px);
    --rq-body-width-with-scrollbar: calc(100vw - 334px);

    --rq-default-gap: 0.3rem;
    --rq-default-form-gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   2. SHARED UTILITIES
═══════════════════════════════════════════════════════════════════ */

/* ── Material Symbols icon helper ─────────────────────────────────── */
.rq-icon {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
    user-select: none;
}

.rq-icon.fill {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* ── Typography helpers ───────────────────────────────────────────── */
.rq-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--rq-muted);
    font-family: var(--rq-sans);
}

.rq-mono {
    font-family: var(--rq-mono);
}

.rq-h-display {
    font-family: var(--rq-sans);
    font-weight: 600;
    letter-spacing: -0.022em;
}

/* ── Navigation primitives (shared by SideBar utils + NavBar) ─────── */
.rq-nav-group {
    margin-top: 18px;
}

.rq-nav-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 6px;
}

.rq-nav-group-label {
    font-family: var(--rq-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--rq-muted);
}

.rq-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 38px;
    padding: 0 10px;
    border-radius: var(--rq-r-sm);
    color: var(--rq-body);
    font-family: var(--rq-sans);
    font-weight: 500;
    font-size: 13px;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s;
}

.rq-nav-item .rq-icon {
    font-size: 19px;
    color: var(--rq-muted);
    transition: color 0.1s;
}

.rq-nav-item:hover {
    background: var(--rq-bg);
    color: var(--rq-ink);
    text-decoration: none;
}

.rq-nav-item:hover .rq-icon {
    color: var(--rq-body);
}

.rq-nav-item.active {
    background: var(--rq-blue-soft);
    color: var(--rq-blue);
    font-weight: 600;
}

.rq-nav-item.active .rq-icon {
    color: var(--rq-blue);
}

.rq-nav-item.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--rq-blue);
}

.rq-nav-item.disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

.rq-nav-count {
    margin-left: auto;
    font-family: var(--rq-mono);
    font-size: 11px;
    color: var(--rq-muted);
    background: var(--rq-bg);
    border-radius: 99px;
    padding: 2px 7px;
    font-weight: 500;
}

.rq-nav-item.active .rq-nav-count {
    background: rgba(255, 255, 255, 0.7);
    color: var(--rq-blue);
}

.rq-logo-wrapper {
    width: var(--rq-rail-w);
    display: flex;
    justify-content: center;

    img {
        width: 85%;
    }
}

/* ── Card wrapping a data grid (shared across overview pages) ─────── */
/* Use: <div class="rq-card rq-grid-card"> ... <PagedDataGrid /> </div>  */
/* The outer .rq-card provides border/radius/shadow; .rq-grid-card       */
/* strips the inner Radzen grid's duplicate frame and sets header white.  */
.rq-grid-card {
    padding: 0;
    overflow: hidden;
    --rz-grid-header-background-color: var(--rq-surface);
}

.rq-grid-card .rz-data-grid {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* ── Overview page header (title + actions above the data grid) ───── */
.rq-overview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

h1.rq-overview-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--rq-ink);
    margin: 0;
    line-height: 1.2;
    min-height: 36px;
}

.rq-overview-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Page layout helpers ──────────────────────────────────────────── */

.rq-main-page-body {
    width: var(--rq-body-width);
    height: fit-content;
    margin: var(--rq-main-page-margin);
}

.rq-main-page-body .rq-centered-container {
    margin: auto;
}

.rq-page-body {
    flex: 1;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: var(--rz-gap);
    overflow: auto;
    background: var(--rq-bg);
    font-family: var(--rq-sans);
    font-size: var(--rq-fs);
    color: var(--rq-ink);
    -webkit-font-smoothing: antialiased;
}

.rq-page-body * {
    box-sizing: border-box;
}

.rq-split-layout {
    flex: 1;
    display: flex;
    gap: 22px;
    min-height: 0;
    padding: 22px 28px 28px;
    background: var(--rq-bg);
}

.rq-split-left {
    width: 360px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rq-split-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Record header (below topbar, above content) ──────────────────── */
.rq-record-header {
    background: var(--rq-surface);
    border-bottom: 1px solid var(--rq-line);
    padding: 20px 28px 18px;
    flex: none;
    font-family: var(--rq-sans);
    -webkit-font-smoothing: antialiased;
}

.rq-record-header-inner {
    display: flex;
    align-items: center;
    gap: 18px;
}

.rq-record-header-body {
    flex: 1;
    min-width: 0;
}

.rq-record-overline {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--rq-muted);
    margin-bottom: 5px;
}

.rq-record-title {
    font-weight: 600;
    font-size: 25px;
    letter-spacing: -0.022em;
    color: var(--rq-ink);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.rq-record-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: none;
}

/* ── Tab strip ────────────────────────────────────────────────────── */
.rq-tabs {
    background: var(--rq-surface);
    border-bottom: 1px solid var(--rq-line);
    padding: 0 28px;
    display: flex;
    gap: 26px;
    flex: none;
    font-family: var(--rq-sans);
}

.rq-tab {
    padding: 12px 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rq-muted);
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s;
    white-space: nowrap;
    margin-bottom: -1px;
}

.rq-tab:hover {
    color: var(--rq-ink);
    text-decoration: none;
}

.rq-tab.active {
    color: var(--rq-ink);
    border-bottom-color: var(--rq-red);
}

/* ── Cards ────────────────────────────────────────────────────────── */
.rq-card {
    background: var(--rq-surface);
    border: 1px solid var(--rq-line);
    border-radius: var(--rq-r);
    box-shadow: var(--rq-shadow-sm);
    font-family: var(--rq-sans);
}

.rq-card-h {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(var(--rq-card-p) * 0.65) var(--rq-card-p);
    border-bottom: 1px solid var(--rq-line);
    flex: none;
}

.rq-card-h .rq-card-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--rq-ink);
}

.rq-card-b {
    padding: var(--rq-card-p);
}

.rq-card-b.rq-card-b--sm {
    padding: 16px var(--rq-card-p);
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.rq-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--rq-r-sm);
    font-family: var(--rq-sans);
    font-size: 13.5px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: opacity 0.15s;
}

.rq-btn:hover {
    opacity: 0.85;
    text-decoration: none;
}

.rq-btn .rq-icon {
    font-size: 18px;
}

.rq-btn-primary {
    background: var(--rq-red);
    color: #fff;
}

.rq-btn-dark {
    background: var(--rq-ink);
    color: #fff;
}

.rq-btn-ghost {
    background: var(--rq-surface);
    border-color: var(--rq-line-strong);
    color: var(--rq-ink);
}

.rq-btn-quiet {
    background: transparent;
    color: var(--rq-body);
}

.rq-btn-sm {
    height: 30px;
    padding: 0 11px;
    font-size: 12.5px;
}

.rq-btn-sm .rq-icon {
    font-size: 15px;
}

/* ── Status pills ─────────────────────────────────────────────────── */
.rq-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.015em;
    white-space: nowrap;
    font-family: var(--rq-sans);
}

.rq-pill .rq-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.rq-pill-draft {
    background: var(--rq-warn-soft);
    color: var(--rq-warn);
}

.rq-pill-warn {
    background: var(--rq-warn-soft);
    color: var(--rq-warn);
}

.rq-pill-sent {
    background: var(--rq-blue-soft);
    color: var(--rq-blue);
}

.rq-pill-ok {
    background: var(--rq-ok-soft);
    color: var(--rq-ok);
}

.rq-pill-crit {
    background: var(--rq-crit-soft);
    color: var(--rq-crit);
}

.rq-pill-neutral {
    background: var(--rq-bg-deep);
    color: var(--rq-body);
}

/* ── Tags ─────────────────────────────────────────────────────────── */
.rq-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 11px;
    border-radius: 99px;
    border: 1px solid var(--rq-line-strong);
    background: var(--rq-surface);
    font-size: 12px;
    font-weight: 500;
    color: var(--rq-body);
    font-family: var(--rq-sans);
    white-space: nowrap;
}

.rq-tag .rq-icon {
    font-size: 14px;
    color: var(--rq-muted);
}

/* ── Tables ───────────────────────────────────────────────────────── */
.rq-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--rq-fs);
    font-family: var(--rq-sans);
}

.rq-tbl th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--rq-muted);
    padding: 10px 14px;
    border-bottom: 1px solid var(--rq-line);
    background: var(--rq-surface);
    white-space: nowrap;
}

.rq-tbl td {
    padding: var(--rq-cell-py) 14px;
    border-bottom: 1px solid var(--rq-line);
    color: var(--rq-body);
    vertical-align: middle;
}

.rq-tbl tr:last-child td {
    border-bottom: none;
}

.rq-tbl tr:hover td {
    background: var(--rq-bg);
}

.rq-tbl .rq-lead {
    color: var(--rq-ink);
    font-weight: 600;
}

.rq-tbl .rq-num {
    font-family: var(--rq-mono);
    font-size: calc(var(--rq-fs) - 1px);
    text-align: right;
}

.rq-tbl th.rq-num {
    text-align: right;
    font-family: var(--rq-sans);
}

/* Horizontal-scroll matrix table */
.rq-tbl-matrix-wrap {
    overflow-x: auto;
    overflow-y: hidden;
}

.rq-tbl-matrix {
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
    font-family: var(--rq-sans);
    font-size: var(--rq-fs);
}

.rq-tbl-matrix th {
    text-align: right;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--rq-muted);
    padding: 10px 10px;
    border-bottom: 1px solid var(--rq-line);
    background: var(--rq-surface);
    white-space: nowrap;
}

.rq-tbl-matrix th.rq-sticky-sku {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--rq-surface);
}

.rq-tbl-matrix th.rq-sticky-name {
    text-align: left;
    position: sticky;
    left: 100px;
    z-index: 2;
    background: var(--rq-surface);
    border-right: 1px solid var(--rq-line);
    box-shadow: 3px 0 6px rgba(0, 0, 0, 0.04);
}

.rq-tbl-matrix th.rq-sticky-name-only {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--rq-surface);
    border-right: 1px solid var(--rq-line);
    box-shadow: 3px 0 6px rgba(0, 0, 0, 0.04);
}

.rq-tbl-matrix td {
    padding: var(--rq-cell-py) 10px;
    border-bottom: 1px solid var(--rq-line);
    color: var(--rq-body);
    vertical-align: middle;
    text-align: right;
}

.rq-tbl-matrix td.rq-sticky-sku {
    font-family: var(--rq-mono);
    font-size: 12px;
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--rq-surface);
}

.rq-tbl-matrix td.rq-sticky-name {
    font-weight: 500;
    color: var(--rq-ink);
    text-align: left;
    position: sticky;
    left: 100px;
    z-index: 2;
    background: var(--rq-surface);
    border-right: 1px solid var(--rq-line);
    box-shadow: 3px 0 6px rgba(0, 0, 0, 0.04);
}

.rq-tbl-matrix td.rq-sticky-name-only {
    font-weight: 500;
    color: var(--rq-ink);
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--rq-surface);
    border-right: 1px solid var(--rq-line);
    box-shadow: 3px 0 6px rgba(0, 0, 0, 0.04);
    max-width: 380px;
}

.rq-tbl-matrix td.rq-sticky-name-only .rq-sub {
    font-size: 11.5px;
    color: var(--rq-muted);
    font-weight: 400;
    margin-top: 2px;
}

.rq-tbl-matrix tr:last-child td {
    border-bottom: none;
}

/* Matrix column states */
.rq-col-active {
    background: var(--rq-blue-soft) !important;
}

.rq-col-active-header {
    background: var(--rq-blue-soft);
}

td.rq-col-active {
    background: var(--rq-blue-soft) !important;
}

th.rq-col-active-header {
    background: var(--rq-blue-soft);
}

.rq-price-changed {
    color: var(--rq-ink) !important;
    font-weight: 600 !important;
    font-family: var(--rq-mono);
}

.rq-price-inherited {
    color: var(--rq-faint) !important;
    font-family: var(--rq-mono);
}

.rq-price-delta {
    font-family: var(--rq-mono);
    font-size: 10.5px;
    font-weight: 600;
}

.rq-price-delta.pos {
    color: var(--rq-ok);
}

.rq-price-delta.neg {
    color: var(--rq-warn);
}

.rq-price-input {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--rq-blue);
    border-radius: var(--rq-r-sm);
    background: var(--rq-surface);
    overflow: hidden;
}

.rq-price-input span {
    padding: 5px 11px;
    font-family: var(--rq-mono);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rq-ink);
}

.rq-matrix-legend {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 11.5px;
    color: var(--rq-muted);
    border-top: 1px solid var(--rq-line);
    flex: none;
    flex-wrap: wrap;
    font-family: var(--rq-sans);
}

.rq-matrix-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rq-version-head {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.rq-version-date {
    font-family: var(--rq-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.rq-version-note {
    font-size: 9.5px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0;
    text-transform: none;
}

.rq-version-badge {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    border: 1px solid currentColor;
    border-radius: 99px;
    padding: 1px 5px;
}

/* ── Form fields ──────────────────────────────────────────────────── */
.rq-fld {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-family: var(--rq-sans);
}

.rq-fld label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rq-body);
}

.rq-fld .rq-hint {
    font-size: 11.5px;
    color: var(--rq-muted);
    font-weight: 400;
}

.rq-input {
    height: 40px;
    border: 1px solid var(--rq-line-strong);
    border-radius: var(--rq-r-sm);
    background: var(--rq-surface);
    padding: 0 12px;
    display: flex;
    align-items: center;
    font-size: 13.5px;
    font-family: var(--rq-sans);
    color: var(--rq-ink);
    gap: 8px;
}

.rq-input .rq-icon {
    font-size: 17px;
    color: var(--rq-muted);
}

.rq-input .rq-ph {
    color: var(--rq-faint);
}

.rq-input .rq-arrow {
    margin-left: auto;
}

.rq-input.rq-input-sm {
    height: 36px;
    font-size: 13px;
}

/* ── Toggle switch ────────────────────────────────────────────────── */
.rq-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--rq-sans);
}

.rq-toggle-track {
    width: 36px;
    height: 21px;
    border-radius: 99px;
    background: var(--rq-ok);
    position: relative;
    flex: none;
}

.rq-toggle-thumb {
    position: absolute;
    right: 2.5px;
    top: 2.5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
}

.rq-toggle-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rq-ink);
}

.rq-toggle-sub {
    font-size: 12px;
    color: var(--rq-muted);
}

/* ── Flag / tenant badge ──────────────────────────────────────────── */
.rq-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    flex: none;
    font-family: var(--rq-sans);
}

/* ── Info banner ──────────────────────────────────────────────────── */
.rq-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 13px;
    border-radius: var(--rq-r-sm);
    font-size: 12px;
    line-height: 1.5;
    font-family: var(--rq-sans);
}

.rq-banner .rq-icon {
    font-size: 16px;
    flex: none;
    margin-top: 1px;
}

.rq-banner-info {
    background: var(--rq-blue-soft);
    color: var(--rq-blue-ink);
}

.rq-banner-warn {
    background: var(--rq-warn-soft);
    color: var(--rq-warn);
}

.rq-banner-crit {
    background: var(--rq-crit-soft);
    color: var(--rq-crit);
}

/* ── Sticky save bar ──────────────────────────────────────────────── */
.rq-save-bar {
    background: var(--rq-surface);
    border-top: 1px solid var(--rq-line);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    font-family: var(--rq-sans);
}

.rq-save-bar-note {
    margin-left: auto;
    font-size: 12px;
    color: var(--rq-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Stock bar ────────────────────────────────────────────────────── */
.rq-stockbar {
    height: 6px;
    border-radius: 3px;
    background: var(--rq-bg-deep);
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.rq-stockbar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 3px;
}

.rq-stockbar-tick {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--rq-ink);
    opacity: 0.35;
}

/* ── KPI tile ─────────────────────────────────────────────────────── */
.rq-kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rq-kpi-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--rq-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--rq-sans);
}

.rq-kpi-value {
    font-family: var(--rq-mono);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--rq-ink);
}

.rq-kpi-delta {
    font-size: 11.5px;
    font-weight: 600;
    font-family: var(--rq-sans);
}

/* ── Segmented control ────────────────────────────────────────────── */
.rq-seg {
    display: inline-flex;
    background: var(--rq-bg-deep);
    border-radius: var(--rq-r-sm);
    padding: 3px;
    gap: 2px;
    font-family: var(--rq-sans);
}

.rq-seg-item {
    padding: 6px 14px;
    border-radius: calc(var(--rq-r-sm) - 2px);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rq-muted);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.rq-seg-item.active {
    background: var(--rq-surface);
    color: var(--rq-ink);
    box-shadow: var(--rq-shadow-sm);
}

/* ── Pagination ───────────────────────────────────────────────────── */
.rq-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--rq-sans);
    font-size: 12.5px;
    color: var(--rq-muted);
    padding: 11px 16px;
    border-top: 1px solid var(--rq-line);
}

.rq-page-btn {
    font-size: 18px;
    color: var(--rq-faint);
    cursor: pointer;
    display: inline-flex;
}

.rq-page-current {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--rq-blue-soft);
    color: var(--rq-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rq-mono);
    font-size: 12px;
    font-weight: 600;
}

/* ── Tenant sync row ──────────────────────────────────────────────── */
.rq-tenant-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rq-tenant-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--rq-sans);
}

.rq-tenant-group-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rq-tenant-members {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 18px;
    border-left: 1px solid var(--rq-line);
    margin-left: 9px;
}

.rq-tenant-row {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--rq-sans);
}

.rq-tenant-name {
    font-size: 13px;
    flex: 1;
}

.rq-tenant-note {
    font-family: var(--rq-mono);
    font-size: 10.5px;
    margin-left: auto;
}

/* ── System types icon badge ──────────────────────────────────────── */
.rq-type-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--rq-r-sm);
    background: var(--rq-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.rq-type-icon .rq-icon {
    font-size: 19px;
    color: var(--rq-body);
}

/* ── Alert strip (hazard) ─────────────────────────────────────────── */
.rq-alert-strip {
    display: flex;
    align-items: center;
    border: 1px solid var(--rq-crit);
    border-radius: var(--rq-r);
    overflow: hidden;
    background: var(--rq-surface);
}

.rq-alert-hazard {
    align-self: stretch;
    width: 6px;
    flex: none;
    background: repeating-linear-gradient(-45deg, var(--rq-crit) 0 8px, #fff 8px 16px);
}

.rq-alert-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    flex: 1;
    font-family: var(--rq-sans);
    font-size: 13.5px;
}

/* ── Grid rich cells (overview list redesign) ─────────────────────── */
/* Customer cell: round initials avatar + name */
.rq-cust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.rq-grid-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rq-blue);
    color: #fff;
    font-family: var(--rq-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.rq-cust .rq-lead {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Two-line cell: bold lead on top, muted sub-line below */
.rq-cell-twoline {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.rq-cell-twoline .rq-lead {
    font-size: 12.5px;
}

.rq-cell-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--rq-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Muted secondary cell text (e.g. location) */
.rq-cell-muted {
    color: var(--rq-muted);
}

/* Right-aligned mono numeric value cell */
.rq-cell-value {
    font-family: var(--rq-mono);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rq-ink);
    text-align: right;
    display: block;
}

/* Hover-revealed per-row action icons */
.rq-rowact {
    display: inline-flex;
    align-items: center;
}

.rq-rounded {
    border-radius: var(--rq-border-radius);
}

.rq-box {
    padding: var(--rq-box-padding);
    background-color: var(--rq-surface);
    border: var(--rq-box-border) solid var(--rq-line);
}

.rq-version-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: var(--rq-bottom-bar-height);
    font-size: 10px;
    color: var(--rq-faint);
    letter-spacing: 0.02em;
}

.rq-topbar-extra-content {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-bottom: var(--rq-default-border);
    background-color: var(--rq-surface);
    height: var(--rq-top-bar-extra-content-height);
}

.rq-page-title-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
    padding-inline-start: var(--rq-page-left-padding);
}

.rq-page-subtitle {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--rq-muted);
}

.rq-page-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    p {
        font-size: 20px;
        font-weight: 600;
        margin: 0;
        padding: 0;
        color: var(--rq-ink);
    }

}

.rq-centered-container {
    width: clamp(60%, (1200px - 100vw) * 1000, 100%);
    margin: 20px auto;
    height: fit-content;
}

.rq-main-form-body {
    display: flex;
    flex-direction: column;
    align-content: center;
}


/*  chevron  */
.chevron {
    display: inline-block;
    border-style: solid;
    border-width: 0.2em 0.2em 0 0;
    height: 0.6em;
    width: 0.6em;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    vertical-align: middle;
    color: currentColor;
    margin-left: auto;
}

.chevron.right {
    transform: rotate(45deg);
}

.chevron.bottom {
    transform: rotate(135deg);
}

.chevron.left {
    transform: rotate(-135deg);
}

.chevron.top {
    transform: rotate(-45deg);
}

/* ─── Divider ─────────────────────────────────────── */
.rq-divider {
    width: 1px;
    align-self: stretch;
    background: var(--rq-line);
}

/* ─── Text attributes ─────────────────────────────────────── */
.rq-bold {
    font-weight: bold;
}

.rq-bold.red {
    color: red;
}

.rq-bold.green {
    color: green;
}

/* ─── Third-party overrides ─────────────────────────────────────── */
.blazored-toast-message {
    margin-block-start: 0;
}