/* Reveo's application SHELL, copied from reveo-suhbat/public/app.css. The companion to reveo-tokens.css, and the half that was missing. Tokens alone are a palette: they make a page use the right green and the right faces, and leave it structurally a different product. What makes somebody recognise a Reveo app is the CHROME — the 266px rail with the mark at the top, the 72px brand bar, the collapsible nav, the topbar that carries the page title. A green top-nav is not that. Copied, not re-derived, for the same reason as the tokens: when Suhbat's shell moves, this file is what gets re-synced. Product-specific layout belongs in app.css, below this. The rail collapses to 68px on `:root[data-rail='collapsed']`, which is a user preference persisted client-side. */ .shell { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; } .rail { background: var(--surface); border-right: 1px solid var(--line); padding: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 10px; height: var(--brandbar); flex-shrink: 0; padding: 0 20px; border-bottom: 1px solid var(--line); } .brand .mark { width: 30px; height: 30px; flex: none; display: grid; place-items: center; } .brand .mark img { width: 30px; height: 30px; display: block; } .brand .name { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; } /* kit.css pins the product name to #000 and patches it back in dark.css. --ink renders the same on light and needs no second rule to keep in step. */ .brand .name b { font-family: var(--font-d); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; color: var(--ink); } .brand .name span { font-size: 9px; font-weight: 600; letter-spacing: .13em; color: var(--ink-3); text-transform: uppercase; line-height: 1; white-space: nowrap; } .nav { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 3px; } .nav button { all: unset; display: flex; align-items: center; gap: 12px; box-sizing: border-box; height: 44px; padding: 0 12px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease); } /* `all: unset` above wipes the UA's display:none for [hidden], so the rule must be restated or a hidden rail item renders anyway — which is how every manager saw «Natijalarim», an operator-only view that 404s without a seat. */ .nav button[hidden] { display: none; } .nav button .ic { width: 20px; height: 20px; flex: none; color: var(--ink-3); transition: color .18s var(--ease); } .nav button .ic svg { width: 20px; height: 20px; display: block; } .nav button .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav button:hover .ic { color: var(--ink-2); } .nav button[aria-current="page"] .ic { color: var(--brand); } .nav button:hover { background: var(--surface-hover); color: var(--ink); } .nav button[aria-current="page"] { background: var(--brand-soft); color: var(--brand-deep); } .nav button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } .nav .count { font-family: var(--font-b); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--pill); display: grid; place-items: center; background: var(--surface-hover); color: var(--ink-2); } .nav button[aria-current="page"] .count { background: var(--surface); color: var(--brand-deep); } /* The counts are filled in after the first fetch. An empty pill is a grey lozenge next to a label, which reads as a broken badge rather than a pending one. */ .nav .count:empty { display: none; } /* ---- collapse ---- owner-react's own affordance, ported: the attribute lives on so the rail width is one token override rather than a second layout, and the choice is read before first paint so a collapsed rail never renders wide and snaps. 68px is kit.css's collapsed --sidebar-w. */ .rail-collapse { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; margin: 2px 14px 12px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink-3); font-size: 13px; line-height: 1; cursor: pointer; transition: color .15s var(--ease), background .15s var(--ease); } .rail-collapse:hover { color: var(--ink-2); background: var(--surface-hover); } .rail-collapse:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } .rail-collapse .ic { width: 20px; height: 20px; flex: none; display: grid; place-items: center; } .rail-collapse .ic svg { width: 20px; height: 20px; display: block; transition: transform .2s var(--ease); } :root[data-rail='collapsed'] { --rail: 68px; } :root[data-rail='collapsed'] .brand .name, :root[data-rail='collapsed'] .nav button .lbl, :root[data-rail='collapsed'] .nav .count, :root[data-rail='collapsed'] .rail-collapse .lbl { display: none; } :root[data-rail='collapsed'] .brand { padding: 0; justify-content: center; } :root[data-rail='collapsed'] .nav { padding: 16px 14px; } :root[data-rail='collapsed'] .nav button { justify-content: center; padding: 0; } :root[data-rail='collapsed'] .rail-collapse { justify-content: center; padding: 9px 0; } :root[data-rail='collapsed'] .rail-collapse .ic svg { transform: rotate(180deg); } /* ---- topbar ---- kit.css's `.tb`, metric for metric: 72px, translucent surface over a blur, a rule under it. The page title lives here rather than in the scroll area, so it survives scrolling and the signed-in member has somewhere to sit that is not the bottom of the rail. */ .pane { display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; } .tb { display: flex; align-items: center; gap: 18px; height: var(--brandbar); flex-shrink: 0; padding: 0 30px; /* Opaque first: a browser without color-mix gets a solid bar rather than a transparent one with the page scrolling through it. */ background: var(--surface); background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid var(--line); z-index: 15; } .tb-title { min-width: 0; } .tb-title h1 { font-size: var(--t-h1); line-height: 1.15; letter-spacing: -0.02em; } .tb-title p { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-spacer { flex: 1; } /* Search + assistant as one unit (Metasell): a single bordered, rounded container holding the search pill and the «AI yordamchi» segment, split by a thin divider. The container owns the border and the radius; the two buttons inside carry neither. */ .tb-searchgroup { display: inline-flex; align-items: stretch; height: 38px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; transition: border-color .18s var(--ease); } .tb-searchgroup:hover, .tb-searchgroup:focus-within { border-color: var(--line-strong); } .tb-searchgroup-div { width: 1px; align-self: stretch; background: var(--line); flex: none; } /* Search trigger in the bar: looks like a search field, opens the palette. The left segment of the group, taking the slack so the assistant sits flush right. */ .tb-searchbtn { display: inline-flex; align-items: center; gap: 9px; height: 100%; padding: 0 10px 0 13px; flex: 1 1 auto; width: min(340px, 32vw); min-width: 180px; border-radius: 0; background: transparent; border: 0; color: var(--ink-4); font: inherit; font-size: 14px; cursor: pointer; transition: background .18s var(--ease); } .tb-searchbtn:hover { background: var(--surface); } /* Inside the group the outline draws INWARD, or overflow:hidden clips it. */ .tb-searchbtn:focus-visible, .tb-ai:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } .tb-searchbtn-ic { display: grid; place-items: center; color: var(--ink-4); flex: none; } .tb-searchbtn-ic svg { width: 17px; height: 17px; display: block; } .tb-searchbtn-lbl { flex: 1; text-align: left; } .tb-searchbtn-kbd { font: inherit; font-size: 11px; font-weight: 600; color: var(--ink-4); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; } /* «AI yordamchi»: the right segment of the group, the kit's brand accent set against the search pill's plain surface. No border or radius of its own — the group clips its right corners round. */ .tb-ai { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 100%; padding: 0 14px; border-radius: 0; border: 0; background: linear-gradient(135deg, var(--brand-soft), var(--brand-soft-2)); color: var(--brand-deep); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: filter .18s var(--ease); } .tb-ai:hover { filter: brightness(1.04); } .tb-ai-ic { display: grid; place-items: center; color: var(--brand); flex: none; } .tb-ai-ic svg { width: 17px; height: 17px; display: block; }