/* ========================================================================== CGWA Portal v2 — design tokens and components (UI_VERSION=v2). Loaded after css/app.css. Everything here is built from the --xp-* tokens; pages never hard-code colours. The legacy --cg-* tokens are remapped onto the --xp-* palette in section 2, so pages that are not redesigned yet take on the new colours automatically. 1 Tokens (light default, dark on ) 2 Legacy token + Bootstrap variable bridge 3 Base and controls 4 Layout shell (rail, header, footer) 5 Components (hero, KPI, panel grid, filter bar, chips, pills, ranking, cards, live indicator) 6 Tables, pager, toasts, modals 7 Login and error pages 8 Print 9 Responsive ========================================================================== */ /* ---------------------------------------------------------------- 1. tokens */ :root, [data-bs-theme="light"] { --xp-bg: #F1F6FB; --xp-surface: #FFFFFF; --xp-surface-2: #F6F9FC; --xp-border: #D6E2EE; --xp-border-strong: #B3C6D9; --xp-text: #0A2238; --xp-muted: #55708B; --xp-accent: #1273D6; /* water blue */ --xp-accent-2: #0FB5A6; /* teal */ --xp-accent-ink: #0B5CB0; --xp-accent-tint: #E4F0FC; --xp-on-accent: #FFFFFF; --xp-running: #12A06B; --xp-running-tint: #E1F5EC; --xp-running-ink: #0B6B47; /* reporting normally */ --xp-stopped: #E04646; --xp-stopped-tint: #FDE9E9; --xp-stopped-ink: #A32020; /* limit breached / failed */ --xp-idle: #E8A317; --xp-idle-tint: #FFF3D6; --xp-idle-ink: #8A5A00; /* offline, needs a look */ --xp-none: #8696A8; --xp-none-tint: #EDF1F5; --xp-none-ink: #4A5B6E; /* no data yet */ --xp-info: #1273D6; --xp-info-tint: #E4F0FC; --xp-info-ink: #0B5CB0; --xp-th-bg: #0E3358; /* report table header row */ --xp-th-text: #FFFFFF; --xp-grid: rgba(10, 34, 56, .09); --xp-shadow: 0 1px 2px rgba(10, 34, 56, .05), 0 8px 24px rgba(10, 34, 56, .07); --xp-shadow-lg: 0 18px 48px rgba(10, 34, 56, .18); --xp-hero: linear-gradient(120deg, #0A3D91 0%, #1273D6 48%, #0FB5A6 100%); --xp-rail: linear-gradient(180deg, #0A2A5E 0%, #0C4A7C 55%, #0B6E78 100%); --xp-rail-text: #D5E6F7; --xp-rail-muted: #8FB0CF; --xp-rail-active: rgba(255, 255, 255, .16); --xp-radius: 14px; --xp-radius-sm: 9px; --xp-font: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', sans-serif; --xp-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --xp-rail-w: 264px; --xp-rail-w-collapsed: 74px; --xp-header-h: 60px; --xp-series-1: #1273D6; --xp-series-2: #0FB5A6; --xp-series-3: #7C5CE6; --xp-series-4: #E8A317; --xp-series-5: #E04646; --xp-series-6: #6BBF3B; color-scheme: light; } [data-bs-theme="dark"] { --xp-bg: #06152A; --xp-surface: #0D2340; --xp-surface-2: #112C4D; --xp-border: #1E4066; --xp-border-strong: #2C557F; --xp-text: #E6F0FA; --xp-muted: #8FA9C4; --xp-accent: #4DA3FF; --xp-accent-2: #2DD4BF; --xp-accent-ink: #7DBBFF; --xp-accent-tint: #123A66; --xp-on-accent: #04162B; --xp-running: #34C98E; --xp-running-tint: #0F3A2E; --xp-running-ink: #6EE2B4; --xp-stopped: #F26B6B; --xp-stopped-tint: #471A22; --xp-stopped-ink: #FF9C9C; --xp-idle: #F2B53A; --xp-idle-tint: #433210; --xp-idle-ink: #F7CC73; --xp-none: #8DA0B5; --xp-none-tint: #1B3250; --xp-none-ink: #B5C4D4; --xp-info: #4DA3FF; --xp-info-tint: #123A66; --xp-info-ink: #7DBBFF; --xp-th-bg: #08213D; --xp-th-text: #E6F0FA; --xp-grid: rgba(230, 240, 250, .1); --xp-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28); --xp-shadow-lg: 0 18px 48px rgba(0, 0, 0, .5); --xp-hero: linear-gradient(120deg, #0A2E6B 0%, #0F4FA3 50%, #0A7F82 100%); --xp-rail: linear-gradient(180deg, #051A38 0%, #07294B 55%, #07434B 100%); --xp-rail-active: rgba(255, 255, 255, .12); --xp-series-1: #4DA3FF; --xp-series-2: #2DD4BF; --xp-series-3: #A78BFA; --xp-series-4: #F2B53A; --xp-series-5: #F26B6B; --xp-series-6: #8ED45F; color-scheme: dark; } /* ------------------------------------------- 2. legacy token + Bootstrap bridge */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --cg-bg: var(--xp-bg); --cg-panel: var(--xp-surface); --cg-panel-2: var(--xp-surface-2); --cg-line: var(--xp-border); --cg-line-2: var(--xp-border-strong); --cg-ink: var(--xp-text); --cg-muted: var(--xp-muted); --cg-amber: var(--xp-accent); --cg-amber-ink: var(--xp-accent-ink); --cg-on-amber: var(--xp-on-accent); --cg-ok: var(--xp-running); --cg-bad: var(--xp-stopped); --cg-warn: var(--xp-idle-ink); --cg-info: var(--xp-info); --cg-grid: var(--xp-grid); --cg-shadow: var(--xp-shadow); --cg-header: var(--xp-hero); --cg-font: var(--xp-font); --cg-mono: var(--xp-mono); --bs-body-bg: var(--xp-bg); --bs-body-color: var(--xp-text); --bs-body-font-family: var(--xp-font); --bs-border-color: var(--xp-border); --bs-secondary-color: var(--xp-muted); --bs-link-color: var(--xp-accent-ink); --bs-link-hover-color: var(--xp-accent); --bs-primary: var(--xp-accent); --bs-primary-rgb: 18, 115, 214; --bs-focus-ring-color: rgba(18, 115, 214, .28); } /* ------------------------------------------------------ 3. base and controls */ body { font-family: var(--xp-font); background: var(--xp-bg); color: var(--xp-text); font-size: .92rem; } a { color: var(--xp-accent-ink); } a:hover { color: var(--xp-accent); } :focus-visible { outline: 2px solid var(--xp-accent); outline-offset: 2px; } .text-muted, .text-body-secondary { color: var(--xp-muted) !important; } .mono { font-family: var(--xp-mono); } /* Controls must look like controls: visible border, own background, small size */ .form-control, .form-select { background-color: var(--xp-surface); color: var(--xp-text); border: 1px solid var(--xp-border-strong); border-radius: var(--xp-radius-sm); font-size: .86rem; padding: .38rem .65rem; min-height: 34px; } .form-select { padding-right: 2rem; } .form-control:hover, .form-select:hover { border-color: var(--xp-accent); } .form-control:focus, .form-select:focus { border-color: var(--xp-accent); box-shadow: 0 0 0 3px rgba(18, 115, 214, .2); background-color: var(--xp-surface); color: var(--xp-text); } .form-control::placeholder { color: var(--xp-muted); opacity: .8; } .form-label { font-size: .78rem; font-weight: 600; color: var(--xp-muted); margin-bottom: .25rem; } .form-control-sm, .form-select-sm { min-height: 30px; font-size: .82rem; padding: .25rem .55rem; } .form-select-sm { padding-right: 2rem; } .input-group-text { background: var(--xp-surface-2); border-color: var(--xp-border-strong); color: var(--xp-muted); font-size: .82rem; } .form-check-input { border-color: var(--xp-border-strong); background-color: var(--xp-surface); } .form-check-input:checked { background-color: var(--xp-accent); border-color: var(--xp-accent); } .invalid-feedback { font-size: .78rem; color: var(--xp-stopped-ink); } .form-control.is-invalid, .form-select.is-invalid { border-color: var(--xp-stopped); } .btn { border-radius: var(--xp-radius-sm); font-weight: 600; font-size: .84rem; border-width: 1px; padding: .4rem .85rem; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .05s; } .btn:active { transform: translateY(1px); } .btn-sm { font-size: .78rem; padding: .27rem .6rem; } .btn-primary { background: linear-gradient(135deg, var(--xp-accent), var(--xp-accent-2)); border-color: transparent; color: #fff; box-shadow: 0 2px 8px rgba(18, 115, 214, .28); } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, var(--xp-accent-ink), var(--xp-accent)); color: #fff; box-shadow: 0 4px 12px rgba(18, 115, 214, .36); } .btn-primary:disabled { opacity: .6; } .btn-outline-secondary { background: var(--xp-surface); border-color: var(--xp-border-strong); color: var(--xp-text); } .btn-outline-secondary:hover, .btn-outline-secondary:focus { background: var(--xp-accent-tint); border-color: var(--xp-accent); color: var(--xp-accent-ink); } .btn-outline-danger { background: var(--xp-surface); border-color: var(--xp-stopped); color: var(--xp-stopped-ink); } .btn-outline-danger:hover { background: var(--xp-stopped); border-color: var(--xp-stopped); color: #fff; } .btn-success { background: var(--xp-running); border-color: var(--xp-running); color: #fff; } .btn-success:hover { background: var(--xp-running-ink); border-color: var(--xp-running-ink); color: #fff; } .btn-danger { background: var(--xp-stopped); border-color: var(--xp-stopped); color: #fff; } .btn-danger:hover { background: var(--xp-stopped-ink); border-color: var(--xp-stopped-ink); color: #fff; } .btn-icon { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--xp-border); border-radius: var(--xp-radius-sm); background: var(--xp-surface); color: var(--xp-text); font-size: 1.15rem; padding: 0; cursor: pointer; } .btn-icon:hover { border-color: var(--xp-accent); color: var(--xp-accent-ink); background: var(--xp-accent-tint); } /* --------------------------------------------------------- 4. layout shell */ .xp-app { display: grid; grid-template-columns: var(--xp-rail-w) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .2s ease; } .xp-collapsed .xp-app { grid-template-columns: var(--xp-rail-w-collapsed) minmax(0, 1fr); } .xp-rail { background: var(--xp-rail); color: var(--xp-rail-text); position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } /* no z-index: below lg Bootstrap's offcanvas layering must win, or the backdrop covers the menu */ .xp-rail .offcanvas-body { padding: 0; display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; } .xp-brand { display: flex; align-items: center; gap: 11px; padding: 16px 16px 12px; color: #fff; text-decoration: none; min-height: var(--xp-header-h); } .xp-brand:hover { color: #fff; } .xp-brand .mark { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #38BDF8, #2DD4BF); display: grid; place-items: center; flex: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); } .xp-brand .mark svg { width: 21px; height: 21px; } .xp-rail .xp-brand .mark { display: none; } /* the logo replaces the drop; the drop stays for the collapsed rail */ .xp-collapsed .xp-rail .xp-brand .mark { display: grid; } .xp-brand__text { display: block; min-width: 0; } .xp-logo { display: block; height: 30px; width: auto; max-width: 100%; } .xp-logo--large { height: 44px; } .xp-brand__text small { margin-top: 4px; } .xp-login__side .xp-brand .mark { display: none; } .xp-login__side .xp-brand { padding: 0; } .xp-brand b { display: block; font-size: .98rem; line-height: 1.15; } .xp-brand small { display: block; font-size: .72rem; color: var(--xp-rail-muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xp-search { padding: 4px 14px 10px; position: relative; } .xp-search i { position: absolute; left: 25px; top: 50%; transform: translateY(-62%); color: var(--xp-rail-muted); font-size: 1rem; pointer-events: none; } .xp-search input { width: 100%; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; border-radius: var(--xp-radius-sm); font-size: .82rem; padding: 7px 10px 7px 32px; min-height: 34px; } .xp-search input::placeholder { color: var(--xp-rail-muted); } .xp-search input:focus { outline: none; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); } .xp-rail #cgNav { flex: 1; overflow-y: auto; padding: 4px 10px 16px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; } .xp-rail .cg-nav-group { margin-bottom: 10px; } .xp-rail .cg-nav-group h6 { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--xp-rail-muted); font-weight: 700; margin: 10px 8px 5px; } .xp-rail .cg-nav a { display: flex; align-items: center; gap: 11px; padding: 6px 8px; margin-bottom: 2px; border-radius: 11px; color: var(--xp-rail-text); text-decoration: none; font-size: .86rem; line-height: 1.25; font-weight: 500; } .xp-rail .cg-nav a span:not(.badge-count) { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; } /* menu text wraps */ .xp-rail .cg-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; } .xp-rail .cg-nav a[aria-current="page"] { background: var(--xp-rail-active); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 #5EEAD4; } .xp-rail .cg-nav a i { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 1.1rem; color: #fff; background: var(--tile, #3B82F6); box-shadow: 0 3px 8px rgba(0, 0, 0, .2); } .xp-rail .cg-nav-group:nth-child(1) { --tile: linear-gradient(135deg, #3B82F6, #1D4ED8); } .xp-rail .cg-nav-group:nth-child(2) { --tile: linear-gradient(135deg, #14B8A6, #0F766E); } .xp-rail .cg-nav-group:nth-child(3) { --tile: linear-gradient(135deg, #F59E0B, #D97706); } .xp-rail .cg-nav-group:nth-child(4) { --tile: linear-gradient(135deg, #8B5CF6, #6D28D9); } .xp-rail .cg-nav-group:nth-child(5) { --tile: linear-gradient(135deg, #06B6D4, #0E7490); } .xp-rail .cg-nav-group:nth-child(6) { --tile: linear-gradient(135deg, #EC4899, #BE185D); } .xp-rail .cg-nav .badge-count { background: #FB7185; color: #fff; font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 2px 7px; min-width: 22px; text-align: center; margin-left: auto; } .xp-rail .cg-nav-skeleton { height: 40px; border-radius: 11px; margin: 6px 0; background: rgba(255, 255, 255, .1); } .xp-rail .cg-nav a[hidden], .xp-rail .cg-nav-group[hidden] { display: none; } .xp-nav-empty { color: var(--xp-rail-muted); font-size: .8rem; padding: 6px 10px; } .xp-collapsed .xp-brand > span:last-child, .xp-collapsed .xp-search, .xp-collapsed .cg-nav-group h6, .xp-collapsed .cg-nav a span { display: none; } .xp-collapsed .xp-brand { justify-content: center; padding-left: 0; padding-right: 0; } .xp-collapsed .cg-nav a { justify-content: center; } .xp-collapsed .cg-nav a .badge-count { display: block; position: absolute; transform: translate(14px, -12px); } .xp-collapsed .cg-nav a { position: relative; } .xp-body { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; } .xp-header { height: var(--xp-header-h); display: flex; align-items: center; gap: 10px; padding: 0 22px; background: var(--xp-surface); border-bottom: 1px solid var(--xp-border); position: sticky; top: 0; z-index: 1020; } .xp-header .scope { font-size: .84rem; color: var(--xp-muted); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xp-header .spacer { flex: 1; } .xp-clock { font-family: var(--xp-mono); font-size: .76rem; color: var(--xp-muted); background: var(--xp-surface-2); border: 1px solid var(--xp-border); border-radius: 999px; padding: 5px 12px; white-space: nowrap; } .xp-user { display: flex; align-items: center; gap: 9px; background: var(--xp-surface); border: 1px solid var(--xp-border); border-radius: 999px; padding: 3px 12px 3px 3px; cursor: pointer; color: var(--xp-text); } .xp-user:hover { border-color: var(--xp-accent); } .xp-user .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--xp-accent), var(--xp-accent-2)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; } .xp-user .who { text-align: left; line-height: 1.15; } .xp-user .who b { display: block; font-size: .82rem; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xp-user .who small { color: var(--xp-muted); font-size: .7rem; } .dropdown-menu { background: var(--xp-surface); border: 1px solid var(--xp-border); border-radius: var(--xp-radius-sm); box-shadow: var(--xp-shadow-lg); font-size: .86rem; } .dropdown-item { color: var(--xp-text); } .dropdown-item:hover { background: var(--xp-accent-tint); color: var(--xp-accent-ink); } .xp-main { flex: 1; min-width: 0; padding: 22px 24px 28px; } .xp-footer { padding: 14px 24px 18px; border-top: 1px solid var(--xp-border); color: var(--xp-muted); font-size: .76rem; text-align: center; background: var(--xp-surface); } .xp-footer a { color: var(--xp-accent-ink); font-weight: 600; text-decoration: none; } .xp-footer a:hover { text-decoration: underline; } /* ------------------------------------------------------------ 5. components */ .xp-hero { background: var(--xp-hero); color: #fff; border-radius: var(--xp-radius); padding: 22px 26px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 22px; flex-wrap: wrap; position: relative; overflow: hidden; box-shadow: var(--xp-shadow); } .xp-hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .09); pointer-events: none; } .xp-hero::before { content: ""; position: absolute; right: 140px; bottom: -110px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .06); pointer-events: none; } .xp-hero .copy { min-width: 0; flex: 1 1 280px; position: relative; z-index: 1; } .xp-hero h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; color: #fff; } .xp-hero p { margin: 0; color: rgba(255, 255, 255, .86); font-size: .88rem; max-width: 60ch; } .xp-hero .stats { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; } .xp-hero .stat { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px; padding: 10px 16px; min-width: 112px; backdrop-filter: blur(4px); } .xp-hero .stat small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .8); font-weight: 600; } .xp-hero .stat b { display: block; font-size: 1.55rem; line-height: 1.15; font-weight: 700; white-space: nowrap; } .xp-hero .stat b.bad { color: #FFD1D1; } .xp-hero .tools { display: flex; gap: 8px; align-items: center; position: relative; z-index: 1; flex-wrap: wrap; } .xp-hero .btn-light { background: rgba(255, 255, 255, .95); color: #0A3D91; border-color: transparent; } .xp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; } .xp-kpi { background: var(--xp-surface); border: 1px solid var(--xp-border); border-radius: var(--xp-radius); padding: 14px 16px; display: flex; gap: 13px; align-items: center; box-shadow: var(--xp-shadow); min-width: 0; } .xp-kpi__icon { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.35rem; color: #fff; background: linear-gradient(135deg, var(--xp-accent), var(--xp-accent-2)); } .xp-kpi.ok .xp-kpi__icon { background: linear-gradient(135deg, #12A06B, #0B7A55); } .xp-kpi.bad .xp-kpi__icon { background: linear-gradient(135deg, #EF6B6B, #D13A3A); } .xp-kpi.warn .xp-kpi__icon { background: linear-gradient(135deg, #F5B93A, #E08A00); } .xp-kpi.none .xp-kpi__icon { background: linear-gradient(135deg, #94A3B8, #64748B); } .xp-kpi__body { min-width: 0; } .xp-kpi__label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--xp-muted); } .xp-kpi__value { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.2; white-space: nowrap; } .xp-kpi__sub { display: block; font-size: .76rem; color: var(--xp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; } .xp-col-3 { grid-column: span 3; } .xp-col-4 { grid-column: span 4; } .xp-col-5 { grid-column: span 5; } .xp-col-6 { grid-column: span 6; } .xp-col-7 { grid-column: span 7; } .xp-col-8 { grid-column: span 8; } .xp-col-12 { grid-column: span 12; } .xp-panel { background: var(--xp-surface); border: 1px solid var(--xp-border); border-radius: var(--xp-radius); box-shadow: var(--xp-shadow); min-width: 0; display: flex; flex-direction: column; } .xp-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px 0; flex-wrap: wrap; } .xp-panel__head h2 { font-size: .98rem; font-weight: 700; margin: 0; } .xp-panel__head small { color: var(--xp-muted); font-size: .76rem; } .xp-panel__body { padding: 12px 16px 16px; flex: 1; min-width: 0; } .xp-panel__body.flush { padding: 8px 0 4px; } .xp-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 10px; flex-wrap: wrap; } .xp-section-title h2 { font-size: 1.02rem; font-weight: 700; margin: 0; } .xp-filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--xp-surface); border: 1px solid var(--xp-border); border-radius: var(--xp-radius); padding: 10px 12px; margin-bottom: 14px; box-shadow: var(--xp-shadow); } .xp-filterbar .grow { flex: 1 1 220px; min-width: 0; } .xp-filterbar label { margin: 0; } .xp-filterbar .field { display: flex; flex-direction: column; gap: 2px; min-width: 130px; } .xp-filterbar .form-select { min-width: 168px; } .xp-filterbar .field > label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--xp-muted); } .xp-filterbar .actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; } .xp-search-box { position: relative; } .xp-search-box i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--xp-muted); pointer-events: none; } .xp-search-box input { padding-left: 32px; } .xp-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .xp-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--xp-border-strong); background: var(--xp-surface); color: var(--xp-text); border-radius: 999px; padding: 5px 12px 5px 10px; font-size: .8rem; font-weight: 600; cursor: pointer; line-height: 1.2; } .xp-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--xp-none); } .xp-chip .n { background: var(--xp-surface-2); border: 1px solid var(--xp-border); border-radius: 999px; padding: 0 8px; font-size: .74rem; font-family: var(--xp-mono); } .xp-chip:hover { border-color: var(--xp-accent); } .xp-chip.active { background: var(--xp-accent); border-color: var(--xp-accent); color: #fff; } .xp-chip.active .n { background: rgba(255, 255, 255, .22); border-color: transparent; color: #fff; } .xp-chip.ok .dot { background: var(--xp-running); } .xp-chip.bad .dot { background: var(--xp-stopped); } .xp-chip.warn .dot { background: var(--xp-idle); } .xp-chip.none .dot { background: var(--xp-none); } .xp-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px 2px 8px; font-size: .74rem; font-weight: 700; background: var(--xp-none-tint); color: var(--xp-none-ink); white-space: nowrap; } .xp-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .xp-pill.ok { background: var(--xp-running-tint); color: var(--xp-running-ink); } .xp-pill.bad { background: var(--xp-stopped-tint); color: var(--xp-stopped-ink); } .xp-pill.warn { background: var(--xp-idle-tint); color: var(--xp-idle-ink); } .xp-pill.info { background: var(--xp-info-tint); color: var(--xp-info-ink); } .xp-rank { display: grid; gap: 9px; } .xp-rank__row { display: grid; grid-template-columns: minmax(80px, 150px) 1fr auto; gap: 10px; align-items: center; font-size: .82rem; } .xp-rank__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .xp-rank__bar { height: 10px; background: var(--xp-surface-2); border: 1px solid var(--xp-border); border-radius: 999px; overflow: hidden; } .xp-rank__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--xp-accent), var(--xp-accent-2)); } .xp-rank__row.bad .xp-rank__bar i { background: linear-gradient(90deg, #F59E9E, var(--xp-stopped)); } .xp-rank__row.warn .xp-rank__bar i { background: linear-gradient(90deg, #F7D27A, var(--xp-idle)); } .xp-rank__value { font-family: var(--xp-mono); font-size: .78rem; color: var(--xp-muted); min-width: 36px; text-align: right; } .xp-canvas { display: block; width: 100%; } .xp-donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .xp-legend { display: grid; gap: 6px; font-size: .8rem; } .xp-legend li { list-style: none; display: flex; align-items: center; gap: 8px; } .xp-legend ul { margin: 0; padding: 0; display: grid; gap: 6px; } .xp-legend .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; } .xp-legend b { font-family: var(--xp-mono); margin-left: auto; padding-left: 10px; } .xp-attention { border: 1px solid var(--xp-border); border-left: 5px solid var(--xp-stopped); border-radius: var(--xp-radius); background: var(--xp-surface); box-shadow: var(--xp-shadow); margin-bottom: 16px; overflow: hidden; } .xp-attention.calm { border-left-color: var(--xp-running); } .xp-attention__head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; font-weight: 700; background: var(--xp-stopped-tint); color: var(--xp-stopped-ink); } .xp-attention.calm .xp-attention__head { background: var(--xp-running-tint); color: var(--xp-running-ink); } .xp-attention__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 0; border-top: 1px solid var(--xp-border); } .xp-attention__item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; text-decoration: none; color: var(--xp-text); font-size: .84rem; } .xp-attention__item:hover { background: var(--xp-surface-2); color: var(--xp-text); } .xp-attention__item > span:last-child { min-width: 0; } .xp-attention__item b { display: block; overflow-wrap: anywhere; } .xp-attention__item small { color: var(--xp-muted); } .xp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; } .xp-card { background: var(--xp-surface); border: 1px solid var(--xp-border); border-radius: var(--xp-radius); box-shadow: var(--xp-shadow); padding: 14px 16px; position: relative; min-width: 0; border-top: 4px solid var(--xp-running); } .xp-card.bad { border-top-color: var(--xp-stopped); } .xp-card.warn { border-top-color: var(--xp-idle); } .xp-card.none { border-top-color: var(--xp-none); } .xp-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; } .xp-card__head .id { min-width: 0; } .xp-card__head .code { font-family: var(--xp-mono); font-size: .76rem; color: var(--xp-accent-ink); font-weight: 600; display: block; overflow-wrap: anywhere; } .xp-card__head .name { font-weight: 700; display: block; overflow-wrap: anywhere; } .xp-card__value { display: flex; align-items: baseline; gap: 6px; font-size: 2rem; font-weight: 700; line-height: 1.1; } .xp-card__value small { font-size: .78rem; font-weight: 600; color: var(--xp-muted); } .xp-card.none .xp-card__value, .xp-card.warn .xp-card__value { color: var(--xp-muted); } .xp-card .spark { display: block; width: 100%; height: 44px; margin: 6px 0 4px; } .xp-card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 0 0; font-size: .8rem; } .xp-card dt { color: var(--xp-muted); font-weight: 500; } .xp-card dd { margin: 0; text-align: right; font-weight: 600; font-family: var(--xp-mono); font-size: .78rem; overflow-wrap: anywhere; } .xp-card__foot { display: flex; justify-content: flex-end; gap: 12px; margin-top: 10px; font-size: .78rem; } @keyframes xp-flash { 0% { box-shadow: 0 0 0 0 rgba(18, 115, 214, .6); } 100% { box-shadow: 0 0 0 14px rgba(18, 115, 214, 0); } } .xp-flash { animation: xp-flash 1.1s ease-out 2; } .btn-group .btn.active { background: var(--xp-accent); border-color: var(--xp-accent); color: #fff; } .xp-live { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 600; color: var(--xp-muted); } .xp-live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--xp-running); box-shadow: 0 0 0 0 rgba(18, 160, 107, .55); animation: xp-pulse 1.8s infinite; } .xp-live.stale::before { background: var(--xp-idle); animation: none; } .xp-hero .xp-live { color: rgba(255, 255, 255, .9); } @keyframes xp-pulse { 0% { box-shadow: 0 0 0 0 rgba(18, 160, 107, .55); } 70% { box-shadow: 0 0 0 9px rgba(18, 160, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(18, 160, 107, 0); } } @media (prefers-reduced-motion: reduce) { .xp-live::before { animation: none; } } .xp-empty { text-align: center; padding: 34px 16px; color: var(--xp-muted); } .xp-empty i { display: block; font-size: 2.2rem; color: var(--xp-border-strong); margin-bottom: 6px; } .xp-alert-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--xp-border); font-size: .82rem; } .xp-alert-row:first-child { border-top: 0; } .xp-alert-row .when { color: var(--xp-muted); font-family: var(--xp-mono); font-size: .72rem; } .xp-alert-row b { display: block; font-weight: 600; overflow-wrap: anywhere; } .xp-alert-row .meta { color: var(--xp-muted); font-size: .74rem; } /* legacy page parts, so pages not redesigned yet sit well in the new shell */ .cg-page-head { margin-bottom: 14px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; } .cg-page-head h1 { font-size: 1.35rem; font-weight: 700; margin: 0 0 3px; } .cg-page-head p { margin: 0; color: var(--xp-muted); font-size: .86rem; max-width: 75ch; } .cg-panel { background: var(--xp-surface); border: 1px solid var(--xp-border); border-radius: var(--xp-radius); box-shadow: var(--xp-shadow); } .cg-filters { background: var(--xp-surface); border: 1px solid var(--xp-border); border-radius: var(--xp-radius); box-shadow: var(--xp-shadow); padding: 10px 12px; } .cg-kpi { border-radius: var(--xp-radius); } .cg-tile { border-radius: var(--xp-radius); } .chip { border-radius: 999px; } /* ------------------------------------------- 6. tables, pager, toasts, modals */ /* Report tables: visible borders and a dark header row so they print and can be submitted as a report */ .cg-table-wrap { border: 1px solid var(--xp-border-strong); border-radius: var(--xp-radius-sm); background: var(--xp-surface); overflow-x: auto; box-shadow: var(--xp-shadow); } .cg-table { border-collapse: collapse; width: 100%; font-size: .84rem; } .cg-table th { background: var(--xp-th-bg); color: var(--xp-th-text); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; padding: 9px 12px; border: 1px solid var(--xp-th-bg); border-right-color: rgba(255, 255, 255, .14); white-space: nowrap; position: static; } .cg-table td { padding: 8px 12px; border: 1px solid var(--xp-border); vertical-align: top; overflow-wrap: anywhere; } .cg-table td.num, .cg-table th.num { text-align: right; white-space: nowrap; overflow-wrap: normal; } .cg-table td.actions { white-space: nowrap; overflow-wrap: normal; } .cg-table th.xp-w160, .cg-table td.xp-w160 { min-width: 160px; } .cg-table tbody tr:nth-child(even) td { background: var(--xp-surface-2); } .cg-table tbody tr:hover td { background: var(--xp-accent-tint); } .cg-table td.breach { color: var(--xp-stopped-ink); font-weight: 700; } .cg-table-wrap.xp-print { max-height: none; } .cg-empty { padding: 30px 16px; text-align: center; color: var(--xp-muted); } .cg-pager { margin-top: 12px; font-size: .8rem; } .cg-pager .info { font-family: var(--xp-mono); color: var(--xp-muted); } .cg-loading { opacity: .55; pointer-events: none; transition: opacity .15s; } .cg-toast { border-radius: var(--xp-radius-sm); box-shadow: var(--xp-shadow-lg); font-weight: 600; } .cg-toast.success { background: var(--xp-running); } .cg-toast.error { background: var(--xp-stopped); } .cg-toast.info { background: var(--xp-text); color: var(--xp-bg); } .modal-content { background: var(--xp-surface); color: var(--xp-text); border: 1px solid var(--xp-border); border-radius: var(--xp-radius); box-shadow: var(--xp-shadow-lg); } .modal-header, .modal-footer { border-color: var(--xp-border); } .btn-close { filter: none; } [data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .alert { border-radius: var(--xp-radius-sm); font-size: .86rem; } .alert-danger { background: var(--xp-stopped-tint); color: var(--xp-stopped-ink); border-color: var(--xp-stopped); } .alert-warning { background: var(--xp-idle-tint); color: var(--xp-idle-ink); border-color: var(--xp-idle); } /* -------------------------------------------------- 7. login and error pages */ .xp-login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--xp-bg); } .xp-login__side { background: var(--xp-hero); color: #fff; padding: 44px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; position: relative; overflow: hidden; } .xp-login__side::after { content: ""; position: absolute; right: -120px; bottom: -140px; width: 420px; height: 420px; border-radius: 50%; background: rgba(255, 255, 255, .09); } .xp-login__side h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; max-width: 16ch; color: #fff; } .xp-login__side p { color: rgba(255, 255, 255, .86); max-width: 44ch; } .xp-login__side .xp-brand { padding: 0; } .xp-login__side .xp-brand small { max-width: none; color: rgba(255, 255, 255, .8); } .xp-login__facts { display: grid; gap: 10px; position: relative; z-index: 1; } .xp-login__facts div { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); border-radius: 12px; padding: 10px 14px; font-size: .84rem; } .xp-login__facts span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .78); } .xp-login__main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; gap: 18px; } .xp-login__card { width: 100%; max-width: 410px; background: var(--xp-surface); border: 1px solid var(--xp-border); border-radius: 18px; box-shadow: var(--xp-shadow-lg); padding: 28px 28px 24px; } .xp-login__card h2 { font-weight: 700; } .xp-captcha { display: flex; gap: 8px; align-items: center; } .xp-captcha img { border: 1px solid var(--xp-border-strong); border-radius: var(--xp-radius-sm); background: #F0F4F9; height: 54px; width: auto; max-width: 100%; } .xp-error-card { text-align: center; max-width: 440px; } .xp-error-card .code { font-size: 4.2rem; font-weight: 800; line-height: 1; background: var(--xp-hero); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; } .xp-theme-float { position: fixed; top: 14px; right: 14px; z-index: 5; } /* ------------------------------------------------------------------ 8. print */ @media print { .xp-rail, .xp-header, .xp-footer, .noprint, .xp-filterbar, .xp-chips, .xp-hero .tools, .btn, .cg-pager, .cg-toasts, .modal { display: none !important; } .xp-app { display: block; } body { background: #fff !important; color: #000 !important; } .xp-main { padding: 0; } .xp-hero { background: #fff !important; color: #000 !important; border: 1px solid #000; box-shadow: none; } .xp-hero h1, .xp-hero p, .xp-hero .stat b, .xp-hero .stat small { color: #000 !important; } .xp-hero::after, .xp-hero::before { display: none; } .xp-panel, .xp-kpi, .xp-card { box-shadow: none; break-inside: avoid; } .cg-table th { background: #222 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cg-table td, .cg-table th { border: 1px solid #000 !important; } .cg-table-wrap { border: 0; box-shadow: none; overflow: visible; } } /* ------------------------------------------------------------ 9. responsive */ @media (max-width: 991.98px) { .xp-app { display: block; } .xp-rail { position: fixed; height: 100vh; } .xp-rail.offcanvas-lg { width: min(86vw, 300px); } .xp-header { padding: 0 14px; } .xp-main { padding: 16px 14px 24px; } .xp-col-3, .xp-col-4, .xp-col-5, .xp-col-6, .xp-col-7, .xp-col-8 { grid-column: span 12; } .xp-login { grid-template-columns: 1fr; } .xp-login__side { display: none; } } @media (min-width: 992px) { .xp-rail.offcanvas-lg { position: sticky; transform: none; visibility: visible !important; } } @media (max-width: 600px) { .xp-hero { padding: 18px 16px; } .xp-hero h1 { font-size: 1.28rem; } .xp-hero .stat { flex: 1 1 96px; min-width: 0; padding: 8px 10px; } .xp-hero .stat small { font-size: .62rem; letter-spacing: .03em; overflow-wrap: anywhere; } .xp-hero .stat b { font-size: 1.1rem; } .xp-kpis { grid-template-columns: 1fr 1fr; gap: 10px; } .xp-kpi { padding: 11px 12px; gap: 10px; } .xp-kpi__icon { width: 36px; height: 36px; font-size: 1.15rem; border-radius: 11px; } .xp-kpi__value { font-size: 1.2rem; } .xp-kpi__sub { white-space: normal; } /* keep the context line readable */ .xp-kpis .xp-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; } /* no orphan card in a two-column grid */ .xp-clock, .xp-header .scope { display: none; } .xp-user .who { display: none; } .xp-user { padding: 3px; } .xp-filterbar .field, .xp-filterbar .grow { flex: 1 1 100%; } .xp-filterbar .actions { margin-left: 0; width: 100%; } .xp-alert-row { grid-template-columns: 1fr auto; } .xp-alert-row .when { grid-column: 1 / -1; } .xp-rank__row { grid-template-columns: minmax(70px, 110px) 1fr auto; } .xp-login__card { padding: 22px 18px; } .xp-footer { padding: 12px 14px 16px; } .form-control, .form-select { font-size: 16px; } /* stops iOS zoom on focus */ /* Tables become cards on a phone (rules for table.cards come from css/app.css) */ .cg-table-wrap.cards { border: 0; background: transparent; box-shadow: none; } table.cards tr { background: var(--xp-surface); border: 1px solid var(--xp-border-strong); } table.cards td { border: 0; background: transparent !important; overflow-wrap: anywhere; min-width: 0; } table.cards td:first-child { border-bottom: 1px solid var(--xp-border); } } .xp-nowrap { white-space: nowrap; } /* names and times stay on one line; a wide table scrolls inside its card */ .mono.text-muted { white-space: nowrap; } /* plant and machine codes never split */ .xp-kpi__value { overflow-wrap: anywhere; } td a.mono.small.d-block, td .mono.small { white-space: nowrap; } /* portal links and NOC numbers in tables stay whole */ @media (max-width: 575.98px) { .xp-kpi__value { font-size: 1.15rem; white-space: normal; } }