/* ============================================================================ juribooks-executive-shell-v1.css — the executive application shell. Every rule is scoped to body.jb-xshell, which exists only while the shell is on, so turning the shell off (ROLLBACK-EXECUTIVE-SHELL.md) restores the previous appearance exactly. Presentation only. Specificity note: juribooks-sharp-type-v5.css forces type on every button, input and table with !important. Shell text rules therefore use `html body.jb-xshell …` + !important where they touch those elements. ========================================================================== */ /* ---------------------------------------------------------------- tokens */ body.jb-xshell { --shell-navy: #102B4C; --shell-navy-deep: #0B223E; --shell-navy-soft: #17395E; --primary-blue: #1672E8; --primary-blue-hover: #0F63CE; --primary-blue-soft: #EAF3FF; --canvas: #F4F8FC; --surface-soft: #F8FAFD; --border: #DFE6EE; --border-soft: #EBF0F5; --xs-ink: #162033; --xs-ink-soft: #4E5A6D; --xs-muted: #667186; /* 4.9:1 on white, 4.7:1 on the soft surface (brief's #768297 is 3.9:1, below AA) */ --success: #19A974; --success-soft: #E3F7EF; --warning: #E9A620; --warning-soft: #FFF4D8; --danger: #E44757; --danger-soft: #FDE8EC; --info: #2587D9; --info-soft: #E5F2FC; --purple: #8B5CF6; --purple-soft: #F0EAFE; --age-orange: #F07A2B; --xs-side-w: clamp(180px, 15vw, 232px); --xs-rail-w: clamp(196px, 18vw, 300px); --xs-bar-h: 54px; --xs-pad: 16px; --xs-gap: 10px; --xs-r: 8px; --xs-shadow: 0 1px 2px rgba(16, 43, 76, .05), 0 1px 1px rgba(16, 43, 76, .03); --xs-font: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Legacy token names (--navy, --accent, …) are owned by the application theme, lib/juribooks-executive-theme-v1.css; the shell only defines its own. */ } /* ---------------------------------------------------------------- frame */ /* Before the shell script has mounted (body.xs-pending, set by an inline script at ), reserve exactly the sidebar and command-bar space so nothing shifts, and nothing of the old rail is ever painted. */ body.jb-xshell.xs-pending .shell:not(:has(> .xs-side)) { box-shadow: inset var(--xs-side-w, 180px) 0 0 #102B4C; padding-left: var(--xs-side-w, 180px); } body.jb-xshell.xs-pending .main:not(:has(> .xs-cmdbar))::before { content: ''; display: block; flex: none; height: 54px; background: #fff; border-bottom: 1px solid #DFE6EE; } @media (max-width: 767px) { body.jb-xshell.xs-pending .shell:not(:has(> .xs-side)) { box-shadow: none; padding-left: 0; } } body.jb-xshell .rail { display: none !important; } body.jb-xshell .shell { display: flex; height: 100vh; background: var(--canvas); } body.jb-xshell .main { background: var(--canvas); min-width: 0; } body.jb-xshell .view { background: var(--canvas); } body.jb-xshell.xs-on-home .main > header.topbar, body.jb-xshell.xs-on-home #jbHomeTabs { display: none !important; } body.jb-xshell #view-home { padding: var(--xs-pad) 18px 20px !important; } /* Other home add-ons (e.g. the restored classic charts) belong to the Financial Dashboard page; they stay hidden while the executive Home shows. */ body.jb-xshell #view-home:has(> .xs-home) > :not(.xs-home) { display: none !important; } html body.jb-xshell :is(.xs-side, .xs-cmdbar, .xs-home, .xs-pop) { font-family: var(--xs-font) !important; color: var(--xs-ink); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; } html body.jb-xshell :is(.xs-side, .xs-cmdbar, .xs-home, .xs-pop) :is(button, input, select) { font-family: var(--xs-font) !important; } .xs-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .xs-vh { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } body.jb-xshell :is(.xs-side, .xs-cmdbar, .xs-home, .xs-pop) :is(button, [tabindex], input, select):focus-visible { outline: 2px solid var(--primary-blue) !important; outline-offset: 2px; box-shadow: none !important; } body.jb-xshell .xs-side :is(button):focus-visible { outline-color: #fff !important; outline-offset: -2px; } /* ---------------------------------------------------------------- sidebar */ .xs-side { display: none; width: var(--xs-side-w); flex: none; flex-direction: column; height: 100vh; background: var(--shell-navy); color: #D6E0EC; overflow: hidden; position: relative; z-index: 40; transition: width .16s ease; } body.jb-xshell .xs-side { display: flex; } .xs-brand { display: flex; align-items: center; gap: 9px; padding: 12px 14px 10px; flex: none; } .xs-logo { width: 34px; height: 34px; border-radius: 7px; flex: none; object-fit: contain; } .xs-brand-t { min-width: 0; } html body.jb-xshell .xs-brand-n { font-size: 17px !important; font-weight: 700 !important; color: #fff !important; letter-spacing: -.01em; line-height: 1.1; } html body.jb-xshell .xs-brand-s { font-size: var(--text-xs) !important; font-weight: 500 !important; color: #B8C6D8 !important; line-height: 1.3; white-space: nowrap; } .xs-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 2px 6px 6px; scrollbar-width: none; } .xs-nav::-webkit-scrollbar { display: none; } .xs-nav-sec + .xs-nav-sec { margin-top: 10px; } html body.jb-xshell .xs-nav-h { font-size: var(--text-xs) !important; font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase; color: #93A6BE !important; padding: 0 9px 4px; } .xs-nav-list, .xs-sub { list-style: none; margin: 0; padding: 0; } .xs-nav-li + .xs-nav-li { margin-top: 1px; } html body.jb-xshell .xs-nav-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 27px; padding: 5px 3px 5px 8px; border: 0; border-radius: 6px; letter-spacing: -.01em; background: transparent; color: #DCE5F0 !important; text-align: left; cursor: pointer; font-size: 12px !important; font-weight: 500 !important; line-height: 1.2; } html body.jb-xshell .xs-nav-item:hover { background: var(--shell-navy-soft); color: #fff !important; } html body.jb-xshell .xs-nav-item.is-active { background: var(--primary-blue); color: #fff !important; font-weight: 600 !important; } html body.jb-xshell .xs-nav-parent.has-active { color: #fff !important; font-weight: 600 !important; } .xs-nav-item .xs-ic { width: 16px; height: 16px; } .xs-nav-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xs-nav-chev { width: 11px !important; height: 11px !important; margin-left: -2px; opacity: .8; transition: transform .15s ease; } .xs-nav-parent[aria-expanded="true"] .xs-nav-chev { transform: rotate(90deg); } html body.jb-xshell .xs-badge { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff !important; font-size: 10px !important; font-weight: 700 !important; line-height: 17px; text-align: center; } .xs-sub { margin: 2px 0 4px; padding-left: 27px; position: relative; } .xs-sub::before { content: ''; position: absolute; left: 17px; top: 3px; bottom: 3px; width: 1px; background: #2B4B71; } html body.jb-xshell .xs-sub-item { display: block; width: 100%; min-height: 26px; padding: 5px 8px; border: 0; border-radius: 5px; background: transparent; color: #B9C8DA !important; text-align: left; cursor: pointer; font-size: var(--text-sm) !important; font-weight: 500 !important; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html body.jb-xshell .xs-sub-item:hover { background: var(--shell-navy-soft); color: #fff !important; } html body.jb-xshell .xs-sub-item.is-active { background: var(--primary-blue); color: #fff !important; font-weight: 600 !important; } .xs-side-foot { flex: none; padding: 6px 7px 10px; border-top: 1px solid #1D3C62; display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 6px; } html body.jb-xshell .xs-collapse { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #93A6BE !important; cursor: pointer; padding: 0; } html body.jb-xshell .xs-collapse:hover { background: var(--shell-navy-soft); color: #fff !important; } html body.jb-xshell .xs-ver { grid-column: 1 / -1; padding: 0 9px; font-size: var(--text-xs) !important; font-weight: 500 !important; color: #93A6BE !important; line-height: 1.5; } /* collapsed, icon-only */ body.jb-xshell.xs-collapsed { --xs-side-w: 60px; } body.jb-xshell.xs-collapsed .xs-brand-t, body.jb-xshell.xs-collapsed .xs-nav-t, body.jb-xshell.xs-collapsed .xs-nav-chev, body.jb-xshell.xs-collapsed .xs-nav-h, body.jb-xshell.xs-collapsed .xs-sub, body.jb-xshell.xs-collapsed .xs-ver { display: none !important; } body.jb-xshell.xs-collapsed .xs-brand { justify-content: center; padding: 14px 0 12px; } body.jb-xshell.xs-collapsed .xs-nav-item { justify-content: center; padding: 7px 0; position: relative; } body.jb-xshell.xs-collapsed .xs-badge { position: absolute; top: 1px; right: 5px; min-width: 15px; height: 15px; line-height: 15px; font-size: 9px !important; padding: 0 3px; } body.jb-xshell.xs-collapsed .xs-nav-sec + .xs-nav-sec { margin-top: 6px; padding-top: 6px; border-top: 1px solid #1D3C62; } body.jb-xshell.xs-collapsed .xs-side-foot { grid-template-columns: 1fr; justify-items: center; } body.jb-xshell.xs-collapsed .xs-collapse .xs-ic { transform: scaleX(-1); } body.jb-xshell.xs-collapsed .xs-nav-parent.has-active { background: var(--primary-blue); } /* ---------------------------------------------------------------- command bar */ .xs-cmdbar { display: none; } body.jb-xshell .xs-cmdbar { display: flex; align-items: center; gap: 12px; height: var(--xs-bar-h); flex: none; padding: 0 18px; background: #fff; border-bottom: 1px solid var(--border); position: relative; z-index: 30; } html body.jb-xshell .xs-burger { display: none; } .xs-pop-wrap { position: relative; } html body.jb-xshell .xs-firm { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 8px; border: 1px solid var(--border); border-radius: 7px; background: #fff; cursor: pointer; font-size: var(--text-sm) !important; font-weight: 700 !important; color: var(--xs-ink) !important; text-transform: uppercase; letter-spacing: .01em; max-width: 220px; } html body.jb-xshell .xs-firm:hover { border-color: #C6D3E1; } .xs-firm-ic { color: var(--shell-navy); display: inline-flex; } .xs-firm-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xs-firm-chev { width: 15px !important; height: 15px !important; color: var(--xs-muted); margin-left: 8px; } .xs-search { position: relative; flex: 1; min-width: 0; max-width: 340px; } .xs-search-box { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-soft); cursor: text; color: var(--xs-muted); } .xs-search-box:focus-within { border-color: var(--primary-blue); background: #fff; box-shadow: 0 0 0 3px var(--primary-blue-soft); } .xs-search-box .xs-ic { width: 16px; height: 16px; } html body.jb-xshell #xsSearch { flex: 1; min-width: 0; height: 100%; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; font-size: 12px !important; font-weight: 500 !important; color: var(--xs-ink) !important; } html body.jb-xshell #xsSearch::placeholder { font-size: 12px !important; font-weight: 400 !important; color: var(--xs-muted) !important; } html body.jb-xshell #xsSearch::-webkit-search-cancel-button { display: none; } html body.jb-xshell .xs-kbd { flex: none; padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; background: #fff; font-family: var(--xs-font) !important; font-size: 10px !important; font-weight: 600 !important; color: var(--xs-muted) !important; } .xs-cmd-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } html body.jb-xshell .xs-icon-btn { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--xs-ink-soft) !important; cursor: pointer; padding: 0; } html body.jb-xshell .xs-icon-btn:hover, html body.jb-xshell .xs-help-btn:hover { background: var(--surface-soft); color: var(--xs-ink) !important; } html body.jb-xshell .xs-icon-btn .xs-ic { width: 20px; height: 20px; } html body.jb-xshell .xs-dot-badge { position: absolute; top: 3px; left: 19px; min-width: 17px; height: 17px; padding: 0 4px !important; border-radius: 9px; background: var(--danger); color: #fff !important; border: 2px solid #fff; box-sizing: border-box; font-size: 9px !important; font-weight: 700 !important; line-height: 13px !important; text-align: center; letter-spacing: 0; } html body.jb-xshell .xs-help-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--xs-ink-soft) !important; font-size: 12px !important; font-weight: 600 !important; } html body.jb-xshell .xs-user { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 6px 0 4px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; } html body.jb-xshell .xs-user:hover { background: var(--surface-soft); } html body.jb-xshell .xs-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #D5E3F4; color: var(--shell-navy) !important; font-size: 12px !important; font-weight: 700 !important; } .xs-user-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } html body.jb-xshell .xs-user-n { font-size: 12px !important; font-weight: 600 !important; color: var(--xs-ink) !important; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html body.jb-xshell .xs-user-r { font-size: var(--text-xs) !important; font-weight: 500 !important; color: var(--xs-muted) !important; } /* ---------------------------------------------------------------- popovers */ .xs-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 80; min-width: 240px; max-width: min(360px, calc(100vw - 24px)); background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 43, 76, .14), 0 1px 3px rgba(16, 43, 76, .08); padding: 6px; max-height: min(460px, 70vh); overflow-y: auto; } .xs-pop[hidden] { display: none !important; } .xs-firm-pop { left: 0; right: auto; } .xs-search-list { left: 0; right: 0; max-width: none; min-width: 100%; } .xs-bell-pop { width: 320px; } .xs-help-pop { width: 300px; } html body.jb-xshell .xs-pop-h { padding: 6px 8px 8px; font-size: 13px !important; font-weight: 700 !important; color: var(--xs-ink) !important; } html body.jb-xshell .xs-pop-s { display: block; font-size: 11px !important; font-weight: 500 !important; color: var(--xs-muted) !important; margin-top: 2px; } html body.jb-xshell .xs-pop-note { margin: 2px 8px 8px; font-size: 11px !important; font-weight: 500 !important; color: var(--xs-ink-soft) !important; line-height: 1.45; } html body.jb-xshell .xs-pop > button[role="menuitem"] { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; color: var(--xs-ink) !important; font-size: 12px !important; font-weight: 500 !important; } html body.jb-xshell .xs-pop > button[role="menuitem"]:hover, html body.jb-xshell .xs-pop > button[role="menuitem"]:focus-visible { background: var(--primary-blue-soft); } html body.jb-xshell .xs-firm-cur { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; background: var(--primary-blue-soft); font-size: 12px !important; font-weight: 600 !important; color: var(--xs-ink) !important; } .xs-firm-cur .xs-ic { color: var(--primary-blue); width: 16px; height: 16px; } html body.jb-xshell .xs-sr-g { padding: 8px 8px 3px; font-size: var(--text-xs) !important; font-weight: 600 !important; letter-spacing: .05em; text-transform: uppercase; color: var(--xs-muted) !important; } .xs-sr { display: flex; flex-direction: column; gap: 1px; padding: 7px 8px; border-radius: 6px; cursor: pointer; } .xs-sr.is-sel, .xs-sr:hover { background: var(--primary-blue-soft); } html body.jb-xshell .xs-sr-t { font-size: 12px !important; font-weight: 600 !important; color: var(--xs-ink) !important; } html body.jb-xshell .xs-sr-s { font-size: 11px !important; font-weight: 500 !important; color: var(--xs-muted) !important; } html body.jb-xshell .xs-sr-none { padding: 10px 8px; font-size: 12px !important; color: var(--xs-ink-soft) !important; } .xs-search-list { list-style: none; margin: 0; } .xs-help-q { display: flex; flex-direction: column; gap: 5px; padding: 0 8px 8px; } html body.jb-xshell .xs-help-q span { font-size: 11px !important; font-weight: 600 !important; color: var(--xs-ink-soft) !important; } html body.jb-xshell #xsHelpQ { height: 34px; padding: 0 10px !important; border: 1px solid var(--border) !important; border-radius: 6px; font-size: 12px !important; } html body.jb-xshell #xsHelpQ::placeholder { font-size: 12px !important; } html body.jb-xshell .xs-help-a { margin: 0 8px; font-size: 12px !important; font-weight: 500 !important; color: var(--xs-ink) !important; line-height: 1.5; } html body.jb-xshell .xs-help-a:not(:empty) { padding: 8px 10px; margin-bottom: 8px; background: var(--surface-soft); border-radius: 6px; } .xs-help-l { list-style: none; margin: 0; padding: 6px 8px 4px; border-top: 1px solid var(--border-soft); } html body.jb-xshell .xs-help-l li { font-size: 11px !important; font-weight: 500 !important; color: var(--xs-ink-soft) !important; padding: 3px 0; } html body.jb-xshell .xs-help-l kbd { font-family: var(--xs-font) !important; font-size: 10px !important; font-weight: 600 !important; padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-soft); } .xs-more-pop { left: auto; right: 0; min-width: 200px; } /* ---------------------------------------------------------------- home layout */ .xs-home { display: grid; grid-template-columns: minmax(0, 1fr) var(--xs-rail-w); gap: var(--xs-gap) 12px; align-items: start; max-width: 1720px; } .xs-col-main { display: flex; flex-direction: column; gap: var(--xs-gap); min-width: 0; } .xs-col-rail { display: flex; flex-direction: column; gap: var(--xs-gap); min-width: 0; } .xs-card { background: #fff; border: 1px solid var(--border); border-radius: var(--xs-r); box-shadow: var(--xs-shadow); padding: 12px 13px; } .xs-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 9px; } .xs-card-f { display: flex; justify-content: flex-end; margin-top: 6px; } html body.jb-xshell .xs-h2 { margin: 0; font-size: 13px !important; font-weight: 700 !important; color: var(--xs-ink) !important; line-height: 1.3; letter-spacing: -.005em; outline: none; } html body.jb-xshell .xs-h2 .xs-count { font-weight: 700 !important; color: var(--xs-ink) !important; } html body.jb-xshell .xs-subt { font-size: var(--text-xs) !important; font-weight: 400 !important; color: var(--xs-ink-soft) !important; margin-top: 2px; } html body.jb-xshell .xs-link { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; border: 0; background: transparent; cursor: pointer; color: var(--primary-blue) !important; font-size: 11px !important; font-weight: 600 !important; white-space: nowrap; } html body.jb-xshell .xs-link:hover { color: var(--primary-blue-hover) !important; text-decoration: underline; } .xs-link .xs-ic { width: 14px; height: 14px; } html body.jb-xshell .xs-empty { padding: 14px 4px; font-size: 11px !important; font-weight: 500 !important; color: var(--xs-ink-soft) !important; } html body.jb-xshell .xs-num { font-variant-numeric: tabular-nums lining-nums; } html body.jb-xshell .xs-mute { color: var(--xs-muted) !important; } /* header */ .xs-b-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 2px 2px 2px; } html body.jb-xshell .xs-h1 { margin: 0; font-size: 24px !important; font-weight: 700 !important; color: var(--xs-ink) !important; letter-spacing: -.02em; line-height: 1.2; } html body.jb-xshell .xs-lead { margin: 3px 0 0; font-size: 12px !important; font-weight: 400 !important; color: var(--xs-ink-soft) !important; } html body.jb-xshell .xs-lead strong { font-weight: 600 !important; color: var(--xs-ink) !important; } html body.jb-xshell .xs-when { text-align: right; font-size: 11px !important; font-weight: 500 !important; color: var(--xs-ink-soft) !important; line-height: 1.6; flex: none; padding-top: 4px; } .xs-where { display: inline-flex; align-items: center; gap: 4px; } .xs-where .xs-ic { width: 13px; height: 13px; color: var(--xs-muted); } /* KPIs */ .xs-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--xs-gap); } .xs-kpi { container-type: inline-size; position: relative; display: flex; gap: 10px; align-items: flex-start; min-height: 88px; background: #fff; border: 1px solid var(--border); border-radius: var(--xs-r); box-shadow: var(--xs-shadow); padding: 12px 12px 10px; } .xs-kpi-ic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex: none; } .xs-kpi-ic .xs-ic { width: 19px; height: 19px; stroke-width: 2; } .xs-kpi--green .xs-kpi-ic { background: var(--success-soft); color: var(--success); } .xs-kpi--blue .xs-kpi-ic { background: var(--primary-blue-soft); color: var(--primary-blue); } .xs-kpi--amber .xs-kpi-ic { background: var(--warning-soft); color: #C98A0E; } .xs-kpi--red .xs-kpi-ic { background: var(--danger-soft); color: var(--danger); } .xs-kpi-b { min-width: 0; flex: 1; } html body.jb-xshell .xs-kpi-l { font-size: var(--text-xs) !important; font-weight: 600 !important; color: var(--xs-ink) !important; line-height: 1.3; } html body.jb-xshell .xs-kpi-v { font-size: 22px !important; font-weight: 700 !important; color: var(--xs-ink) !important; letter-spacing: -.02em; line-height: 1.2; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html body.jb-xshell .xs-kpi-d { font-size: 11px !important; font-weight: 700 !important; margin-top: 4px; line-height: 1.3; } html body.jb-xshell .xs-kpi-d--good { color: var(--success) !important; } html body.jb-xshell .xs-kpi-d--bad { color: var(--danger) !important; } html body.jb-xshell .xs-kpi-c { font-size: var(--text-xs) !important; font-weight: 500 !important; color: var(--xs-ink-soft) !important; margin-top: 2px; line-height: 1.3; } .xs-kpi .xs-link { margin-top: 2px; } /* Narrow cards: the icon moves to the corner so the figure gets the full width. */ @container (max-width: 215px) { .xs-kpi-ic { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 7px; } .xs-kpi-ic .xs-ic { width: 15px; height: 15px; } .xs-kpi-l { padding-right: 30px; min-height: 26px; } } /* quick actions */ .xs-b-qa { padding-bottom: 11px; } .xs-qas { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; } .xs-qas > .xs-pop-wrap { display: flex; } html body.jb-xshell .xs-qa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 36px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: #fff; cursor: pointer; color: var(--xs-ink) !important; font-size: var(--text-sm) !important; font-weight: 600 !important; white-space: nowrap; } html body.jb-xshell .xs-qa:hover { border-color: #BCCBDD; background: var(--surface-soft); } html body.jb-xshell .xs-qa .xs-ic { width: 16px; height: 16px; color: var(--xs-ink-soft); } html body.jb-xshell .xs-qa--primary { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff !important; } html body.jb-xshell .xs-qa--primary .xs-ic { color: #fff; } html body.jb-xshell .xs-qa--primary:hover { background: var(--primary-blue-hover); border-color: var(--primary-blue-hover); } /* workspace */ .xs-wss { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } html body.jb-xshell .xs-ws { position: relative; display: flex; gap: 8px; align-items: flex-start; min-height: 64px; padding: 10px 9px 10px 10px; border: 1px solid var(--border); border-radius: 7px; background: #fff; cursor: pointer; text-align: left; color: var(--xs-ink) !important; font-size: 12px !important; font-weight: 500 !important; } html body.jb-xshell .xs-ws:hover { border-color: #B8CCE4; box-shadow: 0 2px 8px rgba(16, 43, 76, .07); } .xs-ws-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; } .xs-ws-ic .xs-ic { width: 17px; height: 17px; stroke-width: 1.9; } .xs-tone--blue { background: var(--primary-blue-soft); color: var(--primary-blue); } .xs-tone--red { background: var(--danger-soft); color: var(--danger); } .xs-tone--green { background: var(--success-soft); color: var(--success); } .xs-tone--purple { background: var(--purple-soft); color: var(--purple); } .xs-ws-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 12px; } html body.jb-xshell .xs-ws-n { font-size: var(--text-sm) !important; font-weight: 700 !important; color: var(--xs-ink) !important; line-height: 1.25; } html body.jb-xshell .xs-ws-d { font-size: var(--text-xs) !important; font-weight: 500 !important; color: var(--xs-ink-soft) !important; line-height: 1.4; } .xs-ws-go { position: absolute; right: 10px; bottom: 8px; width: 14px !important; height: 14px !important; color: var(--primary-blue); } /* charts */ .xs-b-charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--xs-gap); } .xs-b-charts > .xs-card { min-width: 0; } .xs-select select { height: 28px; padding: 0 26px 0 10px !important; border: 1px solid var(--border) !important; border-radius: 6px; background: #fff; appearance: auto; cursor: pointer; } html body.jb-xshell .xs-select select { font-size: 11px !important; font-weight: 500 !important; color: var(--xs-ink) !important; } .xs-legend { display: flex; justify-content: center; gap: 18px; margin: -2px 0 4px; } html body.jb-xshell .xs-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs) !important; font-weight: 500 !important; color: var(--xs-ink-soft) !important; } .xs-sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; } .xs-sw-rev { background: var(--primary-blue); } .xs-sw-exp { background: var(--purple); } .xs-chart { display: block; width: 100%; height: auto; max-height: 190px; } .xs-grid { stroke: var(--border-soft); stroke-width: 1; } .xs-axis { font-family: var(--xs-font); font-size: 11px; font-weight: 500; fill: var(--xs-ink-soft); } .xs-bar-rev { fill: var(--primary-blue); } .xs-bar-exp { fill: #A57CF7; } .xs-age { display: grid; grid-template-columns: minmax(104px, 42%) 1fr; gap: 12px; align-items: center; } .xs-donut { width: 100%; max-width: 150px; height: auto; display: block; margin: 0 auto; } .xs-arc-bg { fill: none; stroke: var(--border-soft); stroke-width: 18; } .xs-arc { fill: none; stroke-width: 18; } .xs-age0 { stroke: var(--success); background: var(--success); } .xs-age1 { stroke: #F2C230; background: #F2C230; } .xs-age2 { stroke: var(--warning); background: var(--warning); } .xs-age3 { stroke: var(--age-orange); background: var(--age-orange); } .xs-age4 { stroke: var(--danger); background: var(--danger); } .xs-donut-v { font-family: var(--xs-font); font-size: 15px; font-weight: 700; fill: var(--xs-ink); } .xs-donut-l { font-family: var(--xs-font); font-size: 11px; font-weight: 500; fill: var(--xs-ink-soft); } .xs-age-t { width: 100%; border-collapse: collapse; } html body.jb-xshell .xs-age-t td { padding: 4px 2px !important; border: 0 !important; background: transparent !important; font-size: 11px !important; font-weight: 500 !important; color: var(--xs-ink) !important; white-space: nowrap; } html body.jb-xshell .xs-age-t td:first-child { display: flex; align-items: center; gap: 7px; } html body.jb-xshell .xs-age-t td.xs-num { text-align: right !important; font-weight: 600 !important; } html body.jb-xshell .xs-age-t td.xs-mute { font-weight: 500 !important; color: var(--xs-ink-soft) !important; } /* right rail */ .xs-rail-card { padding: 12px 12px 10px; } .xs-tasks, .xs-feed { list-style: none; margin: 0; padding: 0; } .xs-tasks li + li { margin-top: 8px; } html body.jb-xshell .xs-task { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t t" "m s"; column-gap: 8px; row-gap: 2px; width: 100%; padding: 3px 4px 3px 10px; border: 0; border-left: 3px solid var(--info); border-radius: 0 4px 4px 0; background: transparent; cursor: pointer; text-align: left; font-size: 11px !important; font-weight: 500 !important; color: var(--xs-ink) !important; } html body.jb-xshell .xs-task:hover { background: var(--surface-soft); } .xs-sev--red { border-left-color: var(--danger) !important; } .xs-sev--amber { border-left-color: var(--warning) !important; } .xs-sev--blue { border-left-color: var(--primary-blue) !important; } html body.jb-xshell .xs-task-t { grid-area: t; font-size: 11px !important; font-weight: 600 !important; color: var(--xs-ink) !important; line-height: 1.35; } html body.jb-xshell .xs-task-m { grid-area: m; font-size: var(--text-xs) !important; font-weight: 500 !important; color: var(--xs-ink-soft) !important; } html body.jb-xshell .xs-task-s { grid-area: s; font-size: var(--text-xs) !important; font-weight: 600 !important; color: var(--xs-ink-soft) !important; text-align: right; white-space: nowrap; } html body.jb-xshell .xs-sev--red .xs-task-s { color: var(--danger) !important; } .xs-feed li + li { margin-top: 4px; } html body.jb-xshell .xs-feed-i { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; width: 100%; padding: 5px 4px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; font-size: 11px !important; font-weight: 500 !important; color: var(--xs-ink) !important; } html body.jb-xshell .xs-feed-i:hover { background: var(--surface-soft); } .xs-feed-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; } .xs-feed-ic .xs-ic { width: 13px; height: 13px; stroke-width: 2.2; } .xs-sev-ic--red { background: var(--danger-soft); color: var(--danger); } .xs-sev-ic--amber { background: var(--warning-soft); color: #C98A0E; } .xs-sev-ic--blue { background: var(--primary-blue-soft); color: var(--primary-blue); } .xs-act-ic--fee, .xs-act-ic--journal, .xs-act-ic--opening { background: var(--primary-blue-soft); color: var(--primary-blue); } .xs-act-ic--receipt, .xs-act-ic--approved { background: var(--success-soft); color: var(--success); } .xs-act-ic--voucher { background: var(--surface-soft); color: var(--xs-ink-soft); } .xs-act-ic--void { background: var(--danger-soft); color: var(--danger); } .xs-act-ic--client { background: var(--info-soft); color: var(--info); } .xs-feed-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; } html body.jb-xshell .xs-feed-n { font-size: 11px !important; font-weight: 500 !important; color: var(--xs-ink) !important; line-height: 1.35; overflow-wrap: anywhere; } html body.jb-xshell .xs-feed-s { font-size: var(--text-xs) !important; font-weight: 500 !important; color: var(--xs-ink-soft) !important; } html body.jb-xshell .xs-feed-w { font-size: var(--text-xs) !important; font-weight: 500 !important; color: var(--xs-ink-soft) !important; white-space: nowrap; padding-top: 1px; } /* empty / loading / error */ .xs-b-empty { grid-column: 1 / -1; max-width: 620px; } .xs-b-empty .xs-qas { margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); } .xs-home[data-state="empty"], .xs-home[data-state="error"] { grid-template-columns: minmax(0, 1fr); } .xs-home[data-state="loading"] { grid-template-columns: minmax(0, 1fr) var(--xs-rail-w); } .xs-home[data-state="loading"] .xs-b-head, .xs-home[data-state="loading"] .xs-b-kpis, .xs-home[data-state="loading"] .xs-b-ws { grid-column: 1; } .xs-home[data-state="loading"] .xs-b-tasks { grid-column: 2; grid-row: 1 / span 3; } .xs-sk { background: linear-gradient(90deg, #EDF2F8 0%, #F6F9FC 50%, #EDF2F8 100%); background-size: 200% 100%; animation: xs-sk 1.3s ease-in-out infinite; border-color: transparent !important; } .xs-sk-h { height: 44px; width: 55%; border-radius: 8px; } .xs-sk-rail { height: 260px; } .xs-sk-ws { height: 220px; } @keyframes xs-sk { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* ---------------------------------------------------------------- responsive */ @media (min-width: 1440px) { body.jb-xshell { --xs-pad: 18px; --xs-gap: 12px; } .xs-kpi { min-height: 96px; padding: 14px; } .xs-card { padding: 14px; } } @media (max-width: 1023px) { .xs-wss { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1023px) { html body.jb-xshell .xs-help-btn span { display: none; } .xs-user-t { display: none; } } @media (max-width: 1023px) { body.jb-xshell { --xs-side-w: 60px; } body.jb-xshell:not(.xs-drawer-open) .xs-brand-t, body.jb-xshell:not(.xs-drawer-open) .xs-nav-t, body.jb-xshell:not(.xs-drawer-open) .xs-nav-chev, body.jb-xshell:not(.xs-drawer-open) .xs-nav-h, body.jb-xshell:not(.xs-drawer-open) .xs-sub, body.jb-xshell:not(.xs-drawer-open) .xs-ver, body.jb-xshell:not(.xs-drawer-open) .xs-collapse { display: none !important; } body.jb-xshell:not(.xs-drawer-open) .xs-brand { justify-content: center; padding: 14px 0 12px; } body.jb-xshell:not(.xs-drawer-open) .xs-nav-item { justify-content: center; padding: 7px 0; position: relative; } body.jb-xshell:not(.xs-drawer-open) .xs-badge { position: absolute; top: 1px; right: 5px; min-width: 15px; height: 15px; line-height: 15px; font-size: 9px !important; padding: 0 3px; } body.jb-xshell.xs-drawer-open .xs-side { position: fixed; left: 0; top: 0; bottom: 0; width: 248px; box-shadow: 8px 0 30px rgba(11, 34, 62, .35); } body.jb-xshell.xs-drawer-open .main { margin-left: 60px; } html body.jb-xshell .xs-burger { display: none; } .xs-home { grid-template-columns: minmax(0, 1fr); } .xs-col-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; } .xs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } html body.jb-xshell .xs-kpi-v { font-size: 20px !important; } } @media (max-width: 767px) { body.jb-xshell { --xs-pad: 12px; } body.jb-xshell .shell { flex-direction: column; height: auto; min-height: 100vh; } body.jb-xshell .xs-side { position: fixed; left: 0; top: 0; bottom: 0; width: min(280px, 86vw) !important; transform: translateX(-102%); transition: transform .2s ease; z-index: 90; } body.jb-xshell.xs-drawer-open .xs-side { transform: none; box-shadow: 8px 0 30px rgba(11, 34, 62, .4); } body.jb-xshell.xs-drawer-open .main { margin-left: 0; } body.jb-xshell.xs-drawer-open::after { content: ''; position: fixed; inset: 0; background: rgba(11, 34, 62, .45); z-index: 85; } body.jb-xshell .xs-brand-t, body.jb-xshell .xs-nav-t, body.jb-xshell .xs-nav-h, body.jb-xshell .xs-ver { display: block !important; } body.jb-xshell .xs-nav-chev { display: inline !important; } body.jb-xshell .xs-sub:not([hidden]) { display: block !important; } body.jb-xshell .xs-brand { justify-content: flex-start !important; padding: 14px 16px 12px !important; } html body.jb-xshell .xs-nav-item { justify-content: flex-start !important; padding: 10px 10px !important; min-height: 44px; } html body.jb-xshell .xs-sub-item { min-height: 44px; padding: 12px 8px !important; } body.jb-xshell .xs-badge { position: static !important; } html body.jb-xshell .xs-collapse { display: none !important; } body.jb-xshell .xs-cmdbar { position: sticky; top: 0; gap: 6px; padding: 0 10px; height: 56px; } html body.jb-xshell .xs-burger { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--xs-ink) !important; padding: 0; cursor: pointer; } .xs-burger .xs-ic { width: 22px; height: 22px; } html body.jb-xshell .xs-firm { display: none; } .xs-search { max-width: none; } .xs-search-box { height: 44px; } html body.jb-xshell #xsSearch, html body.jb-xshell #xsSearch::placeholder, html body.jb-xshell #xsHelpQ { font-size: 16px !important; } html body.jb-xshell .xs-kbd, html body.jb-xshell .xs-help-btn { display: none; } html body.jb-xshell .xs-icon-btn, html body.jb-xshell .xs-user { width: 44px; height: 44px; justify-content: center; padding: 0; } body.jb-xshell #view-home { padding: 12px 12px 40px !important; } /* one column; tasks straight after the KPIs */ .xs-home { display: flex; flex-direction: column; align-items: stretch; gap: var(--xs-gap); } .xs-col-main, .xs-col-rail, .xs-b-charts { display: contents; } .xs-b-head { order: 1; flex-direction: column; gap: 4px; } .xs-when { text-align: left !important; padding-top: 0 !important; } .xs-b-kpis { order: 2; } .xs-b-tasks { order: 3; } .xs-b-qa { order: 4; } .xs-b-ws { order: 5; } .xs-b-snap { order: 6; } .xs-b-age { order: 7; } .xs-b-notes { order: 8; } .xs-b-act { order: 9; } html body.jb-xshell .xs-h1 { font-size: 21px !important; } .xs-kpis { grid-template-columns: minmax(0, 1fr); } .xs-qas { grid-template-columns: repeat(2, minmax(0, 1fr)); } html body.jb-xshell .xs-qa { height: 44px; } .xs-wss { grid-template-columns: minmax(0, 1fr); } html body.jb-xshell :is(.xs-task, .xs-feed-i, .xs-link, .xs-ws) { min-height: 44px; } .xs-age { grid-template-columns: 120px 1fr; } html body.jb-xshell .xs-select select { height: 44px; font-size: 16px !important; } .xs-pop { position: fixed; left: 8px !important; right: 8px !important; top: 62px; max-width: none; width: auto !important; } } @media (prefers-reduced-motion: reduce) { .xs-side, .xs-nav-chev, .xs-sk { transition: none !important; animation: none !important; } } @media print { body.jb-xshell .xs-side, body.jb-xshell .xs-cmdbar { display: none !important; } } html body.jb-xshell .xs-kpi-d--flat { color: var(--xs-ink-soft) !important; font-weight: 600 !important; } /* bell popover: tasks + notifications (the rail's content, off Home) */ .xs-bell-pop { width: 340px; } .xs-pop-tasks { padding: 0 6px 4px; } html body.jb-xshell .xs-pop-h2 { border-top: 1px solid var(--border-soft); margin-top: 6px; padding-top: 10px; } html body.jb-xshell .xs-pop-more { margin: 2px 8px 4px; }