/* ============================================================
   CORPORATE SHELL

   tokens.css defines VALUES, rax.css binds DENSITY, this file builds
   LAYERS and HIERARCHY: on first look the user must be able to read
   what is the fixed frame, what is the work area and what is data.

   The rule is still the same: no raw colour or size here, only tokens.
   ============================================================ */

/* ------------------------------------------------------------
   TOP STRIP

   Dark and thin. The height is FIXED — it does not change with the
   density tier, because the strip is not data but frame. If the frame
   moved too, the screen would look shifted at every tier.
   ------------------------------------------------------------ */

/*  THE CONTENT IS IN THE MIDDLE OF THE STRIP — and the STRIP says so.

    Measured: header 46px, the centre of everything inside 14px. So all
    content was 9px too high. The cause: the header was `display: block`
    and its only child (a Radzen stack) was just 28px tall and stuck to
    the top.

    This was a REGRESSION. The hamburger button was 46px tall and
    unknowingly inflated the stack to the header's height; the stack
    then centred the content with its own `align-items: center`.
    Centring had never been written — it relied on the tallest child's
    height. When the button went, the support went.

    The right way is tying the centring not to the CHILD'S HEIGHT but to
    the strip itself: even if tomorrow only a 17px text is put there it
    stays in the middle. */
/*  THE STRIP IS ITS OWN STACKING CONTEXT — understood by measuring.

    Radzen gives the strip `z-index: 2`. Since it is `position: static`
    one would think this is ignored; but the strip is a GRID ITEM of
    `.rz-layout` and on a grid/flex item `z-index` creates a context even
    when the position is `static`. So NOTHING INSIDE the strip — the
    search dropdown panel, the session popup — can get in front of a
    layer above 2 outside. The panel's `z-index` was made 99999 and it
    still stayed below; the CONTEXT was talking, not the number.

    The fix is raising the context itself. 140 is above the session
    popup's invisible backdrop (130) but below the settings drawer
    (1201), its scrim (1200) and the modal dialogs — those three still
    cover the strip. */
.rax-shell .rz-header {
    display: flex;
    align-items: center;
    z-index: 140;
    height: var(--header-bar-h);
    min-height: var(--header-bar-h);
    background: var(--c-header);
    color: var(--c-header-ink);
    border-bottom: 1px solid var(--c-header-line);
    box-shadow: none;
}

/*  THE STRIP WAS REMOVED — from the notch in the tab strip.

    `rax.js` writes the attribute, on the shell's ROOT: the button is in
    the framework's tab strip, the strip in the product's layout — the
    shared ancestor is this.

    THE STRIP GOES, ITS COMMANDS DO NOT.

    For one round it was `display: none` and the defect came from the
    user: when the strip went, the MENU BUTTON, the identity and the
    settings all vanished too — so while gaining room the notch took
    away every command of the shell. The only way back was pressing the
    notch again and that button said "hide the strip", not "lock the
    application".

    Now the strip leaves the FLOW (`position: absolute`), so the grid row
    is still zeroed and the 42 pixels gained stay; but its contents are
    spread to both ends of the tab strip. The only things lost are the
    BRAND NAME and the SEARCH BOX — neither is a command (search's
    counterpart is Alt+F, K-173).

    TWO ENDS, TWO JOBS:

      left   →  the MENU button (brand mark). It opens and closes the
                sidebar and sits right at its edge: where the thing it
                opens comes from. Left of the tabs, before the first tab.
      right  →  SCREEN and SESSION commands (dashboard, full screen,
                identity, settings). It keeps its order from the strip.

    The two were not gathered into one group and must not be: one is
    navigation, the other session. They were at separate ends in the
    strip too; when the shell narrows the same split is kept.

    The order of the ends: [MENU] [arrow] … [arrow] [group] [notch]. The
    notch stays rightmost — its place depends neither on the number of
    tabs nor on the strip's state, it is the one button that settles
    into muscle memory. */
.rax-shell[data-strip='off'] .rz-layout {
    position: relative;
}

/*  THE STRIP COVERS THE FULL WIDTH BUT DOES NOT SWALLOW CLICKS.

    Two groups spread to two ends can only be placed if a shared
    container sees both ends. The cost is a transparent overlay covering
    the whole tab strip: without `pointer-events: none` no tab could be
    clicked. Only the two groups receive events (`auto` below).

    The background is on the groups too, NOT here: the strip covers the
    full width and painted in the canvas colour it would cover the tabs. */
.rax-shell[data-strip='off'] .rz-header {
    position: absolute;
    top: 0;
    inset-inline: 0;
    z-index: 2;
    /*  The height is the TAB BUTTON'S. So the groups' icons are centred
        on the same line as the tab text (measured: the centre of all
        three is 16px). The baseline falls OUTSIDE this box and it should
        — growing the height to the line would push the icons down
        (tried: the ends moved 1.5px). */
    height: var(--tab-h);
    min-height: 0;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    pointer-events: none;
}

/*  The three-zone grid is GONE: the search in the middle is hidden and
    keeping the side columns `1fr` would centre the groups inside their
    own boxes. Two ends, the tabs between them.

    The leading space marks THE LEFT EDGE OF THE TAB STRIP
    (`--rax-body-l`, measured by rax.js): the strip covers the whole
    grid, while the tabs start right of the sidebar. The number cannot
    be written — the sidebar opens and closes and its width changes with
    density. */
.rax-shell[data-strip='off'] .rax-headbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: 0;
    padding-inline-start: var(--rax-body-l, 0px);
    /* Room for the notch at the right end: the group sits to its left. */
    padding-inline-end: var(--sp-5);
}

/*  Background and fade ON THE GROUPS.

    Left transparent, the tabs scrolling under them would show through.
    The fade is the same as on the scroll arrows and its DIRECTION
    follows the group: the strip must not look cut off where each group
    ends. */
/*  `flex: none` IS NOT A NICETY BUT A CONDITION OF THE MEASUREMENT.

    The groups' width is measured by rax.js and that size sets the tab
    strip's outer space. If the groups could flex, the measurement would
    feed ITS OWN RESULT: in a narrow window a group shrinks, is measured
    narrow, the space narrows, the group shrinks a bit more.

    Seen by measuring — while breaking the guard on purpose: when the
    leading space was set to a broken value the right group shrank from
    158px to 51px and that shrunken state was measured. `min-width: 0` is
    right for strip mode (a long tenant name must not overflow the
    strip), not here: a command button is not clipped. */
.rax-shell[data-strip='off'] .rax-brand,
.rax-shell[data-strip='off'] .rax-headbar-end {
    pointer-events: auto;
    flex: none;
    align-items: center;
    /*  The height is EXPLICITLY the tab button's. Left to its content,
        the brand is 22px and the group 28px, and since they are centred
        on the row their TOP EDGES fall in different places — the
        baseline was measured from their tops so the line scattered over
        three levels (measured: 39 · 34 · 36 · 34). */
    height: var(--tab-h);
    padding-inline: var(--sp-2);
    background: var(--c-canvas);
}

.rax-shell[data-strip='off'] .rax-brand {
    box-shadow: 6px 0 6px -4px var(--c-edge);
}

.rax-shell[data-strip='off'] .rax-headbar-end {
    box-shadow: -6px 0 6px -4px var(--c-edge);
}

/*  THE BASELINE IS UNBROKEN.

    The line is the tab strip's (`.rz-tabview-nav`) BOTTOM BORDER and
    with the strip closed that box narrows (to make room for the two
    ends) — and the line shortened with it. At the top of the shell a
    line was left that started in the middle and ended in the middle.

    THE LINE WAS NOT MOVED TO THE BODY. `.rz-tabview-panels` is full
    width and starts exactly where the strip ends, so the easy fix was
    there — but the decision above (below, `border-top: none`) says that
    line is THE STRIP'S BASELINE, not the body's ceiling: the active
    tab's highlight sits ON it. Moving it to the body would drop the
    highlight one pixel above the line.

    Instead the ends continue the line themselves. The four sit side by
    side without gaps: brand (left) · strip · group (right) · notch.

    THE ALIGNMENT IS MEASURED. The groups are `--tab-h` tall (the same as
    the tab button, so the icons are centred on the same line as the tab
    text), while the strip's box is taller with Radzen's `li` padding.
    The difference is added as padding so the border lands on exactly
    the same pixel as the strip's. The difference CANNOT BE WRITTEN
    FIXED — it changes with the density tier; `rax.js` measures it and
    writes it as `--rax-nav-h`.

    THE LINE IS NOT THE BOXES' BORDER BUT A SEPARATE ELEMENT — and it
    became so after two tries:

      1. `border-bottom` + equal height to the strip → the icons went to
         the middle of the box and moved 1.5px below the tab text.
      2. `border-bottom` + write the difference as padding → these three
         elements are `border-box` (the search bowl `content-box`; this
         repository has no global reset, inheritance is mixed), the
         padding was NOT ADDED to the box and the line stayed at 31
         instead of 34.

    The overlay element solves both: the boxes stay `--tab-h` tall (the
    icons on the same line as the tab text), the line falls OUTSIDE the
    box, on exactly the pixels of the strip's border. The boxes'
    containers have `overflow: visible` (measured) — not clipped.

    `top` is one pixel less than the strip's height: the border is the
    box's LAST pixel and the line is that very pixel. The number comes
    from `rax.js` (`--rax-nav-h`), because the strip's box is taller
    than `--tab-h` and the difference changes with the density tier. */
.rax-shell[data-strip='off'] .rax-brand,
.rax-shell[data-strip='off'] .rax-headbar-end {
    position: relative;
}

.rax-shell[data-strip='off'] .rax-brand::after,
.rax-shell[data-strip='off'] .rax-headbar-end::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: calc(var(--rax-nav-h, 33px) - 1px);
    height: 1px;
    background: var(--c-line);
}

/*  THE NOTCH'S PIECE IS NOT ON ITSELF BUT ON THE STRIP.

    Reason: when closed the notch gets `rotate(180deg)` (one glyph,
    flipped — below) and THE TRANSFORM ROTATES THE OVERLAY TOO.
    `top: 34px` in an upside-down box means "34px from the bottom"; the
    line fell ABOVE the notch instead of BELOW it.

    Measured, and once MISSED: the first measurement read the overlay's
    CSS value and COMPUTED `box.top + top`, i.e. arithmetic the transform
    never touched. The right way is to look where it is painted:
    `elementFromPoint(x, 34.5)` found nothing in the notch's column and
    found the group's own overlay in the group's column.

    Lesson: do not CALCULATE where an overlay is, LOOK FOR it.

    `.rax-tabbar` is not rotated and shares the notch's right edge and
    width (`--sp-5`) — the piece is drawn there. */
.rax-shell[data-strip='off'] .rax-tabbar::after {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    top: calc(var(--rax-nav-h, 33px) - 1px);
    width: var(--sp-5);
    height: 1px;
    background: var(--c-line);
}

.rax-shell[data-strip='off'] .rax-brand-name,
.rax-shell[data-strip='off'] .rax-headbar .rax-search {
    display: none;
}

/*  The buttons move FROM THE STRIP'S LANGUAGE TO THE CANVAS'S.

    `--c-header-ink-2` was chosen for the bluish strip; on the canvas it
    either disappears or sits in the wrong tone. The notch and the scroll
    arrows are already in the `--c-ink-*` family — the group joins them
    instead of building its own island. */
.rax-shell[data-strip='off'] .rax-gear {
    color: var(--c-ink-3);
}

.rax-shell[data-strip='off'] .rax-gear:hover,
.rax-shell[data-strip='off'] .rax-gear[data-on='true'] {
    background: var(--c-touch);
    color: var(--c-accent);
}

.rax-shell[data-strip='off'] .rax-headbar-sep {
    background: var(--c-line);
}

/* The strip became a child of a flex container: its width now comes
   from its content. Without the full width the key figures and the gear
   on the right gather in the middle — the space pushing them right is
   inside this stack. */
.rax-shell .rz-header > * {
    flex: 1 1 auto;
    min-width: 0;
}

/*  THREE ZONES: identity | search | key figures.

    A grid, NOT a flex row, and that is not a preference but the
    requirement itself: in a flex row the middle item sits in what its
    neighbours LEAVE OVER, so as the tenant name grows the search box
    slides left. With the side columns `1fr` the middle column is fixed
    at the strip's real centre.

    The middle column is `minmax(0, …)`: without a zero lower bound the
    grid overflows on a narrow screen and the brand is pushed out of the
    strip. */
/*  The height is EXPLICITLY the whole strip.

    Left to its own height it was measured: the result panel started 7px
    inside the strip, i.e. the dropdown cut into the strip. The panel
    must hang not from the box but BELOW THE STRIP; for that the box's
    container must be as tall as the strip.

    Vertical centring is not affected: the grid's own
    `align-items: center` keeps centring the cell content (K-068's rule
    was not broken, only the container's height was written
    explicitly). */
.rax-headbar {
    display: grid;
    grid-template-columns: 1fr minmax(0, 30rem) 1fr;
    align-items: center;
    gap: var(--sp-4);
    height: 100%;
    padding-inline: var(--sp-3);
}

/* The brand must not stretch and centre: the identity leans on the left edge. */
.rax-headbar > .rax-brand {
    justify-self: start;
}

.rax-headbar-end {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    justify-self: end;
    min-width: 0;
}

/*  On a narrow screen the search LEAVES THE STRIP.

    It is removed rather than shrunk: in a 200px box the screen name and
    the menu path do not fit side by side and the result list becomes
    unreadable. The search in the menu stays — the ability is not lost,
    its place changes. */
@media (max-width: 900px) {
    .rax-headbar {
        grid-template-columns: 1fr auto;
    }

    .rax-headbar .rax-search {
        display: none;
    }
}

/* ------------------------------------------------------------
   SCREEN SEARCH

   The box SEPARATES from the strip's background: on the bluish strip a
   borderless input disappears and it does not read as a place to click.
   ------------------------------------------------------------ */

/*  The container covers the strip top to bottom, the BOX is centred
    inside it.

    The panel hangs below this container with `top: 100%`; were the
    container as short as the box, the panel would start inside the
    strip. */
.rax-search {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    min-width: 0;
}

/*  THE BOWL IS NOT THE INPUT ITSELF BUT A WRAPPER.

    The mode badge and the input sit side by side in the same bowl. The
    icon used to be absolutely positioned and the input's left padding
    was tuned by hand to it; with the badge that padding would have to
    change with the badge's width — a number that cannot be measured. A
    flex row solves it by itself. */
.rax-search-field {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    height: calc(var(--row-h) - 2px);
    padding-inline: var(--sp-2);
    border: 1px solid var(--c-header-line);
    border-radius: var(--r-control);
    background: transparent;
    transition: border-color var(--motion) var(--motion-ease),
                box-shadow var(--motion) var(--motion-ease);
}

.rax-search-field:hover {
    border-color: var(--c-ink-3);
}

/*  ONE FRAME. Focus changes the COLOUR, it does NOT ADD a ring.

    Measured, three lines were stacked:
      1. the bowl's 1px border,
      2. `--focus-ring` — the token itself is a DOUBLE ring
         (2px light + 3px accent),
      3. the global rule in tokens.css puts the same ring on the input
         too (`:where(button, input, …):focus-visible`).

    All three were legitimate rules and nobody had noticed them stacking.
    On focus the bowl only changes its border colour; on the light
    bluish strip the change from `--c-header-line` to `--c-accent` reads
    on its own and moves nothing. */
.rax-search-field:focus-within {
    border-color: var(--c-accent);
}

.rax-search-icon {
    display: grid;
    place-items: center;
    flex: none;
    color: var(--c-ink-3);
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 16px;
}

/*  MODE BADGE — the visible counterpart of the invisible space.

    From the accent family, because it states a STATUS; the same language
    as the selected row and the active menu item. It is truncated: a long
    screen name must not eat the input's room. */
.rax-search-chip {
    flex: none;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1px var(--sp-2);
    border-radius: var(--r-control);
    background: var(--c-accent-bg);
    color: var(--c-accent);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
}

.rax-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--c-ink);
    font-family: inherit;
    font-size: var(--fs-table);
}

.rax-search-input::placeholder {
    color: var(--c-ink-3);
}

/*  The input's OWN focus ring is switched off.

    The global rule in tokens.css (`:where(button, input, …)`) puts a ring
    on every input and in the right place that rule is right — but here
    the boundary is the BOWL's, not the input's. `outline: none` was not
    enough, the ring comes as a `box-shadow`. */
.rax-search-input:focus,
.rax-search-input:focus-visible {
    outline: none;
    box-shadow: none;
}

/* The browser's own clear cross is hidden — the same reason as the
   search box in the sidebar: two crosses appear and they sit in
   different places depending on the browser. */
.rax-search-input::-webkit-search-cancel-button {
    display: none;
}

/*  THE RESULT PANEL OVERFLOWS BELOW THE STRIP.

    The strip has a fixed height and the panel goes outside it —
    `z-index` so it stays above the tab strip and the content. Below the
    modal dialogs (1000+): if a modal opens while the search is open the
    panel must not get in front of it. */
.rax-search-panel {
    position: absolute;
    top: calc(100% + var(--sp-2));
    inset-inline: 0;
    z-index: 120;
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--sp-1);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    box-shadow: var(--sh-3);
}

/*  Result row: icon, screen name, menu path.

    The path is on the RIGHT and in a secondary tone — what is searched
    for is the screen name. On the left, the eye would read the group
    first on every row, while the groups repeat. */
.rax-search-hit {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: none;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--c-ink);
    font: inherit;
    font-size: var(--fs-table);
    text-align: start;
    cursor: pointer;
}

/*  The selected row speaks THE SAME LANGUAGE as the grid: fill + left
    stripe. The user reads the "I am here" mark in the same way in a
    third place too (menu, grid, search). */
.rax-search-hit[data-on="true"] {
    background: var(--c-accent-bg);
    box-shadow: inset 2px 0 0 var(--c-accent);
}

.rax-search-hit:hover {
    background: var(--c-touch);
}

.rax-search-hit-icon {
    color: var(--c-ink-3);
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 17px;
    line-height: 1;
}

.rax-search-hit-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rax-search-hit-path {
    color: var(--c-ink-3);
    font-size: var(--fs-caption);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.rax-search-empty {
    padding: var(--sp-3);
    color: var(--c-ink-3);
    font-size: var(--fs-caption);
}

/* In list mode, one row: it says what will happen, it offers no candidates. */
.rax-search-hint {
    padding: var(--sp-3);
    color: var(--c-ink-2);
    font-size: var(--fs-caption);
}

.rax-search-hint strong {
    color: var(--c-accent);
    font-weight: var(--fw-medium);
}

/* ------------------------------------------------------------
   QUICK SEARCH — IN THE MIDDLE OF THE SCREEN, WITH A SCRIM (Alt+F)

   Not A SECOND COPY of the box in the strip but THE SAME: the modal
   only gives the shell, the search is `RaxSearch` itself. Space as the
   mode key, arrow keys, Enter, ordering — all are written there and not
   repeated here. With a second author the two searches would one day
   diverge.

   Why it exists: going to the box in the strip means taking the mouse
   to the top of the screen, and below 900px that box LEAVES THE STRIP
   (above, measured). The shortcut gives the same ability at every
   width.

   The box itself SITS DIFFERENTLY in the modal and that is not a theme
   but a LAYOUT difference: in the strip the panel HANGS below the box
   (absolute position), here it is IN THE FLOW — because there is a hint
   strip below it and a hanging panel would overlap it. The difference
   is written with `data-palette`; no class was added, because what
   changes is not the box's identity but where it is.
   ------------------------------------------------------------ */

/*  The scrim is ABOVE the drawer's scrim (1200): a user pressing Alt+F
    with the settings open must see the search, not a box lost behind
    the settings. */
.rax-palette-scrim {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: var(--c-scrim);
}

/*  THE BOX IS NOT IN THE MIDDLE BUT AT A THIRD.

    Put right in the middle, the box would MOVE UP as the result list
    opened — the place the user looks at while typing would move. It
    stays at a fixed distance from the top, the list grows downward. */
.rax-palette {
    position: fixed;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1301;
    display: flex;
    flex-direction: column;
    width: min(560px, 92vw);
    /* The font size is FIXED: the root size changes with density
       (rax.js) and if the dialog inherited it the density setting would
       grow and shrink this box too. The same reason as the settings
       drawer. */
    font-size: var(--fs-body);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    box-shadow: var(--sh-3);
    overflow: hidden;
}

/*  HINT STRIP — the mode key is INVISIBLE, here it becomes visible.

    In the strip's box this information fit into the placeholder
    ("space: search the list"); the modal has room and all four keys can
    be written. A user just learning the shortcut does not look anywhere
    else. */
.rax-palette-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    padding: var(--sp-2) var(--sp-3);
    border-top: 1px solid var(--c-line);
    background: var(--c-surface-2);
    color: var(--c-ink-3);
    font-size: var(--fs-caption);
}

