/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../../node_modules/.pnpm/next@14.2.35_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!../../node_modules/.pnpm/next@14.2.35_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/components/NavBar.module.css ***!
\********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* =============================================================================
* Tenant Admin — primary navigation
*
* Layout: persistent left sidebar on desktop, collapsible drawer on mobile.
* The component is still named NavBar.tsx for backwards compat, but visually
* it is a sidebar. A slim mobile-only topbar hosts the hamburger trigger.
*
* Desktop has TWO collapse axes:
* 1. Mobile drawer (.sidebarOpen) — only relevant below 768px.
* 2. Desktop rail (.sidebarCollapsed) — applied at >= 768px to shrink
* the sidebar to an icon rail. The actual width swap happens via
* the `--sidebar-width` token on `` (set by sidebar-state.ts)
* so `main { margin-left: var(--sidebar-width); }` reacts without
* this stylesheet needing to know the layout's sizing rule.
*
* This file is intentionally a near-mirror of apps/admin/src/components/
* NavBar.module.css — the two consoles share visual language by design.
* ============================================================================= */
/* --- Slim topbar (mobile only) -------------------------------------------- */
.NavBar_topbar__aoqkM {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 90;
height: var(--topbar-height, 56px);
background: var(--rf-nav-topbar-bg);
backdrop-filter: saturate(140%) blur(12px);
-webkit-backdrop-filter: saturate(140%) blur(12px);
border-bottom: 1px solid var(--rf-nav-topbar-border);
color: var(--rf-text-primary);
box-shadow: var(--rf-shadow-sm);
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0 1rem;
}
@media (min-width: 768px) {
.NavBar_topbar__aoqkM {
display: none;
}
}
.NavBar_hamburger__auH4s {
background: transparent;
border: 1px solid var(--rf-border-default);
color: var(--rf-text-primary);
border-radius: var(--rf-radius-md);
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
transition:
background var(--rf-motion-fast) var(--rf-motion-easing),
border-color var(--rf-motion-fast) var(--rf-motion-easing);
}
.NavBar_hamburger__auH4s:hover {
background: var(--rf-bg-card-elevated);
border-color: var(--rf-border-strong);
}
.NavBar_topbarBrand__vdwom {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--rf-text-primary);
font-weight: var(--rf-font-weight-bold);
font-size: 0.95rem;
letter-spacing: -0.01em;
text-decoration: none;
}
.NavBar_topbarBrand__vdwom:hover {
color: var(--rf-text-primary);
text-decoration: none;
}
/* --- Backdrop (mobile drawer only) ---------------------------------------- */
.NavBar_backdrop__cfg8R {
position: fixed;
inset: 0;
background: rgba(2, 8, 18, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 95;
}
@media (min-width: 768px) {
.NavBar_backdrop__cfg8R {
display: none;
}
}
/* --- Sidebar -------------------------------------------------------------- */
.NavBar_sidebar__DgNMI {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var(--sidebar-width);
z-index: 100;
background: var(--rf-nav-topbar-bg);
border-right: 1px solid var(--rf-nav-topbar-border);
color: var(--rf-text-primary);
box-shadow: var(--rf-shadow-sm);
/* Mobile: hidden off-canvas; topbar+hamburger control visibility. */
transform: translateX(-100%);
transition:
transform var(--rf-motion-normal, 200ms) var(--rf-motion-easing, ease),
width var(--rf-motion-normal, 200ms) var(--rf-motion-easing, ease);
}
.NavBar_sidebarOpen__m4LXq {
transform: translateX(0);
}
@media (min-width: 768px) {
.NavBar_sidebar__DgNMI {
/* Always-on on desktop. */
transform: translateX(0);
}
}
.NavBar_sidebarInner__Shraq {
height: 100%;
display: flex;
flex-direction: column;
padding: 1.25rem 1rem 1rem;
gap: 1.25rem;
}
/* Brand + collapse toggle row. Brand truncates label when collapsed; the
toggle button is desktop-only. */
.NavBar_brandRow__YlExq {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--rf-nav-topbar-border);
}
.NavBar_brand__JIbLR {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--rf-text-primary);
font-weight: var(--rf-font-weight-bold);
font-size: 1rem;
letter-spacing: -0.01em;
text-decoration: none;
padding: 0.25rem 0.5rem;
min-width: 0;
}
.NavBar_brand__JIbLR:hover {
color: var(--rf-text-primary);
text-decoration: none;
}
/* Square mark always shown — anchors the brand visually even when the
text label is hidden in collapsed mode. */
.NavBar_brandMark__ZrjOL {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
font-size: 0.75rem;
font-weight: var(--rf-font-weight-bold);
letter-spacing: 0.06em;
color: var(--rf-text-on-accent);
background: var(--rf-accent-primary);
border-radius: var(--rf-radius-md);
box-shadow: var(--rf-shadow-glow-accent);
}
.NavBar_brandLabel__dZg4g {
display: inline-flex;
align-items: center;
gap: 0.45rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* The "Tenant Admin" pill next to the brandmark — accent-tinted teal */
.NavBar_adminPill___H4f_ {
background: var(--rf-accent-primary-tint);
color: var(--rf-accent-primary);
border: 1px solid rgba(24, 199, 184, 0.36);
font-size: 0.65rem;
font-weight: var(--rf-font-weight-semibold);
padding: 0.18rem 0.55rem;
border-radius: var(--rf-radius-pill);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Desktop-only collapse toggle. Inherits sidebar background; uses a
subtle border like the hamburger pattern to telegraph its role. */
.NavBar_collapseToggle__BrzkK {
flex-shrink: 0;
background: transparent;
border: 1px solid var(--rf-border-default);
color: var(--rf-text-secondary);
border-radius: var(--rf-radius-md);
width: 28px;
height: 28px;
display: none; /* mobile: hidden by default */
align-items: center;
justify-content: center;
font-size: 0.8rem;
line-height: 1;
cursor: pointer;
transition:
background var(--rf-motion-fast) var(--rf-motion-easing),
border-color var(--rf-motion-fast) var(--rf-motion-easing),
color var(--rf-motion-fast) var(--rf-motion-easing);
}
.NavBar_collapseToggle__BrzkK:hover {
background: var(--rf-bg-card-elevated);
border-color: var(--rf-border-strong);
color: var(--rf-text-primary);
}
.NavBar_collapseToggle__BrzkK:focus-visible {
outline: 2px solid var(--rf-accent-primary);
outline-offset: 2px;
}
@media (min-width: 768px) {
.NavBar_collapseToggle__BrzkK {
display: inline-flex;
}
}
.NavBar_links__zWEj2 {
display: flex;
flex-direction: column;
gap: 0.15rem;
flex: 1 1;
min-height: 0;
overflow-y: auto;
}
.NavBar_link__fBJDB {
position: relative;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.85rem;
border-radius: var(--rf-radius-md);
font-size: var(--rf-font-size-sm);
font-weight: var(--rf-font-weight-medium);
color: var(--rf-text-secondary);
text-decoration: none;
white-space: nowrap;
transition:
background var(--rf-motion-fast) var(--rf-motion-easing),
color var(--rf-motion-fast) var(--rf-motion-easing);
}
.NavBar_link__fBJDB:hover {
background: var(--rf-nav-item-hover-bg);
color: var(--rf-text-primary);
text-decoration: none;
}
.NavBar_link__fBJDB:focus-visible {
outline: 2px solid var(--rf-accent-primary);
outline-offset: 2px;
}
/* Per-link icon: the first letter of the label inside a small monogram
square. Doubles as the only visible content when the rail is collapsed,
plus an anchor for the active-indicator pill on the left edge. */
.NavBar_linkIcon__LUxj_ {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
font-size: 0.72rem;
font-weight: var(--rf-font-weight-semibold);
letter-spacing: 0.04em;
color: var(--rf-text-muted);
background: var(--rf-bg-section);
border: 1px solid var(--rf-border-default);
border-radius: var(--rf-radius-sm);
text-transform: uppercase;
}
.NavBar_link__fBJDB:hover .NavBar_linkIcon__LUxj_,
.NavBar_link__fBJDB.NavBar_active__raueC .NavBar_linkIcon__LUxj_ {
color: var(--rf-accent-primary);
border-color: var(--rf-accent-primary);
background: var(--rf-accent-primary-tint);
}
.NavBar_linkLabel__bkYiy {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.NavBar_mockBadge__H5Poq {
margin-left: 6px;
font-size: 0.65rem;
padding: 1px 5px;
border-radius: var(--rf-radius-pill, 999px);
background: var(--color-surface-alt, #f9fafb);
color: var(--color-text-muted);
border: 1px solid var(--color-border);
font-weight: 500;
}
.NavBar_active__raueC {
background: var(--rf-nav-item-active-bg);
color: var(--rf-nav-item-active-text);
font-weight: var(--rf-font-weight-semibold);
}
.NavBar_active__raueC::before {
content: '';
position: absolute;
left: 0;
top: 0.4rem;
bottom: 0.4rem;
width: 3px;
background: var(--rf-nav-item-active-indicator);
border-radius: var(--rf-radius-pill);
}
.NavBar_footer__g9q1m {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-top: 0.75rem;
border-top: 1px solid var(--rf-nav-topbar-border);
}
.NavBar_logout__HM0Eb {
display: flex;
align-items: center;
gap: 0.6rem;
background: transparent;
border: 1px solid var(--rf-border-default);
color: var(--rf-text-secondary);
border-radius: var(--rf-radius-md);
padding: 0.5rem 0.85rem;
font-size: var(--rf-font-size-sm);
font-weight: var(--rf-font-weight-medium);
cursor: pointer;
text-align: left;
transition:
background var(--rf-motion-fast) var(--rf-motion-easing),
border-color var(--rf-motion-fast) var(--rf-motion-easing),
color var(--rf-motion-fast) var(--rf-motion-easing);
}
.NavBar_logout__HM0Eb:hover {
background: var(--rf-bg-card-elevated);
border-color: var(--rf-border-strong);
color: var(--rf-text-primary);
}
/* ----------------------------------------------------------------------
* Collapsed (icon-rail) variant — desktop only.
*
* The shrink to ~64px is owned by the html-class
* `.rf-sidebar-collapsed { --sidebar-width: 64px; }` set in globals.css,
* so `main { margin-left: var(--sidebar-width); }` reacts automatically
* without anything page-specific. This stylesheet's job is to hide
* labels and re-centre everything that remains.
* ---------------------------------------------------------------------- */
@media (min-width: 768px) {
.NavBar_sidebarCollapsed__UQtpC .NavBar_sidebarInner__Shraq {
padding: 1rem 0.5rem 1rem;
}
.NavBar_sidebarCollapsed__UQtpC .NavBar_brandRow__YlExq {
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding-bottom: 0.5rem;
}
.NavBar_sidebarCollapsed__UQtpC .NavBar_brand__JIbLR {
padding: 0;
justify-content: center;
}
.NavBar_sidebarCollapsed__UQtpC .NavBar_brandLabel__dZg4g {
display: none;
}
.NavBar_sidebarCollapsed__UQtpC .NavBar_link__fBJDB {
justify-content: center;
gap: 0;
padding: 0.55rem 0;
}
.NavBar_sidebarCollapsed__UQtpC .NavBar_linkLabel__bkYiy {
display: none;
}
.NavBar_sidebarCollapsed__UQtpC .NavBar_linkIcon__LUxj_ {
width: 32px;
height: 32px;
font-size: 0.85rem;
border-radius: var(--rf-radius-md);
}
.NavBar_sidebarCollapsed__UQtpC .NavBar_active__raueC::before {
/* Active indicator stays — the pill anchors against the icon's
left edge. Height matches the larger icon. */
top: 0.5rem;
bottom: 0.5rem;
}
.NavBar_sidebarCollapsed__UQtpC .NavBar_logout__HM0Eb {
justify-content: center;
padding: 0.5rem 0;
gap: 0;
}
.NavBar_sidebarCollapsed__UQtpC .NavBar_logout__HM0Eb .NavBar_linkLabel__bkYiy {
display: none;
}
}
/* The mobile drawer is always full-width regardless of the desktop
collapsed preference — collapse only matters when the sidebar is
actually visible. */
@media (max-width: 767px) {
.NavBar_sidebarCollapsed__UQtpC {
width: var(--sidebar-width);
}
.NavBar_sidebarCollapsed__UQtpC .NavBar_brandLabel__dZg4g,
.NavBar_sidebarCollapsed__UQtpC .NavBar_linkLabel__bkYiy {
display: inline-flex;
}
}
/* --- Group sections (Privacy & Trust, HR Operations) ---------------------- */
.NavBar_groupContainer__ABo0n {
display: flex;
flex-direction: column;
border-top: 1px solid var(--rf-border-default);
margin-top: var(--rf-space-2);
padding-top: var(--rf-space-1);
}
.NavBar_groupHeader__WtFe3 {
padding: var(--rf-space-3) var(--rf-space-4) var(--rf-space-1);
font-size: var(--rf-font-size-xs);
font-weight: var(--rf-font-weight-semibold);
color: var(--rf-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.NavBar_groupChildren__oi8Ky {
display: flex;
flex-direction: column;
gap: 2px;
padding-left: var(--rf-space-3);
border-left: 2px solid var(--rf-border-default);
}
@media (min-width: 768px) {
.NavBar_sidebarCollapsed__UQtpC .NavBar_groupHeader__WtFe3 {
/* Cleanest: hide the entire header on the collapsed rail so the
rail stays purely icon-based. */
display: none;
}
.NavBar_sidebarCollapsed__UQtpC .NavBar_groupChildren__oi8Ky {
padding-left: 0;
border-left: none;
}
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../../node_modules/.pnpm/next@14.2.35_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../node_modules/.pnpm/next@14.2.35_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../node_modules/.pnpm/next@14.2.35_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/font/google/target.css?{"path":"src\\app\\layout.tsx","import":"Inter","arguments":[{"subsets":["latin"],"variable":"--rf-font-sans-override","display":"swap"}],"variableName":"inter"} ***!
\****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
font-family: '__Inter_f367f3';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: '__Inter_f367f3';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: '__Inter_f367f3';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: '__Inter_f367f3';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: '__Inter_f367f3';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: '__Inter_f367f3';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: '__Inter_f367f3';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Inter_Fallback_f367f3';src: local("Arial");ascent-override: 90.49%;descent-override: 22.56%;line-gap-override: 0.00%;size-adjust: 107.06%
}.__className_f367f3 {font-family: '__Inter_f367f3', '__Inter_Fallback_f367f3';font-style: normal
}.__variable_f367f3 {--rf-font-sans-override: '__Inter_f367f3', '__Inter_Fallback_f367f3'
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../../node_modules/.pnpm/next@14.2.35_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../node_modules/.pnpm/next@14.2.35_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../node_modules/.pnpm/next@14.2.35_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/font/google/target.css?{"path":"src\\app\\layout.tsx","import":"JetBrains_Mono","arguments":[{"subsets":["latin"],"variable":"--rf-font-mono-override","display":"swap"}],"variableName":"jetbrainsMono"} ***!
\*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
font-family: '__JetBrains_Mono_3c557b';
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url(/_next/static/media/886030b0b59bc5a7-s.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: '__JetBrains_Mono_3c557b';
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url(/_next/static/media/0aa834ed78bf6d07-s.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: '__JetBrains_Mono_3c557b';
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url(/_next/static/media/67957d42bae0796d-s.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: '__JetBrains_Mono_3c557b';
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url(/_next/static/media/f911b923c6adde36-s.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: '__JetBrains_Mono_3c557b';
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url(/_next/static/media/939c4f875ee75fbb-s.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: '__JetBrains_Mono_3c557b';
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url(/_next/static/media/bb3ef058b751a6ad-s.p.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__JetBrains_Mono_Fallback_3c557b';src: local("Arial");ascent-override: 75.79%;descent-override: 22.29%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_3c557b {font-family: '__JetBrains_Mono_3c557b', '__JetBrains_Mono_Fallback_3c557b';font-style: normal
}.__variable_3c557b {--rf-font-mono-override: '__JetBrains_Mono_3c557b', '__JetBrains_Mono_Fallback_3c557b'
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../../node_modules/.pnpm/next@14.2.35_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.35_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!../../packages/design-system/styles/tokens.css ***!
\**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* =============================================================================
* RiskFabric.io — Design Tokens
*
* Single source of truth for color, typography, spacing, motion.
* Consumed by apps/admin and apps/web via @riskfabric/design-system/styles.
*
* Naming convention: all tokens are prefixed `--rf-*` to avoid clashing with
* any third-party CSS or legacy app-level variables.
*
* Theme: dark-first. There is no light variant by design — the spec calls for
* "dark navy with restrained highlights" everywhere.
* ============================================================================= */
:root {
/* ---------------------------------------------------------------------------
* Brand palette
* ------------------------------------------------------------------------- */
--rf-bg-app: #071827;
--rf-bg-section: #0d2233;
--rf-bg-card: #102a43;
--rf-bg-card-elevated: #16324c;
--rf-bg-overlay: rgba(7, 24, 39, 0.72);
--rf-accent-primary: #18c7b8;
--rf-accent-primary-hover: #14b8a6;
--rf-accent-primary-soft: #d9f7f4;
--rf-accent-primary-tint: rgba(24, 199, 184, 0.14);
--rf-text-primary: #f5f7fa;
--rf-text-secondary: #c7d2da;
--rf-text-muted: #8fa3b5;
--rf-text-on-accent: #06202a;
--rf-text-inverse: #ffffff;
--rf-border-strong: #2a465e;
--rf-border-default: #23415a;
--rf-divider-subtle: #1b344b;
/* ---------------------------------------------------------------------------
* Semantic
* ------------------------------------------------------------------------- */
--rf-success: #22c55e;
--rf-success-soft: #dcfce7;
--rf-warning: #f59e0b;
--rf-warning-soft: #fef3c7;
--rf-danger: #ef4444;
--rf-danger-soft: #fee2e2;
--rf-info: #3b82f6;
--rf-info-soft: #dbeafe;
/* ---------------------------------------------------------------------------
* Risk gradient (5 levels)
* ------------------------------------------------------------------------- */
--rf-risk-low: #22c55e;
--rf-risk-moderate: #84cc16;
--rf-risk-elevated: #f59e0b;
--rf-risk-high: #f97316;
--rf-risk-critical: #dc2626;
/* ---------------------------------------------------------------------------
* Status pill backgrounds (low-alpha tints)
* ------------------------------------------------------------------------- */
--rf-status-success-bg: rgba(34, 197, 94, 0.14);
--rf-status-success-text: #86efac;
--rf-status-success-border: rgba(34, 197, 94, 0.36);
--rf-status-warning-bg: rgba(245, 158, 11, 0.14);
--rf-status-warning-text: #fcd34d;
--rf-status-warning-border: rgba(245, 158, 11, 0.36);
--rf-status-danger-bg: rgba(239, 68, 68, 0.14);
--rf-status-danger-text: #fca5a5;
--rf-status-danger-border: rgba(239, 68, 68, 0.36);
--rf-status-info-bg: rgba(59, 130, 246, 0.14);
--rf-status-info-text: #93c5fd;
--rf-status-info-border: rgba(59, 130, 246, 0.36);
/* ---------------------------------------------------------------------------
* Risk pill backgrounds
* ------------------------------------------------------------------------- */
--rf-risk-low-bg: rgba(34, 197, 94, 0.14);
--rf-risk-low-text: #86efac;
--rf-risk-low-border: rgba(34, 197, 94, 0.36);
--rf-risk-moderate-bg: rgba(132, 204, 22, 0.14);
--rf-risk-moderate-text: #bef264;
--rf-risk-moderate-border: rgba(132, 204, 22, 0.36);
--rf-risk-elevated-bg: rgba(245, 158, 11, 0.14);
--rf-risk-elevated-text: #fcd34d;
--rf-risk-elevated-border: rgba(245, 158, 11, 0.36);
--rf-risk-high-bg: rgba(249, 115, 22, 0.14);
--rf-risk-high-text: #fdba74;
--rf-risk-high-border: rgba(249, 115, 22, 0.36);
--rf-risk-critical-bg: rgba(220, 38, 38, 0.16);
--rf-risk-critical-text: #fca5a5;
--rf-risk-critical-border: rgba(220, 38, 38, 0.4);
/* ---------------------------------------------------------------------------
* Tables
* ------------------------------------------------------------------------- */
--rf-table-header-bg: #0d2233;
--rf-table-row-bg: #102a43;
--rf-table-row-alt-bg: #0f263a;
--rf-table-row-hover-bg: #16324c;
--rf-table-border: #1b344b;
/* ---------------------------------------------------------------------------
* Navigation
* ------------------------------------------------------------------------- */
--rf-nav-sidebar-bg: #071827;
--rf-nav-item-text: #c7d2da;
--rf-nav-item-hover-bg: #0d2233;
--rf-nav-item-active-bg: #102a43;
--rf-nav-item-active-text: #f5f7fa;
--rf-nav-item-active-indicator: #18c7b8;
--rf-nav-topbar-bg: rgba(7, 24, 39, 0.88);
--rf-nav-topbar-border: #1b344b;
/* ---------------------------------------------------------------------------
* Forms
* ------------------------------------------------------------------------- */
--rf-form-input-bg: #102a43;
--rf-form-input-border: #23415a;
--rf-form-input-border-hover: #2a465e;
--rf-form-input-border-focus: #18c7b8;
--rf-form-input-text: #f5f7fa;
--rf-form-input-placeholder: #8fa3b5;
--rf-form-input-label: #c7d2da;
--rf-form-input-help: #8fa3b5;
--rf-form-input-error: #ef4444;
/* ---------------------------------------------------------------------------
* Charts
* ------------------------------------------------------------------------- */
--rf-chart-series-1: #18c7b8;
--rf-chart-series-2: #3b82f6;
--rf-chart-series-3: #f59e0b;
--rf-chart-series-4: #22c55e;
--rf-chart-series-5: #f97316;
--rf-chart-series-6: #dc2626;
--rf-chart-grid: #1e3a52;
--rf-chart-axis: #8fa3b5;
--rf-chart-tooltip-bg: #16324c;
--rf-chart-tooltip-text: #f5f7fa;
/* ---------------------------------------------------------------------------
* Typography
* ------------------------------------------------------------------------- */
--rf-font-sans:
var(--rf-font-sans-override, 'Inter'), ui-sans-serif, system-ui, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--rf-font-mono:
var(--rf-font-mono-override, 'JetBrains Mono'), ui-monospace, 'Menlo', 'Monaco', 'Courier New',
monospace;
--rf-font-size-xs: 12px;
--rf-font-size-sm: 14px;
--rf-font-size-md: 16px;
--rf-font-size-lg: 18px;
--rf-font-size-xl: 20px;
--rf-font-size-2xl: 24px;
--rf-font-size-3xl: 30px;
--rf-font-size-4xl: 36px;
--rf-font-weight-regular: 400;
--rf-font-weight-medium: 500;
--rf-font-weight-semibold: 600;
--rf-font-weight-bold: 700;
--rf-line-height-tight: 1.2;
--rf-line-height-normal: 1.5;
--rf-line-height-relaxed: 1.7;
/* ---------------------------------------------------------------------------
* Spacing scale
* ------------------------------------------------------------------------- */
--rf-space-0: 0;
--rf-space-1: 4px;
--rf-space-2: 8px;
--rf-space-3: 12px;
--rf-space-4: 16px;
--rf-space-5: 20px;
--rf-space-6: 24px;
--rf-space-8: 32px;
--rf-space-10: 40px;
--rf-space-12: 48px;
--rf-space-16: 64px;
--rf-space-20: 80px;
/* ---------------------------------------------------------------------------
* Radius
* ------------------------------------------------------------------------- */
--rf-radius-sm: 6px;
--rf-radius-md: 10px;
--rf-radius-lg: 14px;
--rf-radius-xl: 18px;
--rf-radius-pill: 999px;
/* ---------------------------------------------------------------------------
* Shadows (calibrated for dark surfaces)
* ------------------------------------------------------------------------- */
--rf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
--rf-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.22);
--rf-shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.28);
--rf-shadow-glow-accent: 0 0 0 1px rgba(24, 199, 184, 0.25), 0 0 24px rgba(24, 199, 184, 0.12);
/* ---------------------------------------------------------------------------
* Motion
* ------------------------------------------------------------------------- */
--rf-motion-fast: 120ms;
--rf-motion-normal: 180ms;
--rf-motion-slow: 260ms;
--rf-motion-easing: cubic-bezier(0.2, 0, 0, 1);
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../../node_modules/.pnpm/next@14.2.35_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.35_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!../../packages/design-system/styles/base.css ***!
\********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* =============================================================================
* RiskFabric.io — Base Styles
*
* Resets, typography defaults, scrollbars, focus rings, selection.
* Loaded after tokens.css.
* ============================================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
color-scheme: dark;
}
body {
margin: 0;
padding: 0;
background: var(--rf-bg-app);
color: var(--rf-text-primary);
font-family: var(--rf-font-sans);
font-size: var(--rf-font-size-md);
line-height: var(--rf-line-height-normal);
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--rf-accent-primary);
text-decoration: none;
transition: color var(--rf-motion-fast) var(--rf-motion-easing);
}
a:hover {
color: var(--rf-accent-primary-hover);
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 var(--rf-space-2);
color: var(--rf-text-primary);
font-weight: var(--rf-font-weight-semibold);
line-height: var(--rf-line-height-tight);
letter-spacing: -0.01em;
}
h1 {
font-size: var(--rf-font-size-3xl);
font-weight: var(--rf-font-weight-bold);
letter-spacing: -0.02em;
}
h2 {
font-size: var(--rf-font-size-2xl);
}
h3 {
font-size: var(--rf-font-size-xl);
}
h4 {
font-size: var(--rf-font-size-lg);
}
p {
margin: 0 0 var(--rf-space-3);
color: var(--rf-text-secondary);
}
p:last-child {
margin-bottom: 0;
}
strong {
color: var(--rf-text-primary);
font-weight: var(--rf-font-weight-semibold);
}
small {
font-size: var(--rf-font-size-xs);
color: var(--rf-text-muted);
}
code,
pre,
kbd,
samp {
font-family: var(--rf-font-mono);
font-size: 0.92em;
}
code {
background: var(--rf-bg-section);
padding: 0.1em 0.35em;
border-radius: var(--rf-radius-sm);
color: var(--rf-text-primary);
}
pre {
background: var(--rf-bg-section);
border: 1px solid var(--rf-divider-subtle);
border-radius: var(--rf-radius-md);
padding: var(--rf-space-3) var(--rf-space-4);
overflow-x: auto;
color: var(--rf-text-primary);
line-height: var(--rf-line-height-normal);
}
hr {
border: 0;
border-top: 1px solid var(--rf-divider-subtle);
margin: var(--rf-space-6) 0;
}
abbr[title] {
-webkit-text-decoration: underline dotted var(--rf-text-muted);
text-decoration: underline dotted var(--rf-text-muted);
cursor: help;
}
::selection {
background: rgba(24, 199, 184, 0.32);
color: var(--rf-text-primary);
}
/* Focus ring — applies to anything keyboard-focusable */
:focus-visible {
outline: 2px solid var(--rf-accent-primary);
outline-offset: 2px;
border-radius: 2px;
}
/* Scrollbar styling — webkit + firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--rf-border-default) transparent;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: var(--rf-border-default);
border-radius: var(--rf-radius-pill);
border: 2px solid transparent;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background: var(--rf-border-strong);
background-clip: padding-box;
}
/* Form-element baseline (the actual themed look lives in components.css) */
input,
select,
textarea,
button {
font-family: inherit;
color: inherit;
}
button {
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../../node_modules/.pnpm/next@14.2.35_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.35_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!../../packages/design-system/styles/components.css ***!
\**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* =============================================================================
* RiskFabric.io — Component Utility Classes
*
* Reusable classes for buttons, badges, cards, status boxes, tables, forms.
* Page-level CSS modules can compose these or just consume the tokens directly.
*
* All classes are prefixed `.rf-*` so they don't clash with consumer styles.
* ============================================================================= */
/* ============================================================
* Buttons
* ============================================================ */
.rf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--rf-space-2);
padding: 0.55rem 1.125rem;
font-family: inherit;
font-size: var(--rf-font-size-sm);
font-weight: var(--rf-font-weight-semibold);
line-height: 1.2;
border: 1px solid transparent;
border-radius: var(--rf-radius-md);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition:
background var(--rf-motion-normal) var(--rf-motion-easing),
border-color var(--rf-motion-normal) var(--rf-motion-easing),
color var(--rf-motion-normal) var(--rf-motion-easing),
box-shadow var(--rf-motion-normal) var(--rf-motion-easing);
}
.rf-btn:disabled,
.rf-btn[aria-disabled='true'] {
opacity: 0.5;
cursor: not-allowed;
}
.rf-btn-primary {
background: var(--rf-accent-primary);
color: var(--rf-text-on-accent);
border-color: var(--rf-accent-primary);
}
.rf-btn-primary:hover:not(:disabled) {
background: var(--rf-accent-primary-hover);
border-color: var(--rf-accent-primary-hover);
box-shadow: var(--rf-shadow-glow-accent);
text-decoration: none;
}
.rf-btn-secondary {
background: var(--rf-bg-card-elevated);
color: var(--rf-text-primary);
border-color: var(--rf-border-default);
}
.rf-btn-secondary:hover:not(:disabled) {
background: var(--rf-bg-section);
border-color: var(--rf-border-strong);
text-decoration: none;
}
.rf-btn-tertiary {
background: transparent;
color: var(--rf-accent-primary);
border-color: transparent;
padding: 0.4rem 0.6rem;
}
.rf-btn-tertiary:hover:not(:disabled) {
color: var(--rf-accent-primary-hover);
background: rgba(24, 199, 184, 0.08);
text-decoration: none;
}
.rf-btn-destructive {
background: var(--rf-danger);
color: var(--rf-text-inverse);
border-color: var(--rf-danger);
}
.rf-btn-destructive:hover:not(:disabled) {
background: #dc2626;
border-color: #dc2626;
text-decoration: none;
}
.rf-btn-ghost {
background: transparent;
color: var(--rf-text-secondary);
border-color: var(--rf-border-default);
}
.rf-btn-ghost:hover:not(:disabled) {
background: var(--rf-bg-card-elevated);
color: var(--rf-text-primary);
text-decoration: none;
}
/* ============================================================
* Cards / surfaces
* ============================================================ */
.rf-card {
background: var(--rf-bg-card);
border: 1px solid var(--rf-border-default);
border-radius: var(--rf-radius-lg);
padding: var(--rf-space-6);
box-shadow: var(--rf-shadow-sm);
}
.rf-card-elevated {
background: var(--rf-bg-card-elevated);
border: 1px solid var(--rf-border-strong);
border-radius: var(--rf-radius-lg);
padding: var(--rf-space-6);
box-shadow: var(--rf-shadow-md);
}
.rf-card-section {
background: var(--rf-bg-section);
border: 1px solid var(--rf-divider-subtle);
border-radius: var(--rf-radius-md);
padding: var(--rf-space-5);
}
/* ============================================================
* Form inputs
* ============================================================ */
.rf-input,
input.rf-input,
select.rf-input,
textarea.rf-input {
width: 100%;
padding: 0.55rem 0.85rem;
font-family: inherit;
font-size: var(--rf-font-size-sm);
line-height: 1.4;
background: var(--rf-form-input-bg);
color: var(--rf-form-input-text);
border: 1px solid var(--rf-form-input-border);
border-radius: var(--rf-radius-md);
transition:
border-color var(--rf-motion-fast) var(--rf-motion-easing),
box-shadow var(--rf-motion-fast) var(--rf-motion-easing);
outline: none;
}
.rf-input::placeholder {
color: var(--rf-form-input-placeholder);
}
.rf-input:hover:not(:disabled):not(:focus) {
border-color: var(--rf-form-input-border-hover);
}
.rf-input:focus {
border-color: var(--rf-form-input-border-focus);
box-shadow: 0 0 0 3px rgba(24, 199, 184, 0.18);
}
.rf-input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Native form-element fallbacks — applies the theme to bare /