/* ===================================================================== JANUS — application shell styling Palette matches the JANUS analysis engine (deep forest green on white). ===================================================================== */ :root { --ci-green-900: #0B2E20; --ci-green-800: #0E3A28; --ci-green-700: #12432E; --ci-green-600: #14512F; --ci-green-500: #176B3A; --ci-green-400: #1F8A4C; --ci-green-300: #2E9E5B; --ci-green-200: #4CAF50; --ci-mint: #EAFBF0; --ci-mint-2: #BFE3CC; --ci-ink: #12261B; --ci-dim: #4A6153; --ci-faint: #7C978A; --ci-line: #DCE7DF; --ci-line-2: #C3D6C9; --ci-panel: #FFFFFF; --ci-panel-2: #F3F8F4; --ci-bg: #F5F8F6; --ci-amber: #B7791F; --ci-red: #C62828; --ci-blue: #1B6CA8; --ci-topbar-h: 58px; --ci-sidebar-w: 246px; --ci-mono: 'Courier New', Courier, monospace; /* Inter (UI/body) + Manrope (headings/brand): both free, variable, screen-optimised sans faces recommended for product UI — Inter is also what the analysis engine (assets/build/janus.css) already uses, so the two surfaces now read as one product instead of two differently-set halves. Loaded via Google Fonts in every page's (header.php and the 6 pre-auth pages); Segoe UI/Arial are the pre-load/no-JS fallback, not a real font swap. Replaces the previous 'Times New Roman' — a serif typewriter face that was never a deliberate brand choice, just an unset default. */ --ci-sans: 'Inter', 'Segoe UI', Arial, sans-serif; --ci-display: 'Manrope', 'Inter', 'Segoe UI', Arial, sans-serif; --bs-primary: #14512F; } /* ===================================================================== DARK MODE ------------------------------------------------------------ Driven by [data-bs-theme] on — the same attribute Bootstrap 5.3 uses for its own built-in color modes, so form controls, dropdowns, alerts, badges, list groups and the scrollbar all repaint automatically with no extra CSS. This block only redefines JANUS's own --ci-* surface and text tokens. The topbar, sidebar and auth side panel are deliberately left alone — they are always the dark forest-green brand chrome, in both themes, exactly like CIPHER's shell. Only the tokens that back *content* surfaces (page background, cards, tables, borders, body text) change here. Semantic colours (red/amber/blue) and the raw green-* scale used for solid brand-coloured buttons/badges are intentionally untouched so those elements look identical in both themes. ===================================================================== */ :root[data-bs-theme="dark"] { --ci-ink: #E7F1EA; --ci-dim: #A9C4B2; --ci-faint: #7FA08C; --ci-line: #24352A; --ci-line-2: #33473A; --ci-panel: #142019; --ci-panel-2: #1B2A21; --ci-bg: #0D1712; /* on-surface heading/link/number text — the raw green-600/500/400 scale used directly as *text* on a --ci-panel/--ci-bg surface reads as near-black-on-near-black once those surfaces go dark, so those specific selectors are repointed at these two instead (see below). */ --ci-accent: #4FC97C; --ci-accent-hover: #6FDB98; } /* ---------- base ---------- */ html, body { height: 100%; } body.ci-app { margin: 0; background: var(--ci-bg); color: var(--ci-ink); font-family: var(--ci-sans); /* Inter's x-height sits much taller than Times New Roman's at the same declared size — the old 15px was tuned for that narrower serif, and swapping fonts alone (without resizing) made the whole app read as though the browser were zoomed in. 13.5px in Inter lands back at roughly the same visual size the layout was designed around. */ font-size: 13.5px; padding-top: var(--ci-topbar-h); padding-left: var(--ci-sidebar-w); min-height: 100vh; } body.ci-auth { padding: 0; background: radial-gradient(1100px 620px at 12% -10%, rgba(46,158,91,.22), transparent 60%), linear-gradient(160deg, #0B2E20 0%, #12432E 45%, #14512F 100%); display: flex; align-items: center; justify-content: center; min-height: 100vh; } a { color: var(--ci-accent, var(--ci-green-500)); } a:hover { color: var(--ci-accent-hover, var(--ci-green-400)); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--ci-panel-2); } ::-webkit-scrollbar-thumb { background: var(--ci-line-2); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--ci-green-400); } /* ---------- topbar ---------- */ .ci-topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--ci-topbar-h); display: flex; align-items: center; gap: 14px; padding: 0 16px; background: linear-gradient(90deg, var(--ci-green-800), var(--ci-green-600)); border-bottom: 3px solid var(--ci-green-900); z-index: 1040; } .ci-burger { display: none; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff; border-radius: 7px; width: 36px; height: 34px; font-size: 18px; line-height: 1; } .ci-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; } /* Hive Consult brand mark (assets/img/logo-mark.png). Was a plain "JA" text badge on a green gradient; kept the same rounded-square footprint, shadow and sizing so every page that sets a custom width/height inline (login/register/pending/error/setup all resize this one class) still lines up. A white backing sits behind the mark itself so its green linework reads clearly against the topbar's own dark green gradient. */ .ci-logo { width: 34px; height: 34px; border-radius: 7px; flex: 0 0 34px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 2px 10px rgba(51,196,107,.35); object-fit: contain; padding: 4px; } .ci-brandtext b { color: #fff; font-size: 16px; letter-spacing: 3px; display: block; line-height: 1.1; font-family: var(--ci-display); } .ci-brandtext small { color: var(--ci-mint-2); font-size: 9.5px; letter-spacing: .4px; text-transform: uppercase; } @media (max-width: 991px) { .ci-brandtext small { display: none; } } .ci-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .ci-role-pill { color: var(--ci-mint); border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.10); border-radius: 20px; padding: 4px 12px; font-size: 11.5px; font-family: var(--ci-mono); white-space: nowrap; } @media (max-width: 767px) { .ci-role-pill { display: none; } } .ci-icon-btn { color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-radius: 7px; padding: 6px 11px; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; } .ci-icon-btn:hover { background: rgba(255,255,255,.24); color: #fff; } .ci-dot { position: absolute; top: -6px; right: -6px; background: var(--ci-red); color: #fff; border-radius: 10px; font-size: 10px; padding: 1px 5px; font-family: var(--ci-mono); border: 2px solid var(--ci-green-700); min-width: 18px; text-align: center; } .ci-user-btn { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff; border-radius: 22px; padding: 4px 12px 4px 4px; font-size: 13px; } .ci-user-btn:hover { background: rgba(255,255,255,.24); } .ci-user-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ci-avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .5px; border: 2px solid rgba(255,255,255,.45); } .ci-avatar.lg { width: 56px; height: 56px; flex-basis: 56px; font-size: 20px; } .ci-avatar.sm { width: 26px; height: 26px; flex-basis: 26px; font-size: 10px; border-width: 1px; } /* ---------- sidebar ---------- */ .ci-sidebar { position: fixed; top: var(--ci-topbar-h); bottom: 0; left: 0; width: var(--ci-sidebar-w); background: var(--ci-green-700); border-right: 1px solid var(--ci-green-900); display: flex; flex-direction: column; overflow-y: auto; z-index: 1030; transition: transform .22s ease; } .ci-nav { padding: 10px 0; flex: 1; } .ci-nav-group { padding: 14px 18px 5px; font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: #7FBF9A; } .ci-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 18px; color: rgba(255,255,255,.84); font-size: 13.5px; text-decoration: none; border-left: 3px solid transparent; } .ci-nav-item i { width: 18px; text-align: center; font-size: 15px; } .ci-nav-item:hover { background: rgba(255,255,255,.10); color: #fff; } .ci-nav-item.active { background: #fff; color: var(--ci-green-600); border-left-color: var(--ci-green-200); font-weight: 600; } .ci-nav-label { flex: 1; } .ci-nav-count { background: rgba(255,255,255,.16); color: var(--ci-mint); font-family: var(--ci-mono); font-size: 10.5px; padding: 1px 7px; border-radius: 10px; min-width: 22px; text-align: center; } .ci-nav-item.active .ci-nav-count { background: var(--ci-green-600); color: #fff; } .ci-nav-count.alert { background: var(--ci-red); color: #fff; } .ci-sidebar-foot { padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.12); color: #9CC7AE; font-size: 11px; line-height: 1.5; } .ci-scrim { display: none; position: fixed; inset: var(--ci-topbar-h) 0 0 0; background: rgba(11,46,32,.55); z-index: 1025; } /* ---------- main ---------- */ .ci-main { min-height: calc(100vh - var(--ci-topbar-h)); display: flex; flex-direction: column; } .ci-pagehead { background: var(--ci-panel); border-bottom: 1px solid var(--ci-line); padding: 16px 26px; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .ci-pagesub { color: var(--ci-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; } .ci-pagehead h1 { margin: 2px 0 0; font-size: 20px; font-weight: 600; letter-spacing: .3px; color: var(--ci-accent, var(--ci-green-600)); font-family: var(--ci-display); } .ci-pagehead-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } .ci-content { padding: 22px 26px 34px; flex: 1; } .ci-foot { border-top: 1px solid var(--ci-line); background: var(--ci-panel); padding: 10px 26px; display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--ci-faint); } /* ---------- cards ---------- */ .ci-card { background: var(--ci-panel); border: 1px solid var(--ci-line); border-radius: 10px; box-shadow: 0 1px 3px rgba(18,38,27,.06); } .ci-card-head { padding: 13px 16px; border-bottom: 1px solid var(--ci-line); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ci-dim); display: flex; align-items: center; gap: 8px; } .ci-card-head .ci-card-tag { margin-left: auto; font-family: var(--ci-mono); font-size: 11px; color: var(--ci-faint); text-transform: none; letter-spacing: 0; } .ci-card-body { padding: 16px; } .ci-card-body.p0 { padding: 0; } /* stat tiles */ .ci-stat { background: var(--ci-panel); border: 1px solid var(--ci-line); border-radius: 10px; padding: 15px 16px; height: 100%; position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(18,38,27,.06); } .ci-stat::after { content: ''; position: absolute; right: -14px; top: -14px; width: 74px; height: 74px; border-radius: 50%; background: var(--ci-panel-2); } .ci-stat .ci-stat-ic { position: absolute; right: 12px; top: 12px; font-size: 22px; color: var(--ci-green-400); opacity: .55; z-index: 1; } .ci-stat .k { font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ci-faint); position: relative; z-index: 1; } .ci-stat .v { font-size: 27px; font-weight: 700; font-family: var(--ci-mono); margin: 5px 0 2px; color: var(--ci-accent, var(--ci-green-600)); position: relative; z-index: 1; } .ci-stat .d { font-size: 11.5px; color: var(--ci-dim); position: relative; z-index: 1; } .ci-stat.red .v { color: var(--ci-red); } .ci-stat.red .ci-stat-ic { color: var(--ci-red); } .ci-stat.amber .v { color: var(--ci-amber); } .ci-stat.amber .ci-stat-ic { color: var(--ci-amber); } .ci-stat.blue .v { color: var(--ci-blue); } .ci-stat.blue .ci-stat-ic { color: var(--ci-blue); } /* ---------- tables ---------- */ .ci-table { width: 100%; border-collapse: collapse; font-size: 13px; } .ci-table thead th { text-align: left; padding: 10px 12px; background: var(--ci-panel-2); color: var(--ci-faint); font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase; border-bottom: 1px solid var(--ci-line); white-space: nowrap; position: sticky; top: 0; z-index: 2; } .ci-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--ci-line); vertical-align: middle; } .ci-table tbody tr:hover { background: var(--ci-panel-2); } .ci-table .mono { font-family: var(--ci-mono); font-size: 12px; } .ci-table .trunc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ci-table-wrap { overflow-x: auto; } /* ---------- DataTables ---------- */ .ci-table-wrap { overflow-x: visible; } /* Responsive handles overflow */ div.dt-container { padding: 12px 14px 6px; font-size: 13px; } div.dt-container .dt-layout-row { align-items: center; } div.dt-container .dt-search { display: flex; align-items: center; gap: 8px; } div.dt-container .dt-search input { border: 1px solid var(--ci-line-2); border-radius: 7px; padding: 6px 11px 6px 30px; font-size: 13px; min-width: 210px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237C978A'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242 1.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E") no-repeat 9px center / 13px; } div.dt-container .dt-search input:focus { outline: none; border-color: var(--ci-green-400); box-shadow: 0 0 0 .2rem rgba(46, 158, 91, .16); } div.dt-container .dt-search label { display: none; } div.dt-container .dt-length { display: flex; align-items: center; gap: 7px; color: var(--ci-faint); font-size: 12px; } div.dt-container .dt-length select { border: 1px solid var(--ci-line-2); border-radius: 6px; padding: 5px 26px 5px 9px; font-size: 12.5px; } div.dt-container .dt-info { color: var(--ci-faint); font-size: 12px; padding-top: 4px; } div.dt-container .dt-paging .pagination { margin: 0; } div.dt-container .dt-paging .page-link { color: var(--ci-accent, var(--ci-green-600)); border-color: var(--ci-line); font-size: 12.5px; padding: 5px 11px; } div.dt-container .dt-paging .page-item.active .page-link { background: var(--ci-green-600); border-color: var(--ci-green-600); color: #fff; } div.dt-container .dt-paging .page-item.disabled .page-link { color: var(--ci-line-2); } table.ci-table.dataTable > thead > tr > th { border-bottom: 1px solid var(--ci-line); } table.ci-table.dataTable > thead > tr > th.dt-orderable-asc:hover, table.ci-table.dataTable > thead > tr > th.dt-orderable-desc:hover { background: #E8F1EA; cursor: pointer; } table.ci-table.dataTable > thead > tr > th span.dt-column-order::before, table.ci-table.dataTable > thead > tr > th span.dt-column-order::after { color: var(--ci-green-400); } /* Responsive expander */ table.ci-table.dtr-inline.collapsed > tbody > tr > td.dtr-control::before { background-color: var(--ci-green-500); border-radius: 50%; border: none; box-shadow: 0 1px 3px rgba(18, 38, 27, .25); content: '+'; color: #fff; font-family: var(--ci-mono); font-weight: 700; line-height: 1.05rem; } table.ci-table.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control::before { content: '-'; background-color: var(--ci-red); } table.ci-table > tbody > tr > td.dtr-control { cursor: pointer; } ul.dtr-details { width: 100%; padding: 0; margin: 6px 0 2px; list-style: none; } ul.dtr-details > li { border-bottom: 1px solid var(--ci-panel-2); padding: 5px 0; display: flex; gap: 10px; font-size: 12.5px; } ul.dtr-details > li:last-child { border-bottom: none; } ul.dtr-details .dtr-title { min-width: 120px; font-weight: 600; color: var(--ci-faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; padding-top: 2px; } ul.dtr-details .dtr-data { flex: 1; } @media (max-width: 767px) { div.dt-container .dt-search input { min-width: 0; width: 100%; } div.dt-container .dt-layout-row { flex-direction: column; align-items: stretch; gap: 8px; } div.dt-container .dt-layout-cell { justify-content: flex-start !important; } div.dt-container .dt-paging .pagination { flex-wrap: wrap; } } @media print { div.dt-container .dt-search, div.dt-container .dt-length, div.dt-container .dt-paging { display: none !important; } } /* ---------- misc ---------- */ .ci-empty { text-align: center; color: var(--ci-faint); padding: 46px 20px; } .ci-empty i { font-size: 40px; opacity: .45; display: block; margin-bottom: 10px; } .ci-empty b { color: var(--ci-dim); display: block; margin-bottom: 4px; font-size: 15px; } .ci-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--ci-panel-2); border: 1px solid var(--ci-line-2); color: var(--ci-dim); padding: 4px 11px; border-radius: 16px; font-size: 12px; text-decoration: none; } .ci-chip:hover { border-color: var(--ci-green-400); color: var(--ci-accent, var(--ci-green-500)); } .ci-chip.on { background: var(--ci-green-600); border-color: var(--ci-green-600); color: #fff; } .ci-mono { font-family: var(--ci-mono); font-size: 12px; } .ci-dim { color: var(--ci-dim); } .ci-faint { color: var(--ci-faint); } .btn-janus { background: var(--ci-green-600); border-color: var(--ci-green-600); color: #fff; } .btn-janus:hover, .btn-janus:focus { background: var(--ci-green-500); border-color: var(--ci-green-500); color: #fff; } .btn-outline-janus { border-color: var(--ci-line-2); color: var(--ci-accent, var(--ci-green-600)); background: var(--ci-panel); } .btn-outline-janus:hover, .btn-check:checked + .btn-outline-janus { background: var(--ci-green-600); border-color: var(--ci-green-600); color: #fff; } .ci-timeline { position: relative; padding-left: 26px; } .ci-timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--ci-line-2); } .ci-tl-item { position: relative; padding: 9px 0 9px 8px; border-bottom: 1px solid var(--ci-panel-2); } .ci-tl-item:last-child { border-bottom: 0; } .ci-tl-dot { position: absolute; left: -22px; top: 14px; width: 11px; height: 11px; border-radius: 50%; background: var(--ci-green-400); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ci-line-2); } .ci-tl-dot.red { background: var(--ci-red); } .ci-tl-dot.amber { background: var(--ci-amber); } .ci-tl-dot.grey { background: var(--ci-faint); } .ci-progress { height: 7px; background: var(--ci-panel-2); border-radius: 4px; overflow: hidden; } .ci-progress > span { display: block; height: 100%; background: var(--ci-green-400); } .ci-sev-bar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--ci-panel-2); } .ci-sev-bar > i { display: block; height: 100%; } .ci-sev-bar .high { background: var(--ci-red); } .ci-sev-bar .medium { background: var(--ci-amber); } .ci-sev-bar .low { background: var(--ci-blue); } .ci-sev-bar .info { background: var(--ci-green-300); } /* ---------- auth pages ---------- */ .ci-auth-wrap { width: 100%; max-width: 1000px; margin: 28px auto; padding: 0 16px; } .ci-auth-card { background: var(--ci-panel); color: var(--ci-ink); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(6,24,15,.42); display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 860px) { .ci-auth-card { grid-template-columns: 1fr; } .ci-auth-side { display: none; } } .ci-auth-side { background: linear-gradient(160deg, var(--ci-green-800), var(--ci-green-600)); color: #fff; padding: 40px 34px; display: flex; flex-direction: column; } .ci-auth-side h2 { font-size: 22px; letter-spacing: 3px; margin: 20px 0 6px; font-family: var(--ci-display); } .ci-auth-side p { color: var(--ci-mint-2); font-size: 13.5px; line-height: 1.7; } .ci-auth-feature { display: flex; gap: 11px; align-items: flex-start; margin-top: 15px; font-size: 13px; color: rgba(255,255,255,.9); } .ci-auth-feature i { color: var(--ci-green-200); font-size: 16px; margin-top: 2px; } .ci-auth-body { padding: 38px 36px; } @media (max-width: 575px) { .ci-auth-body { padding: 28px 22px; } } .ci-auth-body h1 { font-size: 20px; color: var(--ci-accent, var(--ci-green-600)); margin-bottom: 4px; } .form-control, .form-select { border-color: var(--ci-line-2); padding: 10px 12px; font-size: 14px; } .form-control:focus, .form-select:focus { border-color: var(--ci-green-400); box-shadow: 0 0 0 .2rem rgba(46,158,91,.16); } .form-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--ci-faint); margin-bottom: 5px; } .ci-divider { display: flex; align-items: center; gap: 12px; color: var(--ci-faint); font-size: 11.5px; margin: 20px 0; } .ci-divider::before, .ci-divider::after { content: ''; flex: 1; height: 1px; background: var(--ci-line); } .ci-pw-meter { height: 5px; border-radius: 3px; background: var(--ci-line); overflow: hidden; margin-top: 7px; } .ci-pw-meter > span { display: block; height: 100%; width: 0; transition: width .25s, background .25s; } /* federated sign-in buttons */ .ci-btn-oauth { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ci-panel); border: 1px solid var(--ci-line-2); color: var(--ci-ink); padding: 9px 12px; font-size: 13.5px; font-weight: 600; border-radius: 8px; transition: border-color .15s, box-shadow .15s, background .15s; } .ci-btn-oauth:hover:not(:disabled) { border-color: var(--ci-green-400); background: var(--ci-panel-2); box-shadow: 0 2px 8px rgba(18, 38, 27, .08); color: var(--ci-ink); } .ci-btn-oauth:disabled { opacity: .6; cursor: progress; } .ci-btn-oauth svg, .ci-btn-oauth i { flex: 0 0 auto; } .ci-btn-oauth span { line-height: 1; } @media (max-width: 360px) { .ci-btn-oauth { font-size: 12.5px; padding: 9px 6px; gap: 5px; } } /* ---------- dark mode: the remaining hand-picked spots ---------- Everything else (form controls, dropdowns, alerts, badges, list groups, .btn-close, the scrollbar) repaints on its own via Bootstrap's built-in [data-bs-theme] support or the --ci-* tokens above. These are the few places JANUS hardcodes a literal colour instead of a variable or a token Bootstrap doesn't theme by itself. */ [data-bs-theme="dark"] .input-group-text.bg-white { background-color: var(--ci-panel-2) !important; color: var(--ci-dim); border-color: var(--bs-border-color); } [data-bs-theme="dark"] .text-bg-light, [data-bs-theme="dark"] .list-group-item.bg-light { background-color: var(--ci-panel-2) !important; color: var(--ci-ink) !important; } /* SweetAlert2 ships its own light popup styling and isn't aware of data-bs-theme, so it needs an explicit dark variant. */ [data-bs-theme="dark"] .swal2-popup { background: var(--ci-panel); color: var(--ci-ink); } [data-bs-theme="dark"] .swal2-popup .swal2-html-container { color: var(--ci-dim); } [data-bs-theme="dark"] .swal2-popup input.swal2-input, [data-bs-theme="dark"] .swal2-popup textarea.swal2-textarea { background: var(--ci-panel-2); border-color: var(--ci-line-2); color: var(--ci-ink); } [data-bs-theme="dark"] .ci-toast.swal2-popup { box-shadow: 0 6px 24px rgba(0,0,0,.5); } /* ---------- theme toggle ---------- */ .ci-theme-toggle i.bi-sun-fill { display: none; } [data-bs-theme="dark"] .ci-theme-toggle i.bi-moon-stars-fill { display: none; } [data-bs-theme="dark"] .ci-theme-toggle i.bi-sun-fill { display: inline-block; } /* ---------- responsive ---------- */ @media (max-width: 991px) { body.ci-app { padding-left: 0; } .ci-burger { display: inline-flex; align-items: center; justify-content: center; } .ci-sidebar { transform: translateX(-100%); } .ci-sidebar.open { transform: translateX(0); } .ci-scrim.show { display: block; } .ci-content { padding: 18px 16px 30px; } .ci-pagehead { padding: 14px 16px; } } /* ---------- print ---------- */ @media print { .ci-topbar, .ci-sidebar, .ci-foot, .ci-pagehead-actions, .ci-scrim { display: none !important; } body.ci-app { padding: 0; background: #fff; } .ci-card, .ci-stat { box-shadow: none; } } /* ===================================================================== ACCESSIBILITY (WCAG 2.1 AA — Phase 1 static pass) ===================================================================== */ /* ---------- visually-hidden utility (Bootstrap ships one too, but the shell doesn't otherwise load its full utilities layer) ---------- */ .ci-sr-only { 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; } /* ---------- skip link (WCAG 2.4.1 Bypass Blocks) ---------- Off-screen until focused, then docked at the top-left so keyboard and screen-reader users can jump past the topbar/sidebar straight to the page content instead of tabbing through the whole nav every time. */ .ci-skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #0D2B1B; color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0; font-size: 13.5px; font-weight: 600; text-decoration: none; } .ci-skip-link:focus { left: 0; outline: 2px solid #fff; outline-offset: -4px; } /* ---------- keyboard focus indicator (WCAG 2.4.7 Focus Visible, 2.4.11 Focus Not Obscured) ---------- A visible, high-contrast ring for every interactive element, not just whatever the browser defaults to (which several rules above already suppress on specific controls, e.g. .dt-search input, and which reads poorly against this app's own dark-green brand surfaces either way). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid #2E78DB; outline-offset: 2px; border-radius: 4px; } /* The blue ring above drops under the 3:1 non-text contrast minimum (WCAG 1.4.11) on this app's solid/gradient brand-green surfaces — topbar, sidebar nav items, solid green buttons, active pagination — so those get a white ring instead. .ci-nav-item.active is the one sidebar item with a *white* background (see rule above), so it keeps the blue ring rather than going invisible against its own outline colour. */ .ci-topbar :focus-visible, .ci-sidebar .ci-nav-item:focus-visible, .btn-janus:focus-visible, .btn-check:checked + .btn-outline-janus:focus-visible, div.dt-container .dt-paging .page-item.active .page-link:focus-visible { outline-color: #fff; } .ci-sidebar .ci-nav-item.active:focus-visible { outline-color: #2E78DB; }