.rax-palette-foot kbd {
    padding: 0 4px;
    border: 1px solid var(--c-line-2);
    border-radius: 3px;
    background: var(--c-surface);
    color: var(--c-ink-2);
    font: inherit;
    font-weight: var(--fw-medium);
}

/*  In the modal the box is a VERTICAL stack: bowl on top, panel below.
    In the strip the two overlap (the panel is absolutely positioned). */
.rax-search[data-palette="true"] {
    flex-direction: column;
    align-items: stretch;
    align-self: auto;
    padding: var(--sp-3);
}

/*  The bowl is a notch larger and its BACKGROUND IS SURFACE: the strip's
    border colour (`--c-header-line`) was chosen for the bluish strip; on
    white paper it either disappears or sits in the wrong tone.

    `width: auto` IS A RESET AND A REQUIREMENT.

    The bowl's `width: 100%` is right for the strip: there its container
    has no padding and the percentage gives the full width. In the modal
    the container HAS padding and this repository has no global
    `box-sizing` reset (measured: `content-box`) — the percentage does
    not count the bowl's own padding and border, the bowl overflows by
    18px and the dialog clips it. On screen the bowl seems to have NO
    right edge.

    Writing `box-sizing: border-box` would also fix it but it is the
    wrong lever: the defect is not in the bowl's sizing mode but in a
    width declaration belonging to ANOTHER CONTEXT being carried here.
    Once it is removed the flex box's own stretch (`align-items:
    stretch`, above) already gives the right size — the result panel in
    the same container does exactly that and declares no width at all. */
.rax-search[data-palette="true"] .rax-search-field {
    width: auto;
    height: calc(var(--row-h) + var(--sp-2));
    padding-inline: var(--sp-3);
    border-color: var(--c-line-2);
}

.rax-search[data-palette="true"] .rax-search-icon {
    font-size: 20px;
}

.rax-search[data-palette="true"] .rax-search-input {
    font-size: var(--fs-section);
}

/*  THE PANEL IS IN THE FLOW. Left absolute it would overlap the hint
    strip and the dialog would not grow as results arrived. Border and
    shadow go too: the box ALREADY is a dialog, a second frame is paper
    on paper. */
.rax-search[data-palette="true"] .rax-search-panel {
    position: static;
    z-index: auto;
    max-height: 46vh;
    margin-top: var(--sp-2);
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* ------------------------------------------------------------
   FILTER BADGE — in the list's strip

   The search is done in the strip, its result lives here. The badge
   exists only while there is a filter: the clutter of the removed
   search box does not come back.
   ------------------------------------------------------------ */

/*  THE STRIP'S RIGHT END.

    The automatic margin is in ONE place. Given separately to the badge
    and the refresh button they would share the spare room and the badge
    would hang in the middle of the strip — that is the flex box's rule,
    two `auto` margins split it in two. */
.rax-list-end {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    margin-inline-start: auto;
    min-width: 0;
    /* It gives up room before the strip wraps (K-281): the badge shrinks. */
    flex: 0 1 auto;
}

/* ------------------------------------------------------------
   THE PICKER'S SEARCH BOX

   Only in the list inside a modal (DynamicList, Pick mode): there the
   top strip's search cannot be reached.

   The height is THE SAME as the strip's commands (`--row-h`): it must
   line up with the "Select" button next to it, otherwise the strip looks
   two-storey.
   ------------------------------------------------------------ */
.rax-list-search {
    width: 16rem;
    max-width: 40vw;
    height: var(--row-h);
    padding: 0 var(--sp-3);
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-control);
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: inherit;
    font-size: var(--fs-table);
    transition: border-color var(--motion) var(--motion-ease);
}

.rax-list-search::placeholder {
    color: var(--c-ink-3);
}

.rax-list-search:hover {
    border-color: var(--c-ink-3);
}

/* One frame (see rax.css, `.rax-pagerx-input:focus`). */
.rax-list-search:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: none;
}

.rax-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    max-width: 22rem;
    padding: 1px var(--sp-1) 1px var(--sp-2);
    border: 1px solid var(--c-accent);
    border-radius: 999px;
    background: var(--c-accent-bg);
    color: var(--c-accent);
    font-size: var(--fs-caption);
}

.rax-filter-chip-icon {
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 14px;
    line-height: 1;
}

.rax-filter-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--fw-medium);
}

.rax-filter-chip-x {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
}

.rax-filter-chip-x:hover {
    background: var(--c-accent);
    color: var(--c-surface);
    opacity: 1;
}

/* ------------------------------------------------------------
   REFRESH

   NOT a Radzen button, a plain <button> — the same reason as the gear
   in the strip: all it needs is an icon and Radzen's button casing is
   constantly overridden at this size.
   ------------------------------------------------------------ */

.rax-refresh,
.rax-intent-toggle,
.rax-strip-icon {
    display: inline-grid;
    place-items: center;
    width: var(--row-h);
    height: var(--row-h);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--c-ink-3);
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--motion) var(--motion-ease),
                border-color var(--motion) var(--motion-ease),
                color var(--motion) var(--motion-ease);
}

.rax-refresh:hover:not(:disabled),
.rax-intent-toggle:hover,
.rax-strip-icon:hover {
    background: var(--c-touch);
    border-color: var(--c-line-2);
    color: var(--c-ink);
}

.rax-refresh:active:not(:disabled) {
    background: var(--c-accent-bg);
    border-color: var(--c-accent);
    color: var(--c-accent);
}

/*  `box-shadow: none` for the same reason (K-162): this button HAS a
    border, the global ring drew a second boundary on top of it. The
    ring is the tool of frameless elements. */
.rax-refresh:focus-visible,
.rax-intent-toggle:focus-visible,
.rax-strip-icon:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: var(--c-accent);
    color: var(--c-accent);
}

/*  Disabled it FADES, it does not vanish: a control that does not move
    beats one that does nothing when clicked (the same rule as the record
    navigation arrows). */
.rax-refresh:disabled {
    opacity: 0.4;
    cursor: default;
}

/*  NATURAL LANGUAGE QUERY (K-281). The toggle is the refresh button's
    sibling and borrows its look; open, it wears the accent like a pressed
    command, so the user sees the panel below belongs to it. */
.rax-intent-toggle[data-open="true"] {
    background: var(--c-accent-bg);
    border-color: var(--c-accent);
    color: var(--c-accent);
}

/*  THE AI WINDOWS (K-296). A sentence that filters, a record from a document and the assistant each open in a window;
    nothing of it is a row between the strip and the grid. The proposal inside is READ before it is applied — its lines
    are the conditions (or the values) in words. */
.rax-ai-dialog {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-height: 260px;
}

.rax-intent-ask {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.rax-intent-input {
    flex: 1;
    min-width: 0;
    height: var(--row-h);
    padding: 0 var(--sp-2);
    border: 1px solid var(--c-field-line);
    border-radius: var(--r-control);
    background: var(--c-surface);
    color: var(--c-ink);
    font: inherit;
    font-size: var(--fs-table);
}

.rax-intent-input:focus-visible {
    outline: none;
    border-color: var(--c-accent);
}

.rax-intent-proposal {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sp-2) var(--sp-3);
    font-size: var(--fs-table);
    color: var(--c-ink);
}

.rax-intent-proposal[data-kind="error"] {
    color: var(--c-neg);
}

.rax-intent-label {
    color: var(--c-ink-2);
}

.rax-intent-lines {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: var(--fw-medium);
}

.rax-intent-lines > li:last-child {
    color: var(--c-ink-2);
    font-weight: normal;
}

.rax-intent-commands {
    display: inline-flex;
    gap: var(--sp-2);
}

/*  THE ASSISTANT'S CONVERSATION (K-295). It lives in the same panel as the sentence
    box and the document, so it takes their frame; only the log is its own: what the user
    said, what the model looked at (smaller, quieter — it is a trace, not an answer) and
    what it answered. */
.rax-agent-log {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    max-height: 360px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    font-size: var(--fs-table);
    color: var(--c-ink);
}
.rax-agent-line[data-role="user"] {
    font-weight: var(--fw-medium);
}
.rax-agent-line[data-role="step"] {
    color: var(--c-ink-2);
    font-size: var(--fs-caption);
}
.rax-agent-line[data-role="error"] {
    color: var(--c-neg);
}

/*  ROTATION.

    The BUTTON rotates, not the icon itself; the icon is a ligature and
    wrapped separately the alignment would come from two places. Being
    square and centred it does not shift while rotating.

    The lower bound is on the C# side (`SpinMs`): on a local install the
    list arrived in 20 ms and the icon stopped before a full turn — a
    twitch, not feedback.

    For a user who asked for reduced motion there is NO rotation; the
    inherited colour is feedback enough. */
.rax-refresh[data-spin="true"] {
    animation: rax-spin 550ms linear infinite;
    color: var(--c-accent);
}

@keyframes rax-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .rax-refresh[data-spin="true"] {
        animation: none;
    }
}

.rax-shell .rz-header,
.rax-shell .rz-header .rz-text-caption,
.rax-shell .rz-header h6 {
    color: var(--c-header-ink);
}

/* The `.rz-sidebar-toggle` selector was REMOVED: the hamburger is no
   longer drawn, the brand mark took over its job. Leaving a selector
   that matches nothing would give the next reader the impression that
   a rule still exists. */
.rax-shell .rz-header .rz-button.rz-button-icon-only {
    color: var(--c-header-ink);
    background: transparent;
    border: none;
}

.rax-shell .rz-header .rz-button.rz-button-icon-only:hover {
    background: var(--c-header-2);
}

/* Brand: square mark + word. Inside the mark is a letter — it does not
   depend on the icon font, it shows everywhere. */
/*  The brand takes a colour SEPARATE from the strip (`--c-brand`, not
    `--c-header-ink`): the strip turned grey, the identity stayed navy.
    This is the one saturated spot. */
.rax-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-section);
    font-weight: var(--fw-medium);
    letter-spacing: 0.01em;
    color: var(--c-brand);
}

/*  THE MARK IS ALSO THE MENU BUTTON.

    Since it is a `<button>` the browser's own casing is reset: without
    border, padding and font family written, the square mark would turn
    into a system button in the middle of the strip.

    The size DID NOT CHANGE (22px) — as large as the target the hamburger
    left. A spot of identity must not shrink while turning into a button. */
.rax-brand-mark {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: var(--r-control);
    background: var(--c-brand);
    color: var(--c-on-accent);
    font-family: inherit;
    font-size: 12px;
    font-weight: var(--fw-medium);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--motion) var(--motion-ease);
}

/*  On hover it LIGHTENS, it does not darken.

    Elsewhere in the strip hover darkens with `--c-header-2`; here the
    background is already the darkest spot, going the same way would be
    invisible. The tone is one step up in the accent family. */
.rax-brand-mark:hover {
    background: var(--c-accent-2);
}

.rax-brand-mark:active {
    background: var(--c-accent-dk);
}

.rax-brand-mark:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/*  THE PRODUCT NAME IS A DOOR TOO: it opens the screen index.

    A link but it DOES NOT LOOK LIKE ONE — an underlined blue "RAX"
    would stain the strip's only saturated spot. It tells that it is
    clickable on hover, not all the time.

    WHY THE SELECTOR IS SO LONG — measured (K-109 addendum):

        .rz-header a, .rz-header a:hover, .rz-header a:focus
            → color: var(--rz-on-primary)        [material-base.css]

    Radzen paints EVERY link in the strip white (assuming a dark strip)
    and its selector is (0,2,1). `.rax-brand-name` (0,1,0) alone lost:
    "RAX" turned white and stayed invisible on the light strip. Radzen's
    three selectors are met one by one — `:hover` and `:focus` are
    written there too, overriding only the base state is not enough. */
.rax-shell .rax-brand a.rax-brand-name,
.rax-shell .rax-brand a.rax-brand-name:focus {
    color: var(--c-brand);
    text-decoration: none;
}

.rax-shell .rax-brand a.rax-brand-name:hover {
    color: var(--c-accent-2);
}

.rax-shell .rax-brand a.rax-brand-name:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--r-control);
}

/* Key figures: at the strip's right end, secondary tone, a divider on the left. */
/*  DIVIDER: identity on the left, commands on the right.

    The line used to be the key figures' `border-right`; when that
    turned into a button it moved to its own element. Same job, same
    place — the only difference is it no longer hangs on the edge of a
    text box.

    Its height is NOT the whole strip: between two 28px buttons a
    ceiling-to-floor line would split the strip in two. As tall as a
    button. */
.rax-headbar-sep {
    width: 1px;
    height: 20px;
    margin-inline: var(--sp-2);
    background: var(--c-header-line);
}

/* ------------------------------------------------------------
   STRIP POPUP (session info)

   The identity is no longer text but a button; its content opens here.
   Different from the settings DRAWER: that is a surface coming in from
   the right and holding settings; this is two read-only rows attached
   below the button.
   ------------------------------------------------------------ */

.rax-pop {
    position: relative;
    display: inline-flex;
}

/*  Two columns: label fixed, value flexes. Reading two rows one under
    the other, the eye must find the labels aligned. */
.rax-pop-row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: var(--sp-3);
}

.rax-settings-body > .rax-pop-row + .rax-pop-row {
    margin-block-start: var(--sp-4);
}

.rax-pop-key {
    font-size: var(--fs-caption);
    color: var(--c-ink-3);
}

.rax-pop-val {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--c-ink);
    overflow-wrap: anywhere;
}

/* While open the button stays pressed: with the popup closed it must be
   clear that clicking opens something, while open which button opened it. */
.rax-gear[data-on='true'] {
    background: var(--c-header-2);
    color: var(--c-header-ink);
}

/* Density picker on the dark strip: Radzen's default is designed for a
   light background, on the dark strip the buttons became invisible. */
.rax-shell .rz-header .rz-selectbar {
    background: var(--c-header-2);
    border: 1px solid var(--c-header-line);
    border-radius: var(--r-control);
    overflow: hidden;
}

.rax-shell .rz-header .rz-selectbar .rz-button {
    background: transparent;
    color: var(--c-header-ink-2);
    border: none;
    box-shadow: none;
}

.rax-shell .rz-header .rz-selectbar .rz-button:hover {
    color: var(--c-header-ink);
    background: transparent;
}

.rax-shell .rz-header .rz-selectbar .rz-button.rz-state-active,
.rax-shell .rz-header .rz-selectbar .rz-button.rz-selected {
    background: var(--c-accent);
    color: var(--c-on-accent);
}

/* ------------------------------------------------------------
   SIDEBAR

   White surface, a hairline on the right. The active item is marked
   with a LEFT STRIPE: marking with a fill creates a big colour spot in a
   15-row menu and draws the eye away from the data.
   ------------------------------------------------------------ */

/*  HEIGHT: `100%`, NOT `calc(100% - strip)`.

    The subtraction here was applied TWICE. The top strip is in the
    flow, so the sidebar and the body already start below it; the
    percentage resolves against that remaining space. With the strip
    height subtracted once more, both ended 46px above the window — a
    gap exactly the strip's height at the bottom of the screen.

    Measurement: window 720, the body's bottom edge 674. The difference
    is 46, i.e. `--header-bar-h`. Not a coincidence, a double subtraction.

    `top` was unnecessary too: both are `position: static`, where `top`
    does nothing. */
.rax-shell .rz-sidebar {
    background: var(--c-sidebar);
    border-right: 1px solid var(--c-sidebar-line);
    box-shadow: none;
    width: var(--nav-w);
    height: 100%;
    padding-block: var(--sp-3);
}

/*  ZERO ROOM WHEN CLOSED.

    The layout is a CSS grid: `grid-template-columns: auto 1fr`. If the
    sidebar width is not zeroed the first column keeps its place and the
    body takes its 1fr share — the content leans left but on the right a
    gap EXACTLY THE SIDEBAR'S WIDTH remains.

    The three besides `width` are needed too: without zeroing padding and
    border the column stays ~17px instead of 0, without
    `overflow: hidden` the menu text inside overflows. */
.rax-shell .rz-sidebar.rz-sidebar-collapsed {
    width: 0;
    min-width: 0;
    padding-inline: 0;
    border-right: none;
    overflow: hidden;
}

/*  THE SCREEN'S ONLY BACKGROUND: THE CANVAS.

    For one round it was pulled to white (`--c-surface`); the result was
    a huge white page in the middle of the screen with an unwanted step
    between it and the sidebar. What was wanted was the exact opposite:
    the shell and the work area on THE SAME background.

    The background is now `--c-canvas` everywhere — the sidebar too
    (`--c-sidebar` is already bound to it), the work area and the cards.
    White stayed only on things "on top of the paper": modal, dropdown
    panel, grid row. */
.rax-shell .rz-body {
    background: var(--c-canvas);
    padding: 0;
    height: 100%;
    overflow: hidden;
    /*  A grid item's default minimum width is its CONTENT. Not reset, a
        wide grid or a long tab strip inflates the column; when the column
        cannot shrink the overflow spills out. */
    min-width: 0;
}

/* ------------------------------------------------------------
   MENU SEARCH

   On top of the sidebar, like part of the menu: no card or shadow of
   its own, it starts at the same horizontal line as the list below.
   ------------------------------------------------------------ */

.rax-navsearch {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 var(--sp-3) var(--sp-3);
}

.rax-navsearch-input {
    width: 100%;
    min-height: var(--row-h);
    padding-inline: var(--sp-3);
    padding-inline-end: var(--row-h);
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-control);
    background: transparent;
    color: var(--c-ink);
    font-family: inherit;
    font-size: var(--fs-table);
    transition: border-color var(--motion) var(--motion-ease);
}

.rax-navsearch-input::placeholder {
    color: var(--c-ink-3);
}

.rax-navsearch-input:hover {
    border-color: var(--c-ink-3);
}

.rax-navsearch-input:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: none;
}

.rax-navsearch-input:focus-visible {
    outline: none;
    box-shadow: none;
}

/* The browser's own clear cross is hidden: two crosses appeared and
   they sat in different places depending on the browser. */
.rax-navsearch-input::-webkit-search-cancel-button {
    display: none;
}

.rax-navsearch-clear {
    position: absolute;
    inset-inline-end: 2px;
    display: grid;
    place-items: center;
    width: calc(var(--row-h) - 4px);
    height: calc(var(--row-h) - 4px);
    padding: 0;
    border: none;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--c-ink-3);
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 16px;
    cursor: pointer;
}

.rax-navsearch-clear:hover {
    color: var(--c-ink);
}

.rax-shell .rz-sidebar .rz-panel-menu,
.rax-shell .rz-sidebar .rz-panel-menu .rz-navigation-menu,
.rax-shell .rz-sidebar .rz-panel-menu .rz-navigation-item,
.rax-shell .rz-sidebar .rz-panel-menu .rz-navigation-item-wrapper {
    background: transparent;
}

.rax-shell .rz-sidebar .rz-panel-menu .rz-navigation-item {
    border-block-end: none;
}

/* A group title is a section label, not a clickable row. */
.rax-shell .rz-panel-menu > .rz-navigation-item > .rz-navigation-item-wrapper > .rz-navigation-item-link {
    min-height: calc(var(--row-h) - 2px);
    padding-inline: var(--sp-4);
    background: transparent;
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-ink-3);
}

.rax-shell .rz-panel-menu > .rz-navigation-item > .rz-navigation-item-wrapper > .rz-navigation-item-link:hover {
    background: transparent;
    color: var(--c-ink-2);
}

/* A subfolder opens its own section too. Example: the Offer folder
   inside Sales must be set apart from the Sales screens above it. */
.rax-shell .rz-panel-menu .rax-nav-branch > .rz-navigation-item-wrapper > .rz-navigation-item-link {
    color: var(--c-ink-3);
    font-weight: var(--fw-medium);
}

/* Leaf item */
.rax-shell .rz-panel-menu .rz-navigation-menu {
    --rax-nav-indent: var(--sp-5);
}

.rax-shell .rz-panel-menu .rz-navigation-menu > .rz-navigation-item {
    margin-block: 0;
}

.rax-shell .rz-panel-menu .rz-navigation-menu .rz-navigation-menu {
    --rax-nav-indent: calc(var(--sp-5) + var(--sp-4));
}

.rax-shell .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu {
    --rax-nav-indent: calc(var(--sp-5) + var(--sp-4) + var(--sp-4));
}

.rax-shell .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu {
    --rax-nav-indent: calc(var(--sp-5) + var(--sp-4) + var(--sp-4) + var(--sp-4));
}

.rax-shell .rz-panel-menu .rz-navigation-menu .rz-navigation-item-link {
    position: relative;
    padding-inline-start: var(--rax-nav-indent);
    gap: var(--sp-3);
    background: transparent;
    color: var(--c-ink);
    border-radius: 0;
}

.rax-shell .rz-panel-menu .rz-navigation-menu .rz-navigation-item-link::before {
    content: "";
    position: absolute;
    inset-block: 3px;
    inset-inline-start: 0;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: transparent;
}

