/* ============================================================================
 * motiva-request-workspace.css — the split request workspace
 * Prefix: rqw-
 *
 * ONE DEFINITION OF THE SKELETON, SHARED BY EVERY ROLE'S REQUEST QUEUE.
 * This file is the structure and the neutral chrome only: the viewport-filling
 * height chain, the two columns, the internally-scrolling list, the header row,
 * the KPI chips, the row and its divider, the empty state. It says nothing
 * about which requests a role sees, what its buckets are called, or which
 * actions it may take — every one of those stays in the page.
 *
 * Global rather than scoped because Blazor's scoped CSS cannot be imported
 * across components: a `.razor.css` compiles to `.sel[b-hash]` and only ever
 * matches its own component's markup. Sharing a skeleton therefore means either
 * this file or a verbatim copy per page, and the copy is what this replaces.
 *
 * Pages keep their own scoped stylesheet for what is genuinely theirs — the
 * lecturer's segmented control and decision panel, the mentor's status dot and
 * type menu — and compose it with these classes on the same element.
 *
 * Consumers: StudentRequestsPage, RequestsManagement (lecturer/staff),
 * MentorRequestsPage. All three wear `.motiva-final`, so every token below
 * resolves to the finished design's value on every role.
 * ============================================================================ */


/* ── Page root ───────────────────────────────────────────────────────────────
 * The chain below (.rqw-page → .rqw-split → .rqw-sidebar → .rqw-list, and
 * → .rqw-main) fills and scrolls internally, but only once something bounds it.
 * `.app-shell-student` is `min-height: 100vh`, so it takes whichever is TALLER,
 * the viewport or its content, and a flex container's intrinsic height comes
 * from the max-content size of its growing items — so the page's own natural
 * height is what the shell reports. `flex: 1` grows a box; nothing caps it, and
 * the BODY ends up with the scrollbar while neither column ever reaches the
 * point of scrolling inside itself.
 *
 * `contain: size` says this element's size is not to be derived from its
 * contents. The shell then measures 100vh, `flex: 1` grows the page into
 * exactly what is left below the top nav, and the overflow lands where the
 * rules below mean it to. The remaining height is DERIVED — nothing here
 * hardcodes a pixel height or restates how tall the top bar is.
 *
 * It is lifted again under 720px, where the split stacks into a column that is
 * meant to be taller than the viewport. */
.rqw-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    contain: size;
}

/* The shared white Core page header (MPageHeaderCard) sits ABOVE the split as a
   fixed-height sibling: it must not shrink (so it keeps its natural height while
   the split takes the rest via flex:1) and it carries the approved external gap
   to the workspace below. Replaces the old floating .rqw-header row. */
.rqw-page > .m-page-header-card {
    flex: 0 0 auto;
    margin-block-end: 16px;
}


/* ── Page header ─────────────────────────────────────────────────────────────
 * One row carries both halves: the title at the RTL start (right) and the KPI
 * summary at the end (left). Because the chips are shorter than the h1's own
 * line box, the row's height is still set by the title — the summary costs the
 * page no height, which is what leaves both columns below it full height. */
.rqw-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 0 18px;
}

