/* Senserva Tabulator skin: the ONE brand style for every Tabulator table on the site. Linked as the LAST stylesheet in on every page that loads vendor/tabulator, so it wins over any older per-page rules. Documented in CLAUDE.md (Tabulator tables); change colors here, never per page. Scheme: navy header with Senserva-green uppercase titles, a green frame around the table, Senserva-black rows (#1c1b22) alternating with the lighter card shade (#2E2C35) so the brand colors pop at full strength, white font, cyan links, inverted (white) row hover and selection, green scrollbars, navy pagination footer. Row-expand panels are navy with white-only text. */ .tabulator { background: #1c1b22; border: 2px solid #80BC00; border-radius: 12px; font-family: inherit; overflow: hidden; color: #fff; } .tabulator .tabulator-header { background: #001B52; border-bottom: 2px solid #80BC00; color: #80BC00; } .tabulator .tabulator-header .tabulator-col { background: #001B52; border-right: 1px solid rgba(255,255,255,0.12); color: #80BC00; } .tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 12px 14px; } .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: #80BC00; } .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover { background: #0a2a6b; } .tabulator .tabulator-header .tabulator-col .tabulator-col-sorter { color: #80BC00; } .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-bottom-color: #80BC00; } .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-top-color: #80BC00; } .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-bottom-color: rgba(128,188,0,0.55); } .tabulator .tabulator-header-filter input, .tabulator .tabulator-header-filter select { background: rgba(255,255,255,0.94); border: 1px solid #80BC00; border-radius: 6px; color: #001B52; padding: 4px 8px; font-family: inherit; font-size: 0.8rem; width: 100%; box-sizing: border-box; font-weight: 600; } .tabulator .tabulator-header-filter input::placeholder { color: rgba(0,27,82,0.5); } .tabulator .tabulator-header-filter input:focus, .tabulator .tabulator-header-filter select:focus { outline: 2px solid #80BC00; outline-offset: 1px; } .tabulator .tabulator-tableholder { background: #1c1b22; } .tabulator .tabulator-tableholder .tabulator-table { background-color: #1c1b22; color: #fff; } .tabulator .tabulator-tableholder .tabulator-placeholder-contents { color: rgba(255,255,255,0.6); } .tabulator-row { background: #1c1b22; border-bottom: 1px solid rgba(128,188,0,0.3); color: #fff; transition: background 0.12s ease; } .tabulator-row.tabulator-row-even { background: #2E2C35; } /* Hover and selection invert the row: white background with the row's own shade as the text color, so highlighted rows stay fully readable. */ .tabulator-row:hover, .tabulator-row.tabulator-selectable:hover, .tabulator-row.tabulator-selected { background: #fff; color: #1c1b22; } .tabulator-row.tabulator-row-even:hover, .tabulator-row.tabulator-row-even.tabulator-selected { background: #fff; color: #2E2C35; } .tabulator-row:hover .tabulator-cell, .tabulator-row.tabulator-selected .tabulator-cell { color: #1c1b22; } .tabulator-row.tabulator-row-even:hover .tabulator-cell, .tabulator-row.tabulator-row-even.tabulator-selected .tabulator-cell { color: #2E2C35; } .tabulator-row:hover .tabulator-cell a, .tabulator-row.tabulator-selected .tabulator-cell a { color: #001B52; text-decoration: underline; } /* Inline-styled spans inside cells (pills, dashes, colored percents) must invert too, or a highlighted row goes half-unreadable. Expanded rows are excluded; they keep their own colors. */ .tabulator-row:not(:has(.kev-expand)):not(:has(.etw-expand)):not(:has(.chk-expand)):not(:has(.ctl-expand)):hover .tabulator-cell *, .tabulator-row.tabulator-selected:not(:has(.kev-expand)):not(:has(.etw-expand)):not(:has(.chk-expand)):not(:has(.ctl-expand)) .tabulator-cell * { color: inherit !important; } .tabulator-row .tabulator-cell { color: #fff; border-right: none; padding: 11px 14px; font-size: 0.88rem; line-height: 1.5; } .tabulator-row .tabulator-cell a { color: #46C2CB; } .tabulator .tabulator-tableholder { scrollbar-color: #80BC00 rgba(255,255,255,0.12); scrollbar-width: thin; } .tabulator .tabulator-tableholder::-webkit-scrollbar { width: 10px; height: 10px; } .tabulator .tabulator-tableholder::-webkit-scrollbar-track { background: rgba(255,255,255,0.12); border-radius: 6px; } .tabulator .tabulator-tableholder::-webkit-scrollbar-thumb { background: #80BC00; border-radius: 6px; } .tabulator .tabulator-tableholder::-webkit-scrollbar-thumb:hover { background: #9fd426; } .tabulator .tabulator-footer { background: #001B52; border-top: 2px solid #80BC00; color: #fff; } .tabulator .tabulator-footer .tabulator-paginator { color: rgba(255,255,255,0.9); } .tabulator .tabulator-footer .tabulator-paginator > label { color: rgba(255,255,255,0.9); } .tabulator .tabulator-footer .tabulator-page { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.35); border-radius: 6px; } .tabulator .tabulator-footer .tabulator-page.active { background: #80BC00; color: #001B52; border-color: #80BC00; font-weight: 800; } .tabulator .tabulator-footer .tabulator-page:not(.disabled):hover { background: rgba(128,188,0,0.35); color: #fff; } .tabulator .tabulator-footer .tabulator-page.disabled { opacity: 0.4; } .tabulator .tabulator-footer .tabulator-page-size { background: #001B52; color: #fff; border: 1px solid rgba(255,255,255,0.35); border-radius: 6px; padding: 2px 6px; } .tabulator .tabulator-footer .tabulator-page-counter { color: rgba(255,255,255,0.9); } .tabulator-tooltip { background: #001B52 !important; color: #80BC00 !important; border: 1px solid #80BC00 !important; border-radius: 8px; } /* Row-expand panels match the row they sit on (transparent over the row's own black shade), white-only text, links white and underlined. Expanded rows opt out of the green hover so the open panel never sits on green. */ .kev-expand, .etw-expand, .chk-expand, .ctl-expand { background: transparent !important; color: #fff !important; border-top: 1px dashed rgba(128,188,0,0.5) !important; } .kev-expand *, .etw-expand *, .chk-expand *, .ctl-expand * { color: #fff !important; } .kev-expand a, .etw-expand a, .chk-expand a, .ctl-expand a { color: #fff !important; text-decoration: underline; } .tabulator-row:has(.kev-expand):hover, .tabulator-row:has(.etw-expand):hover, .tabulator-row:has(.chk-expand):hover, .tabulator-row:has(.ctl-expand):hover { background: #1c1b22; } .tabulator-row.tabulator-row-even:has(.kev-expand):hover, .tabulator-row.tabulator-row-even:has(.etw-expand):hover, .tabulator-row.tabulator-row-even:has(.chk-expand):hover, .tabulator-row.tabulator-row-even:has(.ctl-expand):hover { background: #2E2C35; } .tabulator-row:has(.kev-expand):hover .tabulator-cell, .tabulator-row:has(.etw-expand):hover .tabulator-cell, .tabulator-row:has(.chk-expand):hover .tabulator-cell, .tabulator-row:has(.ctl-expand):hover .tabulator-cell { color: #fff; } .tabulator-row:has(.kev-expand):hover .tabulator-cell a, .tabulator-row:has(.etw-expand):hover .tabulator-cell a, .tabulator-row:has(.chk-expand):hover .tabulator-cell a, .tabulator-row:has(.ctl-expand):hover .tabulator-cell a { color: #46C2CB; text-decoration: none; } /* Table toolbar: the Export CSV/JSON buttons (and any .pt-toggle control) above the trackers, in Senserva green with navy text. */ .pt-toggle { background: #80BC00; color: #001B52; border: 1px solid #80BC00; border-radius: 8px; padding: 5px 12px; font-family: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer; } .pt-toggle:hover { filter: brightness(1.08); }