/*  HOVER SPEAKS THE GRID'S LANGUAGE.

    First there was only a neutral fill (`--c-surface-2`) and the menu
    spoke differently from the grid: moving along rows the user saw a
    navy stripe + tone, moving in the menu a flat grey.

    Now both are the same: the same tone (`--c-accent-bg`), the same
    left stripe (`--c-accent`). The hover stripe is at HALF opacity —
    the temporary and the permanent must not look equally strong. */
.rax-shell .rz-panel-menu .rz-navigation-menu .rz-navigation-item-link:hover {
    background: var(--c-accent-bg);
    color: var(--c-accent);
}

.rax-shell .rz-panel-menu .rz-navigation-menu .rz-navigation-item-link:hover::before {
    background: var(--c-accent);
    opacity: .45;
}

/*  IT STICKS ON CLICK.

    THERE WERE THREE SEPARATE DEFECTS, each left this rule dead:

    1. Nothing produced the class. Radzen computes activeness from
       `Path`, while the menu uses `Click` (the reason is in RaxNav). Now
       the source is the `Selected` parameter, fed from the work area's
       active tab.

    2. THE SELECTOR WAS WRITTEN FOR A CLASS THAT DOES NOT EXIST. The rule
       targeted `.rz-navigation-item-link-active`; Radzen produces NO such
       class.

    3. RADZEN'S CLASS WAS NOT RELIABLE EITHER. With `Selected`,
       `rz-navigation-item-wrapper-active` can be produced but it only
       stays when arriving by address: when the menu is CLICKED Radzen
       recomputes its selection model and clears them all (this menu has
       no `Path`). So the mark vanished exactly when it was most expected.

    Result: instead of racing Radzen's model we STEPPED OUT of it.
    `RaxNav` puts the class (`rax-nav-active`), its source is the work
    area's active tab. Radzen's own state no longer concerns this rule.

    The stripe is at full opacity: the permanent is stronger than the
    temporary. */
.rax-shell .rz-panel-menu .rz-navigation-menu
    .rax-nav-active .rz-navigation-item-link {
    background: var(--c-accent-bg);
    color: var(--c-accent);
    font-weight: var(--fw-medium);
}

.rax-shell .rz-panel-menu .rz-navigation-menu
    .rax-nav-active .rz-navigation-item-link::before {
    background: var(--c-accent);
    opacity: 1;
}

/*  Icon.

    THE NEGATIVE MARGIN IS NEUTRALISED (K-052). Radzen gives the leaf
    item a large left padding and pulls the icon into it with a negative
    margin. We reduced the padding to `--sp-5` but left the compensation:
    the icon fell OUTSIDE the menu on the left and was clipped by
    `overflow: hidden` — on screen a thin slice showed instead of the
    icon.

    The value scaled with density (2.25 times the root font size), so in
    the "Compact" tier it escaped even further. */
.rax-shell .rz-panel-menu .rz-navigation-item-icon {
    color: var(--c-ink-3);
    font-size: calc(var(--fs-table) + 3px);
    margin-inline-start: 0;
}

.rax-shell .rz-panel-menu .rax-nav-branch > .rz-navigation-item-wrapper
    > .rz-navigation-item-link .rz-navigation-item-icon {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* This was the second use of the same dead class; moved to the real name.
   On hover the icon turns to the accent too — tone, line and icon move
   together. */
.rax-shell .rz-panel-menu .rax-nav-active .rz-navigation-item-icon,
.rax-shell .rz-panel-menu .rz-navigation-item-link:hover .rz-navigation-item-icon {
    color: var(--c-accent);
}

/* ------------------------------------------------------------
   WORK AREA AND TABS

   The tab strip sits on the background, the active tab rises to the
   surface and MERGES with the content below — it has no bottom border.
   Like pulling a paper out of a folder.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   HEIGHT CHAIN — the tab strip is FIXED, the content scrolls

   Measurement: `.rz-body` 628px, the `.rax-tabbar` inside it 817px. So
   the work area did not fit on the screen and what scrolled was the
   BODY — the tab strip went up with it and disappeared off screen in a
   long list. The user had to go back to the top to see which tab they
   were in.

   The fix is a chain: the body no longer scrolls, every link takes its
   height from above and scrolling goes down to the INNERMOST panel.

       rz-body (overflow:hidden)
         └ rax-tabbar     height:100%
             └ rax-tabs       flex:1, min-height:0
                 ├ rz-tabview-nav      flex:none   ← FIXED
                 └ rz-tabview-panels   flex:1, overflow:auto  ← SCROLLS

   `min-height: 0` is needed on every link of the chain: a flex item's
   default minimum size is its content, so without the reset the panel
   does not shrink and the overflow spills out again.
   ------------------------------------------------------------ */

/* The body's `overflow: hidden` is above, with the shell sizes: height
   and scrolling are two faces of the same decision. */

/* Container: the arrows sit on top of the strip. */
.rax-tabbar {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* The RadzenTabs root is the middle of the chain: it flexes vertically too. */
.rax-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* THE STRIP IS ONE LINE. What does not fit scrolls, it does not wrap.
   The scrollbar is hidden — navigation is with the arrows and the wheel. */
.rax-tabs .rz-tabview-nav {
    /* The strip is FRAME, not data: it does not shrink, does not scroll, stays in place. */
    flex: none;
    background: transparent;
    border-bottom: 1px solid var(--c-line);
    /* The first tab should start in line with the left edge of the card
       below: both are --shell-gap inside. */
    padding-inline: var(--shell-gap);
    /* The notch sits at the right end: the last tab must not slide under it. */
    padding-inline-end: var(--sp-5);
    padding-block: 0;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-padding-inline: var(--sp-6);
    /* scroll-behavior is left out ON PURPOSE: declared, it also overrides
       scrollTo/scrollBy calls and depending on the environment sometimes
       does not scroll at all. The decision is in rax.js, in one place. */
}

.rax-tabs .rz-tabview-nav::-webkit-scrollbar {
    display: none;
}

/* Minimal tab: no box, no fill. The BOTTOM STRIPE says which is active.
   The folder-ear look turned into noise with fifteen tabs — fifteen
   frames, fifteen corners. */
.rax-tabs .rz-tabview-nav li {
    flex: none;
    border: none;
    border-radius: 0;
    margin: 0;
    background: transparent;
    box-shadow: inset 0 -2px 0 0 transparent;
    transition: box-shadow var(--motion) linear, color var(--motion) linear;
}

.rax-tabs .rz-tabview-nav li:hover {
    background: transparent;
    box-shadow: inset 0 -2px 0 0 var(--c-line-2);
}

.rax-tabs .rz-tabview-nav li.rz-tabview-selected {
    background: transparent;
    box-shadow: inset 0 -2px 0 0 var(--c-accent);
}

/* The tab header is a CLASSLESS <button>. In Radzen 11 it is not an <a> —
   rules targeting `li a` never matched and the tab height stayed at
   Radzen's default (39px). `a` is still left: if the version changes the
   rule must not die silently. */
.rax-tabs .rz-tabview-nav li > button,
.rax-tabs .rz-tabview-nav li > a {
    padding: 0 var(--tab-px);
    min-height: var(--tab-h);
    height: var(--tab-h);
    display: flex;
    align-items: center;
    font-size: var(--fs-table);
    font-family: inherit;
    color: var(--c-ink-2);
    white-space: nowrap;
    background: transparent;
    border: none;
    cursor: pointer;

    /*  NO UPPERCASE — a tab is written THE SAME as the menu.

        Radzen turns the tab title to uppercase. The tab and the menu show
        the same thing ("Siparişler"); written differently, the user reads
        the same screen as two different names. Besides, uppercasing is
        risky in Turkish: the tab title can fall into the `i`/`İ` distinction.

        Uppercase belongs to a role in this interface — places that are
        NOT DATA like the column header, section label, panel title. A tab
        name is data: the name of a record or a screen. */
    text-transform: none;
    letter-spacing: 0;
}

.rax-tabs .rz-tabview-nav li.rz-tabview-selected > button,
.rax-tabs .rz-tabview-nav li.rz-tabview-selected > a {
    color: var(--c-accent);
    font-weight: var(--fw-medium);
}

/*  THE TAB ICON IS SHOWN (K-233).

    There was a `display: none` here and its reason was «surplus in the
    minimal look, the text carries the identity». The owner's decision
    reversed it: with fifteen tabs you need to tell the KIND apart before
    reading the name — which is a list, which a record, which the
    dashboard.

    THE ICON WAS ALREADY DRAWN: `RaxWorkspace` writes `tab.Icon` into the
    tab header and every call site passes it (`NavIcon`, `page.Icon`). So
    both ends of the contract were bound, with a single CSS line in
    between — K-169's lesson, reversed this time: what looked dead was not
    the code but the rule.

    THE SIZE COMES FROM THE MENU: the tab's icon is as large as the same
    screen's icon in the sidebar (`--fs-table + 3px`). The colour is
    INHERITED: if the selected tab is in the accent colour its icon is too,
    one author. */
.rax-tabs .rz-tabview-nav li .rax-tab-title > .rz-icon,
.rax-tabs .rz-tabview-nav li .rax-tab-title > .rzi {
    font-size: calc(var(--fs-table) + 3px);
    line-height: 1;
    color: inherit;
    opacity: 0.75;
}

/*  Full tone on the selected tab: the tab already turns to the accent
    colour and a faded icon looks incomplete next to that highlight. */
.rax-tabs .rz-tabview-nav li.rz-tabview-selected .rax-tab-title > .rzi {
    opacity: 1;
}

/* ------------------------------------------------------------
   SCROLL ARROWS

   Visible only while there is overflow and a direction to go.
   CSS makes the decision, rax.js measures and writes the attribute.
   ------------------------------------------------------------ */

.rax-tabscroll {
    position: absolute;
    top: 0;
    z-index: 2;
    display: none;
    place-items: center;
    width: var(--sp-5);
    height: var(--tab-h);
    padding: 0;
    border: none;
    cursor: pointer;
    color: var(--c-ink-2);
    background: var(--c-canvas);
    font-family: 'Material Symbols', 'Material Icons';
    font-size: calc(var(--fs-table) + 3px);
    line-height: 1;
}

.rax-tabscroll:hover {
    color: var(--c-accent);
}

.rax-tabscroll-start { inset-inline-start: 0; }

/* The right arrow is LEFT of the notch: the notch always stays, the arrow
   only appears on overflow. With the order reversed the notch's place
   would move with the number of tabs — a button that cannot settle into
   muscle memory. */
.rax-tabscroll-end   { inset-inline-end: var(--sp-5); }

/* The strip must not look cut off where the arrow ends: a transition
   fading towards the edge says there are tabs underneath. */
.rax-tabscroll-start { box-shadow: 6px 0 6px -4px var(--c-edge); }
.rax-tabscroll-end   { box-shadow: -6px 0 6px -4px var(--c-edge); }

.rax-tabbar[data-overflow='true'] .rax-tabscroll { display: grid; }
.rax-tabbar[data-at-start='true'] .rax-tabscroll-start { display: none; }
.rax-tabbar[data-at-end='true']   .rax-tabscroll-end   { display: none; }

/* While the arrow is visible the strip must not slide under it. There
   are TWO things on the right (arrow + notch), so the right padding is
   doubled. */
.rax-tabbar[data-overflow='true'] .rz-tabview-nav {
    padding-inline: var(--sp-5);
    padding-inline-end: calc(var(--sp-5) * 2);
}

/* ------------------------------------------------------------
   NOTCH — lifts the top strip

   The same size and background as the scroll arrows: all three are
   things sitting on the strip that are NOT tabs. The difference is that
   it is always visible and has a state.
   ------------------------------------------------------------ */

.rax-tabnotch {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: var(--sp-5);
    height: var(--tab-h);
    padding: 0;
    border: none;
    cursor: pointer;
    color: var(--c-ink-3);
    background: var(--c-canvas);
    font-family: 'Material Symbols', 'Material Icons';
    font-size: calc(var(--fs-table) + 3px);
    line-height: 1;
    transition: color var(--motion) var(--motion-ease),
                transform var(--motion) var(--motion-ease);
}

.rax-tabnotch:hover {
    color: var(--c-accent);
}

/*  ONE GLYPH, FLIPPED.

    Writing two icons and hiding one would also work, but then Blazor
    would write the glyph and JS the state — with one round of difference
    between them the arrow would point the wrong way. The flip decision is
    entirely in CSS. */
.rax-shell[data-strip='off'] .rax-tabnotch {
    transform: rotate(180deg);
}

/*  WITH THE STRIP CLOSED THE TAB STRIP ENDS LEFT OF THE GROUP.

    MARGIN, NOT PADDING, and that distinction was learned by measuring.
    First `padding-inline-end` was written; padding is part of the
    scrolled CONTENT, so it made room only when scrolled to the end. With
    the scroll in the middle the tabs went under the group and
    `elementFromPoint` returned `.rax-gear` where the selected tab was —
    the tab was there but could not be clicked.

    A margin narrows the scroll BOX: whatever the scroll position, a tab
    never goes under the group.

    No extra room is made for the scroll arrows — the arrow already sits
    ON TOP of the last tab (with its own fade), not outside the strip.

    The width is NOT KNOWN and cannot be: the number of buttons in the
    group depends on permissions (one button fewer without dashboard
    permission) and the density setting scales all of them. Writing the
    number would silently be wrong at the next permission. `rax.js` writes
    the size (`--rax-strip-w`), CSS makes the decision — the same pattern
    as the scroll arrows and the grid selection column. The fallback is
    `0px`: if the size is not yet written the layout does not break. */
.rax-shell[data-strip='off'] .rz-tabview-nav {
    margin-inline-start: var(--rax-brand-w, 0px);
    margin-inline-end: calc(var(--rax-strip-w, 0px) + var(--sp-5));
}

/*  The scroll arrows also move to the INNER side of the groups: their
    place is "where the strip ends", not "the window's edge". Left where
    they were, they would overlap the groups and make the buttons below
    unclickable. */
.rax-shell[data-strip='off'] .rax-tabscroll-start {
    inset-inline-start: var(--rax-brand-w, 0px);
}

.rax-shell[data-strip='off'] .rax-tabscroll-end {
    inset-inline-end: calc(var(--rax-strip-w, 0px) + var(--sp-5));
}

.rax-tabs .rz-tabview-nav li .rz-tabview-title,
.rax-tabs .rz-tabview-nav li .rzi {
    color: inherit;
}

/* The content snuggles up to the shell: all the space between the tab
   strip, sidebar and card is this ONE padding.
   Radzen also gives each panel 1rem padding (13px in the compact tier);
   without resetting it the token here has no effect — measured, the card
   sat 16px inside instead of 2px. */
/*  SCROLLING DOES NOT END HERE, it goes one link further in.

    First the panel scrolled; result: in a long list the command strip
    (New/Edit/Delete) escaped upward and the pager downward. Yet both
    are FRAME — things that must stay on screen. Only the ROWS should
    scroll.

    The grid already had its own scroll area and pager
    (`.rz-data-grid-data` + `.rz-pager`); the only thing missing was a
    height limit — no link took its height from above and the grid grew
    as tall as its content. */
/*  The tab body does NOT PAINT its own background: whatever `.rz-body`
    above has. Defining two colours in two places would turn changing one
    and forgetting the other into a silent defect.

    NO TOP BORDER EITHER. Measured: there were two separate 1px lines
    BELOW the tabs — the strip's own bottom border (ours) and the body's
    top border (Radzen, `--rz-border-base-300`). Stacked they became a
    2px band.

    The line stays on the STRIP, not the body: it is the tab strip's
    baseline, not the body's ceiling. The highlight under the active tab
    sits on it too.

    A CLASS WAS ADDED TO THE SELECTOR, and it was needed: Radzen's rule is
    `.rz-tabview.rz-tabview-top > .rz-tabview-panels` — two classes on the
    same element + the child's class, i.e. THREE classes (0,3,0). The
    two-class selector here (0,2,0) lost even though the file loads later;
    measured, `border-top` stayed 1px. With `.rax-shell` added the
    specificity is equal and load order wins. */
.rax-shell .rax-tabs .rz-tabview-panels {
    padding: var(--shell-gap);
    background: transparent;
    border-top: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.rax-tabs .rz-tabview-panel {
    padding: 0;
    height: 100%;
    min-height: 0;
}

/* ------------------------------------------------------------
   TAB DRAGGING (K-113)

   rax.js writes the marks, this place makes the decision — while
   dragging the C# state cannot change (if the strip is redrawn the
   browser cancels the drag), hence attribute + CSS.
   ------------------------------------------------------------ */

/* The dragged tab stays FADED in place, not hidden: the user must be
   able to see where it came from. Hiding it would shift the strip and
   the remaining tabs would slide under the cursor. */
.rax-tabs .rz-tabview-nav li[data-dragging='true'] {
    opacity: 0.4;
}

/* The drop line. There is NO tab box (the minimal strip decision), so
   instead of framing the target a thin line is drawn at the EDGE it will
   land on — the same ink as the selected indicator below. */
.rax-tabs .rz-tabview-nav li[data-drop] {
    position: relative;
}

.rax-tabs .rz-tabview-nav li[data-drop]::after {
    content: '';
    position: absolute;
    inset-block: var(--sp-1) 0;
    width: 2px;
    background: var(--c-accent);
    pointer-events: none;
}

.rax-tabs .rz-tabview-nav li[data-drop='before']::after { inset-inline-start: 0; }
.rax-tabs .rz-tabview-nav li[data-drop='after']::after  { inset-inline-end: 0; }

/* While dragging the crosses fade: buttons appearing as the cursor
   passes over the tabs confuse the target and read like a drop point by
   mistake. */
.rax-tabbar[data-drag='true'] .rax-tab-close {
    opacity: 0 !important;
}

/* In the minimal strip the close cross is only on the active tab and on
   hover. With fifteen crosses always visible the strip turns into a
   field of buttons. */
.rax-tabs .rz-tabview-nav li .rax-tab-close {
    opacity: 0;
    margin-inline-start: var(--sp-1);
    transition: opacity var(--motion) linear;
}

.rax-tabs .rz-tabview-nav li:hover .rax-tab-close,
.rax-tabs .rz-tabview-nav li.rz-tabview-selected .rax-tab-close {
    opacity: 0.5;
}

.rax-tabs .rz-tabview-nav li .rax-tab-close:hover {
    opacity: 1;
}

/* ------------------------------------------------------------
   SURFACE CARD

   List and record screen. It used to be a WHITE paper on the
   background; now it is the same colour as the background and the only
   thing making it paper is the border.

   The screen was wanted to have one background (see `.rz-body`): with
   the card white most of the screen would still be white, because the
   card covers the whole work area.

   The border and corner STAY: with the colour split gone they are the
   only thing saying where the work area begins. The shadow stays too,
   but it is already at the most muted tier (`--sh-1`).

   The fill reads `--c-card` (K-306), whose default IS the canvas — the
   decision above is unchanged; a design may now choose a white card on
   a grey desk without whitening the desk.
   ------------------------------------------------------------ */

.rax-list,
.rax-record {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    box-shadow: var(--sh-1);
    overflow: hidden;
}

/*  The card takes its height FROM ABOVE, not from its content.

    The last two links of the chain are here: the card fills the screen,
    the command strip and the pager do not shrink, the grid between them
    takes what is left. Scrolling is there too — `.rz-data-grid-data` was
    already `overflow: auto`, its function showed once its height was
    limited. */
/*  `container-type` FOR THE NARROW STRIP (K-241): the commands' labels
    drop by the list's OWN width, not the screen's — a list narrowed with
    the menu open follows the same rule. `inline-size` covers only the
    width; the list is already full width and has no content-based height. */
.rax-list {
    gap: 0 !important;
    height: 100%;
    min-height: 0;
    container: rax-list / inline-size;
    /* THE STRIP'S HEIGHT IS ONE TOKEN (K-320): the strip is drawn this tall and
       the preview panel starts exactly under it. Two separate sums drifted —
       the panel began 8px above the strip's bottom line and covered it. */
    --strip-h: var(--bar-h);
}

/*  ON A NARROW STRIP THE LABEL DROPS, THE ICON STAYS (K-241).

    Five commands with labels want ~360 px. The strip is set to wrap but
    its height is fixed: on a 375 px phone «Yenile» dropped to a second
    line and landed ON TOP of the grid's header row (108–134 px, the grid
    at 118 — measured).

    The label is NOT `display: none` but visually hidden: that text is the
    button's accessible name — deleted, a screen reader would just say
    «button». The button shrinks to a square: the touch target is the
    height of a row. */
@container rax-list (max-width: 520px) {
    .rax-list .rz-button:has(.rz-button-icon-left) .rz-button-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .rax-list .rz-button:has(.rz-button-icon-left) {
        min-width: var(--row-h);
        padding-inline: 0;
        justify-content: center;
    }

    .rax-list .rz-button:has(.rz-button-icon-left) .rz-button-icon-left {
        margin-inline: 0;
    }

    /*  THE ROW BECOMES A CARD (K-242).

        At 375 px one of nine columns was fully visible; the rest was
        behind horizontal scrolling. The row is now a card: the selection
        box on the left, on the right the code (small), the record's name
        (bold) and four labelled fields. NOT a new view type — another
        drawing of the same grid, the same row; paging, selection and row
        clicks work as they are.

        Label and role are on the cell (`data-label`, `data-role` —
        DynamicList.CellIdentity): with the header row hidden «Vergi no» now
        sits next to the value.

        THE HEADER BECOMES A CHIP STRIP (K-287). K-242 hid it and the column
        filter went with it: to filter on a phone you had to go back to the
        wide layout. Now each column is a chip — its name sorts, its funnel
        opens Radzen's own filter popup, the same one the wide grid uses. The
        strip scrolls sideways; the cards below do not. */
    .rax-list .rz-grid-table > colgroup {
        display: none;
    }

    .rax-list .rz-grid-table > thead {
        display: block;
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--c-surface);
        border-bottom: 1px solid var(--c-line);
    }

    .rax-list .rz-grid-table > thead > tr {
        display: flex;
        gap: var(--sp-1);
        overflow-x: auto;
        padding: var(--sp-1) var(--pad);
        scrollbar-width: none;
    }

    .rax-list .rz-grid-table > thead > tr > th {
        display: block;
        flex: none;
        width: auto !important;
        min-width: 0 !important;
        height: auto;
        padding: 0 var(--sp-1);
        /* The chip is the right-click surface's reference: `static` made the
           surface span the whole strip and swallow every funnel (measured). */
        position: relative;
        border: 1px solid var(--c-line-2) !important;
        border-radius: var(--r-control);
        box-shadow: none;
        background: var(--c-surface-2);
    }

    /* Select-all has no meaning on a strip of chips; the cards select one by one. */
    .rax-list .rz-grid-table > thead > tr > th:first-child:has(.rz-chkbox) {
        display: none;
    }

    /*  THE CHIP'S FUNNEL. The wide grid reaches the filter through the
        header's right-click menu (K-232); a phone has no right click. The
        button is ours (DynamicList), not Radzen's hidden one: it opens the
        filter through the same path as the menu (`rax.grid.openColumnFilter`),
        which proved reliable where a click on Radzen's button did not
        (measured: the popup opened once in four). It stands above the
        right-click surface, or the tap would land on the surface. */
    .rax-list .rz-grid-table thead th .rax-colfilter {
        display: inline-grid;
        position: relative;
        z-index: 3;
    }

    .rax-list .rz-grid-table thead th:has(.rz-grid-filter-active) .rax-colfilter {
        color: var(--c-accent);
    }

    .rax-list .rz-grid-table,
    .rax-list .rz-grid-table > tbody {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    .rax-list .rz-grid-table .rz-data-row {
        display: grid;
        grid-template-columns: var(--row-h) minmax(0, 1fr);
        padding-block: var(--sp-2);
        padding-inline-end: var(--pad);
        border-bottom: 1px solid var(--c-field-line);
    }

    .rax-list .rz-grid-table .rz-data-row > td {
        grid-column: 2;
        order: 3;
        display: flex;
        gap: var(--sp-2);
        width: auto !important;
        height: auto;
        min-height: 0;
        padding: 1px 0;
        border: 0;
        position: static;
        inset: auto;
        /* The size comes from ONE lever: the cell read Radzen's body size
           (13 px), the data inside it `--fs-table` (12 px) — the label came
           out LARGER than the value (measured; K-229's two authors, in
           small). */
        font-size: var(--fs-table);
        line-height: 1.35;
        text-align: start !important;
        background: transparent;
    }

    /*  The cell data took its height from `--row-h` (26 px): on the card
        every line grew to 28 px (measured). On the card the text sets the
        height. */
    .rax-list .rz-grid-table .rz-data-row > td:not(.rax-select-cell) > .rz-cell-data {
        min-width: 0;
        height: auto;
        line-height: inherit;
    }

    /*  The selection box's layer sits on the cell with
        `position: absolute; inset: 0`. The `position: static` that switched
        off stickiness stopped the cell being the reference and the box fell
        to pixel 2323 (measured) — the card could not be selected. The cell
        is relative and square. */
    .rax-list .rz-grid-table .rz-data-row > td.rax-select-cell {
        grid-column: 1;
        grid-row: 1 / span 3;
        order: 0;
        align-self: start;
        justify-content: center;
        position: relative;
        width: var(--row-h) !important;
        height: var(--row-h);
        /* The frozen column's divider (border + shadow) drew a meaningless
           vertical line on the card; Radzen's rule is ahead in specificity. */
        border: 0 !important;
        box-shadow: none;
    }

    .rax-list .rz-grid-table .rz-data-row > td[data-role='code'] {
        order: 1;
        color: var(--c-ink-3);
        font-family: var(--font-code);
    }

    .rax-list .rz-grid-table .rz-data-row > td[data-role='title'] {
        order: 2;
        font-weight: 600;
    }

    .rax-list .rz-grid-table .rz-data-row > td[data-label]:not([data-role])::before {
        content: attr(data-label);
        flex: none;
        inline-size: 7.5em;
        color: var(--c-ink-3);
        /* A longer label is cut, not spilled (K-331): «Görüşme süresi (dk)»
           ran over its own value and read «Görüşme süresi (d0k)». */
        box-sizing: border-box;
        padding-inline-end: 0.5em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*  The card stops at four labelled fields: selection + code + name +
        four = seven cells. More makes the card taller than the screen; the
        whole record is in the form. */
    .rax-list .rz-grid-table .rz-data-row > td:nth-child(n+8):not([data-role]) {
        display: none;
    }
}

/* The command strip is the card's header: search on the left, commands
   on the right. The vertical padding was HALVED — the strip is a frame,
   not data, and should be as thin as the tab itself. The horizontal
   padding stayed at --pad: the search box must start in line with the
   card's edge. */
.rax-list > .rz-row:first-child {
    box-sizing: border-box;
    margin: 0;
    /* The height is one token (--strip-h, K-320): the strip and the preview
       panel's top read it. In the classic shell it is the pager's --bar-h —
       both are the card's frame; the new shell gives the strip more room. */
    height: var(--strip-h);
    min-height: var(--strip-h);
    align-items: center;
    padding-block: 0;
    padding-inline: var(--pad);
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-line);
    /* THE STRIP DOES NOT SHRINK: a frame that must stay on screen. */
    flex: none;
}

/* The grid takes the remaining room and scrolls inside itself. */
.rax-list .rz-data-grid {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

/* The pager is frame too: you do not search for it to reach the last
   row, it always stays at the bottom of the screen. */
.rax-list .rz-data-grid > .rz-pager {
    flex: none;
}

/*  RECORD TAB: the frame is fixed, the BODY scrolls.

    Scrolling is NOT on the card itself but on the form's body: if the
    whole card scrolled, the Save/Cancel at the top right would go with
    it. The same pattern as the list — the command strip is frame, the
    data scrolls. */
.rax-record {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.rax-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Command strip: THE SAME language as the list's strip — same height,
   same background, same bottom line. The eye moving between the two
   screens finds the same thing in the same place. */
/*  THE SPACE BETWEEN BUTTONS IS THE SAME AS THE LIST'S (K-232 addendum).

    The strip wrote `--sp-3` (8px), while the list's command strip reads
    Radzen's `--rz-gap`, i.e. the `--gap` token (2px in the compact tier).
    Measured and seen side by side: two strips of the same screen, two
    different rhythms.

    Spacing is a density decision too: writing a fixed 8px meant a user
    who chose compact mode would not see that choice in the form. */
.rax-form-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gap);
    flex: none;
    padding: calc(var(--pad) / 2) var(--pad);
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-line);
}

/* The space pushing the slot and the commands apart: navigation stays on
   the left, save on the right. */
.rax-form-bar-space {
    flex: 1 1 auto;
}

/* ------------------------------------------------------------
   THE RECORD DIALOG CARRIES THE SAME STRIP AS THE TAB (K-161)

   The same record can open in two places: in a tab and in a modal. Both
   are drawn by `DynamicForm`, so the strip is already THE SAME component
   — but in the dialog it looked different.

   The cause was measured: `.rz-dialog-content` gives 19.5px padding and
   the strip stayed INSIDE that padding. In a 380px dialog the strip was
   359.5px — detached from the edges, like a separate panel. In a tab the
   strip goes edge to edge, with its divider line below.

   The padding is NOT REMOVED, IT MOVES: `.rax-form-body` already carries
   its own 12px (measured), so the fields still breathe. The only change
   is the strip sitting at the edge.

   SCOPED WITH `:has()`, no general rule was written: the
   `.rz-dialog-content` padding is RIGHT for the designer, the overlay
   editor and the line picker. Only a dialog containing a record form is
   different.

   THERE IS NO PAGE COUNTER IN THE DIALOG and there should not be: the
   dialog opens for ONE record, there are no neighbours. The `Nav` slot is
   already passed empty (`DynamicList`), so this is not a CSS decision —
   it is only recorded here.
   ------------------------------------------------------------ */

.rz-dialog-content:has(> .rax-form) {
    padding: 0;
}

/* ------------------------------------------------------------
   NAVIGATING BETWEEN RECORDS

   Arrow, position, arrow. Without the position text the arrows do not
   tell the user where in the list they are — how long "next" will go on
   is unknown.
   ------------------------------------------------------------ */

.rax-recnav {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.rax-recnav-btn {
    display: grid;
    place-items: center;
    width: var(--row-h);
    height: var(--row-h);
    padding: 0;
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-control);
    background: var(--c-surface);
    color: var(--c-ink-2);
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 18px;
    cursor: pointer;
    transition: background-color var(--motion) var(--motion-ease),
                border-color var(--motion) var(--motion-ease),
                color var(--motion) var(--motion-ease);
}

.rax-recnav-btn:hover:not(:disabled) {
    background: var(--c-touch);
    border-color: var(--c-ink-3);
    color: var(--c-ink);
}

/* At the end of the list the button does NOT VANISH, it fades: a control
   that does not move beats one that does nothing when clicked. */
.rax-recnav-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.rax-recnav-pos {
    min-width: 4.5em;
    text-align: center;
    font-size: var(--fs-caption);
    font-variant-numeric: var(--num-variant);
    color: var(--c-ink-3);
    white-space: nowrap;
}

/*  THE ERROR BAND IS GONE (K-230). It had been written that «when the
    user saves in the middle of the form, Kaydedilemedi must not stay
    outside the screen» and the fixed band did NOT SOLVE that: the band
    was at the top of the form, the eye in the middle. A record-level
    error is now in the middle of the screen, on the single notice
    surface (`.rax-notice`). */

/*  The body uses `--form-pad`, not `--pad` (see tokens.css): the command
    strip stays in line with the list's strip, only the filled-in area
    starts further in. */
/*  THE SCROLLBAR'S PLACE IS FIXED (K-238). The bar was born only when the
    content overflowed and the moment it was born every field's right
    edge moved 10 px in: when a line was added, a section opened, the
    skeleton turned into the real form (708 → 698, measured). The room is
    now always reserved. */
.rax-form-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    display: flex;
    flex-direction: column;
    gap: var(--form-gap);
    padding: var(--form-pad);
}

/* The search box has a border: Radzen's --rz-input-border default is
   `none`, on the card background a borderless box disappears. */
.rax-list .rz-textbox {
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-control);
    background: var(--c-surface);
    padding-inline: var(--sp-3);
}