/* PAGE TITLE — the shared h1 step. Values live in motiva-tokens.css; never restate them here. */
.rqw-title {
    margin: 0;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-h1, 38px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: var(--motiva-line-height-tight, 1.1);
    letter-spacing: var(--motiva-letter-spacing-page, -0.035em);
    color: var(--motiva-text-primary, #1B1A22);
}


/* ── KPI summary ─────────────────────────────────────────────────────────────
 * A summary, not a dashboard. It must never out-shout the queue beside it: no
 * filled surfaces and no status colour — a count of open work is not itself a
 * problem, so nothing here earns a warning tint. The only colour is the shared
 * #motivaIconGradient on the 15px marks; below ~12px that gradient collapses to
 * its blue midpoint, which is why they are not smaller.
 *
 * Cards at 12px, deliberately NOT a 999px pill: these are not clickable, and
 * pill geometry beside a real filter control reads as a second filter. */
.rqw-kpis {
    /* space-between on .rqw-header already places this at the left edge. */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rqw-kpi {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 12px;
    /* Panel fill — was .70 white, a KPI card a shade greyer than the queue
       panel directly below it. */
    background: var(--motiva-panel-surface, #FFFFFF);
    border: 1px solid var(--motiva-panel-border, rgba(109, 40, 245, 0.08));
    box-shadow: 0 1px 2px rgba(27, 26, 34, 0.03);
}

.rqw-kpi-ico {
    width: 15px;
    height: 15px;
}

.rqw-kpi-num {
    font-size: var(--motiva-font-size-lg, 15px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #1B1A22;
    font-variant-numeric: tabular-nums;
}

.rqw-kpi-label {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 500;
    line-height: 1;
    color: #6B6779;
    white-space: nowrap;
}


/* ── Split ───────────────────────────────────────────────────────────────────
 * RTL flex-row: the first child lands on the RIGHT, the second fills the LEFT.
 * So the queue is written first and the workspace second. */
.rqw-split {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    gap: 16px;
}


/* ── Queue column (right) ── */
.rqw-sidebar {
    flex: 0 0 340px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: var(--motiva-panel-radius, 24px);

    /* THE PRIMARY PANEL, not a section card. This was
       rgba(255,255,255,0.60) over a white-ish border — translucent enough
       that the canvas's violet radial came through it, which is why the
       request queues read as grey and faded beside the Dashboard and the
       Calendar, both of which are solid. Same tokens the Dashboard's cards
       use, so the three pages are one surface language. */
    background: var(--motiva-panel-surface, #FFFFFF);
    border: 1px solid var(--motiva-panel-border, rgba(109, 40, 245, 0.08));
    box-shadow: var(--motiva-panel-shadow,
                    0 1px 2px rgba(27, 26, 34, 0.04),
                    0 10px 24px -20px rgba(27, 26, 34, 0.22));
    overflow: hidden;
    padding: 16px 0 0;
}


/* ── The scrolling list ──────────────────────────────────────────────────────
 * A scroll box puts its scrollbar on the INLINE-END edge, which under `dir=rtl`
 * is the LEFT one. Flipping only this box to `direction: ltr` moves it to the
 * RIGHT edge; `.rqw-list-inner` immediately restores `rtl`, so every row's
 * text, alignment, padding and order are computed exactly as before.
 *
 * The listbox role belongs on the inner element — it is the one that actually
 * owns the options. */
.rqw-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 10px 14px;
    direction: ltr;
    scrollbar-width: thin;
    scrollbar-color: rgba(27, 26, 34, 0.15) transparent;
}

.rqw-list-inner {
    direction: rtl;
}

.rqw-list::-webkit-scrollbar        { width: 4px; }
.rqw-list::-webkit-scrollbar-track  { background: transparent; }
.rqw-list::-webkit-scrollbar-thumb  {
    background: rgba(27, 26, 34, 0.15);
    border-radius: 2px;
}


/* ── Type filter ─────────────────────────────────────────────────────────────
 * The queue's second control, below the bucket selector. Promoted here from the
 * lecturer queue so both roles get one dropdown rather than two that drift: the
 * mentor's used to be a 999px pill with a `▾` text glyph and a fixed 190px menu,
 * which read as a different control even though it ran the same open/pick/close
 * logic underneath.
 *
 * The button is a two-part label — a muted "סוג בקשה" caption beside the CURRENT
 * VALUE — so the control still says what it filters when a type is picked, and
 * "הכל" is a real value rather than an empty state.
 *
 * The panel is anchored to both edges of the wrapper, so its width is the
 * button's width at any sidebar size. It opens downward INTO the list; the
 * sidebar's `overflow: hidden` therefore never clips it. The backdrop is the
 * outside-click dismissal — a fixed transparent layer under the panel and over
 * everything else, which is the same behaviour as a document listener without
 * one. ── */
.rqw-type-wrap {
    position: relative;
    flex-shrink: 0;
}

.rqw-type-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(27, 26, 34, 0.08);
    background: rgba(255, 255, 255, 0.65);
    color: #4A4657;
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    text-align: start;
}

.rqw-type-btn:hover {
    background: #fff;
    border-color: rgba(27, 26, 34, 0.14);
}

/* A picked type tints the whole control, so the queue says at a glance that it
   is showing a subset. */
.rqw-type-btn-active {
    background: rgba(109, 40, 245, 0.05);
    border-color: rgba(109, 40, 245, 0.20);
    color: #6D28F5;
}

.rqw-type-btn:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring, #6D28F5);
    outline-offset: 2px;
}

.rqw-type-label-text {
    /* The caption half of the filter pill. */
    font-size: var(--motiva-font-size-meta, 11.5px);
    font-weight: 600;
    color: #9B96A8;
    white-space: nowrap;
}

.rqw-type-btn-active .rqw-type-label-text { color: #9B7CE8; }

.rqw-type-val-text {
    flex: 1;
    /* The value half — a control, so it reads the control step and stays
       level with the tabs beside it. */
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: 600;
    color: #1B1A22;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rqw-type-btn-active .rqw-type-val-text { color: #6D28F5; }

.rqw-type-caret {
    display: inline-flex;
    align-items: center;
    color: #9B96A8;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.rqw-type-caret-open { transform: rotate(180deg); }

.rqw-type-backdrop {
    position: fixed;
    inset: 0;
    z-index: 29;
}

.rqw-type-panel {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 40px -12px rgba(27, 26, 34, 0.28);
    padding: 6px;
    z-index: 30;
}

.rqw-type-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: 500;
    color: #1B1A22;
    text-align: start;
    cursor: pointer;
    transition: background 0.12s ease;
}

.rqw-type-opt:hover { background: rgba(27, 26, 34, 0.04); }
.rqw-type-opt-on    { color: #6D28F5; font-weight: 700; }
.rqw-type-opt-label { flex: 1; text-align: start; }
.rqw-type-check     { flex-shrink: 0; color: #6D28F5; }


/* ── A row ───────────────────────────────────────────────────────────────────
 * Flat by design: no shadow, no alternating fill, no status colour on the row
 * itself. The wider 12px padding sits on the RIGHT, which is the scrollbar's
 * edge. `position: relative` carries both pseudo-elements below. */
.rqw-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 13px 12px 13px 10px;
    border-radius: 14px;
    border: 0;
    background: transparent;
    text-align: start;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    transition: background 0.13s ease;
}

.rqw-row:hover {
    background: rgba(27, 26, 34, 0.04);
}


/* ── Row separator ───────────────────────────────────────────────────────────
 * One hairline per boundary between two whole requests — every part of a
 * request sits above it, so it never reads as a rule inside a single one.
 * Drawn with ::after on the row BELOW each boundary (`+` sibling), so there is
 * no trailing line under the last row and no last-child special case. ::before
 * is taken by the selected row's edge.
 *
 * Suppressed on both sides of a selected row so its block stays one unbroken
 * shape. BOTH halves must be sibling selectors to reach (0,2,1): a plain
 * `.rqw-row-selected::after` is only (0,1,1) and silently LOSES to the divider
 * rule, leaving a hairline across the top of the selected block. */
.rqw-row + .rqw-row::after {
    content: "";
    position: absolute;
    inset-inline: 12px 10px;
    top: 0;
    height: 1px;
    background: rgba(27, 26, 34, 0.06);
    pointer-events: none;
}

.rqw-row + .rqw-row-selected::after,
.rqw-row-selected + .rqw-row::after {
    content: none;
}


/* ── Selected row: lavender block + violet inline-start edge ── */
.rqw-row-selected {
    background: rgba(109, 40, 245, 0.07);
}

.rqw-row-selected::before {
    content: "";
    position: absolute;
    /* In RTL, inline-start = the right edge of the element. */
    inset-inline-start: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: #6D28F5;
}


/* ── Workspace column (left) ─────────────────────────────────────────────────
 * Starts and ends on exactly the same lines as .rqw-sidebar, and owns the
 * overflow itself so a request taller than the panel scrolls in place while the
 * page stays fixed. */
.rqw-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(27, 26, 34, 0.12) transparent;
}

.rqw-main::-webkit-scrollbar        { width: 5px; }
.rqw-main::-webkit-scrollbar-track  { background: transparent; }
.rqw-main::-webkit-scrollbar-thumb  {
    background: rgba(27, 26, 34, 0.12);
    border-radius: 3px;
}


/* ── Empty state ── */
.rqw-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 40px;
    text-align: center;
    color: #CDCAD8;
    border-radius: var(--motiva-panel-radius, 24px);

    /* THE PANEL SURFACE, WITH THE PLACEHOLDER'S OWN EDGE. This is the largest
       surface on the page every time a request queue is opened — nothing is
       ever auto-selected — so its rgba(255,255,255,0.40) was most of what made
       Requests read as faded next to the Dashboard. The DASHED border stays:
       that, not a washed-out fill, is what says "nothing here yet", and it is
       the one thing that should still separate this state from a real record. */
    background: var(--motiva-panel-surface, #FFFFFF);
    border: 1px dashed rgba(27, 26, 34, 0.10);
}

.rqw-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(27, 26, 34, 0.04);
    color: #CDCAD8;
}

.rqw-empty-title {
    margin: 0;
    font-size: var(--motiva-font-size-item, 16px);
    font-weight: 600;
    color: #B4B0BF;
}

.rqw-empty-sub {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    color: #CDCAD8;
}


/* ── The detail card that fills the workspace ────────────────────────────────
 * `overflow: hidden` clips the header to the radius, and that value also gives
 * a flex item an automatic minimum size of 0 — so once .rqw-main became
 * height-bounded this card started shrinking to fit and silently clipping its
 * own body, with no scrollbar and no visible symptom. `flex: 0 0 auto` opts it
 * back out of shrinking so the scroll lands in .rqw-main instead. */
.rqw-card {
    flex: 0 0 auto;
    border-radius: var(--motiva-panel-radius, 24px);

    /* Already solid white — only the edge and the lift are re-pointed, from
       a grey hairline and a slightly deeper shadow to the shared panel
       recipe, so the record and the queue beside it are the same object. */
    background: var(--motiva-panel-surface, #FFFFFF);
    box-shadow: var(--motiva-panel-shadow,
                    0 1px 2px rgba(27, 26, 34, 0.04),
                    0 10px 24px -20px rgba(27, 26, 34, 0.22));
    border: 1px solid var(--motiva-panel-border, rgba(109, 40, 245, 0.08));
    overflow: hidden;
}


/* ── Keyboard focus on a row ─────────────────────────────────────────────────
 * The row is a <button>, so it has always been reachable by keyboard; what it
 * had was the UA's own outline, which under `.motiva-final :focus-visible` is
 * already re-pointed but had no radius to follow. Matching the row's own 14px
 * corner is all this adds, and it is here rather than per page so the three
 * queues cannot answer the same question differently. */
.rqw-row:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring, rgba(109, 40, 245, 0.35));
    outline-offset: -2px;
    border-radius: 14px;
}


/* ════════════════════════════════════════════════════════════════════════════
 * THE QUEUE'S FILTER BAR
 * ════════════════════════════════════════════════════════════════════════════
 * Two controls, stacked, at the top of the queue: the bucket pills
 * (MFilterTabs — the finished design's segmented track) and the type dropdown
 * above the list. The bar's inset matches `.rqw-list`'s own so the pills, the
 * dropdown and the rows all hang off one edge.
 *
 * The MFilterTabs rules are safe to write here even though the component is
 * Blazor-scoped: scoping rewrites a component's OWN stylesheet, it does not
 * shield its markup from a global one. Every pill takes an equal share of the
 * track, which keeps it a clean single row at any queue width instead of
 * leaving a ragged tail. */
.rqw-filters {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 14px 12px;
}

.rqw-filters .m-filter-tabs {
    display: flex;
}

.rqw-filters .m-filter-tab {
    flex: 1 1 0;
    justify-content: center;
    white-space: nowrap;
    padding-inline: 10px;
}


/* ════════════════════════════════════════════════════════════════════════════
 * A ROW'S CONTENT
 * ════════════════════════════════════════════════════════════════════════════
 * HEAD — one flex line: the title at the reading end, the request type pinned
 * to the far LEFT, and between them the only thing allowed to interrupt a
 * scan. META — one or more quieter lines saying where the request stands and
 * when it last moved.
 *
 * Promoted here from the student queue, which is the approved reference. It is
 * SHAPE ONLY: which marker leads the title, what the type chip says and what
 * goes on the meta line stay each page's answer, because they are different
 * questions per role.
 *
 * NOTHING is positioned absolutely. The head is one flex line and only
 * `.rqw-row-title` flexes, so a long title ellipses in place rather than
 * pushing the chip out of the row, and the chip lands on the same left edge on
 * every row whatever the title's length. */
.rqw-row-head {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

/* The one item on the head line that gives up space. `flex: 1` + `min-width: 0`
   is what lets the ellipsis fire inside a flex line. */
.rqw-row-title {
    flex: 1;
    min-width: 0;
    font-size: var(--motiva-font-size-item);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1.35;
    color: var(--motiva-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Default tag: white paper under the Motiva gradient edge, dark ink.
   `--motiva-tag-brand-surface`, the product's one tag recipe. The edge is paid
   for out of the padding so the pill's outer box does not move. It never
   shrinks — the title does that — so it reads at full width until it alone is
   wide enough to need the cap. The 46% is a floor for the title, not a design
   width: no request type in the system comes near it. */
.rqw-row-type {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 1px 7px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    white-space: nowrap;
    max-width: 46%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "דורש את פעולתך", reduced to its signal. The words were the widest thing on
   the row and repeated on every waiting request; the mark says the same in
   15px. Rose because that is the workspace's Attention role, and nothing else
   on the row is allowed to carry it.

   15px is inside the title's own 13.5px/1.35 line box, so a waiting row is
   exactly as tall as one that needs nothing. */
.rqw-row-alert {
    flex: 0 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--motiva-color-rose);
    color: #FFFFFF;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
    /* "!" carries more sidebearing on one side than the other; this puts the
       glyph on the circle's optical centre. */
    padding-inline-end: 0.5px;
}

/* Unread marker — 6px, solid violet rather than the gradient: below ~12px the
   signature sweep renders as its blue midpoint. */
.rqw-row-unread {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--motiva-color-violet);
}

.rqw-row-meta {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    font-size: var(--motiva-font-size-meta);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.3;
    color: var(--motiva-text-muted);
}

/* Where the request stands — metadata, not a status pill. One weight up and in
   secondary ink so it separates from what follows it without becoming a second
   colour on the row. A page that needs a real tone on this slot adds one; the
   default is deliberately quiet. */
.rqw-row-where {
    flex: 0 0 auto;
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
    white-space: nowrap;
}

.rqw-row-sep {
    flex: 0 0 auto;
    color: var(--motiva-text-subtle);
}

.rqw-row-sub {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rqw-list-empty {
    margin: 0;
    padding: 40px 20px;
    text-align: center;
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--motiva-text-subtle);
}


/* ════════════════════════════════════════════════════════════════════════════
 * THE RECORD, INSIDE .rqw-card
 * ════════════════════════════════════════════════════════════════════════════
 * HEAD — TWO CHILDREN ON ONE ROW, not a stack. The identity (title + meta)
 * keeps the reading end — the RIGHT, under dir=rtl — and the badges take the
 * opposite corner, the upper LEFT, as the row's second item aligned to its
 * start edge.
 *
 * Flex, not absolute positioning: the badges stay in flow, so they cannot
 * overlap a long title, they wrap among themselves at narrow widths, and the
 * head's own height still comes from its content. `align-items: flex-start` is
 * what puts them at the TOP of that corner rather than centred against a
 * two-line title. Below 720px the row unwraps back to a stack with the badges
 * first, which is where they read correctly on one column. */
.rqw-ws-head {
    padding: 26px 30px 20px;
    border-bottom: 1px solid rgba(27, 26, 34, 0.05);

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.rqw-ws-ident {
    flex: 1 1 auto;
    min-width: 0;
}

.rqw-ws-badges {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* The record's type tag — the row chip's recipe at the record's scale. */
.rqw-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold);
    white-space: nowrap;
}

/* ── WHERE THE REQUEST STANDS, in the workspace's own colour roles ───────────
 * One geometry, four tones, named by MEANING rather than by any one role's
 * bucket — so the student's "ממתינות לתגובתך", the lecturer's "ממתינה
 * להחלטתך" and the mentor's "דורש את פעולתך" are the same object because they
 * mean the same thing, and none of them can quietly drift onto a colour that
 * says something else.
 *
 *   attention  rose    — waiting on the reader
 *   brand      violet  — in flight with someone else in the workflow
 *   neutral    grey    — in flight, and the reader is only an observer
 *   done       teal    — nobody's move
 *
 * Rose is never spent on "in flight". That is the ownership rule wearing a
 * colour: a request parked with the student (NeedsInfo) is brand or neutral on
 * a staff screen, never attention. */
.rqw-ws-state {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.35;
    white-space: nowrap;
}

.rqw-ws-state-attention { background: rgba(224, 51, 95, 0.08);   color: #C42B52; }
.rqw-ws-state-brand     { background: rgba(109, 40, 245, 0.08);  color: #6D28F5; }
.rqw-ws-state-neutral   { background: rgba(155, 150, 168, 0.12); color: #7C7889; }
.rqw-ws-state-done      { background: rgba(15, 168, 194, 0.09);  color: #0FA8C2; }

.rqw-ws-title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: var(--motiva-text-primary);
}

.rqw-ws-submeta {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: var(--motiva-font-size-sm, 13.5px);
    line-height: 1.5;
    color: var(--motiva-text-muted);
}

.rqw-meta-strong { font-weight: var(--motiva-font-weight-semibold); color: var(--motiva-text-secondary); }
.rqw-meta-sep    { color: var(--motiva-text-subtle); }

.rqw-ws-body {
    padding: 22px 30px 28px;
    display: flex;
    flex-direction: column;
}

.rqw-ws-section { margin-bottom: 20px; }

.rqw-ws-section-label {
    margin: 0 0 8px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--motiva-text-muted);
}

.rqw-desc {
    margin: 0;
    font-size: var(--motiva-font-size-lg, 15.5px);
    line-height: 1.7;
    color: var(--motiva-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.rqw-attach-count {
    margin: 0 0 16px;
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--motiva-text-muted);
}


/* ── Deadline comparison (Extension) ─────────────────────────────────────────
 * An extension is a DATE MOVE, and it reads as one: the two dates side by side
 * with the arrow between them, current in secondary ink and requested (or
 * approved) in violet. RTL puts the current date first, on the right, so the
 * arrow points with the reading direction. */
.rqw-dates-wrap {
    display: flex;
    justify-content: flex-start;
}

.rqw-dates {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 12px 24px;
    border-radius: 18px;
    background: #F6F4FD;
    border: 1px solid rgba(109, 40, 245, 0.08);
}

.rqw-date-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.rqw-date-val {
    font-size: var(--motiva-font-size-lg, 16px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.2;
    color: var(--motiva-text-secondary);
}

.rqw-date-val-req {
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-color-violet);
}

.rqw-date-lbl {
    margin-top: 3px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-muted);
}

.rqw-date-lbl-req {
    color: var(--motiva-color-violet);
    font-weight: var(--motiva-font-weight-semibold);
}

.rqw-date-arrow {
    font-size: 20px;
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
    color: var(--motiva-color-violet);
}

.rqw-ext-target {
    margin: 8px 0 0;
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--motiva-text-muted);
}


/* ── File chips ── */
.rqw-files {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.rqw-file {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(27, 26, 34, 0.04);
    color: var(--motiva-color-violet);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium);
    text-decoration: none;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rqw-file:hover { text-decoration: underline; }


/* ── Footer: what happens next, and the history disclosure ── */
.rqw-ws-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(27, 26, 34, 0.06);
}

.rqw-ws-footer-note {
    margin: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    line-height: 1.4;
    color: var(--motiva-text-muted);
}

.rqw-hist-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-inline-start: auto;
    border: 0;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: var(--motiva-text-muted);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease;
}

.rqw-hist-btn:hover { color: var(--motiva-text-secondary); }

.rqw-hist-caret {
    display: inline-flex;
    transition: transform 0.2s ease;
}

.rqw-hist-caret-open { transform: rotate(180deg); }

.rqw-hist-items {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rqw-hist-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.rqw-hist-dot {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--motiva-journey-dot-future, #CDCAD8);
    margin-top: 6px;
}

.rqw-hist-content { flex: 1; min-width: 0; }

.rqw-hist-text {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13px);
    line-height: 1.5;
    color: var(--motiva-text-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* ── The record fills its column, and the columns are 30 / 70 ────────────────
 *
 * THE CARD. `.rqw-card` is `flex: 0 0 auto` above, and that is load-bearing:
 * it carries `overflow: hidden`, which gives a flex item an automatic minimum
 * size of 0, so a SHRINKABLE card silently clips its own body with no
 * scrollbar and no visible symptom. `flex: 1 0 auto` grows it to fill a short
 * request while still refusing to shrink, so a long one keeps scrolling in
 * `.rqw-main` and is never clipped. `.rqw-empty` is already `flex: 1` — the
 * populated card was the one thing not following the column's own pattern,
 * which is what left a queue-height column with a short record floating in it.
 *
 * THE COLUMNS. The queue is a list of titles and needs less room than the
 * record beside it. Both columns keep `flex-basis: 0` and carry the ratio in
 * flex-grow — 3 against 7 — so flexbox divides the space left AFTER its own
 * 16px gap and nothing can overflow. A `calc(30% - …)` pair would have to be
 * kept in step with the gap by hand.
 *
 * The ratio is FLOORED at the 340px the queue was designed around, so it only
 * ever makes the rail wider — a 30% column on a 1000px page would be narrower
 * than the rail, and the bucket pills are measured against 340.
 *
 * BREAKPOINTS. The card fills from 721px, one pixel above where the split
 * becomes a column and both panels are re-based (`flex: 0 0 auto`, a 40vh cap
 * on the queue) — a scoped rule must not win an argument it should not be in.
 * The ratio starts at 901px instead, leaving the 721–900 band on its existing
 * 280px rail. */
@media (min-width: 721px) {
    .rqw-card { flex: 1 0 auto; }
}

@media (min-width: 901px) {
    .rqw-sidebar { flex: 3 1 0; min-width: 340px; }
    .rqw-main    { flex: 7 1 0; }
}


/* ── Responsive ── */
@media (max-width: 900px) {
    /* Below the 30/70 step's own breakpoint the ratio no longer buys the queue
       enough room, so it goes back to a fixed rail. */
    .rqw-sidebar  { flex: 0 0 280px; }
    .rqw-kpis     { flex-wrap: wrap; }
    .rqw-ws-head  { padding: 20px 22px 16px; }
    .rqw-ws-body  { padding: 18px 22px 24px; }
}

@media (max-width: 720px) {
    /* Stacked, the workspace is taller than the viewport by design, so the page
       goes back to deriving its height from its content and the outer scroll
       returns. */
    .rqw-page { contain: none; }

    .rqw-split   { flex-direction: column; overflow: visible; }
    .rqw-sidebar { flex: 0 0 auto; max-height: 40vh; }
    .rqw-main    { flex: 0 0 auto; min-height: 400px; }

    /* One column has no opposite corner to put the badges in, so the record
       head goes back to a stack — badges first, the way it reads on a phone.
       `order` rather than a second DOM order, so the markup stays one shape at
       every width. */
    .rqw-ws-head    { padding: 16px 16px 12px; flex-direction: column; gap: 10px; }
    .rqw-ws-badges  { order: -1; justify-content: flex-start; }
    .rqw-ws-body    { padding: 14px 16px 20px; }
    .rqw-dates-wrap { justify-content: center; }
}