/* ============================================================================
* Faction site-wide theme for Kiwi TCMS (PatternFly 3 / Bootstrap 3)
* ----------------------------------------------------------------------------
* Lean global pass: re-colors the high-impact surfaces only (body, navbar,
* cards/panels, tables, buttons, links, headings, form inputs, badges, alerts).
* Deep PatternFly widgets are intentionally left at their defaults.
*
* Loaded AFTER style/patternfly_override.css (see the patternfly.html override),
* so it wins the cascade without needing !important everywhere. A few !important
* are used only where PatternFly sets very specific inline-ish rules.
*
* Palette = Faction app brand (dark plum + orange, Montserrat).
* This file is plugin-owned and survives Kiwi upgrades.
* ========================================================================== */
:root {
--fk-bg: #1E192C; /* page background (dark plum) */
--fk-surface: #2A2538; /* cards / panels / navbar */
--fk-surface-2: #3A3448; /* elevated / table header / hover */
--fk-border: rgba(138,135,147,.22);
--fk-border-2: rgba(138,135,147,.34);
--fk-accent: #EF5228; /* Faction orange */
--fk-accent-2: #ff6a44; /* lighter orange (hover) */
--fk-text: #F1F0F1;
--fk-text-muted: rgba(241,240,241,.62);
--fk-success: #4CAF50;
--fk-error: #F44336;
--fk-warning: #FF9800;
--fk-info: #2196F3;
--fk-radius: 8px;
--fk-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Helvetica Neue', Arial, sans-serif;
}
/* ---- Montserrat — localized (self-hosted, no CDN). Instanced + latin-subset
from the Faction app's own Montserrat-VF.ttf. ~25KB/weight. ---- */
@font-face {
font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
src: url('vendor/montserrat-400.woff2') format('woff2');
}
@font-face {
font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
src: url('vendor/montserrat-600.woff2') format('woff2');
}
@font-face {
font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
src: url('vendor/montserrat-700.woff2') format('woff2');
}
/* ---- Base ---- */
body {
background: var(--fk-bg) !important;
color: var(--fk-text);
font-family: var(--fk-font);
}
.container, .container-fluid, .row, .col-md-12 { background: transparent; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 { color: var(--fk-text); font-family: var(--fk-font); font-weight: 600; }
p, label, span, td, th, li, dt, dd { color: var(--fk-text); }
small, .text-muted, .help-block { color: var(--fk-text-muted) !important; }
hr { border-top-color: var(--fk-border); }
/* ---- Links + the orange accent ---- */
a { color: var(--fk-accent); }
a:hover, a:focus { color: var(--fk-accent-2); }
/* ---- Navbar ---- */
.navbar-default, nav.navbar-default {
background: var(--fk-surface) !important;
border-color: var(--fk-border) !important;
border-top-color: var(--fk-accent) !important; /* replaces Kiwi green accent */
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a { color: var(--fk-text) !important; }
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .active > a {
color: var(--fk-accent-2) !important;
background: var(--fk-surface-2) !important;
}
.navbar-default .navbar-toggle { border-color: var(--fk-border); }
.navbar-default .navbar-toggle .icon-bar { background: var(--fk-text); }
/* dropdown menus in navbar */
.dropdown-menu {
background: var(--fk-surface-2);
border: 1px solid var(--fk-border-2);
border-radius: var(--fk-radius);
}
.dropdown-menu > li > a { color: var(--fk-text); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus,
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
background: var(--fk-accent) !important; color: #fff !important;
}
.dropdown-header, .dropdown-menu .divider { border-color: var(--fk-border); }
/* Submenus (dropdown-submenu): when a child menu is open, PF/Bootstrap gives the
PARENT item a light bg -> illegible light-on-light. Force parent + open states
to the dark theme; only the actually-hovered item gets the orange highlight. */
.dropdown-submenu > a,
.dropdown-submenu.open > a,
.dropdown-submenu:hover > a,
.dropdown-menu .open > a,
.dropdown-menu .open > a:hover,
.dropdown-menu .open > a:focus {
background: var(--fk-surface-2) !important; color: var(--fk-text) !important;
}
.dropdown-submenu:hover > a,
.dropdown-submenu > a:hover, .dropdown-submenu > a:focus {
background: var(--fk-accent) !important; color: #fff !important;
}
.dropdown-submenu > .dropdown-menu {
background: var(--fk-surface-2) !important; border: 1px solid var(--fk-border-2) !important;
}
/* the submenu caret */
.dropdown-submenu > a:after { border-left-color: var(--fk-text-muted); }
/* ---- Cards / panels / list groups ---- */
.card-pf, .panel, .panel-default, .list-group, .list-group-item, .well {
background: var(--fk-surface) !important;
border-color: var(--fk-border) !important;
border-radius: var(--fk-radius);
color: var(--fk-text);
}
.panel-heading, .card-pf-heading, .panel-default > .panel-heading {
background: var(--fk-surface-2) !important;
border-color: var(--fk-border) !important;
color: var(--fk-text) !important;
}
.panel-title { color: var(--fk-text); }
/* ---- Hover: a soft light overlay, never the harsh PF near-white. ----
High-specificity + broad coverage so it beats PatternFly's own list-view
hover rules (which set a near-white bg with higher specificity). */
.list-group-item:hover,
.list-view-pf .list-group-item:hover,
.list-view-pf-view .list-group-item:hover,
.list-view-pf-view .list-group-item.list-view-pf-expand-active,
.list-group-item.test-execution-element:hover,
.list-group-item .list-group-item-header:hover,
.list-group-item.active,
.list-group-item.active:hover,
ul.list-group > .list-group-item:hover,
.list-view-pf > .list-group-item:hover {
background-color: rgba(255,255,255,.08) !important; /* lighter shade of bg */
background-image: none !important;
color: var(--fk-text) !important;
}
/* keep child text legible on hover (PF sometimes darkens text on light hover),
but NOT links — links keep the Faction accent (red/orange), not white. */
.list-view-pf .list-group-item:hover .list-group-item-heading,
.list-view-pf .list-group-item:hover .list-group-item-text,
.list-group-item:hover .list-group-item-header,
.list-group-item:hover *:not(a):not(a *) { color: inherit; }
.list-group-item:hover a,
.list-view-pf .list-group-item:hover a { color: var(--fk-accent) !important; }
.list-group-item:hover a:hover { color: var(--fk-accent-2) !important; }
/* ---- Tables ---- */
.table, table.table {
color: var(--fk-text);
background: transparent;
}
.table > thead > tr > th {
background: var(--fk-surface-2);
color: var(--fk-text);
border-bottom: 2px solid var(--fk-border-2);
}
.table > tbody > tr > td,
.table > tbody > tr > th { border-top-color: var(--fk-border); }
/* Striping. Bootstrap 3 paints EVEN rows #f5f5f5 (white) directly on the :
.table-striped > tbody > tr:nth-of-type(even) { background-color:#f5f5f5; }
Override that exact selector on the
with a subtle dark tint; keep odd
rows transparent (surface shows through). DataTables' class-based striping is
handled separately below. */
.table-striped > tbody > tr:nth-of-type(even),
.table-striped > tbody > tr:nth-of-type(even) > td,
.table-striped > tbody > tr:nth-of-type(even) > th {
background-color: rgba(255,255,255,.035) !important;
}
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
background-color: transparent !important;
}
table.dataTable tbody tr,
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even {
background-color: var(--fk-surface) !important;
}
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd,
table.dataTable tbody tr.odd > .sorting_1,
table.dataTable tbody tr.odd > td {
background-color: var(--fk-surface) !important;
}
table.dataTable.stripe tbody tr.even,
table.dataTable.display tbody tr.even,
table.dataTable tbody tr.even > .sorting_1,
table.dataTable tbody tr.even > td {
background-color: rgba(255,255,255,.035) !important;
}
/* sorted-column highlight (DataTables paints these slightly different = white tint) */
table.dataTable tbody tr > .sorting_1,
table.dataTable tbody tr > .sorting_2,
table.dataTable tbody tr > .sorting_3 {
background-color: rgba(255,255,255,.02) !important;
}
/* selected row */
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected > td,
table.dataTable tbody > tr.selected > .sorting_1 {
background-color: rgba(239,82,40,.22) !important;
color: var(--fk-text) !important;
}
/* Hover — soft, beats DataTables' own row hover too */
.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th,
table.dataTable.hover tbody tr:hover,
table.dataTable.hover tbody tr:hover > td,
table.dataTable tbody tr:hover,
table.dataTable tbody tr:hover > td {
background-color: rgba(255,255,255,.08) !important; /* lighter shade of bg */
color: var(--fk-text) !important;
}
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th,
table.dataTable.table-bordered, table.dataTable.table-bordered td, table.dataTable.table-bordered th {
border-color: var(--fk-border) !important;
}
/* DataTables chrome (search box, length, info, pagination wrappers) */
.dataTables_wrapper, .dataTables_wrapper .row { background: transparent !important; color: var(--fk-text); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper input[type="search"],
.dataTables_wrapper input[type="text"] {
background: var(--fk-bg) !important; color: var(--fk-text) !important;
border: 1px solid var(--fk-border-2) !important; border-radius: 6px;
}
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info { color: var(--fk-text-muted) !important; }
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label { color: var(--fk-text) !important; }
/* pagination bar — was background:#fafafa (white) */
.dataTables_paginate,
.dataTables_wrapper .dataTables_paginate {
background: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--fk-text-muted) !important; }
.dataTables_wrapper .dataTables_paginate ul.pagination > li > a,
.dataTables_wrapper .dataTables_paginate ul.pagination > li > span {
background: var(--fk-surface) !important; border-color: var(--fk-border) !important; color: var(--fk-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate ul.pagination > .active > a,
.dataTables_wrapper .dataTables_paginate ul.pagination > .active > span {
background: var(--fk-accent) !important; border-color: var(--fk-accent) !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate ul.pagination > .disabled > a,
.dataTables_wrapper .dataTables_paginate ul.pagination > .disabled > span {
background: var(--fk-surface) !important; color: var(--fk-text-muted) !important; opacity: .5;
}
/* DataTables uses box-shadow overlays (not bg) for hover/selected. Re-color
the blue selection + the dark hover film to brand tones. */
table.dataTable.table-hover > tbody > tr:hover > * {
box-shadow: inset 0 0 0 9999px rgba(255,255,255,.08) !important;
}
table.dataTable > tbody > tr.selected > *,
table.dataTable.table-striped > tbody > tr.odd.selected > * {
box-shadow: inset 0 0 0 9999px rgba(239,82,40,.22) !important;
color: var(--fk-text) !important;
}
table.dataTable > tbody > tr.selected a { color: var(--fk-accent) !important; }
table.dataTable.table-striped > tbody > tr.odd > * {
box-shadow: inset 0 0 0 9999px rgba(255,255,255,.035) !important; /* striping via shadow */
}
/* ============================================================================
* bootstrap-switch toggles (unstyled grey/white by default)
* ========================================================================== */
.bootstrap-switch { border-color: var(--fk-border-2) !important; }
.bootstrap-switch .bootstrap-switch-label {
background: var(--fk-surface-2) !important; color: var(--fk-text) !important;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
background: var(--fk-surface) !important; color: var(--fk-text) !important;
}
/* "on" state (primary) -> Faction orange; "off"/secondary -> muted surface */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
background: var(--fk-accent) !important; color: #fff !important;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
background: var(--fk-surface-2) !important; color: var(--fk-text-muted) !important;
}
.bootstrap-switch.bootstrap-switch-focused {
border-color: var(--fk-accent) !important;
box-shadow: 0 0 0 2px rgba(239,82,40,.25) !important;
}
/* ---- Buttons ---- */
.btn {
border-radius: var(--fk-radius);
font-family: var(--fk-font);
font-weight: 600;
}
.btn-primary, .btn-primary:focus {
background: var(--fk-accent); border-color: var(--fk-accent); color: #fff;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active {
background: var(--fk-accent-2); border-color: var(--fk-accent-2); color: #fff;
}
.btn-default {
background: var(--fk-surface-2); border-color: var(--fk-border-2); color: var(--fk-text);
}
.btn-default:hover, .btn-default:focus {
background: var(--fk-surface); border-color: var(--fk-accent); color: var(--fk-accent-2);
}
.btn-link { color: var(--fk-accent); }
.btn-success { background: var(--fk-success); border-color: var(--fk-success); }
.btn-danger { background: var(--fk-error); border-color: var(--fk-error); }
.btn-warning { background: var(--fk-warning); border-color: var(--fk-warning); }
.btn-info { background: var(--fk-info); border-color: var(--fk-info); }
/* Native submit/button inputs (admin forms, search) that aren't .btn */
input[type="submit"], input[type="button"], input[type="reset"], button:not(.btn):not(.close):not(.navbar-toggle) {
background: var(--fk-surface-2); color: var(--fk-text);
border: 1px solid var(--fk-border-2); border-radius: var(--fk-radius);
font-family: var(--fk-font); font-weight: 600;
}
input[type="submit"]:hover, input[type="button"]:hover,
button:not(.btn):not(.close):not(.navbar-toggle):hover {
border-color: var(--fk-accent); color: var(--fk-accent-2);
}
/* Django admin submit-row buttons */
.submit-row input, .submit-row .button, .submit-row a.button {
background: var(--fk-surface-2) !important; color: var(--fk-text) !important;
border: 1px solid var(--fk-border-2) !important; border-radius: var(--fk-radius) !important;
}
.submit-row input.default, .submit-row .default {
background: var(--fk-accent) !important; border-color: var(--fk-accent) !important; color: #fff !important;
}
/* DataTables export buttons (CSV/Excel/PDF/Print/Column-visibility) — white by default */
.dt-buttons { background: transparent !important; }
.dt-button, button.dt-button, div.dt-button, a.dt-button,
.dt-buttons .btn {
background: var(--fk-surface-2) !important; background-image: none !important;
border: 1px solid var(--fk-border-2) !important; color: var(--fk-text) !important;
border-radius: var(--fk-radius) !important; font-weight: 600;
}
.dt-button:hover, button.dt-button:hover, .dt-button.active, .dt-button:active,
.dt-buttons .btn:hover {
background: var(--fk-surface) !important; border-color: var(--fk-accent) !important;
color: var(--fk-accent-2) !important;
}
.dt-button span { color: inherit !important; }
/* the column-visibility dropdown collection */
.dt-button-collection {
background: var(--fk-surface-2) !important; border: 1px solid var(--fk-border-2) !important;
border-radius: var(--fk-radius) !important;
}
.dt-button-collection .dt-button { background: var(--fk-surface) !important; border-color: var(--fk-border) !important; }
.dt-button-collection .dt-button.active { background: var(--fk-accent) !important; color: #fff !important; }
/* ---- Forms / inputs ---- */
.form-control, input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="date"], textarea, select {
background: var(--fk-bg);
color: var(--fk-text);
border: 1px solid var(--fk-border-2);
border-radius: var(--fk-radius);
}
.form-control:focus {
border-color: var(--fk-accent);
box-shadow: 0 0 0 2px rgba(239,82,40,.25);
}
.form-control::placeholder { color: var(--fk-text-muted); }
.input-group-addon {
background: var(--fk-surface-2); border-color: var(--fk-border-2); color: var(--fk-text-muted);
}
.bootstrap-select .btn { background: var(--fk-bg); color: var(--fk-text); border-color: var(--fk-border-2); }
/* ---- Badges / labels ---- */
.badge { background: var(--fk-surface-2); color: var(--fk-text); border-radius: 12px; }
.label-primary { background: var(--fk-accent); }
.label-success { background: var(--fk-success); }
.label-danger { background: var(--fk-error); }
.label-warning { background: var(--fk-warning); }
.label-info { background: var(--fk-info); }
/* ---- Alerts ---- */
.alert { border-radius: var(--fk-radius); border-width: 1px; }
.alert-success { background: rgba(76,175,80,.14); border-color: var(--fk-success); color: #c7f0c9; }
.alert-danger { background: rgba(244,67,54,.14); border-color: var(--fk-error); color: #f8c7c3; }
.alert-warning { background: rgba(255,152,0,.14); border-color: var(--fk-warning); color: #ffe0b0; }
.alert-info { background: rgba(33,150,243,.14); border-color: var(--fk-info); color: #bfe0fb; }
/* ---- Tabs / nav-pills ---- */
.nav-tabs { border-bottom-color: var(--fk-border); }
.nav-tabs > li > a { color: var(--fk-text-muted); border-radius: var(--fk-radius) var(--fk-radius) 0 0; }
.nav-tabs > li > a:hover { border-color: var(--fk-border) var(--fk-border) var(--fk-border); background: var(--fk-surface-2); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
background: var(--fk-surface); color: var(--fk-accent-2);
border-color: var(--fk-border) var(--fk-border) transparent;
}
.nav-pills > li.active > a { background: var(--fk-accent); }
/* ---- Pagination / breadcrumb ---- */
.pagination > li > a, .pagination > li > span {
background: var(--fk-surface); border-color: var(--fk-border); color: var(--fk-text);
}
.pagination > .active > a, .pagination > .active > span {
background: var(--fk-accent); border-color: var(--fk-accent); color: #fff;
}
.breadcrumb { background: var(--fk-surface); border-radius: var(--fk-radius); }
.breadcrumb > .active { color: var(--fk-text-muted); }
/* ---- Misc: progress, code, wells ---- */
.progress { background: var(--fk-surface-2); }
.progress-bar { background: var(--fk-accent); }
pre, code, kbd {
background: var(--fk-bg); color: #e6e1f0; border: 1px solid var(--fk-border);
border-radius: 6px;
}
/* ============================================================================
* list-view-pf layout refinement (sophisticated, generic — helps every Kiwi
* list page: test runs, plans, cases, search results). PatternFly 3's default
* list rows cram the "additional info" columns (priority, category, tested-by,
* author) and over-allocate the status/actions column. We turn the row into a
* sane flexbox: a flexible description, a wrapping additional-info area whose
* items have breathing room, and a content-sized actions/status column.
* ========================================================================== */
/* The whole row: align items, comfortable vertical padding */
.list-view-pf-view .list-group-item,
.list-view-pf .list-group-item {
padding-top: 12px; padding-bottom: 12px;
}
.list-view-pf-main-info {
display: flex; align-items: flex-start; flex: 1 1 auto; min-width: 0;
}
.list-view-pf-body { display: flex; align-items: center; width: 100%; gap: 8px; }
/* Description (title + tags) takes the slack and truncates gracefully */
.list-view-pf-description {
flex: 1 1 40%; min-width: 220px; padding-right: 16px;
}
.list-view-pf-description .list-group-item-heading { white-space: normal; }
/* Additional-info columns: a wrapping flex row with real gaps, each item sized
to its content (no more overlap / cramming). */
.list-view-pf-additional-info {
display: flex; flex-wrap: wrap; align-items: center;
gap: 6px 22px; flex: 1 1 auto; min-width: 0;
}
.list-view-pf-additional-info-item {
margin-right: 0 !important; /* PF's fixed right-margin caused overlap */
white-space: nowrap; min-width: 0;
display: inline-flex; align-items: center; gap: 6px;
}
/* the tested-by / author lines that were stacking on top of each other */
.list-view-pf-additional-info-item .fa,
.list-view-pf-additional-info-item .pficon { margin-right: 4px; }
/* Actions / status column: size to content, don't reserve a huge fixed block */
.list-view-pf-actions {
display: flex; align-items: center; gap: 8px;
margin-left: auto; flex: 0 0 auto; padding-left: 12px;
}
.list-view-pf-actions .label,
.list-view-pf-actions .badge { white-space: nowrap; }
/* Status text (PASSED/FAILED/…) — keep its color but tighten the footprint */
.list-group-item .text-success { color: #4CAF50 !important; }
.list-group-item .text-danger { color: #F44336 !important; }
.list-group-item .text-warning { color: #FF9800 !important; }
/* ============================================================================
* SimpleMDE / CodeMirror markdown editor (the comment box on run/case pages).
* PF ships it with a white background -> white-on-white text. Re-theme dark.
* ========================================================================== */
.CodeMirror, .CodeMirror-scroll {
background: var(--fk-bg) !important;
color: var(--fk-text) !important;
border-color: var(--fk-border) !important;
}
.CodeMirror-cursor { border-left-color: var(--fk-text) !important; }
.CodeMirror-selected { background: rgba(239,82,40,.22) !important; }
.CodeMirror-line::selection,
.CodeMirror-line ::selection { background: rgba(239,82,40,.30) !important; }
.CodeMirror-gutters { background: var(--fk-surface) !important; border-color: var(--fk-border) !important; }
.CodeMirror-linenumber { color: var(--fk-text-muted) !important; }
.cm-s-default .cm-header { color: #ffb59c !important; }
.cm-s-default .cm-comment { color: #c9c4d6 !important; background: rgba(255,255,255,.04); }
.cm-s-default .cm-link, .cm-s-default .cm-url { color: var(--fk-accent) !important; }
.cm-s-default .cm-quote { color: #b9d6a0 !important; }
.cm-s-default .cm-string { color: #f0a58c !important; }
/* toolbar — WHITE background (per design); dark icons so they stay visible */
.editor-toolbar {
background: #ffffff !important;
border-color: var(--fk-border) !important;
opacity: 1;
}
.editor-toolbar a {
color: #2A2538 !important; /* dark icon on white toolbar */
}
.editor-toolbar a.active, .editor-toolbar a:hover {
background: #ececef !important;
border-color: #d0cdd6 !important;
color: var(--fk-accent) !important;
}
.editor-toolbar i.separator { border-color: #d0cdd6; }
.editor-preview, .editor-preview-side {
background: var(--fk-bg) !important; color: var(--fk-text) !important;
border-color: var(--fk-border) !important;
}
.editor-statusbar { color: var(--fk-text-muted) !important; }
/* Login page: keep it on-brand */
.login-pf, .login-pf body { background: var(--fk-bg) !important; }
.login-pf #brand img { filter: none; }
/* ============================================================================
* Telemetry charts (c3.js / d3 SVG). Default axis/legend/tick text is dark =
* illegible on the dark theme. Force chart text + lines light.
* ========================================================================== */
.c3 svg, .c3 text, .c3-chart text { fill: var(--fk-text) !important; }
.c3-axis text, .c3-axis .tick text, .c3-legend-item text,
.c3-axis-x text, .c3-axis-y text, .c3-axis-y2 text { fill: var(--fk-text) !important; }
.c3-axis path, .c3-axis line, .tick line, .domain {
stroke: var(--fk-border-2) !important;
}
.c3-grid line { stroke: rgba(138,135,147,.18) !important; }
.c3-text, .c3-texts text { fill: var(--fk-text) !important; }
.c3-tooltip-container, .c3-tooltip {
background: var(--fk-surface-2) !important; color: var(--fk-text) !important;
border: 1px solid var(--fk-border-2) !important;
}
.c3-tooltip th { background: var(--fk-surface) !important; color: var(--fk-text) !important; }
.c3-tooltip td { color: var(--fk-text) !important; border-color: var(--fk-border) !important; }
/* generic SVG text fallback for any d3 chart Kiwi renders */
.telemetry-chart text, [id*="chart"] svg text, .chart text { fill: var(--fk-text); }