/* One frame (see rax.css, `.rax-pagerx-input:focus`). */
.rax-list .rz-textbox:focus {
    border-color: var(--c-accent);
    box-shadow: none;
    outline: none;
}

/* ------------------------------------------------------------
   BUTTONS

   One filled button: the primary action. The others are white with a
   border. A strip with six filled buttons does not say which is the
   main action — when all shout, none is heard.
   ------------------------------------------------------------ */

.rax-shell .rz-button {
    border-radius: var(--r-control);
    font-weight: var(--fw-medium);
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}

.rax-shell .rz-button.rz-light,
.rax-shell .rz-button.rz-base,
.rax-shell .rz-button.rz-secondary {
    background: var(--c-surface);
    color: var(--c-ink);
    border: 1px solid var(--c-line-2);
}

.rax-shell .rz-button.rz-light:hover,
.rax-shell .rz-button.rz-base:hover,
.rax-shell .rz-button.rz-secondary:hover {
    background: var(--c-touch);
    border-color: var(--c-ink-3);
}

.rax-shell .rz-button.rz-primary {
    background: var(--c-accent);
    border: 1px solid var(--c-accent);
    color: var(--c-on-accent);
}

.rax-shell .rz-button.rz-primary:hover {
    background: var(--c-accent-2);
    border-color: var(--c-accent-2);
}

/* Delete is outlined, not filled: a filled red button would be the most
   eye-catching element on the screen — yet it is the least used action. */
.rax-shell .rz-button.rz-danger {
    background: var(--c-surface);
    color: var(--c-neg);
    border: 1px solid var(--c-line-2);
}

/*  A TEXT/ICON BUTTON HAS NO FRAME.

    The rule above also caught buttons drawn with `Variant.Text`: the bin
    icon in the line grid came with its own box on every row, four boxes
    in a four-line document. The text variant already means "frameless";
    its border does not come even on hover, only the background appears. */
.rax-shell .rz-button.rz-variant-text {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

/*  TEXT VARIANT ON HOVER: THE SAME LANGUAGE AS DELETE IN THE MAIN STRIP.

    Drawing a red FRAME was the worst option: a thin red line reads like
    a "warning" but does not look like a clickable surface. The Delete
    button in the strip fills on hover; deleting a line does the same.
    One language, two places.

    The frame is drawn in NO state — resting, hovered, pressed, focused.
    The border width stays 1px but its colour is transparent: reset, the
    button would grow 2px the moment it filled and shift the row. */
.rax-shell .rz-button.rz-variant-text,
.rax-shell .rz-button.rz-variant-text:hover,
.rax-shell .rz-button.rz-variant-text:active,
.rax-shell .rz-button.rz-variant-text:focus {
    border-color: transparent;
    outline: none;
}

.rax-shell .rz-button.rz-variant-text:hover {
    background: var(--c-touch);
    color: var(--c-ink);
}

.rax-shell .rz-button.rz-variant-text.rz-danger:hover,
.rax-shell .rax-lines .rz-grid-table tbody td .rz-button.rz-danger:hover {
    background: var(--c-neg);
    color: var(--c-on-neg);
    border-color: transparent;
}

.rax-shell .rz-button.rz-variant-text.rz-danger:active,
.rax-shell .rax-lines .rz-grid-table tbody td .rz-button.rz-danger:active {
    background: var(--c-neg-dk);
    color: var(--c-on-neg);
}

.rax-shell .rz-button.rz-danger:hover {
    background: var(--c-neg);
    border-color: var(--c-neg);
    color: var(--c-on-neg);
}

.rax-shell .rz-button.rz-state-disabled {
    opacity: 0.45;
    box-shadow: none;
}

/* Material's ripple effect is too playful for a corporate ERP. */
.rax-shell .rz-button:before {
    display: none;
}

/* ------------------------------------------------------------
   GRID

   The header is small, letter-spaced, uppercase and ON ITS OWN STRIP.

   The previous decision was "separate it by typography only, not by a
   fill", but the typography had NEVER BEEN APPLIED: measured in the
   browser the header came out 13px — the same as a data row. Radzen's
   `--rz-grid-header-font-size` variable is not consumed on `th`; rax.css
   defined it but it was bound to nothing.

   So in the nine-column invoice grid the user could not tell the header
   row from the data. Two fixes were made together: the size was written
   directly on `th` and the header got a very light strip.

   THE STRIP'S COLOUR WAS CHOSEN AGAIN FOR THE CANVAS. Its value was
   `--c-surface-2` with the reason written as "1.5% darker than white" —
   right while the screen's background was white. When the background
   moved to the canvas (K-087) that tone stayed LIGHTER than the
   background: the header glowed in the opposite direction of the dark
   striped rows below it.

   Now it is one notch DARKER than the background and in the same family
   as the row stripe — both are a canvas + ink mix, the header a bit
   darker. The reason is the same: the header must not shout but where it
   ends must be known.
   ------------------------------------------------------------ */

.rax-shell .rz-data-grid,
.rax-shell .rz-grid-table {
    border: none;
    border-radius: 0;
}

.rax-shell .rz-grid-table thead th {
    background: color-mix(in srgb, var(--c-ink) 5%, var(--c-card));
    border-bottom: 1px solid var(--c-line-2);
    color: var(--c-ink-2);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: left !important;
}

.rax-shell .rz-grid-table thead th .rz-column-title,
.rax-shell .rz-grid-table thead th .rz-column-title-content {
    justify-content: flex-start;
    text-align: left;
}

/*  A NUMBER'S HEADER STANDS OVER ITS DIGITS (K-331). The cell is right
    aligned (`TextAlign.Right` → `rz-text-align-right`); the rule above put
    its header on the left and «Görüşme süresi» ended 71 px before the
    numbers under it. The eye reads a column down from its label. */
.rax-shell .rz-grid-table thead th.rz-text-align-right {
    text-align: right !important;
}

.rax-shell .rz-grid-table thead th.rz-text-align-right .rz-column-title,
.rax-shell .rz-grid-table thead th.rz-text-align-right .rz-column-title-content {
    justify-content: flex-end;
    text-align: right;
}

/*  The header cell has no padding of its own (`--rz-grid-header-cell-padding:
    0`), the body cell has `--cell-px`: the label ends where the digits end
    only with the same inset. */
.rax-shell .rz-grid-table thead th.rz-text-align-right .rz-column-title {
    padding-inline-end: var(--cell-px);
}

.rax-shell .rz-grid-table thead th.rax-select-head,
.rax-shell .rz-grid-table td.rax-select-cell {
    width: 24px !important;
    padding-inline: 0;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

.rax-shell .rz-grid-table thead th.rax-select-head > div,
.rax-shell .rz-grid-table td.rax-select-cell > .rz-cell-data {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.rax-shell .rz-grid-table thead th.rax-select-head > div,
.rax-shell .rz-grid-table thead th.rax-select-head .rz-column-title,
.rax-shell .rz-grid-table thead th.rax-select-head .rz-column-title-content {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    padding-inline: 0 !important;
}

.rax-shell .rax-select-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/*  Column dividers ONLY in the header.

    Putting vertical lines in the body too would turn a nine-column grid
    into a cage and make the eye walk cell by cell instead of along the
    row. In the header it helps: which title belongs to which column is
    told apart at a glance. */
.rax-shell .rz-grid-table thead th + th {
    border-inline-start: 1px solid var(--c-line);
}

.rax-shell .rz-grid-table thead th .rz-sortable-column-icon {
    display: none;
}

/* ------------------------------------------------------------
   HEADER: RIGHT-CLICK AREA AND RESIZE HANDLE
   ------------------------------------------------------------ */

/*  THE RIGHT-CLICK SURFACE IS THE WHOLE HEADER.

    Binding it to the label itself was MEASURED and was not enough: it
    covered 50-91% of the `th`. The header belongs to Radzen — the sort
    arrow and the filter button are on the same row and take half the
    room in a narrow column. So the surface is a separate element
    positioned against the `th`.

    `position` was NOT WRITTEN on the `th`, on purpose: Radzen already
    makes it `sticky` (sticky header row) and `sticky` is a positioned
    value too — it provides the containing block for an absolutely
    positioned child. Once `relative` was written and MEASURED: the
    surface sat right but stickiness broke. Rewriting what Radzen already
    gives took back something else it gives.

    Clipping was not touched — the surface is empty, the label stays
    under Radzen's own `text-overflow` rule. */
.rax-colhit {
    position: absolute;
    inset: 0;
    /*  No z-index, but ORDER MATTERS.

        A positioned element paints above its non-positioned siblings —
        so the surface gets in front of the label and the arrow. The
        filter button and the handle are specifically taken back below;
        if either stays BEHIND the surface it cannot be clicked. */
}

/*  The chip's funnel (K-287): only the narrow card layout draws it — the
    wide grid keeps the right-click menu. */
.rax-colfilter {
    display: none;
    place-items: center;
    margin-inline-start: var(--sp-1);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c-ink-3);
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

/*  The filter button is ABOVE the surface.

    Had the surface covered it too, the filter popup would never open —
    the filter button in the header that came with K-064 would silently
    die. */
.rax-shell .rz-grid-table thead th .rz-grid-filter-icon {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/*  Resize handle: WIDTH IN PX, COLOUR OURS.

    Radzen writes the handle as `0.25rem`. rem depends on the root font
    size and in the compact tier the root is 13px — the handle drops to
    3.25px, a strip hard to catch with the mouse. Density should change
    the number of rows, not the size of the target.

    The visual stripe is from our own token too: Radzen's is
    `--rz-secondary` and that is never fed in this shell. K-065's lesson —
    a rule relying on an undefined variable silently does nothing. */
/*  The handle stays INSIDE THE COLUMN, it does not spill into the neighbour.

    Spilling was tried (`inset-inline-end: -4px`) and measured: the half
    outside could not be clicked at all. The cause is that Radzen
    positions the `th` with `z-index: 1` — every header is ITS OWN
    stacking context and whatever its child writes it cannot get in front
    of the neighbouring cell. Four of the eight pixels were dead area.

    The z-index is to stay above the right-click surface. The handle
    already comes later in the DOM, so it would win by order too — but
    that order belongs to Radzen's markup and may change in a version. */
.rax-shell .rz-grid-table thead th .rz-column-resizer {
    width: 8px;
    inset-inline-end: 0;
    z-index: 2;
}

.rax-shell .rz-grid-table thead th .rz-column-resizer::after {
    width: 2px;
    inset-inline-end: 0;
}

.rax-shell .rz-grid-table thead th .rz-column-resizer:hover::after,
.rax-shell .rz-grid-table thead th .rz-column-resizer:active::after {
    background-color: var(--c-accent);
}

/*  FIT TO PAGE: the horizontal bar closes.

    The percentages add up to 100 but sub-pixel rounding can overflow the
    table by a notch and that one pixel brings the bar back. The rule does
    NOT HIDE scrolling, it silences an overflow that does not exist: with
    the mode off this line is never applied and scrolling stays as it is. */
.rax-list[data-fit="true"] .rz-data-grid-data {
    overflow-x: hidden;
}

/*  THE LIST SCROLLBARS DO NOT COVER THE FIXED AREAS.

    The selection column is frozen: it does not move in horizontal
    scrolling. The header is sticky too: it does not move in vertical
    scrolling. Bars reaching into those areas give a wrong signal saying
    "these scroll too".

    The native scrollbar was tried twice:
    - `track/thumb margin` did not change the visible area in Chrome.
    - `scrollbar-button` was not reliable on the WebView/Chrome path either.

    So inside the list the native bar is invisible and JS draws its own
    rail bound to the same scroll position. The real scrolling is still on
    Radzen's `.rz-data-grid-data` element; the wheel, touchpad and
    keyboard paths do not change. */
.rax-list .rz-data-grid-data {
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
}

/* In the list grid the native rail takes no room and does not reach into
   the fixed selection/header areas; JS measures and draws the visible rail. */
.rax-list .rz-data-grid-data::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

body:not(.rz-default-scrollbars) .rax-list .rz-data-grid-data::-webkit-scrollbar-track,
body:not(.rz-default-scrollbars) .rax-list .rz-data-grid-data::-webkit-scrollbar-thumb,
body:not(.rz-default-scrollbars) .rax-list .rz-data-grid-data::-webkit-scrollbar-button,
body:not(.rz-default-scrollbars) .rax-list .rz-data-grid-data::-webkit-scrollbar-corner {
    background: transparent;
    border-color: transparent;
}

.rax-grid-scroll {
    position: absolute;
    z-index: 5;
    display: none;
    background: transparent;
    touch-action: none;
}

.rax-grid-scroll[data-on='true'] {
    display: block;
}

.rax-grid-scroll-x {
    height: var(--sb-w);
}

.rax-grid-scroll-y {
    width: var(--sb-w);
}

.rax-grid-scroll-thumb {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--c-line-2);
    background-clip: content-box;
}

.rax-grid-scroll-x .rax-grid-scroll-thumb {
    width: 24px;
    height: 100%;
}

.rax-grid-scroll-y .rax-grid-scroll-thumb {
    width: 100%;
    height: 24px;
}

.rax-grid-scroll:hover .rax-grid-scroll-thumb,
.rax-grid-scroll-thumb:hover {
    border-width: 1px;
    background: var(--c-ink-3);
    background-clip: content-box;
}

.rax-shell .rz-grid-table tbody td {
    border-bottom: 1px solid var(--c-line);
    color: var(--c-ink);
}

.rax-shell .rz-grid-table tbody tr:hover td {
    background: var(--c-touch);
}

/*  Selected row: fill + LEFT STRIPE.

    Marking with a fill alone mixes with the hover colour. The stripe is
    THE SAME language as the active menu item in the sidebar — the user
    reads the "I am here" mark the same way in two places.

    `.rz-data-row` IS IN THE SELECTOR, not as ornament: three of Radzen's
    rules touch the same cell at once — the striped row
    (`.rz-grid-table-striped ... :nth-child(2n+1) > td`), selection
    (`.rz-selectable ... .rz-state-highlight > td`) and the transition
    rule. Thanks to `:nth-child` the stripe rule rises to the same weight
    as ours. The extra class weight lifts it one step, so the result does
    not depend on Radzen's rule order. */
.rax-shell .rz-grid-table tbody > tr.rz-data-row.rz-state-highlight > td,
.rax-shell .rz-grid-table tbody > tr.rz-data-row.rz-state-highlight:hover > td {
    background: var(--c-accent-bg);
    color: var(--c-ink);
    transition-duration: 0s;
}

.rax-shell .rz-grid-table tbody > tr.rz-data-row.rz-state-highlight > td:first-child {
    box-shadow: inset 2px 0 0 var(--c-accent);
}

/* ------------------------------------------------------------
   MODAL DIALOG
   ------------------------------------------------------------ */

.rz-dialog {
    border-radius: var(--r-card);
    box-shadow: var(--sh-3);
    border: 1px solid var(--c-line);
    overflow: hidden;
}

.rz-dialog .rz-dialog-titlebar {
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-line);
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-section);
    font-weight: var(--fw-medium);
    color: var(--c-ink);
}

/* ------------------------------------------------------------
   EMPTY STATE AND HOME
   ------------------------------------------------------------ */

/* `position` is for the notch: an empty work area has no tab strip, so
   this is the container the notch hangs from. */
.rax-empty {
    position: relative;
    height: 100%;
    justify-content: center;
}

/* ------------------------------------------------------------
   HOME SCREEN

   NOT a pile of cards. In a corporate application the home screen is
   not a showcase but an index: the same frame, the same line weight,
   the same row height. The user looks at this frame all day; if the
   home screen looked different the application would read as made of
   two pieces.
   ------------------------------------------------------------ */

/* `max-width: 1180px` REMOVED — the place where the same decision was
   made for the same reason on the record screen: rax.css, `.rax-form-card`.

   Measured (1920px screen): the index stopped at 1180px, leaving 545px on
   the right with the menu open and 740px with the menu HIDDEN — so
   hiding the menu opened room but nobody took it. This screen is not
   plain text but a two-column index: when it widens the rows do not get
   longer (`minmax(0,1fr) 17rem`), the list relaxes. */
.rax-home {
    padding: var(--sp-5);
}

/* Page strip — the same height and language as on the list screens. */
.rax-pagebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: var(--header-h);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
}

.rax-pagebar-main {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    min-width: 0;
}

.rax-pagebar-title {
    font-size: var(--fs-section);
    font-weight: var(--fw-medium);
    color: var(--c-ink);
    letter-spacing: -0.01em;
}

/* The tenant code is a badge next to the title: an identifier, not a title. */
.rax-pagebar-sub {
    padding: 1px var(--sp-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-control);
    background: var(--c-surface-2);
    font-size: var(--fs-caption);
    color: var(--c-ink-2);
}

.rax-pagebar-side {
    font-size: var(--fs-caption);
    color: var(--c-ink-3);
    white-space: nowrap;
}

/* Two columns: index on the left, key facts on the right. Stacked on a narrow screen. */
.rax-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: var(--sp-4);
    margin-block-start: var(--sp-4);
    align-items: start;
}

@media (max-width: 900px) {
    .rax-home-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Panel: NO shadow. A shadow is a layer statement (tokens.css) and these
   panels do not float on the paper, they are the paper. */
.rax-panel {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    overflow: hidden;
}

.rax-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: var(--header-h);
    padding-inline: var(--sp-4);
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-line);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-ink-2);
}

.rax-panel-note {
    font-weight: var(--fw-normal);
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-ink-3);
}

/* Group label — the same tone as the group title in the menu. */
.rax-index-group {
    padding: var(--sp-3) var(--sp-4) var(--sp-2);
    font-size: var(--fs-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-ink-3);
}

.rax-index-group:not(:first-of-type) {
    border-top: 1px solid var(--c-line);
    margin-block-start: var(--sp-2);
}

/*  Index row. The height is THE SAME as a grid row (--row-h): the eye
    moving from the home screen to a list finds the same rhythm. */
.rax-index-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--row-h);
    padding-inline: var(--sp-4);
    color: var(--c-ink);
    text-decoration: none;
    border-inline-start: 2px solid transparent;
}

.rax-index-row:hover {
    background: var(--c-touch);
    border-inline-start-color: var(--c-accent);
}

.rax-index-icon {
    font-family: 'Material Symbols', 'Material Icons';
    font-size: calc(var(--fs-table) + 3px);
    color: var(--c-ink-3);
}

.rax-index-row:hover .rax-index-icon {
    color: var(--c-accent);
}

.rax-index-name {
    font-size: var(--fs-table);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The entity name is a technical identifier: on the right, quiet, monospaced. */
.rax-index-entity {
    font-size: var(--fs-caption);
    color: var(--c-ink-3);
}

/* Key facts: label/value pairs, not sentences. */
.rax-facts {
    margin: 0;
}

.rax-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-line);
}

.rax-fact:last-child {
    border-bottom: none;
}

.rax-fact dt {
    font-size: var(--fs-caption);
    color: var(--c-ink-3);
    white-space: nowrap;
}

.rax-fact dd {
    margin: 0;
    font-size: var(--fs-table);
    color: var(--c-ink);
    text-align: end;
    overflow-wrap: anywhere;
}

/* ============================================================
   POLISH

   Everything up to here is STRUCTURE: what is frame and what is data.
   This section puts FINESSE on top of it — without changing the structure.

   Rule: none of it invents a new colour or size. All of it binds existing
   tokens — `--motion` is new, the rest is old.
   ============================================================ */

/* ------------------------------------------------------------
   FOCUS — only the places LEFT UNCOVERED

   tokens.css already draws a ring for
   `:where(button, input, select, [tabindex])`. It is NOT REPEATED here;
   the only thing outside that list is `<a>`: the menu item and the home
   screen index are links and showed nothing when navigated with Tab.

   `:focus-visible` is used, not `:focus`: leaving a ring around a link
   clicked with the mouse clutters the interface; the ring appears only
   when arriving by keyboard.
   ------------------------------------------------------------ */

.rax-shell a.rz-navigation-item-link:focus-visible,
.rax-index-row:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--r-control);
    position: relative;
    z-index: 1;
}

/* A grid row can take focus too: while moving by keyboard the current row
   must be visible. The ring is drawn inside the row — drawn outside it
   would cover the neighbouring row's line. */
.rax-shell .rz-grid-table tbody > tr.rz-data-row:focus-visible > td {
    outline: none;
    background: var(--c-accent-bg);
    box-shadow: inset 0 1px 0 var(--c-accent), inset 0 -1px 0 var(--c-accent);
}

/* ------------------------------------------------------------
   TRANSITION

   The colour settles into place instead of jumping. ONLY colour and
   border: if layout were animated the rows would jump and the grid
   would become unreadable.
   ------------------------------------------------------------ */

.rax-shell .rz-button,
.rax-shell .rz-navigation-item-link,
.rax-shell .rz-textbox,
.rax-shell .rz-dropdown,
.rax-shell .rz-datepicker,
.rax-shell .rz-grid-table tbody > tr.rz-data-row > td,
.rax-index-row,
.rax-tab-close {
    transition: background-color var(--motion) var(--motion-ease),
                border-color     var(--motion) var(--motion-ease),
                color            var(--motion) var(--motion-ease),
                box-shadow       var(--motion) var(--motion-ease);
}

/* If the user has switched motion off, it is off. Not accessibility but
   courtesy: for someone with vertigo this setting is real. */
@media (prefers-reduced-motion: reduce) {
    .rax-shell *,
    .rax-shell *::before,
    .rax-shell *::after {
        transition-duration: 0.01ms !important;
        animation-duration:  0.01ms !important;
    }
}

/* ------------------------------------------------------------
   PRESSED STATE

   Hovering a button changed its colour but PRESSING it did nothing. The
   only sign that the click registered was the screen changing — on a
   slow query the user presses twice. Pushing it in by one pixel ends that.
   ------------------------------------------------------------ */

.rax-shell .rz-button:not(.rz-state-disabled):active {
    transform: translateY(1px);
    transition-duration: 0ms;
}

.rax-shell .rz-button.rz-primary:not(.rz-state-disabled):active {
    background: var(--c-accent-dk);
    border-color: var(--c-accent-dk);
}

.rax-shell .rz-button.rz-light:not(.rz-state-disabled):active,
.rax-shell .rz-button.rz-base:not(.rz-state-disabled):active,
.rax-shell .rz-button.rz-secondary:not(.rz-state-disabled):active {
    background: var(--c-line);
}

/* ------------------------------------------------------------
   TOP STRIP — depth

   A flat dark rectangle looks cheap. A one-pixel light line on top and a
   dark edge below make the strip a SURFACE: as if light came from above.
   No gradient — in an ERP a gradient immediately looks like a "theme";
   two hairlines are enough here.

   THE DROP SHADOW (`--sh-1`) WAS REMOVED. Right below the strip is the
   tab strip; the shadow added one more soft trace under the strip's 1px
   bottom border and together they read as a thick band. The shadow went
   so that a single hairline stays ABOVE the tabs — the border already
   does the separating.

   The light inner line STAYS: it is on the strip's own top edge, so it
   has nothing to do with the tabs.
   ------------------------------------------------------------ */

.rax-shell .rz-header {
    box-shadow: inset 0 1px 0 var(--c-gloss);
}

/* Brand mark: a slight inner light instead of a flat square. This is the
   one saturated colour spot on the screen — let it sit right once. */
.rax-brand-mark {
    box-shadow: inset 0 1px 0 var(--c-gloss-2),
                0 1px 2px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   SCROLLBAR

   Windows's default thick grey bar looks like construction scaffolding
   next to 34-pixel rows. Thin, neutral, and it stands out ON HOVER.
   ------------------------------------------------------------ */

/*  SPECIFICITY NOTE — this block was WRITTEN ONCE AND NEVER APPLIED.

    Measured (12.08.2026): the rule said `width: 10px`, the real bar in
    the browser was 15px — i.e. the browser default. The cause is Radzen's
    `material-base.css` rule:

        body:not(.rz-default-scrollbars) .rz-layout ::-webkit-scrollbar
            { width: var(--rz-scrollbar-size) }

    Its specificity is (0,2,1); ours, `.rax-shell *`, was (0,1,1) and lost.
    On top of that `--rz-scrollbar-size` is NOT DEFINED AT ALL: `var()`
    falls to invalid, Radzen's rule produces nothing either and the bar
    stayed at the 15px default. Two defects stacked.

    The fix is not overpowering the selector but USING THE SAME SHAPE AS
    THE RULE WE OVERRIDE: the `body:not(...)` prefix gives (0,2,2).
    Copying the shape also documents the intent — "this is the
    counterpart of that Radzen rule".

    K-062's pattern: a rule being written does not mean it is applied. In
    a visual defect, MEASURE first. */

/*  The thickness has TWO TIERS: thin at rest, it stands out when hovering
    over the scrollable area.

    The reserved room (--sb-w) DOES NOT CHANGE, only the transparent
    border thins — so while the bar stands out the layout does not move.
    Had the width been animated the content would shift with every mouse
    movement and the clicked row would move before the click. */
body:not(.rz-default-scrollbars) .rax-shell *::-webkit-scrollbar {
    width: var(--sb-w);
    height: var(--sb-w);
    background: transparent;
}

body:not(.rz-default-scrollbars) .rax-shell *::-webkit-scrollbar-track {
    background: transparent;
}

/*  `min-width`/`min-height` ARE RESET: Radzen writes
    `--rz-scrollbar-size` there and left undefined the thumb has no size.
    A 4px border came from there too — on an 8px bar, 4px from both sides
    leaves nothing visible. */
body:not(.rz-default-scrollbars) .rax-shell *::-webkit-scrollbar-thumb {
    background: var(--c-line-2);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
    min-width: 0;
    min-height: 0;
}

/* It thickens while over the scrollable area: the bar is not searched
   for, it is already under the hand. */
body:not(.rz-default-scrollbars) .rax-shell *:hover::-webkit-scrollbar-thumb {
    border-width: 1px;
}

body:not(.rz-default-scrollbars) .rax-shell *::-webkit-scrollbar-thumb:hover {
    background: var(--c-ink-3);
    background-clip: content-box;
}

body:not(.rz-default-scrollbars) .rax-shell *::-webkit-scrollbar-corner {
    background: transparent;
}

/*  THIS IS THE REAL LEVER — NOT `::-webkit-*`.

    Measured (12.08.2026): the webkit rules above load with the right
    selector and win on specificity, but have no effect at all on the
    bar's WIDTH. Even an empty test box comes out 15px. In modern Chrome,
    when the standard `scrollbar-width` exists the webkit pseudo-element's
    width is ignored; `CSS.supports` says "yes" to both, so the feature
    query misleads too.

    Measured: default 15px → 10px with `thin`.

    IT IS NOT INHERITED. `scrollbar-width` is not inherited, so writing it
    on an ancestor is not enough — it must be written on the scrolling
    element ITSELF. The old rule was only on `.rax-shell` and so never
    reached the grid, the form or the list.

    It has three values (auto/thin/none), so no pixel control; `--sb-w`
    feeds the webkit path below and that path still has a counterpart in
    older engines and in Radzen's own rules. */
.rax-shell,
.rax-shell * {
    scrollbar-width: thin;
    scrollbar-color: var(--c-line-2) transparent;
}

/*  Radzen's own variable is fed too: from one token, so the same number
    is not read from two places. Unfed, Radzen's rules keep an invalid
    `var()` and may override ours again in the next version. */
.rax-shell {
    --rz-scrollbar-size: var(--sb-w);
    --rz-scrollbar-background-color: transparent;
    --rz-scrollbar-border-radius: 999px;
}

/* ------------------------------------------------------------
   THE MENU'S BAR: INVISIBLE AT REST

   Measured: the scrolling element is `.rz-sidebar` ITSELF
   (scrollHeight 642 / clientHeight 588) and the bar takes 11px.

   IT KEEPS TAKING ROOM — what is hidden is not the bar ITSELF but its
   VISIBILITY. Writing `scrollbar-width: none` would win the 11px back
   but since the bar would ask for room again on hover, the whole menu
   would shift 11px with every mouse movement; the item about to be
   clicked would move before the click.

   The same decision was already made once in this file (the grid bar,
   two-tier thickness): the reserved room is fixed, only the visibility
   changes.

   `scrollbar-color` IS NOT INHERITED and must be written on the
   scrolling element itself — the block above gives it with
   `.rax-shell *`, the two classes here (0,2,0) beat it.
   ------------------------------------------------------------ */

.rax-shell .rz-sidebar {
    scrollbar-color: transparent transparent;
}

.rax-shell .rz-sidebar:hover,
.rax-shell .rz-sidebar:focus-within {
    scrollbar-color: var(--c-line-2) transparent;
}

/* Webkit path: the counterpart of the same behaviour in older engines.
   The selector shape is kept THE SAME as Radzen's rule — it takes its
   specificity from there (see the specificity note above). */
body:not(.rz-default-scrollbars) .rax-shell .rz-sidebar::-webkit-scrollbar-thumb {
    background: transparent;
}

body:not(.rz-default-scrollbars) .rax-shell .rz-sidebar:hover::-webkit-scrollbar-thumb,
body:not(.rz-default-scrollbars) .rax-shell .rz-sidebar:focus-within::-webkit-scrollbar-thumb {
    background: var(--c-line-2);
    background-clip: content-box;
}

/* ------------------------------------------------------------
   SELECTION AND CURSOR

   The browser's default selection blue (#3390FF) clashed with the accent
   and a copied cell looked foreign on screen.
   ------------------------------------------------------------ */

.rax-shell ::selection {
    background: var(--c-accent-bg);
    color: var(--c-ink);
}

/* A clickable row should look clickable. */
.rax-shell .rz-selectable tbody > tr.rz-data-row {
    cursor: pointer;
}

/* ------------------------------------------------------------
   NUMBERS AND IDENTIFIERS — optical tuning

   Tabular figures solved alignment, but with its default letter spacing
   IBM Plex Mono writes the code columns wider than needed:
   "202600000009" is an invoice number, not a heading. A slight negative
   spacing seats it on the row.
   ------------------------------------------------------------ */

.rax-shell .rax-code {
    letter-spacing: -0.02em;
}

/* The last cell of a right-aligned number column must not stick to the
   card's edge: without some breathing room to the right of the number it
   reads like a total line. */
.rax-shell .rz-grid-table tbody > tr > td:last-child .rax-num,
.rax-shell .rz-grid-table thead th:last-child {
    padding-inline-end: var(--sp-1);
}

/* ============================================================
   SETTINGS DRAWER

   The place for settings that sat in the strip but are touched once a
   day. The top strip is the most expensive surface, visible on every
   screen; only things used constantly go there.
   ============================================================ */

/* The gear in the strip: NOT a Radzen button, a plain <button>. Radzen's
   button casing was constantly overridden on the dark strip and all that
   is needed here is an icon. */
.rax-gear {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--c-header-ink-2);
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 18px;
    cursor: pointer;
    transition: background-color var(--motion) var(--motion-ease),
                color var(--motion) var(--motion-ease);
}

.rax-gear:hover {
    background: var(--c-header-2);
    color: var(--c-header-ink);
}

/* Scrim: NOT as dark as the modal scrim. Were it dark the drawer would
   read like an "operation"; this is just a mist that draws focus. */
.rax-scrim {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: var(--c-scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion) var(--motion-ease),
                visibility 0s linear var(--motion);
}

.rax-scrim[data-open='true'] {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--motion) var(--motion-ease);
}

/*  The drawer comes in FROM THE RIGHT.

    Layout is animated here and that does not contradict the "layout is
    not animated" rule in tokens.css: that rule is for DATA — a sliding
    grid row cannot be read. This is an overlay; where it comes from also
    tells the user where it will close to.

    `transform` is used, not `right`: a transform does not recompute
    layout, the grid behind is not re-measured every frame. */
.rax-settings {
    /* Physical properties on purpose: `inset-inline-end` is the right one
       but in this shell positioning behaved unexpectedly and the drawer
       stayed off screen. The application is single-language (tr), so the
       logical property gains nothing here; certainty is worth more. */
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1201;
    display: flex;
    flex-direction: column;
    width: min(320px, 92vw);
    /* The font size is FIXED: the root size changes with density and if
       the drawer inherited it the panel changing the setting would resize
       itself. */
    font-size: var(--fs-body);
    background: var(--c-surface);
    border-inline-start: 1px solid var(--c-line);
    box-shadow: var(--sh-3);
    transform: translateX(101%);
    visibility: hidden;
    transition: transform var(--motion-panel) var(--motion-ease),
                visibility 0s linear 160ms;
}

.rax-settings[data-open='true'] {
    transform: none;
    visibility: visible;
    transition: transform var(--motion-panel) var(--motion-ease);
}

/* Title strip: the same language as the other panel titles. */
.rax-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: var(--header-bar-h);
    padding-inline: var(--sp-5);
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-line);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-ink-2);
}

.rax-settings-close {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--c-ink-3);
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 17px;
    cursor: pointer;
    transition: background-color var(--motion) var(--motion-ease),
                color var(--motion) var(--motion-ease);
}

.rax-settings-close:hover {
    background: var(--c-line);
    color: var(--c-ink);
}

/*  THE BODY IS NOT A GRID. TWO DRAWERS SHARE THIS CLASS.

    For one round the grid was written here and the SESSION drawer broke:
    the user row and the developer link also became grid items and spread
    over two columns, with drawer-high gaps between them. Aligning the
    settings wants a grid but the body is not its place — this is the
    SHARED container of "Settings" and "Session".

    The grid is below, in its own container wrapping only the setting
    rows (`.rax-settings-form`). */
.rax-settings-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--sp-5);
}

/*  SETTINGS GRID — the boxes aligned ONE ABOVE THE OTHER.

    Each setting was its own flex row and the box shifted by the label's
    width: "Yoğunluk" and "Tasarım" have different lengths so the boxes
    started at different places. The eye aligns form boxes by their left
    edges and that shift shows even in a two-row panel.

    The column width can be shared only if the rows share THE SAME grid:
    with `display: contents` the rows give up their own boxes and hand the
    label and the box straight to this one. The first column becomes as
    wide as the longest label, and both boxes start and end at the same
    place. */
.rax-settings-form {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-4);
}

/*  ONE-ROW SETTING: label on the left, control on the right.

    Density and design were each a strip of adjacent segments and grew
    with the number of options — seven designs wrapped to three lines and
    took up the top half of the drawer. When the control became a select
    box the block shrank to one row.

    IT HAS NO BOX OF ITS OWN (`display: contents`): it hands the label and
    the control to the drawer's grid, so the boxes of both settings share
    the same column (see `.rax-settings-body`). Had the row kept its own
    flex box every setting would shift by its own label and there would be
    no shared column to align on. */
.rax-setting-row {
    display: contents;
}

/*  SELECT BOX — sizes INDEPENDENT of density.

    No value here reads `rem` or a density token (--row-h, --pad,
    --btn-px). The reason is this drawer's own defect: density changes the
    root font size and a control sized by it slides from under the finger
    the moment a choice is made.

    `appearance: none` was NOT WRITTEN. The browser's own arrow and
    dropdown list stay: the list is drawn in the operating system's layer,
    so the drawer's `overflow` cannot clip it and keyboard navigation
    comes for free. Drawing our own list would mean rewriting all three by
    hand. */
.rax-select {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-control);
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: inherit;
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
    cursor: pointer;
    transition: border-color var(--motion) var(--motion-ease);
}

.rax-select:hover {
    border-color: var(--c-ink-3);
}

/* One frame (see rax.css, `.rax-pagerx-input:focus`). The box has its
   own border; a ring would be a second line outside it. */
.rax-select:focus-visible {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: none;
}

/*  `.rax-setting`, `.rax-setting-note` and the margin rule between them
    were DELETED: once the setting block became one row (label + box,
    description in `title`) none of them is written. Leaving a rule that
    does not work gives the next reader the impression it still draws —
    the grid's `gap` now gives the space. */
.rax-setting-label {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--c-ink);
}

/* ------------------------------------------------------------
   LINK IN THE DRAWER

   Until now the session drawer carried read-only information (user,
   tenant). The developer link is the first ACTION — so not a row but a
   clickable surface: the touch target is the whole row, not just the
   text.
   ------------------------------------------------------------ */

.rax-settings-group {
    margin-block-start: var(--sp-6);
    padding-block-start: var(--sp-4);
    border-block-start: 1px solid var(--c-line);
}

.rax-settings-link {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-block-start: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-control);
    color: var(--c-ink);
    text-decoration: none;
    font-size: var(--fs-body);
}

.rax-settings-link:hover {
    border-color: var(--c-accent);
    background: var(--c-accent-bg);
}

.rax-settings-link small {
    display: block;
    margin-block-start: var(--sp-1);
    font-size: var(--fs-caption);
    line-height: var(--lh-body);
    color: var(--c-ink-3);
}

/* Icon: from the same font family as the rest of the shell.
   `.rax-gear` in the strip uses the same mechanism. */
.rax-settings-link-icon {
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 20px;
    line-height: 1;
    color: var(--c-ink-3);
    flex: none;
}

/* ------------------------------------------------------------
   OPTION CONTROL — INDEPENDENT of density

   No size here reads `rem` or a density token (--row-h, --pad,
   --btn-px…). The reason is the defect itself: density changes the root
   font size, every Radzen size is rem based, so the moment a choice was
   made the picker ITSELF grew and shrank and the clicked button slid
   from under the finger.

   When a setting changes the screen should change, the setting itself
   should stay put.
   ------------------------------------------------------------ */

/*  ONE STRIP, THREE SEGMENTS.

    First they were three separate cards (icon + name + description) and
    ate half the drawer. The strip takes less room and also says the right
    thing: these are ALTERNATIVES to each other, not three separate
    commands. Separate boxes say "you can do three things", adjacent
    segments say "pick one of the three".

    The frame is OUTSIDE, not on the segments: with a border on each
    segment the lines between them double and the strip becomes a cage.

    THE STRIP WRAPS, THE NUMBER OF SEGMENTS IS NOT COUNTED.

    The column count came from the component (`--choice-count`) and when
    the number of designs reached seven, a 320px drawer left ~40px per
    segment: "Sarımsı" did not fit in its cell. Raising the number by hand
    is no fix either — the eighth design would bring us back here.

    `auto-fit` + `minmax` does NOT ASK for the number: the narrowest
    readable segment is 72px, the rest wraps. The component does not need
    to know the column count, so the setting itself loses a lever.

    THE DIVIDER IS THE SEGMENT'S OWN SHADOW, NOT the neighbour's border.
    The "neighbour's left edge" rule worked on one line; when wrapping, the
    first segment of the second line would get a line on its left and
    there would be no line between the rows at all.

    First `gap: 1px` + a background in the line colour was tried and
    MEASURED: when seven segments wrapped to three columns two cells in
    the last row stayed EMPTY and the strip's background showed through —
    a dark block in the drawer. The shadow does not create that defect:
    there is no such thing as an empty cell, because the cell itself
    carries the line. The overflowing edges are clipped by the strip's
    `overflow: hidden`, so no double line appears at the edge either. */
.rax-choice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-control);
    background: var(--c-surface);
    overflow: hidden;
}

.rax-choice-item {
    padding: var(--sp-3) var(--sp-2);
    border: none;
    background: var(--c-surface);
    color: var(--c-ink-2);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    text-align: center;
    cursor: pointer;
    box-shadow: 1px 0 0 var(--c-line-2), 0 1px 0 var(--c-line-2);
    transition: background-color var(--motion) var(--motion-ease),
                color var(--motion) var(--motion-ease);
}

/* The last segment has no neighbour on its right: the strip's own border
   gives the line, a second one there would be a double line. */
.rax-choice-item:last-child {
    box-shadow: 0 1px 0 var(--c-line-2);
}

.rax-choice-item:hover:not([data-on='true']) {
    background: var(--c-touch);
    color: var(--c-ink);
}

/*  The selected one: accent fill.

    In the card layout frame + accent was enough because the boxes were
    already apart. With adjacent segments a frame is invisible — the fill
    sets the selected one apart. The fill is LIGHT (`--c-accent-bg`), not
    solid navy: this is a preference indicator, not a call to action. */
.rax-choice-item[data-on='true'] {
    background: var(--c-accent-bg);
    color: var(--c-accent);
}

.rax-choice-item:focus-visible {
    outline: none;
    background: var(--c-accent-bg);
    color: var(--c-accent);
    box-shadow: inset 0 0 0 1px var(--c-accent);
}

/* ============================================================
   LINE GRID — NO CELL BOXES

   Every cell had its own bordered box: five boxes in a five-column
   invoice line, fifteen in three lines. What came out was not a table
   but a field of boxes.

   The structure is already in the table itself: the bottom line
   separates rows, the vertical line columns. Drawing a second boundary
   buys nothing. An editable cell sits in THE SAME grid as a readable
   cell — the only difference is that you can type into it.
   ============================================================ */

/*  LINE COMMAND STRIP.

    It has NO background and no box: inside the section frame a second
    filled strip would be a third layer. The commands sit on the
    section's own background, the grid carries the frame.

    The buttons are on the LEFT: on the list screen they are right-aligned
    because the search box is on the left and the strip is full from both
    ends. Here there is nothing on the left — right-aligning would hide
    the command behind an empty area, against the reading direction. */
.rax-shell .rax-lines-bar {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-3);
    height: var(--bar-h);
    background: transparent;
    border: none;
}

/*  RELATED RECORDS ON THE FORM (K-276).

    The list inside is the entity's own list screen, and its scroll chain
    needs a container of a GIVEN height (the K-061 family): without one the
    grid grows with its rows and the pager leaves the section. Fixed, like
    the picker window. */
.rax-shell .rax-related {
    height: 340px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/*  The grid carries its own frame.

    Shell-wide the grid's border was removed — there the card
    (`.rax-list`) gives the frame. Here there is no card: the line grid
    stands alone inside the section and must draw its own boundary,
    otherwise the rows hang in the middle of the form. */
.rax-shell .rax-lines.rz-data-grid {
    border: 1px solid var(--c-line);
    border-radius: var(--r-control);
    overflow: hidden;
}

/*  The height comes from ONE LEVER and is written ON THE VARIABLE'S OWN
    ELEMENT: Radzen uses `height: var(--rz-input-height)` (`height` beats
    `min-height`) and defines this variable on the input — it is not fed
    from an ancestor. Details in rax.css. */
.rax-shell .rax-lines .rz-textbox,
.rax-shell .rax-lines .rz-dropdown,
.rax-shell .rax-lines .rz-numeric,
.rax-shell .rax-lines .rz-datepicker,
.rax-shell .rax-lines .rz-spinner,
.rax-shell .rax-lines .rz-inputtext {
    --rz-input-height: calc(var(--row-h) - 6px);
}

/*  The height chain is THE SAME as in the field frame: the outer element
    gives the height and centres vertically, the inner element only writes.
    Had both got a `min-height` the dropdown cell would stay taller than
    the others and the row would warp within itself. */

/* Outer: wrappers and direct inputs. */
.rax-shell .rax-lines .rz-textbox,
.rax-shell .rax-lines .rz-dropdown,
.rax-shell .rax-lines .rz-numeric,
.rax-shell .rax-lines .rz-datepicker,
.rax-shell .rax-lines .rz-spinner {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    padding: 0;
    min-height: calc(var(--row-h) - 6px);
    line-height: var(--lh-tight);
    font-size: var(--fs-table);
}

/* Inner: gives no height. */
.rax-shell .rax-lines .rz-dropdown .rz-dropdown-label,
.rax-shell .rax-lines .rz-datepicker input,
.rax-shell .rax-lines .rz-spinner-input,
.rax-shell .rax-lines .rz-inputtext {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    line-height: var(--lh-tight);
    font-size: var(--fs-table);
}

/* The row height comes from the ROW, not the cell: even with cells of
   different types the row stays one height. */
.rax-shell .rax-lines .rz-grid-table tbody tr {
    height: var(--row-h);
}

/*  NUMBERS RIGHT-ALIGNED — the class name is `rz-numeric-input`.

    The rule here targeted `rz-spinner-input` and NEVER MATCHED: a DOM dump
    was taken and the input's class came out `rz-numeric-input
    rz-inputtext`. So the alignment was written but not applied — the same
    as K-051, this time in the line grid.

    The old name was kept too: if the Radzen version changes the rule must
    not die silently. */
.rax-shell .rax-lines .rz-numeric .rz-numeric-input,
.rax-shell .rax-lines .rz-numeric .rz-spinner-input {
    text-align: var(--num-align);
    font-variant-numeric: var(--num-variant);
}

/*  COLUMN LINE — here it is in the body TOO.

    In the reading grid the vertical line is only in the header: there the
    eye walks along the row and a cage slows reading. In the editing grid
    the eye AIMS AT A CELL; the boundary being visible is exactly what is
    needed. Two different uses of the same grammar, both deliberate. */
.rax-shell .rax-lines .rz-grid-table tbody td + td,
.rax-shell .rax-lines .rz-grid-table thead th + th {
    border-inline-start: 1px solid var(--c-line);
}

/* The cell padding got thinner: with the box gone the text's distance to
   the edge comes from one source. */
.rax-shell .rax-lines .rz-grid-table tbody td {
    padding-block: 0;
    padding-inline: var(--sp-3);
}

/*  THE ACTIVE CELL is marked like a cell, not like a box: the background
    turns to the accent and the boundary sits on the cell's OWN edge.
    `inset` is safe here — the fieldset's legend notch problem does not
    exist in a table. */
.rax-shell .rax-lines .rz-grid-table tbody td:focus-within {
    background: var(--c-accent-bg);
    box-shadow: inset 0 0 0 1px var(--c-accent);
}

/*  NO SECOND FOCUS MARK INSIDE THE CELL.

    The mark belongs to the CELL: the boundary sits on the cell's own edge.
    If the input inside also draws its own frame/ring, two frames show
    with the gap between them — that was the rounded box appearing in the
    number cell in the screenshot.

    Instead of silencing variables one by one they are switched off here
    together: if a new `--rz-*` name appears when the Radzen version
    changes, this rule catches it too. */
.rax-shell .rax-lines .rz-grid-table tbody td :focus,
.rax-shell .rax-lines .rz-grid-table tbody td :focus-visible,
.rax-shell .rax-lines .rz-grid-table tbody td .rz-state-focused {
    outline: none;
    box-shadow: none;
    border-color: transparent;
    background: transparent;
}

/*  The line delete button is in the middle of the cell and quiet: since
    it repeats on every row, a filled red button would turn the line list
    into a field of warnings.

    THE SELECTOR IS TIED TO THE LAST CELL, not as ornament:
    `.rz-numeric-button` also carries the `.rz-button` class and the
    general selector reopened the hidden up/down arrows of number fields —
    measured, `display` came out `flex` instead of `none`. My own rule was
    overriding my own rule.

    ITS HEIGHT IS THE SAME AS THE CELL'S INPUT: this was the only thing
    inflating the row. Measured (dense mode, `--row-h: 26px`): the button
    came out 26px, beat the 26px written on `tbody tr` and raised the row
    to 27px. In view mode this column is NOT drawn at all so the row stays
    at 26px — so the only difference between the two modes was the
    command column not following the grid's rhythm. Now the button is fed
    from the same lever as the cell's inputs (`--row-h - 6px`). */
.rax-shell .rax-lines .rz-grid-table tbody td:last-child .rz-button {
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;

    width:      calc(var(--row-h) - 6px);
    height:     calc(var(--row-h) - 6px);
    min-width:  0;
    min-height: 0;
    padding:    0;
}

/* ------------------------------------------------------------
   MENU NAME ON ONE LINE

   Measured: "Gerçekleşen Eğitimler" wrapped to two lines and raised the
   item from 20px to 39px. One screen with a long name breaks the menu's
   rhythm — a row not the same height as its neighbours is the most
   expensive defect when the eye has to scan the list.

   CLIPPING AND A TOOLTIP ARE MEANINGFUL TOGETHER. Clipping without a
   tooltip would make the name unreadable; `title` is given in the
   component (RaxNav).

   `min-width: 0` IS REQUIRED: the text is inside a flex item and a flex
   item's default `min-width: auto` prevents shrinking below its content —
   so `text-overflow` alone does nothing.
   ------------------------------------------------------------ */

.rax-shell .rz-sidebar .rz-navigation-item-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The link carrying the text must be able to shrink too, otherwise it
   overflows instead of clipping. */
.rax-shell .rz-sidebar .rz-navigation-item-link { min-width: 0; }

/* ------------------------------------------------------------
   THE SEARCH IS FIXED, ONLY THE MENU SCROLLS

   Measured: the scrolling element is `.rz-sidebar` ITSELF and the search
   box is `position: relative` inside it — so when the menu grew the
   search scrolled up out of sight. To reach it you had to scroll up
   first.

   The fix is NOT `position: sticky` but a scroll chain: this repository
   already has the same pattern on the list and record screens (strip and
   pager fixed, only the rows scroll). Sticky would be a second pattern and
   the scrollbar would still appear along the whole sidebar.
   ------------------------------------------------------------ */

.rax-shell .rz-sidebar {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rax-shell .rz-sidebar .rax-navsearch { flex: none; }

.rax-shell .rz-sidebar .rz-panel-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/*  THE BAR NOW BELONGS TO THE MENU — not the sidebar.

    The scrolling element changed, so the target of the "invisible at
    rest" rule must change too; the `.rz-sidebar` rule above would now be
    writing to an element that does not scroll.

    The show condition is on the WHOLE SIDEBAR: the bar appears as the
    user approaches the menu, they need not aim at the narrow strip. */
.rax-shell .rz-sidebar .rz-panel-menu {
    scrollbar-color: transparent transparent;
}

.rax-shell .rz-sidebar:hover .rz-panel-menu,
.rax-shell .rz-sidebar:focus-within .rz-panel-menu {
    scrollbar-color: var(--c-line-2) transparent;
}

body:not(.rz-default-scrollbars) .rax-shell .rz-sidebar .rz-panel-menu::-webkit-scrollbar-thumb {
    background: transparent;
}

body:not(.rz-default-scrollbars) .rax-shell .rz-sidebar:hover .rz-panel-menu::-webkit-scrollbar-thumb,
body:not(.rz-default-scrollbars) .rax-shell .rz-sidebar:focus-within .rz-panel-menu::-webkit-scrollbar-thumb {
    background: var(--c-line-2);
    background-clip: content-box;
}

/* ------------------------------------------------------------
   THE ADMIN SCREEN'S TITLE STRIP (K-165)

   Its language is THE SAME as the record screen's command strip
   (`.rax-form-bar`): same height, same background, same bottom line. The
   eye moving between the two screens finds the same thing in the same
   place — this rule is applied a third time in the repository (list
   strip, form strip, this).
   ------------------------------------------------------------ */

.rax-admin-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex: none;
    padding: calc(var(--pad) / 2) var(--pad);
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-line);
}

/*  The title is INSIDE THE STRIP, not above it: as a separate row the
    admin screens would start 40px lower than the rest of the application
    and look like "somewhere else". */
.rax-admin-title {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--c-ink);
}

.rax-admin-bar-space {
    flex: 1 1 auto;
}

/* ============================================================
   SCREEN ENTRANCE (K-240)

   Tabs are drawn with `TabRenderMode.Client`: all panels are in the DOM,
   the hidden ones `display: none`. A CSS animation restarts BY ITSELF when
   an element goes from hidden to visible — so a tab change, a new tab and
   the move from skeleton to the real screen come alive with one rule. No
   script, no counter.

   The target is a DIRECT child of the panel: list, form, dashboard, tree,
   skeleton. `:where()` brings the specificity down to ZERO — the
   skeleton's own delayed entrance (`.rax-skel`) overrides this rule, not
   the other way round.

   It does not run while data is paged or filtered: the root element stays
   in place, only its inside is redrawn. The motion belongs to the SCREEN'S
   entrance, not to data changing.

   There is NO `both` and there must not be. The fill mode applied the last
   frame PERMANENTLY: when the animation ended
   `transform: matrix(1,0,0,1,0,0)` stayed on the element (measured).
   Invisible but it has an effect — an element carrying a `transform`
   becomes the reference box for `position: fixed` elements inside it; a
   fixed dropdown inside the list would be positioned against the list,
   not the screen.
   ============================================================ */
:where(.rax-tabs .rz-tabview-panel) > * {
    animation: rax-screen-in var(--motion-screen) var(--motion-ease);
}

@keyframes rax-screen-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    :where(.rax-tabs .rz-tabview-panel) > * {
        animation: none;
    }
}

/*  THE STRIP NEVER WRAPS (K-281). Its height is fixed — it is the card's
    frame (--bar-h) — so a second line did not grow it, it spilled over the
    grid's header. Measured on a 554 px list with an applied proposal: the
    commands took 386 px, the right end 251 px, the row 38 px and its
    content 54 px. The stack is `FlexWrap.NoWrap` in the markup — Radzen
    writes its `Wrap` as an INLINE style, which a rule here cannot beat —
    and the right end gives up room instead: the badges shrink and cut
    their text; the whole text is in their title. */

.rax-list-end > .rax-filter-chip {
    flex: 0 1 auto;
    min-width: 0;
}

/*  The commands keep their size; only the right end gives. Without this the
    buttons shrank first — «Yeni» read «Yen» — while the badge kept 209 px. */
.rax-list > .rz-row:first-child .rz-stack > .rz-button {
    flex: none;
}

/* ------------------------------------------------------------
   START TAB (K-300)

   The former screen index's frame (panel, index row, page strip) with
   three additions: a count badge on the row, a «new» button beside it,
   and a side column of small panels. No new colour, no new size.
   ------------------------------------------------------------ */

/* The tab's content scrolls; the frame above it does not. */
.rax-start {
    height: 100%;
    overflow: auto;
}

/* The side column stacks its panels. */
.rax-start-side {
    display: grid;
    gap: var(--sp-4);
    align-content: start;
}

/* Index row + its «new» button on one line; the row keeps the width. */
.rax-index-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
}

/*  The count is a number next to a name: quiet, tabular, right aligned.
    It takes the entity identifier's place on the row — a user reads
    «Kişiler · 9», not «Kişiler · Contact». */
.rax-index-count {
    font-size: var(--fs-caption);
    color: var(--c-ink-3);
    padding-inline-start: var(--sp-3);
}

/*  «New» — an icon button the height of the row, visible on hover and
    on keyboard focus, so forty rows do not show forty plus signs. */
.rax-index-new {
    display: grid;
    place-items: center;
    width: var(--row-h);
    padding: 0;
    border: none;
    border-inline-start: 1px solid transparent;
    background: transparent;
    color: var(--c-ink-3);
    font-family: 'Material Symbols', 'Material Icons';
    font-size: calc(var(--fs-table) + 3px);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--motion) var(--motion-ease),
                background-color var(--motion) var(--motion-ease),
                color var(--motion) var(--motion-ease);
}

.rax-index-line:hover .rax-index-new,
.rax-index-new:focus-visible {
    opacity: 1;
}

.rax-index-new:hover {
    background: var(--c-touch);
    color: var(--c-accent);
}

.rax-index-new:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* A recent record is a button, drawn as an index row. */
.rax-recent-row {
    width: 100%;
    border: none;
    border-inline-start: 2px solid transparent;
    background: transparent;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}

.rax-recent-row:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--r-control);
    position: relative;
    z-index: 1;
}

/* A panel with nothing in it says so, in the caption tone. */
.rax-panel-empty {
    padding: var(--sp-4);
    font-size: var(--fs-caption);
    color: var(--c-ink-3);
}

/* A short panel: a sentence and, if any, one button. */
.rax-start-tip-body {
    display: grid;
    gap: var(--sp-3);
    justify-items: start;
    padding: var(--sp-4);
}

.rax-start-tip-body p {
    margin: 0;
    font-size: var(--fs-table);
    color: var(--c-ink-2);
}

/* ------------------------------------------------------------
   EMPTY LIST (K-300)

   «Kayıt yok» in the grid's own cell was a statement; this is an
   invitation. Two states: nothing yet (offer the first record) and
   nothing matching (offer to drop the filters). Same tone as the empty
   workspace.
   ------------------------------------------------------------ */
.rax-list-empty {
    display: grid;
    justify-items: center;
    gap: var(--sp-3);
    padding: var(--sp-7) var(--sp-4);
    color: var(--c-ink-3);
    font-size: var(--fs-table);
}

.rax-list-empty-icon {
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 40px;
    opacity: 0.35;
}

/* The empty workspace offers the way back, not only a sentence. */
.rax-empty-action {
    margin-block-start: var(--sp-3);
}

/*  THE TENANT BESIDE THE PRODUCT NAME (K-300): quiet, one line, clipped.
    Not a link — the company is a fact, the product name is the door. */
.rax-brand-tenant {
    font-size: var(--fs-caption);
    font-weight: var(--fw-normal);
    color: var(--c-header-ink-2, var(--c-ink-3));
    letter-spacing: 0;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .rax-brand-tenant { display: none; }
}

/* ------------------------------------------------------------
   THE LIST'S OWN POWER (K-303)

   Popovers under the strip's right end, the group band above the grid,
   the total in the footer. No new colour: chips, touch and accent tokens.
   ------------------------------------------------------------ */

/* A strip icon that is "on" (a view open, a grouping chosen) keeps the accent. */
.rax-strip-icon[data-on='true'] {
    border-color: var(--c-accent);
    color: var(--c-accent);
    background: var(--c-accent-bg);
}

/* The panel anchors to the list; the row holding the strip is its reference. */
.rax-list {
    position: relative;
}

.rax-popover-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.rax-popover {
    position: absolute;
    top: calc(var(--row-h) + var(--sp-3));
    right: 0;
    z-index: 41;
    min-width: 16rem;
    max-width: 24rem;
    max-height: 60vh;
    overflow: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    animation: rax-scrim-in var(--motion-panel) var(--motion-ease);
}

.rax-popover-head {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-line);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-ink-2);
}

.rax-popover-empty {
    padding: var(--sp-4);
    font-size: var(--fs-caption);
    color: var(--c-ink-3);
}

.rax-popover-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--row-h);
    padding-inline: var(--sp-3) var(--sp-2);
    border-inline-start: 2px solid transparent;
}

.rax-popover-row[data-on='true'] {
    border-inline-start-color: var(--c-accent);
    background: var(--c-accent-bg);
}

.rax-popover-row:hover {
    background: var(--c-touch);
}

/* The checkbox row is a label: the whole row toggles. */
.rax-popover-check {
    cursor: pointer;
    margin: 0;
    font-size: var(--fs-table);
    color: var(--c-ink);
}

.rax-popover-pick {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: var(--fs-table);
    color: var(--c-ink);
    text-align: start;
    cursor: pointer;
}

.rax-popover-icon {
    font-family: 'Material Symbols', 'Material Icons';
    font-size: calc(var(--fs-table) + 3px);
    color: var(--c-ink-3);
}

.rax-popover-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rax-popover-x {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--c-ink-3);
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 16px;
    cursor: pointer;
    opacity: 0.7;
}

.rax-popover-x:hover {
    background: var(--c-touch);
    color: var(--c-neg);
    opacity: 1;
}

.rax-popover-foot {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-top: 1px solid var(--c-line);
}

.rax-popover-input {
    flex: 1 1 auto;
    min-width: 0;
    height: calc(var(--row-h) - 4px);
    padding-inline: var(--sp-3);
    border: 1px solid var(--c-field-line);
    border-radius: var(--r-control);
    background: var(--c-surface);
    color: var(--c-ink);
    font: inherit;
    font-size: var(--fs-table);
}

.rax-popover-input:focus-visible {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: var(--focus-ring);
}

/* The group band: a wrapped row of group buttons under the strip. */
.rax-groups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) 0 var(--sp-3);
}

.rax-groups-label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding-inline: var(--sp-2);
    font-size: var(--fs-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-ink-3);
}

.rax-groups-empty {
    font-size: var(--fs-caption);
    color: var(--c-ink-3);
}

.rax-group {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-3);
    max-width: 100%;
    min-height: calc(var(--row-h) - 6px);
    padding: 1px var(--sp-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-control);
    background: var(--c-surface);
    color: var(--c-ink);
    font: inherit;
    font-size: var(--fs-table);
    cursor: pointer;
    transition: background-color var(--motion) var(--motion-ease),
                border-color var(--motion) var(--motion-ease);
}

.rax-group:hover {
    background: var(--c-touch);
    border-color: var(--c-line-2);
}

.rax-group[data-on='true'] {
    border-color: var(--c-accent);
    background: var(--c-accent-bg);
    color: var(--c-accent);
}

.rax-group:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.rax-group-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rax-group-count {
    font-size: var(--fs-caption);
    color: var(--c-ink-3);
}

.rax-group[data-on='true'] .rax-group-count {
    color: inherit;
}

.rax-group-sum {
    font-size: var(--fs-caption);
    color: var(--c-ink-2);
    white-space: nowrap;
}

.rax-group-sum-label {
    color: var(--c-ink-3);
}

/* The footer total: the same numeric face as the cells, a shade heavier. */
.rax-total {
    font-weight: var(--fw-medium);
}

/* The total row's name, in the first column: quieter than the sums. */
.rax-total-label {
    color: var(--c-ink-3);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The footer row exists only when there is a total to show in it: a list
   without numeric columns, or one whose totals have not arrived, has no
   empty band under its rows. */
.rax-list[data-totals='false'] .rz-grid-table > tfoot {
    display: none;
}

/*  The next-generation total row is the mock's footer (K-312): the faint
    second surface, not Radzen's grey band; a hairline above it. */
[data-shell='yeni'] .rax-list .rz-grid-table > tfoot > tr > td {
    background: var(--c-surface-2);
    border-top: 1px solid var(--c-line);
}

/* ============================================================
   THE NEXT-GENERATION SHELL — `data-shell='yeni'` (K-307)

   The fifth view axis. The SAME markup drawn another way: the wide
   sidebar becomes an icon rail (its closed state is the rail, not
   zero width), the tabs become document tabs standing on the card,
   the strip takes the surface colour, list and record sit as cards
   on the desk. Nothing here adds or removes a component; the owner's
   condition is a switch that works at any moment in both directions,
   and a switch can only toggle what is drawn, never what exists.

   'klasik' has no rule: it is the frame above this line.

   Every selector starts with `[data-shell='yeni']` so that it beats the
   classic rule of the same element by one attribute — the classic rules
   are `.rax-shell .x` (0,2,0), these are (0,3,0).
   ============================================================ */

[data-shell='yeni'] {
    --rail-w: 52px;
    --tab-h: 36px;
    --header-bar-h: 46px;
    --r-card: 12px;

    /*  THE STRIP IS LIGHT. The classic designs carry a dark strip as part
        of their identity; the next-generation frame reads the surface
        colour instead, so the strip, the rail and the cards are one paper
        and the desk is the only grey. In the dark theme too: this block has
        the dark block's specificity and comes later, so the strip and the
        rail are the dark surface (measured, K-333 — the sentence here used to
        say the dark theme kept its own strip; there is no `:root[...]`
        dark block). The values are references, so they follow the theme
        (`DarkThemeTests`). */
    --c-header:       var(--c-surface);
    --c-header-2:     var(--c-surface-2);
    --c-header-ink:   var(--c-ink);
    --c-header-ink-2: var(--c-ink-2);
    --c-header-line:  var(--c-line);
    --c-sidebar:      var(--c-surface);
    --c-sidebar-line: var(--c-line);
}

/* ---- top strip ------------------------------------------------ */

[data-shell='yeni'] .rax-shell .rz-header {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

[data-shell='yeni'] .rax-shell .rax-brand-mark {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 13px;
    background: linear-gradient(145deg, var(--c-accent-2), var(--c-accent-dk));
    color: var(--c-on-accent);
}

/* ---- the rail ----------------------------------------------- */

[data-shell='yeni'] .rax-shell .rz-sidebar {
    padding: var(--sp-3) var(--sp-2);
    transition: width var(--motion-panel) var(--motion-ease);
}

/*  CLOSED IS THE RAIL, NOT NOTHING. The classic shell zeroes the closed
    sidebar; here the menu never leaves — it narrows to its icons. Each
    item keeps its `title`, so the name is one hover away.

    RADZEN HIDES IT THREE TIMES: `width: 0 !important; opacity: 0` (K-312)
    and `inert` on the element (K-319) — the third cannot be taken back in
    CSS, the icons were drawn and could not be clicked. So the rail is NOT
    Radzen's collapsed state: Radzen keeps the sidebar open and the shell
    writes `rax-rail` (MainLayout). Radzen's open width is beaten here. */
[data-shell='yeni'] .rax-shell .rz-sidebar.rax-rail {
    width: var(--rail-w) !important;
    min-width: var(--rail-w);
    padding-inline: var(--sp-2);
    border-right: 1px solid var(--c-sidebar-line);
    overflow: hidden;
}

[data-shell='yeni'] .rax-shell .rz-sidebar.rax-rail .rax-navsearch,
[data-shell='yeni'] .rax-shell .rz-sidebar.rax-rail .rz-navigation-item-text,
[data-shell='yeni'] .rax-shell .rz-sidebar.rax-rail .rz-navigation-item-icon-children {
    display: none;
}

/*  A GROUP IS A HAIRLINE IN THE RAIL: its name cannot be read at 52px, so
    the branch row shrinks to a divider between its children and the next
    group's. */
[data-shell='yeni'] .rax-shell .rz-sidebar.rax-rail .rz-panel-menu .rax-nav-branch > .rz-navigation-item-wrapper > .rz-navigation-item-link {
    min-height: 0;
    height: 1px;
    padding: 0;
    margin: var(--sp-2) var(--sp-3);
    background: var(--c-line);
    pointer-events: none;
    overflow: hidden;
}

[data-shell='yeni'] .rax-shell .rz-sidebar.rax-rail .rz-panel-menu .rax-nav-branch > .rz-navigation-item-wrapper > .rz-navigation-item-link .rz-navigation-item-icon {
    display: none;
}

[data-shell='yeni'] .rax-shell .rz-sidebar.rax-rail .rz-panel-menu .rz-navigation-menu .rz-navigation-item-link {
    width: 36px;
    height: 34px;
    min-height: 0;
    padding: 0;
    margin: 2px auto;
    justify-content: center;
    border-radius: 8px;
}

/*  Items are ROUNDED BLOCKS in both widths; the classic left stripe
    goes, the selected fill does its job. */
[data-shell='yeni'] .rax-shell .rz-panel-menu .rz-navigation-menu .rz-navigation-item-link {
    border-radius: var(--r-control);
    margin-inline: var(--sp-2);
    padding-inline-start: calc(var(--rax-nav-indent) - var(--sp-2));
}

[data-shell='yeni'] .rax-shell .rz-panel-menu .rz-navigation-menu .rz-navigation-item-link::before {
    display: none;
}

[data-shell='yeni'] .rax-shell .rz-panel-menu .rz-navigation-item-icon {
    font-size: 20px;
}

/* ---- document tabs ------------------------------------------- */

[data-shell='yeni'] .rax-tabs .rz-tabview-nav {
    align-items: flex-end;
    gap: 2px;
    padding-top: var(--sp-2);
}

/*  THE ARROWS AND THE NOTCH STAND WHERE THE TABS STAND (K-319). They are
    `--tab-h` tall from the strip's top, while the tabs here start below the
    strip's top padding — measured: tab button 50–86, notch 46–82, the glyphs
    4 px above the tab text. They take the same padding. */
[data-shell='yeni'] .rax-tabscroll,
[data-shell='yeni'] .rax-tabnotch {
    top: var(--sp-2);
}

[data-shell='yeni'] .rax-tabs .rz-tabview-nav li {
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    box-shadow: none;
    transition: background var(--motion) linear;
}

[data-shell='yeni'] .rax-tabs .rz-tabview-nav li:hover {
    background: var(--c-touch);
    box-shadow: none;
}

/*  THE ACTIVE TAB STANDS ON THE STRIP'S HAIRLINE: the same paper, one
    pixel down so the line opens under it. Until K-312 it stood on the
    card (the card's top-left corner square, glued to the tab); the mock
    puts the card 10 px below the strip with all four corners round, and
    the owner measured the app against the mock. */
[data-shell='yeni'] .rax-tabs .rz-tabview-nav li.rz-tabview-selected {
    background: var(--c-card);
    border-color: var(--c-line);
    box-shadow: none;
    margin-bottom: -1px;
}

[data-shell='yeni'] .rax-tabs .rz-tabview-nav li.rz-tabview-selected > button,
[data-shell='yeni'] .rax-tabs .rz-tabview-nav li.rz-tabview-selected > a {
    color: var(--c-ink);
}

[data-shell='yeni'] .rax-tabs .rz-tabview-nav li.rz-tabview-selected .rax-tab-title > .rzi {
    color: var(--c-accent);
}

/* ---- cards on the desk --------------------------------------- */

[data-shell='yeni'] .rax-shell .rz-body {
    background: var(--c-desk);
}

/*  THE CARD SITS ON THE DESK WITH ROOM AROUND IT (K-312): 10 px from the
    rail, the strip and the window's edges, as in the mock; four round
    corners. */
[data-shell='yeni'] .rax-tabs .rz-tabview-panels {
    padding: 10px;
}

[data-shell='yeni'] .rax-list,
[data-shell='yeni'] .rax-record {
    border-radius: var(--r-card);
    box-shadow: var(--sh-1);
}

/*  THE RECORD'S HEADING (K-312): the mock's name and code chip at the
    strip's start. The markup is in both shells; the classic strip keeps
    K-232's order and does not draw it. */
.rax-form-head {
    display: none;
}

[data-shell='yeni'] .rax-form-head {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    margin-inline-end: var(--sp-3);
}

[data-shell='yeni'] .rax-form-title {
    font-size: var(--fs-page);
    font-weight: var(--fw-medium);
    letter-spacing: -0.015em;
    color: var(--c-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}

[data-shell='yeni'] .rax-form-code {
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--c-surface-2);
    color: var(--c-ink-2);
    font-family: var(--font-code);
    font-size: calc(var(--fs-table) - .5px);
    white-space: nowrap;
}

/*  THE FORM IS TWO EQUAL COLUMNS (K-312), as in the mock: the quarter
    fields of the classic form (`Span`: narrower than 180 px) take a half
    here, so every field's edge lands on one of two lines and every box is
    as wide as its column. Only at Radzen's own large tier (1280 px), where
    the quarter rule applies; below it the classic halves and full rows
    stand. Multi-line editors keep their full row (`Span` gives them 12). */
@media (min-width: 1280px) {
    [data-shell='yeni'] .rax-record .rz-row > .rz-col-lg-3 {
        max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap));
        flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap));
    }
}

[data-shell='yeni'] .rax-form-bar {
    background: var(--c-card);
    padding-block: var(--sp-3);
}

/* ---- buttons: softer corners, the same heights --------------- */

[data-shell='yeni'] .rax-shell .rz-button {
    border-radius: var(--r-control);
}

/* ------------------------------------------------------------
   THE PREVIEW PANEL (K-307)

   The selected row at the list's right edge. It is a child of the list
   card, laid over its right side: the grid gives the room back with an
   end margin, so the panel is a sibling of the grid and no wrapper was
   put around Radzen's grid — the height chain above stays as it is.
   Below 640px of list width the panel covers the grid instead; a narrow
   list has no room for two columns (measured: the first threshold, 900px,
   caught a 712px list and silently zeroed the margin).
   ------------------------------------------------------------ */

.rax-list {
    --preview-w: 340px;
}

.rax-list:has(> .rax-preview) .rz-data-grid {
    margin-inline-end: var(--preview-w);
}

.rax-preview {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: var(--preview-w);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-4);
    background: var(--c-card);
    border-inline-start: 1px solid var(--c-line);
    overflow: auto;
    /* Above the grid and its sticky header, below the popovers (40). */
    z-index: 3;
    animation: rax-preview-in var(--motion-panel) var(--motion-ease);
}

/* The panel starts below the command strip: the strip is the list's first row
   and `--strip-h` tall (K-320) — the strip's bottom line stays in view. */
.rax-preview {
    inset-block-start: var(--strip-h);
}

@keyframes rax-preview-in {
    from { opacity: 0; transform: translateX(8px); }
}

@media (prefers-reduced-motion: reduce) {
    .rax-preview { animation: none; }
}

@container rax-list (max-width: 640px) {
    .rax-list:has(> .rax-preview) .rz-data-grid {
        margin-inline-end: 0;
    }
    .rax-preview {
        box-shadow: var(--sh-3);
    }
}

.rax-preview-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--row-h);
}

.rax-preview-icon {
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 20px;
    line-height: 1;
    color: var(--c-ink-3);
}

.rax-preview-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--c-ink);
}

.rax-preview-close {
    display: grid;
    place-items: center;
    width: var(--row-h);
    height: var(--row-h);
    padding: 0;
    border: none;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--c-ink-3);
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 17px;
    cursor: pointer;
}

.rax-preview-close:hover {
    background: var(--c-touch);
    color: var(--c-ink);
}

.rax-preview-actions {
    display: flex;
    gap: var(--gap);
}

.rax-preview-fields {
    display: grid;
    grid-template-columns: minmax(90px, 2fr) 3fr;
    gap: var(--sp-2) var(--sp-3);
    margin: 0;
    font-size: var(--fs-table);
}

.rax-preview-fields > dt {
    color: var(--c-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rax-preview-fields > dd {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-ink);
}

.rax-preview-empty {
    color: var(--c-ink-3);
}

/* ------------------------------------------------------------
   SECTION ANCHORS OF THE FORM (K-307)

   The markup is in both shells; only the next-generation shell draws
   it, to the left of the body. The form becomes a two-column grid
   there — the strip spans both columns, the rail sits under it and
   stays while the body scrolls. In a dialog and on a narrow screen
   the rail is hidden: there is no room for a second column.
   ------------------------------------------------------------ */

.rax-form-anchors {
    display: none;
}

[data-shell='yeni'] .rax-record .rax-form {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
}

[data-shell='yeni'] .rax-record .rax-form > .rax-form-bar {
    grid-column: 1 / -1;
}

[data-shell='yeni'] .rax-record .rax-form-anchors {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-self: start;
    padding: var(--form-pad) var(--sp-3) var(--form-pad) var(--sp-4);
    min-width: 0;
}

/* A form with no rail (one part, or design mode) keeps the body full width. */
[data-shell='yeni'] .rax-record .rax-form > .rax-form-bar + .rax-form-body {
    grid-column: 1 / -1;
}

[data-shell='yeni'] .rax-record .rax-form > .rax-form-anchors + .rax-form-body {
    grid-column: 2;
}

.rax-form-anchors-label {
    padding: 0 var(--sp-3) var(--sp-2);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ink-3);
}

.rax-form-anchor {
    display: block;
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: none;
    border-inline-start: 2px solid transparent;
    border-radius: 0 var(--r-control) var(--r-control) 0;
    background: transparent;
    color: var(--c-ink-2);
    font: inherit;
    font-size: var(--fs-table);
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background var(--motion) linear, color var(--motion) linear;
}

.rax-form-anchor:hover {
    background: var(--c-touch);
    color: var(--c-ink);
}

.rax-form-anchor[data-on='true'] {
    border-inline-start-color: var(--c-accent);
    color: var(--c-accent);
    font-weight: var(--fw-medium);
}

@media (max-width: 900px) {
    [data-shell='yeni'] .rax-record .rax-form {
        display: flex;
    }

    [data-shell='yeni'] .rax-record .rax-form-anchors {
        display: none;
    }
}

/* ------------------------------------------------------------
   THE FLOATING SELECTION BAR (K-307)

   Born with the second selected row, at the bottom centre of the list
   card, in the ink colour on the paper — the one dark object on the
   screen, so the eye finds it without searching. It floats over the
   grid (the list card is `position: relative`) and never pushes the
   pager; the rows under it scroll on.
   ------------------------------------------------------------ */

.rax-bulk {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: calc(var(--row-h) + var(--sp-5));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
    border-radius: 12px;
    background: var(--c-ink);
    color: var(--c-card);
    box-shadow: var(--sh-3);
    font-size: var(--fs-table);
    white-space: nowrap;
    z-index: 4;
    animation: rax-bulk-in var(--motion-panel) var(--motion-ease);
}

@keyframes rax-bulk-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
}

@media (prefers-reduced-motion: reduce) {
    .rax-bulk { animation: none; }
}

.rax-bulk-count {
    font-weight: var(--fw-medium);
    margin-inline-end: var(--sp-3);
}

.rax-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: calc(var(--row-h) - 2px);
    padding: 0 var(--sp-3);
    border: none;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--fs-table);
    cursor: pointer;
    transition: background var(--motion) linear;
}

.rax-bulk-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c-card) 14%, transparent);
}

.rax-bulk-btn:disabled {
    opacity: .45;
    cursor: default;
}

.rax-bulk-icon {
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 16px;
    line-height: 1;
}

/* ------------------------------------------------------------
   ROW ACTIONS (K-307) — at the row's end, visible on hover.

   The column exists only under the next-generation shell (the list
   decides from the shell attribute); here only how it is drawn. The
   buttons are hidden at rest, not absent: the touch target stays, a
   keyboard user reaches them with Tab and they show on focus.
   ------------------------------------------------------------ */

.rax-list .rz-grid-table .rax-rowact-head {
    padding: 0;
}

.rax-list .rz-grid-table .rax-rowact-cell {
    padding-inline: var(--sp-1) !important;
    overflow: visible;
}

/*  THE ROW STAYS ITS TIER'S HEIGHT (K-312). The buttons (row-h − 4 px)
    sat inline on the cell's text line: the line's baseline gap pushed the
    cell to 31.5 px and every row of the new shell to 32.5 px instead of
    30 — measured, the one tall cell in an otherwise 30 px row. A flex
    cell has no line box, so it is exactly `--row-h`. */
.rax-list .rz-grid-table .rax-rowact-cell > .rz-cell-data {
    display: flex;
    align-items: center;
    height: var(--row-h);
}

.rax-rowact {
    display: inline-flex;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--motion) linear;
}

.rax-list .rz-grid-table tr:hover .rax-rowact,
.rax-rowact:focus-within {
    opacity: 1;
}

.rax-rowact-btn {
    display: grid;
    place-items: center;
    width: calc(var(--row-h) - 4px);
    height: calc(var(--row-h) - 4px);
    padding: 0;
    border: none;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--c-ink-3);
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.rax-rowact-btn:hover {
    background: var(--c-accent-bg);
    color: var(--c-accent);
}

/* ------------------------------------------------------------
   THE SEARCH PANEL'S GROUP LINE (K-307): «Kayıtlar» between the
   screens and the records. Not a hit, not focusable.
   ------------------------------------------------------------ */

.rax-search-group {
    padding: var(--sp-3) var(--sp-3) var(--sp-1);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ink-3);
}

/* ============================================================
   THE VISUAL LANGUAGE OF THE NEXT-GENERATION SHELL (K-307, 3rd step)

   The first step carried the mock's STRUCTURE (rail, tabs, panel); the
   owner measured the result against the mock and the elegance was not
   there. What makes it is below: room (30px rows, 10px cells), pills
   for categories, a mono code, a strip that names the list and holds
   the search, a panel with section marks, a strip with a tenant chip.
   Every rule starts with `[data-shell='yeni']`; the classic shell keeps
   drawing as before and the new markup (list head, search box, pills)
   is invisible or plain there.
   ============================================================ */

/* ---- room: the density tiers of the new shell ------------------ */

[data-shell='yeni'][data-density='compact'] {
    --row-h: 30px;
    --cell-px: 10px;
    --header-h: 32px;
    --fs-table: 12.5px;
    --form-gap: 10px;
}

[data-shell='yeni'][data-density='normal'] {
    --row-h: 34px;
    --cell-px: 12px;
    --header-h: 34px;
}

[data-shell='yeni'][data-density='comfortable'] {
    --row-h: 40px;
    --cell-px: 14px;
    --header-h: 38px;
}

/* ---- the grid: horizontal hairlines only ----------------------- */

[data-shell='yeni'] .rax-list .rz-grid-table > thead > tr > th,
[data-shell='yeni'] .rax-list .rz-grid-table > tbody > tr > td {
    border-inline: none;
}

[data-shell='yeni'] .rax-list .rz-grid-table > thead > tr > th {
    font-weight: var(--fw-medium);
    font-size: 11.5px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-ink-3);
    /* The header is the card's paper with a hairline under it, as in the
       mock — not a grey band (K-312). */
    background: var(--c-card);
}

[data-shell='yeni'] .rax-list .rz-grid-table > tbody > tr > td[data-role='code'] {
    font-family: var(--font-code);
    font-size: calc(var(--fs-table) - .5px);
    color: var(--c-ink-2);
}

/* ---- the strip: name, one primary command ---------------------- */

.rax-list-head {
    display: none;
}

[data-shell='yeni'] .rax-list-head {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin-inline-end: var(--sp-3);
}

[data-shell='yeni'] .rax-list-title {
    font-size: var(--fs-page);
    font-weight: var(--fw-medium);
    letter-spacing: -0.015em;
    color: var(--c-ink);
    white-space: nowrap;
}

[data-shell='yeni'] .rax-list-count {
    font-size: var(--fs-caption);
    color: var(--c-ink-3);
}

/*  THE LIFECYCLE COMMANDS LEAVE THE STRIP in the new shell: «İncele» and
    «Düzenle» live on the row and in the panel, «Kopyala» in the panel,
    «Sil» on the row. One primary command remains, as in the mock. The
    list's own search box left too (K-319): the top bar's palette searches
    the list, and the icon group takes the free room again (`.rax-list-end`). */
[data-shell='yeni'] .rax-list .rax-strip-lifecycle {
    display: none;
}

[data-shell='yeni'] .rax-list .rz-button.rz-primary {
    border-radius: var(--r-control);
    padding-inline: var(--sp-4);
    font-weight: var(--fw-medium);
}

/* ---- pills --------------------------------------------------------- */

[data-shell='yeni'] .rax-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: var(--fw-medium);
    line-height: 1;
    white-space: nowrap;
    background: color-mix(in srgb, var(--rax-tone) 12%, var(--c-card));
    color: color-mix(in srgb, var(--rax-tone) 78%, var(--c-ink));
}

[data-shell='yeni'] .rax-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rax-tone);
    flex: none;
}

/*  TWO KINDS OF TONE (K-332), both chosen on the server.

    A CATEGORY (0…3, `LookupItem.CategoryTones`) is a value without a
    meaning — «Telefon · Toplantı · E-posta» — and takes a hue in list
    order. The four hues are FIXED, in the arc between the signal colours
    (red ~25°, amber ~75°, green ~150°): 200 · 255 · 300 · 340. The design's
    accent was tried as the first and measured on the twelve designs — in
    «Dinamik» it is 178° (the same as the third), in «Sarımsı» amber (the
    «waiting» meaning), in «Beyaz», «Grimsi» and «Sade» nearly grey (the «out of
    play» meaning).

    A MEANING (pos, neg, flag, muted, `ValueTone`) is declared by the
    product: «Kazanıldı», «Reddedildi», «Bekliyor», «İptal». The signal
    colours are kept for these alone — a category painted green used to
    read as «good» («Yüksek» priority, «E-posta»). */
/*  THE LIGHTNESS IS THE PALETTE'S, NOT THE THEME'S. The four hues take the
    lightness of `--c-pos`, which every palette already sets for its own
    card: fixed at 54% two of them fell under 4.5:1 on the dark card (4.36,
    4.29); switched by `[data-theme='dark']` they became unreadable on «Yeni
    nesil», whose card stays white in the dark theme. A custom property
    takes no fallback line: its value is not checked when parsed, so the
    last line always wins (relative colours: Chrome 119, Safari 16.4,
    Firefox 128). */
[data-shell='yeni'] .rax-pill[data-tone='0'] { --rax-tone: oklch(from var(--c-pos) l 0.12 200); }
[data-shell='yeni'] .rax-pill[data-tone='1'] { --rax-tone: oklch(from var(--c-pos) l 0.16 255); }
[data-shell='yeni'] .rax-pill[data-tone='2'] { --rax-tone: oklch(from var(--c-pos) l 0.16 300); }
[data-shell='yeni'] .rax-pill[data-tone='3'] { --rax-tone: oklch(from var(--c-pos) l 0.16 340); }
[data-shell='yeni'] .rax-pill[data-tone='pos']   { --rax-tone: var(--c-pos); }
[data-shell='yeni'] .rax-pill[data-tone='neg']   { --rax-tone: var(--c-neg); }
[data-shell='yeni'] .rax-pill[data-tone='flag']  { --rax-tone: var(--c-flag); }
[data-shell='yeni'] .rax-pill[data-tone='muted'] { --rax-tone: var(--c-ink-3); }

/* ---- the panel: section marks, titles, related rows -------------- */

[data-shell='yeni'] .rax-preview {
    gap: var(--sp-5);
    padding: var(--sp-5);
}

.rax-preview-titles {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.rax-preview-sub {
    font-size: var(--fs-caption);
    color: var(--c-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rax-preview-code {
    font-family: var(--font-code);
}

[data-shell='yeni'] .rax-preview-title {
    font-size: 15px;
    font-weight: var(--fw-medium);
    letter-spacing: -0.01em;
}

/*  The section mark is the form's (K-235): a small accent square, the
    label in small caps, a hairline to the edge. */
.rax-preview-section {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-section);
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ink-2);
}

.rax-preview-section::before {
    content: "";
    width: 5px;
    height: 5px;
    background: var(--c-accent);
    flex: none;
}

.rax-preview-section::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--c-line);
}

.rax-preview-section-n {
    font-weight: var(--fw-normal);
    letter-spacing: 0;
    color: var(--c-ink-3);
}

[data-shell='yeni'] .rax-preview-fields {
    grid-template-columns: minmax(96px, 110px) minmax(0, 1fr);
    gap: var(--sp-3) var(--sp-4);
    margin-top: calc(var(--sp-3) * -1);
}

.rax-preview-mini {
    display: flex;
    flex-direction: column;
    margin-top: calc(var(--sp-3) * -1);
}

.rax-preview-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-2) 0;
    border: none;
    border-bottom: 1px solid var(--c-line);
    background: transparent;
    color: var(--c-ink);
    font: inherit;
    font-size: var(--fs-table);
    text-align: start;
    cursor: pointer;
}

.rax-preview-row:last-child {
    border-bottom: none;
}

.rax-preview-row:hover .rax-preview-row-text:first-child {
    color: var(--c-accent);
}

.rax-preview-row-num {
    flex: none;
    font-family: var(--font-code);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    color: var(--c-ink-3);
}

.rax-preview-row-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rax-preview-row-text + .rax-preview-row-text {
    flex: 0 1 auto;
    color: var(--c-ink-3);
}

/* ---- row actions: the danger tone ------------------------------- */

.rax-rowact-btn[data-kind='danger']:hover {
    background: color-mix(in srgb, var(--c-neg) 12%, var(--c-card));
    color: var(--c-neg);
}

/* ---- the top strip: tenant chip, command box -------------------- */

[data-shell='yeni'] .rax-brand-tenant {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--c-line);
    border-radius: 999px;
    color: var(--c-ink-3);
    font-size: var(--fs-caption);
}

[data-shell='yeni'] .rax-search-field {
    height: 32px;
    padding-inline: var(--sp-3);
    border-color: var(--c-line);
    border-radius: 9px;
    background: var(--c-surface-2);
}

[data-shell='yeni'] .rax-search-field:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 14%, transparent);
}

/*  The shortcut on the strip's box, as the mock writes «Ctrl K»: a hint,
    drawn by CSS so the palette's box (which has no shortcut to show) and
    the classic strip stay untouched. */
[data-shell='yeni'] .rax-search[data-palette='false'] .rax-search-field::after {
    content: "Alt+F";
    flex: none;
    font: 500 10.5px var(--font-code);
    color: var(--c-ink-3);
    border: 1px solid var(--c-line-2);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 0 5px;
    line-height: 16px;
}

/* ---- cards: a touch more depth, the tab merges into the card ---- */

[data-shell='yeni'] .rax-list,
[data-shell='yeni'] .rax-record {
    box-shadow: 0 1px 2px rgba(20, 24, 40, 0.05), 0 0 0 1px rgba(20, 24, 40, 0.04);
    border-color: transparent;
}

/*  THE STRIP'S ROOM (K-320). The strip has a fixed height; a block padding on
    top of it left the 30px button no room (42 − 24 − 1 = 17px): the flex line
    overflowed and the button sat on the bottom hairline. The room is in the
    height token, not in padding, and the row centres whatever it holds. */
[data-shell='yeni'] .rax-list {
    --strip-h: calc(var(--row-h) + var(--sp-5));
}

[data-shell='yeni'] .rax-list > .rz-row:first-child {
    padding: 0 var(--sp-5);
    align-content: center;
    border-bottom: 1px solid var(--c-line);
}

/* ------------------------------------------------------------
   THE FORM'S RIGHT COLUMN (K-307, 4th step)

   Record facts and the record tools inline, beside the body. The form's
   grid grows a third column under the next-generation shell; without
   the anchor rail the body spans the first two. Hidden below 1180px —
   three columns do not fit, and the tools are still one click away on
   the strip.
   ------------------------------------------------------------ */

.rax-form-aside {
    display: none;
}

[data-shell='yeni'] .rax-record .rax-form {
    grid-template-columns: 168px minmax(0, 1fr) 300px;
}

[data-shell='yeni'] .rax-record .rax-form > .rax-form-bar + .rax-form-body {
    grid-column: 1 / 3;
}

[data-shell='yeni'] .rax-record .rax-form-aside {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    min-width: 0;
    max-height: 100%;
    overflow: auto;
    padding: var(--form-pad) var(--form-pad) var(--form-pad) 0;
}

/* The grid gets a third column only when the aside is there. */
[data-shell='yeni'] .rax-record .rax-form:not(:has(> .rax-form-aside)) {
    grid-template-columns: 168px minmax(0, 1fr);
}

.rax-form-aside-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--c-line);
    border-radius: 10px;
    background: var(--c-card);
    min-width: 0;
}

.rax-form-aside-card .rax-preview-fields {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-3);
    font-size: var(--fs-table);
}

/* The history panel inline: the dialog's table squeezed into a column. */
.rax-form-aside-card .rax-history {
    margin: 0;
    padding: 0;
    font-size: var(--fs-caption);
}

.rax-form-aside-card .rax-history-table {
    width: 100%;
    table-layout: fixed;
    font-size: var(--fs-caption);
}

.rax-form-aside-card .rax-history-table td,
.rax-form-aside-card .rax-history-table th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1180px) {
    [data-shell='yeni'] .rax-record .rax-form,
    [data-shell='yeni'] .rax-record .rax-form:not(:has(> .rax-form-aside)) {
        grid-template-columns: 168px minmax(0, 1fr);
    }

    [data-shell='yeni'] .rax-record .rax-form > .rax-form-bar + .rax-form-body {
        grid-column: 1 / -1;
    }

    [data-shell='yeni'] .rax-record .rax-form-aside {
        display: none;
    }
}

/*  A RELATED LIST INSIDE A FORM has its name on the fieldset already (K-276);
    its own head would say it twice, one line apart. */
[data-shell='yeni'] .rax-related .rax-list-head {
    display: none;
}

/*  A RELATED LIST INSIDE A FORM IS A TABLE, NOT A SCREEN (K-312): the mock
    shows the rows and one «Yeni» command; the view tools (views, columns,
    panel, export, deleted, refresh) belong to the list's own tab. */
[data-shell='yeni'] .rax-related .rax-list-end {
    display: none;
}

/*  …AND AS TALL AS ITS ROWS (K-312). The fixed 340 px (K-276) is the
    scroll chain's bound; under the new shell it becomes the CEILING: three
    visits drew three rows and ~200 px of empty card under them. A flex
    column with a max-height still bounds the grid, so a long list keeps
    scrolling inside the section. */
[data-shell='yeni'] .rax-shell .rax-related {
    height: auto;
    max-height: 340px;
}

/*  THE ASIDE'S CARD TITLES ARE SECTION MARKS, NOT PANEL TITLES (K-312).
    `.rax-preview-section` reads `--fs-section` (15 px, the panel title's
    size): uppercase at 15 px, «KAYIT BİLGİSİ» shouted over a 12.5 px
    table. The form's own section mark («GENEL») is the caption size, and
    so is the mock's (11 px); the aside cards take the same. */
[data-shell='yeni'] .rax-form-aside-card .rax-preview-section {
    font-size: var(--fs-caption);
}